chore: monorepo librairy with vite [POC]

package.json

@@ -33,7 +33,8 @@
     "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",
@@ -47,7 +48,8 @@
     "icons",
     "icons/**/*",
     "../icons/**/*",
-    "website"
+    "website",
+    "src"
   ],
   "repository": {
     "type": "git",

packages/Core/src/theme/radii.ts

@@ -1,24 +1,24 @@
-import { WuiTheme } from './types'
+import { WuiTheme } from "./types";
 
 export type ThemeRadii = {
-  [key: number]: string
-  full: string
-  lg: string
-  md: string
-  none: string
-  sm: string
-  xl: string
-  xxl: string
-}
+  [key: number]: string;
+  full: string;
+  lg: string;
+  md: string;
+  none: string;
+  sm: string;
+  xl: string;
+  xxl: string;
+};
 
 export const getRadii = (theme: WuiTheme): ThemeRadii => {
   return {
-    none: '0',
+    none: "0",
     sm: theme.toRem(2),
     md: theme.toRem(4),
     lg: theme.toRem(8),
     xl: theme.toRem(16),
     xxl: theme.toRem(24),
-    full: '100%',
-  }
-}
+    full: "100%",
+  };
+};

src/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve("wttj-config/lib/eslint/eslintrc-typescript")],
+};

src/lib/components/Tag/docs/TODOOOOO.json

@@ -0,0 +1,175 @@
+{
+  "Tag": {
+    "props": {
+      "href": {
+        "defaultValue": null,
+        "description": "",
+        "name": "href",
+        "parent": {
+          "fileName": "Tag/src/index.tsx",
+          "name": "TagOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Tag/src/index.tsx",
+            "name": "TagOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onClick": {
+        "defaultValue": null,
+        "description": "",
+        "name": "onClick",
+        "parent": {
+          "fileName": "Tag/src/index.tsx",
+          "name": "TagOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Tag/src/index.tsx",
+            "name": "TagOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
+      },
+      "onRemove": {
+        "defaultValue": null,
+        "description": "",
+        "name": "onRemove",
+        "parent": {
+          "fileName": "Tag/src/index.tsx",
+          "name": "TagOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Tag/src/index.tsx",
+            "name": "TagOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "md"
+        },
+        "description": "",
+        "name": "size",
+        "parent": {
+          "fileName": "Tag/src/index.tsx",
+          "name": "TagOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Tag/src/index.tsx",
+            "name": "TagOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Size",
+          "value": [
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"sm\""
+            },
+            {
+              "value": "\"md\""
+            }
+          ]
+        }
+      },
+      "to": {
+        "defaultValue": null,
+        "description": "",
+        "name": "to",
+        "parent": {
+          "fileName": "Tag/src/index.tsx",
+          "name": "TagOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Tag/src/index.tsx",
+            "name": "TagOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "variant": {
+        "defaultValue": {
+          "value": "default"
+        },
+        "description": "",
+        "name": "variant",
+        "parent": {
+          "fileName": "Tag/src/index.tsx",
+          "name": "TagOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Tag/src/index.tsx",
+            "name": "TagOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "Variant",
+          "value": [
+            {
+              "value": "\"blue\""
+            },
+            {
+              "value": "\"green\""
+            },
+            {
+              "value": "\"orange\""
+            },
+            {
+              "value": "\"pink\""
+            },
+            {
+              "value": "\"teal\""
+            },
+            {
+              "value": "\"violet\""
+            },
+            {
+              "value": "\"danger\""
+            },
+            {
+              "value": "\"info\""
+            },
+            {
+              "value": "\"success\""
+            },
+            {
+              "value": "\"warning\""
+            },
+            {
+              "value": "\"default\""
+            },
+            {
+              "value": "\"primary\""
+            }
+          ]
+        }
+      }
+    }
+  }
+}

src/lib/components/Tag/docs/examples/clickable.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+
+const Example = () => {
+  return (
+    <Tag as="a" href="#" onClick={() => alert('clicked')} size="xs">
+      Clickable tag
+    </Tag>
+  )
+}
+
+export default Example

src/lib/components/Tag/docs/examples/on-remove.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+import { Text } from '@welcome-ui/text'
+
+const Example = () => {
+  const [isHide, setHide] = React.useState(false)
+
+  return isHide ? (
+    <Text color="danger-50" fontSize="sm" fontWeight="bold" m={0}>
+      Tag removed
+    </Text>
+  ) : (
+    <>
+      <Tag onRemove={() => setHide(true)}>Example of remove tag</Tag>
+      <Tag onRemove={() => setHide(true)} size="sm">
+        small
+      </Tag>
+      <Tag onRemove={() => setHide(true)} variant="success">
+        success
+      </Tag>
+    </>
+  )
+}
+
+export default Example

src/lib/components/Tag/docs/examples/one-character.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+
+const Example = () => {
+  return (
+    <>
+      <Tag size="xs">1</Tag>
+      <Tag size="sm">1</Tag>
+      <Tag size="md">1</Tag>
+    </>
+  )
+}
+
+export default Example

src/lib/components/Tag/docs/examples/overview.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+
+const Example = () => {
+  return <Tag>Default</Tag>
+}
+
+export default Example

src/lib/components/Tag/docs/examples/sizes.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+
+const Example = () => {
+  return (
+    <>
+      <Tag size="xs">Tiny</Tag>
+      <Tag size="sm">Small</Tag>
+      <Tag size="md">Medium</Tag>
+    </>
+  )
+}
+
+export default Example

src/lib/components/Tag/docs/examples/variants-basics.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+
+const Example = () => {
+  return (
+    <>
+      <Tag>Default</Tag>
+      <Tag variant="primary">Primary</Tag>
+    </>
+  )
+}
+
+export default Example

src/lib/components/Tag/docs/examples/variants-secondary.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+
+const Example = () => {
+  return (
+    <>
+      <Tag variant="blue">blue</Tag>
+      <Tag variant="green">green</Tag>
+      <Tag variant="orange">orange</Tag>
+      <Tag variant="pink">pink</Tag>
+      <Tag variant="teal">teal</Tag>
+      <Tag variant="violet">violet</Tag>
+    </>
+  )
+}
+
+export default Example

src/lib/components/Tag/docs/examples/variants-states.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { Tag } from '@welcome-ui/react'
+
+const Example = () => {
+  return (
+    <>
+      <Tag variant="success">Success</Tag>
+      <Tag variant="danger">Danger</Tag>
+      <Tag variant="warning">Warning</Tag>
+      <Tag variant="info">Info</Tag>
+    </>
+  )
+}
+
+export default Example