{"_id":"@alsaeedfayed/ui-test-lib","_rev":"2-113dc317e0d43359f5c2d5b70a16e6dd","name":"@alsaeedfayed/ui-test-lib","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@alsaeedfayed/ui-test-lib","version":"1.0.0","_id":"@alsaeedfayed/ui-test-lib@1.0.0","maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"dist":{"shasum":"850846e8b9311ed75af8d9dd4256b09bdb6a2a0d","tarball":"https://registry.npmjs.org/@alsaeedfayed/ui-test-lib/-/ui-test-lib-1.0.0.tgz","fileCount":16,"integrity":"sha512-l93HCS5yQ+gUePsLFdbJs+j1haI/J2e9Wk3iqdXbH22zZV+j3jLPO2bFyA8223669NHSwuSq7ZYohWtjQc9P/w==","signatures":[{"sig":"MEQCIFjxYE81BKhnYA4kvNqQGDjRkdePvfKx/l9HtecvASe3AiAExbDtBt1bB7zgjcQT7da0CJ7UGuhMaOI+HSaZtmsm4g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":41657},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/index.css","./tailwind":"./tailwind.config.js"},"gitHead":"4c857aa4f265fb2623dc31acc3234ae1dd21ccb6","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup","clean":"rm -rf dist","playground":"vite --config playground/vite.config.ts","playground:build":"vite build --config playground/vite.config.ts"},"_npmUser":{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"},"_npmVersion":"11.10.1","description":"Design System — tokens, mixins, and React components","directories":{},"sideEffects":["**/*.scss","**/*.css"],"_nodeVersion":"20.19.0","dependencies":{"clsx":"^2.0.0","tailwind-merge":"^2.1.0","@radix-ui/react-slot":"^1.0.2","@radix-ui/react-dialog":"^1.0.5","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","vite":"^5.0.10","react":"^18.2.0","postcss":"^8.4.32","react-dom":"^18.2.0","typescript":"^5.3.2","tailwindcss":"^3.3.5","@types/react":"^18.2.0","autoprefixer":"^10.4.16","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.1"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","tailwindcss":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-test-lib_1.0.0_1773199430608_0.270818963648755","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@alsaeedfayed/ui-test-lib","version":"1.1.0","description":"Design System — tokens, mixins, and React components","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/index.css","./tailwind":"./tailwind.config.js"},"sideEffects":["**/*.scss","**/*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","playground":"vite --config playground/vite.config.ts","playground:build":"vite build --config playground/vite.config.ts","lint":"tsc --noEmit","clean":"rm -rf dist"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","tailwindcss":"^3.3.0"},"dependencies":{"@radix-ui/react-dialog":"^1.0.5","@radix-ui/react-slot":"^1.0.2","class-variance-authority":"^0.7.0","clsx":"^2.0.0","tailwind-merge":"^2.1.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.1","autoprefixer":"^10.4.16","postcss":"^8.4.32","react":"^18.2.0","react-dom":"^18.2.0","tailwindcss":"^3.3.5","tsup":"^8.0.1","typescript":"^5.3.2","vite":"^5.0.10"},"gitHead":"7c94dfa3e10a98635f0db8996ea590077d6de819","_id":"@alsaeedfayed/ui-test-lib@1.1.0","_nodeVersion":"20.19.0","_npmVersion":"11.10.1","dist":{"integrity":"sha512-KHND8ybpB3ogN4Xu7AyYEJK4suHNfCCKifYm+4U/y9gOa4KTGVuUpM+uNBumNFp0+LfMXRWTk91vqnfivCErWQ==","shasum":"f748819ff87b1759f7931deef1b1885f35eebe71","tarball":"https://registry.npmjs.org/@alsaeedfayed/ui-test-lib/-/ui-test-lib-1.1.0.tgz","fileCount":16,"unpackedSize":59491,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDPfiULGygwK4uKAqp/EhnArmpcYCT/XwQ9AexyaD3ziAiEAu0kAFqMZhTrh+ZQrhxx0WjXsmBtPetjgSRizefgGcoE="}]},"_npmUser":{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"},"directories":{},"maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-test-lib_1.1.0_1773379220767_0.6492576071391103"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-11T03:23:50.552Z","modified":"2026-03-13T05:20:21.021Z","1.0.0":"2026-03-11T03:23:50.751Z","1.1.0":"2026-03-13T05:20:20.915Z"},"description":"Design System — tokens, mixins, and React components","maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"readme":"# @alsaeedfayed/ui-test-lib\n\nDesign System package — design tokens (colors, spacing, radii, shadows), SCSS mixins, Tailwind CSS configuration, and React components (Button, Card, Input).\n\nBuilt to be installed across microfrontend apps so every app shares the same visual language.\n\n---\n\n## Architecture\n\nThe design system has **3 layers** that chain together:\n\n```\nSCSS Tokens (_colors.scss, _sizes.scss)\n    ↓  raw values ($color-primary: #6366f1)\nCSS Custom Properties (global.css)\n    ↓  runtime bridge (--ebs-primary: #6366f1)\nTailwind Config (tailwind.config.js)\n    ↓  class names (bg-primary → var(--ebs-primary) → #6366f1)\nReact Components (Button, Card, Input)\n```\n\n- **SCSS tokens** — source of truth, usable via `@use` in `.scss` files\n- **CSS custom properties** — bridge tokens to the browser, enable runtime theming\n- **Tailwind config** — maps CSS vars to utility classes like `bg-primary`, `text-muted-foreground`, `rounded-lg`\n- **React components** — pre-built UI components using the above tokens via Tailwind\n\n---\n\n## Project Structure\n\n```\nsrc/\n├── components/\n│   ├── Button/          # CVA-based button (6 variants, 4 sizes)\n│   ├── Card/            # Card + CardHeader, CardTitle, CardDescription, CardContent, CardFooter\n│   └── Input/           # Input with label and error support\n├── lib/\n│   └── utils.ts         # cn() helper (clsx + tailwind-merge)\n├── tokens/\n│   ├── _colors.scss     # Color tokens (brand, neutral, semantic, surface)\n│   └── _sizes.scss      # Spacing, radii, font sizes, weights, shadows, transitions\n├── mixins/\n│   └── _index.scss      # SCSS mixins (flex-center, card, focus-ring, button-base, etc.)\n├── styles/\n│   └── global.css       # CSS custom properties (:root vars)\n└── index.ts             # Package entry point\n\nplayground/               # Local dev playground (not published)\ntailwind.config.js        # Shared Tailwind theme config (published)\ntsup.config.ts            # Build config\n```\n\n---\n\n## Scripts\n\n```bash\n# Install dependencies\npnpm install\n\n# Build the package (CJS + ESM + types + CSS)\npnpm build\n\n# Build in watch mode during development\npnpm dev\n\n# Run the playground (live demo at http://localhost:3100)\npnpm playground\n\n# Build the playground for static hosting\npnpm playground:build\n\n# Type-check without emitting\npnpm lint\n\n# Remove dist folder\npnpm clean\n```\n\n---\n\n## Publishing\n\nThe package is published publicly to npmjs.com under the `@alsaeedfayed` org.\n\n```bash\n# Make sure you're logged in\nnpm whoami\n\n# Build first\npnpm build\n\n# Publish (access: public is configured in package.json)\nnpm publish --access public\n\n# To publish a new version, bump the version first\nnpm version patch   # 1.0.0 → 1.0.1\nnpm version minor   # 1.0.0 → 1.1.0\nnpm version major   # 1.0.0 → 2.0.0\nnpm publish --access public\n```\n\n---\n\n## Usage in Microfrontend Apps\n\n### 1. Install\n\n```bash\nnpm install @alsaeedfayed/ui-test-lib\n```\n\n### 2. Import the global CSS (required)\n\nThis loads the CSS custom properties that power all the tokens:\n\n```tsx\n// In your app's entry file (main.tsx or App.tsx)\nimport \"@alsaeedfayed/ui-test-lib/styles\";\n```\n\n### 3. Extend your Tailwind config\n\n```javascript\n// tailwind.config.js\nconst libConfig = require(\"@alsaeedfayed/ui-test-lib/tailwind\");\n\nmodule.exports = {\n  content: [\n    \"./src/**/*.{ts,tsx}\",\n    // Scan the library's components so Tailwind generates their classes\n    \"./node_modules/@alsaeedfayed/ui-test-lib/dist/**/*.{js,mjs}\",\n  ],\n  theme: {\n    extend: {\n      ...libConfig.theme.extend,\n    },\n  },\n};\n```\n\n### 4. Use the components\n\n```tsx\nimport { Button, Card, CardHeader, CardTitle, CardContent, Input } from \"@alsaeedfayed/ui-test-lib\";\n\nfunction MyPage() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n        <Input label=\"Password\" type=\"password\" />\n        <Button className=\"w-full\">Sign In</Button>\n        <Button variant=\"outline\" className=\"w-full\">Cancel</Button>\n      </CardContent>\n    </Card>\n  );\n}\n```\n\n### 5. Use SCSS tokens & mixins (optional)\n\nIf your app uses SCSS, you can import tokens and mixins directly:\n\n```scss\n@use \"@alsaeedfayed/ui-test-lib/src/tokens\" as t;\n@use \"@alsaeedfayed/ui-test-lib/src/mixins\" as m;\n\n.my-component {\n  color: t.$color-primary;\n  @include m.flex-center;\n  @include m.focus-ring;\n}\n```\n\n---\n\n## Available Components\n\n### Button\n\n```tsx\n<Button>Default</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"destructive\">Destructive</Button>\n<Button variant=\"outline\">Outline</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"link\">Link</Button>\n\n<Button size=\"sm\">Small</Button>\n<Button size=\"default\">Default</Button>\n<Button size=\"lg\">Large</Button>\n<Button size=\"icon\"><Icon /></Button>\n\n<Button disabled>Disabled</Button>\n```\n\n### Card\n\n```tsx\n<Card>\n  <CardHeader>\n    <CardTitle>Title</CardTitle>\n    <CardDescription>Description text</CardDescription>\n  </CardHeader>\n  <CardContent>Body content</CardContent>\n  <CardFooter>Footer actions</CardFooter>\n</Card>\n```\n\n### Input\n\n```tsx\n<Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n<Input label=\"Username\" error=\"Must be at least 3 characters\" />\n<Input disabled placeholder=\"Disabled input\" />\n```\n\n---\n\n## Design Tokens\n\n### Colors\n\n| Token | CSS Variable | Tailwind Class | Value |\n|-------|-------------|----------------|-------|\n| `$color-primary` | `--ebs-primary` | `bg-primary`, `text-primary` | `#6366f1` |\n| `$color-secondary` | `--ebs-secondary` | `bg-secondary`, `text-secondary` | `#0ea5e9` |\n| `$color-destructive` | `--ebs-destructive` | `bg-destructive`, `text-destructive` | `#ef4444` |\n| `$color-success` | `--ebs-success` | `bg-success`, `text-success` | `#22c55e` |\n| `$color-warning` | `--ebs-warning` | `bg-warning`, `text-warning` | `#f59e0b` |\n| `$color-info` | `--ebs-info` | `bg-info`, `text-info` | `#3b82f6` |\n| `$color-background` | `--ebs-background` | `bg-background` | `#ffffff` |\n| `$color-foreground` | `--ebs-foreground` | `text-foreground` | `#0f172a` |\n| `$color-muted` | `--ebs-muted` | `bg-muted`, `text-muted-foreground` | `#f1f5f9` |\n| `$color-border` | `--ebs-border` | `border-border` | `#e2e8f0` |\n\n### Border Radius\n\n| Tailwind Class | CSS Variable | Default Value |\n|---------------|-------------|---------------|\n| `rounded-lg` | `--ebs-radius` | `0.5rem` |\n| `rounded-md` | `calc(--ebs-radius - 2px)` | `0.375rem` |\n| `rounded-sm` | `calc(--ebs-radius - 4px)` | `0.25rem` |\n\n---\n\n## Peer Dependencies\n\nThese must be installed in the consuming app:\n\n- `react` ^18.2.0\n- `react-dom` ^18.2.0\n- `tailwindcss` ^3.3.0\n\n\n <!-- Todo => config in publish in package.json should be updated to the correct organization name -->","readmeFilename":"README.md"}