@designcrowd/fe-shared-lib 1.5.23 → 1.5.24-upgradepkg

package/docs/plans/2026-01-30-upgrade-vite7-storybook10-design.md

@@ -0,0 +1,177 @@
+# Upgrade Plan: Vite 7, Vue 3.5.26, Storybook 10
+
+## Overview
+
+Upgrade the project's core tooling to current stable versions:
+
+| Package | Current | Target |
+|---------|---------|--------|
+| Vue | 3.5.15 | 3.5.26 |
+| Vite | 6.3.5 | 7.3.1 |
+| Storybook | 9.0.4 | 10.1.11 |
+
+**Approach:** Automated migration tools where available (Storybook), manual updates for Vite/Vue.
+
+---
+
+## Phase 1: Pre-Upgrade Preparation
+
+### Steps
+1. Verify current state works:
+   - `npm run build` - CSS builds
+   - `npm run storybook` - Storybook starts
+   - `npm run lint` - No lint errors
+
+2. Create upgrade branch:
+   ```bash
+   git checkout -b chore/upgrade-vite7-storybook10
+   ```
+
+---
+
+## Phase 2: Vite 6 → 7
+
+### Package Updates
+```json
+{
+  "vite": "^7.3.1",
+  "@vitejs/plugin-vue": "^5.3.0"
+}
+```
+
+### Packages to Modify
+
+| Package | Action | Reason |
+|---------|--------|--------|
+| `vite-plugin-eslint` | Remove | Unmaintained, incompatible with Vite 7. ESLint runs via `npm run lint` |
+| `vite-plugin-vue-devtools` | Update to ^7.7.2+ | Vite 7 compatibility |
+
+### Breaking Changes
+- Sass legacy API removed (verify no deprecated Sass syntax)
+- `splitVendorChunkPlugin` removed (check vite.config.ts)
+
+### Verification
+```bash
+npm run build
+npm run storybook
+```
+
+---
+
+## Phase 3: Vue 3.5.15 → 3.5.26
+
+### Package Updates
+```json
+{
+  "vue": "^3.5.26"
+}
+```
+
+### Related Packages
+No changes needed:
+- `vue-router` 4.5.0 - compatible
+- `@vue/test-utils` 2.4.4 - compatible
+
+### Notes
+Minor patch upgrade with no breaking changes. Includes bug fixes and performance improvements.
+
+### Verification
+```bash
+npm run build
+npm run storybook
+```
+
+---
+
+## Phase 4: Storybook 9 → 10
+
+### Automated Migration
+```bash
+npx storybook@latest upgrade
+```
+
+The CLI will:
+- Detect breaking changes specific to this project
+- Upgrade all @storybook/* packages
+- Prompt for approval before changes
+- Apply necessary codemods
+
+### Packages Updated
+```
+storybook: ^10.1.11
+@storybook/addon-a11y: ^10.1.11
+@storybook/addon-links: ^10.1.11
+@storybook/addon-themes: ^10.1.11
+@storybook/vue3: ^10.1.11
+@storybook/vue3-vite: ^10.1.11
+eslint-plugin-storybook: ^0.12.0
+```
+
+### Breaking Changes
+- ESM-only distribution (project already uses ES modules)
+- Node 20.19+ required (current: 20.19.6 ✓)
+
+### Manual Cleanup
+- Remove `overrides` block from package.json if no longer needed
+- Verify `.storybook/main.js` config updated correctly
+
+### Verification
+```bash
+npm run storybook
+npm run build:storybook
+```
+
+---
+
+## Phase 5: Final Verification & Cleanup
+
+### Verification Checklist
+- [ ] `npm run build` - CSS builds without errors
+- [ ] `npm run storybook` - Dev server starts, components render
+- [ ] `npm run build:storybook` - Static build succeeds
+- [ ] `npm run lint` - No new lint errors
+
+### Cleanup
+1. Clean reinstall:
+   ```bash
+   rm -rf node_modules package-lock.json
+   npm install
+   ```
+
+2. Remove `overrides` block from package.json
+
+3. Check for deprecation warnings in console
+
+### Troubleshooting
+- Storybook issues: `npx storybook doctor`
+- Vite issues: Check vite.config.ts for deprecated options
+
+### Commit
+```bash
+git add -A
+git commit -m "chore: upgrade vite 7, vue 3.5.26, storybook 10"
+```
+
+---
+
+## Summary of All Package Changes
+
+### Dependencies
+| Package | From | To |
+|---------|------|-----|
+| vite | 6.3.5 | ^7.3.1 |
+| vue | 3.5.15 | ^3.5.26 |
+| vite-plugin-vue-devtools | 7.7.0 | ^7.7.2 |
+| vite-plugin-eslint | 1.8.1 | (remove) |
+
+### DevDependencies
+| Package | From | To |
+|---------|------|-----|
+| @vitejs/plugin-vue | 5.2.4 | ^5.3.0 |
+| storybook | 9.0.4 | ^10.1.11 |
+| @storybook/addon-a11y | 9.0.4 | ^10.1.11 |
+| @storybook/addon-links | 9.0.4 | ^10.1.11 |
+| @storybook/addon-themes | 9.0.4 | ^10.1.11 |
+| @storybook/vue3 | 9.0.4 | ^10.1.11 |
+| @storybook/vue3-vite | 9.0.4 | ^10.1.11 |
+| eslint-plugin-storybook | 0.8.0 | ^0.12.0 |

package/docs/plans/2026-01-30-upgrade-vite7-storybook10.md

@@ -0,0 +1,388 @@
+# Vite 7, Vue 3.5.26, Storybook 10 Upgrade Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Upgrade core tooling to current stable versions (Vite 7.3.1, Vue 3.5.26, Storybook 10.1.11).
+
+**Architecture:** Sequential upgrade approach - Vite first (foundation), Vue second (minor patch), Storybook last (uses automated migration CLI). Each phase verified before proceeding.
+
+**Tech Stack:** Vite 7, Vue 3.5, Storybook 10, TailwindCSS, TypeScript
+
+---
+
+## Task 1: Verify Current State Works
+
+**Files:**
+- None modified
+
+**Step 1: Run CSS build**
+
+Run: `npm run build`
+Expected: Builds complete without errors
+
+**Step 2: Run lint check**
+
+Run: `npm run lint`
+Expected: No lint errors (or only pre-existing ones)
+
+**Step 3: Commit checkpoint (skip if nothing to commit)**
+
+No commit needed - verification only.
+
+---
+
+## Task 2: Create Upgrade Branch
+
+**Files:**
+- None modified
+
+**Step 1: Check current branch**
+
+Run: `git branch --show-current`
+Expected: Should show current branch (likely `upgrade` from design phase)
+
+**Step 2: Create dedicated upgrade branch if not already on one**
+
+Run: `git checkout -b chore/upgrade-vite7-storybook10 2>/dev/null || echo "Already on upgrade branch"`
+Expected: Branch created or already exists
+
+---
+
+## Task 3: Update Vite to 7.x
+
+**Files:**
+- Modify: `package.json`
+
+**Step 1: Update vite version in package.json**
+
+Change in dependencies section:
+```json
+"vite": "^7.3.1",
+```
+
+**Step 2: Update @vitejs/plugin-vue in devDependencies**
+
+Change:
+```json
+"@vitejs/plugin-vue": "^5.3.0",
+```
+
+**Step 3: Update vite-plugin-vue-devtools in dependencies**
+
+Change:
+```json
+"vite-plugin-vue-devtools": "^7.7.2",
+```
+
+**Step 4: Do NOT run npm install yet**
+
+We'll batch the dependency changes and install once.
+
+---
+
+## Task 4: Remove vite-plugin-eslint
+
+**Files:**
+- Modify: `package.json`
+- Modify: `vite.config.ts`
+
+**Step 1: Remove vite-plugin-eslint from package.json dependencies**
+
+Remove this line from dependencies:
+```json
+"vite-plugin-eslint": "1.8.1",
+```
+
+**Step 2: Remove eslint import from vite.config.ts**
+
+In `vite.config.ts`, remove line 3:
+```typescript
+import eslint from 'vite-plugin-eslint';
+```
+
+**Step 3: Remove eslint plugin usage from vite.config.ts**
+
+In `vite.config.ts`, remove lines 26-28 from the plugins array:
+```typescript
+    eslint({
+      include: ['./src/client/**/*.[js|ts|vue]'],
+    }),
+```
+
+The plugins array should become:
+```typescript
+  plugins: [
+    vue(),
+    process.env.NODE_ENV === 'development' ? vueDevTools() : false,
+  ],
+```
+
+**Step 4: Do NOT commit yet**
+
+Batch with other changes.
+
+---
+
+## Task 5: Update Vue to 3.5.26
+
+**Files:**
+- Modify: `package.json`
+
+**Step 1: Update vue version in dependencies**
+
+Change:
+```json
+"vue": "^3.5.26",
+```
+
+**Step 2: Do NOT run npm install yet**
+
+Continue batching changes.
+
+---
+
+## Task 6: Install Updated Dependencies and Verify Vite/Vue
+
+**Files:**
+- Modify: `package-lock.json` (auto-generated)
+
+**Step 1: Clean install dependencies**
+
+Run: `rm -rf node_modules package-lock.json && npm install`
+Expected: Installation completes without errors
+
+**Step 2: Verify CSS build works**
+
+Run: `npm run build`
+Expected: CSS builds successfully
+
+**Step 3: Commit Vite and Vue upgrades**
+
+Run:
+```bash
+git add package.json package-lock.json vite.config.ts
+git commit -m "chore: upgrade vite 6→7, vue 3.5.15→3.5.26
+
+- Update vite to ^7.3.1
+- Update @vitejs/plugin-vue to ^5.3.0
+- Update vite-plugin-vue-devtools to ^7.7.2
+- Update vue to ^3.5.26
+- Remove vite-plugin-eslint (unmaintained, incompatible with Vite 7)
+
+Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>"
+```
+
+---
+
+## Task 7: Run Storybook Automated Migration
+
+**Files:**
+- Modify: `package.json` (automated)
+- Modify: `.storybook/main.ts` (potentially)
+- Modify: `package-lock.json` (auto-generated)
+
+**Step 1: Run Storybook upgrade CLI**
+
+Run: `npx storybook@latest upgrade`
+
+This is interactive. Follow the prompts:
+- Accept the upgrade when prompted
+- Let it detect and apply codemods
+- Review any breaking change warnings
+
+Expected: CLI upgrades all @storybook/* packages to 10.x
+
+**Step 2: Verify Storybook packages updated**
+
+Run: `grep -E '"(storybook|@storybook)' package.json`
+Expected: All versions should be ^10.x or compatible
+
+**Step 3: Do NOT commit yet**
+
+Need to verify and potentially fix issues first.
+
+---
+
+## Task 8: Update eslint-plugin-storybook
+
+**Files:**
+- Modify: `package.json`
+
+**Step 1: Check if Storybook migration updated eslint-plugin-storybook**
+
+Run: `grep eslint-plugin-storybook package.json`
+
+If still 0.8.0, update manually:
+```json
+"eslint-plugin-storybook": "^0.12.0",
+```
+
+**Step 2: Run npm install if manual update was needed**
+
+Run: `npm install`
+Expected: Installation completes
+
+---
+
+## Task 9: Convert Storybook Config to ESM (if needed)
+
+**Files:**
+- Modify: `.storybook/main.ts`
+
+**Step 1: Check if main.ts uses module.exports**
+
+The current `.storybook/main.ts` uses `module.exports = {...}` which is CommonJS.
+Storybook 10 is ESM-only, so convert to ESM syntax.
+
+**Step 2: Update .storybook/main.ts to use ESM export**
+
+Replace the entire file content with:
+```typescript
+import { mergeConfig } from 'vite';
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-themes',
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  docs: {
+    autodocs: true,
+  },
+  async viteFinal(config) {
+    const configExtension = {
+      optimizeDeps: {
+        include: ['deepmerge'],
+      },
+      build: {
+        commonjsOptions: {
+          include: [/node_modules/],
+        },
+      },
+    };
+    return mergeConfig(config, configExtension);
+  },
+};
+
+export default config;
+```
+
+---
+
+## Task 10: Remove package.json Overrides Block
+
+**Files:**
+- Modify: `package.json`
+
+**Step 1: Remove the overrides block**
+
+Remove these lines from package.json:
+```json
+  "overrides": {
+    "storybook": "$storybook"
+  }
+```
+
+**Step 2: Run npm install to update lock file**
+
+Run: `npm install`
+Expected: Installation completes
+
+---
+
+## Task 11: Verify Storybook Works
+
+**Files:**
+- None modified
+
+**Step 1: Start Storybook dev server**
+
+Run: `npm run storybook`
+Expected: Storybook starts on port 6006, no errors in console
+
+**Step 2: Manually verify in browser**
+
+Open http://localhost:6006 and:
+- Verify sidebar shows stories
+- Click on a few components to verify they render
+- Check browser console for errors
+
+**Step 3: Stop Storybook (Ctrl+C)**
+
+**Step 4: Build static Storybook**
+
+Run: `npm run build:storybook`
+Expected: Static build completes without errors
+
+---
+
+## Task 12: Final Verification
+
+**Files:**
+- None modified
+
+**Step 1: Run CSS build**
+
+Run: `npm run build`
+Expected: Builds complete
+
+**Step 2: Run lint**
+
+Run: `npm run lint`
+Expected: No new lint errors (pre-existing ones are OK)
+
+---
+
+## Task 13: Commit Storybook Upgrade
+
+**Files:**
+- Commit all remaining changes
+
+**Step 1: Stage all changes**
+
+Run: `git add -A`
+
+**Step 2: Review staged changes**
+
+Run: `git diff --cached --stat`
+Expected: Shows package.json, package-lock.json, .storybook/main.ts
+
+**Step 3: Commit**
+
+Run:
+```bash
+git commit -m "chore: upgrade storybook 9→10
+
+- Upgrade all @storybook/* packages to ^10.1.11
+- Upgrade eslint-plugin-storybook to ^0.12.0
+- Convert .storybook/main.ts to ESM syntax
+- Remove package.json overrides block
+
+Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>"
+```
+
+---
+
+## Summary
+
+| Task | Description | Commit |
+|------|-------------|--------|
+| 1-2 | Verify current state, create branch | No |
+| 3-6 | Vite 7 + Vue 3.5.26 upgrade | Yes |
+| 7-10 | Storybook 10 migration | No |
+| 11-12 | Verify everything works | No |
+| 13 | Commit Storybook changes | Yes |
+
+**Total commits:** 2 (plus the design doc commit already made)

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.23",
+  "version": "1.5.24-upgradepkg",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
-    "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006 public",
+    "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006",
     "build:css": "node ./tailwind.build.js",
     "build:storybook": "mkdir -p public && mkdir -p public/css && npm run storybook:css && storybook build -c .storybook -o .storybook-static && cp -R ./public/css .storybook-static/",
     "bundle-translation": "node ./src/bundleTranslation.js",
@@ -20,63 +20,62 @@
   },
   "dependencies": {
     "@nuxtjs/i18n": "9.5.4",
-    "autoprefixer": "10.4.17",
-    "axios": "1.6.7",
+    "autoprefixer": "10.4.24",
+    "axios": "1.13.4",
     "click-outside-vue3": "4.0.1",
-    "core-js": "3.35.1",
+    "core-js": "3.48.0",
     "cropperjs": "1.6.1",
     "dropzone-vue3": "1.0.2",
-    "fs-extra": "11.2.0",
-    "i18next": "25.2.1",
+    "fs-extra": "11.3.3",
+    "i18next": "25.8.0",
     "lodash.throttle": "4.1.1",
-    "postcss-loader": "8.1.0",
+    "postcss-loader": "8.2.0",
     "swiper": "11.0.6",
     "tailwindcss": "3.4.1",
-    "vite": "6.3.5",
-    "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-vue-devtools": "7.7.0",
-    "vue": "3.5.15",
-    "vue-color": "3.0.2",
+    "vite": "^7.3.1",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue": "^3.5.26",
+    "vue-color": "3.3.3",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
     "vue-router": "4.5.0",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.0.4",
-    "@storybook/addon-links": "9.0.4",
-    "@storybook/addon-themes": "9.0.4",
-    "@storybook/vue3": "9.0.4",
-    "@storybook/vue3-vite": "9.0.4",
-    "@vitejs/plugin-vue": "5.2.4",
-    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-service": "5.0.8",
+    "@storybook/addon-a11y": "10.2.3",
+    "@storybook/addon-links": "10.2.3",
+    "@storybook/addon-themes": "10.2.3",
+    "@storybook/vue3": "10.2.3",
+    "@storybook/vue3-vite": "10.2.3",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/cli-plugin-eslint": "5.0.9",
+    "@vue/cli-service": "5.0.9",
     "@vue/eslint-config-airbnb": "8.0.0",
     "@vue/eslint-config-prettier": "9.0.0",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.4",
+    "@vue/test-utils": "2.4.6",
     "axios-mock-adapter": "1.22.0",
     "css-loader": "6.10.0",
     "cssnano": "6.0.3",
     "eslint": "8.56.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-storybook": "10.2.3",
     "eslint-plugin-vue": "9.21.1",
-    "husky": "9.0.10",
+    "husky": "9.1.7",
     "lint-staged": "15.2.1",
-    "nodemon": "3.0.3",
+    "nodemon": "3.1.11",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.33",
-    "postcss-cli": "11.0.0",
-    "postcss-import": "16.0.0",
+    "postcss": "8.5.6",
+    "postcss-cli": "11.0.1",
+    "postcss-import": "16.1.1",
     "postcss-nested": "6.0.1",
-    "prettier": "3.2.4",
-    "storybook": "9.0.4",
+    "prettier": "3.8.1",
+    "storybook": "10.2.3",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",
-    "ts-loader": "9.5.1",
-    "typescript": "5.3.3",
+    "ts-loader": "9.5.4",
+    "typescript": "5.9.3",
     "vue-style-loader": "4.1.3",
     "yargs": "17.7.2"
   },
@@ -108,8 +107,5 @@
     "./src/*.js": {
       "import": "./src/*.js"
     }
-  },
-  "overrides": {
-    "storybook": "$storybook"
   }
 }