{"_id":"@avinash_tyagi/design-system-react","_rev":"3-f5ee223a7d0bd86fc7062458e062e828","name":"@avinash_tyagi/design-system-react","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@avinash_tyagi/design-system-react","version":"1.0.0","keywords":["react","design-system","atomic-design","components","ui-library"],"author":{"name":"avinash_tyagi"},"license":"MIT","_id":"@avinash_tyagi/design-system-react@1.0.0","maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"homepage":"https://github.com/Avin1998/design_system#readme","bugs":{"url":"https://github.com/Avin1998/design_system/issues"},"dist":{"shasum":"8bba8efd68198e257ff402f8951d683115ee24ed","tarball":"https://registry.npmjs.org/@avinash_tyagi/design-system-react/-/design-system-react-1.0.0.tgz","fileCount":8,"integrity":"sha512-v3ha2dGGS11m4ISYf9A8Co736r9smubX1bflThNrK4LxI4Qz2SR8Uz9MTXBjEo6d8xk3hzQeImSbtasSyf3KnA==","signatures":[{"sig":"MEUCIBdFs3vav1fJuB22PPWIOQVnR2Bvua9p9c3Z3nSz1GpcAiEAzCi8o8h7o5ePN8lOPUXTuPVc2xC6RvUYNN7DCqOg24E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":59253665},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.esm.js","gitHead":"7eb96262b2f48ad6200de049df77cc48e63637e5","scripts":{"test":"react-scripts test","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","build:lib":"rollup -c","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"},"repository":{"url":"git+https://github.com/Avin1998/design_system.git","type":"git"},"_npmVersion":"10.9.2","description":"A React design system with atomic design principles - atoms, molecules, and organisms","directories":{},"_nodeVersion":"22.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"react-icons":"^5.5.0","react-router-dom":"^6.23.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^2.79.2","react-dom":"^18.2.0","@babel/core":"^7.28.0","react-scripts":"5.0.1","@babel/preset-env":"^7.28.0","@babel/preset-react":"^7.27.1","rollup-plugin-babel":"^4.4.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-image":"^3.0.3","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-node-resolve":"^15.3.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-react_1.0.0_1754311350145_0.5869768066407115","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@avinash_tyagi/design-system-react","version":"1.0.1","keywords":["react","design-system","atomic-design","components","ui-library"],"author":{"name":"avinash_tyagi"},"license":"MIT","_id":"@avinash_tyagi/design-system-react@1.0.1","maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"homepage":"https://github.com/Avin1998/design_system#readme","bugs":{"url":"https://github.com/Avin1998/design_system/issues"},"dist":{"shasum":"03af17c9499b028b77700a38b99d801097ae0085","tarball":"https://registry.npmjs.org/@avinash_tyagi/design-system-react/-/design-system-react-1.0.1.tgz","fileCount":8,"integrity":"sha512-9M5wnhdoxr2jmXF+RcFwJrKSx67676RNHEAewcZfde7zcxMSqTJd1cCwISrdxI9hpMFZ4ymv/SsbieeglCAXzw==","signatures":[{"sig":"MEUCIGUwtvlCNsX9z9ki2qim/hnJgXeWovbGAwTbqVvPVB2OAiEAmqHv6qW5PBVx1BSD0nsjmrib/aEK7rDvIVLs3zJi7jM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1247741},"main":"lib/index.js","types":"lib/index.d.ts","module":"lib/index.esm.js","gitHead":"e45055bd9af52fd719bab6ed100c3c2f4c345ba5","scripts":{"test":"react-scripts test","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","build:lib":"rollup -c","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"},"repository":{"url":"git+https://github.com/Avin1998/design_system.git","type":"git"},"_npmVersion":"10.9.2","description":"A React design system with atomic design principles - atoms, molecules, and organisms","directories":{},"_nodeVersion":"22.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"react-icons":"^5.5.0","react-router-dom":"^6.23.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^2.79.2","react-dom":"^18.2.0","@babel/core":"^7.28.0","react-scripts":"5.0.1","@babel/preset-env":"^7.28.0","@babel/preset-react":"^7.27.1","rollup-plugin-babel":"^4.4.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-image":"^3.0.3","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-node-resolve":"^15.3.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-react_1.0.1_1754313155717_0.8149783263834498","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@avinash_tyagi/design-system-react","version":"1.0.2","description":"A React design system with atomic design principles - atoms, molecules, and organisms","main":"lib/index.js","module":"lib/index.esm.js","types":"lib/index.d.ts","keywords":["react","design-system","atomic-design","components","ui-library"],"author":{"name":"avinash_tyagi"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Avin1998/design_system.git"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"dependencies":{"react-icons":"^5.5.0","react-router-dom":"^6.23.1"},"devDependencies":{"@babel/core":"^7.28.0","@babel/preset-env":"^7.28.0","@babel/preset-react":"^7.27.1","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-image":"^3.0.3","@rollup/plugin-node-resolve":"^15.3.1","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","rollup":"^2.79.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2"},"scripts":{"start":"react-scripts start","build":"react-scripts build","build:lib":"rollup -c","test":"react-scripts test","eject":"react-scripts eject","prepublishOnly":"npm run build:lib"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"_id":"@avinash_tyagi/design-system-react@1.0.2","gitHead":"26c6d12347780edcf9b2150898650f04a90c0535","bugs":{"url":"https://github.com/Avin1998/design_system/issues"},"homepage":"https://github.com/Avin1998/design_system#readme","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lUr1OQ2GKocUoRhQNonJ4gBqmWHghgYa7lJNX4IMvRBcBDHArp6MSIPsK41b81tJhZZ6uL38GXtYiEsRD8w4XQ==","shasum":"6c6d0915f349cc949bf18f48b7156dd4112c0112","tarball":"https://registry.npmjs.org/@avinash_tyagi/design-system-react/-/design-system-react-1.0.2.tgz","fileCount":8,"unpackedSize":1248879,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDKMaHbnGAm+frN0p8qazerD/UpaVABgw9DC8qwbeC58QIgLp3/BzVmVAtttk45bsFTWjCZoupIuKXoAL2jr0P7eAM="}]},"_npmUser":{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"},"directories":{},"maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system-react_1.0.2_1754314422966_0.6304411484984307"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-04T12:42:30.029Z","modified":"2025-08-04T13:33:43.443Z","1.0.0":"2025-08-04T12:42:30.847Z","1.0.1":"2025-08-04T13:12:35.983Z","1.0.2":"2025-08-04T13:33:43.251Z"},"bugs":{"url":"https://github.com/Avin1998/design_system/issues"},"author":{"name":"avinash_tyagi"},"license":"MIT","homepage":"https://github.com/Avin1998/design_system#readme","keywords":["react","design-system","atomic-design","components","ui-library"],"repository":{"type":"git","url":"git+https://github.com/Avin1998/design_system.git"},"description":"A React design system with atomic design principles - atoms, molecules, and organisms","maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"readme":"# @avin1998/design-system-react\r\n\r\nA React design system with atomic design principles featuring atoms, molecules, and organisms for building consistent user interfaces.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @avin1998/design-system-react\r\n```\r\n\r\n## Peer Dependencies\r\n\r\nThis package has the following peer dependencies that you need to install in your project:\r\n\r\n```bash\r\nnpm install react react-dom\r\n```\r\n\r\n## ⚠️ Important: Import Styles\r\n\r\n**You must import the CSS file for components to have proper styling:**\r\n\r\n```javascript\r\n// Import the CSS styles (REQUIRED)\r\nimport '@avin1998/design-system-react/lib/index.css';\r\n\r\n// Then import components\r\nimport { \r\n  Button, \r\n  Card, \r\n  Header, \r\n  MainLayout \r\n} from '@avin1998/design-system-react';\r\n```\r\n\r\n## Usage\r\n\r\n### Basic Import\r\n\r\n```javascript\r\n// ALWAYS import CSS first\r\nimport '@avin1998/design-system-react/lib/index.css';\r\n\r\nimport { \r\n  Button, \r\n  Card, \r\n  Header, \r\n  MainLayout \r\n} from '@avin1998/design-system-react';\r\n```\r\n\r\n### Complete Example\r\n\r\n```javascript\r\nimport React, { useState } from 'react';\r\n\r\n// REQUIRED: Import styles first\r\nimport '@avin1998/design-system-react/lib/index.css';\r\n\r\n// Then import components\r\nimport { \r\n  MainLayout, \r\n  Header, \r\n  CardGrid, \r\n  ExpandedCard,\r\n  Button\r\n} from '@avin1998/design-system-react';\r\n\r\nexport default function App() {\r\n  const [search, setSearch] = useState('');\r\n  const [expandedCard, setExpandedCard] = useState(null);\r\n  \r\n  const patterns = [\r\n    {\r\n      name: 'Two Pointers',\r\n      description: 'Solve problems using two pointers technique',\r\n      progress: 1,\r\n      status: 'done',\r\n    },\r\n    // ... more data\r\n  ];\r\n  \r\n  return (\r\n    <MainLayout>\r\n      <Header \r\n        title=\"My App\" \r\n        search={search} \r\n        onSearchChange={e => setSearch(e.target.value)} \r\n      />\r\n      <CardGrid \r\n        items={patterns} \r\n        onCardClick={setExpandedCard}\r\n      />\r\n      {expandedCard && (\r\n        <ExpandedCard\r\n          {...expandedCard}\r\n          onClose={() => setExpandedCard(null)}\r\n        />\r\n      )}\r\n    </MainLayout>\r\n  );\r\n}\r\n```\r\n\r\n## Component Categories\r\n\r\n### Atoms (Basic building blocks)\r\n- `Badge` - Status indicators and labels\r\n- `Button` - Various button styles (primary, secondary, integration, back)\r\n- `Icon` - Icon display component\r\n- `Input` - Form input fields\r\n- `InputField` - Enhanced input with labels\r\n- `LoadingSpinner` - Loading indicators\r\n- `Modal` - Modal dialogs\r\n- `ProgressBar` - Progress indicators\r\n- `Rating` - Star ratings\r\n- `TextArea` - Multi-line text inputs\r\n- `Tooltip` - Hover tooltips\r\n- And more...\r\n\r\n### Molecules (Component combinations)\r\n- `Card` - Content cards with progress\r\n- `Header` - Page headers with search\r\n- `QuestionCard` - Interactive question cards\r\n- `ComponentPalette` - Component selection interface\r\n- `BrainSegment` - Interactive brain map segments\r\n- `ExpandedCard` - Detailed card overlays\r\n- And more...\r\n\r\n### Organisms (Complex component compositions)\r\n- `MainLayout` - Main page layout\r\n- `CardGrid` - Grid of cards with filtering\r\n- `InteractiveBrainMap` - Brain visualization interface\r\n- `QuestionCardStack` - Stack of question cards\r\n- `DesignCanvas` - Design canvas interface\r\n- `TopNavBar` - Top navigation\r\n- `LeftSideNavBar` - Side navigation\r\n- And more...\r\n\r\n## Key Features\r\n\r\n### Modular Design\r\nAll components accept data as props instead of using hardcoded values:\r\n\r\n```javascript\r\n// ✅ Good - Data passed as props\r\n<ComponentPalette \r\n  components={myComponents} \r\n  categories={myCategories} \r\n/>\r\n\r\n// ❌ Avoid - Don't rely on hardcoded internal data\r\n```\r\n\r\n### Flexible Styling\r\nComponents come with default CSS that must be imported:\r\n\r\n```javascript\r\n// REQUIRED for styling - import this at the top of your main app file\r\nimport '@avin1998/design-system-react/lib/index.css';\r\n```\r\n\r\n**Without importing the CSS file, components will render as unstyled HTML elements.**\r\n\r\n### Brain States Constants\r\nFor components that work with brain interaction states:\r\n\r\n```javascript\r\nimport { BRAIN_STATES } from '@avin1998/design-system-react';\r\n\r\n// Available states: INACTIVE, HOVER, ACTIVE, COMPLETED\r\n<BrainSegment state={BRAIN_STATES.ACTIVE} />\r\n```\r\n\r\n## Component Props Examples\r\n\r\n### Button Component\r\n```javascript\r\n<Button variant=\"primary\">Primary Button</Button>\r\n<Button variant=\"secondary\">Secondary Button</Button>\r\n<Button variant=\"integration\" icon=\"🔗\" subtitle=\"Connect tools\">\r\n  Integration Button\r\n</Button>\r\n<Button variant=\"back\" onClick={handleBack}>Back</Button>\r\n```\r\n\r\n### Card Component\r\n```javascript\r\n<Card \r\n  title=\"Pattern Name\"\r\n  description=\"Pattern description\"\r\n  progress={0.75}\r\n  status=\"active\" // 'inactive', 'active', or 'done'\r\n  onClick={handleCardClick}\r\n/>\r\n```\r\n\r\n### InteractiveBrainMap Component\r\n```javascript\r\n<InteractiveBrainMap\r\n  brainSegments={segmentData}\r\n  brainDimensions={{ viewBox: '0 0 1024 731', width: 400, height: 300 }}\r\n  activeSegmentId=\"segment-1\"\r\n  completedSegments={['segment-2']}\r\n  onSegmentClick={handleSegmentClick}\r\n/>\r\n```\r\n\r\n### ComponentPalette Component\r\n```javascript\r\n<ComponentPalette\r\n  components={[\r\n    { id: 1, name: 'Button', category: 'Atoms', description: '...' },\r\n    // ... more components\r\n  ]}\r\n  categories={['All', 'Atoms', 'Molecules', 'Organisms']}\r\n/>\r\n```\r\n\r\n## Development\r\n\r\nTo work on this design system:\r\n\r\n1. Clone the repository\r\n2. Install dependencies: `npm install`\r\n3. Build the library: `npm run build:lib`\r\n4. Test with the example: `cd example && npm install && npm start`\r\n\r\n## Example Application\r\n\r\nSee the `example/` folder for a complete demonstration of how to use this design system in a React application. The example recreates a coding patterns interface using components from this library.\r\n\r\nTo run the example:\r\n\r\n```bash\r\ncd example\r\nnpm install\r\nnpm start\r\n```\r\n\r\n## Building for Production\r\n\r\nThe library is built using Rollup and outputs both CommonJS and ES modules:\r\n\r\n- CommonJS: `lib/index.js`\r\n- ES Modules: `lib/index.esm.js`\r\n- CSS: `lib/index.css`\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Contributing\r\n\r\n1. Fork the repository\r\n2. Create a feature branch\r\n3. Make your changes (ensure components accept data as props)\r\n4. Test with the example application\r\n5. Submit a pull request\r\n\r\n## Migration Guide\r\n\r\nIf migrating from the original codebase:\r\n\r\n1. Install the npm package\r\n2. **Import the CSS file first**: `import '@avin1998/design-system-react/lib/index.css';`\r\n3. Replace direct file imports with package imports\r\n4. Pass data as props instead of importing data files\r\n5. Update any hardcoded constants (e.g., use `BRAIN_STATES` from the package)\r\n\r\nFor more detailed examples, refer to the `example/` folder in this repository.\r\n\r\n## ⚠️ Troubleshooting Styles\r\n\r\n**Problem**: Components import successfully but have no styling (appear as plain HTML)?\r\n\r\n**Solution**: You must import the CSS file. Add this line to your main app file:\r\n\r\n```javascript\r\nimport '@avin1998/design-system-react/lib/index.css';\r\n```\r\n\r\n**Common Issues**:\r\n- Missing CSS import (most common)\r\n- Wrong CSS import path\r\n- CSS imported in wrong file (should be in main app file)\r\n\r\nSee `TEST_STYLING.md` for a complete troubleshooting guide.","readmeFilename":"README.md"}