Custom Components Lib

Author: Maria Bogdanova
GitHub Profile: Link to profile
Project GitHub Repository: Link to repository
Task documentation: Link to task

Features

UI library offers a comprehensive set of components designed for modern interfaces, similar to Material UI (MUI). Each component comes with a rich set of props and states to suit various needs:

• Button:

  • Multiple variants (contained, outlined, text)
  • Various sizes
  • Disabled state
  • Custom styling

• TextField:

  • Multiple visual styles (outlined, filled, standard)
  • Customizable input with label
  • Error handling
  • Custom styling

• Checkbox:

  • Supports checked, unchecked
  • Default check and disabled states
  • Custom styling

• Switch:

  • Modern toggle with smooth animations
  • Default check and disabled states
  • Easy form integration
  • Custom styling

• Select:

  • Versatile dropdown for single or multi-selection
  • Extensive prop support for dynamic options
  • Custom styling

• Modal:

  • Configurable dialog with header, content, and actions
  • Backdrop support and built-in transitions
  • Designed for critical alerts and information
  • Custom styling

Technologies Used

• React
• TypeScript
• SCSS
• Webpack
• ESLint
• Prettier
• Storybook
• npm
• Jest

Folder Structure

The code is organized in the src folder, with the following structure:

• src
  • components/: Contains react library components.
  • styles/: Contains SCSS files for styling the application.
  • utils/: Includes TypeScript utility files used throughout the app.
  • index.ts: Core entry file for the application, includes components exports.
  • __tests__/: Includes react test files.
• .storybook/: Includes storybook configuration.
• webpack.config.js: Includes webpack configuration.
• tsconfig.json: Includes typescript configuration.
• eslint.config.js: Includes eslint configuration.
• .prettierrc: Includes prettier configuration.
• package.json: Includes base project information, dependencies, scripts.
• global.d.ts: Includes module declarations.

Setup and Installation

To get started, follow these steps:

1. Install the Library
   Use npm or yarn to add the library to your project:

   npm install @mashabogdanoff/custom-components-lib
   # or
   yarn add @mashabogdanoff/custom-components-lib
   

2. Usage

   import { Button, TextField, Checkbox, Switch, Select, Modal } from '@mashabogdanoff/custom-components-lib';
   

3. Run Storybook Launch Storybook to view live demos and documentation of all components:

   npm run storybook
   # or
   yarn storybook
   

Available Scripts

Below is a list of all scripts defined in the project and their purpose:

• Build the project
  Builds the application for production using Webpack. Outputs the optimized code into the dist folder.

  npm run build
   

• Storybook
  Launches Storybook in development mode on port 6006 so you can interactively preview components.

  npm run storybook
   

• Build Storybook
  Runs storybook build to generate a static version of your Storybook UI. It's a simple, efficient way to prepare your documentation for production deployment.

  npm run build-storybook
   

• Lint the code
  Analyzes all JavaScript and TypeScript files in the src folder for potential issues based on ESLint rules.

  npm run lint
   

• Lint and fix issues automatically
  Runs the ESLint linter and attempts to automatically fix issues in JavaScript and TypeScript files.

  npm run lint:fix
   

• Format code
  Formats all JavaScript, TypeScript, SCSS, and HTML files in the src folder using Prettier.

  npm run format
   

• Run all test files
  Executes all test files in the project to ensure code functionality and correctness.

  npm run test
     

• Publish the package
  Builds the project and publishes the package to the npm registry with public access.

  npm run publish-package