From a8ec60f561ee4ffdb7ddd3ae491bd99131d2fe89 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 19:39:27 -0500 Subject: [PATCH 01/11] feat: moving flexbox and themeprovider to ui-system --- .github/workflows/pull-requests.yml | 9 +- .release-please-manifest.json | 3 +- packages/bundlesize/package.json | 6 +- packages/bundlesize/tsconfig.json | 2 +- packages/bundlesize/tsconfig.node.json | 6 +- .../bundlesize/{ => ui-components}/index.html | 2 +- .../{ => ui-components}/src/main.tsx | 0 .../{ => ui-components}/src/vite-env.d.ts | 0 packages/bundlesize/ui-system/index.html | 19 + packages/bundlesize/ui-system/src/main.tsx | 18 + .../bundlesize/ui-system/src/vite-env.d.ts | 1 + ...te.config.ts => vite.components.config.ts} | 8 + packages/bundlesize/vite.system.config.ts | 57 +++ packages/documentation/.ladle/components.tsx | 9 +- packages/documentation/package.json | 1 + .../src/Form/TextArea.stories.tsx | 3 +- .../src/GettingStarted/1-overview.stories.tsx | 8 +- .../GettingStarted/2-Installation.stories.tsx | 9 +- .../3-configuration.stories.tsx | 9 +- .../src/GettingStarted/4-usage.stories.mdx | 3 +- .../GettingStarted/5-alpha-beta.stories.tsx | 8 +- .../src/System/Flexgrid.stories.tsx | 3 +- packages/documentation/tailwind.config.js | 13 +- packages/ui-components/bundlesize.config.js | 3 +- .../ui-components/src/components/index.ts | 6 - packages/ui-components/stats/stats.json | 354 ------------------ packages/ui-system/README.md | 27 ++ packages/ui-system/bundlesize.config.js | 22 ++ packages/ui-system/lib/buildIcons.js | 139 +++++++ packages/ui-system/lib/customCSS.ts | 33 ++ packages/ui-system/lib/icons/config.json | 85 +++++ .../ui-system/lib/icons/svg/address-card.svg | 1 + .../ui-system/lib/icons/svg/arrow-left.svg | 4 + .../ui-system/lib/icons/svg/arrow-right.svg | 4 + .../icons/svg/arrow-up-left-from-circle.svg | 1 + .../ui-system/lib/icons/svg/chart-simple.svg | 1 + .../ui-system/lib/icons/svg/circle-info.svg | 1 + .../lib/icons/svg/clock-rotate-left.svg | 1 + packages/ui-system/lib/icons/svg/clone.svg | 1 + packages/ui-system/lib/icons/svg/ellipsis.svg | 1 + .../ui-system/lib/icons/svg/eye-slash.svg | 1 + packages/ui-system/lib/icons/svg/eye.svg | 1 + .../ui-system/lib/icons/svg/face-smile.svg | 1 + packages/ui-system/lib/icons/svg/github.svg | 3 + .../ui-system/lib/icons/svg/pen-to-square.svg | 1 + .../ui-system/lib/icons/svg/square-check.svg | 1 + .../ui-system/lib/icons/svg/trash-can.svg | 1 + .../lib/icons/svg/window-restore.svg | 1 + packages/ui-system/lib/icons/svg/xmark.svg | 3 + packages/ui-system/lib/tailwindPlugin.ts | 180 +++++++++ packages/ui-system/lib/tokens.ts | 79 ++++ packages/ui-system/package.json | 59 +++ packages/ui-system/postcss.config.cjs | 7 + .../ui-system/src/__tests__/utilities.test.ts | 9 + .../ui-system/src/common/__tests__/helpers.ts | 28 ++ .../src/common/__tests__/utilities.test.tsx | 69 ++++ packages/ui-system/src/common/constants.ts | 33 ++ packages/ui-system/src/common/index.d.ts | 23 ++ packages/ui-system/src/common/utilities.ts | 144 +++++++ .../src/components/Flexgrid/Flexgrid.tsx | 0 .../components/Flexgrid/FlexgridContext.ts | 0 .../src/components/Flexgrid/FlexgridItem.tsx | 0 .../components/Flexgrid/FlexgridTypes.d.ts | 0 .../Flexgrid/__tests__/Flexgrid.test.tsx | 0 .../Flexgrid/__tests__/FlexgridItem.test.tsx | 3 +- .../src/components/Flexgrid/utilities.ts | 0 .../ThemeProvider/ThemeProvider.tsx | 0 .../ThemeProvider/ThemeProviderTypes.d.ts | 0 .../__tests__/ThemeProvider.test.tsx | 0 packages/ui-system/src/components/index.ts | 5 + packages/ui-system/src/index.css | 3 + packages/ui-system/src/style.ts | 1 + packages/ui-system/src/utilities.ts | 5 + packages/ui-system/src/vite-env.d.ts | 1 + packages/ui-system/tailwind.config.js | 7 + packages/ui-system/tsconfig.json | 26 ++ packages/ui-system/tsconfig.node.json | 10 + packages/ui-system/tsup.config.ts | 13 + packages/ui-system/vite.config.ts | 114 ++++++ packages/ui-system/vitest.config.ts | 28 ++ packages/ui-system/vitest.setup.ts | 19 + pnpm-lock.yaml | 52 ++- release-please-config.json | 3 +- 83 files changed, 1388 insertions(+), 427 deletions(-) rename packages/bundlesize/{ => ui-components}/index.html (86%) rename packages/bundlesize/{ => ui-components}/src/main.tsx (100%) rename packages/bundlesize/{ => ui-components}/src/vite-env.d.ts (100%) create mode 100644 packages/bundlesize/ui-system/index.html create mode 100644 packages/bundlesize/ui-system/src/main.tsx create mode 100644 packages/bundlesize/ui-system/src/vite-env.d.ts rename packages/bundlesize/{vite.config.ts => vite.components.config.ts} (86%) create mode 100644 packages/bundlesize/vite.system.config.ts delete mode 100644 packages/ui-components/stats/stats.json create mode 100644 packages/ui-system/README.md create mode 100644 packages/ui-system/bundlesize.config.js create mode 100644 packages/ui-system/lib/buildIcons.js create mode 100644 packages/ui-system/lib/customCSS.ts create mode 100644 packages/ui-system/lib/icons/config.json create mode 100644 packages/ui-system/lib/icons/svg/address-card.svg create mode 100644 packages/ui-system/lib/icons/svg/arrow-left.svg create mode 100644 packages/ui-system/lib/icons/svg/arrow-right.svg create mode 100644 packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg create mode 100644 packages/ui-system/lib/icons/svg/chart-simple.svg create mode 100644 packages/ui-system/lib/icons/svg/circle-info.svg create mode 100644 packages/ui-system/lib/icons/svg/clock-rotate-left.svg create mode 100644 packages/ui-system/lib/icons/svg/clone.svg create mode 100644 packages/ui-system/lib/icons/svg/ellipsis.svg create mode 100644 packages/ui-system/lib/icons/svg/eye-slash.svg create mode 100644 packages/ui-system/lib/icons/svg/eye.svg create mode 100644 packages/ui-system/lib/icons/svg/face-smile.svg create mode 100644 packages/ui-system/lib/icons/svg/github.svg create mode 100644 packages/ui-system/lib/icons/svg/pen-to-square.svg create mode 100644 packages/ui-system/lib/icons/svg/square-check.svg create mode 100644 packages/ui-system/lib/icons/svg/trash-can.svg create mode 100644 packages/ui-system/lib/icons/svg/window-restore.svg create mode 100644 packages/ui-system/lib/icons/svg/xmark.svg create mode 100644 packages/ui-system/lib/tailwindPlugin.ts create mode 100644 packages/ui-system/lib/tokens.ts create mode 100644 packages/ui-system/package.json create mode 100644 packages/ui-system/postcss.config.cjs create mode 100644 packages/ui-system/src/__tests__/utilities.test.ts create mode 100644 packages/ui-system/src/common/__tests__/helpers.ts create mode 100644 packages/ui-system/src/common/__tests__/utilities.test.tsx create mode 100644 packages/ui-system/src/common/constants.ts create mode 100644 packages/ui-system/src/common/index.d.ts create mode 100644 packages/ui-system/src/common/utilities.ts rename packages/{ui-components => ui-system}/src/components/Flexgrid/Flexgrid.tsx (100%) rename packages/{ui-components => ui-system}/src/components/Flexgrid/FlexgridContext.ts (100%) rename packages/{ui-components => ui-system}/src/components/Flexgrid/FlexgridItem.tsx (100%) rename packages/{ui-components => ui-system}/src/components/Flexgrid/FlexgridTypes.d.ts (100%) rename packages/{ui-components => ui-system}/src/components/Flexgrid/__tests__/Flexgrid.test.tsx (100%) rename packages/{ui-components => ui-system}/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx (97%) rename packages/{ui-components => ui-system}/src/components/Flexgrid/utilities.ts (100%) rename packages/{ui-components => ui-system}/src/components/ThemeProvider/ThemeProvider.tsx (100%) rename packages/{ui-components => ui-system}/src/components/ThemeProvider/ThemeProviderTypes.d.ts (100%) rename packages/{ui-components => ui-system}/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx (100%) create mode 100644 packages/ui-system/src/components/index.ts create mode 100644 packages/ui-system/src/index.css create mode 100644 packages/ui-system/src/style.ts create mode 100644 packages/ui-system/src/utilities.ts create mode 100644 packages/ui-system/src/vite-env.d.ts create mode 100644 packages/ui-system/tailwind.config.js create mode 100644 packages/ui-system/tsconfig.json create mode 100644 packages/ui-system/tsconfig.node.json create mode 100644 packages/ui-system/tsup.config.ts create mode 100644 packages/ui-system/vite.config.ts create mode 100644 packages/ui-system/vitest.config.ts create mode 100644 packages/ui-system/vitest.setup.ts diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml index 60b944bc..8c2a864a 100644 --- a/.github/workflows/pull-requests.yml +++ b/.github/workflows/pull-requests.yml @@ -27,13 +27,18 @@ jobs: corepack enable pnpm install npx lerna run build --ignore @versini/documentation - npx lerna run stats:pr --scope=@versini/ui-components - npx lerna run stats:report --scope=@versini/ui-components + npx lerna run stats:pr + npx lerna run stats:report - uses: mshick/add-pr-comment@v2 if: always() with: refresh-message-position: true message-path: packages/ui-components/tmp/pr-stats.md + - uses: mshick/add-pr-comment@v2 + if: always() + with: + refresh-message-position: true + message-path: packages/ui-system/tmp/pr-stats.md inspect: if: ${{ always() }} diff --git a/.release-please-manifest.json b/.release-please-manifest.json index ee58aa90..ac21a25b 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,5 +1,6 @@ { "packages/eslint-plugin-client": "1.0.1", "packages/ui-components": "4.37.0", - "packages/ui-hooks": "2.2.0" + "packages/ui-hooks": "2.2.0", + "packages/ui-system": "0.0.0" } diff --git a/packages/bundlesize/package.json b/packages/bundlesize/package.json index 62a70900..2465d6f9 100644 --- a/packages/bundlesize/package.json +++ b/packages/bundlesize/package.json @@ -7,14 +7,16 @@ "private": true, "scripts": { "clean": "rimraf dist", - "build:js": "vite build", - "build": "npm-run-all --serial clean build:js", + "build:components": "vite build -c vite.components.config.js", + "build:system": "vite build -c vite.system.config.js", + "build": "npm-run-all --serial clean build:components build:system", "test": "echo \"WARNING: no test specified\" && exit 0", "test:coverage": "echo \"WARNING: no test specified\" && exit 0" }, "dependencies": { "@versini/ui-components": "workspace:../ui-components", "@versini/ui-hooks": "workspace:../ui-hooks", + "@versini/ui-system": "workspace:../ui-system", "react": "18.2.0", "react-dom": "18.2.0" } diff --git a/packages/bundlesize/tsconfig.json b/packages/bundlesize/tsconfig.json index ffbdf148..886dfdde 100644 --- a/packages/bundlesize/tsconfig.json +++ b/packages/bundlesize/tsconfig.json @@ -21,6 +21,6 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src"], + "include": ["ui-components/src", "ui-system/src"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/packages/bundlesize/tsconfig.node.json b/packages/bundlesize/tsconfig.node.json index f7d9f9ea..f2a3bd96 100644 --- a/packages/bundlesize/tsconfig.node.json +++ b/packages/bundlesize/tsconfig.node.json @@ -6,5 +6,9 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": ["./vite.config.ts", "./vitest.setup.ts"] + "include": [ + "./vite.components.config.ts", + "./vite.system.config.ts", + "./vitest.setup.ts" + ] } diff --git a/packages/bundlesize/index.html b/packages/bundlesize/ui-components/index.html similarity index 86% rename from packages/bundlesize/index.html rename to packages/bundlesize/ui-components/index.html index 9b14545f..8f8734cc 100644 --- a/packages/bundlesize/index.html +++ b/packages/bundlesize/ui-components/index.html @@ -13,7 +13,7 @@
- + diff --git a/packages/bundlesize/src/main.tsx b/packages/bundlesize/ui-components/src/main.tsx similarity index 100% rename from packages/bundlesize/src/main.tsx rename to packages/bundlesize/ui-components/src/main.tsx diff --git a/packages/bundlesize/src/vite-env.d.ts b/packages/bundlesize/ui-components/src/vite-env.d.ts similarity index 100% rename from packages/bundlesize/src/vite-env.d.ts rename to packages/bundlesize/ui-components/src/vite-env.d.ts diff --git a/packages/bundlesize/ui-system/index.html b/packages/bundlesize/ui-system/index.html new file mode 100644 index 00000000..bf7f1967 --- /dev/null +++ b/packages/bundlesize/ui-system/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + UI System + + + + +
+ + + + diff --git a/packages/bundlesize/ui-system/src/main.tsx b/packages/bundlesize/ui-system/src/main.tsx new file mode 100644 index 00000000..463dd524 --- /dev/null +++ b/packages/bundlesize/ui-system/src/main.tsx @@ -0,0 +1,18 @@ +import "@versini/ui-system/dist/style.css"; + +import * as System from "@versini/ui-system"; +import React from "react"; +import ReactDOM from "react-dom/client"; + +Object.keys(System).forEach(() => { + /** + * This is simply to loop through all system components + * and trick rollup into bundling them (instead of + * simply tree-shaking anything that is imported but + * not used...) + */ +}); + +ReactDOM.createRoot(document.getElementById("root")!).render( + hello, +); diff --git a/packages/bundlesize/ui-system/src/vite-env.d.ts b/packages/bundlesize/ui-system/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/packages/bundlesize/ui-system/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/bundlesize/vite.config.ts b/packages/bundlesize/vite.components.config.ts similarity index 86% rename from packages/bundlesize/vite.config.ts rename to packages/bundlesize/vite.components.config.ts index 9f27fd90..3236bdbf 100644 --- a/packages/bundlesize/vite.config.ts +++ b/packages/bundlesize/vite.components.config.ts @@ -1,3 +1,7 @@ +/** @type {import('vite').UserConfig} */ + +import { resolve } from "node:path"; + import fs from "fs-extra"; import { defineConfig } from "vite"; @@ -25,7 +29,11 @@ export default defineConfig({ }, }, build: { + outDir: "dist/system", rollupOptions: { + input: { + index: resolve(__dirname, "ui-system", "index.html"), + }, output: { assetFileNames: "assets/style[extname]", entryFileNames: "assets/[name].js", diff --git a/packages/bundlesize/vite.system.config.ts b/packages/bundlesize/vite.system.config.ts new file mode 100644 index 00000000..662c35e1 --- /dev/null +++ b/packages/bundlesize/vite.system.config.ts @@ -0,0 +1,57 @@ +/** @type {import('vite').UserConfig} */ + +import { resolve } from "node:path"; + +import fs from "fs-extra"; +import { defineConfig } from "vite"; + +const VENDOR_CHUNK = "vendorChunk"; +const packageJson = fs.readJSONSync("../ui-components/package.json"); +const prodDependencies = Object.keys(packageJson.dependencies).filter( + (dependency) => + dependency !== "react" && + dependency !== "react-dom" && + dependency !== "react/jsx-runtime" && + dependency !== "react-dom/server" && + dependency !== "tailwindcss", +); +prodDependencies.push( + "react-dom", + "react-dom/server", + "react", + "react/jsx-runtime", +); + +export default defineConfig({ + esbuild: { + supported: { + "top-level-await": true, //browsers can handle top-level-await features + }, + }, + build: { + outDir: "dist/components", + emptyOutDir: false, + rollupOptions: { + input: { + index: resolve(__dirname, "ui-components", "index.html"), + }, + output: { + assetFileNames: "assets/style[extname]", + entryFileNames: "assets/[name].js", + /** + * Manually creating chunks for prod dependencies. + */ + manualChunks: { + [VENDOR_CHUNK]: prodDependencies, + }, + chunkFileNames(chunkInfo) { + if (chunkInfo.name.includes(VENDOR_CHUNK)) { + return "assets/vendor.js"; + } + return "[name]-[hash].js"; + }, + }, + }, + }, + plugins: [], +}); diff --git a/packages/documentation/.ladle/components.tsx b/packages/documentation/.ladle/components.tsx index f0d99852..4b8ed977 100644 --- a/packages/documentation/.ladle/components.tsx +++ b/packages/documentation/.ladle/components.tsx @@ -1,12 +1,7 @@ import "./styles.css"; -import { - ButtonIcon, - Flexgrid, - FlexgridItem, - Footer, - IconGitHub, -} from "@versini/ui-components"; +import { ButtonIcon, Footer, IconGitHub } from "@versini/ui-components"; +import { Flexgrid, FlexgridItem } from "@versini/ui-system"; import type { GlobalProvider } from "@ladle/react"; import clsx from "clsx"; diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 91348fa8..ad86555a 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -22,6 +22,7 @@ "dependencies": { "@tailwindcss/typography": "0.5.10", "@versini/ui-components": "workspace:../ui-components", + "@versini/ui-system": "workspace:../ui-system", "clsx": "2.1.0", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/packages/documentation/src/Form/TextArea.stories.tsx b/packages/documentation/src/Form/TextArea.stories.tsx index f60b6635..ecb4786a 100644 --- a/packages/documentation/src/Form/TextArea.stories.tsx +++ b/packages/documentation/src/Form/TextArea.stories.tsx @@ -1,5 +1,6 @@ import type { Story } from "@ladle/react"; -import { Button, TextArea, ThemeProvider } from "@versini/ui-components"; +import { Button, TextArea } from "@versini/ui-components"; +import { ThemeProvider } from "@versini/ui-system"; const customTheme = { "--av-copy-light": "#403c3a", diff --git a/packages/documentation/src/GettingStarted/1-overview.stories.tsx b/packages/documentation/src/GettingStarted/1-overview.stories.tsx index 381c44ff..4bd67427 100644 --- a/packages/documentation/src/GettingStarted/1-overview.stories.tsx +++ b/packages/documentation/src/GettingStarted/1-overview.stories.tsx @@ -1,10 +1,6 @@ import { linkTo, Story } from "@ladle/react"; -import { - ButtonIcon, - Flexgrid, - FlexgridItem, - IconNext, -} from "@versini/ui-components"; +import { ButtonIcon, IconNext } from "@versini/ui-components"; +import { Flexgrid, FlexgridItem } from "@versini/ui-system"; export default { title: "Getting started", diff --git a/packages/documentation/src/GettingStarted/2-Installation.stories.tsx b/packages/documentation/src/GettingStarted/2-Installation.stories.tsx index 832d3bda..4618c705 100644 --- a/packages/documentation/src/GettingStarted/2-Installation.stories.tsx +++ b/packages/documentation/src/GettingStarted/2-Installation.stories.tsx @@ -1,11 +1,6 @@ import { linkTo, Story } from "@ladle/react"; -import { - ButtonIcon, - Flexgrid, - FlexgridItem, - IconNext, - IconPrevious, -} from "@versini/ui-components"; +import { ButtonIcon, IconNext, IconPrevious } from "@versini/ui-components"; +import { Flexgrid, FlexgridItem } from "@versini/ui-system"; export default { title: "Getting Started", diff --git a/packages/documentation/src/GettingStarted/3-configuration.stories.tsx b/packages/documentation/src/GettingStarted/3-configuration.stories.tsx index fd46aaa4..b1137ba0 100644 --- a/packages/documentation/src/GettingStarted/3-configuration.stories.tsx +++ b/packages/documentation/src/GettingStarted/3-configuration.stories.tsx @@ -1,11 +1,6 @@ import { linkTo, Story } from "@ladle/react"; -import { - ButtonIcon, - Flexgrid, - FlexgridItem, - IconNext, - IconPrevious, -} from "@versini/ui-components"; +import { ButtonIcon, IconNext, IconPrevious } from "@versini/ui-components"; +import { Flexgrid, FlexgridItem } from "@versini/ui-system"; export default { title: "Getting Started", diff --git a/packages/documentation/src/GettingStarted/4-usage.stories.mdx b/packages/documentation/src/GettingStarted/4-usage.stories.mdx index a25c029b..61f7b32a 100644 --- a/packages/documentation/src/GettingStarted/4-usage.stories.mdx +++ b/packages/documentation/src/GettingStarted/4-usage.stories.mdx @@ -3,11 +3,10 @@ import { Button, ButtonIcon, Card, - Flexgrid, - FlexgridItem, IconNext, IconPrevious, } from "@versini/ui-components"; +import { Flexgrid, FlexgridItem } from "@versini/ui-system"; diff --git a/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx b/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx index ff54f534..5eeab04a 100644 --- a/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx +++ b/packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx @@ -1,10 +1,6 @@ import { linkTo, Story } from "@ladle/react"; -import { - ButtonIcon, - Flexgrid, - FlexgridItem, - IconPrevious, -} from "@versini/ui-components"; +import { ButtonIcon, IconPrevious } from "@versini/ui-components"; +import { Flexgrid, FlexgridItem } from "@versini/ui-system"; export default { title: "Getting Started", diff --git a/packages/documentation/src/System/Flexgrid.stories.tsx b/packages/documentation/src/System/Flexgrid.stories.tsx index d1b726af..41b90c87 100644 --- a/packages/documentation/src/System/Flexgrid.stories.tsx +++ b/packages/documentation/src/System/Flexgrid.stories.tsx @@ -1,14 +1,13 @@ import type { Story } from "@ladle/react"; import { Card, - Flexgrid, - FlexgridItem, Table, TableBody, TableCell, TableHead, TableRow, } from "@versini/ui-components"; +import { Flexgrid, FlexgridItem } from "@versini/ui-system"; export default { title: "System/Flexgrid", diff --git a/packages/documentation/tailwind.config.js b/packages/documentation/tailwind.config.js index 40dcdcfc..fe0610da 100644 --- a/packages/documentation/tailwind.config.js +++ b/packages/documentation/tailwind.config.js @@ -1,8 +1,11 @@ /** @type {import('tailwindcss').Config} */ -import { twPlugin } from "@versini/ui-components/dist/utilities"; +import { twPlugin as componentsPlugin } from "@versini/ui-components/dist/utilities"; +import { twPlugin as systemPlugin } from "@versini/ui-system/dist/utilities"; -export default twPlugin.merge({ - darkMode: "selector", - content: ["./src/**/*.{js,ts,jsx,tsx}", "./.ladle/**/*.tsx"], -}); +export default systemPlugin.merge( + componentsPlugin.merge({ + darkMode: "selector", + content: ["./src/**/*.{js,ts,jsx,tsx}", "./.ladle/**/*.tsx"], + }), +); diff --git a/packages/ui-components/bundlesize.config.js b/packages/ui-components/bundlesize.config.js index 6e073c2e..f992d9ec 100644 --- a/packages/ui-components/bundlesize.config.js +++ b/packages/ui-components/bundlesize.config.js @@ -1,6 +1,7 @@ -const bundlePath = "../bundlesize/dist"; +const bundlePath = "../bundlesize/dist/components"; export default { report: { + header: "## Bundle Size (components)", previous: "stats/stats.json", current: "tmp/stats.json", }, diff --git a/packages/ui-components/src/components/index.ts b/packages/ui-components/src/components/index.ts index d90588cb..8c7af8f8 100644 --- a/packages/ui-components/src/components/index.ts +++ b/packages/ui-components/src/components/index.ts @@ -11,8 +11,6 @@ import { Button } from "./Button/Button"; import { ButtonIcon } from "./Button/ButtonIcon"; import { ButtonLink } from "./Button/ButtonLink"; import { Card } from "./Card/Card"; -import { Flexgrid } from "./Flexgrid/Flexgrid"; -import { FlexgridItem } from "./Flexgrid/FlexgridItem"; import { Footer } from "./Footer/Footer"; import { Header } from "./Header/Header"; import { IconBack } from "./Icons/IconBack"; @@ -50,7 +48,6 @@ import { import { TextArea } from "./TextArea/TextArea"; import { TextInput } from "./TextInput/TextInput"; import { TextInputMask } from "./TextInput/TextInputMask"; -import { ThemeProvider } from "./ThemeProvider/ThemeProvider"; import { Toggle } from "./Toggle/Toggle"; export { @@ -60,8 +57,6 @@ export { ButtonIcon, ButtonLink, Card, - Flexgrid, - FlexgridItem, Footer, Header, IconBack, @@ -97,7 +92,6 @@ export { TextArea, TextInput, TextInputMask, - ThemeProvider, Toggle, useLocalStorage, useMergeRefs, diff --git a/packages/ui-components/stats/stats.json b/packages/ui-components/stats/stats.json deleted file mode 100644 index c78a81b2..00000000 --- a/packages/ui-components/stats/stats.json +++ /dev/null @@ -1,354 +0,0 @@ -{ - "4.28.1": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52740, - "fileSizeGzip": 17878, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45157, - "fileSizeGzip": 7206, - "limit": "8 KB", - "passed": true - } - }, - "4.29.0": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52740, - "fileSizeGzip": 17878, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45157, - "fileSizeGzip": 7206, - "limit": "8 KB", - "passed": true - } - }, - "4.30.0": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52740, - "fileSizeGzip": 17878, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45157, - "fileSizeGzip": 7206, - "limit": "8 KB", - "passed": true - } - }, - "4.30.1": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52740, - "fileSizeGzip": 17878, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45157, - "fileSizeGzip": 7206, - "limit": "8 KB", - "passed": true - } - }, - "4.30.2": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52740, - "fileSizeGzip": 17878, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45157, - "fileSizeGzip": 7206, - "limit": "8 KB", - "passed": true - } - }, - "4.31.0": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52799, - "fileSizeGzip": 17891, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45189, - "fileSizeGzip": 7219, - "limit": "8 KB", - "passed": true - } - }, - "4.32.0": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52956, - "fileSizeGzip": 18000, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45404, - "fileSizeGzip": 7238, - "limit": "8 KB", - "passed": true - } - }, - "4.32.1": { - "../bundlesize/dist/index.html": { - "fileSize": 484, - "fileSizeGzip": 318, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 52956, - "fileSizeGzip": 18026, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45404, - "fileSizeGzip": 7270, - "limit": "8 KB", - "passed": true - } - }, - "4.32.2": { - "../bundlesize/dist/index.html": { - "fileSize": 550, - "fileSizeGzip": 334, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45404, - "fileSizeGzip": 7270, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 53606, - "fileSizeGzip": 18124, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199425, - "fileSizeGzip": 66477, - "limit": "67 KB", - "passed": true - } - }, - "4.32.3": { - "../bundlesize/dist/index.html": { - "fileSize": 541, - "fileSizeGzip": 335, - "limit": "2 KB", - "passed": true - }, - "../bundlesize/dist/assets/style.css": { - "fileSize": 45406, - "fileSizeGzip": 7274, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 53606, - "fileSizeGzip": 18123, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199857, - "fileSizeGzip": 66639, - "limit": "67 KB", - "passed": true - } - }, - "4.32.4": { - "../bundlesize/dist/assets/style.css": { - "fileSize": 45406, - "fileSizeGzip": 7274, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 53606, - "fileSizeGzip": 18124, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199857, - "fileSizeGzip": 66639, - "limit": "67 KB", - "passed": true - } - }, - "4.32.5": { - "../bundlesize/dist/assets/style.css": { - "fileSize": 45404, - "fileSizeGzip": 7270, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 53606, - "fileSizeGzip": 18125, - "limit": "18 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199813, - "fileSizeGzip": 66629, - "limit": "67 KB", - "passed": true - } - }, - "4.33.0": { - "../bundlesize/dist/assets/style.css": { - "fileSize": 45404, - "fileSizeGzip": 7270, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 56599, - "fileSizeGzip": 19197, - "limit": "19 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199813, - "fileSizeGzip": 66629, - "limit": "67 KB", - "passed": true - } - }, - "4.34.0": { - "../bundlesize/dist/assets/style.css": { - "fileSize": 45379, - "fileSizeGzip": 7265, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 56721, - "fileSizeGzip": 19227, - "limit": "19 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199813, - "fileSizeGzip": 66629, - "limit": "67 KB", - "passed": true - } - }, - "4.35.0": { - "../bundlesize/dist/assets/style.css": { - "fileSize": 42595, - "fileSizeGzip": 7286, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 60089, - "fileSizeGzip": 19793, - "limit": "20 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199813, - "fileSizeGzip": 66629, - "limit": "67 KB", - "passed": true - } - }, - "4.36.0": { - "../bundlesize/dist/assets/style.css": { - "fileSize": 43504, - "fileSizeGzip": 7464, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 60202, - "fileSizeGzip": 19823, - "limit": "20 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199813, - "fileSizeGzip": 66629, - "limit": "67 KB", - "passed": true - } - }, - "4.37.0": { - "../bundlesize/dist/assets/style.css": { - "fileSize": 43504, - "fileSizeGzip": 7464, - "limit": "8 KB", - "passed": true - }, - "../bundlesize/dist/assets/index.js": { - "fileSize": 60202, - "fileSizeGzip": 19823, - "limit": "20 KB", - "passed": true - }, - "../bundlesize/dist/assets/vendor.js": { - "fileSize": 199813, - "fileSizeGzip": 66629, - "limit": "67 KB", - "passed": true - } - } -} diff --git a/packages/ui-system/README.md b/packages/ui-system/README.md new file mode 100644 index 00000000..1ebe379f --- /dev/null +++ b/packages/ui-system/README.md @@ -0,0 +1,27 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], + tsconfigRootDir: __dirname, + }, +``` + +- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` +- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list diff --git a/packages/ui-system/bundlesize.config.js b/packages/ui-system/bundlesize.config.js new file mode 100644 index 00000000..6587c1fc --- /dev/null +++ b/packages/ui-system/bundlesize.config.js @@ -0,0 +1,22 @@ +const bundlePath = "../bundlesize/dist/system"; +export default { + report: { + header: "## Bundle Size (system)", + previous: "stats/stats.json", + current: "tmp/stats.json", + }, + sizes: [ + { + path: `${bundlePath}/assets/style.css`, + limit: "8 KB", + }, + { + path: `${bundlePath}/assets/index.js`, + limit: "20 KB", + }, + { + path: `${bundlePath}/assets/vendor.js`, + limit: "67 KB", + }, + ], +}; diff --git a/packages/ui-system/lib/buildIcons.js b/packages/ui-system/lib/buildIcons.js new file mode 100644 index 00000000..4b9ab3a6 --- /dev/null +++ b/packages/ui-system/lib/buildIcons.js @@ -0,0 +1,139 @@ +/* global process */ + +import path from "node:path"; +import util from "node:util"; + +import fs from "fs-extra"; + +const config = JSON.parse( + await fs.readFile(path.join(process.cwd(), "lib", "icons", "config.json")), +); + +const iconTemplate = ({ + name, + originalName, + title, + viewBox, + svgData, + copyright, + monotone, +}) => { + const monotoneProp = monotone + ? "" + : "// eslint-disable-next-line @typescript-eslint/no-unused-vars"; + const opacityLine1 = monotone ? "\n\t/* v8 ignore next 1 */" : ""; + const opacityLine2 = monotone + ? `\n\tconst opacity = monotone ? "1" : "0.4";` + : ""; + + return `/** + * This file was automatically generated. + * Please do not edit manually. + * + * To update this file, run \`yarn build:icons\`. + * + * Original name: ${originalName}.svg + * + * ${copyright} + * + */ + +import { SvgIcon } from "../private/SvgIcon/SvgIcon"; +import type { IconsProps } from "./IconsTypes"; + +export const ${name} = ({ + className, + viewBox, + spacing, + title, + ${monotoneProp} + monotone, + ...rest +}: IconsProps) => {${opacityLine1}${opacityLine2} + return ( + + ${svgData} + + ); +}; +`; +}; + +export const upperFirst = (string_) => + string_[0].toUpperCase() + string_.slice(1); + +const generateIcons = async () => { + const readdir = util.promisify(fs.readdir); + const readFile = util.promisify(fs.readFile); + + const svgFolder = path.join(process.cwd(), "lib", "icons", "svg"); + const icons = await readdir(svgFolder); + + await Promise.all( + icons.map(async (icon) => { + const originalName = icon.replace(".svg", ""); + const title = config[originalName]?.title || originalName; + const monotone = config[originalName]?.monotone || false; + const iconName = + config[originalName]?.name || "Icon" + upperFirst(originalName); + + const svg = await readFile(path.join(svgFolder, `${icon}`), "utf8"); + + /** Need to extract the comments from the svg file, including the + * opening and closing tags + */ + const comments = svg.match(//g).join(""); + + /** Need to extract the viewBox from the svg file */ + const viewBox = svg.match(/viewBox="([^"]*)"/)[1]; + + /** Need to extract the content of the svg file between the tags, + * remove any comments, extra white space and fix the closing tags. + */ + const svgData = svg + .match(/]*>(.*)<\/svg>/s)[1] + .replace(comments, "") + .replace(/class="/g, 'className="') + .replace( + /opacity=".4"/g, + monotone ? "opacity={opacity}" : 'opacity="0.4"', + ) + .replace('"/>', '" />') + .trimStart() + .trimEnd(); + + const iconFile = iconTemplate({ + name: iconName, + originalName, + title, + viewBox, + svgData, + copyright: comments.replace("", ""), + monotone, + }); + return fs.outputFile( + path.join( + process.cwd(), + "src", + "components", + "Icons", + `${iconName}.tsx`, + ), + iconFile, + "utf8", + ); + }), + ); +}; + +(async () => { + await generateIcons(); +})(); diff --git a/packages/ui-system/lib/customCSS.ts b/packages/ui-system/lib/customCSS.ts new file mode 100644 index 00000000..0d418e8b --- /dev/null +++ b/packages/ui-system/lib/customCSS.ts @@ -0,0 +1,33 @@ +export const customCSS = { + [`.av-text-input-wrapper label[aria-hidden="true"], + .av-text-area-wrapper label[aria-hidden="true"]`]: { + /* move the label inline */ + transform: "translate(18px, 0) scale(1)", + transformOrigin: "top left", + transition: "var(--av-text-area-wrapper-transition, all 0.2s ease-out)", + }, + '.av-text-input:focus + label[aria-hidden="true"],\n\t.av-text-input:not(:placeholder-shown) + label[aria-hidden="true"],\n\t.av-text-area:focus + label[aria-hidden="true"],\n\t.av-text-area:not(:placeholder-shown) + label[aria-hidden="true"]': + { + transform: + "translate(18px, var(--av-text-area-label, -25px)) scale(0.75)", + }, + + '.av-text-input-simple:focus + label[aria-hidden="true"],\n\t.av-text-input-simple:not(:placeholder-shown) + label[aria-hidden="true"]': + { + transform: + "translate(18px, var(--av-text-area-label, -12px)) scale(0.75)", + }, + + ".av-text-input-helper-text,\n\t.av-text-area-helper-text": { + transform: + "translate(18px, var(--av-text-area-helper-text, 32px))\n\t\t\tscale(0.75)", + transformOrigin: "top left", + }, + ".av-text-input__control--right,\n\t.av-text-area__control--right": { + right: "18px", + }, + "@keyframes blink": { "50%": { fill: "transparent" } }, + ".av-spinner__dot": { animation: "1s blink infinite" }, + ".av-spinner__dot:nth-child(2)": { animationDelay: "250ms" }, + ".av-spinner__dot:nth-child(3)": { animationDelay: "500ms" }, +}; diff --git a/packages/ui-system/lib/icons/config.json b/packages/ui-system/lib/icons/config.json new file mode 100644 index 00000000..f0c069bc --- /dev/null +++ b/packages/ui-system/lib/icons/config.json @@ -0,0 +1,85 @@ +{ + "clone": { + "name": "IconCopy", + "title": "Copy", + "monotone": true + }, + "ellipsis": { + "name": "IconSettings", + "title": "Settings" + }, + "eye": { + "name": "IconShow", + "title": "Show", + "monotone": true + }, + "eye-slash": { + "name": "IconHide", + "title": "Hide", + "monotone": true + }, + "face-smile": { + "name": "IconUser", + "title": "User" + }, + "pen-to-square": { + "name": "IconEdit", + "title": "Edit", + "monotone": true + }, + "square-check": { + "name": "IconCopied", + "title": "Copied" + }, + "trash-can": { + "name": "IconDelete", + "title": "Delete", + "monotone": true + }, + "window-restore": { + "name": "IconRestore", + "title": "Restore", + "monotone": true + }, + "xmark": { + "name": "IconClose", + "title": "Close" + }, + "chart-simple": { + "name": "IconChart", + "title": "Chart", + "monotone": true + }, + "address-card": { + "name": "IconProfile", + "title": "Profile" + }, + "clock-rotate-left": { + "name": "IconHistory", + "title": "History", + "monotone": true + }, + "circle-info": { + "name": "IconInfo", + "title": "Info" + }, + "arrow-up-left-from-circle": { + "name": "IconBack", + "title": "Back", + "monotone": true + }, + "arrow-right": { + "name": "IconNext", + "title": "Next", + "monotone": true + }, + "arrow-left": { + "name": "IconPrevious", + "title": "Previous", + "monotone": true + }, + "github": { + "name": "IconGitHub", + "title": "GitHub" + } +} diff --git a/packages/ui-system/lib/icons/svg/address-card.svg b/packages/ui-system/lib/icons/svg/address-card.svg new file mode 100644 index 00000000..1060903f --- /dev/null +++ b/packages/ui-system/lib/icons/svg/address-card.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/arrow-left.svg b/packages/ui-system/lib/icons/svg/arrow-left.svg new file mode 100644 index 00000000..7368be17 --- /dev/null +++ b/packages/ui-system/lib/icons/svg/arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/ui-system/lib/icons/svg/arrow-right.svg b/packages/ui-system/lib/icons/svg/arrow-right.svg new file mode 100644 index 00000000..44391a8a --- /dev/null +++ b/packages/ui-system/lib/icons/svg/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg b/packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg new file mode 100644 index 00000000..0386e0df --- /dev/null +++ b/packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/chart-simple.svg b/packages/ui-system/lib/icons/svg/chart-simple.svg new file mode 100644 index 00000000..d9dbaa26 --- /dev/null +++ b/packages/ui-system/lib/icons/svg/chart-simple.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/circle-info.svg b/packages/ui-system/lib/icons/svg/circle-info.svg new file mode 100644 index 00000000..c932b2a7 --- /dev/null +++ b/packages/ui-system/lib/icons/svg/circle-info.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/clock-rotate-left.svg b/packages/ui-system/lib/icons/svg/clock-rotate-left.svg new file mode 100644 index 00000000..a0ad8ebe --- /dev/null +++ b/packages/ui-system/lib/icons/svg/clock-rotate-left.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/clone.svg b/packages/ui-system/lib/icons/svg/clone.svg new file mode 100644 index 00000000..08970fd4 --- /dev/null +++ b/packages/ui-system/lib/icons/svg/clone.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/ellipsis.svg b/packages/ui-system/lib/icons/svg/ellipsis.svg new file mode 100644 index 00000000..194feb1a --- /dev/null +++ b/packages/ui-system/lib/icons/svg/ellipsis.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/eye-slash.svg b/packages/ui-system/lib/icons/svg/eye-slash.svg new file mode 100644 index 00000000..ab4e49ac --- /dev/null +++ b/packages/ui-system/lib/icons/svg/eye-slash.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/eye.svg b/packages/ui-system/lib/icons/svg/eye.svg new file mode 100644 index 00000000..bb200c20 --- /dev/null +++ b/packages/ui-system/lib/icons/svg/eye.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/face-smile.svg b/packages/ui-system/lib/icons/svg/face-smile.svg new file mode 100644 index 00000000..896cd01a --- /dev/null +++ b/packages/ui-system/lib/icons/svg/face-smile.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/github.svg b/packages/ui-system/lib/icons/svg/github.svg new file mode 100644 index 00000000..83875d5b --- /dev/null +++ b/packages/ui-system/lib/icons/svg/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui-system/lib/icons/svg/pen-to-square.svg b/packages/ui-system/lib/icons/svg/pen-to-square.svg new file mode 100644 index 00000000..4e199ef8 --- /dev/null +++ b/packages/ui-system/lib/icons/svg/pen-to-square.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/square-check.svg b/packages/ui-system/lib/icons/svg/square-check.svg new file mode 100644 index 00000000..4a08068b --- /dev/null +++ b/packages/ui-system/lib/icons/svg/square-check.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/trash-can.svg b/packages/ui-system/lib/icons/svg/trash-can.svg new file mode 100644 index 00000000..ef1e8a9d --- /dev/null +++ b/packages/ui-system/lib/icons/svg/trash-can.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/window-restore.svg b/packages/ui-system/lib/icons/svg/window-restore.svg new file mode 100644 index 00000000..6995b744 --- /dev/null +++ b/packages/ui-system/lib/icons/svg/window-restore.svg @@ -0,0 +1 @@ + diff --git a/packages/ui-system/lib/icons/svg/xmark.svg b/packages/ui-system/lib/icons/svg/xmark.svg new file mode 100644 index 00000000..185f43df --- /dev/null +++ b/packages/ui-system/lib/icons/svg/xmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui-system/lib/tailwindPlugin.ts b/packages/ui-system/lib/tailwindPlugin.ts new file mode 100644 index 00000000..b00ac054 --- /dev/null +++ b/packages/ui-system/lib/tailwindPlugin.ts @@ -0,0 +1,180 @@ +import typography from "@tailwindcss/typography"; +import { converter } from "culori"; +import plugin from "tailwindcss/plugin"; +import type { Config, OptionalConfig } from "tailwindcss/types/config"; + +import { customCSS } from "./customCSS"; +import { tokens } from "./tokens"; + +type TailwindConfig = { + content: string[]; +} & OptionalConfig; + +const parse = converter("rgb"); + +const dynamicColors = () => { + const result: { [key: string]: string } = {}; + Object.entries(tokens.colors).forEach(([name, color]) => { + const rgb = parse(color); + const variable = `--av-${name}`; + const fallbackValue = rgb + ? `${rgb.r * 255} ${rgb.g * 255} ${rgb.b * 255}` + : "0 0 0"; + result[name] = `var(${variable}, rgb(${fallbackValue} / ))`; + }); + return result; +}; + +const dynamicMargins = () => { + const allowed = [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 44, + 48, 52, 56, 60, 64, 72, 80, 96, + ]; + const margins: string[] = []; + allowed.forEach((num) => { + margins.push(`mt-${num}`); + margins.push(`mr-${num}`); + margins.push(`mb-${num}`); + margins.push(`ml-${num}`); + }); + return margins; +}; + +const myComponentLibraryConfig = { + theme: { + extend: { + colors: dynamicColors(), + typography: ({ theme }: { theme: (arg0: string) => any }) => ({ + DEFAULT: { + css: { + maxWidth: "inherit", + "h1, h2, h3, h4, h5, h6": { + fontFamily: "Open Sans, ui-sans-serif, system-ui, sans-serif", + }, + blockquote: { + borderLeftWidth: "6px", + }, + "blockquote p": { + fontFamily: "Georgia, Cambria, Times New Roman, Times, serif", + }, + li: { + fontSize: "1rem", + }, + pre: { + marginTop: "2rem", + marginBottom: "2rem", + fontSize: "0.875rem", + lineHeight: "1.25rem", + }, + code: { + fontFamily: + 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + }, + }, + }, + light: { + css: { + "--tw-prose-body": tokens.colors["copy-light"], + "--tw-prose-headings": tokens.colors["copy-medium"], + "--tw-prose-lead": tokens.colors["copy-light"], + "--tw-prose-links": tokens.colors["copy-light"], + "--tw-prose-bold": tokens.colors["copy-light"], + "--tw-prose-counters": tokens.colors["copy-medium"], + "--tw-prose-bullets": tokens.colors["copy-medium"], + "--tw-prose-hr": tokens.colors["copy-medium"], + "--tw-prose-quotes": tokens.colors["copy-light"], + "--tw-prose-quote-borders": tokens.colors["copy-light"], + "--tw-prose-captions": tokens.colors["copy-light"], + "--tw-prose-code": tokens.colors["copy-light"], + "--tw-prose-pre-code": tokens.colors["copy-lighter"], + "--tw-prose-pre-bg": tokens.colors["surface-medium"], + "--tw-prose-kbd": tokens.colors["copy-light"], + li: { + color: tokens.colors["copy-light"], + }, + }, + }, + lighter: { + css: { + "--tw-prose-body": tokens.colors["copy-lighter"], + "--tw-prose-headings": tokens.colors["copy-light"], + "--tw-prose-lead": tokens.colors["copy-lighter"], + "--tw-prose-links": tokens.colors["copy-lighter"], + "--tw-prose-bold": tokens.colors["copy-lighter"], + "--tw-prose-counters": tokens.colors["copy-light"], + "--tw-prose-bullets": tokens.colors["copy-light"], + "--tw-prose-hr": tokens.colors["copy-light"], + "--tw-prose-quotes": tokens.colors["copy-lighter"], + "--tw-prose-quote-borders": tokens.colors["copy-lighter"], + "--tw-prose-captions": tokens.colors["copy-lighter"], + "--tw-prose-code": tokens.colors["copy-lighter"], + "--tw-prose-pre-code": tokens.colors["copy-lighter"], + "--tw-prose-pre-bg": tokens.colors["surface-dark"], + "--tw-prose-kbd": tokens.colors["copy-lighter"], + li: { + color: tokens.colors["copy-lighter"], + }, + }, + }, + dark: { + css: { + "--tw-prose-body": theme("colors.slate[800]"), + "--tw-prose-headings": theme("colors.slate[900]"), + "--tw-prose-lead": theme("colors.slate[700]"), + "--tw-prose-links": theme("colors.slate[900]"), + "--tw-prose-bold": theme("colors.slate[900]"), + "--tw-prose-counters": theme("colors.slate[600]"), + "--tw-prose-bullets": theme("colors.slate[400]"), + "--tw-prose-hr": theme("colors.slate[300]"), + "--tw-prose-quotes": theme("colors.slate[900]"), + "--tw-prose-quote-borders": theme("colors.slate[300]"), + "--tw-prose-captions": theme("colors.slate[700]"), + "--tw-prose-code": theme("colors.slate[900]"), + + "--tw-prose-pre-code": tokens.colors["copy-lighter"], + "--tw-prose-pre-bg": tokens.colors["surface-medium"], + + // "--tw-prose-pre-code": theme("colors.slate[100]"), + // "--tw-prose-pre-bg": theme("colors.slate[900]"), + + "--tw-prose-kbd": theme("colors.slate[800]"), + li: { + color: tokens.colors["copy-dark"], + }, + }, + }, + }), + }, + }, +}; + +const tailwindContentPath = [ + (__dirname + "/**/*.{js,ts,jsx,tsx}").replace("ui-plugins", "ui-components"), +]; + +const tailwindPlugins = [ + typography, + plugin(function ({ addUtilities }) { + addUtilities(customCSS); + }, myComponentLibraryConfig), +]; + +const tailwindSafelist = [...dynamicMargins()]; + +export const twPlugin = { + content: tailwindContentPath, + safelist: tailwindSafelist, + plugins: tailwindPlugins, + + merge: (config: TailwindConfig) => { + const safelist = tailwindSafelist; + const content = tailwindContentPath; + const plugins = tailwindPlugins; + + config.safelist = [...(config.safelist || []), ...safelist]; + config.content = [...(config.content || []), ...content]; + config.plugins = [...(config.plugins || []), ...plugins]; + + return config as Config; + }, +}; diff --git a/packages/ui-system/lib/tokens.ts b/packages/ui-system/lib/tokens.ts new file mode 100644 index 00000000..122cecc5 --- /dev/null +++ b/packages/ui-system/lib/tokens.ts @@ -0,0 +1,79 @@ +import colors from "tailwindcss/colors"; + +const errorColorDark = "#d80000"; +const errorColorLight = "#ff3f3f"; + +export const tokens = { + colors: { + /** + * Action tokens. + */ + "action-dark": colors.slate[900], + "action-dark-hover": colors.slate[700], + "action-dark-active": colors.slate[600], + + "action-light": colors.slate[500], + "action-light-hover": colors.slate[600], + "action-light-active": colors.slate[700], + + /** + * Surface tokens. + */ + "surface-dark": colors.slate[900], + "surface-medium": colors.slate[500], + "surface-light": colors.slate[300], + "surface-lighter": colors.slate[200], + "surface-accent": "#0B93F6", + + /** + * Typography tokens. + */ + "copy-dark": colors.slate[900], + "copy-dark-hover": colors.slate[900], + "copy-dark-active": colors.slate[900], + + "copy-medium": colors.slate[400], + "copy-medium-hover": colors.slate[400], + "copy-medium-active": colors.slate[400], + + "copy-light": colors.slate[200], + "copy-light-hover": colors.slate[200], + "copy-light-active": colors.slate[400], + + "copy-lighter": "#ffffff", + "copy-lighter-hover": "#ffffff", + "copy-lighter-active": "#ffffff", + + "copy-error-dark": errorColorDark, + "copy-error-light": errorColorLight, + + /** + * Border tokens. + */ + "border-dark": colors.slate[900], + "border-medium": colors.slate[400], + "border-light": colors.slate[300], + + "border-white": "#ffffff", + "border-error-dark": errorColorDark, + "border-error-light": errorColorLight, + + /** + * Focus tokens. + */ + "focus-dark": colors.slate[900], + "focus-light": colors.slate[300], + "focus-error-dark": errorColorDark, + "focus-error-light": errorColorLight, + + /** + * Table tokens + */ + "table-dark": colors.gray[700], + "table-dark-odd": colors.gray[800], + "table-dark-even": colors.gray[900], + "table-light": colors.gray[100], + "table-light-odd": colors.gray[200], + "table-light-even": colors.gray[300], + }, +}; diff --git a/packages/ui-system/package.json b/packages/ui-system/package.json new file mode 100644 index 00000000..b81ebea7 --- /dev/null +++ b/packages/ui-system/package.json @@ -0,0 +1,59 @@ +{ + "name": "@versini/ui-system", + "version": "0.0.0", + "license": "MIT", + "author": "Arno Versini", + "publishConfig": { + "access": "public" + }, + "homepage": "https://github.com/aversini/ui-components", + "repository": { + "type": "git", + "url": "git@github.com:aversini/ui-components.git" + }, + "type": "module", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build:check": "tsc", + "build:js": "vite build", + "build:types": "tsup", + "build": "npm-run-all --serial clean build:check build:js build:types", + "clean": "rimraf dist tmp", + "dev:js": "vite build --watch --mode development", + "dev:types": "tsup --watch src", + "dev": "npm-run-all clean --parallel dev:js dev:types", + "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color", + "start": "static-server dist --port 5173", + "stats:pr": "bundlesize -c bundlesize.config.js -p \"$npm_package_version\" -o tmp/stats.json --silent", + "stats:release": "bundlesize -c bundlesize.config.js -p \"$npm_package_version\" -o stats/stats.json --silent", + "stats:report": "bundlesize -c bundlesize.config.js --type report -o tmp/pr-stats.md --silent", + "stats": "bundlesize -c bundlesize.config.js -p \"$npm_package_version\"", + "test:coverage:ui": "vitest --coverage --ui", + "test:coverage": "vitest run --coverage", + "test:watch": "vitest", + "test": "vitest run" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "dependencies": { + "@tailwindcss/typography": "0.5.10", + "@versini/ui-components": "workspace:../ui-components", + "clsx": "2.1.0", + "fast-equals": "5.0.1", + "micro-memoize": "4.1.2", + "tailwindcss": "3.4.1" + }, + "sideEffects": [ + "**/*.css" + ] +} diff --git a/packages/ui-system/postcss.config.cjs b/packages/ui-system/postcss.config.cjs new file mode 100644 index 00000000..cfcbf3ac --- /dev/null +++ b/packages/ui-system/postcss.config.cjs @@ -0,0 +1,7 @@ +/* eslint-disable no-undef */ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/packages/ui-system/src/__tests__/utilities.test.ts b/packages/ui-system/src/__tests__/utilities.test.ts new file mode 100644 index 00000000..34b4c4ac --- /dev/null +++ b/packages/ui-system/src/__tests__/utilities.test.ts @@ -0,0 +1,9 @@ +import { customCSS, tokens, twPlugin } from "../utilities"; + +describe("utilities", () => { + it("should work", () => { + expect(tokens.colors).toBeDefined(); + expect(customCSS).toBeDefined(); + expect(twPlugin).toBeDefined(); + }); +}); diff --git a/packages/ui-system/src/common/__tests__/helpers.ts b/packages/ui-system/src/common/__tests__/helpers.ts new file mode 100644 index 00000000..88f27add --- /dev/null +++ b/packages/ui-system/src/common/__tests__/helpers.ts @@ -0,0 +1,28 @@ +/** + * This function checks if the provided HTMLElement has + * all the classes specified in the `classes` array. + * + * It is designed to be used in Jest tests ONLY. + * + * @param {HTMLElement} element - The element to check. + * @param {string[]} classes - An array of class names that the element is expected to have. + **/ +export const expectToHaveClasses = ( + element: HTMLElement | Element, + classes: string[], +) => { + const elementClasses = new Set(element.className.split(" ")); + classes.sort().forEach((expectedClass) => { + expect(Array.from(elementClasses)).toContain(expectedClass); + }); +}; + +export const expectToHaveStyles = ( + element: HTMLElement, + styles: Record, +) => { + const elementStyles = getComputedStyle(element); + Object.entries(styles).forEach(([property, value]) => { + expect(elementStyles.getPropertyValue(property)).toBe(value); + }); +}; diff --git a/packages/ui-system/src/common/__tests__/utilities.test.tsx b/packages/ui-system/src/common/__tests__/utilities.test.tsx new file mode 100644 index 00000000..96749738 --- /dev/null +++ b/packages/ui-system/src/common/__tests__/utilities.test.tsx @@ -0,0 +1,69 @@ +import { describe, expect, it } from "vitest"; + +import { getSpacing, isEmpty, truncate } from "../utilities"; + +describe("Non-DOM tests", () => { + describe("getSpacing", () => { + it("should return the correct spacing class", () => { + expect(getSpacing(123)).toBe("m-123"); + expect(getSpacing("123")).toBe("m-123"); + + expect(getSpacing({ t: 123 })).toBe("mt-123"); + expect(getSpacing({ r: 123 })).toBe("mr-123"); + expect(getSpacing({ b: 123 })).toBe("mb-123"); + expect(getSpacing({ l: 123 })).toBe("ml-123"); + expect(getSpacing({ t: 123, r: 456 })).toBe("mt-123 mr-456"); + expect(getSpacing({ t: 123, b: 456 })).toBe("mt-123 mb-456"); + expect(getSpacing({ t: 123, l: 456 })).toBe("mt-123 ml-456"); + expect(getSpacing({ r: 123, b: 456 })).toBe("mr-123 mb-456"); + expect(getSpacing({ r: 123, l: 456 })).toBe("mr-123 ml-456"); + expect(getSpacing({ b: 123, l: 456 })).toBe("mb-123 ml-456"); + }); + }); + + describe("truncate", () => { + it("should truncate according to plan", () => { + const STR = "hello world"; + expect(truncate(STR, 5).truncatedString).toBe("he..."); + expect(truncate(STR, 7).truncatedString).toBe("hell..."); + expect(truncate(STR, 10).truncatedString).toBe("hello w..."); + expect(truncate(STR, 11).truncatedString).toBe(STR); + expect(truncate(STR, 12).truncatedString).toBe(STR); + }); + }); + + describe("when testing for isEmpty", () => { + it("should tell if the value is empty or not", () => { + const slice = Array.prototype.slice; + expect(isEmpty()).toBe(true); + expect(isEmpty({})).toBe(true); + expect(isEmpty(null)).toBe(true); + expect(isEmpty(true)).toBe(true); + expect(isEmpty(666)).toBe(true); + expect(isEmpty(slice)).toBe(true); + expect(isEmpty(NaN)).toBe(true); + expect(isEmpty(/x/)).toBe(true); + expect(isEmpty(Symbol("a"))).toBe(true); + + expect(isEmpty([0])).toBe(false); + expect(isEmpty([1, 2, 3])).toBe(false); + expect(isEmpty("abc")).toBe(false); + expect(isEmpty({ a: 0 })).toBe(false); + expect(isEmpty({ length: 0 })).toBe(false); + + function Foo() {} + Foo.prototype = { constructor: Foo }; + expect(isEmpty(Foo.prototype)).toBe(false); + + const map = new Map(); + expect(isEmpty(map)).toBe(true); + map.set("key", { bla: 1, blabla: 2 }); + expect(isEmpty(map)).toBe(false); + + const set = new Set(); + expect(isEmpty(set)).toBe(true); + set.add(42); + expect(isEmpty(set)).toBe(false); + }); + }); +}); diff --git a/packages/ui-system/src/common/constants.ts b/packages/ui-system/src/common/constants.ts new file mode 100644 index 00000000..ea553fe7 --- /dev/null +++ b/packages/ui-system/src/common/constants.ts @@ -0,0 +1,33 @@ +export const BUTTON_CLASSNAME = "av-button"; +export const FOOTER_CLASSNAME = "av-footer"; +export const MAIN_CLASSNAME = "av-main"; +export const HEADER_CLASSNAME = "av-header"; + +export const TEXT_INPUT_CLASSNAME = "av-text-input"; +export const TEXT_INPUT_SIMPLE_CLASSNAME = "av-text-input-simple"; +export const TEXT_INPUT_WRAPPER_CLASSNAME = "av-text-input-wrapper"; +export const TEXT_INPUT_HELPER_TEXT_CLASSNAME = "av-text-input-helper-text"; +export const TEXT_INPUT_CONTROL_RIGHT_CLASSNAME = + "av-text-input__control--right"; + +export const TEXT_AREA_CLASSNAME = "av-text-area"; +export const TEXT_AREA_WRAPPER_CLASSNAME = "av-text-area-wrapper"; +export const TEXT_AREA_HELPER_TEXT_CLASSNAME = "av-text-area-helper-text"; +export const TEXT_AREA_CONTROL_RIGHT_CLASSNAME = "av-text-area__control--right"; + +export const FLEXGRID_CLASSNAME = "av-flexgrid"; +export const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item"; + +export const CARD_CLASSNAME = "av-card"; + +export const SPINNER_CLASSNAME = "av-spinner"; + +export const TOGGLE_CLASSNAME = "av-toggle"; + +export const PANEL_CLASSNAME = "av-panel"; +export const MESSAGEBOX_CLASSNAME = "av-messagebox"; + +export const BUBBLE_CLASSNAME = "av-bubble"; + +export const FLEXGRID_MAX_COLUMNS = 12; +export const FLEXGRID_GAP_RATIO = 0.25; diff --git a/packages/ui-system/src/common/index.d.ts b/packages/ui-system/src/common/index.d.ts new file mode 100644 index 00000000..c7b57e3b --- /dev/null +++ b/packages/ui-system/src/common/index.d.ts @@ -0,0 +1,23 @@ +export type SpacingType = + | undefined + | string + | number + | { + b?: number; + l?: number; + r?: number; + t?: number; + }; + +/** + * Custom spacing for a component. + * @example + * ```tsx + * + * + * + * ``` + */ +export type SpacingProps = { + spacing?: SpacingType; +}; diff --git a/packages/ui-system/src/common/utilities.ts b/packages/ui-system/src/common/utilities.ts new file mode 100644 index 00000000..04041592 --- /dev/null +++ b/packages/ui-system/src/common/utilities.ts @@ -0,0 +1,144 @@ +import { deepEqual } from "fast-equals"; +import memoize from "micro-memoize"; + +import type { SpacingType } from "."; + +const hasOwnProperty = Object.prototype.hasOwnProperty; +const toString = Object.prototype.toString; +const objectProto = Object.prototype; + +export const isProd = process.env.NODE_ENV === "production"; +export const isDev = !isProd; + +/** + * Memoize function calls with arguments that are + * complex objects (hence "deep"). Do not use for + * standard types. + * @param {Function} fct - the function to optimize. + * @returns the optimized function. + */ +export function memoizeDeep(fct: any) { + return memoize(fct, { isEqual: deepEqual }); +} + +/** + * Checks if `value` is a valid array-like length. + */ +function isLength(value: number) { + return ( + typeof value === "number" && + value > -1 && + value % 1 === 0 && + value <= 9007199254740991 + ); +} + +/** + * Checks if `value` is likely a prototype object. + */ +function isPrototype(value: unknown) { + const Ctor = value && value.constructor; + const proto = (typeof Ctor === "function" && Ctor.prototype) || objectProto; + return value === proto; +} + +/** + * Checks if `value` is an empty object, collection, map, or set. + * Objects are considered empty if they have no own enumerable + * string keyed properties. + */ +export const isEmpty = (value?: any) => { + if (value === null || typeof value === "undefined") { + return true; + } + + if ( + typeof value !== "function" && + isLength(value.length) && + (Array.isArray(value) || + typeof value === "string" || + typeof value.splice === "function") + ) { + return !value.length; + } + + const tag = toString.call(value); + if (tag === "[object Map]" || tag === "[object Set]") { + return !value.size; + } + + if (isPrototype(value)) { + return !Object.keys(value).length; + } + + for (const key in value) { + /* istanbul ignore next */ + if (hasOwnProperty.call(value, key)) { + return false; + } + } + return true; +}; + +export const truncate = (fullString: string, maxLength: number) => { + const ELLIPSIS = "..."; + const ELLIPSIS_LENGTH = ELLIPSIS.length; + const truncatedString = + maxLength > ELLIPSIS_LENGTH && fullString.length > maxLength + ? fullString.substring(0, maxLength - ELLIPSIS_LENGTH) + ELLIPSIS + : fullString; + + return { + truncatedString, + fullString, + }; +}; + +/** + * This method returns a string that can be used as a tailwind class relying + * on margins definitions (m, mt, mb, etc.). + * Please refer to: https://tailwindcss.com/docs/margin + * + * It accepts a number, a string or an object. + * If a number is passed, it will be converted to a string and prefixed with "m-". + * If a string is passed, it will be prefixed with "m-". + * If an object is passed, it will be converted to a string like this: + * { t: 4, r: 1, b: 3, l: 5} => "mt-4 mr-1 mb-3 ml-5" + * + */ +export const getSpacing = memoizeDeep((spacing: SpacingType): string => { + let spacingClass = ""; + /** + * In this case, spacing is a number or a string. For example: + * spacing = 4 + * which will be converted to: + * "m-4" + */ + if (typeof spacing === "number" || typeof spacing === "string") { + spacingClass = "m-" + spacing; + } else { + /** + * in this case spacing is an object like this: + * spacing = { t: 4, r: 1, b: 3, l: 5} + * All keys are optional. + * The following lines will transform this object into a string like this: + * "mt-4 mr-1 mb-3 ml-5" + */ + const classes = []; + if (spacing?.t !== undefined) { + classes.push(`mt-${spacing.t}`); + } + if (spacing?.r !== undefined) { + classes.push(`mr-${spacing.r}`); + } + if (spacing?.b !== undefined) { + classes.push(`mb-${spacing.b}`); + } + if (spacing?.l !== undefined) { + classes.push(`ml-${spacing.l}`); + } + spacingClass = classes.join(" "); + } + + return spacingClass; +}); diff --git a/packages/ui-components/src/components/Flexgrid/Flexgrid.tsx b/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx similarity index 100% rename from packages/ui-components/src/components/Flexgrid/Flexgrid.tsx rename to packages/ui-system/src/components/Flexgrid/Flexgrid.tsx diff --git a/packages/ui-components/src/components/Flexgrid/FlexgridContext.ts b/packages/ui-system/src/components/Flexgrid/FlexgridContext.ts similarity index 100% rename from packages/ui-components/src/components/Flexgrid/FlexgridContext.ts rename to packages/ui-system/src/components/Flexgrid/FlexgridContext.ts diff --git a/packages/ui-components/src/components/Flexgrid/FlexgridItem.tsx b/packages/ui-system/src/components/Flexgrid/FlexgridItem.tsx similarity index 100% rename from packages/ui-components/src/components/Flexgrid/FlexgridItem.tsx rename to packages/ui-system/src/components/Flexgrid/FlexgridItem.tsx diff --git a/packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts b/packages/ui-system/src/components/Flexgrid/FlexgridTypes.d.ts similarity index 100% rename from packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts rename to packages/ui-system/src/components/Flexgrid/FlexgridTypes.d.ts diff --git a/packages/ui-components/src/components/Flexgrid/__tests__/Flexgrid.test.tsx b/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx similarity index 100% rename from packages/ui-components/src/components/Flexgrid/__tests__/Flexgrid.test.tsx rename to packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx diff --git a/packages/ui-components/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx b/packages/ui-system/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx similarity index 97% rename from packages/ui-components/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx rename to packages/ui-system/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx index c1d2e5df..270e8523 100644 --- a/packages/ui-components/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx +++ b/packages/ui-system/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx @@ -1,10 +1,11 @@ import { render } from "@testing-library/react"; +import { Button } from "@versini/ui-components"; import { expectToHaveClasses, expectToHaveStyles, } from "../../../common/__tests__/helpers"; -import { Button, Flexgrid, FlexgridItem } from "../.."; +import { Flexgrid, FlexgridItem } from "../.."; describe("FlexgridItem (exceptions)", () => { it("should be able to require/import from root", () => { diff --git a/packages/ui-components/src/components/Flexgrid/utilities.ts b/packages/ui-system/src/components/Flexgrid/utilities.ts similarity index 100% rename from packages/ui-components/src/components/Flexgrid/utilities.ts rename to packages/ui-system/src/components/Flexgrid/utilities.ts diff --git a/packages/ui-components/src/components/ThemeProvider/ThemeProvider.tsx b/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx similarity index 100% rename from packages/ui-components/src/components/ThemeProvider/ThemeProvider.tsx rename to packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx diff --git a/packages/ui-components/src/components/ThemeProvider/ThemeProviderTypes.d.ts b/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts similarity index 100% rename from packages/ui-components/src/components/ThemeProvider/ThemeProviderTypes.d.ts rename to packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts diff --git a/packages/ui-components/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx b/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx similarity index 100% rename from packages/ui-components/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx rename to packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx diff --git a/packages/ui-system/src/components/index.ts b/packages/ui-system/src/components/index.ts new file mode 100644 index 00000000..11030475 --- /dev/null +++ b/packages/ui-system/src/components/index.ts @@ -0,0 +1,5 @@ +import { Flexgrid } from "./Flexgrid/Flexgrid"; +import { FlexgridItem } from "./Flexgrid/FlexgridItem"; +import { ThemeProvider } from "./ThemeProvider/ThemeProvider"; + +export { Flexgrid, FlexgridItem, ThemeProvider }; diff --git a/packages/ui-system/src/index.css b/packages/ui-system/src/index.css new file mode 100644 index 00000000..b5c61c95 --- /dev/null +++ b/packages/ui-system/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/ui-system/src/style.ts b/packages/ui-system/src/style.ts new file mode 100644 index 00000000..3a29aed1 --- /dev/null +++ b/packages/ui-system/src/style.ts @@ -0,0 +1 @@ +import "./index.css"; diff --git a/packages/ui-system/src/utilities.ts b/packages/ui-system/src/utilities.ts new file mode 100644 index 00000000..c9694325 --- /dev/null +++ b/packages/ui-system/src/utilities.ts @@ -0,0 +1,5 @@ +import { customCSS } from "../lib/customCSS"; +import { twPlugin } from "../lib/tailwindPlugin"; +import { tokens } from "../lib/tokens"; + +export { customCSS, tokens, twPlugin }; diff --git a/packages/ui-system/src/vite-env.d.ts b/packages/ui-system/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/packages/ui-system/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/ui-system/tailwind.config.js b/packages/ui-system/tailwind.config.js new file mode 100644 index 00000000..0e0fb6e5 --- /dev/null +++ b/packages/ui-system/tailwind.config.js @@ -0,0 +1,7 @@ +/** @type {import('tailwindcss').Config} */ + +import { twPlugin } from "./lib/tailwindPlugin"; + +export default twPlugin.merge({ + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], +}); diff --git a/packages/ui-system/tsconfig.json b/packages/ui-system/tsconfig.json new file mode 100644 index 00000000..ffbdf148 --- /dev/null +++ b/packages/ui-system/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "types": ["vitest/globals", "@testing-library/jest-dom"], + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/packages/ui-system/tsconfig.node.json b/packages/ui-system/tsconfig.node.json new file mode 100644 index 00000000..f7d9f9ea --- /dev/null +++ b/packages/ui-system/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["./vite.config.ts", "./vitest.setup.ts"] +} diff --git a/packages/ui-system/tsup.config.ts b/packages/ui-system/tsup.config.ts new file mode 100644 index 00000000..e58184ad --- /dev/null +++ b/packages/ui-system/tsup.config.ts @@ -0,0 +1,13 @@ +import { defineConfig } from "tsup"; + +export default defineConfig({ + format: "esm", + entry: { + index: "src/components/index.ts", + utilities: "src/utilities.ts", + }, + outDir: "dist", + dts: { + only: true, + }, +}); diff --git a/packages/ui-system/vite.config.ts b/packages/ui-system/vite.config.ts new file mode 100644 index 00000000..d9169dd8 --- /dev/null +++ b/packages/ui-system/vite.config.ts @@ -0,0 +1,114 @@ +import path from "node:path"; +import { resolve } from "node:path"; +import { fileURLToPath } from "node:url"; + +import fs from "fs-extra"; +import { glob } from "glob"; +import { defineConfig } from "vite"; + +import { externalDependencies } from "../../configuration/vite.common"; + +const packageJson = fs.readJSONSync("package.json"); +const copyrightYear = new Date(Date.now()).getFullYear(); +const buildTime = new Date() + .toLocaleString("en-US", { + timeZone: "America/New_York", + timeZoneName: "short", + year: "numeric", + month: "2-digit", + day: "2-digit", + hour: "2-digit", + minute: "2-digit", + }) + .replace(/,/g, ""); +const banner = `/*! + ${packageJson.name} v${packageJson.version} + © ${copyrightYear} gizmette.com +*/ +try { + if (!window.__VERSINI_UI_SYSTEM__) { + window.__VERSINI_UI_SYSTEM__ = { + version: "${packageJson.version}", + buildTime: "${buildTime}", + homepage: "${packageJson.homepage}", + license: "${packageJson.license}", + }; + } +} catch (error) { + // nothing to declare officer +} +`; + +export default defineConfig(({ mode }) => { + const isDev = mode === "development"; + /** + * Build a list of public files, which means all files in the + * src/components/ComponentName folders. + * Everything else will be moved to the chunk folder. + */ + const input = isDev + ? {} + : Object.fromEntries( + glob + .sync("src/**/*.{ts,tsx}") + .filter((file) => { + return file.match( + /src\/components\/[A-Z][a-zA-Z]*\/[A-Z][a-zA-Z]*\.tsx/, + ) + ? file + : null; + }) + .map((file) => { + return [ + // This remove `src/` as well as the file extension from each + // file, so e.g. src/nested/foo.js becomes nested/foo + path.relative( + "src", + file.slice(0, file.length - path.extname(file).length), + ), + // This expands the relative paths to absolute paths, so e.g. + // src/nested/foo becomes /project/src/nested/foo.js + fileURLToPath(new URL(file, import.meta.url)), + ]; + }), + ); + + return { + build: { + copyPublicDir: false, + lib: { + entry: resolve(__dirname, "src/components/index.ts"), + formats: ["es"], + name: "UIComponents", + }, + rollupOptions: { + input: { + index: resolve(__dirname, "src/components/index.ts"), + style: resolve(__dirname, "src/style.ts"), + utilities: resolve(__dirname, "src/utilities.ts"), + ...input, + }, + treeshake: "smallest", + external: externalDependencies, + output: { + compact: true, + minifyInternalExports: false, + assetFileNames: "style[extname]", + entryFileNames: "[name].js", + chunkFileNames: "chunks/[name].[hash].js", + banner: (module) => { + if (module?.facadeModuleId?.endsWith("src/components/index.ts")) { + return banner; + } + }, + }, + }, + }, + esbuild: { + supported: { + "top-level-await": true, + }, + }, + plugins: [], + }; +}); diff --git a/packages/ui-system/vitest.config.ts b/packages/ui-system/vitest.config.ts new file mode 100644 index 00000000..10f38968 --- /dev/null +++ b/packages/ui-system/vitest.config.ts @@ -0,0 +1,28 @@ +/// + +import { defineConfig, mergeConfig } from "vitest/config"; + +import viteConfig from "./vite.config"; + +export default defineConfig((configEnv) => + mergeConfig( + viteConfig(configEnv), + defineConfig({ + test: { + globals: true, + setupFiles: ["./vitest.setup.ts"], + environment: "happy-dom", + coverage: { + include: ["src/**/*.ts", "src/**/*.tsx", "!src/style.ts"], + provider: "v8", + thresholds: { + statements: 100, + branches: 100, + functions: 100, + lines: 100, + }, + }, + }, + }), + ), +); diff --git a/packages/ui-system/vitest.setup.ts b/packages/ui-system/vitest.setup.ts new file mode 100644 index 00000000..b2e2ca5a --- /dev/null +++ b/packages/ui-system/vitest.setup.ts @@ -0,0 +1,19 @@ +/* eslint-disable no-console */ + +import "@testing-library/jest-dom/vitest"; + +import util from "node:util"; + +const originalConsoleError = console.error; +console.error = (...args: any) => { + const message = util.format(...args); + if ( + /(Warning: validateDOMNesting|Invalid prop|Failed prop type|React does not recognize|Unknown event handler property)/gi.test( + message, + ) + ) { + throw new Error(message); + } else { + originalConsoleError.apply(console, [...args]); + } +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 427cd243..c3631f52 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: '@versini/ui-hooks': specifier: workspace:../ui-hooks version: link:../ui-hooks + '@versini/ui-system': + specifier: workspace:../ui-system + version: link:../ui-system react: specifier: 18.2.0 version: 18.2.0 @@ -44,6 +47,9 @@ importers: '@versini/ui-components': specifier: workspace:../ui-components version: link:../ui-components + '@versini/ui-system': + specifier: workspace:../ui-system + version: link:../ui-system clsx: specifier: 2.1.0 version: 2.1.0 @@ -59,7 +65,7 @@ importers: devDependencies: '@ladle/react': specifier: 4.0.2 - version: 4.0.2(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3) + version: 4.0.2(@types/react@18.2.58)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3) packages/eslint-plugin-client: dependencies: @@ -107,6 +113,34 @@ importers: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + packages/ui-system: + dependencies: + '@tailwindcss/typography': + specifier: 0.5.10 + version: 0.5.10(tailwindcss@3.4.1) + '@versini/ui-components': + specifier: workspace:../ui-components + version: link:../ui-components + clsx: + specifier: 2.1.0 + version: 2.1.0 + fast-equals: + specifier: 5.0.1 + version: 5.0.1 + micro-memoize: + specifier: 4.1.2 + version: 4.1.2 + tailwindcss: + specifier: 3.4.1 + version: 3.4.1 + devDependencies: + react: + specifier: 18.2.0 + version: 18.2.0 + react-dom: + specifier: 18.2.0 + version: 18.2.0(react@18.2.0) + packages: /@aashutoshrathi/word-wrap@1.2.6: @@ -805,7 +839,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@ladle/react@4.0.2(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3): + /@ladle/react@4.0.2(@types/react@18.2.58)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3): resolution: {integrity: sha512-SnYniR/U7kJX1Zh199jhjxqiFa5e5eA8chuX6uYEZYAUtCCY/hQqGr7/7Grr0j6Q4FYu9iQyyV2K1NJKDdUZIw==} engines: {node: '>=18.0.0'} hasBin: true @@ -822,7 +856,7 @@ packages: '@babel/types': 7.23.9 '@ladle/react-context': 1.0.1(react-dom@18.2.0)(react@18.2.0) '@mdx-js/mdx': 3.0.1 - '@mdx-js/react': 3.0.1(@types/react@18.2.55)(react@18.2.0) + '@mdx-js/react': 3.0.1(@types/react@18.2.58)(react@18.2.0) '@vitejs/plugin-react': 4.2.1(vite@5.1.0) '@vitejs/plugin-react-swc': 3.6.0(vite@5.1.0) axe-core: 4.8.3 @@ -976,14 +1010,14 @@ packages: - supports-color dev: true - /@mdx-js/react@3.0.1(@types/react@18.2.55)(react@18.2.0): + /@mdx-js/react@3.0.1(@types/react@18.2.58)(react@18.2.0): resolution: {integrity: sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==} peerDependencies: '@types/react': '>=16' react: '>=16' dependencies: '@types/mdx': 2.0.11 - '@types/react': 18.2.55 + '@types/react': 18.2.58 react: 18.2.0 dev: true @@ -2268,14 +2302,6 @@ packages: '@types/react': 18.2.58 dev: true - /@types/react@18.2.55: - resolution: {integrity: sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==} - dependencies: - '@types/prop-types': 15.7.11 - '@types/scheduler': 0.16.8 - csstype: 3.1.3 - dev: true - /@types/react@18.2.58: resolution: {integrity: sha512-TaGvMNhxvG2Q0K0aYxiKfNDS5m5ZsoIBBbtfUorxdH4NGSXIlYvZxLJI+9Dd3KjeB3780bciLyAb7ylO8pLhPw==} dependencies: diff --git a/release-please-config.json b/release-please-config.json index f25d3b4b..6438cb8a 100644 --- a/release-please-config.json +++ b/release-please-config.json @@ -2,6 +2,7 @@ "packages": { "packages/eslint-plugin-client": {}, "packages/ui-components": {}, - "packages/ui-hooks": {} + "packages/ui-hooks": {}, + "packages/ui-system": {} } } From b0d15cb336d72e82c838a0e24f938f55c7f9fe5c Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 19:45:07 -0500 Subject: [PATCH 02/11] adding empty stats --- packages/ui-components/stats/stats.json | 1 + packages/ui-system/stats/stats.json | 1 + 2 files changed, 2 insertions(+) create mode 100644 packages/ui-components/stats/stats.json create mode 100644 packages/ui-system/stats/stats.json diff --git a/packages/ui-components/stats/stats.json b/packages/ui-components/stats/stats.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/packages/ui-components/stats/stats.json @@ -0,0 +1 @@ +{} diff --git a/packages/ui-system/stats/stats.json b/packages/ui-system/stats/stats.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/packages/ui-system/stats/stats.json @@ -0,0 +1 @@ +{} From aba8081a6ee477c2eba91b7c35883885803a6ecb Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 19:52:04 -0500 Subject: [PATCH 03/11] Update pull-requests.yml --- .github/workflows/pull-requests.yml | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml index 8c2a864a..2e39d78e 100644 --- a/.github/workflows/pull-requests.yml +++ b/.github/workflows/pull-requests.yml @@ -33,12 +33,9 @@ jobs: if: always() with: refresh-message-position: true - message-path: packages/ui-components/tmp/pr-stats.md - - uses: mshick/add-pr-comment@v2 - if: always() - with: - refresh-message-position: true - message-path: packages/ui-system/tmp/pr-stats.md + message-path: | + packages/ui-components/tmp/pr-stats.md + packages/ui-system/tmp/pr-stats.md inspect: if: ${{ always() }} From fefccd1eb6e4cc3b73f82023da821af925013bee Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 19:58:36 -0500 Subject: [PATCH 04/11] Update vite.system.config.ts --- packages/bundlesize/vite.system.config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bundlesize/vite.system.config.ts b/packages/bundlesize/vite.system.config.ts index 662c35e1..fb692117 100644 --- a/packages/bundlesize/vite.system.config.ts +++ b/packages/bundlesize/vite.system.config.ts @@ -6,7 +6,7 @@ import fs from "fs-extra"; import { defineConfig } from "vite"; const VENDOR_CHUNK = "vendorChunk"; -const packageJson = fs.readJSONSync("../ui-components/package.json"); +const packageJson = fs.readJSONSync("../ui-system/package.json"); const prodDependencies = Object.keys(packageJson.dependencies).filter( (dependency) => dependency !== "react" && @@ -29,11 +29,11 @@ export default defineConfig({ }, }, build: { - outDir: "dist/components", + outDir: "dist/system", emptyOutDir: false, rollupOptions: { input: { - index: resolve(__dirname, "ui-components", "index.html"), + index: resolve(__dirname, "ui-system", "index.html"), }, output: { assetFileNames: "assets/style[extname]", From 2b741fbedb7bc39cdf3e595631f39ee6ca6441c0 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 20:06:35 -0500 Subject: [PATCH 05/11] moving tw plugin up --- .../ui-components/lib => lib}/customCSS.ts | 0 .../lib => lib}/tailwindPlugin.ts | 0 {packages/ui-components/lib => lib}/tokens.ts | 0 packages/ui-components/src/utilities.ts | 6 +- packages/ui-components/tailwind.config.js | 2 +- packages/ui-system/bundlesize.config.js | 2 +- packages/ui-system/lib/buildIcons.js | 139 -------------- packages/ui-system/lib/customCSS.ts | 33 ---- packages/ui-system/lib/icons/config.json | 85 --------- .../ui-system/lib/icons/svg/address-card.svg | 1 - .../ui-system/lib/icons/svg/arrow-left.svg | 4 - .../ui-system/lib/icons/svg/arrow-right.svg | 4 - .../icons/svg/arrow-up-left-from-circle.svg | 1 - .../ui-system/lib/icons/svg/chart-simple.svg | 1 - .../ui-system/lib/icons/svg/circle-info.svg | 1 - .../lib/icons/svg/clock-rotate-left.svg | 1 - packages/ui-system/lib/icons/svg/clone.svg | 1 - packages/ui-system/lib/icons/svg/ellipsis.svg | 1 - .../ui-system/lib/icons/svg/eye-slash.svg | 1 - packages/ui-system/lib/icons/svg/eye.svg | 1 - .../ui-system/lib/icons/svg/face-smile.svg | 1 - packages/ui-system/lib/icons/svg/github.svg | 3 - .../ui-system/lib/icons/svg/pen-to-square.svg | 1 - .../ui-system/lib/icons/svg/square-check.svg | 1 - .../ui-system/lib/icons/svg/trash-can.svg | 1 - .../lib/icons/svg/window-restore.svg | 1 - packages/ui-system/lib/icons/svg/xmark.svg | 3 - packages/ui-system/lib/tailwindPlugin.ts | 180 ------------------ packages/ui-system/lib/tokens.ts | 79 -------- .../ui-system/src/__tests__/utilities.test.ts | 4 +- packages/ui-system/src/utilities.ts | 6 +- packages/ui-system/tailwind.config.js | 2 +- 32 files changed, 9 insertions(+), 557 deletions(-) rename {packages/ui-components/lib => lib}/customCSS.ts (100%) rename {packages/ui-components/lib => lib}/tailwindPlugin.ts (100%) rename {packages/ui-components/lib => lib}/tokens.ts (100%) delete mode 100644 packages/ui-system/lib/buildIcons.js delete mode 100644 packages/ui-system/lib/customCSS.ts delete mode 100644 packages/ui-system/lib/icons/config.json delete mode 100644 packages/ui-system/lib/icons/svg/address-card.svg delete mode 100644 packages/ui-system/lib/icons/svg/arrow-left.svg delete mode 100644 packages/ui-system/lib/icons/svg/arrow-right.svg delete mode 100644 packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg delete mode 100644 packages/ui-system/lib/icons/svg/chart-simple.svg delete mode 100644 packages/ui-system/lib/icons/svg/circle-info.svg delete mode 100644 packages/ui-system/lib/icons/svg/clock-rotate-left.svg delete mode 100644 packages/ui-system/lib/icons/svg/clone.svg delete mode 100644 packages/ui-system/lib/icons/svg/ellipsis.svg delete mode 100644 packages/ui-system/lib/icons/svg/eye-slash.svg delete mode 100644 packages/ui-system/lib/icons/svg/eye.svg delete mode 100644 packages/ui-system/lib/icons/svg/face-smile.svg delete mode 100644 packages/ui-system/lib/icons/svg/github.svg delete mode 100644 packages/ui-system/lib/icons/svg/pen-to-square.svg delete mode 100644 packages/ui-system/lib/icons/svg/square-check.svg delete mode 100644 packages/ui-system/lib/icons/svg/trash-can.svg delete mode 100644 packages/ui-system/lib/icons/svg/window-restore.svg delete mode 100644 packages/ui-system/lib/icons/svg/xmark.svg delete mode 100644 packages/ui-system/lib/tailwindPlugin.ts delete mode 100644 packages/ui-system/lib/tokens.ts diff --git a/packages/ui-components/lib/customCSS.ts b/lib/customCSS.ts similarity index 100% rename from packages/ui-components/lib/customCSS.ts rename to lib/customCSS.ts diff --git a/packages/ui-components/lib/tailwindPlugin.ts b/lib/tailwindPlugin.ts similarity index 100% rename from packages/ui-components/lib/tailwindPlugin.ts rename to lib/tailwindPlugin.ts diff --git a/packages/ui-components/lib/tokens.ts b/lib/tokens.ts similarity index 100% rename from packages/ui-components/lib/tokens.ts rename to lib/tokens.ts diff --git a/packages/ui-components/src/utilities.ts b/packages/ui-components/src/utilities.ts index c9694325..f43c2ad5 100644 --- a/packages/ui-components/src/utilities.ts +++ b/packages/ui-components/src/utilities.ts @@ -1,5 +1,5 @@ -import { customCSS } from "../lib/customCSS"; -import { twPlugin } from "../lib/tailwindPlugin"; -import { tokens } from "../lib/tokens"; +import { customCSS } from "../../../lib/customCSS"; +import { twPlugin } from "../../../lib/tailwindPlugin"; +import { tokens } from "../../../lib/tokens"; export { customCSS, tokens, twPlugin }; diff --git a/packages/ui-components/tailwind.config.js b/packages/ui-components/tailwind.config.js index 0e0fb6e5..7070c4a3 100644 --- a/packages/ui-components/tailwind.config.js +++ b/packages/ui-components/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ -import { twPlugin } from "./lib/tailwindPlugin"; +import { twPlugin } from "../../lib/tailwindPlugin"; export default twPlugin.merge({ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], diff --git a/packages/ui-system/bundlesize.config.js b/packages/ui-system/bundlesize.config.js index 6587c1fc..4f49aa01 100644 --- a/packages/ui-system/bundlesize.config.js +++ b/packages/ui-system/bundlesize.config.js @@ -8,7 +8,7 @@ export default { sizes: [ { path: `${bundlePath}/assets/style.css`, - limit: "8 KB", + limit: "4 KB", }, { path: `${bundlePath}/assets/index.js`, diff --git a/packages/ui-system/lib/buildIcons.js b/packages/ui-system/lib/buildIcons.js deleted file mode 100644 index 4b9ab3a6..00000000 --- a/packages/ui-system/lib/buildIcons.js +++ /dev/null @@ -1,139 +0,0 @@ -/* global process */ - -import path from "node:path"; -import util from "node:util"; - -import fs from "fs-extra"; - -const config = JSON.parse( - await fs.readFile(path.join(process.cwd(), "lib", "icons", "config.json")), -); - -const iconTemplate = ({ - name, - originalName, - title, - viewBox, - svgData, - copyright, - monotone, -}) => { - const monotoneProp = monotone - ? "" - : "// eslint-disable-next-line @typescript-eslint/no-unused-vars"; - const opacityLine1 = monotone ? "\n\t/* v8 ignore next 1 */" : ""; - const opacityLine2 = monotone - ? `\n\tconst opacity = monotone ? "1" : "0.4";` - : ""; - - return `/** - * This file was automatically generated. - * Please do not edit manually. - * - * To update this file, run \`yarn build:icons\`. - * - * Original name: ${originalName}.svg - * - * ${copyright} - * - */ - -import { SvgIcon } from "../private/SvgIcon/SvgIcon"; -import type { IconsProps } from "./IconsTypes"; - -export const ${name} = ({ - className, - viewBox, - spacing, - title, - ${monotoneProp} - monotone, - ...rest -}: IconsProps) => {${opacityLine1}${opacityLine2} - return ( - - ${svgData} - - ); -}; -`; -}; - -export const upperFirst = (string_) => - string_[0].toUpperCase() + string_.slice(1); - -const generateIcons = async () => { - const readdir = util.promisify(fs.readdir); - const readFile = util.promisify(fs.readFile); - - const svgFolder = path.join(process.cwd(), "lib", "icons", "svg"); - const icons = await readdir(svgFolder); - - await Promise.all( - icons.map(async (icon) => { - const originalName = icon.replace(".svg", ""); - const title = config[originalName]?.title || originalName; - const monotone = config[originalName]?.monotone || false; - const iconName = - config[originalName]?.name || "Icon" + upperFirst(originalName); - - const svg = await readFile(path.join(svgFolder, `${icon}`), "utf8"); - - /** Need to extract the comments from the svg file, including the - * opening and closing tags - */ - const comments = svg.match(//g).join(""); - - /** Need to extract the viewBox from the svg file */ - const viewBox = svg.match(/viewBox="([^"]*)"/)[1]; - - /** Need to extract the content of the svg file between the tags, - * remove any comments, extra white space and fix the closing tags. - */ - const svgData = svg - .match(/]*>(.*)<\/svg>/s)[1] - .replace(comments, "") - .replace(/class="/g, 'className="') - .replace( - /opacity=".4"/g, - monotone ? "opacity={opacity}" : 'opacity="0.4"', - ) - .replace('"/>', '" />') - .trimStart() - .trimEnd(); - - const iconFile = iconTemplate({ - name: iconName, - originalName, - title, - viewBox, - svgData, - copyright: comments.replace("", ""), - monotone, - }); - return fs.outputFile( - path.join( - process.cwd(), - "src", - "components", - "Icons", - `${iconName}.tsx`, - ), - iconFile, - "utf8", - ); - }), - ); -}; - -(async () => { - await generateIcons(); -})(); diff --git a/packages/ui-system/lib/customCSS.ts b/packages/ui-system/lib/customCSS.ts deleted file mode 100644 index 0d418e8b..00000000 --- a/packages/ui-system/lib/customCSS.ts +++ /dev/null @@ -1,33 +0,0 @@ -export const customCSS = { - [`.av-text-input-wrapper label[aria-hidden="true"], - .av-text-area-wrapper label[aria-hidden="true"]`]: { - /* move the label inline */ - transform: "translate(18px, 0) scale(1)", - transformOrigin: "top left", - transition: "var(--av-text-area-wrapper-transition, all 0.2s ease-out)", - }, - '.av-text-input:focus + label[aria-hidden="true"],\n\t.av-text-input:not(:placeholder-shown) + label[aria-hidden="true"],\n\t.av-text-area:focus + label[aria-hidden="true"],\n\t.av-text-area:not(:placeholder-shown) + label[aria-hidden="true"]': - { - transform: - "translate(18px, var(--av-text-area-label, -25px)) scale(0.75)", - }, - - '.av-text-input-simple:focus + label[aria-hidden="true"],\n\t.av-text-input-simple:not(:placeholder-shown) + label[aria-hidden="true"]': - { - transform: - "translate(18px, var(--av-text-area-label, -12px)) scale(0.75)", - }, - - ".av-text-input-helper-text,\n\t.av-text-area-helper-text": { - transform: - "translate(18px, var(--av-text-area-helper-text, 32px))\n\t\t\tscale(0.75)", - transformOrigin: "top left", - }, - ".av-text-input__control--right,\n\t.av-text-area__control--right": { - right: "18px", - }, - "@keyframes blink": { "50%": { fill: "transparent" } }, - ".av-spinner__dot": { animation: "1s blink infinite" }, - ".av-spinner__dot:nth-child(2)": { animationDelay: "250ms" }, - ".av-spinner__dot:nth-child(3)": { animationDelay: "500ms" }, -}; diff --git a/packages/ui-system/lib/icons/config.json b/packages/ui-system/lib/icons/config.json deleted file mode 100644 index f0c069bc..00000000 --- a/packages/ui-system/lib/icons/config.json +++ /dev/null @@ -1,85 +0,0 @@ -{ - "clone": { - "name": "IconCopy", - "title": "Copy", - "monotone": true - }, - "ellipsis": { - "name": "IconSettings", - "title": "Settings" - }, - "eye": { - "name": "IconShow", - "title": "Show", - "monotone": true - }, - "eye-slash": { - "name": "IconHide", - "title": "Hide", - "monotone": true - }, - "face-smile": { - "name": "IconUser", - "title": "User" - }, - "pen-to-square": { - "name": "IconEdit", - "title": "Edit", - "monotone": true - }, - "square-check": { - "name": "IconCopied", - "title": "Copied" - }, - "trash-can": { - "name": "IconDelete", - "title": "Delete", - "monotone": true - }, - "window-restore": { - "name": "IconRestore", - "title": "Restore", - "monotone": true - }, - "xmark": { - "name": "IconClose", - "title": "Close" - }, - "chart-simple": { - "name": "IconChart", - "title": "Chart", - "monotone": true - }, - "address-card": { - "name": "IconProfile", - "title": "Profile" - }, - "clock-rotate-left": { - "name": "IconHistory", - "title": "History", - "monotone": true - }, - "circle-info": { - "name": "IconInfo", - "title": "Info" - }, - "arrow-up-left-from-circle": { - "name": "IconBack", - "title": "Back", - "monotone": true - }, - "arrow-right": { - "name": "IconNext", - "title": "Next", - "monotone": true - }, - "arrow-left": { - "name": "IconPrevious", - "title": "Previous", - "monotone": true - }, - "github": { - "name": "IconGitHub", - "title": "GitHub" - } -} diff --git a/packages/ui-system/lib/icons/svg/address-card.svg b/packages/ui-system/lib/icons/svg/address-card.svg deleted file mode 100644 index 1060903f..00000000 --- a/packages/ui-system/lib/icons/svg/address-card.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/arrow-left.svg b/packages/ui-system/lib/icons/svg/arrow-left.svg deleted file mode 100644 index 7368be17..00000000 --- a/packages/ui-system/lib/icons/svg/arrow-left.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/ui-system/lib/icons/svg/arrow-right.svg b/packages/ui-system/lib/icons/svg/arrow-right.svg deleted file mode 100644 index 44391a8a..00000000 --- a/packages/ui-system/lib/icons/svg/arrow-right.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg b/packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg deleted file mode 100644 index 0386e0df..00000000 --- a/packages/ui-system/lib/icons/svg/arrow-up-left-from-circle.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/chart-simple.svg b/packages/ui-system/lib/icons/svg/chart-simple.svg deleted file mode 100644 index d9dbaa26..00000000 --- a/packages/ui-system/lib/icons/svg/chart-simple.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/circle-info.svg b/packages/ui-system/lib/icons/svg/circle-info.svg deleted file mode 100644 index c932b2a7..00000000 --- a/packages/ui-system/lib/icons/svg/circle-info.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/clock-rotate-left.svg b/packages/ui-system/lib/icons/svg/clock-rotate-left.svg deleted file mode 100644 index a0ad8ebe..00000000 --- a/packages/ui-system/lib/icons/svg/clock-rotate-left.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/clone.svg b/packages/ui-system/lib/icons/svg/clone.svg deleted file mode 100644 index 08970fd4..00000000 --- a/packages/ui-system/lib/icons/svg/clone.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/ellipsis.svg b/packages/ui-system/lib/icons/svg/ellipsis.svg deleted file mode 100644 index 194feb1a..00000000 --- a/packages/ui-system/lib/icons/svg/ellipsis.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/eye-slash.svg b/packages/ui-system/lib/icons/svg/eye-slash.svg deleted file mode 100644 index ab4e49ac..00000000 --- a/packages/ui-system/lib/icons/svg/eye-slash.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/eye.svg b/packages/ui-system/lib/icons/svg/eye.svg deleted file mode 100644 index bb200c20..00000000 --- a/packages/ui-system/lib/icons/svg/eye.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/face-smile.svg b/packages/ui-system/lib/icons/svg/face-smile.svg deleted file mode 100644 index 896cd01a..00000000 --- a/packages/ui-system/lib/icons/svg/face-smile.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/github.svg b/packages/ui-system/lib/icons/svg/github.svg deleted file mode 100644 index 83875d5b..00000000 --- a/packages/ui-system/lib/icons/svg/github.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/ui-system/lib/icons/svg/pen-to-square.svg b/packages/ui-system/lib/icons/svg/pen-to-square.svg deleted file mode 100644 index 4e199ef8..00000000 --- a/packages/ui-system/lib/icons/svg/pen-to-square.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/square-check.svg b/packages/ui-system/lib/icons/svg/square-check.svg deleted file mode 100644 index 4a08068b..00000000 --- a/packages/ui-system/lib/icons/svg/square-check.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/trash-can.svg b/packages/ui-system/lib/icons/svg/trash-can.svg deleted file mode 100644 index ef1e8a9d..00000000 --- a/packages/ui-system/lib/icons/svg/trash-can.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/window-restore.svg b/packages/ui-system/lib/icons/svg/window-restore.svg deleted file mode 100644 index 6995b744..00000000 --- a/packages/ui-system/lib/icons/svg/window-restore.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/ui-system/lib/icons/svg/xmark.svg b/packages/ui-system/lib/icons/svg/xmark.svg deleted file mode 100644 index 185f43df..00000000 --- a/packages/ui-system/lib/icons/svg/xmark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/ui-system/lib/tailwindPlugin.ts b/packages/ui-system/lib/tailwindPlugin.ts deleted file mode 100644 index b00ac054..00000000 --- a/packages/ui-system/lib/tailwindPlugin.ts +++ /dev/null @@ -1,180 +0,0 @@ -import typography from "@tailwindcss/typography"; -import { converter } from "culori"; -import plugin from "tailwindcss/plugin"; -import type { Config, OptionalConfig } from "tailwindcss/types/config"; - -import { customCSS } from "./customCSS"; -import { tokens } from "./tokens"; - -type TailwindConfig = { - content: string[]; -} & OptionalConfig; - -const parse = converter("rgb"); - -const dynamicColors = () => { - const result: { [key: string]: string } = {}; - Object.entries(tokens.colors).forEach(([name, color]) => { - const rgb = parse(color); - const variable = `--av-${name}`; - const fallbackValue = rgb - ? `${rgb.r * 255} ${rgb.g * 255} ${rgb.b * 255}` - : "0 0 0"; - result[name] = `var(${variable}, rgb(${fallbackValue} / ))`; - }); - return result; -}; - -const dynamicMargins = () => { - const allowed = [ - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 44, - 48, 52, 56, 60, 64, 72, 80, 96, - ]; - const margins: string[] = []; - allowed.forEach((num) => { - margins.push(`mt-${num}`); - margins.push(`mr-${num}`); - margins.push(`mb-${num}`); - margins.push(`ml-${num}`); - }); - return margins; -}; - -const myComponentLibraryConfig = { - theme: { - extend: { - colors: dynamicColors(), - typography: ({ theme }: { theme: (arg0: string) => any }) => ({ - DEFAULT: { - css: { - maxWidth: "inherit", - "h1, h2, h3, h4, h5, h6": { - fontFamily: "Open Sans, ui-sans-serif, system-ui, sans-serif", - }, - blockquote: { - borderLeftWidth: "6px", - }, - "blockquote p": { - fontFamily: "Georgia, Cambria, Times New Roman, Times, serif", - }, - li: { - fontSize: "1rem", - }, - pre: { - marginTop: "2rem", - marginBottom: "2rem", - fontSize: "0.875rem", - lineHeight: "1.25rem", - }, - code: { - fontFamily: - 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - }, - }, - }, - light: { - css: { - "--tw-prose-body": tokens.colors["copy-light"], - "--tw-prose-headings": tokens.colors["copy-medium"], - "--tw-prose-lead": tokens.colors["copy-light"], - "--tw-prose-links": tokens.colors["copy-light"], - "--tw-prose-bold": tokens.colors["copy-light"], - "--tw-prose-counters": tokens.colors["copy-medium"], - "--tw-prose-bullets": tokens.colors["copy-medium"], - "--tw-prose-hr": tokens.colors["copy-medium"], - "--tw-prose-quotes": tokens.colors["copy-light"], - "--tw-prose-quote-borders": tokens.colors["copy-light"], - "--tw-prose-captions": tokens.colors["copy-light"], - "--tw-prose-code": tokens.colors["copy-light"], - "--tw-prose-pre-code": tokens.colors["copy-lighter"], - "--tw-prose-pre-bg": tokens.colors["surface-medium"], - "--tw-prose-kbd": tokens.colors["copy-light"], - li: { - color: tokens.colors["copy-light"], - }, - }, - }, - lighter: { - css: { - "--tw-prose-body": tokens.colors["copy-lighter"], - "--tw-prose-headings": tokens.colors["copy-light"], - "--tw-prose-lead": tokens.colors["copy-lighter"], - "--tw-prose-links": tokens.colors["copy-lighter"], - "--tw-prose-bold": tokens.colors["copy-lighter"], - "--tw-prose-counters": tokens.colors["copy-light"], - "--tw-prose-bullets": tokens.colors["copy-light"], - "--tw-prose-hr": tokens.colors["copy-light"], - "--tw-prose-quotes": tokens.colors["copy-lighter"], - "--tw-prose-quote-borders": tokens.colors["copy-lighter"], - "--tw-prose-captions": tokens.colors["copy-lighter"], - "--tw-prose-code": tokens.colors["copy-lighter"], - "--tw-prose-pre-code": tokens.colors["copy-lighter"], - "--tw-prose-pre-bg": tokens.colors["surface-dark"], - "--tw-prose-kbd": tokens.colors["copy-lighter"], - li: { - color: tokens.colors["copy-lighter"], - }, - }, - }, - dark: { - css: { - "--tw-prose-body": theme("colors.slate[800]"), - "--tw-prose-headings": theme("colors.slate[900]"), - "--tw-prose-lead": theme("colors.slate[700]"), - "--tw-prose-links": theme("colors.slate[900]"), - "--tw-prose-bold": theme("colors.slate[900]"), - "--tw-prose-counters": theme("colors.slate[600]"), - "--tw-prose-bullets": theme("colors.slate[400]"), - "--tw-prose-hr": theme("colors.slate[300]"), - "--tw-prose-quotes": theme("colors.slate[900]"), - "--tw-prose-quote-borders": theme("colors.slate[300]"), - "--tw-prose-captions": theme("colors.slate[700]"), - "--tw-prose-code": theme("colors.slate[900]"), - - "--tw-prose-pre-code": tokens.colors["copy-lighter"], - "--tw-prose-pre-bg": tokens.colors["surface-medium"], - - // "--tw-prose-pre-code": theme("colors.slate[100]"), - // "--tw-prose-pre-bg": theme("colors.slate[900]"), - - "--tw-prose-kbd": theme("colors.slate[800]"), - li: { - color: tokens.colors["copy-dark"], - }, - }, - }, - }), - }, - }, -}; - -const tailwindContentPath = [ - (__dirname + "/**/*.{js,ts,jsx,tsx}").replace("ui-plugins", "ui-components"), -]; - -const tailwindPlugins = [ - typography, - plugin(function ({ addUtilities }) { - addUtilities(customCSS); - }, myComponentLibraryConfig), -]; - -const tailwindSafelist = [...dynamicMargins()]; - -export const twPlugin = { - content: tailwindContentPath, - safelist: tailwindSafelist, - plugins: tailwindPlugins, - - merge: (config: TailwindConfig) => { - const safelist = tailwindSafelist; - const content = tailwindContentPath; - const plugins = tailwindPlugins; - - config.safelist = [...(config.safelist || []), ...safelist]; - config.content = [...(config.content || []), ...content]; - config.plugins = [...(config.plugins || []), ...plugins]; - - return config as Config; - }, -}; diff --git a/packages/ui-system/lib/tokens.ts b/packages/ui-system/lib/tokens.ts deleted file mode 100644 index 122cecc5..00000000 --- a/packages/ui-system/lib/tokens.ts +++ /dev/null @@ -1,79 +0,0 @@ -import colors from "tailwindcss/colors"; - -const errorColorDark = "#d80000"; -const errorColorLight = "#ff3f3f"; - -export const tokens = { - colors: { - /** - * Action tokens. - */ - "action-dark": colors.slate[900], - "action-dark-hover": colors.slate[700], - "action-dark-active": colors.slate[600], - - "action-light": colors.slate[500], - "action-light-hover": colors.slate[600], - "action-light-active": colors.slate[700], - - /** - * Surface tokens. - */ - "surface-dark": colors.slate[900], - "surface-medium": colors.slate[500], - "surface-light": colors.slate[300], - "surface-lighter": colors.slate[200], - "surface-accent": "#0B93F6", - - /** - * Typography tokens. - */ - "copy-dark": colors.slate[900], - "copy-dark-hover": colors.slate[900], - "copy-dark-active": colors.slate[900], - - "copy-medium": colors.slate[400], - "copy-medium-hover": colors.slate[400], - "copy-medium-active": colors.slate[400], - - "copy-light": colors.slate[200], - "copy-light-hover": colors.slate[200], - "copy-light-active": colors.slate[400], - - "copy-lighter": "#ffffff", - "copy-lighter-hover": "#ffffff", - "copy-lighter-active": "#ffffff", - - "copy-error-dark": errorColorDark, - "copy-error-light": errorColorLight, - - /** - * Border tokens. - */ - "border-dark": colors.slate[900], - "border-medium": colors.slate[400], - "border-light": colors.slate[300], - - "border-white": "#ffffff", - "border-error-dark": errorColorDark, - "border-error-light": errorColorLight, - - /** - * Focus tokens. - */ - "focus-dark": colors.slate[900], - "focus-light": colors.slate[300], - "focus-error-dark": errorColorDark, - "focus-error-light": errorColorLight, - - /** - * Table tokens - */ - "table-dark": colors.gray[700], - "table-dark-odd": colors.gray[800], - "table-dark-even": colors.gray[900], - "table-light": colors.gray[100], - "table-light-odd": colors.gray[200], - "table-light-even": colors.gray[300], - }, -}; diff --git a/packages/ui-system/src/__tests__/utilities.test.ts b/packages/ui-system/src/__tests__/utilities.test.ts index 34b4c4ac..61462f43 100644 --- a/packages/ui-system/src/__tests__/utilities.test.ts +++ b/packages/ui-system/src/__tests__/utilities.test.ts @@ -1,9 +1,7 @@ -import { customCSS, tokens, twPlugin } from "../utilities"; +import { twPlugin } from "../utilities"; describe("utilities", () => { it("should work", () => { - expect(tokens.colors).toBeDefined(); - expect(customCSS).toBeDefined(); expect(twPlugin).toBeDefined(); }); }); diff --git a/packages/ui-system/src/utilities.ts b/packages/ui-system/src/utilities.ts index c9694325..433c9f6b 100644 --- a/packages/ui-system/src/utilities.ts +++ b/packages/ui-system/src/utilities.ts @@ -1,5 +1,3 @@ -import { customCSS } from "../lib/customCSS"; -import { twPlugin } from "../lib/tailwindPlugin"; -import { tokens } from "../lib/tokens"; +import { twPlugin } from "../../../lib/tailwindPlugin"; -export { customCSS, tokens, twPlugin }; +export { twPlugin }; diff --git a/packages/ui-system/tailwind.config.js b/packages/ui-system/tailwind.config.js index 0e0fb6e5..7070c4a3 100644 --- a/packages/ui-system/tailwind.config.js +++ b/packages/ui-system/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ -import { twPlugin } from "./lib/tailwindPlugin"; +import { twPlugin } from "../../lib/tailwindPlugin"; export default twPlugin.merge({ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], From 686c95bd24510d1f76a9387e356ab36471b698e2 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 20:12:20 -0500 Subject: [PATCH 06/11] Update vite.components.config.ts --- packages/bundlesize/vite.components.config.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/bundlesize/vite.components.config.ts b/packages/bundlesize/vite.components.config.ts index 3236bdbf..662c35e1 100644 --- a/packages/bundlesize/vite.components.config.ts +++ b/packages/bundlesize/vite.components.config.ts @@ -29,10 +29,11 @@ export default defineConfig({ }, }, build: { - outDir: "dist/system", + outDir: "dist/components", + emptyOutDir: false, rollupOptions: { input: { - index: resolve(__dirname, "ui-system", "index.html"), + index: resolve(__dirname, "ui-components", "index.html"), }, output: { assetFileNames: "assets/style[extname]", From 05740687eb23a99361316921b3b98fb47dcb8e32 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 20:27:52 -0500 Subject: [PATCH 07/11] simplify bundlesize configuration --- packages/bundlesize/package.json | 4 +- .../components}/index.html | 0 .../components}/src/main.tsx | 0 .../components}/src/vite-env.d.ts | 0 .../{ui-system => src/system}/index.html | 0 .../{ui-system => src/system}/src/main.tsx | 0 .../system}/src/vite-env.d.ts | 0 packages/bundlesize/tsconfig.json | 2 +- packages/bundlesize/vite.components.config.ts | 57 ----------------- packages/bundlesize/vite.config.ts | 63 +++++++++++++++++++ packages/bundlesize/vite.system.config.ts | 57 ----------------- 11 files changed, 66 insertions(+), 117 deletions(-) rename packages/bundlesize/{ui-components => src/components}/index.html (100%) rename packages/bundlesize/{ui-components => src/components}/src/main.tsx (100%) rename packages/bundlesize/{ui-components => src/components}/src/vite-env.d.ts (100%) rename packages/bundlesize/{ui-system => src/system}/index.html (100%) rename packages/bundlesize/{ui-system => src/system}/src/main.tsx (100%) rename packages/bundlesize/{ui-system => src/system}/src/vite-env.d.ts (100%) delete mode 100644 packages/bundlesize/vite.components.config.ts create mode 100644 packages/bundlesize/vite.config.ts delete mode 100644 packages/bundlesize/vite.system.config.ts diff --git a/packages/bundlesize/package.json b/packages/bundlesize/package.json index 2465d6f9..f04f5656 100644 --- a/packages/bundlesize/package.json +++ b/packages/bundlesize/package.json @@ -7,8 +7,8 @@ "private": true, "scripts": { "clean": "rimraf dist", - "build:components": "vite build -c vite.components.config.js", - "build:system": "vite build -c vite.system.config.js", + "build:components": "cross-env-shell VITE_UI_TARGET=components vite build", + "build:system": "cross-env-shell VITE_UI_TARGET=system vite build", "build": "npm-run-all --serial clean build:components build:system", "test": "echo \"WARNING: no test specified\" && exit 0", "test:coverage": "echo \"WARNING: no test specified\" && exit 0" diff --git a/packages/bundlesize/ui-components/index.html b/packages/bundlesize/src/components/index.html similarity index 100% rename from packages/bundlesize/ui-components/index.html rename to packages/bundlesize/src/components/index.html diff --git a/packages/bundlesize/ui-components/src/main.tsx b/packages/bundlesize/src/components/src/main.tsx similarity index 100% rename from packages/bundlesize/ui-components/src/main.tsx rename to packages/bundlesize/src/components/src/main.tsx diff --git a/packages/bundlesize/ui-components/src/vite-env.d.ts b/packages/bundlesize/src/components/src/vite-env.d.ts similarity index 100% rename from packages/bundlesize/ui-components/src/vite-env.d.ts rename to packages/bundlesize/src/components/src/vite-env.d.ts diff --git a/packages/bundlesize/ui-system/index.html b/packages/bundlesize/src/system/index.html similarity index 100% rename from packages/bundlesize/ui-system/index.html rename to packages/bundlesize/src/system/index.html diff --git a/packages/bundlesize/ui-system/src/main.tsx b/packages/bundlesize/src/system/src/main.tsx similarity index 100% rename from packages/bundlesize/ui-system/src/main.tsx rename to packages/bundlesize/src/system/src/main.tsx diff --git a/packages/bundlesize/ui-system/src/vite-env.d.ts b/packages/bundlesize/src/system/src/vite-env.d.ts similarity index 100% rename from packages/bundlesize/ui-system/src/vite-env.d.ts rename to packages/bundlesize/src/system/src/vite-env.d.ts diff --git a/packages/bundlesize/tsconfig.json b/packages/bundlesize/tsconfig.json index 886dfdde..a75f6b2f 100644 --- a/packages/bundlesize/tsconfig.json +++ b/packages/bundlesize/tsconfig.json @@ -21,6 +21,6 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["ui-components/src", "ui-system/src"], + "include": ["./src"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/packages/bundlesize/vite.components.config.ts b/packages/bundlesize/vite.components.config.ts deleted file mode 100644 index 662c35e1..00000000 --- a/packages/bundlesize/vite.components.config.ts +++ /dev/null @@ -1,57 +0,0 @@ -/** @type {import('vite').UserConfig} */ - -import { resolve } from "node:path"; - -import fs from "fs-extra"; -import { defineConfig } from "vite"; - -const VENDOR_CHUNK = "vendorChunk"; -const packageJson = fs.readJSONSync("../ui-components/package.json"); -const prodDependencies = Object.keys(packageJson.dependencies).filter( - (dependency) => - dependency !== "react" && - dependency !== "react-dom" && - dependency !== "react/jsx-runtime" && - dependency !== "react-dom/server" && - dependency !== "tailwindcss", -); -prodDependencies.push( - "react-dom", - "react-dom/server", - "react", - "react/jsx-runtime", -); - -export default defineConfig({ - esbuild: { - supported: { - "top-level-await": true, //browsers can handle top-level-await features - }, - }, - build: { - outDir: "dist/components", - emptyOutDir: false, - rollupOptions: { - input: { - index: resolve(__dirname, "ui-components", "index.html"), - }, - output: { - assetFileNames: "assets/style[extname]", - entryFileNames: "assets/[name].js", - /** - * Manually creating chunks for prod dependencies. - */ - manualChunks: { - [VENDOR_CHUNK]: prodDependencies, - }, - chunkFileNames(chunkInfo) { - if (chunkInfo.name.includes(VENDOR_CHUNK)) { - return "assets/vendor.js"; - } - return "[name]-[hash].js"; - }, - }, - }, - }, - plugins: [], -}); diff --git a/packages/bundlesize/vite.config.ts b/packages/bundlesize/vite.config.ts new file mode 100644 index 00000000..95d2b79e --- /dev/null +++ b/packages/bundlesize/vite.config.ts @@ -0,0 +1,63 @@ +/** @type {import('vite').UserConfig} */ + +import { resolve } from "node:path"; + +import fs from "fs-extra"; +import { defineConfig, loadEnv } from "vite"; + +const VENDOR_CHUNK = "vendorChunk"; + +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd()); + const packageJson = fs.readJSONSync( + `../ui-${env.VITE_UI_TARGET}/package.json`, + ); + const prodDependencies = Object.keys(packageJson.dependencies).filter( + (dependency) => + dependency !== "react" && + dependency !== "react-dom" && + dependency !== "react/jsx-runtime" && + dependency !== "react-dom/server" && + dependency !== "tailwindcss", + ); + prodDependencies.push( + "react-dom", + "react-dom/server", + "react", + "react/jsx-runtime", + ); + + return { + esbuild: { + supported: { + "top-level-await": true, //browsers can handle top-level-await features + }, + }, + build: { + outDir: `dist/${env.VITE_UI_TARGET}`, + emptyOutDir: false, + rollupOptions: { + input: { + index: resolve(__dirname, "src", env.VITE_UI_TARGET, "index.html"), + }, + output: { + assetFileNames: "assets/style[extname]", + entryFileNames: "assets/[name].js", + /** + * Manually creating chunks for prod dependencies. + */ + manualChunks: { + [VENDOR_CHUNK]: prodDependencies, + }, + chunkFileNames(chunkInfo) { + if (chunkInfo.name.includes(VENDOR_CHUNK)) { + return "assets/vendor.js"; + } + return "[name]-[hash].js"; + }, + }, + }, + }, + plugins: [], + }; +}); diff --git a/packages/bundlesize/vite.system.config.ts b/packages/bundlesize/vite.system.config.ts deleted file mode 100644 index fb692117..00000000 --- a/packages/bundlesize/vite.system.config.ts +++ /dev/null @@ -1,57 +0,0 @@ -/** @type {import('vite').UserConfig} */ - -import { resolve } from "node:path"; - -import fs from "fs-extra"; -import { defineConfig } from "vite"; - -const VENDOR_CHUNK = "vendorChunk"; -const packageJson = fs.readJSONSync("../ui-system/package.json"); -const prodDependencies = Object.keys(packageJson.dependencies).filter( - (dependency) => - dependency !== "react" && - dependency !== "react-dom" && - dependency !== "react/jsx-runtime" && - dependency !== "react-dom/server" && - dependency !== "tailwindcss", -); -prodDependencies.push( - "react-dom", - "react-dom/server", - "react", - "react/jsx-runtime", -); - -export default defineConfig({ - esbuild: { - supported: { - "top-level-await": true, //browsers can handle top-level-await features - }, - }, - build: { - outDir: "dist/system", - emptyOutDir: false, - rollupOptions: { - input: { - index: resolve(__dirname, "ui-system", "index.html"), - }, - output: { - assetFileNames: "assets/style[extname]", - entryFileNames: "assets/[name].js", - /** - * Manually creating chunks for prod dependencies. - */ - manualChunks: { - [VENDOR_CHUNK]: prodDependencies, - }, - chunkFileNames(chunkInfo) { - if (chunkInfo.name.includes(VENDOR_CHUNK)) { - return "assets/vendor.js"; - } - return "[name]-[hash].js"; - }, - }, - }, - }, - plugins: [], -}); From e88447fa77d4058262a16156e9786f29e37bbedd Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 20:45:19 -0500 Subject: [PATCH 08/11] Update pull-requests.yml --- .github/workflows/pull-requests.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml index 2e39d78e..52ae44d7 100644 --- a/.github/workflows/pull-requests.yml +++ b/.github/workflows/pull-requests.yml @@ -89,6 +89,6 @@ jobs: corepack enable pnpm install npx lerna run build --ignore @versini/documentation - npx lerna run stats:release --scope=@versini/ui-components + npx lerna run stats:release - name: Commit Release Stats uses: stefanzweifel/git-auto-commit-action@v5 From 82eb25882802bead38674ad0042ce456e9758375 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 20:54:55 -0500 Subject: [PATCH 09/11] revert --- packages/bundlesize/tsconfig.json | 2 +- packages/bundlesize/tsconfig.node.json | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/bundlesize/tsconfig.json b/packages/bundlesize/tsconfig.json index a75f6b2f..ffbdf148 100644 --- a/packages/bundlesize/tsconfig.json +++ b/packages/bundlesize/tsconfig.json @@ -21,6 +21,6 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["./src"], + "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/packages/bundlesize/tsconfig.node.json b/packages/bundlesize/tsconfig.node.json index f2a3bd96..f7d9f9ea 100644 --- a/packages/bundlesize/tsconfig.node.json +++ b/packages/bundlesize/tsconfig.node.json @@ -6,9 +6,5 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": [ - "./vite.components.config.ts", - "./vite.system.config.ts", - "./vitest.setup.ts" - ] + "include": ["./vite.config.ts", "./vitest.setup.ts"] } From e517301b54ee3c4aa54ddc4040529a1641eef774 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 25 Feb 2024 20:57:43 -0500 Subject: [PATCH 10/11] Update bundlesize.config.js --- packages/ui-system/bundlesize.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-system/bundlesize.config.js b/packages/ui-system/bundlesize.config.js index 4f49aa01..f0d7535f 100644 --- a/packages/ui-system/bundlesize.config.js +++ b/packages/ui-system/bundlesize.config.js @@ -12,11 +12,11 @@ export default { }, { path: `${bundlePath}/assets/index.js`, - limit: "20 KB", + limit: "3 KB", }, { path: `${bundlePath}/assets/vendor.js`, - limit: "67 KB", + limit: "46 KB", }, ], }; From df9d4164bc8acbeb7006f51193507472313886bc Mon Sep 17 00:00:00 2001 From: Arno V Date: Mon, 26 Feb 2024 08:27:23 -0500 Subject: [PATCH 11/11] Update vite.config.ts --- packages/ui-system/vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-system/vite.config.ts b/packages/ui-system/vite.config.ts index d9169dd8..896826c5 100644 --- a/packages/ui-system/vite.config.ts +++ b/packages/ui-system/vite.config.ts @@ -79,7 +79,7 @@ export default defineConfig(({ mode }) => { lib: { entry: resolve(__dirname, "src/components/index.ts"), formats: ["es"], - name: "UIComponents", + name: "UISystem", }, rollupOptions: { input: {