versini-org · aversini · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git 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
@@ -1,5 +1,6 @@
 {
 	"packages/eslint-plugin-client": "1.0.1",
 	"packages/ui-components": "5.0.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
@@ -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
@@ -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
@@ -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 → packages/bundlesize/ui-components/index.html b/packages/bundlesize/index.html → packages/bundlesize/ui-components/index.html
@@ -13,7 +13,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
+  <script type="module" src="src/main.tsx"></script>
 </body>
 
 </html>
diff --git a/packages/bundlesize/src/main.tsx → ...ges/bundlesize/ui-components/src/main.tsx b/packages/bundlesize/src/main.tsx → ...ges/bundlesize/ui-components/src/main.tsx
diff --git a/packages/bundlesize/src/vite-env.d.ts → ...undlesize/ui-components/src/vite-env.d.ts b/packages/bundlesize/src/vite-env.d.ts → ...undlesize/ui-components/src/vite-env.d.ts
diff --git a/packages/bundlesize/ui-system/index.html b/packages/bundlesize/ui-system/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#64748b">
+  <link rel="icon" type="image/png" href="/favicon.ico?v=2">
+
+  <title>UI System</title>
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/packages/bundlesize/ui-system/src/main.tsx 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(
+	<React.StrictMode>hello</React.StrictMode>,
+);
diff --git a/packages/bundlesize/ui-system/src/vite-env.d.ts b/packages/bundlesize/ui-system/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/bundlesize/vite.config.ts → ...ages/bundlesize/vite.components.config.ts b/packages/bundlesize/vite.config.ts → ...ages/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -3,11 +3,10 @@ import {
 	Button,
 	ButtonIcon,
 	Card,
-	Flexgrid,
-	FlexgridItem,
 	IconNext,
 	IconPrevious,
 } from "@versini/ui-components";
+import { Flexgrid, FlexgridItem } from "@versini/ui-system";
 
 <Meta title="Getting started/Usage" />
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,