init storybook in ui lib

README.md

@@ -21,6 +21,7 @@
 - [x] add unused imports plugin to eslint
 - [ ] research if it's worth using `turbo`
 - [ ] create diagram
+- [ ] setup renovate
 
 ## References
 
@@ -29,3 +30,4 @@
 - https://github.com/sveltejs/kit/tree/master
 - https://github.com/nestjs/nest/tree/master/sample
 - https://fly.io/docs/reference/configuration/#the-processes-section
+- https://storybook.js.org/tutorials/design-systems-for-developers/react/en/architecture/

apps/remix/remix.config.js

@@ -2,9 +2,8 @@
 export default {
   ignoredRouteFiles: ['**/.*'],
 
-  // appDirectory: "app",
-  // assetsBuildDirectory: "public/build",
-  // publicPath: "/build/",
-  // serverBuildPath: "build/index.js",
+  // Bundle UI lib, so that it's not necessary to include build step within the lib itself.
   serverDependenciesToBundle: ['@company/ui'],
+  // Restart server when UI lib changes
+  watchPaths: ['../../libs/ui/**/*'],
 }

libs/ui/.eslintrc.js

@@ -1,4 +1,4 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@company/eslint-config/base', '@company/eslint-config/react'],
+  extends: ['@company/eslint-config/base', '@company/eslint-config/react', 'plugin:storybook/recommended'],
 }

libs/ui/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+
+export default config

libs/ui/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

libs/ui/button.tsx

@@ -5,7 +5,7 @@ export type ButtonProps = {
 
 export const Button = ({ children, ...props }: ButtonProps) => {
   return (
-    <button className="bg-blue-500 p-4 text-white" {...props}>
+    <button className="bg-red-500 p-4 uppercase text-white" {...props}>
       {children}
     </button>
   )

libs/ui/components/button/button.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './button'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: { onClick: { action: 'clicked' } },
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    // layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+
+  // // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: 'color' },
+  // },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    // primary: true,
+    children: 'Button',
+    // onClick: () => action
+  },
+}
+
+// export const Secondary: Story = {
+//   args: {
+//     label: 'Button',
+//   },
+// }
+
+// export const Large: Story = {
+//   args: {
+//     size: 'large',
+//     label: 'Button',
+//   },
+// }
+
+// export const Small: Story = {
+//   args: {
+//     size: 'small',
+//     label: 'Button',
+//   },
+// }

libs/ui/components/button/button.tsx

@@ -0,0 +1,12 @@
+export type ButtonProps = {
+  onClick: () => void
+  children: React.ReactNode
+}
+
+export const Button = ({ children, ...props }: ButtonProps) => {
+  return (
+    <button className="bg-red-500 p-4 uppercase text-white" {...props}>
+      {children}
+    </button>
+  )
+}

libs/ui/package.json

@@ -2,13 +2,27 @@
   "name": "@company/ui",
   "private": true,
   "main": "index.ts",
-  "devDependencies": {
-    "@company/eslint-config": "workspace:*",
-    "@types/react": "^18.2.20",
-    "typescript": "^5.3.2"
+  "scripts": {
+    "storybook:run": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@company/eslint-config": "workspace:*",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.38",
+    "eslint-plugin-storybook": "^0.6.15",
+    "storybook": "^7.5.3",
+    "typescript": "^5.3.2"
   }
 }

libs/ui/stories/Button.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

libs/ui/stories/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};