Add storybook

Implement storybook for visual testing of components.

categories/web/action/react/.eslintrc

@@ -5,7 +5,8 @@
     "react/jsx-props-no-spreading": "off",
     "react/button-has-type": "off",
     "import/no-extraneous-dependencies": "off",
-		"no-tabs": "off"
+		"no-tabs": "off",
+    "indent": "off"
   },
   "extends": [
     "lxsmnsyc/typescript/react"

categories/web/action/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -28,7 +29,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/action/react/src/components/ActionButton/ActionButton.stories.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ActionButton, ActionButtonProps } from '.';
+import { Button } from '@tesseract-design/web-base';
+
+const meta: Meta<typeof ActionButton> = {
+	component: ActionButton,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			options: Button.AVAILABLE_TYPES,
+		},
+		variant: {
+			control: { type: 'select' },
+			options: Button.AVAILABLE_VARIANTS,
+		},
+		size: {
+			control: { type: 'select' },
+			options: Button.AVAILABLE_SIZES,
+		},
+		onClick: {
+			table: {
+				disable: true,
+			},
+			action: 'clicked',
+		},
+	},
+	args: ActionButton.defaultProps ?? {},
+};
+
+export const Story = (args: Omit<ActionButtonProps, 'ref'>) => (
+	<ActionButton
+		{...args}
+	>
+		Button
+	</ActionButton>
+);
+
+export default meta;

categories/web/blob/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/choice/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/color/react/package.json

@@ -30,7 +30,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/formatted/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/freeform/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/information/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/multichoice/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/navigation/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -28,7 +29,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/navigation/react/src/components/LinkButton/LinkButton.stories.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { LinkButton, LinkButtonProps } from '.';
+import { Button } from '@tesseract-design/web-base';
+
+const meta: Meta<typeof LinkButton> = {
+	component: LinkButton,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			options: Button.AVAILABLE_TYPES,
+		},
+		variant: {
+			control: { type: 'select' },
+			options: Button.AVAILABLE_VARIANTS,
+		},
+		size: {
+			control: { type: 'select' },
+			options: Button.AVAILABLE_SIZES,
+		},
+		onClick: {
+			table: {
+				disable: true,
+			},
+			action: 'clicked',
+		},
+	},
+	args: LinkButton.defaultProps ?? {},
+};
+
+export const Story = (args: Omit<LinkButtonProps, 'ref'>) => (
+	<LinkButton
+		{...args}
+	>
+		Button
+	</LinkButton>
+);
+
+export default meta;

categories/web/number/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

categories/web/temporal/react/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.1"
   },
   "peerDependencies": {

storybook/react/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

storybook/react/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+	stories: ["../../../categories/web/*/react/src/**/*.stories.tsx"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-onboarding",
+		"@storybook/addon-interactions",
+		{
+			name: "@storybook/addon-styling",
+			options: {},
+		},
+		{
+			name: "@storybook/addon-styling",
+			options: {},
+		},
+	],
+	core: {
+		builder: "@storybook/builder-vite",
+	},
+	framework: {
+		name: "@storybook/react-vite",
+		options: {},
+	},
+};
+
+export default config;

storybook/react/.storybook/preview-body.html

@@ -0,0 +1 @@
+<html class="bg-negative text-positive tracking-normal font-semi-expanded"></html>

storybook/react/.storybook/preview.ts

@@ -0,0 +1,30 @@
+import type { Preview } from "@storybook/react";
+
+import { withThemeByClassName } from "@storybook/addon-styling";
+
+/* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
+import "../index.css";
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+
+	decorators: [
+		// withThemeByClassName({
+		// 	themes: {
+		// 		light: "light",
+		// 		dark: "dark",
+		// 	},
+		// 	defaultTheme: "light",
+		// }),
+	],
+};
+
+export default preview;

storybook/react/index.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind utilities;
+@tailwind components;
+
+:root {
+--color-shade: 0 0 0;
+--color-negative: 34 34 34;
+--color-positive: 238 238 238;
+--color-primary: 199 138 179;
+--color-secondary: 215 95 75;
+--color-tertiary: 255 153 0;
+--color-code-number: 116 249 94;
+--color-code-keyword: 255 67 137;
+--color-code-type: 80 151 210;
+--color-code-instance-attribute: 118 167 210;
+--color-code-function: 103 194 82;
+--color-code-parameter: 145 94 194;
+--color-code-property: 255 161 201;
+--color-code-string: 238 211 113;
+--color-code-variable: 139 194 117;
+--color-code-regexp: 116 167 43;
+--color-code-url: 0 153 204;
+--color-code-global: 194 128 80;
+--font-sans: Encode Sans, sans-serif;
+--font-headings: Glory, var(--font-sans), sans-serif;
+--font-mono: MonoLisa, mononoki, monospace;
+}

storybook/react/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@tesseract-design/web-storybook-react",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "storybook dev -p 6006",
+    "build": "storybook build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/builder-vite": "^7.4.0",
+    "@storybook/react": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
+    "eslint-plugin-storybook": "^0.6.13",
+    "storybook": "^7.3.2"
+  },
+  "dependencies": {
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/react-vite": "^7.4.0",
+    "@types/node": "20.5.7",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "autoprefixer": "10.4.15",
+    "eslint": "8.48.0",
+    "eslint-config-next": "13.4.19",
+    "postcss": "8.4.28",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.2.2"
+  }
+}

storybook/react/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

storybook/react/tailwind.config.ts

@@ -0,0 +1,38 @@
+import {Config} from 'tailwindcss';
+
+const config: Config = {
+	content: [
+		'../../categories/web/*/react/src/**/*.tsx',
+	],
+	theme: {
+		colors: {
+			'sidebar': 'rgb(var(--color-sidebar)',
+			'topbar': 'rgb(var(--color-topbar)',
+
+			'shade': 'rgb(var(--color-shade))',
+			'negative': 'rgb(var(--color-negative))',
+			'positive': 'rgb(var(--color-positive))',
+			'primary': 'rgb(var(--color-primary))',
+			'secondary': 'rgb(var(--color-secondary))',
+			'tertiary': 'rgb(var(--color-tertiary))',
+			'code-number': 'rgb(var(--color-code-number))',
+			'code-keyword': 'rgb(var(--color-code-keyword))',
+			'code-type': 'rgb(var(--color-code-type))',
+			'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
+			'code-function': 'rgb(var(--color-code-function))',
+			'code-parameter': 'rgb(var(--color-code-parameter))',
+			'code-property': 'rgb(var(--color-code-property))',
+			'code-string': 'rgb(var(--color-code-string))',
+			'code-variable': 'rgb(var(--color-code-variable))',
+			'code-regexp': 'rgb(var(--color-code-regexp))',
+			'code-url': 'rgb(var(--color-code-url))',
+			'code-global': 'rgb(var(--color-code-global))',
+			'current': 'currentcolor',
+			'inherit': 'inherit',
+			'transparent': 'transparent',
+		},
+	},
+	plugins: [],
+};
+
+export default config;

storybook/react/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "target": "es2018"
+  }
+}