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.

$3

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.

``typescript
// 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.

`typescript
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.

`javascript
// 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')
]);
`

$3

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

Icon Systems

This library supports two icon systems with universal automatic detection. All components automatically support both systems - just pass your icon!

$3

Default icon system using SVG strings:
`javascript
import { Icon } from '@base-framework/ui/atoms';
import { Icons } from '@base-framework/ui/icons';

Icon({ size: 'md' }, Icons.home)
Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
`

$3

Google's Material Symbols with 11,000+ icons in 4 style variants:
`javascript
import { MaterialIcon } from '@base-framework/ui/atoms';
import { MaterialSymbols } from '@base-framework/ui/icons';

MaterialIcon({ name: MaterialSymbols.home, size: 'md', variant: 'filled' })
Button({ variant: 'withIcon', icon: MaterialSymbols.add }, 'Add')
`

$3

All components (Button, Alert, Modal, Dialog, Navigation, etc.) automatically detect and render both icon types:

`javascript
// Both work - no configuration needed!
Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
Button({ variant: 'withIcon', icon: MaterialSymbols.add }, 'Add')
Button({ variant: 'withIcon', icon: 'add' }, 'Add') // Material Symbol name
`

Style Variants: outlined (default), filled, rounded, sharp`

See UNIVERSAL-ICON-GUIDE.md for complete documentation.
See ui.wiki/09-Material-Symbols.md for Material Symbols guide.

Documentation

For comprehensive documentation, see the ui.wiki folder.