Merge pull request #353 from aversini/feat-moving-flexbox-and-themepr…

…ovider-to-ui-system feat: moving Flexgrid and ThemeProvider to ui-system
versini-org · Feb 26, 2024 · 56f7ec5 · 56f7ec5
2 parents ae71ac8 + df9d416
commit 56f7ec5
Show file tree

Hide file tree

Showing 63 changed files with 827 additions and 489 deletions.
diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml
@@ -27,13 +27,15 @@ 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
+          message-path: |
+            packages/ui-components/tmp/pr-stats.md
+            packages/ui-system/tmp/pr-stats.md
 
   inspect:
     if: ${{ always() }}
@@ -87,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
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/ui-components/lib/customCSS.ts → lib/customCSS.ts b/packages/ui-components/lib/customCSS.ts → lib/customCSS.ts
diff --git a/packages/ui-components/lib/tailwindPlugin.ts → lib/tailwindPlugin.ts b/packages/ui-components/lib/tailwindPlugin.ts → lib/tailwindPlugin.ts
diff --git a/packages/ui-components/lib/tokens.ts → lib/tokens.ts b/packages/ui-components/lib/tokens.ts → lib/tokens.ts
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": "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"
 	},
 	"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/index.html → ...ages/bundlesize/src/components/index.html b/packages/bundlesize/index.html → ...ages/bundlesize/src/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 → ...es/bundlesize/src/components/src/main.tsx b/packages/bundlesize/src/main.tsx → ...es/bundlesize/src/components/src/main.tsx
diff --git a/packages/bundlesize/src/vite-env.d.ts → ...ndlesize/src/components/src/vite-env.d.ts b/packages/bundlesize/src/vite-env.d.ts → ...ndlesize/src/components/src/vite-env.d.ts
diff --git a/packages/bundlesize/src/system/index.html b/packages/bundlesize/src/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/src/system/src/main.tsx b/packages/bundlesize/src/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/src/system/src/vite-env.d.ts b/packages/bundlesize/src/system/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/bundlesize/vite.config.ts b/packages/bundlesize/vite.config.ts
@@ -1,48 +1,63 @@
+/** @type {import('vite').UserConfig} */
+
+import { resolve } from "node:path";
+
 import fs from "fs-extra";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } 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
+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: {
-		rollupOptions: {
-			output: {
-				assetFileNames: "assets/style[extname]",
-				entryFileNames: "assets/[name].js",
-				/**
-				 * Manually creating chunks for prod dependencies.
-				 */
-				manualChunks: {
-					[VENDOR_CHUNK]: prodDependencies,
+		build: {
+			outDir: `dist/${env.VITE_UI_TARGET}`,
+			emptyOutDir: false,
+			rollupOptions: {
+				input: {
+					index: resolve(__dirname, "src", env.VITE_UI_TARGET, "index.html"),
 				},
-				chunkFileNames(chunkInfo) {
-					if (chunkInfo.name.includes(VENDOR_CHUNK)) {
-						return "assets/vendor.js";
-					}
-					return "[name]-[hash].js";
+				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: [],
+		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,

diff --git 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 };