@mojito-inc/core-ui

☁️ Mojito Modules - Core UI

👨‍💻 React components for the Mojito Platform, Reference App and third-party projects, including Mojito's Core UI

Version: 1.0.0

You can install this project with one of these commands:

npm install --save @mojito-inc/core-ui



yarn add @mojito-inc/core-ui

Once the package is installed, you can import the library using import;

  import { CoreUIThemeProvider } from "@mojitoinc/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/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/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/core-ui";

  <TextInput
    placeholder=<placeholder>
    value=<value>
    InputPropsStyle=<InputPropsStyle>
    sx=<sx>
    error=<error>
    type=<type>
    disabled=<disabled>
    autoFocus=<autoFocus>
    onChange=<onChange>
    />

Param	type	Required	Default	Description
placeholder	string
value	string
InputPropsStyle	SxProps
sx	SxProps
error	string
type	string		text
disabled	boolean		false
autoFocus	boolean		false
inputRef	React.Ref
onChange	event(event: React.ChangeEvent)

BaseModal

  import { BaseModal } from "@mojitoinc/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/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