{"_id":"@almeidinha/mf-ui","name":"@almeidinha/mf-ui","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@almeidinha/mf-ui","version":"2.0.0","description":"A small React design system / UI component library I use across BI projects.","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"sideEffects":false,"publishConfig":{"access":"public"},"keywords":[],"author":"","license":"ISC","peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","styled-components":"^6"},"dependencies":{"date-fns":"^4.1.0","react-compound-slider":"^3.4.0","react-virtuoso":"^4.18.3","recharts":"^3.8.0"},"devDependencies":{"@chromatic-com/storybook":"^5.0.1","@eslint/js":"^9.38.0","@faker-js/faker":"^10.3.0","@storybook/addon-a11y":"^10.2.8","@storybook/addon-docs":"^10.2.8","@storybook/addon-vitest":"^10.2.8","@storybook/react":"^10.2.8","@storybook/react-vite":"^10.2.8","@tanstack/react-table":"^8.21.3","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/eslint-plugin-jsx-a11y":"^6.10.1","@types/jest":"^30.0.0","@types/jest-axe":"^3.5.9","@types/lodash":"^4.17.23","@types/node":"^25.3.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@types/styled-components":"^5.1.36","@typescript-eslint/eslint-plugin":"^8.56.1","@typescript-eslint/parser":"^8.56.1","@vitest/browser-playwright":"4.0.18","@vitest/coverage-v8":"4.0.18","eslint":"^9.38.0","eslint-plugin-import":"^2.32.0","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-simple-import-sort":"^12.1.1","eslint-plugin-storybook":"^10.2.8","globals":"^17.3.0","jest":"^30.2.0","jest-axe":"^10.0.0","jiti":"^2.6.1","jsdom":"^28.1.0","lodash":"^4.17.23","node":"^25.7.0","playwright":"^1.58.2","prettier":"^3.8.1","react":"^19.2.4","react-date-object":"2.1.9","react-dom":"^19.2.4","react-hook-form":"^7.71.1","react-multi-date-picker":"^4.5.2","storybook":"^10.2.8","styled-components":"^6.3.9","ts-node":"^10.9.2","tsup":"^8.5.1","typescript":"^5.9.3","typescript-eslint":"^8.56.1","uuid":"^13.0.0","vite-tsconfig-paths":"^6.1.1","vitest":"^4.0.18"},"eslintConfig":{"extends":["plugin:storybook/recommended"]},"scripts":{"build":"tsup","dev":"tsup --watch","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"vitest run --project unit","test:storybook":"vitest run --project storybook","lint":"tsc && eslint --cache '{src,scripts}/**/*.{js,ts,tsx}'","lint:all":"set -o pipefail; npm run lint","lint:fix":"npm run lint:format && tsc && eslint --fix --cache 'src/**/*.{js,ts,tsx}'","lint:fix:all":"set -o pipefail; npm run lint fix","lint:format":"prettier --write '**/*.{js,ts,tsx}'"},"_id":"@almeidinha/mf-ui@2.0.0","_integrity":"sha512-7464rk2Mxqt+JkWYzb+AbEW5GwZ29O6OAoLWjCqJcevGOXMpof6ljTxhX5jeKjMW9yWWTAVad2yC/tQ2ekcFhA==","_resolved":"/private/var/folders/n1/x698pqnx1m3d97g1wzpzfd70m7ms52/T/dcf1a7a8a0110087692dd8b17922dbb9/almeidinha-mf-ui-2.0.0.tgz","_from":"file:almeidinha-mf-ui-2.0.0.tgz","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-7464rk2Mxqt+JkWYzb+AbEW5GwZ29O6OAoLWjCqJcevGOXMpof6ljTxhX5jeKjMW9yWWTAVad2yC/tQ2ekcFhA==","shasum":"db2d128f5c34c8951b41c3507b4a1ee82e9355b6","tarball":"https://registry.npmjs.org/@almeidinha/mf-ui/-/mf-ui-2.0.0.tgz","fileCount":12,"unpackedSize":5209278,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAvahObrZ1hzg3nwuZC4poGNGYm1Q/+q9tpXx47YGksKAiB4LDVuO9L6xdBjip0K00h/l5MKAHYtkKOApVScph2bTA=="}]},"_npmUser":{"name":"almeidinha","email":"blackheal@gmail.com"},"directories":{},"maintainers":[{"name":"almeidinha","email":"blackheal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mf-ui_2.0.0_1774762990069_0.8024163572507568"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-29T05:43:09.970Z","2.0.0":"2026-03-29T05:43:10.230Z","modified":"2026-03-29T05:43:10.452Z"},"maintainers":[{"name":"almeidinha","email":"blackheal@gmail.com"}],"description":"A small React design system / UI component library I use across BI projects.","keywords":[],"license":"ISC","readme":"# mf-ui-library\n\nA small React design system / UI component library I use across BI projects.\n\nIt’s built as a **library** (not an app): you develop and preview components in Storybook, and publish a bundled output (ESM + CJS + typings) from `dist/`.\n\n## Tech stack\n\n- **React + TypeScript**\n- **styled-components v6** (peer dependency)\n- **Build**: `tsup` (outputs ESM + CJS + `.d.ts`)\n- **Docs / playground**: Storybook (Vite)\n- **Tests**: Vitest (jsdom) + Testing Library\n- **Storybook tests**: `@storybook/addon-vitest` + Playwright (headless browser)\n- **Quality**: ESLint + `tsc` + Prettier\n\n## Architecture\n\nThe code lives under `src/`:\n\n- `src/foundation/` — design tokens (colors, spacing, typography, shadows)\n- `src/components/` — UI components (atoms → molecules → organisms)\n- `src/hooks/` — reusable React hooks\n- `src/helpers/` — shared utility functions/types\n- `src/theme/` — theme helpers (currently internal)\n\n### Public API (what the package exports)\n\nThe library’s **single entry point** is `src/index.ts` (configured in `tsup.config.ts`).\n\nThe package root currently exports:\n\n- `components/`\n- `foundation/`\n- `hooks/`\n- `theme/`\n\nHelpers remain internal to the repo and are not part of the public package API.\n\n### Internal path aliases\n\nThe source uses TypeScript path aliases (e.g. `@foundations`, `@helpers`, `components/...`) for local development. Those are resolved at build time.\n\n## Development guide\n\n### Prerequisites\n\n- Node.js installed (recommended: `nvm`, this repo includes a `.nvmrc`)\n- `pnpm` (this repo pins a `packageManager` version in `package.json`)\n\nIf you use `nvm`:\n\n```bash\nnvm install\nnvm use\n```\n\n### Install\n\n```bash\npnpm install\n```\n\n### Build (library output)\n\nBuilds `dist/` (ESM + CJS + source maps + TypeScript declarations):\n\n```bash\npnpm build\n```\n\n### Watch mode (dev build)\n\nContinuously rebuilds `dist/` on changes:\n\n```bash\npnpm dev\n```\n\n### Run Storybook (component playground)\n\nStarts Storybook on port `6006`:\n\n```bash\npnpm storybook\n```\n\nBuild static Storybook:\n\n```bash\npnpm build-storybook\n```\n\n## Testing\n\n### Unit tests\n\nRuns unit tests (Vitest “unit” project):\n\n```bash\npnpm test\n```\n\n### Storybook tests\n\nRuns Storybook-linked tests in a headless browser (Vitest “storybook” project):\n\n```bash\npnpm test:storybook\n```\n\nFirst run may require installing Playwright browsers:\n\n```bash\npnpm playwright install\n```\n\n## Linting & formatting\n\nTypecheck + ESLint:\n\n```bash\npnpm lint\n```\n\nAuto-fix ESLint + format:\n\n```bash\npnpm lint:fix\n```\n\nFormat only:\n\n```bash\npnpm lint:format\n```\n\n## Example (using foundation tokens)\n\n```tsx\nimport styled from \"styled-components\";\nimport { Borders, Padding, Surface } from \"@almeidinha/mfui\";\n\nexport const Panel = styled.div`\n  background: ${Surface.Default.Default};\n  border: 1px solid ${Borders.Default.Subdued};\n  padding: ${Padding.m};\n`;\n```\n","readmeFilename":"README.md","_rev":"1-5b6503feed086dd967ec5ffd5deeee98"}