How to use

npm install @bitsmedia/web-ui-components

or

yarn add @bitsmedia/web-ui-components

• Import stylesheet in the project for muslim pro import '@bitsmedia/web-ui-components/styles-mp.css'
• Import stylesheet in the project for qalbox import '@bitsmedia/web-ui-components/styles-qb.css'
• Import presets for either MuslimPro or Qalbox theme import { MpBasePreset, QbBasePreset } from '@bitsmedia/web-ui-components/presets' in tailwind.config.
• presets: [MpBasePreset], add the preset into the tailwind config object.
• Enable darkmode: class in the tailwind config object
• Update content array of config and put this as first item './node_modules/@bitsmedia/web-ui-components/**/*.{js,jsx,ts,tsx}',

Get Started

npm run storybook

or

yarn storybook

Test locally

• npm link with directory. This will create a symlink between the package and the global NPM installation directory.
• Go to the project where you want this test this library. npm link web-ui-components
• npm install

How to release a version

• Following the semantic versioning update the version in package.json conventional commits
• Merge the changes to the main branch
• After its merged, from Github make a release (follow the version naming in package.json as the release name)

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

    parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
},

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list