de-suite-me-ui

v1.0.80

Published

4 years ago

ui components for desmart's DeSuite.me products

0High
0Medium
0Low

sptaszek92

de-suite-me-ui

ui components for DeSuite.me products

Install

yarn add de-suite-me-ui

Demo

To preview the demo of the component run storybook that is available in the example catalog

cd example
yarn
yarn start

Usage

import { ThemeProvider, Input } from 'de-suite-me-ui'

class App extends Component {

  render() {
    return (
        <ThemeProvider theme={theme}>
            <Input />
        </ThemeProvider>
    )
  }
}

Theme

Default theme:

 {
  palette: {
    common: {
      black: '#000',
      white: '#fff',
      dustyGray: '#979797',
      dustyGrayTransparent: '#9797973b',
      slateGray: '#788995',
      alto: '#d8d8d8',
      gallery: '#f0f0f0',
      hurricane: '#847e7d',
      mystic: '#dee3ec',
      mercury: '#e9e9e9',
      gray: '#838383',
      catskillWhite: '#F4F7FA',
      doveGray: '#707070',
      mineShaft: '#2c2c2c',
      whisper: '#f5f6fa',
      osloGray: '#868789',
      titanWhite: '#fefeff'
    },
    background: {
      paper: '#fff',
      default: '#fafafa'
    },
    primary: {
      main: '#ff9347',
      light: '#ffb37d',
      dark: '#fc6e08',
      contrastText: '#fff',
      transparent: '#ffb06b26'
    },
    secondary: {
      main: '#8653D0',
      light: '#A27DD9',
      dark: '#62399c',
      contrastText: '#fff'
    },
    tertiary: {
      main: '#2ebec4',
      light: '#5adbe0',
      dark: '#1d9ca0',
      contrastText: '#fff'
    },
    error: {
      light: '#e57373',
      main: '#f44336',
      dark: '#d32f2f',
      contrastText: '#fff'
    },
    warning: {
      light: '#ffb74d',
      main: '#ff9800',
      dark: '#f57c00',
      contrastText: 'rgba(0, 0, 0, 0.87)'
    },
    info: {
      light: '#64b5f6',
      main: '#2196f3',
      dark: '#1976d2',
      contrastText: '#fff'
    },
    success: {
      light: '#81c784',
      main: '#4caf50',
      dark: '#388e3c',
      contrastText: 'rgba(0, 0, 0, 0.87)'
    },
    text: {
      main: '#282166'
    }
  },
  shape: {
    borderRadius: '4px'
  },
  shadows: {
    main: '4px 0 20px 0 rgba(37, 38, 94, 0.1)'
  },
  transitions: {
    easing: {
      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
    },
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195
    }
  },
  zIndex: {
    mobileStepper: 1000,
    speedDial: 1050,
    appBar: 1100,
    drawer: 1200,
    modal: 1300,
    snackbar: 1400,
    tooltip: 1500,
    dropdown: 1700
  },
  typography: {
    fontFamily: '\'Montserrat\', \'Open Sans\', sans-serif'
  },
  dimensions: {
    navHeight: '60px',
    bottomNavHeight: '54px',
    footerHeight: '54px',
    footerHeightMobile: '46px',
    navigationFullDrawerWidth: '240px',
    navigationShrinkDrawerWidth: '59px',
    authFormWidth: '600px',
    authRightSideBarWidth: '350px',
    inputHeight: '48px',
    buttonNormalHeight: '48px',
    buttonSmallHeight: '32px',
    buttonLargeHeight: '60px'
  },
  breakpoints: {
    mobile: 768,
    smallDesktop: 1024
  },
  breakpointsMedia: {
    mobile: '@media (max-width: 768px)',
    smallDesktop: '@media (max-width: 1024px)'
  }
}

Available components

Button

Button communicate actions that users can take.

| prop | default | description | |--------------|-----------|--------------------------------------------------------------------------------------------------------------| | size | 'normal' | one of: 'small', 'normal', 'large' | | color | 'primary' | sets the color defined in the theme, one of: 'primary', 'secondary', 'tertiary' | | variant | 'contained' | sets the color fill method, one of: 'contained', 'outlined' | | disabled | false | toggle button activity | | onClick | () => {} | onClick action | | startIcon | undefined | puts element (node) at the start of buttons children as sets a marginRight to it | | type | 'button' | button type | | autofocus | undefined | button autofocus | | name | undefined | button name | | value | undefined | button value |

IconButton

Button communicate actions that users can take, expect to receive an svg Icon as a children.

Input

Input component is a complete form control including a label, input and error text.

| prop | default | description | |--------------|-----------|-----------------------------------------------------------------------------| | name | undefined | input name | | label | '' | label of the text input field | | required | false | adds '*' next to the label | | disabled | false | toggle inputs activity | | type | 'text' | input type | | autoComplete | 'false' | inputs autocomplete attribute | | autoFocus | false | inputs autofocus attribute | | value | '' | default value of input | | error | false | if true it is showing up the errorText prop and receives error color styles | | errorText | '' | error label text - shows only if error is set to true | | inputProps | {} | pass additional props to input tag | | inputRef | null | set ref to input tag | | onChange | () => {} | on input change function | | onFocus | () => {} | on input focus function | | onBlur | () => {} | on input blur function |

SingleSelect

Single select component is a complete form control including a label, input and error text. Allows to select one of pre-defined options. Component is based on react-select (^3.1.0) package.

| prop | default | description | |--------------|-----------|------------------------------------------------------------------------------------------------------------| | label | '' | label of the select field | | required | false | adds '*' next to the label | | disabled | false | toggle select activity | | error | false | if true it is showing up the errorText prop and receives error color styles | | errorText | '' | error text - shows only if error is set to true | | options | [] | list of options to display, eg, [ { label: "Option label", value: "option-value" } ] |

and all other react-select props

MultiSelect

Multi select component is a complete form control including a label, input and error text. Allows to select multiple of pre-defined options. Component is based on react-select (^3.1.0) package.

| prop | default | description | |--------------|-----------|------------------------------------------------------------------------------------------------------------| | label | '' | label of the select field | | required | false | adds '*' next to the label | | disabled | false | toggle select activity | | error | false | if true it is showing up the errorText prop and receives error color styles | | errorText | '' | error text - shows only if error is set to true | | options | [] | list of options to display, eg, [ { label: "Option label", value: "option-value" } ] |

and all other react-select props

CreatableSelect

Creatable select component is a complete form control including a label, input and error text. Allows to select one or multiple of pre-defined options and allows to create a new option that doesn't exist in the list. Component is based on react-select (^3.1.0) package.

| prop | default | description | |--------------|-----------|------------------------------------------------------------------------------------------------------------| | label | '' | label of the select field | | required | false | adds '*' next to the label | | disabled | false | toggle select activity | | error | false | if true it is showing up the errorText prop and receives error color styles | | errorText | '' | error text - shows only if error is set to true | | options | [] | list of options to display, eg, [ { label: "Option label", value: "option-value" } ] | | isMulti | false | allow to select more than one option |

and all other react-select props

AsyncSelect

Async select component is a complete form control including a label, input and error text. Allows to select one or multiple of options returned by a promise function and allows to create a new option that doesn't exist in the list. Component is based on react-select (^3.1.0) package.

| prop | default | description | |--------------|-----------|------------------------------------------------------------------------------------------------------------| | label | '' | label of the select field | | required | false | adds '*' next to the label | | disabled | false | toggle select activity | | error | false | if true it is showing up the errorText prop and receives error color styles | | errorText | '' | error text - shows only if error is set to true | | options | Promise | Promise function that returns select options, eg, [ { label: "Option label", value: "option-value" } ] | | isMulti | false | allow to select more than one option |

and all other react-select props

| prop | default | description | |--------------|-----------|------------------------------------------------------------------------------------------------------------| | trigger | | trigger which opens the menu | | open | false | defines if menu is opened or closed | | handleClose | () => {} | function that sets 'open' to true | | handleOpen | () => {} | function that sets 'open' to false | | children | undefined | list of menu choices. I suggest using MenuItem as an option| |

MenuItem

MenuItem is a container of one choice available in Menu component.

| prop | default | |--------------|-----------| | children | undefined |

InfoMessage

InfoMessage displays message in a box with defined severity color.

| prop | default | description | |--------------|-----------|------------------------------------------------------------------------------------------------------------| | type | 'info' | one of: 'info', 'warning', 'error', 'success' | | startIcon | undefined | puts element (node) at the start of buttons children as sets a marginRight to it | | children | undefined | message text |

SwipeableDrawer

SwipeableDrawer opens left/right drawer by swipe or by trigger

| prop | default | description | |--------------|-----------|------------------------------------------------------------------------------------------------------------| | open | false | defines if drawer is opened or closed | | width | undefined | sets the width of opened drawer, if undefined it is set as '100vh - 20px' | | children | undefined | drawer content | | anchor | 'left' | one of: 'left', 'right' | | handleClose | () => {} | function that sets 'open' to false |

NavigationMobile

NavigationMobile is a mobile navigation that contains top nav with swipeable drawer

| prop | default | description | |----------------------|--------------------|------------------------------------------------------------------------------------------------------------| | logo | default Panda logo | app logo | | rightElement | undefined | jsx element that should be displayed as a right menu item | | children | undefined | drawer content | | drawerBottomElements | undefined | elements at the bottom of drawer (eg. logout link) | | appName | undefined | app name that will be shown next to the logo | | onLogoClick | () => {} | function triggered after logo onClick (eg. navigate to main page) |

SideNavigation

SideNavigation is a navigation shown usually for authorised users. It is expanding/shrinking on hover

| prop | default | description | |----------------------|--------------------|------------------------------------------------------------------------------------------------------------| | logo | default Panda logo | app logo | | children | undefined | content, usually list of SideNavListItem | | bottomElements | undefined | elements at the bottom of navigation (eg. logout link) | | appName | undefined | app name that will be shown next to the logo | | onLogoClick | () => {} | function triggered after logo onClick (eg. navigate to main page) |

SideNavListItem

SideNavListItem is a side navigation element, usually used for navigation links

| prop | default | description | |----------------------|--------------------|------------------------------------------------------------------------------------------------------------| | isActive | false | defines if the element has active (colored) state | | onClick | () => {} | action triggered after clicking the item | | icon | undefined | icon of the item | | text | '' | item name | | visible | true | defines if element should be displayed or not (eg. set as false if item should be visible only for admin) |

TopNavigation

SideNavigation is a navigation shown usually for authorised users. It is expanding/shrinking on hover

| prop | default | description | |----------------------|--------------------|------------------------------------------------------------------------------------------------------------| | logo | default Panda logo | app logo | | children | undefined | content, usually list of TopNavListItem | | appName | undefined | app name that will be shown next to the logo | | onLogoClick | () => {} | function triggered after logo onClick (eg. navigate to main page) |

TopNavListItem

TopNavListItem is a navigation element displayed in top navigation

| prop | default | description | |----------------------|--------------------|------------------------------------------------------------------------------------------------------------| | isActive | false | defines if the element has active (colored) state | | onClick | () => {} | action triggered after clicking the item |

Icons

svg icons that are fully customizable by font-size and font-color.

available icons:

AddUserIcon,
CalendarIcon,
DotsMenuIcon,
FiltersIcon,
HeartIcon,
LogoutIcon,
PerformanceIcon,
PieChartIcon,
PlugIcon,
StarIcon,
ThumbsUpIcon,
UserIcon

Usage:

import { AddUserIcon } from 'de-suite-me-ui'

class App extends Component {

  render() {
    return (
        <div>
            <AddUserIcon />
        </div>
    )
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

de-suite-me-ui

Install

Demo

Usage

Theme

Available components

Button

IconButton

Input

SingleSelect

MultiSelect

CreatableSelect

AsyncSelect

Menu

MenuItem

InfoMessage

SwipeableDrawer

NavigationMobile

SideNavigation

SideNavListItem

TopNavigation

TopNavListItem

Icons

License