feat(global): add a demo react ui library

waldronmatt · Oct 1, 2023 · 02b78b5 · 02b78b5
1 parent 5bb886d
commit 02b78b5
Show file tree

Hide file tree

Showing 24 changed files with 1,105 additions and 106 deletions.
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  extends: ['custom/react.cjs'],
+  ignorePatterns: ['dist/**'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['tsconfig.eslint.json'],
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -0,0 +1,32 @@
+# Demo-UI
+
+A demo react component library.
+
+## Installation
+
+Install dependencies:
+
+```bash
+pnpm add @waldronmatt/demo-ui
+```
+
+## Getting Started
+
+```tsx
+import { Button, Link } from '@waldronmatt/demo-ui';
+
+function App() {
+  return (
+    <>
+      <Button>Hello</Button>
+      <Link href="/">World</Link>
+    </>
+  );
+}
+
+export default App;
+```
+
+## License
+
+MIT
diff --git a/packages/ui/identity-obj-proxy-esm.cjs b/packages/ui/identity-obj-proxy-esm.cjs
@@ -0,0 +1,19 @@
+// https://github.com/keyz/identity-obj-proxy/issues/8#issuecomment-618429796
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+const proxy = new Proxy(
+  {},
+  {
+    get: function getter(target, key) {
+      switch (key) {
+        case '__esModule':
+          return true;
+        case 'default':
+          return proxy;
+        default:
+          return key;
+      }
+    },
+  },
+);
+module.exports = proxy;
diff --git a/packages/ui/index.html b/packages/ui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/ui/jest.config.cjs b/packages/ui/jest.config.cjs
@@ -0,0 +1,11 @@
+const mappedModule = process.env.TEST_ENV === 'prod' ? '<rootDir>/dist/$1' : '<rootDir>/lib/components/$1';
+
+module.exports = {
+  preset: 'jest-config',
+  testMatch: ['<rootDir>/lib/**/*?(*.)+(spec|test).+(ts|tsx)'],
+  moduleNameMapper: {
+    '^@/(.*)\\.js$': mappedModule,
+    '\\.(css|scss)$': '<rootDir>/identity-obj-proxy-esm.cjs',
+  },
+  testEnvironment: 'jsdom',
+};
diff --git a/packages/ui/lib/components/Button/button.module.css b/packages/ui/lib/components/Button/button.module.css
@@ -0,0 +1,15 @@
+.button {
+  padding: 1rem;
+}
+
+.sm {
+  font-size: var(--font-size-sm);
+}
+
+.md {
+  font-size: var(--font-size-md);
+}
+
+.lg {
+  font-size: var(--font-size-lg);
+}
diff --git a/packages/ui/lib/components/Button/button.spec.tsx b/packages/ui/lib/components/Button/button.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Button } from '@/Button/index.js';
+
+test('loads and displays greeting', async () => {
+  render(<Button>Hello World</Button>);
+  expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+  expect(screen.getByRole('button')).toHaveClass('button md');
+  expect(screen.getByRole('button')).toBeEnabled();
+});
diff --git a/packages/ui/lib/components/Button/button.tsx b/packages/ui/lib/components/Button/button.tsx
@@ -0,0 +1,19 @@
+import styles from './button.module.css';
+// This vite config is configured to use aliases so you can do something like:
+// import { Link } from '@/Link/index.js';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant?: string;
+}
+
+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}>
+      {children}
+    </button>
+  );
+}
+
+Button.displayName = 'Button';
diff --git a/packages/ui/lib/components/Button/index.tsx b/packages/ui/lib/components/Button/index.tsx
@@ -0,0 +1 @@
+export { Button, type ButtonProps } from './button.js';
diff --git a/packages/ui/lib/components/Link/index.tsx b/packages/ui/lib/components/Link/index.tsx
@@ -0,0 +1 @@
+export { Link, type LinkProps } from './link.js';
diff --git a/packages/ui/lib/components/Link/link.module.css b/packages/ui/lib/components/Link/link.module.css
@@ -0,0 +1,15 @@
+.a {
+  padding: 1rem;
+}
+
+.sm {
+  font-size: var(--font-size-sm);
+}
+
+.md {
+  font-size: var(--font-size-md);
+}
+
+.lg {
+  font-size: var(--font-size-lg);
+}
diff --git a/packages/ui/lib/components/Link/link.spec.tsx b/packages/ui/lib/components/Link/link.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Link } from '@/Link/index.js';
+
+test('loads and displays greeting', async () => {
+  render(<Link href="/">Hello World</Link>);
+  expect(screen.getByRole('link')).toBeEnabled();
+  expect(screen.getByRole('link')).toHaveClass('link md');
+  expect(screen.getByRole('link')).toHaveAttribute('href', '/');
+});
diff --git a/packages/ui/lib/components/Link/link.tsx b/packages/ui/lib/components/Link/link.tsx
@@ -0,0 +1,19 @@
+import styles from './link.module.css';
+// This vite config is configured to use aliases so you can do something like:
+// import { Button } from '@/Button/index.js';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: React.ReactNode;
+  variant?: string;
+}
+
+export function Link({ children, variant = 'md', ...nativeProps }: LinkProps): JSX.Element {
+  const { className, ...props } = nativeProps;
+  return (
+    <a className={`${className} ${styles.link} ${styles[variant]}`} {...props}>
+      {children}
+    </a>
+  );
+}
+
+Link.displayName = 'Link';
diff --git a/packages/ui/lib/global.css b/packages/ui/lib/global.css
@@ -0,0 +1,5 @@
+:root {
+  --font-size-small: 10px;
+  --font-size-medium: 20px;
+  --font-size-large: 30px;
+}
diff --git a/packages/ui/lib/main.ts b/packages/ui/lib/main.ts
@@ -0,0 +1,5 @@
+import 'the-new-css-reset/css/reset.css';
+import 'sanitize.css';
+import './global.css';
+export { Button } from './components/Button/index.js';
+export { Link } from './components/Link/index.js';
diff --git a/packages/ui/lib/vite-env.d.ts b/packages/ui/lib/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@waldronmatt/demo-ui",
+  "version": "1.0.0",
+  "main": "./dist/main.js",
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js"
+    },
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "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"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.0.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.2.3",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-custom": "workspace:^",
+    "glob": "^10.3.7",
+    "jest": "^29.3.1",
+    "jest-config": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "sanitize.css": "^13.0.0",
+    "the-new-css-reset": "^1.11.0",
+    "tsconfig-config": "workspace:^",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-dts": "^3.5.4",
+    "vite-plugin-lib-inject-css": "^1.3.0"
+  }
+}
diff --git a/packages/ui/tsconfig.build.json b/packages/ui/tsconfig.build.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [".*.cjs", "*.cjs", "*.config.ts", "lib/**/*.spec.tsx"],
+  "compilerOptions": {
+    "rootDir": "./lib",
+    "outDir": "dist"
+  }
+}
diff --git a/packages/ui/tsconfig.eslint.json b/packages/ui/tsconfig.eslint.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "include": [".*.cjs", "*.cjs", "*.config.ts", "lib/**/*"],
+  "compilerOptions": {
+    "allowJs": true
+  }
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "tsconfig-config/vite.json",
+  "include": ["lib"],
+  "exclude": ["node_modules", "dist", "coverage"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["lib/components/*"]
+    }
+  }
+}
diff --git a/packages/ui/tsconfig.node.json b/packages/ui/tsconfig.node.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "tsconfig-config/vite-node.json",
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -0,0 +1,51 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
+import alias from '@rollup/plugin-alias';
+import { extname, relative, resolve } from 'path';
+import { fileURLToPath } from 'node:url';
+import { glob } from 'glob';
+import react from '@vitejs/plugin-react-swc';
+
+export default defineConfig({
+  plugins: [
+    alias({ entries: [{ find: '@', replacement: '/lib/components' }] }),
+    react(),
+    dts({
+      // enables output directory to match compiled files
+      entryRoot: 'lib',
+      include: ['lib'],
+      exclude: ['lib/**/*.spec.tsx'],
+    }),
+    libInjectCss(),
+  ],
+  build: {
+    copyPublicDir: false,
+    lib: {
+      entry: resolve(__dirname, 'lib/main.ts'),
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['react', 'react/jsx-runtime'],
+      input: Object.fromEntries(
+        glob
+          .sync('lib/**/*.{ts,tsx,css}', {
+            ignore: ['lib/**/*.spec.tsx'],
+          })
+          .map((file) => [
+            // The name of the entry point
+            // lib/nested/foo.ts becomes nested/foo
+            relative('lib', file.slice(0, file.length - extname(file).length)),
+            // The absolute path to the entry file
+            // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
+            fileURLToPath(new URL(file, import.meta.url)),
+          ]),
+      ),
+      output: {
+        sourcemap: true,
+        assetFileNames: 'styles/[name].css',
+        entryFileNames: '[name].js',
+      },
+    },
+  },
+});