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

.eslintrc.json

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

.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.