build(deps): add storybook

chore: add storybook + stories for most components

chore: add remaining stories

add storybook add-ons plugin

formatting

add lint-staged

update README

ignore stories for eslint

ignore stories for eslint

ignore for storybook directory

don't ignore stories

update glob pattern again

exclude stories and mdx files from eslint by reviewdog

.eslintrc.json

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

.github/workflows/reviewdog.yaml

@@ -6,6 +6,10 @@ name: 🐶 reviewdog
 on:
   pull_request:
     branches: ["main"]
+    paths-ignore:
+      - "src/stories/**"
+      - "*stories.{js,jsx,ts,tsx}"
+      - "**/*.mdx"
 
 jobs:
   eslint:

.gitignore

@@ -28,3 +28,5 @@ yarn-error.log*
 **/.vscode/
 
 **/.DS_Store
+
+*storybook.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.