-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: rework migration script and add docs
- Loading branch information
1 parent
537fed6
commit 2e97331
Showing
6 changed files
with
473 additions
and
267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` | ||
|
|
||
|  | ||
|  | ||
|
|
||
| ## 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 | ||
| - <Alert variant="error"> | ||
| + <Alert variant="danger"> | ||
| ``` | ||
| #### Table | ||
| ```diff | ||
| - <Table.Tr variant="error"> | ||
| + <Table.Tr variant="danger"> | ||
| ``` | ||
| #### Tag | ||
| ```diff | ||
| - <Tag variant="error"> | ||
| + <Tag variant="danger"> | ||
| ``` | ||
| #### Hint | ||
| ```diff | ||
| - <Hint variant="error"> | ||
| + <Hint variant="danger"> | ||
| ``` | ||
| #### Label | ||
| ```diff | ||
| - <Label variant="error"> | ||
| + <Label variant="danger"> | ||
| ``` | ||
| ## Colors | ||
| We reworked our colors to prepare the next steps for tokenization. | ||
| [Discover our brand new colors](/foundations/theming/basics#colors) | ||
| ### Range | ||
| Now the range is `color-10` to `color-90`. | ||
| ```diff | ||
| - primary-100 | ||
| + primary-10 | ||
| ``` | ||
| ### Neutral replace Dark and Light | ||
| We merged Dark and Light colors in a Neutral new one, without opacity. | ||
| ```diff | ||
| - light-100 | ||
| + neutral-10 | ||
| - dark-900 | ||
| + neutral-90 | ||
| ``` | ||
| ### New colors | ||
| Hello `green` `teal` `blue` `violet` `pink` `red` `red-orange` `orange` and `yellow` 🥰 | ||
| ### Beige instead of Nude | ||
| The nude naming is changed for beige. | ||
| ```diff | ||
| - nude-100 | ||
| + beige-10 | ||
| ``` | ||
| ### State colors removed | ||
| We've removed the state colors `danger`, `success`, `warning` and `info`. They'll be replaced with new tokens in the future. | ||
| ```diff | ||
| - danger-100 | ||
| + red-10 | ||
| ``` | ||
| ### Secondary | ||
| Sub colors replaced by 6 new colors for the secondary palette: | ||
| ```diff | ||
| - sub-1 | ||
| + secondary-blue | ||
| ``` | ||
| ```diff | ||
| - sub-2 | ||
| + secondary-teal | ||
| ``` | ||
| ```diff | ||
| - sub-3 | ||
| + secondary-pink | ||
| ``` | ||
| ```diff | ||
| - sub-4 | ||
| + secondary-orange | ||
| yarn remove $(grep -o "@welcome-ui/[a-zA-Z0-9-]*" package.json | sort | uniq) | ||
| ``` | ||
|
|
||
| ```diff | ||
| - sub-5 | ||
| - sub-6 | ||
| + secondary-green | ||
| ``` | ||
| ```diff | ||
| - sub-7 | ||
| + secondary-violet | ||
| ``` | ||
| ## Dark mode | ||
| Dark mode is still on Beta 🚨 and will be released in a few minor versions. | ||
| ```jsx | ||
| import { createTheme, darkTheme } from '@welcome-ui/core' | ||
| const theme = createTheme(darkTheme) | ||
| ``` | ||
| ## Components | ||
| ### Logo | ||
| A new [Logo](/components/logo) component is available, with svg export of: | ||
| ```tsx | ||
| import { Logo, SolutionsSymbol, Symbol, WelcomeUILogo } from '@welcome-ui/logo' | ||
| And add new mono-package: | ||
|
|
||
| return <Logo w={100} /> | ||
| ``` | ||
| - <strong>Logo</strong>: Welcome to the Jungle new logo | ||
| - <strong>Symbol</strong> | ||
| - <strong>SolutionsSymbol</strong>: Welcome to the solution new logo with symbol | ||
| - <strong>WelcomeUILogo</strong>: Welcome UI new logo | ||
| ### Icons & IconsFont | ||
| - New icon Symbol on [Icons](/components/icon#welcome) | ||
| ```tsx | ||
| <SymbolIcon /> | ||
| ``` | ||
| - New icon Symbol on [IconFont](/components/icon-font#welcome) | ||
| ```tsx | ||
| <Icons.Symbol /> | ||
| ``` | ||
| ### Fields | ||
| On the fields we removed the `info` variant property: | ||
| - All fields | ||
| - Labels | ||
| - Hints | ||
| ### Button | ||
| We removed some variants property on states and add danger property for red button. | ||
| ```diff | ||
| - <Button variant="primary-success">Primary success</Button> | ||
| - <Button variant="primary-warning">Primary warning</Button> | ||
| - <Button variant="primary-danger">Primary danger</Button> | ||
| + <Button danger>Primary danger</Button> | ||
| - <Button variant="primary-info">Primary info</Button> | ||
| - <Button variant="secondary-success">Secondary success</Button> | ||
| - <Button variant="secondary-warning">Secondary warning</Button> | ||
| - <Button variant="secondary-danger">Secondary danger</Button> | ||
| + <Button variant="tertiary" danger>Tertiary danger</Button> | ||
| - <Button variant="secondary-info">Secondary info</Button> | ||
| ``` | ||
| ```diff | ||
| + <Button variant="ghost" danger>Ghost danger</Button> | ||
| ``` | ||
| ### Badge | ||
| We removed `shape` property on Badge component, now you will only have rounded badge. | ||
| ```diff | ||
| - <Badge shape="square">Name</Badge> | ||
| + <Badge>Name</Badge> | ||
| ```bash | ||
| yarn add welcome-ui | ||
| ``` | ||
|
|
||
| ### Tag | ||
| ### 3. Add missing peerDependencies | ||
|
|
||
| We removed the `secondary` variant and replaced the `sub-*` variants. To use the `secondary` color please use the `Badge` component instead. | ||
| You need to check packages you used and add missing peer dependencies. | ||
|
|
||
| ```diff | ||
| - <Tag variant="secondary">Name</Tag> | ||
| + <Tag variant="green">Name</Tag> | ||
| ``` | ||
| ### 4. Change imports | ||
|
|
||
| ```diff | ||
| - <Tag variant="1">Name</Tag> | ||
| + <Tag variant="blue">Name</Tag> | ||
| ``` | ||
| 1. `WuiTheme` becomes `ThemeValues` |
Oops, something went wrong.