{"_id":"@binrolecrab/rv-design-system","name":"@binrolecrab/rv-design-system","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@binrolecrab/rv-design-system","version":"0.0.1","type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"vite build --watch","build":"vite build","lint":"eslint .","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@eslint/js":"^9.21.0","@storybook/addon-essentials":"^8.6.12","@storybook/addon-interactions":"^8.6.12","@storybook/addon-onboarding":"^8.6.12","@storybook/blocks":"^8.6.12","@storybook/react":"^8.6.12","@storybook/react-vite":"^8.6.12","@storybook/test":"^8.6.12","@types/node":"^22.14.0","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@vitejs/plugin-react":"^4.3.4","eslint":"^9.21.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","eslint-plugin-storybook":"^0.12.0","globals":"^15.15.0","storybook":"^8.6.12","typescript":"~5.7.2","typescript-eslint":"^8.24.1","vite":"^6.2.0","vite-plugin-dts":"^4.5.3","vite-plugin-lib-inject-css":"^2.2.1"},"eslintConfig":{"extends":["plugin:storybook/recommended"]},"_id":"@binrolecrab/rv-design-system@0.0.1","gitHead":"d96e15e2f77b1fd21f396e614f0623b03df9b19e","description":"A minimal, educational template for building a Design System using React, TypeScript, and Vite. This template is specifically designed for students learning about component libraries and design systems.","_nodeVersion":"20.17.0","_npmVersion":"11.1.0","dist":{"integrity":"sha512-Urep4dlh/wHTZj6Re1OSG+uy3bAxwt/D+SrXip5QOhUgsYqyDWT6Qi+X2Z/ea09sY9U9POekVR3353xQxsJs6g==","shasum":"1efd9b63b9c52b88d2cd57b7026c4b43722ee424","tarball":"https://registry.npmjs.org/@binrolecrab/rv-design-system/-/rv-design-system-0.0.1.tgz","fileCount":47,"unpackedSize":30060,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDtTjVzkJUN+rSXFjmh+s7ZKw5fin3npGdeD7x36dktlgIgdy37ae1w90u+8sugek4EkazUr0Ql+cqfD+UJLs8R2o0="}]},"_npmUser":{"name":"binrolecrab","email":"rob.vigier@gmail.com"},"directories":{},"maintainers":[{"name":"binrolecrab","email":"rob.vigier@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rv-design-system_0.0.1_1743776917509_0.528420258296844"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-04T14:28:37.458Z","0.0.1":"2025-04-04T14:28:37.716Z","modified":"2025-04-04T14:28:37.953Z"},"maintainers":[{"name":"binrolecrab","email":"rob.vigier@gmail.com"}],"description":"A minimal, educational template for building a Design System using React, TypeScript, and Vite. This template is specifically designed for students learning about component libraries and design systems.","readme":"# Design System Template\r\n\r\nA minimal, educational template for building a Design System using React, TypeScript, and Vite. This template is specifically designed for students learning about component libraries and design systems.\r\n\r\n## 🎯 Purpose\r\n\r\nThis template provides a foundation for:\r\n\r\n- Learning how to build a component library\r\n- Understanding Design System principles\r\n- Practicing component development with React and TypeScript\r\n- Exploring documentation with Storybook\r\n\r\n## 🚀 Getting Started\r\n\r\nClone this repository:\r\n\r\n```bash\r\ngit clone [repository-url]\r\ncd ds-template\r\n```\r\n\r\nInstall dependencies:\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\nStart Storybook to view components:\r\n\r\n```bash\r\nnpm run storybook\r\n```\r\n\r\nBuild the library:\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\n## 📦 Project Structure\r\n\r\n```txt\r\nds-template/\r\n├── src/\r\n│   ├── components/     # React components\r\n│   │   └── divider/   # Example component\r\n│   └── index.ts       # Main export file\r\n├── .storybook/        # Storybook configuration\r\n└── vite.config.ts     # Build configuration\r\n```\r\n\r\n## 🛠️ Technology Stack\r\n\r\n- **React** - UI library\r\n- **TypeScript** - Type safety and better developer experience\r\n- **Vite** - Build tool\r\n- **Storybook** - Component documentation and development\r\n- **ESLint** - Code linting\r\n- **CSS Modules** - Scoped styling\r\n\r\n## 📚 Available Scripts\r\n\r\n- `npm run dev` - Builds the library in watch mode\r\n- `npm run build` - Builds the library for production\r\n- `npm run storybook` - Starts Storybook development server\r\n- `npm run build-storybook` - Builds Storybook for production\r\n- `npm run lint` - Runs ESLint\r\n\r\n## 🎨 Creating Components\r\n\r\n1. Create a new directory under `src/components`\r\n2. Add your component files (`.tsx`, `.module.css`)\r\n3. Create a story file (`.stories.tsx`)\r\n4. Export the component in `src/index.ts`\r\n\r\nExample component structure:\r\n\r\n```txt\r\ncomponent-name/\r\n├── component-name.tsx\r\n├── component-name.module.css\r\n├── component-name.stories.tsx\r\n└── index.ts\r\n```\r\n\r\n## 📖 Learning Resources\r\n\r\n- [React Documentation](https://react.dev/)\r\n- [Storybook Tutorials](https://storybook.js.org/tutorials/)\r\n- [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook)\r\n\r\n## 🤝 Contributing\r\n\r\nThis template is meant for educational purposes. Feel free to fork it and adapt it to your needs!\r\n","readmeFilename":"README.md","_rev":"1-4c7e373b9d910d1d7ab1ebdd91c5b6fd"}