fix(ui): init commit

docs/ui/.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  extends: ['custom/storybook.cjs'],
+  ignorePatterns: ['dist/**'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['tsconfig.eslint.json'],
+    tsconfigRootDir: __dirname,
+  },
+};

docs/ui/.storybook/main.js

@@ -0,0 +1,26 @@
+import { dirname, join, resolve } from 'path';
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config = {
+  stories: ['../stories/*.mdx', '../stories/*.stories.tsx', '../stories/**/*.stories.tsx'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+
+  core: {},
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

docs/ui/.storybook/preview.js

@@ -0,0 +1,5 @@
+// reset/normalize styles
+import 'the-new-css-reset/css/reset.css';
+import 'sanitize.css';
+// global css variable tokens
+import '@waldronmatt/demo-ui/lib/styles/global.css';

docs/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.

docs/ui/README.md

@@ -0,0 +1,7 @@
+# Demo UI Storybook
+
+Demo UI Storybook repo.
+
+## License
+
+MIT

docs/ui/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "demo-ui-storybook",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "storybook build --docs",
+    "clean": "rimraf storybook-static",
+    "preview": "serve storybook-static"
+  },
+  "dependencies": {
+    "@waldronmatt/demo-ui": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sanitize.css": "^13.0.0",
+    "the-new-css-reset": "^1.11.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-docs": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-vite": "^7.4.0",
+    "@storybook/types": "^7.4.6",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^1.3.2",
+    "eslint-config-custom": "workspace:^",
+    "rimraf": "^3.0.2",
+    "serve": "^13.0.4",
+    "storybook": "^7.4.0",
+    "tsconfig-config": "workspace:^",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.5"
+  }
+}

docs/ui/stories/Intro.mdx

@@ -0,0 +1,28 @@
+# Demo UI Components
+
+Welcome to the Demo UI Component Library.
+
+## Installation
+
+Install dependencies:
+
+`pnpm add @waldronmatt/demo-ui`
+
+## Getting Started
+
+Used named imports to enable `js` and `css` treeshaking:
+
+```
+  import '@waldronmatt/demo-ui/styles/global.css';
+  import { Button } from '@waldronmatt/demo-ui';
+
+  function App() {
+    return (
+      <>
+        <Button>Hello</Button>
+      </>
+    );
+  }
+
+  export default App;
+```

docs/ui/stories/button.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryFn } from '@storybook/react';
+// we use `lib/` paths so we can get source files and have storybook
+// auto refresh (hmr) whenever we update our component source files
+import { Button } from '@waldronmatt/demo-ui/lib/components/Button/index.js';
+import type { ButtonProps } from '@waldronmatt/demo-ui/lib/components/Button/index.js';
+
+const defaultProps = {
+  children: 'Hello World',
+};
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['md', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof Button> = (args: ButtonProps) => {
+  return <Button {...args}></Button>;
+};
+
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+export const Large = Template.bind({});
+
+Default.args = {
+  ...defaultProps,
+  variant: 'md',
+};
+
+Small.args = {
+  ...defaultProps,
+  variant: 'sm',
+};
+
+Large.args = {
+  ...defaultProps,
+  variant: 'lg',
+};

docs/ui/stories/link.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryFn } from '@storybook/react';
+// we use `lib/` paths so we can get source files and have storybook
+// auto refresh (hmr) whenever we update our component source files
+import { Link } from '@waldronmatt/demo-ui/lib/components/Link/index.js';
+import type { LinkProps } from '@waldronmatt/demo-ui/lib/components/Link/index.js';
+
+const defaultProps = {
+  children: 'Hello World',
+  href: '/',
+};
+
+const meta: Meta<typeof Link> = {
+  title: 'Components/Link',
+  component: Link,
+  argTypes: {
+    variant: {
+      options: ['md', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof Link> = (args: LinkProps) => {
+  return <Link {...args}></Link>;
+};
+
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+export const Large = Template.bind({});
+
+Default.args = {
+  ...defaultProps,
+  variant: 'md',
+};
+
+Small.args = {
+  ...defaultProps,
+  variant: 'sm',
+};
+
+Large.args = {
+  ...defaultProps,
+  variant: 'lg',
+};

docs/ui/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "include": [".*.cjs", "*.cjs", "stories/*"],
+  "compilerOptions": {
+    "allowJs": true
+  }
+}

docs/ui/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "tsconfig-config/vite.json",
+  "include": ["stories"],
+  "exclude": ["node_modules", "dist"]
+}