feat(ui): update tokens, clean up component, add doc ui references

waldronmatt · Oct 10, 2023 · a3838e6 · a3838e6
1 parent 070c562
commit a3838e6
Show file tree

Hide file tree

Showing 17 changed files with 7,610 additions and 2,141 deletions.
diff --git a/.gitignore b/.gitignore
@@ -147,3 +147,6 @@ coverage/
 
 # nx
 nx-cloud.env
+
+# Storybook
+storybook-static
diff --git a/README.md b/README.md
@@ -125,7 +125,7 @@ Delete workspace root `node_modules` and `pnpm-lock.yaml` files:
 **Note**: Install `rimraf` globally and make sure it is not installed in the workspace root so errors aren't thrown.
 
 ```bash
-pnpm clear
+pnpm delete
 ```
 
 Lint root and `configs/` `js/cjs` files, check for secrets, lint dependency versions, validate published packages, and verify monorepo best practices:

diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json",
-  "packages": ["apps/*", "configs/*", "packages/*"],
+  "packages": ["apps/*", "configs/*", "docs/*", "packages/*"],
   "npmClient": "pnpm",
   "loglevel": "verbose",
   "version": "independent",

diff --git a/package.json b/package.json
@@ -6,12 +6,13 @@
   "workspaces": [
     "apps/*",
     "configs/**",
+    "docs/**",
     "packages/*"
   ],
   "scripts": {
     "prepare": "husky install",
     "commit": "git-cz",
-    "clear": "rimraf pnpm-lock.yaml node_modules",
+    "delete": "rimraf pnpm-lock.yaml node_modules",
     "nx:graph": "npx nx graph",
     "format": "prettier --write .",
     "preview:version": "lerna version --dry-run --yes",
@@ -31,8 +32,8 @@
     "preview": "npx nx run-many -t preview",
     "stub": "npx nx run-many -t stub",
     "bootstrap:ci": "pnpm i --frozen-lockfile",
-    "lint:ci": "npx nx affected -t lint --parallel=3",
     "build:ci": "npx nx affected -t build --parallel=3",
+    "lint:ci": "npx nx affected -t lint --parallel=3",
     "test:ci": "npx nx affected -t test:prod --parallel=3",
     "version:ci": "lerna version --yes",
     "publish:ci": "lerna publish from-package --yes"

diff --git a/packages/ui/LICENSE b/packages/ui/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Matthew Waldron
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -15,7 +15,8 @@ pnpm add @waldronmatt/demo-ui
 Used named imports to enable `js` and `css` treeshaking:
 
 ```tsx
-import '@waldronmatt/demo-ui/styles/global.css'; // add global tokens
+// add global tokens
+import '@waldronmatt/demo-ui/styles/global.css';
 import { Button } from '@waldronmatt/demo-ui';
 // or import the component directly
 // import { Button } from '@waldronmatt/demo-ui/components/Button/index.js';
@@ -33,7 +34,7 @@ export default App;
 
 ## Styles
 
-This component library was tested and built using [the-new-css-reset/css/reset.css](https://github.com/elad2412/the-new-css-reset) reset library and the [sanitize.css](https://github.com/csstools/sanitize.css/). However, this library **does not** come with these libraries included. To use, import into your app's entrypoint above the app and component imports:
+This component library was tested and built using [the-new-css-reset](https://github.com/elad2412/the-new-css-reset) reset library and the [sanitize.css](https://github.com/csstools/sanitize.css/) normalize library. However, this library **does not** come with these libraries included. To use, import into your app's entrypoint above the app and component imports:
 
 ```bash
 pnpm add the-new-css-reset sanitize.css

diff --git a/packages/ui/lib/components/Button/button.module.css b/packages/ui/lib/components/Button/button.module.css
@@ -1,15 +1,18 @@
 .button {
+  border: 1px solid #000;
+  background-color: #d3d3d3;
+  cursor: pointer;
   padding: 1rem;
 }
 
 .sm {
-  font-size: var(--font-size-sm);
+  font-size: var(--demo-ui-font-size-sm);
 }
 
 .md {
-  font-size: var(--font-size-md);
+  font-size: var(--demo-ui-font-size-md);
 }
 
 .lg {
-  font-size: var(--font-size-lg);
+  font-size: var(--demo-ui-font-size-lg);
 }
diff --git a/packages/ui/lib/components/Button/button.spec.tsx b/packages/ui/lib/components/Button/button.spec.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Button } from '@/Button/index.js';
 
-test('loads and displays greeting', async () => {
+test('loads and displays greeting', () => {
   render(<Button>Hello World</Button>);
   expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
   // css module class names get randomized on prod build,

diff --git a/packages/ui/lib/components/Button/button.tsx b/packages/ui/lib/components/Button/button.tsx
@@ -8,12 +8,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 export function Button({ children, variant = 'md', ...nativeProps }: ButtonProps): JSX.Element {
-  const { className, ...props } = nativeProps;
   return (
-    <button type="button" className={`${className} ${styles.button} ${styles[variant]}`} {...props}>
+    <button type="button" className={`${styles.button} ${styles[variant]}`} {...nativeProps}>
       {children}
     </button>
   );
 }
-
-Button.displayName = 'Button';
diff --git a/packages/ui/lib/components/Link/link.module.css b/packages/ui/lib/components/Link/link.module.css
@@ -1,15 +1,17 @@
-.a {
+.link {
+  color: #0f62fe;
+  text-decoration: underline;
   padding: 1rem;
 }
 
 .sm {
-  font-size: var(--font-size-sm);
+  font-size: var(--demo-ui-font-size-sm);
 }
 
 .md {
-  font-size: var(--font-size-md);
+  font-size: var(--demo-ui-font-size-md);
 }
 
 .lg {
-  font-size: var(--font-size-lg);
+  font-size: var(--demo-ui-font-size-lg);
 }
diff --git a/packages/ui/lib/components/Link/link.spec.tsx b/packages/ui/lib/components/Link/link.spec.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Link } from '@/Link/index.js';
 
-test('loads and displays greeting', async () => {
+test('loads and displays greeting', () => {
   render(<Link href="/">Hello World</Link>);
   expect(screen.getByRole('link')).toBeEnabled();
   // css module class names get randomized on prod build,

diff --git a/packages/ui/lib/components/Link/link.tsx b/packages/ui/lib/components/Link/link.tsx
@@ -8,12 +8,9 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
 }
 
 export function Link({ children, variant = 'md', ...nativeProps }: LinkProps): JSX.Element {
-  const { className, ...props } = nativeProps;
   return (
-    <a className={`${className} ${styles.link} ${styles[variant]}`} {...props}>
+    <a className={`${styles.link} ${styles[variant]}`} {...nativeProps}>
       {children}
     </a>
   );
 }
-
-Link.displayName = 'Link';
diff --git a/packages/ui/lib/global.css b/packages/ui/lib/global.css
diff --git a/packages/ui/lib/styles/global.css b/packages/ui/lib/styles/global.css
@@ -0,0 +1,5 @@
+:root {
+  --demo-ui-font-size-sm: 10px;
+  --demo-ui-font-size-md: 20px;
+  --demo-ui-font-size-lg: 30px;
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -10,7 +10,8 @@
       "types": "./dist/main.d.ts",
       "import": "./dist/main.js"
     },
-    "./*": "./dist/*"
+    "./*": "./dist/*",
+    "./lib/*": "./lib/*"
   },
   "files": [
     "dist",
@@ -25,8 +26,8 @@
     "test": "jest --coverage",
     "test:watch": "jest --watch",
     "test:prod": "cross-env TEST_ENV=prod NODE_OPTIONS=--experimental-vm-modules jest",
-    "clean": "rimraf dist coverage tsconfig.build.tsbuildinfo",
-    "build": "tsc --p ./tsconfig.build.json && vite build"
+    "build": "tsc --p ./tsconfig.build.json && vite build",
+    "clean": "rimraf dist coverage tsconfig.build.tsbuildinfo"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -22,8 +22,8 @@ export default defineConfig({
     viteStaticCopy({
       targets: [
         {
-          src: 'lib/global.css',
-          dest: 'styles',
+          src: 'lib/styles/global.css',
+          dest: 'styles/',
         },
       ],
     }),