chore: monorepo librairy with vite [POC]

README.md

@@ -1,5 +1,7 @@
 # Welcome UI
 
+![Welcome UI Logo](https://github.com/user-attachments/assets/e7df47fd-e6c8-462a-ac09-d052d67555bc)
+
 Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react • typescript • styled-components • styled-system and ariakit.
 
 Here you'll find all the core components you need to create a delightful webapp.

icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/icons",
-  "version": "5.22.1",
+  "version": "6.0.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -49,6 +49,6 @@
   "homepage": "https://welcome-ui.com/components/icons",
   "component": "Icons",
   "dependencies": {
-    "@welcome-ui/icon": "^5.22.1"
+    "@welcome-ui/icon": "^6.0.0-alpha.0"
   }
 }

icons/src/Symbol/content.json

@@ -0,0 +1,5 @@
+{
+  "width": 15,
+  "height": 15,
+  "block": "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M50 2C23.542 2 2 23.542 2 50s21.542 48 48 48 48-21.542 48-48S76.458 2 50 2Zm0 4.109c3.725 0 7.296.46 10.752 1.344C59.408 18.896 55.722 31.76 50 31.76c-5.722-.038-9.408-12.864-10.752-24.307A43.187 43.187 0 0 1 50 6.109Zm-19.085 4.339c2.688 11.02 11.021 24 19.047 24.038 8.025 0 16.358-13.017 19.046-24.038a48.638 48.638 0 0 1 6.26 3.686c-4.225 9.946-13.594 24.039-25.306 24.384-11.75-.307-21.082-14.4-25.306-24.384a51.396 51.396 0 0 1 6.26-3.686Zm-13.133 9.754C23.658 28.957 36.368 41.245 50 41.245c13.632 0 26.304-12.288 32.218-21.043a43.63 43.63 0 0 1 4.377 5.568C80.375 33.795 67.318 45.277 50 45.277c-17.318 0-30.374-11.52-36.595-19.507a47.342 47.342 0 0 1 4.377-5.568ZM50 93.892c-3.725 0-7.296-.462-10.752-1.345C40.592 81.104 44.278 68.24 50 68.24c5.722.038 9.408 12.864 10.752 24.307A43.187 43.187 0 0 1 50 93.891Zm19.085-4.34c-2.688-11.02-11.021-24-19.047-24.038-8.025 0-16.358 13.017-19.046 24.038a45.728 45.728 0 0 1-6.22-3.686c4.223-9.946 13.554-24.039 25.305-24.384 11.75.307 21.081 14.4 25.305 24.384a54.958 54.958 0 0 1-6.297 3.686Zm13.133-9.754C76.342 71.043 63.632 58.755 50 58.755c-13.632 0-26.342 12.288-32.218 21.043a43.63 43.63 0 0 1-4.377-5.568C19.625 66.205 32.682 54.723 50 54.723c17.318 0 30.374 11.52 36.595 19.507a43.63 43.63 0 0 1-4.377 5.568ZM50 52.035c-15.86 0-31.066 5.453-40.973 13.709A43.764 43.764 0 0 1 6.11 50a43.61 43.61 0 0 1 2.918-15.744C18.934 42.512 34.141 47.965 50 47.965c15.86 0 31.027-5.453 40.973-13.709A43.764 43.764 0 0 1 93.89 50a43.61 43.61 0 0 1-2.918 15.744C81.027 57.488 65.859 52.035 50 52.035Z\" clip-rule=\"evenodd\"/>"
+}

icons/src/Symbol/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon, IconProps } from '@welcome-ui/icon'
+
+import content from './content.json'
+
+export const SymbolIcon: React.FC<IconProps> = props => {
+  return <Icon alt="Symbol" content={content} {...props} />
+}

icons/src/index.d.ts

@@ -253,6 +253,7 @@ export declare const SuccessIcon: React.FC<IconProps>
 export declare const SuitcaseIcon: React.FC<IconProps>
 export declare const SunIcon: React.FC<IconProps>
 export declare const SvgIcon: React.FC<IconProps>
+export declare const SymbolIcon: React.FC<IconProps>
 export declare const TableIcon: React.FC<IconProps>
 export declare const TableColumnAddAfterIcon: React.FC<IconProps>
 export declare const TableColumnAddBeforeIcon: React.FC<IconProps>

icons/src/index.ts

@@ -251,6 +251,7 @@ export { SuccessIcon } from './Success'
 export { SuitcaseIcon } from './Suitcase'
 export { SunIcon } from './Sun'
 export { SvgIcon } from './Svg'
+export { SymbolIcon } from './Symbol'
 export { TableIcon } from './Table'
 export { TableColumnAddAfterIcon } from './TableColumnAddAfter'
 export { TableColumnAddBeforeIcon } from './TableColumnAddBefore'

lerna.json

@@ -6,7 +6,7 @@
   "ignore": [
     "website"
   ],
-  "version": "5.22.1",
+  "version": "6.0.0-alpha.0",
   "npmClient": "yarn",
   "useNx": false
 }

package.json

@@ -26,13 +26,15 @@
     "lint:mdx": "prettier --parser mdx --write '**/docs/index.mdx'",
     "lint:ts": "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",
-    "migrate": "node ./scripts/upgrade-v5.js",
+    "lint": "yarn lint:js && yarn lint:css && yarn lint:ts && yarn lint:mdx && yarn lint:website",
+    "migrate": "node ./scripts/upgrade-v6.js",
+    "migrate:v5": "node ./scripts/upgrade-v5.js",
     "postinstall": "husky install",
     "pre-build": "yarn icons:collect",
     "release": "yarn lerna version --conventional-commits --no-private",
     "dev:prerelease": "yarn lerna version --no-private --preid alpha",
-    "start": "yarn website:dev",
+    "start": "cd src && yarn start",
+    "website": "yarn website:dev",
     "test": "yarn jest",
     "watch": "onchange 'packages/**/*.ts*' -e '**/dist/**' -- node -r esm scripts/watch.js {{changed}}",
     "webfont:build": "node -r esm scripts/webfont-build.js --force && yarn build:packages --scope @welcome-ui/icons.font",
@@ -46,7 +48,8 @@
     "icons",
     "icons/**/*",
     "../icons/**/*",
-    "website"
+    "website",
+    "src"
   ],
   "repository": {
     "type": "git",

packages/Accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/accordion",
-  "version": "5.22.1",
+  "version": "6.0.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -47,9 +47,9 @@
   },
   "dependencies": {
     "@ariakit/react": "0.4.3",
-    "@welcome-ui/box": "^5.20.0",
-    "@welcome-ui/icons": "^5.22.1",
-    "@welcome-ui/system": "^5.17.1"
+    "@welcome-ui/box": "^6.0.0-alpha.0",
+    "@welcome-ui/icons": "^6.0.0-alpha.0",
+    "@welcome-ui/system": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

packages/Accordion/src/styles.ts

@@ -8,7 +8,7 @@ export const Accordion = styled.div`
   transition: medium;
 
   &:hover {
-    border-color: dark-400;
+    border-color: neutral-50;
   }
 `
 
@@ -49,7 +49,7 @@ export const Disclosure = styled(Ariakit.Disclosure)`
   &:hover {
     cursor: pointer;
     ${Icon} {
-      background-color: dark-100;
+      background-color: neutral-30;
     }
   }
 
@@ -82,5 +82,5 @@ export const ContentChild = styled.div`
   ${th('accordions.content')};
   padding: ${th('accordions.padding')};
   padding-top: 0;
-  color: dark-700;
+  color: neutral-70;
 `

packages/Alert/docs/examples/variants.tsx

@@ -13,8 +13,8 @@ const Example = () => {
           ornare.
         </span>
       </Alert>
-      <Alert variant="error">
-        <Alert.Title>Error variant</Alert.Title>
+      <Alert variant="danger">
+        <Alert.Title>Danger variant</Alert.Title>
         <span>
           Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
           ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a

packages/Alert/docs/properties.json

@@ -157,10 +157,7 @@
           "raw": "Variant",
           "value": [
             {
-              "value": "\"error\""
-            },
-            {
-              "value": "\"focused\""
+              "value": "\"danger\""
             },
             {
               "value": "\"info\""
@@ -333,10 +330,7 @@
           "raw": "Variant",
           "value": [
             {
-              "value": "\"error\""
-            },
-            {
-              "value": "\"focused\""
+              "value": "\"danger\""
             },
             {
               "value": "\"info\""

packages/Alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/alert",
-  "version": "5.22.1",
+  "version": "6.0.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -46,13 +46,14 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@welcome-ui/box": "^5.20.0",
-    "@welcome-ui/button": "^5.22.1",
-    "@welcome-ui/close-button": "^5.22.1",
-    "@welcome-ui/stack": "^5.20.0",
-    "@welcome-ui/system": "^5.17.1",
-    "@welcome-ui/text": "^5.21.1",
-    "@welcome-ui/variant-icon": "^5.22.1"
+    "@welcome-ui/box": "^6.0.0-alpha.0",
+    "@welcome-ui/button": "^6.0.0-alpha.0",
+    "@welcome-ui/close-button": "^6.0.0-alpha.0",
+    "@welcome-ui/stack": "^6.0.0-alpha.0",
+    "@welcome-ui/system": "^6.0.0-alpha.0",
+    "@welcome-ui/text": "^6.0.0-alpha.0",
+    "@welcome-ui/utils": "^6.0.0-alpha.0",
+    "@welcome-ui/variant-icon": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

packages/Alert/src/index.tsx

@@ -4,12 +4,14 @@ import { Box } from '@welcome-ui/box'
 import { CloseButton } from '@welcome-ui/close-button'
 import { Button, ButtonProps } from '@welcome-ui/button'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
-import { Variant, VariantIcon } from '@welcome-ui/variant-icon'
+import { VariantIcon } from '@welcome-ui/variant-icon'
+import { Variant as VariantUtils } from '@welcome-ui/utils'
 
 import * as S from './styles'
 import { Title } from './Title'
 
 export type Size = 'sm' | 'md'
+export type Variant = VariantUtils | 'default'
 export interface AlertOptions {
   closeButtonDataTestId?: string
   cta?: JSX.Element

packages/AspectRatio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/aspect-ratio",
-  "version": "5.20.0",
+  "version": "6.0.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -46,8 +46,8 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@welcome-ui/box": "^5.20.0",
-    "@welcome-ui/system": "^5.17.1"
+    "@welcome-ui/box": "^6.0.0-alpha.0",
+    "@welcome-ui/system": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

packages/Avatar/docs/examples/images.tsx

@@ -29,7 +29,7 @@ const Example = () => {
         src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
       />
       <Avatar
-        color="warning-500"
+        color="warning-50"
         fontSize={20}
         h={130}
         name="Custom"

packages/Avatar/docs/examples/texts.tsx

@@ -5,11 +5,11 @@ const Example = () => {
   return (
     <>
       <Avatar name="Welcome jungle" size="sm" />
-      <Avatar name="Welcome jungle" />
-      <Avatar name="Welcome jungle" size="lg" />
-      <Avatar name="Welcome jungle" size="xl" />
-      <Avatar name="Welcome jungle" size="xxl" />
-      <Avatar color="warning-500" fontSize={20} h={130} name="Custom" w={130} />
+      <Avatar name="Welcome t jungle" />
+      <Avatar name="Welcome to jungle" size="lg" />
+      <Avatar name="Welcome to t Jungle" size="xl" />
+      <Avatar name="Welcome to the jungle" size="xxl" />
+      <Avatar color="warning-30" fontSize={20} h={130} name="Custom" w={130} />
     </>
   )
 }

packages/Avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/avatar",
-  "version": "5.22.1",
+  "version": "6.0.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -46,10 +46,11 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@welcome-ui/box": "^5.20.0",
-    "@welcome-ui/shape": "^5.22.1",
-    "@welcome-ui/system": "^5.17.1",
-    "@welcome-ui/text": "^5.21.1"
+    "@welcome-ui/box": "^6.0.0-alpha.0",
+    "@welcome-ui/core": "^6.0.0-alpha.0",
+    "@welcome-ui/shape": "^6.0.0-alpha.0",
+    "@welcome-ui/system": "^6.0.0-alpha.0",
+    "@welcome-ui/text": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

packages/Avatar/src/utils.ts

@@ -1,9 +1,21 @@
 import { Theme } from '@xstyled/styled-components'
+import { SecondaryColors } from '@welcome-ui/core'
+
+const subColorByNumber: {
+  [key: number]: keyof typeof SecondaryColors
+} = {
+  1: 'teal',
+  2: 'blue',
+  3: 'orange',
+  4: 'green',
+  5: 'pink',
+  6: 'violet',
+}
 
 export function getSeededColor(colors: Theme['colors'], seed = ''): string {
-  const colorKeys = Object.keys(colors).filter(color => color.startsWith('sub-'))
+  const colorKeys = Object.keys(colors).filter(color => color.startsWith('secondary-'))
   const subColorNumber = (seed.length % colorKeys.length) + 1
-  const colorsIndex = `sub-${subColorNumber}` as keyof Theme['colors']
+  const colorsIndex = `secondary-${subColorByNumber[subColorNumber]}` as keyof Theme['colors']
 
   return colors[colorsIndex]
 }

packages/Badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/badge",
-  "version": "5.22.1",
+  "version": "6.0.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -46,7 +46,7 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@welcome-ui/system": "^5.17.1"
+    "@welcome-ui/system": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

packages/Badge/tests/index.test.tsx

@@ -34,8 +34,8 @@ describe('<Badge>', () => {
     )
     const badge = getByTestId('badge')
 
-    expect(badge).toHaveStyleRule('background-color', theme.colors['primary-500'])
-    expect(badge).toHaveStyleRule('color', 'rgba(0,0,0,1)')
+    expect(badge).toHaveStyleRule('background-color', theme.colors['primary-40'])
+    expect(badge).toHaveStyleRule('color', '#000000')
   })
 
   it('should have correct primary variant color if disabled', () => {
@@ -46,8 +46,8 @@ describe('<Badge>', () => {
     )
     const badge = getByTestId('badge')
 
-    expect(badge).toHaveStyleRule('background-color', theme.colors['primary-600'])
-    expect(badge).toHaveStyleRule('color', theme.colors['primary-800'])
+    expect(badge).toHaveStyleRule('background-color', theme.colors['primary-50'])
+    expect(badge).toHaveStyleRule('color', theme.colors['primary-80'])
   })
 
   it('should have correct circle shape', () => {