@bitsmedia/web-ui-components NPM

How to use

npm install @bitsmedia/web-ui-components

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

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