Documentation:

Project - Innowise Lab Internship: Custom-components-lib

Task - Create custom components UI library.

Technical requirements:

• [x] Configure ESLint, Prettier, implemented pre-commit hook
• [x] Configure webpack for React, TS, Jest.
• [x] CSS modules (SCSS) are presumed to be used for styling
• [x] All components should be represented in Storybook
• [x] Prepare unit tests using Jest and React testing library, all props should be covered with tests
• [x] Documentation is obligatory

Links:

Npm

Repository

Components:

Button

Required props:

1. variant: “text” | “contained” | “outlined” , contained as default
2. disabled
3. onClick
4. size: “small” | “medium” | “large”

Checkbox

Required props:

1. checked
2. onChange
3. disabled
4. label

Switch

Required props:

1. checked
2. onChange
3. disabled

Modal

Required props:

1. open
2. onClose
3. children

Textfield

Required props:

1. disabled
2. error

Select

Required props:

1. options

Available Scripts and Commands

# Install

npm i                # install dependencies

# General

> npm pub           # build app and publish to npm
> npm run storybook # run storybook locally

# Test

> npm run test      # run tests using Jest and React testing library

Folder structure

• PROJECT
  • /.__mocks (svg mocks for correct testing)
  • /.husky (git hooks such as pre-commit hook)
  • /dist (production build of the project)
  • /node_modules (dependencies)
  • /src (development version of the project)
    • /components (project components)
    • global.d.ts (typescript declaration)
    • index.js
  • ...configuration files.