{"_id":"@4sale/design-system","name":"@4sale/design-system","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@4sale/design-system","version":"0.1.0","description":"4Sale internal design system","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","license":"UNLICENSED","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./index.css":"./dist/index.css","./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons/index.js","require":"./dist/icons/index.cjs"},"./icons/styles/font-face.css":"./icons/styles/font-face.css","./icons/styles/solid.css":"./icons/styles/solid.css","./icons/styles/stroke.css":"./icons/styles/stroke.css","./icons/styles/icons-bundle.css":"./icons/styles/icons-bundle.css"},"sideEffects":["**/*.css","**/*.scss"],"scripts":{"dev":"storybook dev -p 6006","build":"tsup","build-storybook":"storybook build","typecheck":"tsc --noEmit -p tsconfig.typecheck.json","prepublishOnly":"npm run build","test":"vitest run --passWithNoTests","test:watch":"vitest","test:coverage":"vitest run --coverage","release":"changeset publish","prepare":"husky","lint":"eslint \"src/**/*.{ts,tsx}\"","lint:fix":"eslint \"src/**/*.{ts,tsx}\" --fix","format":"prettier --write .","format:check":"prettier --check .","storybook":"storybook dev -p 6006","icons:generate":"node scripts/generate-icon-names.mjs && node scripts/sync-all-icon-names.mjs","icons:sync-list":"node scripts/sync-all-icon-names.mjs"},"peerDependencies":{"@radix-ui/react-accordion":"1.2.2","react":"18.3.1","react-dom":"18.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"repository":{"type":"git","url":"git+https://monashazly@bitbucket.org/technivance/fe-web-design-system.git"},"bugs":{"url":"https://bitbucket.org/technivance/fe-web-design-system/issues"},"homepage":"https://bitbucket.org/technivance/fe-web-design-system#readme","keywords":[],"author":{"name":"4Sale Engineering Team"},"dependencies":{"prop-types":"^15.8.1"},"devDependencies":{"@chromatic-com/storybook":"^5.0.2","@eslint/js":"^9.39.4","@radix-ui/react-accordion":"^1.2.2","@storybook/addon-a11y":"^10.3.3","@storybook/addon-docs":"^10.3.3","@storybook/addon-onboarding":"^10.3.3","@storybook/react-vite":"^10.3.3","@types/node":"^22.19.17","@types/react":"^18.3.18","@types/react-dom":"^18.3.5","@typescript-eslint/eslint-plugin":"^8.57.2","@typescript-eslint/parser":"^8.57.2","@vitest/coverage-v8":"^4.1.1","esbuild-sass-plugin":"^3.7.0","eslint":"^9.39.4","eslint-config-prettier":"^10.1.8","eslint-plugin-import":"^2.32.0","eslint-plugin-prettier":"^5.5.5","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1","globals":"^17.4.0","husky":"^9.1.7","lint-staged":"^16.4.0","prettier":"^3.8.1","react":"^18.3.1","react-dom":"^18.3.1","sass":"^1.83.0","storybook":"^10.3.3","tsup":"^8.5.1","typescript":"^5.7.2","typescript-eslint":"^8.57.2","vite":"^8.0.2","vitest":"^4.1.1"},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix --max-warnings 0 --no-warn-ignored"],"*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier --write"]},"_id":"@4sale/design-system@0.1.0","gitHead":"817ed8cf990f4fea3d4cc6159639619e2fa0811e","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Z9zrzsQh8CCCr6g2awMFaJwnDiUPkIROgJsP/89d2Mc8TcRuZdKsTINTT8mod6RUCFGTWXHmkBQA297xgN/iPw==","shasum":"d106e7596b9dc6c27f1c26bbcb0c85bbbf62e876","tarball":"https://registry.npmjs.org/@4sale/design-system/-/design-system-0.1.0.tgz","fileCount":26,"unpackedSize":2929190,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAfeTAf5dzSHsVvulpYATq4BDTYHK+n6/moZStqDpI+HAiEAr2fdYWTwWsvtuD60j3bFOHfZTjn+4fx9HvU9HliS/kI="}]},"_npmUser":{"name":"monashazly","email":"mona.shazly@4sale.tech"},"directories":{},"maintainers":[{"name":"monashazly","email":"mona.shazly@4sale.tech"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.1.0_1776698834959_0.2964968792213778"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-20T15:27:14.855Z","0.1.0":"2026-04-20T15:27:15.136Z","modified":"2026-04-20T15:27:15.441Z"},"maintainers":[{"name":"monashazly","email":"mona.shazly@4sale.tech"}],"description":"4Sale internal design system","homepage":"https://bitbucket.org/technivance/fe-web-design-system#readme","keywords":[],"repository":{"type":"git","url":"git+https://monashazly@bitbucket.org/technivance/fe-web-design-system.git"},"author":{"name":"4Sale Engineering Team"},"bugs":{"url":"https://bitbucket.org/technivance/fe-web-design-system/issues"},"license":"UNLICENSED","readme":"# @4sale/design-system\n\nThe 4Sale front-end design-system package — a framework-agnostic, tree-shakeable\ncomponent library that serves as the single source of truth for UI shared across\nall 4Sale web products.\n\n---\n\n## Project context\n\n| Topic                | Details                                                                                                                                                                                                     |\n| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Purpose**          | Extract every reusable UI component from the 4Sale monolith into a standalone, versioned npm package.                                                                                                       |\n| **Consumer**         | Any 4Sale web app (Next.js, Vite-React, etc.) that installs `@4sale/design-system`.                                                                                                                         |\n| **Framework stance** | **Next-agnostic.** Components must not import Next.js APIs (`next/link`, `next/image`, `next/router`, …). Routing, navigation and framework-specific primitives are injected by the consumer through props. |\n| **Styling**          | CSS Modules (`.module.scss`) + utility class tokens defined in `public/css/`. No inline styles beyond dynamic colour values.                                                                                |\n| **Storybook**        | Primary tool for **development preview**, **visual regression**, and **documentation** of every component. Run with `npm run dev` (port 6006).                                                              |\n| **Testing**          | Unit tests via Vitest. Storybook stories act as living integration tests.                                                                                                                                   |\n| **Publishing**       | Private Verdaccio registry. Run `npm run release` (Changesets) after bumping versions.                                                                                                                      |\n\n---\n\n## Design principles for refactored components\n\nWhen a component is migrated from the monolith, follow these rules so it stays\nframework-agnostic and easy to compose:\n\n1. **No framework imports.** Never import from `next/*`, `react-router-dom`, or\n   any app-level utility. Only `react` (peer dep) is allowed.\n\n2. **Inject, don't embed.** If the monolith wired up a specific `Button`,\n   `IconButton`, `Link`, or `Icon` internally, replace it with a typed prop that\n   accepts a `ReactNode` or `ReactElement`. The consumer passes their own\n   component.\n\n   ```tsx\n   // ✅ framework-agnostic\n   CTAs?: Array<{ id: string | number; content: ReactNode }>;\n   closeButton?: ReactNode;\n\n   // ❌ coupled to internal implementation\n   import Button from '../../button/Button';\n   ```\n\n3. **Stable prop surface.** Keep the same prop names as the monolith where\n   possible so consumers can migrate with minimal changes.\n\n4. **CSS Modules only.** All component-scoped styles live in a co-located\n   `styles.module.scss`. Global design tokens are consumed via CSS custom\n   properties (`var(--token-name)`).\n\n5. **Types in `types.ts`.** Every component gets a `types.ts` next to it with\n   exported named types. No inline prop interfaces in the component file.\n\n6. **Stories in `.stories.tsx`.** Every component must have a Storybook story\n   file. Stories serve as documentation AND visual smoke-tests.\n\n---\n\n## Component import conventions\n\n```tsx\nimport React /* hooks */ from 'react'; // 1. React + hooks\nimport { externalPackage } from 'pkg'; // 2. External packages\nimport { utilFn } from './utils'; // 3. Internal utils\nimport type { MyType } from './types'; // 4. Types\nimport MySubComponent from './SubComponent'; // 5. Internal components\nimport styles from './styles.module.scss'; // 6. Styles (always last)\n```\n\n---\n\n## Available scripts\n\n| Script                    | Description                  |\n| ------------------------- | ---------------------------- |\n| `npm run dev`             | Start Storybook on port 6006 |\n| `npm run build`           | Bundle the library with tsup |\n| `npm run build-storybook` | Build static Storybook       |\n| `npm run typecheck`       | TypeScript check (no emit)   |\n| `npm test`                | Run Vitest unit tests        |\n| `npm run lint`            | ESLint                       |\n| `npm run format`          | Prettier                     |\n| `npm run release`         | Publish via Changesets       |\n\n---\n\n## Repository\n\n- **Repo:** [fe-web-design-system](https://bitbucket.org/technivance/fe-web-design-system)\n- **Package name:** `@4sale/design-system`\n","readmeFilename":"README.md","_rev":"1-4d7fd8d60ceeac8d484f056501a840bb"}