{"_id":"@careercopilotui/ui-library","name":"@careercopilotui/ui-library","dist-tags":{"beta":"0.0.1-beta.2","latest":"0.0.1-beta.2"},"versions":{"0.0.1-beta.2":{"name":"@careercopilotui/ui-library","version":"0.0.1-beta.2","description":"Enterprise React UI Component Library with Material UI, Design Tokens, and Storybook","author":{"name":"Enterprise UI Team"},"license":"MIT","private":false,"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":false,"scripts":{"dev":"vite","build":"tsc -p tsconfig.build.json && vite build","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","lint":"eslint . --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0","lint:fix":"eslint . --ext .ts,.tsx --fix","format":"prettier --write \"src/**/*.{ts,tsx,css,md}\"","format:check":"prettier --check \"src/**/*.{ts,tsx,css,md}\"","tokens:build":"node scripts/scss-to-tokens.mjs src/tokens/tokens.scss src/tokens/generated-tokens.ts","typecheck":"tsc --noEmit","commit":"cz","prepare":"husky","release":"semantic-release"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@emotion/react":"^11.13.3","@emotion/styled":"^11.13.0","@mui/icons-material":"^6.2.0","@mui/material":"^6.2.0"},"devDependencies":{"@chromatic-com/storybook":"^3.2.2","@commitlint/cli":"^19.6.1","@commitlint/config-conventional":"^19.6.0","@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@storybook/addon-a11y":"^8.4.7","@storybook/addon-essentials":"^8.4.7","@storybook/addon-interactions":"^8.4.7","@storybook/addon-links":"^8.4.7","@storybook/addon-themes":"^8.4.7","@storybook/react":"^8.4.7","@storybook/react-vite":"^8.4.7","@storybook/test":"^8.4.7","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.1.0","@testing-library/user-event":"^14.5.2","@types/react":"^19.0.1","@types/react-dom":"^19.0.1","@typescript-eslint/eslint-plugin":"^8.18.1","@typescript-eslint/parser":"^8.18.1","@vitejs/plugin-react":"^4.3.4","@vitest/coverage-v8":"^2.1.8","commitizen":"^4.3.1","cz-conventional-changelog":"^3.3.0","eslint":"^9.17.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.7.0","eslint-plugin-import":"^2.31.0","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-react":"^7.37.3","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-storybook":"^0.11.1","globals":"^15.14.0","husky":"^9.1.7","jsdom":"^25.0.1","lint-staged":"^15.3.0","prettier":"^3.4.2","react":"^19.0.0","react-dom":"^19.0.0","semantic-release":"^24.2.0","storybook":"^8.4.7","typescript":"^5.7.2","vite":"^6.0.5","vite-plugin-dts":"^4.3.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"],"src/**/*.{css,md,json}":["prettier --write"]},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"git+https://github.com/your-org/enterprise-ui-library.git"},"keywords":["react","ui","component-library","material-ui","design-system","storybook","typescript","enterprise"],"_id":"@careercopilotui/ui-library@0.0.1-beta.2","bugs":{"url":"https://github.com/your-org/enterprise-ui-library/issues"},"homepage":"https://github.com/your-org/enterprise-ui-library#readme","_nodeVersion":"20.19.3","_npmVersion":"11.16.0","dist":{"integrity":"sha512-qLa0LbNZXJfklDDi8u4w6sUyXLvug19Z97XbIZWA5DmQnOgKOqLQ+/+pWz9JeNG/LCpY+YeCC6IXYoHODkf7pQ==","shasum":"8647e3bfcb55a989290495025fa4d0e1cb777c21","tarball":"https://registry.npmjs.org/@careercopilotui/ui-library/-/ui-library-0.0.1-beta.2.tgz","fileCount":37,"unpackedSize":3886826,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCrOuaH9NS9zBLOkxSnTwaKA1gfqonvXS8tha5YPSQRlwIgV76YxgLz9mqCS6DUlPcoEYSrv4HM8EIE9K3jXhISkYE="}]},"_npmUser":{"name":"rankit22","email":"rankitsinght@shriffle.com"},"directories":{},"maintainers":[{"name":"rankit22","email":"rankitsinght@shriffle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-library_0.0.1-beta.2_1785175518202_0.2059358161580802"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-27T18:05:18.025Z","0.0.1-beta.2":"2026-07-27T18:05:18.384Z","modified":"2026-07-27T18:05:18.578Z"},"maintainers":[{"name":"rankit22","email":"rankitsinght@shriffle.com"}],"description":"Enterprise React UI Component Library with Material UI, Design Tokens, and Storybook","homepage":"https://github.com/your-org/enterprise-ui-library#readme","keywords":["react","ui","component-library","material-ui","design-system","storybook","typescript","enterprise"],"repository":{"type":"git","url":"git+https://github.com/your-org/enterprise-ui-library.git"},"author":{"name":"Enterprise UI Team"},"bugs":{"url":"https://github.com/your-org/enterprise-ui-library/issues"},"license":"MIT","readme":"# @enterprise/ui-library\n\nA production-ready, enterprise-grade React UI Component Library built with **React 19**, **TypeScript**, **Vite**, **Storybook 9**, and **Material UI**. Designed for use across multiple enterprise applications.\n\n[![CI](https://github.com/your-org/enterprise-ui-library/actions/workflows/ci.yml/badge.svg)](https://github.com/your-org/enterprise-ui-library/actions/workflows/ci.yml)\n[![npm version](https://badge.fury.io/js/@enterprise%2Fui-library.svg)](https://badge.fury.io/js/@enterprise%2Fui-library)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n---\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Running the Project](#running-the-project)\n- [Folder Structure](#folder-structure)\n- [Components](#components)\n- [Creating Components](#creating-components)\n- [Creating Stories](#creating-stories)\n- [Design Tokens](#design-tokens)\n- [Theme Customisation](#theme-customisation)\n- [Testing](#testing)\n- [Publishing](#publishing)\n- [Deployment](#deployment)\n- [Contributing](#contributing)\n- [Versioning](#versioning)\n- [Commit Rules](#commit-rules)\n\n---\n\n## Quick Start\n\n### Installation (as a consumer)\n\n```bash\nnpm install @enterprise/ui-library\n# Peer dependencies\nnpm install react@^19 react-dom@^19 @mui/material@^6 @emotion/react @emotion/styled\n```\n\n### Basic Usage\n\n```tsx\nimport { EnterpriseThemeProvider, Button, TextField } from '@enterprise/ui-library';\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n```\n\n---\n\n## Running the Project\n\n### Prerequisites\n\n- **Node.js** >= 20\n- **npm** >= 10\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/your-org/enterprise-ui-library.git\ncd enterprise-ui-library\n\n# Install dependencies (sets up husky git hooks automatically)\nnpm install\n\n# Start Storybook development server\nnpm run storybook\n\n# Start Vite dev server (component playground)\nnpm run dev\n```\n\n### Available Scripts\n\n| Script | Description |\n|---|---|\n| `npm run dev` | Start Vite dev server |\n| `npm run build` | Build production library (ESM + CJS + types) |\n| `npm run storybook` | Start Storybook on port 6006 |\n| `npm run build-storybook` | Build static Storybook |\n| `npm run test` | Run unit tests (Vitest) |\n| `npm run test:watch` | Run tests in watch mode |\n| `npm run test:coverage` | Run tests with coverage report |\n| `npm run lint` | Run ESLint |\n| `npm run lint:fix` | Run ESLint and auto-fix issues |\n| `npm run format` | Format all source files with Prettier |\n| `npm run format:check` | Check formatting without changes |\n| `npm run typecheck` | Run TypeScript type check |\n| `npm run commit` | Open Commitizen interactive prompt |\n| `npm run release` | Run Semantic Release (CI only) |\n\n---\n\n## Folder Structure\n\n```\nenterprise-ui-library/\n├── .github/\n│ └── workflows/\n│ ├── ci.yml # PR: lint, typecheck, test, build\n│ └── release.yml # Merge to main: publish + deploy Storybook\n├── .husky/\n│ ├── pre-commit # lint-staged on staged files\n│ ├── commit-msg # commitlint validation\n│ └── pre-push # typecheck + full test run\n├── .storybook/\n│ ├── main.ts # Storybook config, addons\n│ └── preview.tsx # Global decorators, theme switcher\n├── src/\n│ ├── components/\n│ │ ├── Button/\n│ │ │ ├── Button.tsx # Component implementation\n│ │ │ ├── Button.test.tsx # Unit tests\n│ │ │ ├── Button.stories.tsx\n│ │ │ └── index.ts\n│ │ ├── IconButton/\n│ │ ├── Input/\n│ │ ├── TextField/\n│ │ ├── PasswordInput/\n│ │ ├── SearchInput/\n│ │ └── index.ts # Re-exports all components\n│ ├── hooks/\n│ │ └── useDebounce.ts # Reusable React hooks\n│ ├── stories/\n│ │ └── DesignTokens.stories.tsx # Live token reference page\n│ ├── test/\n│ │ └── setup.ts # Vitest + jest-dom bootstrap\n│ ├── theme/\n│ │ ├── theme.ts # MUI light + dark themes (token-driven)\n│ │ ├── ThemeProvider.tsx # EnterpriseThemeProvider + useThemeMode hook\n│ │ └── index.ts\n│ ├── tokens/\n│ │ ├── colors.ts # Single source of truth for all colours\n│ │ ├── spacing.ts # 4px-base spacing scale\n│ │ ├── typography.ts # Font, radius, shadow, breakpoint tokens\n│ │ └── index.ts\n│ ├── types/\n│ │ └── index.ts # Shared TypeScript types\n│ ├── utils/\n│ │ └── cn.ts # Class name utility\n│ └── index.ts # Public library entry point\n├── commitlint.config.js\n├── eslint.config.js\n├── .prettierrc\n├── .releaserc.json\n├── tsconfig.json # Dev (noEmit: true)\n├── tsconfig.build.json # Build (emits declarations)\n├── vite.config.ts # Library build config\n└── vitest.config.ts\n```\n\n---\n\n## Components\n\nAll components are accessible (WCAG 2.1 AA), responsive, and token-driven.\n\n### Button\n\n```tsx\nimport { Button } from '@enterprise/ui-library';\n\n\n\n\n\n```\n\n**Props:** `variant`, `color`, `size`, `loading`, `disabled`, `startIcon`, `endIcon`, `fullWidth`, `onClick`, `type`, `aria-label`\n\n### IconButton\n\n```tsx\nimport { IconButton } from '@enterprise/ui-library';\n\n} aria-label=\"Edit item\" />\n} aria-label=\"Delete\" color=\"error\" tooltip=\"Delete item\" />\n} aria-label=\"Search\" loading />\n```\n\n**Props:** `icon`, `aria-label` (required), `color`, `size`, `tooltip`, `loading`, `disabled`, `onClick`\n\n### Input\n\n```tsx\nimport { Input } from '@enterprise/ui-library';\n\n\n\n\n} />\n```\n\n### TextField\n\n```tsx\nimport { TextField } from '@enterprise/ui-library';\n\n// Preferred one-component form field\n\n\n\n```\n\n### PasswordInput\n\n```tsx\nimport { PasswordInput } from '@enterprise/ui-library';\n\n\n\n```\n\n### SearchInput\n\n```tsx\nimport { SearchInput } from '@enterprise/ui-library';\n\n console.log('Search:', q)}\n onChange={(q) => setQuery(q)}\n loading={isLoading}\n fullWidth\n/>\n```\n\n---\n\n## Creating Components\n\nFollow this checklist for every new component:\n\n1. **Create the directory**: `src/components/MyComponent/`\n2. **Implement** `MyComponent.tsx` — wrap MUI internally, never expose raw MUI props\n3. **Export types** — all props via a named `MyComponentProps` interface\n4. **Write tests** — `MyComponent.test.tsx` with `@testing-library/react`\n5. **Write stories** — `MyComponent.stories.tsx` with `autodocs` tag\n6. **Create barrel** — `index.ts` exporting the component and types\n7. **Register** — add `export * from './MyComponent'` to `src/components/index.ts`\n\n### Component Template\n\n```tsx\n// src/components/MyComponent/MyComponent.tsx\nimport type { ReactNode } from 'react';\nimport type { BaseComponentProps } from '../../types';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface MyComponentProps extends BaseComponentProps {\n children: ReactNode;\n // ... your props\n}\n\nexport function MyComponent({ children, className, sx, 'data-testid': testId }: MyComponentProps) {\n return (\n
\n {children}\n
\n );\n}\n```\n\n### Rules\n\n- **Never hardcode colours** — use tokens from `src/tokens/colors.ts` or MUI theme values\n- **Never expose raw MUI props** in the public interface\n- **Always include** `aria-*` attributes for accessibility\n- **Always export** types alongside the component\n- **No `console.log`** in component code (ESLint will catch it)\n- **No `any` type** unless absolutely unavoidable (with comment explaining why)\n\n---\n\n## Creating Stories\n\nEvery component must have a Storybook file with at minimum:\n\n- `Default` story\n- State variants (`Disabled`, `Loading`, `WithError`)\n- A story demonstrating all props via Controls\n\n### Story Template\n\n```tsx\n// src/components/MyComponent/MyComponent.stories.tsx\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { MyComponent } from './MyComponent';\n\nconst meta = {\n title: 'Components/MyComponent',\n component: MyComponent,\n parameters: { layout: 'centered', docs: { description: { component: '...' } } },\n tags: ['autodocs'],\n argTypes: { /* controls */ },\n args: { /* defaults */ },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {};\nexport const Disabled: Story = { args: { disabled: true } };\n```\n\n---\n\n## Design Tokens\n\nAll design values live in `src/tokens/`. **Never hardcode** colours, spacing, font sizes, radii, or shadows.\n\n### Colours (`src/tokens/colors.ts`)\n\n```ts\nimport { lightTokens, darkTokens, palette } from '@enterprise/ui-library';\n\n// Semantic tokens\nlightTokens.primaryMain // '#2563eb'\nlightTokens.errorMain // '#dc2626'\nlightTokens.textSecondary // '#4b5563'\n\n// Primitive palette\npalette.blue600 // '#2563eb'\npalette.gray50 // '#f9fafb'\n```\n\n### CSS Variables\n\nInject tokens as CSS custom properties (useful for non-MUI styling):\n\n```ts\nimport { injectCssVariables, lightTokens } from '@enterprise/ui-library';\n\ninjectCssVariables(lightTokens); // Writes --color-* vars to :root\n```\n\n### Typography & Spacing (`src/tokens/typography.ts`, `src/tokens/spacing.ts`)\n\n```ts\nimport { fontSize, fontWeight, borderRadius, shadows } from '@enterprise/ui-library';\n\nfontSize.lg // '1.125rem'\nfontWeight.bold // 700\nborderRadius.md // '6px'\nshadows.lg // '0 10px 15px …'\n```\n\n---\n\n## Theme Customisation\n\n### Using the Provider\n\n```tsx\nimport { EnterpriseThemeProvider } from '@enterprise/ui-library';\n\n\n \n\n```\n\n### Toggle Theme Programmatically\n\n```tsx\nimport { useThemeMode } from '@enterprise/ui-library';\n\nfunction ThemeToggle() {\n const { mode, toggleTheme } = useThemeMode();\n return ;\n}\n```\n\n### Extending the Theme\n\n```ts\nimport { lightTheme } from '@enterprise/ui-library';\nimport { createTheme } from '@mui/material/styles';\n\nconst customTheme = createTheme(lightTheme, {\n palette: {\n primary: { main: '#8b5cf6' }, // Override primary colour\n },\n});\n```\n\n### Using Tokens in MUI `sx`\n\n```tsx\n\n```\n\n---\n\n## Testing\n\nTests use **Vitest** + **React Testing Library** + **jest-dom**.\n\n```bash\nnpm run test # Run all tests once\nnpm run test:watch # Watch mode\nnpm run test:coverage # Generate coverage report (opens in coverage/)\n```\n\n### Coverage Thresholds\n\n| Metric | Threshold |\n|---|---|\n| Lines | 80% |\n| Functions | 80% |\n| Branches | 70% |\n| Statements | 80% |\n\n### Writing Tests\n\n```tsx\nimport { ThemeProvider } from '@mui/material/styles';\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { lightTheme } from '@enterprise/ui-library';\nimport { MyComponent } from './MyComponent';\n\nfunction renderWithTheme(ui: React.ReactElement) {\n return render({ui});\n}\n\ndescribe('MyComponent', () => {\n it('renders correctly', () => {\n renderWithTheme(Hello);\n expect(screen.getByText('Hello')).toBeInTheDocument();\n });\n});\n```\n\n---\n\n## Publishing\n\nThis library is configured for **npm publish** with tree shaking, ESM + CJS output, and auto-generated type declarations.\n\n### Manual Publish\n\n```bash\nnpm run build\nnpm publish --access public\n```\n\n### package.json Exports\n\n```json\n{\n \"main\": \"./dist/index.cjs\",\n \"module\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\",\n \"types\": \"./dist/index.d.ts\"\n }\n }\n}\n```\n\n### Automated Releases (Semantic Release)\n\nMerging to `main` triggers the release pipeline automatically via GitHub Actions:\n\n1. Analyses commits since last release\n2. Determines version bump (patch / minor / major) from Conventional Commits\n3. Updates `CHANGELOG.md`\n4. Tags the release on GitHub\n5. Publishes to npm\n6. Deploys Storybook to GitHub Pages\n\n**Required GitHub Secrets:**\n- `GH_TOKEN` — GitHub personal access token with `repo` scope\n- `NPM_TOKEN` — npm publish token\n\n---\n\n## Deployment\n\n### Storybook Deployment Options\n\n#### GitHub Pages (recommended, automatic on merge)\nHandled automatically by `.github/workflows/release.yml` using `peaceiris/actions-gh-pages`.\nEnable Pages in your repo settings → Pages → Source: `gh-pages` branch.\n\n#### Netlify\n1. Connect your repo to Netlify\n2. Build command: `npm run build-storybook`\n3. Publish directory: `storybook-static`\n\n#### Vercel\n```bash\nnpx vercel --prod\n# Build command: npm run build-storybook\n# Output directory: storybook-static\n```\n\n#### AWS S3 + CloudFront\n```bash\n# Build\nnpm run build-storybook\n\n# Sync to S3\naws s3 sync storybook-static/ s3://your-bucket-name --delete\n\n# Invalidate CloudFront cache\naws cloudfront create-invalidation --distribution-id YOUR_DIST_ID --paths \"/*\"\n```\n\n---\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feat/my-feature`\n3. Make changes following the [Creating Components](#creating-components) guide\n4. Write tests and ensure coverage thresholds pass\n5. Commit using `npm run commit` (Commitizen wizard)\n6. Push your branch and open a pull request\n7. CI must pass before merge\n\n---\n\n## Versioning\n\nThis project uses **Semantic Release** for automated versioning based on Conventional Commits:\n\n| Commit Type | Version Bump | Example |\n|---|---|---|\n| `fix:` | Patch (0.0.x) | `fix(input): resolve focus ring` |\n| `feat:` | Minor (0.x.0) | `feat(button): add loading state` |\n| `feat!:` or `BREAKING CHANGE:` | Major (x.0.0) | `feat!: remove deprecated props` |\n\n---\n\n## Commit Rules\n\nThis project enforces **Conventional Commits** via Commitlint and Commitizen.\n\n### Using the Wizard (recommended)\n\n```bash\nnpm run commit\n```\n\n### Manual Format\n\n```\ntype(scope): subject\n\n[optional body]\n[optional footer]\n```\n\n### Allowed Types\n\n| Type | Usage |\n|---|---|\n| `feat` | New feature |\n| `fix` | Bug fix |\n| `docs` | Documentation only |\n| `style` | Formatting, no logic change |\n| `refactor` | Code restructure, no feature/fix |\n| `perf` | Performance improvement |\n| `test` | Adding or updating tests |\n| `build` | Build system or dependency changes |\n| `ci` | CI/CD configuration |\n| `chore` | Maintenance tasks |\n| `revert` | Revert a previous commit |\n\n### Examples\n\n```bash\nfeat(button): add loading state with spinner\nfix(password-input): correct toggle icon accessibility label\ndocs(storybook): update design tokens page\nrefactor(theme): extract component overrides to separate function\ntest(search-input): add coverage for debounce behaviour\nci: add coverage upload step to ci workflow\nbuild: upgrade vite to v6\n```\n\nInvalid commit messages are **rejected automatically** by the `commit-msg` git hook.\n\n---\n\n## License\n\nMIT © Enterprise UI Team\n","readmeFilename":"README.md","_rev":"1-32e088e9ee8afeec55f9bdefbeceeba1"}