@alexinx/mojito-core-ui
v2.4.0
Published
Mojito UI components SNAPSHOT
Downloads
1
Readme
Using this library in your project Core UI
If you have Personal token follow step 2
Step - 1
Create Personal token: https://github.com/settings/tokens
- Generate New Token (Classic)
- enable following permission
- [x] read:packages Download packages from GitHub Package Registry
Step 2
create .npmrc file from root dir and copy & paste following code,
Copy the personal token and replace to <PROFILE_TOKEN>
@mojitonft:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<PROFILE_TOKEN>
You can install this project with one of these commands:
npm install --save @mojitoinc/mojito-core-ui
yarn add @mojitoinc/mojito-core-ui
Once the package is installed, you can import the library using import;
import { CoreUIThemeProvider } from "@mojitoinc/mojito-core-ui";
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
primary: {
main: "#FDCC35",
},
secondary: {
main: "#356045",
},
background: {
default: "#000",
},
text: {
primary: "#000",
},
grey: {
100: "#868b93",
},
divider: "#fff",
},
});
<CoreUIThemeProvider theme={ theme }>
<Component {...pageProps} />
</CoreUIThemeProvider>
Accordion
import { Accordion } from "@mojitoinc/mojito-core-ui";
<Accordion
open=<open>
label=<label>
children=<children>
labelStyle=<labelStyle>
collapseIcon=<collapseIcon>
expandIcon=<expandIcon>
/>
|Param |type | Required | Default | Description |:--- | --- | :---:| :---:| :---:| |open| boolean|| false| |label| string |✅| |children| JSX.Element |✅| |labelStyle| SxProps| | | |collapseIcon| JSX.Element | | RemoveIcon | |expandIcon| JSX.Element| | AddIcon |
Breadcrumbs
import { Breadcrumbs, BreadcrumbItem } from "@mojitoinc/mojito-core-ui";
<Breadcrumbs
list=<BreadcrumbItem[]>
selectedValue=<selectedValue>
separator=<separator>
separatorStyle=<separatorStyle>
itemStyle=<itemStyle>
itemHighlightedStyle=<itemHighlightedStyle>
/>
|Param |type | Required | Default| Description |:--- | --- | :---:| :---:| :---:| |list| object|✅| [] |BreadcrumbItem| |selectedValue| string |✅| |separator| JSX.Element | |NavigateNextIcon| | |separatorStyle| SxProps| | { fontSize: 13 }| |itemStyle| SxProps | | { fontWeight: 500, fontSize: '12px' }| |itemHighlightedStyle| SxProps || { fontWeight: 700, fontSize: '12px', color: '#000' }|
interface
BreadcrumbItem
|Param |type | Required | Description |:--- | --- | :---:| :---:| |label| string|✅| | |value | string |✅| |
TextInput
import { TextInput } from "@mojitoinc/mojito-core-ui";
<TextInput
placeholder=<placeholder>
value=<value>
InputPropsStyle=<InputPropsStyle>
sx=<sx>
error=<error>
type=<type>
disabled=<disabled>
onChange=<onChange>
/>
|Param |type | Required | Default| Description |:--- | --- | :---:| :---:| :---:| |placeholder| string|| |value| string | | |InputPropsStyle| SxProps | | | |sx| SxProps| | | |error| string | | |type| string | | text |disabled| boolean| | false |onChange| event(event: React.ChangeEvent)|
BaseModal
import { BaseModal } from "@mojitoinc/mojito-core-ui";
<BaseModal
title=<title>
content=<content>
children<children>
titleStyle=<titleStyle>
contentStyle=<contentStyle>
/>
|Param |type | Required | Default| Description |:--- | --- | :---:| :---:| :---:| |title| string|| |content| string | | |children| JSX.Element | | |titleStyle| SxProps | | | |contentStyle| SxProps| | |
TabSwitcher
import { TabSwitcher, TabPanel } from "@mojitoinc/mojito-core-ui";
<TabSwitcher
value=<value>
children=<children>
/>
<TabPanel
id=<id>
children=<children>
/>
<TabSwitcher value='one'>
<>
<TabPanel id='one'>
<p>one</p>
</TabPanel>
<TabPanel id='two'>
<p>two</p>
</TabPanel>
</>
</TabSwitcher>
TabSwitcher
|Param |type | Required | Default| Description |:--- | --- | :---:| :---:| :---:| |value| string|✅| |children| JSX.Element |✅ |
TabPanel
|Param |type | Required | Default| Description |:--- | --- | :---:| :---:| :---:| |id| string|✅| |children| JSX.Element |✅ |
Trobuleshoot
yarn storybook ERR_OSSL_EVP_UNSUPPORTED
export NODE_OPTIONS=--openssl-legacy-provider