Catalyst-ui_reactlibrary NPM

CATALYST UI library

UI components for Catalyst Applications

Setup

After Cloning Down this Repository...

Install dependencies: npm install
Run Storybook: npm run storybook
Visit: localhost 6006

Components

LystThemeProvider

Code Sandbox Example Must wrap root App component with LystThemeProvider Else render individual Lyst components as children of LystThemeProvider

Props

Name	Allowed Values	Description
theme	'orange', 'green', 'blue'	Color selection from Theme

LystLoading

Code Sandbox Example

Props

Name	Allowed Values	Description
color	'primary', 'secondary', 'inherit'	Color selection
size	any number	Size of SVG
thickness	any number	Thickness of SVG

LystDrawer

CodeSandbox Example

Props

Name	Allowed Values	Description
menuItems	Array (see below for schema)	items of the menuItems
open	boolean	open/close drawer

interface menuItems: [
  {
    name: string,
    icon: Material UI Icon,
    subItems: [
      {
        name: string,
        path: string
      }
    ]
  }
]

Example

import PersonOutline from '@material-ui/icons/PersonOutline';

[
  {
    name: 'Current Resident',
    icon: PersonOutline,
    subItems: [
      {
        name: 'homepage',
        path: `/current-resident/home`
      }
    ]
  }
]

LystLoginForm

Code Sandbox Example

Props

Name	Allowed Values	Description
handleChange	Function	Callback function onChange
required	boolean	Applies required flag
type	'password', 'username'	Type of input Field
variant	'outlined', 'filled', 'standard'	Styles for input

LystTypography

Code Sandbox Example

Props

Name	Allowed Values	Description
variant	"h1", "h2", "h3", "h4', "h5", "h6", "display1", "display2", "display3", "display4", "title", "caption", "headline", "inherit", "overline", "body1", "body2", "subtitle1", "subtitle2"	Font size/color Variation