demio-ui 4.0.12 → 4.0.14

package/README.md

@@ -83,7 +83,7 @@ When creating new components, follow these steps:
 
 ### Code recommendations:
 
-- one component -> one file with all related files (CSS, tests etc.)
+- one component -> one folder with all related files (CSS, tests etc.)
 - try to make components as simple as possible(try make it stateless if it possible)
 - group hooks by type (state, ref, effect, etc.)
 - if you write a comment - try to make it short and clear, don't add obvious comments in code like `// render component` or `//hooks`
@@ -156,13 +156,13 @@ We monitor bundle sizes to ensure our library remains lightweight and performant
 
 ### 📊 **Current Bundle Sizes**
 
-| Component                  | Size           | Purpose                      |
-| -------------------------- | -------------- | ---------------------------- |
-| **JavaScript Bundle**      | 886KB (0.85MB) | Core library code (minified) |
-| **CSS Bundle**             | 76KB           | Styles and theming           |
-| **TypeScript Definitions** | 164KB          | Type definitions             |
-| **SVG Icons**              | 105 files      | Icon assets                  |
-| **Total Package Size**     | **2.5MB**      | Complete library on disk     |
+| Component                  | Size                      | Purpose                      |
+| -------------------------- | ------------------------- | ---------------------------- |
+| **JavaScript Bundle**      | 500KB (CJS) / 420KB (ESM) | Core library code (minified) |
+| **CSS Bundle**             | 76KB                      | Styles and theming           |
+| **TypeScript Definitions** | 152KB                     | Type definitions             |
+| **SVG Icons**              | 96 files                  | Icon assets                  |
+| **Total Package Size**     | **2.4MB**                 | Complete library on disk     |
 
 ### 🔍 **Bundle Analysis Tools**
 
@@ -174,7 +174,7 @@ We provide multiple tools to analyze bundle sizes from different perspectives:
 npm run build:analyze
 ```
 
-- **Measures**: Only the JavaScript bundle (886KB)
+- **Measures**: Only the JavaScript bundle
 - **Shows**: Module breakdown, dependencies, tree-shaking analysis
 - **Output**: Interactive HTML visualization with Gzip and Brotli sizes
 - **Purpose**: Optimize JavaScript code and identify large dependencies
@@ -185,7 +185,7 @@ npm run build:analyze
 npm run bundle-size
 ```
 
-- **Measures**: All output files (2.5MB total)
+- **Measures**: All output files
 - **Shows**: JavaScript, CSS, TypeScript definitions, and other assets
 - **Purpose**: Monitor total package size for distribution
 
@@ -209,23 +209,15 @@ npm run analyze-all
 - **Shows**: Complete picture of bundle and assets
 - **Purpose**: Full analysis for optimization planning
 
-### 📈 **Bundle Size Guidelines**
-
-- **JavaScript Bundle**: Target under 1MB (current: 886KB ✅)
-- **CSS Bundle**: Target under 100KB (current: 76KB ✅)
-- **Total Package**: Target under 3MB (current: 2.5MB ✅)
-- **SVG Icons**: Keep individual files under 10KB
-- **TypeScript Definitions**: Monitor for excessive type complexity
-
 ### 🎯 **Why Two Different Measurements?**
 
-1. **Visualizer (886KB)**:
+1. **Visualizer (500KB CJS / 420KB ESM)**:
 
    - Shows only JavaScript code size
    - Helps optimize code and dependencies
    - Focuses on runtime performance
 
-2. **File Size Commands (2.5MB)**:
+2. **File Size Commands (2.4MB)**:
    - Shows complete package size
    - Includes all assets and metadata
    - Focuses on distribution size
@@ -234,25 +226,23 @@ Both measurements are correct and serve different optimization purposes!
 
 ### 🚀 **Optimization Recommendations**
 
-1. **JavaScript Bundle (886KB)**:
+1. **JavaScript Bundle**:
 
    - ✅ Already well-optimized
    - Consider tree-shaking for unused components
    - Monitor for large dependency additions
 
-2. **CSS Bundle (76KB)**:
+2. **CSS Bundle**:
 
    - ✅ Good size for comprehensive styling
-   - Consider CSS-in-JS for component-specific styles
    - Monitor for duplicate styles
 
-3. **Assets (105 SVG files)**:
+3. **Assets (SVG files)**:
 
    - Optimize SVG files using SVGO
-   - Consider icon font for frequently used icons
    - Monitor total assets size
 
-4. **TypeScript Definitions (164KB)**:
+4. **TypeScript Definitions**:
    - ✅ Reasonable size for comprehensive types
    - Consider selective type exports
    - Monitor for complex type definitions
@@ -272,33 +262,6 @@ npm run analyze-all
 
 This will provide comprehensive bundle size information for monitoring and alerting purposes.
 
-### 📋 **Manual Analysis**
-
-For detailed investigation:
-
-```bash
-npm run build
-```
-
-Then check the generated files in the `dist/` directory:
-
-- `dist/cjs/index.js` - CommonJS bundle (2.5MB)
-- `dist/esm/index.js` - ES Module bundle (2.5MB)
-- `dist/cjs/index.css` - CSS bundle (76KB)
-- `dist/types.d.ts` - TypeScript definitions (164KB)
-- `dist/bundle-analysis.html` - Interactive JavaScript bundle analysis (886KB)
-
-### 🎉 **Current Status**
-
-✅ **All bundle sizes are within acceptable limits**
-
-- JavaScript: 886KB (excellent optimization)
-- CSS: 76KB (good size)
-- Total package: 2.5MB (reasonable for comprehensive UI library)
-- TypeScript: 164KB (comprehensive types)
-
-The library is well-optimized and ready for production use!
-
 ## Publishing
 
 When publishing a new version of the library, follow these steps: