build(deps): add storybook (#53)

Author: kahboom

.eslintrc.json

@@ -5,7 +5,13 @@
 		"plugin:react-hooks/recommended",
 		"prettier"
 	],
-	"ignorePatterns": ["**/*.stories.tsx"],
+	"ignorePatterns": [
+		"**/*.mdx",
+		"**/*.stories.(ts,tsx)",
+		"src/stories/**",
+		"src/modules/*.stories.(js,ts,jsx,tsx)",
+		"src/modules/components/*.stories.(js,ts,jsx,tsx)"
+	],
 	"plugins": ["react-hooks"],
 	"overrides": [
 		// Only use Testing Library lint rules in test files

.github/workflows/format.yaml

@@ -13,7 +13,8 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+
       - name: Check prettify code
         uses: creyD/prettier_action@v4.3
         with:

.github/workflows/reviewdog.yaml

@@ -20,7 +20,7 @@ jobs:
       - uses: reviewdog/action-eslint@v1
         with:
           reporter: github-check
-          eslint_flags: "src/"
+          eslint_flags: "src/ --ignore-pattern '**/*.stories.{js,jsx,ts,tsx}' --ignore-pattern '**/*.mdx'"
 
   action-lint:
     name: Action lint

.gitignore

@@ -20,6 +20,7 @@
 .env.production.local
 
 npm-debug.log*
+*storybook.log*
 yarn-debug.log*
 yarn-error.log*
 

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -2,7 +2,6 @@
 build*
 node_modules*
 .next*
-**/generated/**
 LICENSE
 .gitignore
 .tekton

.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+import path from "path";
+
+const config: StorybookConfig = {
+	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+	],
+	framework: {
+		name: "@storybook/nextjs",
+		options: {},
+	},
+	docs: {
+		autodocs: "tag",
+	},
+	webpackFinal: async config => {
+		if (config.resolve) {
+			config.resolve.alias = {
+				...config.resolve.alias,
+				"@": path.resolve(__dirname, "../src"),
+				react: path.resolve("./node_modules/react"),
+				"react-dom": path.resolve("./node_modules/react-dom"),
+				"./src/modules/x509/decode": require.resolve(
+					"../src/modules/x509/decode",
+				),
+			};
+		}
+		return config;
+	},
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import "@patternfly/patternfly/patternfly.css";
+import "@patternfly/patternfly/utilities/Accessibility/accessibility.css";
+import "@patternfly/patternfly/utilities/Display/display.css";
+import "@patternfly/patternfly/utilities/Flex/flex.css";
+import "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import "@patternfly/patternfly/utilities/Spacing/spacing.css";
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+};
+
+export default preview;

README.md

@@ -42,6 +42,16 @@ Launches the test runner in the interactive watch mode.
 
 Tests are co-located and live as closely to corresponding code as possible.
 
+## Stories
+
+We use [Storybook](https://storybook.js.org/) for [Component Driven Development](https://www.componentdriven.org/) (CDD) where possible. Storybook makes it easy to keep presentational components isolated. You can learn more about how to create a story for your UI component [here](https://storybook.js.org/docs/react/writing-stories/introduction).
+
+To run Storybook locally: `npm run storybook`
+
+```bash
+npm run storybook
+```
+
 ## Deploy
 
 The app is based on [Next.JS](https://nextjs.org/) and is automatically built & deployed to GitHub Pages when pushing to the `main` branch.