@base-framework/ui

Base UI

Version: 1.0.0

Overview

This documentation aims to guide the enhancement of component scalability and reusability within your projects through the use of organisms. Organisms are designed to function as the medium building blocks in a component-based architecture.

This module will add default organisms to your project.

Atomic Design

If you need to learn about atomic design, please refer to the Atomic Design documentation.

To learn more about Base framework or how to build atoms, refer to the Base documentation.

Oragnism Structure

Organisms can be created using atoms, other organisms, and components. Atoms are the smallest building blocks of a component, while components are composed of atoms and other components. Organisms are a collection of atoms and components that form a larger structure.

// Atom
const Link = Atom((props, children) => ({
    ...props,
    children,
    tag: 'a',
}));

// Organism Atom
const Link = Atom((props, children) => (
    Link({...props }, [
        Icon({ class: 'icon' }),
        children
    ])
));

// Organism Atom with Component
const Link = Atom((props, children) => (
    Nav([
        Ul([
            Li([
                Link([
                    Icon({ class: 'icon' }),
                    Span('Text')
                ])
            ])
        ])
    ]),
    new List({...props }, [
        children
    ])
));

// Organism Function with Component
const List = (props, children) => Div([
    Header([
        H1('Title')
    ]),
    new List({...props }, [
        children
    ])
]);

Organisms Nesting

Organisms should use composition to nest other atoms, organisms, or components.

const SecondaryButton = Atom((props, children) => (Button({
    ...props,
    class: 'secondary-btn',
    children
}));

Utilization of Organisms

To leverage an organism, invoke its function and pass the requisite values via a props and children. The organisms created with the Atom callback functions support passing optional props or children to the atom. The props object should always be first but if the atom does not require props, the children array or string can be passed as the first argument.

// props only
Div({class: 'text'});

// text child only
Div('test');

// array child only
Div([
    Div('test')
]);

// props and text child
Div({class: 'text'}, 'test');

// props and array children
Div({class: 'text'}, [
    Div('test'),
    Div('test')
]);

Example of Atom Utilization

SecondaryButton({
    click(e) =>
    {
        // Handle the click event
    }
})