feat(ui): add storybook (#11)

libs/web/shared/ui/.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from "storybook-framework-qwik";
+import type { InlineConfig } from "vite";
+
+const config: StorybookConfig = {
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
+  ],
+  framework: {
+    name: "storybook-framework-qwik",
+  },
+  core: {
+    renderer: "storybook-framework-qwik",
+  },
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  viteFinal: async (config: InlineConfig) => {
+    return config;
+  },
+};
+
+export default config;

libs/web/shared/ui/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

libs/web/shared/ui/.storybook/preview.tsx

@@ -0,0 +1,16 @@
+import type { Parameters } from "storybook-framework-qwik";
+
+import "../src/styles.css";
+
+export const parameters: Parameters = {
+  a11y: {
+    config: {},
+    options: {
+      checks: { "color-contrast": { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
+  options: {
+    showRoots: true,
+  },
+};

libs/web/shared/ui/project.json

@@ -32,6 +32,18 @@
       "options": {
         "lintFilePatterns": ["libs/web/shared/ui/**/*.{ts,tsx,js,jsx}"]
       }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/web/shared/ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
     }
   },
   "tags": []

libs/web/shared/ui/src/lib/button/button.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import {
+  Button,
+  ButtonSizes,
+  type ButtonProps,
+  ButtonVariants,
+} from "./button";
+
+const meta = {
+  component: Button,
+  title: "Button",
+  argTypes: {
+    disabled: {
+      description: "Button disabled",
+      control: { type: "boolean" },
+    },
+    size: {
+      description: "Button size",
+      options: ButtonSizes,
+      control: { type: "inline-radio" },
+    },
+    variant: {
+      description: "Button variant",
+      options: ButtonVariants,
+      control: { type: "inline-radio" },
+    },
+    rounded: {
+      description: "Button rounded",
+      control: { type: "boolean" },
+    }
+  },
+} satisfies Meta<ButtonProps>;
+
+type Story = StoryObj<ButtonProps>;
+
+export default meta;
+
+export const Primary = {
+  args: {
+    disabled: false,
+    size: "base",
+    variant: "primary",
+    rounded: false,
+  },
+  render: (props) => <Button {...props}>Getting Started</Button>,
+} satisfies Story;

libs/web/shared/ui/src/lib/button/button.tsx

@@ -4,7 +4,7 @@ export const Button = component$<ButtonProps>((props) => {
   const {
     size = "base",
     variant = "primary",
-    shape = "base",
+    rounded = false,
     disabled = false,
     ...rest
   } = props;
@@ -24,7 +24,7 @@ export const Button = component$<ButtonProps>((props) => {
   } satisfies { [K in ButtonVariant | "disabled"]: string };
 
   const Shapes = {
-    base: "rounded-lg",
+    base: "rounded-md",
     rounded: "rounded-full",
   } satisfies { [K in ButtonShape]: string };
 
@@ -34,23 +34,31 @@ export const Button = component$<ButtonProps>((props) => {
       class={[
         Sizes[size],
         Variants[disabled ? "disabled" : variant],
-        Shapes[shape],
+        Shapes[rounded ? "rounded" : "base"],
       ]}
     >
       <Slot />
     </button>
   );
 });
 
-export type ButtonSize = "small" | "base" | "large";
-export type ButtonVariant = "primary" | "secondary" | "tertiary" | "error";
-export type ButtonShape = "base" | "rounded";
+export const ButtonSizes = [ "small", "base", "large" ] as const;
+export type ButtonSizeTuple = typeof ButtonSizes;
+export type ButtonSize = ButtonSizeTuple[number];
+
+export const ButtonVariants = ["primary", "secondary", "tertiary", "error"] as const;
+export type ButtonVariantTuple = typeof ButtonVariants;
+export type ButtonVariant = ButtonVariantTuple[number];
+
+export const ButtonShape = ["base", "rounded"] as const;
+export type ButtonShapeTuple = typeof ButtonShape;
+export type ButtonShape = ButtonShapeTuple[number];
 
 type NativeButton = QwikIntrinsicElements["button"];
 
-interface ButtonProps extends NativeButton {
+export interface ButtonProps extends NativeButton {
   size?: ButtonSize;
   variant?: ButtonVariant;
-  shape?: ButtonShape;
+  rounded?: boolean;
   disabled?: boolean;
 }

libs/web/shared/ui/tsconfig.json

@@ -30,6 +30,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
     }
   ]
 }

libs/web/shared/ui/tsconfig.storybook.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "exclude": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx"],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts",
+    ".storybook/preview.tsx",
+    "src/**/*.d.ts"
+  ]
+}

package.json

@@ -14,9 +14,16 @@
     "@nx/eslint-plugin": "17.2.8",
     "@nx/js": "17.2.8",
     "@nx/playwright": "17.2.7",
+    "@nx/storybook": "^17.2.8",
     "@nx/vite": "17.2.8",
     "@nx/workspace": "17.2.7",
     "@playwright/test": "^1.36.0",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-themes": "^7.6.7",
+    "@storybook/core-server": "^7.6.7",
     "@swc-node/register": "~1.6.7",
     "@swc/core": "~1.3.85",
     "@types/node": "^20.10.5",
@@ -37,6 +44,7 @@
     "postcss": "^8.4.32",
     "prettier": "^2.6.2",
     "qwik-nx": "^2.0.2",
+    "storybook-framework-qwik": "^0.2.5",
     "tailwindcss": "^3.4.0",
     "typescript": "~5.3.3",
     "vite": "^5.0.0",