@sproutsocial/seeds-react-menu 1.7.2 → 1.7.5

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 yarn run v1.22.22
 $ tsup --dts
-CLI Building entry: src/index.ts
+CLI Building entry: {"index":"src/index.ts","v2/index":"src/v2/index.ts"}
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
 CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-menu/tsup.config.ts
@@ -8,14 +8,22 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     144.65 KB
-CJS dist/index.js.map 372.90 KB
-CJS ⚡️ Build success in 403ms
-ESM dist/esm/index.js     134.70 KB
-ESM dist/esm/index.js.map 371.61 KB
-ESM ⚡️ Build success in 411ms
+CJS dist/index.js        89.97 KB
+CJS dist/v2/index.js     70.74 KB
+CJS dist/index.js.map    175.39 KB
+CJS dist/v2/index.js.map 146.40 KB
+CJS ⚡️ Build success in 344ms
+ESM dist/esm/index.js              70.94 KB
+ESM dist/esm/v2/index.js           60.19 KB
+ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
+ESM dist/esm/index.js.map          151.43 KB
+ESM dist/esm/v2/index.js.map       126.72 KB
+ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
+ESM ⚡️ Build success in 344ms
 DTS Build start
-DTS ⚡️ Build success in 8874ms
-DTS dist/index.d.ts  39.03 KB
-DTS dist/index.d.mts 39.03 KB
-Done in 10.34s.
+DTS ⚡️ Build success in 16182ms
+DTS dist/index.d.ts     39.06 KB
+DTS dist/v2/index.d.ts  4.87 KB
+DTS dist/index.d.mts    39.06 KB
+DTS dist/v2/index.d.mts 4.87 KB
+Done in 17.64s.

package/BUNDLE_OPTIMIZATION.md

@@ -0,0 +1,307 @@
+# Bundle Size Optimization Guide
+
+## Overview
+
+This document outlines the bundle size optimization work for the `seeds-react-menu` package. Phase 1 has been completed, reducing the bundle size from **124 KB to 90 KB (27% reduction)**. This document provides guidance for future optimizations.
+
+---
+
+## Phase 1: Completed ✓
+
+**Date**: 2025-12-19
+**Status**: Completed
+**Reduction**: 124 KB → 90 KB (27% reduction)
+
+### Changes Made
+
+1. **Updated tsup.config.ts** - Externalized critical dependencies:
+   - `styled-system` (previously bundled ~25 KB)
+   - `styled-components`
+   - All `@sproutsocial/*` packages (monorepo optimization)
+
+2. **Updated package.json** - Added `styled-system` to `peerDependencies`
+
+### Results
+
+- **CJS Bundle**: 124 KB → 90 KB
+- **ESM Bundle**: 70 KB → 71 KB (stayed similar)
+- All tests passing
+- No breaking changes for consumers
+
+---
+
+## Phase 2: Medium-term Optimizations (Future Work)
+
+**Goal**: Reduce bundle from ~90 KB → 35-45 KB (additional 50%+ reduction)
+**Risk**: Medium
+**Breaking Changes**: Minor (removal of rarely-used system props)
+**Estimated Effort**: 1-2 days
+
+### 2.1 Remove or Deprecate styled-system Usage
+
+**Current Issue**: Five files import styled-system functions to enable runtime style props:
+- `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/MenuItem/styles.tsx` (lines 105-110)
+- `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/MenuHeader/styles.tsx`
+- `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/MenuContent/styles.tsx`
+- `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/MenuGroup/styles.tsx`
+- `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/v2/Common-V2/styles.tsx`
+
+These files use styled-system's `border`, `color`, `flexbox`, `grid`, `layout`, and `space` functions.
+
+**Options**:
+- **Option A**: Remove styled-system props entirely (breaking change, requires major version)
+- **Option B**: Keep but document as deprecated for v3 (non-breaking)
+- **Option C**: Remove from internal components only, keep on public APIs (hybrid approach)
+
+**Recommendation**:
+1. First, audit usage in consuming applications to understand impact
+2. Start with Option C - remove from internal components
+3. If usage is minimal, consider Option A for v3.0
+
+**Expected Savings**: ~10-15 KB
+
+**Implementation Steps**:
+1. Run analytics or search consuming apps for usage of system props on Menu components
+2. If usage < 5%, proceed with removal
+3. If usage > 5%, add deprecation warnings in v2.x
+4. Update TypeScript types to remove system prop types
+5. Replace system props with direct CSS-in-JS styling
+
+**Example Refactor**:
+```typescript
+// BEFORE
+export const StyledMenuItem = styled.button<{...}>`
+  // ... styles ...
+  ${border}
+  ${color}
+  ${flexbox}
+  ${grid}
+  ${layout}
+  ${space}
+`;
+
+// AFTER
+export const StyledMenuItem = styled.button<{...}>`
+  // ... styles ...
+  // System props removed - use CSS-in-JS props or custom styled component
+`;
+```
+
+### 2.2 Optimize seeds-react-text Import
+
+**Current Issue**: `MenuGroup/styles.tsx` and `v2/Common-V2/styles.tsx` import the entire Text component:
+
+```typescript
+import Text from "@sproutsocial/seeds-react-text";
+export const StyledTitle = styled(Text.SmallSubHeadline)`...`;
+```
+
+**Solution**: Replace with direct styled component implementation:
+
+```typescript
+export const StyledTitle = styled.h3`
+  ${({ theme }) => theme.typography[100]};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  // ... other styles from Text.SmallSubHeadline
+`;
+```
+
+**Expected Savings**: ~3-5 KB
+
+**Implementation Steps**:
+1. Identify all Text component styles in `MenuGroup/styles.tsx`
+2. Replace with equivalent theme-based styles
+3. Test visual regression in Storybook
+4. Update v2 components similarly
+
+---
+
+## Phase 3: Architectural Changes (Long-term)
+
+**Goal**: Reduce bundle to 20-30 KB through structural changes
+**Risk**: High
+**Breaking Changes**: Yes (major version bump required)
+**Estimated Effort**: 1-2 weeks
+
+### 3.1 Package Splitting Strategy
+
+**Proposal**: Split into multiple packages to enable better tree-shaking:
+
+```
+@sproutsocial/seeds-react-menu-core (primitives only, ~8-12 KB)
+  ├── MenuItem
+  ├── MenuHeader
+  ├── MenuContent
+  ├── MenuFooter
+  └── MenuRoot
+
+@sproutsocial/seeds-react-menu (composed menus, ~12-15 KB)
+  ├── ActionMenu
+  ├── SingleSelectMenu
+  ├── MultiSelectMenu
+  └── depends on: seeds-react-menu-core
+
+@sproutsocial/seeds-react-menu-autocomplete (~10-15 KB)
+  ├── Autocomplete
+  ├── AutocompleteInput
+  └── depends on: seeds-react-menu-core
+
+@sproutsocial/seeds-react-menu-v2 (experimental, ~8-10 KB)
+  └── All v2 components
+```
+
+**Benefits**:
+- Consumers only bundle what they use
+- Single select menu import: ~20-25 KB total instead of 90 KB
+- Clear deprecation path for v1 vs v2
+- Easier to maintain and reason about
+
+**Migration Path**:
+1. Release new packages alongside existing package
+2. Mark old package as deprecated but maintain for 6-12 months
+3. Provide codemod for automated migration
+4. Update documentation and examples
+
+**Considerations**:
+- Increased maintenance overhead (multiple packages)
+- Need clear documentation on which package to use when
+- Requires monorepo tooling updates
+- May need umbrella package that re-exports everything for easy migration
+
+### 3.2 Consolidate v1 and v2 Implementations
+
+**Current State**:
+- Main export (`src/index.ts`) exports ALL v1 components (80 files)
+- V2 export (`src/v2/index.ts`) exports v2 components (25 files)
+- Both versions share some code but have duplicate implementations
+
+**Proposal**: Treat v2 as the future, deprecate v1
+
+**Timeline**:
+1. **v3.0.0**: Mark v1 as deprecated, promote v2 to stable
+2. **v3.x**: Maintain both but encourage migration
+3. **v4.0.0**: Remove v1 entirely
+
+**Expected Savings**: ~25-30 KB (eliminating duplicate implementations)
+
+**Migration Support**:
+- Provide detailed migration guide
+- Create codemod to automate v1 → v2 migration
+- Maintain v2.x branch for critical security fixes
+- Communication plan for deprecation timeline
+
+### 3.3 Evaluate Dependency Alternatives
+
+**Downshift Analysis** (`downshift@9.0.4`)
+- Currently used for menu state management
+- Likely contributes significantly to bundle size
+- Consider alternatives:
+  - Custom hook-based state management (~2-3 KB)
+  - Radix UI's Select primitives (already using Popover)
+  - Headless UI
+
+**Action Items**:
+1. Analyze Downshift's actual bundle contribution with bundle analyzer
+2. Prototype custom state management solution
+3. Compare API complexity vs bundle savings
+4. Make decision based on maintenance overhead vs size benefit
+
+**Motion Library Analysis** (`motion@12.6.3`)
+- Only used in v2 and NestedMenu
+- Consider lazy-loading for those specific use cases
+- Evaluate if animation is critical or can be simplified
+
+---
+
+## Measurement Tools
+
+### Before Starting Optimizations
+
+```bash
+# Build with metadata for analysis
+npm run build:debug
+
+# Analyze bundle composition
+npx esbuild-visualizer --metadata dist/metafile-esm.json
+```
+
+### After Optimizations
+
+```bash
+# Check bundle sizes
+ls -lh dist/index.js dist/esm/index.js
+
+# Verify externalizations
+grep -r "styled-system" dist/*.js
+grep -r "@sproutsocial" dist/*.js
+```
+
+### Consumer Impact Testing
+
+Test in reference applications:
+1. Build consuming app and check bundle size
+2. Use webpack-bundle-analyzer or similar
+3. Verify no duplicate dependencies
+4. Check runtime performance (no regression)
+
+---
+
+## Success Metrics
+
+| Phase | Target Size (CJS) | Target Size (ESM) | % Reduction | Status |
+|-------|------------------|-------------------|-------------|--------|
+| Baseline | 124 KB | 70 KB | - | - |
+| **Phase 1** | **90 KB** | **71 KB** | **27%** | **✓ Completed** |
+| Phase 2 | 35-45 KB | 25-30 KB | 65-72% | Planned |
+| Phase 3 | 20-30 KB | 15-20 KB | 76-84% | Future |
+
+---
+
+## Additional Considerations
+
+### Consumer Bundle Size vs Package Size
+
+It's important to distinguish between:
+- **Package distribution size**: What gets downloaded from npm
+- **Consumer bundle size**: What actually ends up in the consuming application
+
+Phase 1 optimizations help both, but especially consumer bundle size by:
+- Avoiding duplicate @sproutsocial packages in monorepo
+- Ensuring styled-system is shared across all Seeds components
+- Leveraging tree-shaking in modern bundlers
+
+### Monorepo Considerations
+
+Since this package is part of the Seeds monorepo:
+- Externalizing @sproutsocial packages is critical to avoid duplication
+- Consumers using multiple Seeds packages benefit significantly
+- Consider monorepo-wide bundle analysis for full picture
+
+### Testing Strategy
+
+For any optimization work:
+1. **Unit Tests**: All existing tests must pass
+2. **Visual Regression**: Storybook snapshots unchanged
+3. **Integration Tests**: Test in reference applications
+4. **Performance Tests**: Ensure no runtime performance regression
+5. **Bundle Analysis**: Use visualization tools to verify savings
+
+---
+
+## Resources
+
+- [TypeScript Monorepo Best Practices](https://colinhacks.com/essays/live-types-typescript-monorepo)
+- [tsup Documentation](https://tsup.egoist.dev/)
+- [Bundle Size Analysis Tools](https://bundlephobia.com/)
+
+---
+
+## Questions or Concerns?
+
+If you're planning to tackle Phase 2 or 3 optimizations, please:
+1. Review this document and the original analysis
+2. Coordinate with the team on breaking changes
+3. Create RFCs for major architectural changes (Phase 3)
+4. Update this document with your findings and results
+
+Last updated: 2025-12-19

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.7.5
+
+### Patch Changes
+
+- 2b1bb50: Optimize bundle size by externalizing dependencies
+
+  Reduced the CJS bundle size from 124 KB to 90 KB (27% reduction) by properly externalizing `styled-system`, `styled-components`, and all `@sproutsocial/*` monorepo packages in the build configuration. This prevents these dependencies from being bundled and avoids duplication in consuming applications.
+
+  Changes:
+
+  - Updated `tsup.config.ts` to externalize `styled-system`, `styled-components`, and all `@sproutsocial/*` packages
+  - Added `styled-system` to `peerDependencies` in `package.json`
+
+  This is a non-breaking change that improves bundle efficiency for all consumers.
+
+## 1.7.4
+
+### Patch Changes
+
+- Updated dependencies [750d1ea]
+  - @sproutsocial/seeds-react-theme@3.3.0
+  - @sproutsocial/seeds-react-button@1.3.9
+  - @sproutsocial/seeds-react-checkbox@1.3.12
+  - @sproutsocial/seeds-react-input@1.4.15
+  - @sproutsocial/seeds-react-radio@1.3.6
+  - @sproutsocial/seeds-react-switch@1.2.12
+  - @sproutsocial/seeds-react-token-input@1.4.15
+  - @sproutsocial/seeds-react-popout@2.4.15
+  - @sproutsocial/seeds-react-box@1.1.8
+  - @sproutsocial/seeds-react-icon@2.0.4
+  - @sproutsocial/seeds-react-label@1.0.7
+
+## 1.7.3
+
+### Patch Changes
+
+- 2fbf014: Alpha of new autocomplete
+- 2fbf014: publish experimental revamped select and autocomplete
+
 ## 1.7.2
 
 ### Patch Changes