Mui Clone

this is a "clone" of material ui using atomic-library-core. it's a recreation of the most components

differences

in this package you need to replace "variant" with "type" and "color" with "subType". for instance

    <Btn type="filled" subType="primary">Click here</Btn>
    <Btn type="ghost" subType="success">Click here</Btn>

types

• filled
• ghost
• text
• smooth

sub types

• primary
• secondary
• success
• danger
• warning
• info
• disabled
• dark

Note: if the component is an input, you can use inputType to set the type of the input

Also, when using component prop, you need to use capitalize, since the component uses atomic-library-core components. for example:

<Btn component="H1" >click</Btn>
//instead of using
<Btn component="h1" >click</Btn>
//or
<Avatar component="Button" >click</Avatar>
//instead of using
<Avatar component="button" >click</Avatar>

Examples

import { Btn, BtnGroup, Checkbox, ...rest } from "mui-clone"

    <Btn>default</Btn>
    <Btn type='filled' subType='primary'>Click here</Btn>
    <Btn type='ghost' subType='success'>Click here</Btn>
    <Btn type='smooth' subType='danger'>Click here</Btn>
    <Btn type='text' subType='secondary'>Click here</Btn>

    <BtnGroup>
        <Btn>Click here</Btn>
        <Btn type='ghost' subType='success'>
            Click here
        </Btn>
        <Btn type='smooth' subType='danger'>
            Click here
        </Btn>
        <Btn type='text' subType='secondary'>
            Click here
        </Btn>
    </BtnGroup>
    <BtnGroup fullRounded mT='10px' type='text' subType='success' >
        <Btn>Click here</Btn>
        <Btn>Click here</Btn>
        <Btn>Click here</Btn>
    </BtnGroup>

    <Checkbox />
    <Checkbox defaultChecked />
    <br />
    <Checkbox disabled />
    <Checkbox disabled checked />
    <br />
    <Checkbox label='label' />
    <Checkbox>label</Checkbox>
    <br />
    <Checkbox subType='success' />
    <Checkbox subType='danger' />
    <br />
    <Checkbox colorCheck='orange' />
    <Checkbox colorCheck='brown' />
    <br />
    <Checkbox flowRowReverse>Terms</Checkbox>

    <RadioGroup
        value={radioValue}
        onChange={(e) => setRadioValue(e.target.value)}
        subType='success'
    >
        <Radio value='label 1' label='label 1' />
        <Radio value='label 2'>label 2</Radio>
    </RadioGroup>

Status of components

in the following tables i expose information about the components with the categories: component, status and description.

Note: although many of them have the status "done", this being the first version, the components are not perfect and with some missing functionalities.

Note: the "not necessary" state means the component can be easily recreated by atomic-library-core components

Inputs

component	state	description
Autocomplete	Not yet
Button	replaced	this component was replaced with `Btn`
Btn	done	this is the replacement for `Button`. This component return directly a `Button` element from atomic-library-core
ButtonGroup	replaced	this component was replaced with `BtnGroup`
BtnGroup	done	this is the replacement for `ButtonGroup`
Checkbox	done
Fab floating action button	not necessary	.
Radio	done
RadioGoup	done
Rating	not yet
Slider	replaced	This component was replaced with Range
Range	in process	this is the replacement for Slider
Select	not yet
Switch	done
TextField	not yet
ToggleButton	in process

data display

Avatar	done
AvatarGroup	done
Badge	done
Chip	done
Divider	not yet
ContentItem	done	this is a new component. receive the following props: type,subType, disabled, size, action, onClose, selected, display, title, content. in a next version of this documentation wil more explained
List	done
Table	not yet
Tooltip	not yet
Typography	not necessary

feedback

Alert	Done
Backdrop	done
Dialog	not necessary
Progress	not yet
Skeleton	done	this compoenent is Span element from atomic-library-core with a default. you can use use any prop of Span element, but the main ones in this componet are height or h, with or w, borderRadius or br and background or bg. note: missing animation
Snackbar	done

surfaces

Accordion	done	in this case, only this component is required. receive the following props: type, subType, action, disabled, selected, display, title, content, description, onClose, size = 'md',
Appbar	not necesary
Card	not necessary
Paper	not necessary

navigation

BottomNavigation	not necessary
breadcrumbs	not yet
Drawer	not yet
Link	done
not yet
SpeedDial	not yet
Stepper	not yet
Taps	not yet

layout

Box	not necessary
Container	not necessary
Grid	not necessary
Stack	not necessary
	ImageList	not necessary

utils

this section is different to the original, and is stil in process

Collapse	done
getTypes	done
Slider	in process