impact-ui 4.0.0-alpha.6 → 4.0.0-alpha.8

package/README.md

@@ -2,10 +2,6 @@
 
 Impact Analytics UI Component Library - A modern, accessible React component library built with TypeScript and Vite (private npm package).
 
-**Build Optimization & TypeScript Migration by: Narendra Kumar**
-
----
-
 ## Features
 
 - 🎨 **48+ Production-Ready Components** - Comprehensive UI component library
@@ -15,154 +11,6 @@ Impact Analytics UI Component Library - A modern, accessible React component lib
 - 🎭 **Storybook** - Interactive component documentation
 - 🧪 **Well Tested** - Unit tests with accessibility checks
 - 📦 **Tree Shakeable** - Import only what you need
-- 🚀 **Optimized Build** - 77% smaller bundle size through advanced optimizations
-
----
-
-## Build Optimization Journey (v4.0)
-
-### Overview
-
-The impact-ui library underwent a comprehensive build optimization overhaul, reducing the production bundle from **~12 MB to ~2 MB** - a **77% reduction** in bundle size. This optimization ensures faster install times, quicker CI/CD pipelines, and improved developer experience.
-
-### Build Size Comparison
-
-| Metric | Before Optimization | After Optimization | Reduction |
-|--------|--------------------:|-------------------:|----------:|
-| **Total dist size** | 12.0 MB | 2.0 MB | **-83%** |
-| **JavaScript (runtime)** | 5.55 MB | 0.95 MB | **-83%** |
-| **CSS bundle** | 2.06 MB | 0.57 MB | **-72%** |
-| **TypeScript definitions** | 0.39 MB | 0.39 MB | 0% |
-| **Bundled node_modules** | 3.1 MB | 0.02 MB | **-99%** |
-| **Asset files (SVG/images)** | 2.7 MB | 0.12 MB | **-96%** |
-
-### Optimization Techniques Applied
-
-#### 1. Dependency Externalization Strategy
-
-Moved all runtime dependencies to `external` in Rollup config, ensuring they are provided by the consuming application rather than bundled:
-
-```typescript
-// vite.config.ts - EXTERNAL_DEPS array
-const EXTERNAL_DEPS: (string | RegExp)[] = [
-  // React ecosystem
-  'react', 'react-dom', 'react/jsx-runtime',
-  
-  // MUI & Emotion (prevents dual-instance conflicts)
-  /^@mui\//, /^@emotion\//,
-  
-  // Heavy libraries externalized
-  /^@tiptap\//, /^prosemirror-/,
-  'react-select', 'react-hook-form',
-  'emoji-picker-react', 'tippy.js',
-  // ... 40+ packages externalized
-];
-```
-
-**Impact:** Removed 3.1 MB from `dist/node_modules/`
-
-#### 2. SVG Asset Optimization
-
-Created `scripts/shrink-raster-svgs.mjs` to compress embedded raster images in SVG files:
-
-| SVG File | Before | After | Savings |
-|----------|-------:|------:|--------:|
-| commentEmptyStateIcon.svg | 664 KB | 65 KB | **-90%** |
-| no-filter-results.svg | 671 KB | 50 KB | **-93%** |
-| excel-icon.svg | 254 KB | 16 KB | **-94%** |
-| tableChat_bg.svg | 457 KB | 201 KB | **-56%** |
-| file-upload.svg | 45 KB | 6 KB | **-87%** |
-
-**Total SVG savings:** 2.14 MB reduced to 410 KB
-
-#### 3. GIF Animation Compression
-
-Applied lossy compression to animated GIFs in landing page assets:
-
-| GIF File | Before | After | Savings |
-|----------|-------:|------:|--------:|
-| alan-gif.gif | 264 KB | 165 KB | **-37%** |
-| multi-level.gif | 78 KB | 27 KB | **-65%** |
-| aiml.gif | 57 KB | 27 KB | **-53%** |
-| strategic-objectives.gif | 22 KB | 11 KB | **-50%** |
-
-#### 4. Build Analyzer Relocation
-
-Moved `rollup-plugin-visualizer` output from `dist/` to `build-reports/`:
-- **Savings:** 567 KB removed from npm package
-- **Benefit:** Build analysis available locally without shipping to consumers
-
-#### 5. CSS Optimization
-
-- Enabled `cssnano` for CSS minification
-- Removed 70% base64-inlined images from CSS
-- Configured `assetsInlineLimit` to emit files instead of inline data URIs
-
-### TypeScript Migration Highlights
-
-| Aspect | Legacy (v3.x) | Current (v4.0) |
-|--------|---------------|----------------|
-| **Type System** | PropTypes (runtime) | TypeScript (compile-time) |
-| **Type Coverage** | 0% | **100%** |
-| **IDE Support** | Limited | Full IntelliSense |
-| **Build Tool** | Webpack | Vite (10x faster) |
-| **Module Format** | CJS + UMD | Pure ESM |
-| **Tree Shaking** | Partial | Full support |
-| **Declaration Files** | Manual | Auto-generated |
-
-### Build Performance
-
-| Build Metric | Before | After | Improvement |
-|--------------|-------:|------:|------------:|
-| Cold build time | ~45s | ~8s | **5.6x faster** |
-| Hot rebuild | ~12s | ~2s | **6x faster** |
-| Type checking | N/A | ~6s | New capability |
-| npm install (consumer) | ~15s | ~5s | **3x faster** |
-
-### Vite Configuration Optimizations
-
-```typescript
-// Key optimizations in vite.config.ts
-
-export default defineConfig({
-  build: {
-    // Tree-shaking: Each component is a separate entry
-    preserveModules: true,
-    preserveModulesRoot: 'src',
-    
-    // Minification with Terser
-    minify: 'terser',
-    terserOptions: {
-      compress: { passes: 1 },
-      format: { comments: false },
-    },
-    
-    // Prevent base64 bloat
-    assetsInlineLimit: () => false,
-    
-    // Single CSS file for easy import
-    cssCodeSplit: false,
-  },
-});
-```
-
-### Scripts Added for Optimization
-
-| Script | Purpose |
-|--------|---------|
-| `scripts/shrink-raster-svgs.mjs` | Compress embedded PNGs in SVG files |
-| `scripts/clean-dist.mjs` | Robust dist cleaning (handles macOS races) |
-| `scripts/optimize-images.mjs` | SVGO + WebP conversion pipeline |
-
-### Consumer Benefits
-
-1. **Faster Installation:** npm install reduced from ~15s to ~5s
-2. **Smaller Bundles:** Consumer app bundles are 77% smaller
-3. **Better Tree Shaking:** Import only what you use
-4. **Type Safety:** Full TypeScript support with auto-complete
-5. **No Duplicate Dependencies:** Externalized deps use consumer's versions
-
----
 
 ## Installation
 
@@ -172,39 +20,17 @@ npm install @impactsmartsuite/impact-ui
 
 ## Usage
 
-### Required Setup
-
-This library uses MUI components internally. To ensure styles render correctly, wrap your app with `StyledEngineProvider`:
-
-```typescript
-import { StyledEngineProvider } from '@mui/material/styles';
-import '@impactsmartsuite/impact-ui/styles';
-
-function App() {
-  return (
-    <StyledEngineProvider injectFirst>
-      {/* Your app content */}
-    </StyledEngineProvider>
-  );
-}
-```
-
-> **Why is this needed?** impact-ui uses SCSS for styling, while MUI uses Emotion CSS-in-JS. Without `injectFirst`, MUI's styles are injected after your CSS, causing style conflicts. The `injectFirst` prop ensures MUI styles load first, allowing impact-ui's SCSS to take precedence.
-
 ### Basic Example
 
 ```typescript
-import { StyledEngineProvider } from '@mui/material/styles';
 import { Button } from '@impactsmartsuite/impact-ui';
 import '@impactsmartsuite/impact-ui/styles';
 
 function App() {
   return (
-    <StyledEngineProvider injectFirst>
-      <Button variant="primary" size="large">
-        Click Me
-      </Button>
-    </StyledEngineProvider>
+    <Button variant="primary" size="large">
+      Click Me
+    </Button>
   );
 }
 ```
@@ -342,23 +168,6 @@ MIT
 
 ## Version
 
-Current version: 4.0.0-alpha.4
+Current version: 4.0.0-alpha.1
 
 See [MIGRATION_GUIDE.md](./MIGRATION_GUIDE.md) for upgrading from v3.x.
-
----
-
-## Credits
-
-**Build Optimization & TypeScript Migration:** Narendra Kumar
-
-### Optimization Changelog
-
-- Externalized 40+ runtime dependencies (3.1 MB saved)
-- Created SVG raster compression pipeline (2.14 MB → 410 KB)
-- Implemented GIF lossy compression (50% average reduction)
-- Removed base64 bloat from CSS bundle (70% → 12%)
-- Relocated build analyzer output from dist/
-- Migrated entire codebase to TypeScript with 100% type coverage
-- Configured Vite for optimal tree-shaking with preserveModules
-- Added `StyledEngineProvider` requirement for MUI/SCSS compatibility

package/dist/_virtual/Add.js

@@ -0,0 +1,4 @@
+var Add = {};
+export {
+  Add as __exports
+};

package/dist/_virtual/AttachFile.js

@@ -0,0 +1,4 @@
+var AttachFile = {};
+export {
+  AttachFile as __exports
+};

package/dist/_virtual/AutoFixHigh.js

@@ -0,0 +1,4 @@
+var AutoFixHigh = {};
+export {
+  AutoFixHigh as __exports
+};

package/dist/_virtual/Block.js

@@ -0,0 +1,4 @@
+var Block = {};
+export {
+  Block as __exports
+};

package/dist/_virtual/Brush.js

@@ -0,0 +1,4 @@
+var Brush = {};
+export {
+  Brush as __exports
+};

package/dist/_virtual/Cancel.js

@@ -0,0 +1,4 @@
+var Cancel = {};
+export {
+  Cancel as __exports
+};

package/dist/_virtual/CheckCircle.js

@@ -0,0 +1,4 @@
+var CheckCircle = {};
+export {
+  CheckCircle as __exports
+};

package/dist/_virtual/ChevronLeft.js

@@ -0,0 +1,4 @@
+var ChevronLeft = {};
+export {
+  ChevronLeft as __exports
+};

package/dist/_virtual/ChevronRight.js

@@ -0,0 +1,4 @@
+var ChevronRight = {};
+export {
+  ChevronRight as __exports
+};

package/dist/_virtual/ChevronRightOutlined.js

@@ -0,0 +1,4 @@
+var ChevronRightOutlined = {};
+export {
+  ChevronRightOutlined as __exports
+};

package/dist/_virtual/Clear.js

@@ -0,0 +1,4 @@
+var Clear = {};
+export {
+  Clear as __exports
+};

package/dist/_virtual/Close.js

@@ -0,0 +1,4 @@
+var Close = {};
+export {
+  Close as __exports
+};

package/dist/_virtual/CloseOutlined.js

@@ -0,0 +1,4 @@
+var CloseOutlined = {};
+export {
+  CloseOutlined as __exports
+};

package/dist/_virtual/DeleteOutlineOutlined.js

@@ -0,0 +1,4 @@
+var DeleteOutlineOutlined = {};
+export {
+  DeleteOutlineOutlined as __exports
+};

package/dist/_virtual/DeleteOutlined.js

@@ -0,0 +1,4 @@
+var DeleteOutlined = {};
+export {
+  DeleteOutlined as __exports
+};

package/dist/_virtual/DragIndicator.js

@@ -0,0 +1,4 @@
+var DragIndicator = {};
+export {
+  DragIndicator as __exports
+};

package/dist/_virtual/ErrorOutline.js

@@ -0,0 +1,4 @@
+var ErrorOutline = {};
+export {
+  ErrorOutline as __exports
+};

package/dist/_virtual/ExpandLess.js

@@ -0,0 +1,4 @@
+var ExpandLess = {};
+export {
+  ExpandLess as __exports
+};

package/dist/_virtual/ExpandMore.js

@@ -0,0 +1,4 @@
+var ExpandMore = {};
+export {
+  ExpandMore as __exports
+};

package/dist/_virtual/FileDownloadOutlined.js

@@ -0,0 +1,4 @@
+var FileDownloadOutlined = {};
+export {
+  FileDownloadOutlined as __exports
+};

package/dist/_virtual/FilterList.js

@@ -0,0 +1,4 @@
+var FilterList = {};
+export {
+  FilterList as __exports
+};

package/dist/_virtual/FormatBold.js

@@ -0,0 +1,4 @@
+var FormatBold = {};
+export {
+  FormatBold as __exports
+};

package/dist/_virtual/FormatColorTextOutlined.js

@@ -0,0 +1,4 @@
+var FormatColorTextOutlined = {};
+export {
+  FormatColorTextOutlined as __exports
+};

package/dist/_virtual/FormatItalic.js

@@ -0,0 +1,4 @@
+var FormatItalic = {};
+export {
+  FormatItalic as __exports
+};

package/dist/_virtual/FormatListBulleted.js

@@ -0,0 +1,4 @@
+var FormatListBulleted = {};
+export {
+  FormatListBulleted as __exports
+};

package/dist/_virtual/FormatListNumbered.js

@@ -0,0 +1,4 @@
+var FormatListNumbered = {};
+export {
+  FormatListNumbered as __exports
+};

package/dist/_virtual/Image.js

@@ -0,0 +1,4 @@
+var Image = {};
+export {
+  Image as __exports
+};

package/dist/_virtual/Info.js

@@ -0,0 +1,4 @@
+var Info = {};
+export {
+  Info as __exports
+};

package/dist/_virtual/InsertEmoticon.js

@@ -0,0 +1,4 @@
+var InsertEmoticon = {};
+export {
+  InsertEmoticon as __exports
+};

package/dist/_virtual/IsConstructor.js

@@ -0,0 +1,4 @@
+var IsConstructor = { exports: {} };
+export {
+  IsConstructor as __module
+};

package/dist/_virtual/KeyboardArrowDown.js

@@ -0,0 +1,4 @@
+var KeyboardArrowDown = {};
+export {
+  KeyboardArrowDown as __exports
+};

package/dist/_virtual/KeyboardArrowDownOutlined.js

@@ -0,0 +1,4 @@
+var KeyboardArrowDownOutlined = {};
+export {
+  KeyboardArrowDownOutlined as __exports
+};

package/dist/_virtual/KeyboardArrowLeft.js

@@ -0,0 +1,4 @@
+var KeyboardArrowLeft = {};
+export {
+  KeyboardArrowLeft as __exports
+};

package/dist/_virtual/KeyboardArrowRight.js

@@ -0,0 +1,4 @@
+var KeyboardArrowRight = {};
+export {
+  KeyboardArrowRight as __exports
+};

package/dist/_virtual/KeyboardArrowRightOutlined.js

@@ -0,0 +1,4 @@
+var KeyboardArrowRightOutlined = {};
+export {
+  KeyboardArrowRightOutlined as __exports
+};

package/dist/_virtual/KeyboardArrowUp.js

@@ -0,0 +1,4 @@
+var KeyboardArrowUp = {};
+export {
+  KeyboardArrowUp as __exports
+};

package/dist/_virtual/Link.js

@@ -0,0 +1,4 @@
+var Link = {};
+export {
+  Link as __exports
+};

package/dist/_virtual/Looks3.js

@@ -0,0 +1,4 @@
+var Looks3 = {};
+export {
+  Looks3 as __exports
+};

package/dist/_virtual/Looks4.js

@@ -0,0 +1,4 @@
+var Looks4 = {};
+export {
+  Looks4 as __exports
+};

package/dist/_virtual/Looks5.js

@@ -0,0 +1,4 @@
+var Looks5 = {};
+export {
+  Looks5 as __exports
+};

package/dist/_virtual/Looks6.js

@@ -0,0 +1,4 @@
+var Looks6 = {};
+export {
+  Looks6 as __exports
+};

package/dist/_virtual/LooksOne.js

@@ -0,0 +1,4 @@
+var LooksOne = {};
+export {
+  LooksOne as __exports
+};

package/dist/_virtual/LooksTwo.js

@@ -0,0 +1,4 @@
+var LooksTwo = {};
+export {
+  LooksTwo as __exports
+};

package/dist/_virtual/MoreHoriz.js

@@ -0,0 +1,4 @@
+var MoreHoriz = {};
+export {
+  MoreHoriz as __exports
+};

package/dist/_virtual/MoreVert.js

@@ -0,0 +1,4 @@
+var MoreVert = {};
+export {
+  MoreVert as __exports
+};

package/dist/_virtual/North.js

@@ -0,0 +1,4 @@
+var North = {};
+export {
+  North as __exports
+};

package/dist/_virtual/NotificationsOff.js

@@ -0,0 +1,4 @@
+var NotificationsOff = {};
+export {
+  NotificationsOff as __exports
+};

package/dist/_virtual/SaveOutlined.js

@@ -0,0 +1,4 @@
+var SaveOutlined = {};
+export {
+  SaveOutlined as __exports
+};

package/dist/_virtual/Search.js

@@ -0,0 +1,4 @@
+var Search = {};
+export {
+  Search as __exports
+};

package/dist/_virtual/SearchOutlined.js

@@ -0,0 +1,4 @@
+var SearchOutlined = {};
+export {
+  SearchOutlined as __exports
+};

package/dist/_virtual/SettingsOutlined.js

@@ -0,0 +1,4 @@
+var SettingsOutlined = {};
+export {
+  SettingsOutlined as __exports
+};

package/dist/_virtual/StrikethroughS.js

@@ -0,0 +1,4 @@
+var StrikethroughS = {};
+export {
+  StrikethroughS as __exports
+};

package/dist/_virtual/TableChartOutlined.js

@@ -0,0 +1,4 @@
+var TableChartOutlined = {};
+export {
+  TableChartOutlined as __exports
+};

package/dist/_virtual/Tune.js

@@ -0,0 +1,4 @@
+var Tune = {};
+export {
+  Tune as __exports
+};

package/dist/_virtual/ViewColumnOutlined.js

@@ -0,0 +1,4 @@
+var ViewColumnOutlined = {};
+export {
+  ViewColumnOutlined as __exports
+};

package/dist/_virtual/Warning.js

@@ -0,0 +1,4 @@
+var Warning = {};
+export {
+  Warning as __exports
+};

package/dist/_virtual/___vite-browser-external.js

@@ -0,0 +1,6 @@
+import * as __viteBrowserExternal from "./__vite-browser-external.js";
+import { getAugmentedNamespace } from "./_commonjsHelpers.js";
+const require$$0 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal);
+export {
+  require$$0 as default
+};

package/dist/_virtual/__vite-browser-external.js

@@ -0,0 +1,4 @@
+const __viteBrowserExternal = {};
+export {
+  __viteBrowserExternal as default
+};

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,33 @@
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+  if (typeof f == "function") {
+    var a = function a2() {
+      if (this instanceof a2) {
+        return Reflect.construct(f, arguments, this.constructor);
+      }
+      return f.apply(this, arguments);
+    };
+    a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, "__esModule", { value: true });
+  Object.keys(n).forEach(function(k) {
+    var d = Object.getOwnPropertyDescriptor(n, k);
+    Object.defineProperty(a, k, d.get ? d : {
+      enumerable: true,
+      get: function() {
+        return n[k];
+      }
+    });
+  });
+  return a;
+}
+export {
+  commonjsGlobal,
+  getAugmentedNamespace,
+  getDefaultExportFromCjs
+};

package/dist/_virtual/colorManipulator.js

@@ -0,0 +1,4 @@
+var colorManipulator = {};
+export {
+  colorManipulator as __exports
+};

package/dist/_virtual/constants.js

@@ -0,0 +1,4 @@
+var constants = {};
+export {
+  constants as __exports
+};

package/dist/_virtual/createStyled.js

@@ -0,0 +1,4 @@
+var createStyled = {};
+export {
+  createStyled as __exports
+};

package/dist/_virtual/createSvgIcon.js

@@ -0,0 +1,4 @@
+var createSvgIcon = {};
+export {
+  createSvgIcon as __exports
+};

package/dist/_virtual/getClassName.js

@@ -0,0 +1,4 @@
+var getClassName = {};
+export {
+  getClassName as __exports
+};

package/dist/_virtual/index.js

@@ -0,0 +1,6 @@
+import { getAugmentedNamespace } from "./_commonjsHelpers.js";
+import * as index from "../node_modules/@mui/material/utils/index.js";
+const require$$0 = /* @__PURE__ */ getAugmentedNamespace(index);
+export {
+  require$$0 as default
+};