{"_id":"@albertodela/dof-ui","_rev":"4-f8a445a4bc93a408e90a14b7da9be381","name":"@albertodela/dof-ui","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@albertodela/dof-ui","version":"1.0.0","keywords":["design-system","react","figma","dof"],"author":{"name":"Alberto de la Puente"},"license":"MIT","_id":"@albertodela/dof-ui@1.0.0","maintainers":[{"name":"albertodela","email":"albertodelapuent3@gmail.com"}],"dist":{"shasum":"61b968eb5dadb2d77e45511aeb2a97e6d655b2a4","tarball":"https://registry.npmjs.org/@albertodela/dof-ui/-/dof-ui-1.0.0.tgz","fileCount":5,"integrity":"sha512-QLKRy2BgT+P4PkkddN3ZykerPMMuRmPzMHYbM6u4wUg2LxUkVf9UDeS///+7e6vEnd5nbve9iqbP7w7sSLeqqg==","signatures":[{"sig":"MEYCIQCoZlGabkDq3ZdixuHDYrlX9BMdaYcy+RdevHhH4sOe/gIhAMdWe3V+LwZuxy5svghu1QrNnwHh7uZCaayBT2dxNrn3","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132663},"main":"./dist/dof-ui.cjs.js","module":"./dist/dof-ui.es.js","exports":{".":{"import":"./dist/dof-ui.es.js","require":"./dist/dof-ui.cjs.js"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build","storybook":"storybook dev -p 6006","extract-tokens":"node scripts/extract-figma-tokens.js","build-storybook":"storybook build","extract-components":"node scripts/extract-figma-components.js"},"_npmUser":{"name":"albertodela","email":"albertodelapuent3@gmail.com"},"_npmVersion":"11.6.2","description":"DoF Design System - React UI components","directories":{},"_nodeVersion":"24.12.0","dependencies":{"axios":"^1.6.2","dotenv":"^16.3.1","style-dictionary":"^3.9.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","storybook":"^7.6.7","@storybook/react":"^7.6.7","@storybook/blocks":"^7.6.7","@vitejs/plugin-react":"^4.7.0","@storybook/addon-a11y":"^7.6.7","@storybook/react-vite":"^7.6.7","@storybook/addon-links":"^7.6.7","@storybook/addon-designs":"^7.0.5","@storybook/addon-essentials":"^7.6.7","@storybook/addon-interactions":"^7.6.7"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dof-ui_1.0.0_1773415921009_0.19709173453972406","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@albertodela/dof-ui","version":"1.0.1","keywords":["design-system","react","figma","dof"],"author":{"name":"Alberto de la Puente"},"license":"MIT","_id":"@albertodela/dof-ui@1.0.1","maintainers":[{"name":"albertodela","email":"albertodelapuent3@gmail.com"}],"dist":{"shasum":"56843298d69aafff28ee5212003ebb236166fd3c","tarball":"https://registry.npmjs.org/@albertodela/dof-ui/-/dof-ui-1.0.1.tgz","fileCount":5,"integrity":"sha512-59ywTRhnl/LMHdQfB1LwfHjCRb219iUWMACtQUC3lB5w12Swpnwj/8o/GKgRddHASbvaL7rdJaEvIsW/L5oRnw==","signatures":[{"sig":"MEUCIGlv/4xDdRShIHqpNN2NLGBJj5BORBPsn2Y311r4Vc8rAiEAnmelFUZZLH7iPF1GRF3bMVqCvThvAOwChWeq2UWAqaE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":145895},"main":"./dist/dof-ui.cjs.js","module":"./dist/dof-ui.es.js","exports":{".":{"import":"./dist/dof-ui.es.js","require":"./dist/dof-ui.cjs.js"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build","storybook":"storybook dev -p 6006","extract-tokens":"node scripts/extract-figma-tokens.js","build-storybook":"storybook build","extract-components":"node scripts/extract-figma-components.js"},"_npmUser":{"name":"albertodela","email":"albertodelapuent3@gmail.com"},"_npmVersion":"11.6.2","description":"DoF Design System - React UI components","directories":{},"_nodeVersion":"24.12.0","dependencies":{"axios":"^1.6.2","dotenv":"^16.3.1","style-dictionary":"^3.9.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","storybook":"^7.6.7","@storybook/react":"^7.6.7","@storybook/blocks":"^7.6.7","@vitejs/plugin-react":"^4.7.0","@storybook/addon-a11y":"^7.6.7","@storybook/react-vite":"^7.6.7","@storybook/addon-links":"^7.6.7","@storybook/addon-designs":"^7.0.5","@storybook/addon-essentials":"^7.6.7","@storybook/addon-interactions":"^7.6.7"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dof-ui_1.0.1_1773416639800_0.38655775020228167","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@albertodela/dof-ui","version":"1.0.2","keywords":["design-system","react","figma","dof"],"author":{"name":"Alberto de la Puente"},"license":"MIT","_id":"@albertodela/dof-ui@1.0.2","maintainers":[{"name":"albertodela","email":"albertodelapuent3@gmail.com"}],"dist":{"shasum":"e3cc28345c15f1b685ad13d9547857463d10d8cf","tarball":"https://registry.npmjs.org/@albertodela/dof-ui/-/dof-ui-1.0.2.tgz","fileCount":6,"integrity":"sha512-UgUKVYwTGYqlfMHKwj7r8UHCLlmT51VXUe/xtbd9DzGp0PuMzvyIUs9BoN4kQkFU6UzZuZf0pBNqeIpGB01QyA==","signatures":[{"sig":"MEYCIQD0JLzhOJzQGhbMKiA93vtkK1WNhw3bkBy16Xz25QLgKQIhALGYfq8OANSF0xCoZ5NjgsvxqcBOJ5QoaX3s/fwLL4OD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":154082},"main":"./dist/dof-ui.cjs.js","types":"./dist/dof-ui.d.ts","module":"./dist/dof-ui.es.js","exports":{".":{"types":"./dist/dof-ui.d.ts","import":"./dist/dof-ui.es.js","require":"./dist/dof-ui.cjs.js"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build","storybook":"storybook dev -p 6006","extract-tokens":"node scripts/extract-figma-tokens.js","build-storybook":"storybook build","extract-components":"node scripts/extract-figma-components.js"},"_npmUser":{"name":"albertodela","email":"albertodelapuent3@gmail.com"},"_npmVersion":"11.6.2","description":"DoF Design System - React UI components","directories":{},"_nodeVersion":"24.12.0","dependencies":{"axios":"^1.6.2","dotenv":"^16.3.1","style-dictionary":"^3.9.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","storybook":"^7.6.7","@storybook/react":"^7.6.7","@storybook/blocks":"^7.6.7","@vitejs/plugin-react":"^4.7.0","@storybook/addon-a11y":"^7.6.7","@storybook/react-vite":"^7.6.7","@storybook/addon-links":"^7.6.7","@storybook/addon-designs":"^7.0.5","@storybook/addon-essentials":"^7.6.7","@storybook/addon-interactions":"^7.6.7"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dof-ui_1.0.2_1773417109723_0.60040603461273","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@albertodela/dof-ui","version":"1.0.3","description":"DoF Design System - React UI components","author":{"name":"Alberto de la Puente"},"license":"MIT","main":"./dist/dof-ui.cjs.js","module":"./dist/dof-ui.es.js","types":"./dist/dof-ui.d.ts","exports":{".":{"import":"./dist/dof-ui.es.js","require":"./dist/dof-ui.cjs.js","types":"./dist/dof-ui.d.ts"},"./style.css":"./dist/style.css"},"keywords":["design-system","react","figma","dof"],"scripts":{"build":"vite build","storybook":"storybook dev -p 6006","build-storybook":"storybook build","extract-tokens":"node scripts/extract-figma-tokens.js","extract-components":"node scripts/extract-figma-components.js"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@storybook/addon-a11y":"^7.6.7","@storybook/addon-designs":"^7.0.5","@storybook/addon-essentials":"^7.6.7","@storybook/addon-interactions":"^7.6.7","@storybook/addon-links":"^7.6.7","@storybook/blocks":"^7.6.7","@storybook/react":"^7.6.7","@storybook/react-vite":"^7.6.7","@vitejs/plugin-react":"^4.7.0","react":"^18.2.0","react-dom":"^18.2.0","storybook":"^7.6.7","vite":"^5.0.0"},"dependencies":{"axios":"^1.6.2","dotenv":"^16.3.1","style-dictionary":"^3.9.1"},"_id":"@albertodela/dof-ui@1.0.3","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-qS16WuvU0egIoNju/DkqCTcW+zj2Quvm26c34sEVsoCC/Q5msB/NWOZBLDYijsPX5jL2+KbdKlglmxlfk61Xbw==","shasum":"489dc3a43bc6efabc245c02a961a11b9dab1aa57","tarball":"https://registry.npmjs.org/@albertodela/dof-ui/-/dof-ui-1.0.3.tgz","fileCount":6,"unpackedSize":154179,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDFFhKg4Jpymw7GVyloKfJt4ygW7F1yIrK4dgohbgSClQIhAIu/1SopkSgwfctbZa+Px0OFBWfk09YmGSxkD0PmSMMN"}]},"_npmUser":{"name":"albertodela","email":"albertodelapuent3@gmail.com"},"directories":{},"maintainers":[{"name":"albertodela","email":"albertodelapuent3@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dof-ui_1.0.3_1773417604170_0.17560189274044014"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-13T15:32:00.920Z","modified":"2026-03-13T16:00:04.446Z","1.0.0":"2026-03-13T15:32:01.152Z","1.0.1":"2026-03-13T15:43:59.940Z","1.0.2":"2026-03-13T15:51:49.913Z","1.0.3":"2026-03-13T16:00:04.336Z"},"author":{"name":"Alberto de la Puente"},"license":"MIT","keywords":["design-system","react","figma","dof"],"description":"DoF Design System - React UI components","maintainers":[{"name":"albertodela","email":"albertodelapuent3@gmail.com"}],"readme":"# DoF Design System - Storybook\n\n> A comprehensive design system for Data & AI products, auto-generated from Figma and documented with Storybook.\n\n## šŸŽÆ Overview\n\nThis project automatically extracts design tokens and components from the [DoF UI Library in Figma](https://www.figma.com/file/WrkiQCkVu5aikjyMs9Ufaq/DoF-UI-Library) and generates a complete Storybook documentation site with production-ready React components.\n\nInspired by **IBM Carbon Design System**, this design system provides:\n\n- šŸŽØ **Design Tokens** - Colors, typography, spacing extracted from Figma\n- šŸ§© **Component Library** - Reusable React components\n- šŸ“Š **Data Visualization** - Charts and data display components\n- šŸ’¬ **Conversational UI** - Chat and interaction components\n- ā™æ **Accessibility** - WCAG 2.1 AA compliant\n- šŸ“š **Documentation** - Comprehensive Storybook docs\n\n## šŸ“ Project Structure\n\n```\ndof-storybook/\nā”œā”€ā”€ .storybook/ # Storybook configuration\nā”œā”€ā”€ docs/ # Documentation pages (MDX)\nā”œā”€ā”€ scripts/ # Build and extraction scripts\nā”‚ ā”œā”€ā”€ extract-figma-tokens.js\nā”‚ ā””ā”€ā”€ extract-figma-components.js\nā”œā”€ā”€ src/\nā”‚ ā”œā”€ā”€ components/ # React components\nā”‚ ā”‚ ā”œā”€ā”€ basic/ # Basic components (Button, Input, etc.)\nā”‚ ā”‚ ā”œā”€ā”€ data-viz/ # Data visualization components\nā”‚ ā”‚ ā””ā”€ā”€ conversational/ # Chat and conversational UI\nā”‚ ā”œā”€ā”€ tokens/ # Design tokens (auto-generated)\nā”‚ ā”‚ ā”œā”€ā”€ tokens.json\nā”‚ ā”‚ ā”œā”€ā”€ tokens.css\nā”‚ ā”‚ ā””ā”€ā”€ tokens.js\nā”‚ ā”œā”€ā”€ assets/ # Icons, images\nā”‚ ā””ā”€ā”€ utils/ # Utility functions\nā””ā”€ā”€ package.json\n```\n\n## šŸš€ Quick Start\n\n### Prerequisites\n\n- Node.js >= 18.0.0\n- npm or yarn\n- Figma access token\n\n### Installation\n\n1. Clone the repository:\n```bash\ncd /Users/alberto.delapuente/projects/dof-storybook\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Configure Figma credentials:\n```bash\n# .env is already configured with:\nFIGMA_TOKEN=your_token_here\nFIGMA_FILE_KEY=WrkiQCkVu5aikjyMs9Ufaq\n```\n\n4. Extract design tokens from Figma:\n```bash\nnpm run extract-tokens\n```\n\n5. Start Storybook:\n```bash\nnpm run storybook\n```\n\nVisit http://localhost:6006 to view the Storybook!\n\n## šŸ“Š Figma Structure\n\nThe DoF UI Library in Figma is organized into:\n\n- **Logo** - Brand identity\n- **Colors** - Color palette and themes\n- **Typography** - Font scales and text styles\n- **Layout** - Grid system and spacing\n- **Iconography** - Icon library\n- **Components: Basic** - Buttons, inputs, cards, etc.\n- **Components: Data Visualisation** - Charts, graphs, tables\n- **Components: Conversational** - Chat bubbles, messages, etc.\n\n## šŸ› ļø Available Scripts\n\n| Script | Description |\n|--------|-------------|\n| `npm run storybook` | Start Storybook dev server on port 6006 |\n| `npm run build-storybook` | Build static Storybook for deployment |\n| `npm run extract-tokens` | Extract design tokens from Figma |\n| `npm run extract-components` | Extract component specs from Figma |\n\n## šŸŽØ Design Tokens\n\nDesign tokens are automatically extracted from Figma and available in multiple formats:\n\n- **JSON** - `src/tokens/tokens.json` - Raw token data\n- **CSS** - `src/tokens/tokens.css` - CSS custom properties\n- **JavaScript** - `src/tokens/tokens.js` - JS/TS exports\n\n### Usage Example\n\n```css\n/* Using CSS variables */\n.button {\n background-color: var(--color-primary);\n font-size: var(--font-size-body);\n padding: var(--spacing-04);\n}\n```\n\n```jsx\n// Using JS tokens\nimport { colors, typography, spacing } from './tokens/tokens.js';\n\nconst styles = {\n backgroundColor: colors.primary.value,\n fontSize: typography.body.fontSize,\n padding: spacing['spacing-04'].value\n};\n```\n\n## šŸ§© Component Development\n\n### Creating a New Component\n\n1. Create component directory:\n```bash\nmkdir -p src/components/basic/MyComponent\n```\n\n2. Create component files:\n```\nMyComponent/\nā”œā”€ā”€ MyComponent.jsx # Component implementation\nā”œā”€ā”€ MyComponent.css # Styles\nā”œā”€ā”€ MyComponent.stories.jsx # Storybook stories\nā”œā”€ā”€ MyComponent.test.jsx # Tests\nā””ā”€ā”€ index.js # Exports\n```\n\n3. Follow Carbon Design System patterns for consistency\n\n### Component Documentation\n\nEach component should include:\n\n- **Props table** - All available props with types and defaults\n- **Usage examples** - Common use cases\n- **Accessibility notes** - ARIA attributes, keyboard navigation\n- **Design guidelines** - When and how to use the component\n- **Figma link** - Link to component in Figma library\n\n## šŸ“– Documentation\n\nDocumentation is written in MDX and organized by:\n\n- **Foundations** - Design principles, tokens, guidelines\n- **Components** - Individual component docs\n- **Patterns** - Common patterns and best practices\n- **Resources** - Links, tools, changelog\n\n## ā™æ Accessibility\n\nAll components follow:\n\n- WCAG 2.1 AA compliance\n- Keyboard navigation support\n- Screen reader compatibility\n- Color contrast requirements (4.5:1 minimum)\n- Focus indicators\n- Semantic HTML\n\nUse the **@storybook/addon-a11y** to test accessibility in Storybook.\n\n## šŸš¢ Deployment\n\nBuild the static Storybook:\n\n```bash\nnpm run build-storybook\n```\n\nOutput will be in `storybook-static/` directory, ready for deployment to:\n- GitHub Pages\n- Netlify\n- Vercel\n- Any static hosting service\n\n## šŸ”— Links\n\n- [Figma Library](https://www.figma.com/file/WrkiQCkVu5aikjyMs9Ufaq/DoF-UI-Library)\n- [IBM Carbon Design System](https://carbondesignsystem.com/) (Inspiration)\n- [Storybook Documentation](https://storybook.js.org/)\n\n## šŸ“ License\n\nMIT\n\n## šŸ‘„ Contributors\n\n- Alberto de la Puente - Initial work\n\n---\n\n**Built with ā¤ļø using Storybook, React, and the Figma API**\n","readmeFilename":"README.md"}