@bynd-ui-library/react NPM

🚀 bynd-ui-library

BYND UI Component Library built for React to provide a composable and extensible component library and design system to reuse across client projects.

📖 Getting Started

Refer to the documentation for installation and usage https://bynd-ui-library.vercel.app/

🥷 Contributing

To contribute please follow our CONTRIBUTING guidelines.

Prerequisites

Install nvm to manage Node.js versions.
NodeJS Open-source, cross-platform, back-end, JavaScript runtime environment.

@bynd-ui-library/react has been built on top of @mui/material, refer to their documentation https://mui.com/material-ui/getting-started/overview/ for more detailed API references.

Install

nvm use
npm i

Directory Structure

  .
  ├── docs                    # Storybook documentation pages
  ├── public                  # Storybook and Vite public directory
  ├── src                     # Package src code
  │   ├── component           # All UI components, including MUI wrappers and custom components
  │   ├── foundation          # Storybook foundation styles documentation
  │   ├── hooks               # Custom react hooks
  │   ├── styles              # Global (non-scoped) CSS
  │   ├── themes              # Preset theme configurations
  │   ├── tokens              # Shared design tokens
  │   ├── types               # TypeScript declaration files
  │   └── utils               # Generic util functions
  ├── test-utils              # Unit test utilities and mocks
  ├── storybook-static        # Compiled storybook
  └── dist                    # Compiled package dist code

Commands

Command	Description
`npm run build`	Build library package for publishing
`npm run storybook`	Run storybook dev server for local development
`npm run build-storybook`	Build storybook for production
`npm run format`	Prettier formatting check
`npm run format:fix`	Fix prettier formatting errors
`npm run lint`	Runs all linters
`npm run lint:scripts`	Run eslint
`npm run lint:scripts:fix`	Fix eslint errors
`npm run lint:styles`	Run stylelint
`npm run lint:styles:fix`	Fix stylelint errors
`npm run lint:markdown`	Run markdownlint
`npm run lint:markdown:fix`	Fix markdownlint errors
`npm run lint:commit`	Run commitlint against last commit message
`npm run commit`	`git commit` fallback to run `commitizen`
`npm test`	Run jest unit tests
`npm test:coverage`	Run jest unit tests with code coverage reports (check report locally with `npx http-server ./coverage`)
`npm test:watch`	Run jest unit tests with file watching