@noxickon/onyx 2.0.0 → 2.0.1

package/README.md

@@ -10,34 +10,67 @@ Onyx is a modern React component library built with Tailwind CSS, designed for b
 ## Features
 
 - **Modern React Components** - Built with React 19 and TypeScript
+- **Tree-Shakeable** - Only import what you need, optimized bundle size
 - **Dark Mode Optimized** - All components designed for dark interfaces
-- **Material Design Icons** - Seamless integration with MDI icon set
-- **Tailwind CSS** - Fully customizable with Tailwind 4
+- **Material Design Icons** - 7,000+ icons via @mdi/js with tree-shaking support
+- **Tailwind CSS 4** - Fully customizable with latest Tailwind
+- **Type-Safe** - Full TypeScript support with strict typing
 - **Storybook Documentation** - Interactive component documentation
+- **Performance First** - ~94 KB gzipped (full library), tree-shakes to ~10-50 KB in practice
 
 ## Getting Started
 
 ### Installation
 
+Install Onyx and its peer dependencies:
+
 ```bash
-npm install @noxickon/onyx
+npm install @noxickon/onyx @mdi/js
 ```
 
-### Usage
+**Peer Dependencies:**
+
+- `react` ^19.0.0
+- `react-dom` ^19.0.0
+- `@mdi/js` ^7.0.0
+- `@apollo/client` ^4.0.0 (if using Apollo features)
+- `graphql` ^16.0.0 (if using GraphQL features)
+
+### Basic Usage
 
 ```tsx
+import { mdiHomeOutline, mdiCheck } from '@mdi/js';
 import { OxButton, OxIcon } from '@noxickon/onyx';
+import '@noxickon/onyx/styles';
 
 function App() {
   return (
     <div>
-      <OxButton variant="primary">Click Me</OxButton>
-      <OxIcon icon="mdiHomeOutline" size={1.2} />
+      <OxButton variant="primary">
+        <OxButton.Icon path={mdiCheck} />
+        Click Me
+      </OxButton>
+      <OxIcon path={mdiHomeOutline} size={1.2} />
     </div>
   );
 }
 ```
 
+### Icons
+
+Onyx uses Material Design Icons via `@mdi/js`. Import icons directly for optimal tree-shaking:
+
+```tsx
+import { mdiAccount, mdiHome, mdiEmail } from '@mdi/js';
+import { OxIcon } from '@noxickon/onyx';
+
+<OxIcon path={mdiAccount} />
+<OxIcon path={mdiHome} size={1.5} />
+<OxIcon path={mdiEmail} className="text-blue-500" />
+```
+
+Browse all 7,000+ available icons at [pictogrammers.com/library/mdi](https://pictogrammers.com/library/mdi/)
+
 ## Development
 
 ### Available Commands
@@ -46,9 +79,14 @@ function App() {
 | ------------------------- | ------------------------------------------------ |
 | `npm run dev`             | Starts Storybook development server on port 6006 |
 | `npm run build`           | Builds the component library for production      |
+| `npm run build:analyze`   | Builds and opens bundle size analyzer            |
 | `npm run preview`         | Previews the built package locally               |
-| `npm run build-storybook` | Builds static Storybook site for deployment      |
+| `npm run build:storybook` | Builds static Storybook site for deployment      |
+| `npm run test`            | Runs all tests with Vitest                       |
+| `npm run test:coverage`   | Runs tests with coverage report                  |
 | `npm run lint`            | Lint code with ESLint                            |
+| `npm run lint:fix`        | Fix lint issues automatically                    |
+| `npm run format`          | Format code with Prettier                        |
 
 ### Storybook
 
@@ -62,11 +100,69 @@ Then open http://localhost:6006 in your browser to view the component library.
 
 ### Adding a New Component
 
-1. Create a new directory under `src/stories/[ComponentName]`
-2. Add the component implementation in `src/stories/[ComponentName]/src/[ComponentName].tsx`
-3. Create types in `src/stories/[ComponentName]/src/[ComponentName].types.ts`
+1. Create a new directory under `src/ui/[ComponentName]` or `src/forms/[ComponentName]`
+2. Add the component implementation in `src/[category]/[ComponentName]/src/[ComponentName].tsx`
+3. Create types in `src/[category]/[ComponentName]/src/[ComponentName].types.ts`
 4. Add an `index.ts` file that exports the component with the `Ox` prefix
-5. Create stories in `src/stories/[ComponentName]/[ComponentName].stories.tsx`
+5. Create stories in `src/[category]/[ComponentName]/[ComponentName].stories.tsx`
+6. Add tests in `src/[category]/[ComponentName]/test/[ComponentName].test.tsx`
+
+## Migration Guide
+
+### Upgrading from v1.x to v2.0
+
+Version 2.0 introduces tree-shakeable icons for better performance. This is a **breaking change** requiring code updates.
+
+#### 1. Install @mdi/js
+
+```bash
+npm install @mdi/js
+```
+
+#### 2. Update Icon Usage
+
+**Before (v1.x):**
+
+```tsx
+import { OxIcon } from '@noxickon/onyx';
+
+<OxIcon path="mdiHome" />
+<OxAlert.Icon path="mdiCheck" />
+```
+
+**After (v2.0):**
+
+```tsx
+import { mdiHome, mdiCheck } from '@mdi/js';
+import { OxIcon, OxAlert } from '@noxickon/onyx';
+
+<OxIcon path={mdiHome} />
+<OxAlert.Icon path={mdiCheck} />
+```
+
+#### 3. Benefits
+
+- **91% smaller bundle** - From ~3 MB to ~267 KB (Frontend example)
+- **Tree-shaking** - Only icons you use are bundled
+- **Type-safe** - Full TypeScript validation for icon paths
+- **Better performance** - Faster load times and reduced network transfer
+
+#### 4. Migration Tips
+
+Search your codebase for icon usage:
+
+```bash
+# Find all icon usages
+grep -r 'path="mdi' src/
+
+# Or with ripgrep
+rg 'path="mdi' src/
+```
+
+Update each file:
+
+1. Import icons from `@mdi/js` at the top
+2. Change `path="mdiXxx"` to `path={mdiXxx}`
 
 ## License