add docs with storybook

README.md

@@ -14,9 +14,9 @@
 - [x] improve CI deployment workflow to trigger only for changed apps
 - [x] run typecheck, lint, test and build in parallel
 - [x] setup tailwindcss in remix
-- [ ] create shared ui lib
-- [ ] setup Storybook in shared ui lib
-- [ ] (?) build and deploy Storybook to fly.io
+- [x] create shared ui lib
+- [x] setup Storybook in shared ui lib
+- [ ] (?) build and deploy Storybook
 - [x] set unified path aliases for all apps and shared libs (done for `apps/`, because `libs/` probably don't need them anyway)
 - [x] add unused imports plugin to eslint
 - [ ] research if it's worth using `turbo`
@@ -26,8 +26,11 @@
 ## References
 
 - https://pnpm.io/next/filtering
-- https://github.com/remix-run/indie-stack/tree/main
-- 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://github.com/remix-run/indie-stack/tree/main - remix app example
+- https://github.com/sveltejs/kit/tree/master - svelte kit - pnpm monorepo
+- https://github.com/nestjs/nest/tree/master/sample - nestjs samples
+- https://fly.io/docs/reference/configuration/#the-processes-section - fly.io config
+- https://github.com/vercel/turbo/tree/main/examples - turbo repo examples
+- https://github.com/storybookjs/storybook
 - https://storybook.js.org/tutorials/design-systems-for-developers/react/en/architecture/
+-

apps/docs/.eslintrc.cjs

@@ -0,0 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  // extends: ["@repo/eslint-config/storybook.js"],
+}

apps/docs/.storybook/main.ts

@@ -0,0 +1,21 @@
+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',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+
+export default config

apps/docs/.storybook/preview.ts

@@ -0,0 +1,30 @@
+import '@repo/ui/styles.css'
+import type { Preview } from '@storybook/react'
+import { withThemeByClassName } from '@storybook/addon-themes'
+import { themes } from '@storybook/theming'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      theme: themes.dark,
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'dark',
+    }),
+  ],
+}
+
+export default preview

apps/docs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "docs",
+  "type": "module",
+  "scripts": {
+    "develop": "storybook dev -p 6006",
+    "build": "storybook build --docs",
+    "start": "serve storybook-static",
+    "clean": "rm -rf .turbo && rm -rf node_modules",
+    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
+  },
+  "dependencies": {
+    "@repo/ui": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/tailwind-config": "workspace:*",
+    "@repo/tsconfig": "workspace:*",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@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/addon-themes": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/theming": "^7.5.3",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.54.0",
+    "postcss": "^8.4.31",
+    "serve": "^14.2.1",
+    "storybook": "^7.5.3",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.3.2",
+    "vite": "^4.1.0"
+  }
+}

apps/docs/postcss.config.cjs

@@ -0,0 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/docs/stories/button.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from '@repo/ui'
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    type: {
+      control: { type: 'radio' },
+      options: ['button', 'submit', 'reset'],
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: props => (
+    <Button
+      {...props}
+      onClick={(): void => {
+        // eslint-disable-next-line no-alert -- alert for demo
+        alert('Hello from Turborepo!')
+      }}
+    >
+      Hello
+    </Button>
+  ),
+  name: 'Button',
+  args: {
+    children: 'Hello',
+    type: 'button',
+  },
+}

apps/docs/tailwind.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'tailwindcss'
+import sharedConfig from '@repo/tailwind-config/tailwind.config'
+
+const config: Pick<Config, 'presets'> = {
+  presets: [sharedConfig],
+}
+
+export default config

apps/docs/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/tsconfig/react-app.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

apps/nestjs/.eslintrc.js

@@ -1,6 +1,6 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@company/eslint-config/base'],
+  extends: ['@repo/eslint-config/base'],
   env: {
     node: true,
   },

apps/nestjs/package.json

@@ -23,7 +23,7 @@
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@company/eslint-config": "workspace:*",
+    "@repo/eslint-config": "workspace:*",
     "@company/types": "workspace:*",
     "@nestjs/cli": "^10.0.0",
     "@nestjs/schematics": "^10.0.0",

apps/remix/.eslintrc.cjs

@@ -1,6 +1,6 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@company/eslint-config/base', '@company/eslint-config/react'],
+  extends: ['@repo/eslint-config/base', '@repo/eslint-config/react'],
   settings: {
     'import/resolver': {
       typescript: {

apps/remix/app/routes/_index.tsx

@@ -1,5 +1,6 @@
 import { json, type MetaFunction } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
+import { Button } from '@repo/ui'
 import { Card } from '@repo/ui/components/card'
 
 import { catsApi } from '~/api/cats.api'
@@ -34,6 +35,8 @@ export default function Index() {
       <Card title="Card component" href="#components">
         Imported from internal @repo/ui package
       </Card>
+
+      <Button>Button: Imported from internal @repo/ui package</Button>
     </div>
   )
 }

apps/remix/package.json

@@ -20,7 +20,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@company/eslint-config": "workspace:*",
+    "@repo/eslint-config": "workspace:*",
     "@company/types": "workspace:*",
     "@remix-run/dev": "^2.3.1",
     "@remix-run/eslint-config": "^2.3.1",

libs/eslint-config/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@company/eslint-config",
+  "name": "@repo/eslint-config",
   "files": [
     "base.js",
     "react.js"

libs/tsconfig/react-app.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React app",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "target": "es5"
+  }
+}

libs/types/.eslintrc.js

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

libs/types/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "main": "index.ts",
   "devDependencies": {
-    "@company/eslint-config": "workspace:*",
+    "@repo/eslint-config": "workspace:*",
     "typescript": "^5.3.2"
   }
 }

libs/ui/postcss.config.js

@@ -1,9 +1,8 @@
 // If you want to use other PostCSS plugins, see the following:
 // https://tailwindcss.com/docs/using-with-preprocessors
-
 module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

libs/ui/src/components/button.tsx

@@ -0,0 +1,18 @@
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode
+}
+
+export const Button = ({ children, ...props }: ButtonProps) => {
+  return (
+    <button
+      type="button"
+      className="rounded-md bg-indigo-500 px-4 py-2 text-white"
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+Button.displayName = 'Button'

libs/ui/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './button'
+export * from './card'

libs/ui/src/index.tsx

@@ -1,5 +1,6 @@
 // styles
-import "./styles.css";
+import './styles.css'
 
 // components
-export * from "./components/card";
+export * from './components/card'
+export * from './components/button'

package.json

@@ -2,11 +2,13 @@
   "name": "pnpm-monorepo",
   "private": true,
   "scripts": {
+    "build:docs": "pnpm -F docs build",
     "build:nestjs": "pnpm -F nestjs build",
     "build:remix": "pnpm -F remix build",
     "build": "pnpm run -r build",
     "deploy:nestjs": "fly deploy --config ./apps/nestjs/fly.toml --dockerfile ./apps/nestjs/Dockerfile",
     "deploy:remix": "fly deploy --config ./apps/remix/fly.toml --dockerfile ./apps/remix/Dockerfile",
+    "develop:docs": "pnpm -F docs develop",
     "develop:nestjs": "pnpm -F nestjs develop",
     "develop:remix": "pnpm -F remix develop",
     "develop:ui": "pnpm -F ui develop",
@@ -17,7 +19,6 @@
     "start:nestjs": "pnpm -F nestjs start",
     "start:remix": "pnpm -F remix start",
     "start": "pnpm -r start",
-    "storybook:run": "pnpm -F ui storybook:run",
     "test": "pnpm -r test",
     "test:e2e": "pnpm -r test:e2e",
     "test:nestjs": "pnpm -F nestjs test",