@nicklabs/uikit-react v0.1.0

NickLabs UI kit for React

TODO

Development

• npm run lint: Lint
• npm run dev: Launches storybook
• npm run storybook:build: Creates a static version of storybook inside the folder storybook-static

Build

• npm run build: Builds the library with Rollup

Note on the bundling strategy

The bundling stratgey used consists in compiling as 1 file, for both CommonJS and ESM, the latter allowing the target application to do the tree shaking. This different from material-ui which also bundles the components separately. The follolwing articles have been helpful: tree shaking, write a tree shakeable component.

Testing

The folder /tests provides tests and integration examples:

• create-react-app shows an example to use the library. cd ./tests/create-react-app and run npm run start or npm run build:serve. NB: for that package, the library has been linked to the root package.
• create-next-app provides an example to use the library with server side rendering with nextjs. cd ./tests/create-next-app and run npm run dev. TO DO: add server rendered example in the file _document.tsx.

NOTE: If an application is being developped locally along with that package, React needs to be linked correctly. To do that, link React from the app folder to the library folder by running npm link ../../node_modules/react to link to react from the app folder. Do the same with react-dom.

Deployment

• tag release.
• npm publish: Publish as a npm package

Use in an application

• Install the library: npm i @nicklabs/uikit-react
• Install the required fonts:
  • Roboto (default font): <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  • Material-Icons (default font used with <FontIcon>): <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Components list

• Providers

  • AppProvider, includes ThemeProvider + JssProvider
  • ThemeProvider
  • JssProvider
  • IntlProvider, optional
  • DialogProvider, optional
  • ToastProvider, optional
  • LoadingBarProvider, optional

• Layout

  • AppBar
  • AppFooter
  • FlexBox
  • Gallery
  • Grid
  • List
  • Modal
  • Paper
  • Skeleton
  • Tabs

• Components

  • Accordion
  • Avatar
  • Badge
  • ButtonBase
  • Button
  • ButtonIcon
  • ButtonGroup
  • Card
  • Carousel > move event to finetune
  • Chip
  • CircularProgress
  • Collapsible
  • Dialog
  • Divider
  • Drawer
  • FontIcon
  • Image
  • LinearProgress
  • Link
  • LoadingBar
  • LoadingDots
  • Menu
  • Scrollable
  • Spinner
  • SvgIcon
  • Table
  • Text
  • Toast
  • Tooltip
  • Video

• [] Forms

  • Form + useForm
  • Slider, add label
  • Checkbox OK
  • Switch
  • TextField, to finish

• Utils

  • NoSSR
  • CssReset
  • MediaQuery
  • EventListener
  • KeypressListener
  • ClickAwayListener
  • Portal
  • Head
  • Backdrop
  • Ripples
  • Popover
  • TrapFocus: 'react-focus-lock' is used