SnappSupply! UI KIT

In SnappSupply!, we use Material UI as the main theme, but we change it a lot. For making all Supply project look like same, we export UI KIT and add it as a separate package.

Install UI KIT

For installing Supply UI KIT, you have to add the package to project:

npm i @snapp-supply/ui-kit

or using yum:

yum add @snapp-supply/ui-kit

How to use UI KIT

Mostly all UI Components extends from Material UI Components. Fow now, we have these components:

SupplyBanner
SupplyButton
SupplyChip
SupplyItemCounter

SupplyBanner

<SupplyBanner
    href="google.com"
    imageUrl="https://picsum.photos/327/120"
/>

SupplyButton

<SupplyButton variant="contained" color="primary">
        Primary
</SupplyButton>

<SupplyButton variant="contained" color="secondary">
        صفحه اصلی
</SupplyButton>

<SupplyButton variant="outlined" color="secondary">
        مشاهده سفارش
</SupplyButton>

<SupplyButton mini="true" variant="contained" color="secondary">
    افزودن
</SupplyButton>

<SupplyButton
    mini="true"
    variant="outlined"
    color="secondary"
    disableElevation
>
    افزودن
</SupplyButton>

<SupplyButton
    variant="contained"
    color="secondary"
    href="#supply-button"
    style={{width: '100%'}}
>
    Link
</SupplyButton>

<SupplyButton
    color="primary"
    style={{width: '100%'}}
>
    Link
</SupplyButton>

<SupplyButton
    color="primary"
    endIcon={<CloudUploadIcon />}
>
    Link
</SupplyButton>

SupplyChip

<SupplyChip label="خرید‌های قبلی" />

<SupplyChip label="لبنیات" color="secondary" />

<SupplyChip label="سس" color="default" />

SupplyItemCounter

<SupplyItemCounter
    addFunction={addFunction}
    removeFunction={removeFunction}
    value={value}
/>