Merge pull request #11 from aversini/docs-adding-documentation-packag…

…e-to-test docs: adding documentation package to test
versini-org · Nov 5, 2023 · 76b8204 · 76b8204
2 parents 342320d + 6f4615f
commit 76b8204
Show file tree

Hide file tree

Showing 16 changed files with 304 additions and 6 deletions.
diff --git a/packages/documentation/.eslintrc.cjs b/packages/documentation/.eslintrc.cjs
@@ -0,0 +1,25 @@
+module.exports = {
+	root: true,
+	env: { browser: true, es2020: true },
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react-hooks/recommended",
+		"prettier",
+		"../../configuration/eslint-rules/best-practices.cjs",
+		"../../configuration/eslint-rules/possible-errors.cjs",
+		"../../configuration/eslint-rules/variables.cjs",
+	],
+	ignorePatterns: ["dist", ".eslintrc.cjs"],
+	parser: "@typescript-eslint/parser",
+	plugins: ["react-refresh", "simple-import-sort"],
+	rules: {
+		"@typescript-eslint/no-explicit-any": "off",
+		"react-refresh/only-export-components": [
+			"warn",
+			{ allowConstantExport: true },
+		],
+		"simple-import-sort/imports": "error",
+		"simple-import-sort/exports": "error",
+	},
+};
diff --git a/packages/documentation/index.html b/packages/documentation/index.html
@@ -0,0 +1,25 @@
+<!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">
+  <link preload="" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans">
+
+  <title>UI Components</title>
+
+  <style media="screen">
+    .app-hidden {
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root" class="app-hidden"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "@versini/documentation",
+	"version": "1.0.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"clean": "rimraf dist",
+		"dev": "vite --host",
+		"build": "yarn run clean && tsc && vite build",
+		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
+		"start": "static-server dist --port 5173",
+		"test": "echo \"WARNING: no test specified\" && exit 0",
+		"test:coverage": "echo \"WARNING: no test specified\" && exit 0"
+	},
+	"dependencies": {
+		"@versini/ui-components": "0.0.4",
+		"autoprefixer": "10.4.16",
+		"clsx": "2.0.0",
+		"json5": "2.2.3",
+		"postcss": "8.4.31",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"tailwindcss": "3.3.3",
+		"uuid": "9.0.1"
+	}
+}
diff --git a/packages/documentation/postcss.config.cjs b/packages/documentation/postcss.config.cjs
@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/packages/documentation/public/favicon.ico b/packages/documentation/public/favicon.ico
diff --git a/packages/documentation/src/index.css b/packages/documentation/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/documentation/src/main.tsx b/packages/documentation/src/main.tsx
@@ -0,0 +1,12 @@
+import "./index.css";
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./modules/App/App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+);
diff --git a/packages/documentation/src/modules/App/App.tsx b/packages/documentation/src/modules/App/App.tsx
@@ -0,0 +1,66 @@
+import { Button, Footer } from "@versini/ui-components";
+import { ButtonLink } from "@versini/ui-components";
+import { useEffect } from "react";
+
+function App() {
+	useEffect(() => {
+		document.getElementById("root")?.classList.remove("app-hidden");
+	});
+
+	return (
+		<>
+			<main className="mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl">
+				<h1>UI Components</h1>
+				<section>
+					<h2>Buttons</h2>
+					<div className="my-5 bg-slate-500 p-5">
+						<Button className="mr-2">Default Button</Button>
+						<Button className="mr-2" slim>
+							Slim Button
+						</Button>
+						<ButtonLink className="mr-2" link="#">
+							Link as a Button
+						</ButtonLink>
+						<ButtonLink className="mr-2" slim link="#">
+							Link as a Slim Button
+						</ButtonLink>
+					</div>
+
+					<div className="my-5 bg-slate-900 p-5">
+						<Button className="mr-2" kind="light">
+							Default Button
+						</Button>
+						<Button className="mr-2" slim kind="light">
+							Slim Button
+						</Button>
+						<ButtonLink className="mr-2" link="#" kind="light">
+							Link as a Button
+						</ButtonLink>
+						<ButtonLink className="mr-2" slim link="#" kind="light">
+							Link as a Slim Button
+						</ButtonLink>
+					</div>
+				</section>
+
+				<section>
+					<h2>Footer</h2>
+					<div className="my-5 bg-slate-500 p-5">
+						<Footer
+							row1={
+								<div>
+									App Name v{import.meta.env.BUILDVERSION} -{" "}
+									{import.meta.env.BUILDTIME}
+								</div>
+							}
+							row2={
+								<div>&copy; {new Date().getFullYear()} something something</div>
+							}
+						/>
+					</div>
+				</section>
+			</main>
+		</>
+	);
+}
+
+export default App;
diff --git a/packages/documentation/src/vite-env.d.ts b/packages/documentation/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/documentation/tailwind.config.js b/packages/documentation/tailwind.config.js
@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+};
diff --git a/packages/documentation/tsconfig.json b/packages/documentation/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/documentation/tsconfig.node.json b/packages/documentation/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/documentation/vite.config.ts b/packages/documentation/vite.config.ts
@@ -0,0 +1,43 @@
+/// <reference types="vitest" />
+
+import fs from "fs-extra";
+import { defineConfig } from "vite";
+
+const packageJson = fs.readJSONSync("package.json");
+
+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, "");
+
+export default defineConfig({
+	esbuild: {
+		supported: {
+			"top-level-await": true, //browsers can handle top-level-await features
+		},
+	},
+	test: {
+		globals: true,
+		setupFiles: ["./vitest.setup.ts"],
+		environment: "jsdom",
+		coverage: {
+			provider: "v8",
+			lines: 55,
+			functions: 30,
+			branches: 70,
+			statements: 55,
+		},
+	},
+	define: {
+		"import.meta.env.BUILDTIME": JSON.stringify(buildTime),
+		"import.meta.env.BUILDVERSION": JSON.stringify(packageJson.version),
+	},
+	plugins: [],
+});
diff --git a/packages/documentation/vitest.setup.ts b/packages/documentation/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/packages/ui-components/package.json b/packages/ui-components/package.json
@@ -14,7 +14,7 @@
 	],
 	"scripts": {
 		"clean": "rimraf dist",
-		"dev": "vite --host",
+		"dev": "yarn run clean && vite build --watch --mode development",
 		"build": "yarn run clean && tsc && vite build",
 		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
 		"start": "static-server dist --port 5173",

diff --git a/yarn.lock b/yarn.lock
@@ -2082,7 +2082,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^2.0.0:
+clsx@2.0.0, clsx@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
@@ -2932,7 +2932,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.9, fast-glob@^3.3.0:
+fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
@@ -4029,7 +4029,7 @@ jest-get-type@^29.6.3:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1"
   integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==
 
-jiti@^1.19.1:
+jiti@^1.18.2, jiti@^1.19.1:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
@@ -4133,7 +4133,7 @@ json-stringify-safe@^5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@^2.2.2:
+json5@2.2.3, json5@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -6433,6 +6433,34 @@ tabbable@^6.0.1:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
+[email protected]:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
+  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.12"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
 [email protected], tailwindcss@^3.3.3:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
@@ -6823,7 +6851,7 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-uuid@^9.0.0, uuid@^9.0.1:
+uuid@9.0.1, uuid@^9.0.0, uuid@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==