{"_id":"@alxmcr/ds-cupcake-ui","_rev":"1-80daa7f7192d28e660abb8dde41ec779","name":"@alxmcr/ds-cupcake-ui","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1-rc01":{"name":"@alxmcr/ds-cupcake-ui","version":"0.0.1-rc01","keywords":["react","typescript","storybook","design-systems","ui-components"],"author":{"name":"Alejandro M. Coca"},"license":"MIT","_id":"@alxmcr/ds-cupcake-ui@0.0.1-rc01","maintainers":[{"name":"alxmcr_dev","email":"alxmcr@outlook.com"}],"homepage":"https://github.com/alxmcr/ds-cupcake-ui#readme","bugs":{"url":"https://github.com/alxmcr/ds-cupcake-ui/issues"},"dist":{"shasum":"0a4ba4dfa626c2c28092308bf4f11766c52a7bd8","tarball":"https://registry.npmjs.org/@alxmcr/ds-cupcake-ui/-/ds-cupcake-ui-0.0.1-rc01.tgz","fileCount":124,"integrity":"sha512-RwW2BlWlIio+qvOYdrq6He0f9w8eNQ1JRCKdrB7N107+p5l9FoTuKNjCq3+kuII6vqwuY4s6gpheiG2r1IuAhQ==","signatures":[{"sig":"MEYCIQC+o3njlghK2AN6uS0dIsB1rR4HU8lte9IEJsry9lqm6wIhAMj3/zTfSvwzO83zNr15rSq5zPybjr1Qs2dImBEUQ4JN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4468807},"type":"module","gitHead":"4fee05d3cc554d50eb6a4a348d6571a17f7958e0","scripts":{"dev":"vite","lint":"npx eslint src","test":"jest","build":"tsc -b && vite build","format":"npm run typescript:check && npm run prettier:fix && npm run lint:fix","preview":"vite preview","lint:fix":"npm run lint -- --fix","prettier":"npx prettier src --check","chromatic":"npx chromatic --project-token=chpt_aa40aa19d8a4c7d","storybook":"storybook dev -p 6006","test:debug":"DEBUG=nock.* jest","prettier:fix":"npm run prettier -- --write","test:verbose":"jest --verbose","build-storybook":"storybook build","typescript:check":"npx tsc --noEmit"},"_npmUser":{"name":"alxmcr_dev","email":"alxmcr@outlook.com"},"repository":{"url":"git+https://github.com/alxmcr/ds-cupcake-ui.git","type":"git"},"_npmVersion":"10.2.3","description":"TA design system for a fintech startup that is changing the world.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"react":"^18.3.1","prettier":"^3.3.3","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","vite":"^5.3.4","eslint":"^8.57.0","postcss":"^8.4.41","ts-node":"^10.9.2","chromatic":"^11.7.0","storybook":"^8.2.7","typescript":"^5.2.2","@types/jest":"^29.5.12","@types/node":"^22.1.0","tailwindcss":"^3.4.7","@types/react":"^18.3.3","autoprefixer":"^10.4.20","@storybook/test":"^8.2.7","@storybook/react":"^8.2.7","@types/react-dom":"^18.3.0","@storybook/blocks":"^8.2.7","@babel/preset-react":"^7.24.7","eslint-plugin-react":"^7.35.0","@vitejs/plugin-react":"^4.3.1","@storybook/react-vite":"^8.2.7","@storybook/addon-links":"^8.2.7","@testing-library/react":"^16.0.0","jest-environment-jsdom":"^29.7.0","eslint-plugin-storybook":"^0.8.0","@babel/preset-typescript":"^7.24.7","@chromatic-com/storybook":"^1.6.1","@testing-library/jest-dom":"^6.4.8","@typescript-eslint/parser":"^8.0.1","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-tailwindcss":"^3.17.4","@storybook/addon-essentials":"^8.2.7","@storybook/addon-onboarding":"^8.2.7","@testing-library/user-event":"^14.5.2","eslint-plugin-react-refresh":"^0.4.7","prettier-plugin-tailwindcss":"^0.6.5","@storybook/addon-interactions":"^8.2.7","eslint-plugin-testing-library":"^6.2.2","@typescript-eslint/eslint-plugin":"^8.0.1"},"_npmOperationalInternal":{"tmp":"tmp/ds-cupcake-ui_0.0.1-rc01_1723004495755_0.5099369622217109","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@alxmcr/ds-cupcake-ui","version":"0.0.2","type":"module","scripts":{"dev":"vite","build":"tsc -b && vite build","preview":"vite preview","prettier":"npx prettier src --check","prettier:fix":"npm run prettier -- --write","lint":"npx eslint src","lint:fix":"npm run lint -- --fix","typescript:check":"npx tsc --noEmit","format":"npm run typescript:check && npm run prettier:fix && npm run lint:fix","storybook":"storybook dev -p 6006","build-storybook":"storybook build","chromatic":"npx chromatic --project-token=chpt_aa40aa19d8a4c7d","test":"jest","test:debug":"DEBUG=nock.* jest","test:verbose":"jest --verbose"},"dependencies":{"prettier":"^3.3.3","react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@chromatic-com/storybook":"^1.6.1","@storybook/addon-essentials":"^8.2.7","@storybook/addon-interactions":"^8.2.7","@storybook/addon-links":"^8.2.7","@storybook/addon-onboarding":"^8.2.7","@storybook/blocks":"^8.2.7","@storybook/react":"^8.2.7","@storybook/react-vite":"^8.2.7","@storybook/test":"^8.2.7","@testing-library/jest-dom":"^6.4.8","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.2","@types/jest":"^29.5.12","@types/node":"^22.1.0","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@typescript-eslint/eslint-plugin":"^8.0.1","@typescript-eslint/parser":"^8.0.1","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.4.20","chromatic":"^11.7.0","eslint":"^8.57.0","eslint-plugin-react":"^7.35.0","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-react-refresh":"^0.4.7","eslint-plugin-storybook":"^0.8.0","eslint-plugin-tailwindcss":"^3.17.4","eslint-plugin-testing-library":"^6.2.2","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.41","prettier-plugin-tailwindcss":"^0.6.5","storybook":"^8.2.7","tailwindcss":"^3.4.7","ts-node":"^10.9.2","typescript":"^5.2.2","vite":"^5.3.4"},"description":"TA design system for a fintech startup that is changing the world.","repository":{"type":"git","url":"git+https://github.com/alxmcr/ds-cupcake-ui.git"},"keywords":["react","typescript","storybook","design-systems","ui-components"],"author":{"name":"Alejandro M. Coca"},"license":"MIT","bugs":{"url":"https://github.com/alxmcr/ds-cupcake-ui/issues"},"homepage":"https://github.com/alxmcr/ds-cupcake-ui#readme","_id":"@alxmcr/ds-cupcake-ui@0.0.2","gitHead":"7fae1279411db41c1473d62ca236514ef13298fe","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-Hn+EMRd39sucZ1VNatVAwoYg7uMyuaSlOf9usy2lrV204+dQhguqFTXOrwWUtSRS4lnS/tconfipTJI5zwqsZw==","shasum":"423af959f28e605421a4149fad1104f9f8b18f32","tarball":"https://registry.npmjs.org/@alxmcr/ds-cupcake-ui/-/ds-cupcake-ui-0.0.2.tgz","fileCount":125,"unpackedSize":12135132,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPoZopflMY12vBDU4qqJ9SWQd1z0+MO1Rp8/i53foS1AiBX79ImPSiae/qkA5WFJN9ydEOXlv//lg8qHGMcE69g8Q=="}]},"_npmUser":{"name":"alxmcr_dev","email":"alxmcr@outlook.com"},"directories":{},"maintainers":[{"name":"alxmcr_dev","email":"alxmcr@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ds-cupcake-ui_0.0.2_1723008662376_0.4471579525928433"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-07T04:21:35.667Z","modified":"2024-08-07T05:31:03.144Z","0.0.1-rc01":"2024-08-07T04:21:36.037Z","0.0.2":"2024-08-07T05:31:02.936Z"},"bugs":{"url":"https://github.com/alxmcr/ds-cupcake-ui/issues"},"author":{"name":"Alejandro M. Coca"},"license":"MIT","homepage":"https://github.com/alxmcr/ds-cupcake-ui#readme","keywords":["react","typescript","storybook","design-systems","ui-components"],"repository":{"type":"git","url":"git+https://github.com/alxmcr/ds-cupcake-ui.git"},"description":"TA design system for a fintech startup that is changing the world.","maintainers":[{"name":"alxmcr_dev","email":"alxmcr@outlook.com"}],"readme":"# Cupcake UI\n\nA design system for a fintech startup that is changing the world.\n\n![Banner](https://cupcake-ui-front.netlify.app/banners/01-cupcake-ui-banner.png)\n\n## Screenshots\n\n- Storybook home page\n\n![Storybook home page](https://cupcake-ui-front.netlify.app/screenshots-storybook/01-storybook-home-page.png)\n\n- Atomic design: stories\n\n![Atomic design: stories](https://cupcake-ui-front.netlify.app/screenshots-storybook/02-atomic-design-stories.png)\n\n- Combobox storybook: default\n\n![Combobox storybook: default](https://cupcake-ui-front.netlify.app/screenshots-storybook/03-combobox-storybook-default.png)\n\n- Combobox storybook: open\n\n![Combobox storybook: open](https://cupcake-ui-front.netlify.app/screenshots-storybook/04-page-storybook-open.png)\n\n- Combobox storybook: select\n\n![Combobox storybook: select](https://cupcake-ui-front.netlify.app/screenshots-storybook/05-page-storybook-select.png)\n\n- Combobox storybook: search\n\n![Combobox storybook: search](https://cupcake-ui-front.netlify.app/screenshots-storybook/06-page-storybook-search.png)\n\n## Tech Stack\n\n**Client:** Typescript, React, React hooks, React Router, TailwindCSS, Storybook\n\n**Server:** Vite.js\n\n## Storybook\n\n- [Storybook: Github Page](https://alxmcr.github.io/ds-cupcake-ui)\n- [Cupcake UI - Storybook at Chromatic\\*](https://66b1bf8878373c966dd1bcab-hrhfrvfedy.chromatic.com/)\n\n(\\*) Chromatic: you need to create an account at [chromatic.com](https://www.chromatic.com/)\n\n## Environment Variables\n\nTo run this project, you will need to add the following environment variables to your `.env` or `.env.local` file: `VITE_APP_PORT`\n\n**For example:**\n\n`VITE_APP_PORT=7012`\n\n## Run Locally\n\nClone the project\n\n```bash\n  git clone https://github.com/alxmcr/cupcake-ui\n```\n\nGo to the project directory\n\n```bash\n  cd cupcake-ui\n```\n\nInstall dependencies\n\n```bash\n  npm install\n```\n\nStart the storybook server\n\n```bash\n  npm run storybook\n\n  # http://localhost:6006/\n```\n\nStart the development server\n\n```bash\n  npm run dev\n\n  # http://localhost:<your_port>/\n```\n\n`<your_port>`: on enviroment variables (`.env`, `.env.local`).\n\n## Combobox in Action\n\n```tsx\nimport { ComboBox } from '../../../components/03_organisms/ComboBox';\nimport mockUsersData from '../../../mocks/data/sample-options-user.json';\n\ntype Props = {\n  title: string;\n};\n\nexport default function PageTemplateComboBox({ title = '' }: Props) {\n  return (\n    <div className=\"flex h-[500px] flex-col gap-4\">\n      <h1 className=\"my-4 text-[20px]\">{title}</h1>\n      <ComboBox\n        captionText=\"Solo podrás elegir a Victor para continuar.\"\n        id=\"ControlComboBox-Users\"\n        labelText=\"Elige un usuario\"\n        name=\"combobox-users\"\n        options={mockUsersData}\n      />\n    </div>\n  );\n}\n```\n\n![Combobox in action](https://cupcake-ui-front.netlify.app/screenshots-using/02-combobox-in-action.png)\n\n## Discoveries\n\n(\\*) Some comments left on Figma design.\n\n- Multiple color palette - Follow TailwindCSS customization.\n- Different spacing: line-height and letter-spacing - Follow TailwindCS custom values.\n- Research about more box-shadow best practices with Tailwind - Work together inline CSS classes with default CSS classes on CSS files.\n- Reduce scope about scrollbar and styles definition - centralize the global styles to `tailwind.css`.\n- Atomic design and naming conventions - Methodology to help mem with a fast development, maintain, and reduce time to development.\n\n## Next steps, next releases\n\n- Add more unit testing with React Testing Library.\n- Improve components considering web accessibility (a11y).\n- Enable on components with internationalization (i18n).\n- Apply more Tailwind.css customization.\n- Enable Dark/Light modes.\n- Research, implement multibranding for multiple companies and customers.\n- Add more use cases about components built.\n- After more uses cases, work on integration testing.\n- Research about a customization developers documentation (on top Storybook)\n- Publish NPM package and GitHub Package.\n\n## Authors\n\n- [Alejandro M. Coca Rojas (@alxmcr)](https://www.github.com/alxmcr)\n\n## Feedback\n\nIf you have any feedback, please reach out to us at amcocarojas@gmail.com.\n","readmeFilename":"README.md"}