From 01821b36676f9a2951670789e179f998978bc81a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Mesnil?= Date: Wed, 15 Jan 2025 18:24:09 +0100 Subject: [PATCH] docs: rework migration script and add docs --- package.json | 1 + scripts/update-imports.js | 36 +- .../build-app/pages/foundations/migration.mdx | 274 +---------- .../pages/foundations/upgrades/v6.mdx | 426 ++++++++++++++++++ 4 files changed, 471 insertions(+), 266 deletions(-) create mode 100644 website/build-app/pages/foundations/upgrades/v6.mdx diff --git a/package.json b/package.json index d75bc1209..ae09ed848 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "lint:ts": "cd lib tsc --noEmit && cd ../website && tsc --noEmit", "lint:website": "cd website && yarn lint", "lint": "yarn lint:js && yarn lint:css && yarn lint:ts && yarn lint:mdx && yarn lint:website", + "migrate": "node ./scripts/update-imports.js", "postinstall": "husky install", "dev:prerelease": "todo", "release": "todo", diff --git a/scripts/update-imports.js b/scripts/update-imports.js index 35514ea45..8074ddb9d 100644 --- a/scripts/update-imports.js +++ b/scripts/update-imports.js @@ -3,38 +3,58 @@ const fs = require('fs') const glob = require('glob') +const [pattern = ''] = process.argv.slice(2) + function mergeImports(content) { - // Extract all welcome-ui imports - const importRegex = /import\s+{([^}]+)}\s+from\s+['"](@welcome-ui\/[^'"]+|welcome-ui)['"]/g + // Extract all `welcome-ui` imports (normal and type imports) + const importRegex = + /import\s+(type\s+)?{([^}]+)}\s+from\s+['"](@welcome-ui\/[^'"]+|welcome-ui)['"]/g const imports = new Set() + const typeImports = new Set() let match while ((match = importRegex.exec(content)) !== null) { - match[1] + const isTypeImport = match[1]?.trim() === 'type' + const importSet = isTypeImport ? typeImports : imports + + match[2] .split(',') .map(i => i.trim()) .filter(Boolean) - .forEach(i => imports.add(i)) + .forEach(i => { + // Rename WuiTheme to ThemeValues for type imports + if (isTypeImport && i === 'WuiTheme') { + importSet.add('ThemeValues') + } else { + importSet.add(i) + } + }) } // Remove old imports content = content.replace( - /import\s+{[^}]+}\s+from\s+['"](@welcome-ui\/[^'"]+|welcome-ui)['"]\n?/g, + /import\s+(type\s+)?{[^}]+}\s+from\s+['"](@welcome-ui\/[^'"]+|welcome-ui)['"]\n?/g, '' ) - // Add merged import at top + // Add merged imports at top if (imports.size > 0) { - const mergedImport = `import { ${Array.from(imports).join(', ')} } from 'welcome-ui'\n` + const mergedImport = `import { ${Array.from(imports).join(', ')} } from 'welcome-ui';\n` content = mergedImport + content } + if (typeImports.size > 0) { + const mergedTypeImport = `import type { ${Array.from(typeImports).join(', ')} } from 'welcome-ui';\n` + content = mergedTypeImport + content + } + return content } -const files = glob.sync('**/*.{ts,tsx}', { +const files = glob.sync(pattern, { ignore: ['**/node_modules/**', '**/dist/**', '**/*.d.ts'], }) + files.forEach(file => { const content = fs.readFileSync(file, 'utf8') const newContent = mergeImports(content) diff --git a/website/build-app/pages/foundations/migration.mdx b/website/build-app/pages/foundations/migration.mdx index d48a7453c..098305add 100644 --- a/website/build-app/pages/foundations/migration.mdx +++ b/website/build-app/pages/foundations/migration.mdx @@ -1,279 +1,37 @@ -## Version 6 +# Version 7: Back of mono-package -Welcome UI V6 focuses on the rebranding of our **colors** and **tokens**, and we add a **Logo** component. +Welcome UI V7 bring back all on a mono-package: `welcome-ui` -![Version 6 illustation](https://github.com/user-attachments/assets/34259431-1bc3-4d97-84b7-e2048c7208da) +![Version 7 illustation](https://github.com/user-attachments/assets/34259431-1bc3-4d97-84b7-e2048c7208da) ## Upgrade steps -### 1. Update your dependencies +### 1. Script to migrate -Make sure you update all `@welcome-ui` packages to v6: - -```diff -{ - "dependencies": { -+ "@welcome-ui/YOUR_PACKAGE": "^6.0.0", - "@xstyled/styled-components": "^3.7.3", - "react": "^18.0.0", - "styled-components": "^5.3.9" - } -} -``` - -On VSCode search: - -```bash -("@welcome-ui\/[^"]+":\s*)"\^?[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9\.]+)?" -``` - -And replace by: +In welcome-ui project, run this script move all `@welcome-ui/*` to only one `welcome-ui` import: ```bash -$1"6.0.0" +yarn migrate "../your-project/src/**/**.*{ts,tsx}" ``` -### 2. Script to migrate +### 2. Update your dependencies -We reworked our theme's colors and variants name. Use the migration script to migrate easily to V6 on a welcome-ui project. +In your project, remove all `@welcome-ui` packages: ```bash -yarn migrate "../yourProject/src/**/**.{tsx,ts,js,mdx}" -``` - -### 3. Remove `welcomeTheme` & `welcomeDarkTheme` - -To simplify our developements, we removed the 2 welcome themes. Now the default have primary colors from welcome ui brand: - -```diff -+ import { createTheme, darkTheme } from '@welcome-ui/core' -- import { welcomeTheme } from '@welcome-ui/themes.welcome' -- import { darkTheme } from '@welcome-ui/dark' -- import { welcomeDarkTheme } from '@welcome-ui/themes.welcome-dark' - -- const theme = createTheme(welcomeTheme) -+ const theme = createTheme() -- const darkTheme = createTheme(welcomeDarkTheme) -+ const darkTheme = createTheme(darkTheme) -``` - -and remove also from your `packages.json`: - -```diff -- "@welcome-ui/themes.dark": "^5.22.1" -- "@welcome-ui/themes.welcome": "^5.22.1" -- "@welcome-ui/themes.welcome-dark": "^5.22.1" -``` - -### 4. Change variant `error` to `danger` on: - -#### Alert - -```diff -- -+ -``` - -#### Table - -```diff -- -+ -``` - -#### Tag - -```diff -- -+ -``` - -#### Hint - -```diff -- -+ -``` - -#### Label - -```diff --