feat: add storybook

.gitignore

@@ -23,11 +23,14 @@ dist-ssr
 *.sln
 *.sw?
 
-# Cypress
-/cypress/videos
-/cypress/screenshots
-
 # Env
 .env
 .env.production
-.envrc
+.envrc
+
+# Storybook
+storybook-static
+
+# Cypress
+/cypress/videos
+/cypress/screenshots

.storybook/main.ts

@@ -0,0 +1,12 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: 'storybook-builder-vite',
+  },
+}

.storybook/preview.ts

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -9,10 +9,10 @@ To have the best dev experience possible, I picked these technologies (they may
 - Vitest + react-testing-library (unit & integration testing)
 - Eslint + Prettier (my linting and styling rules)
 - Cypress (E2E testing)
+- Storybook (UI component explorer)
 
 # TODO:
 
 - Add husky + git-cz + commitizen + lint-staged
-- Add storybook
 - Add vite-plugin-ssr
 - Setup CI with github actions

package.json

@@ -16,7 +16,9 @@
     "coverage": "vitest run --coverage",
     "typecheck": "tsc -b",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/.eslintcache --ext js,jsx,ts,tsx .",
-    "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|gql|graphql|mdx|vue)\""
+    "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|gql|graphql|mdx|vue)\"",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "clsx": "^1.1.1",
@@ -27,7 +29,14 @@
     "tailwindcss": "^3.0.23"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
     "@faker-js/faker": "^6.0.0-alpha.7",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
@@ -40,6 +49,7 @@
     "@typescript-eslint/parser": "^5.13.0",
     "@vitejs/plugin-react": "^1.2.0",
     "autoprefixer": "^10.4.2",
+    "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
     "cypress": "^9.5.1",
     "dotenv": "^16.0.0",
@@ -57,6 +67,7 @@
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
     "start-server-and-test": "^1.14.0",
+    "storybook-builder-vite": "^0.1.17",
     "typescript": "^4.6.2",
     "vite": "^2.8.6",
     "vite-tsconfig-paths": "^3.4.1",

src/stories/Page.stories.tsx

@@ -0,0 +1,25 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react'
+import { within, userEvent } from '@storybook/testing-library'
+import { Page } from './Page'
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof Page>
+
+const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />
+
+export const LoggedOut = Template.bind({})
+
+export const LoggedIn = Template.bind({})
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i })
+  await userEvent.click(loginButton)
+}

src/stories/Page.tsx

@@ -0,0 +1 @@
+export const Page: React.VFC = () => <h1>HELLO</h1>