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

testing

fix newline

.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/[email protected]
         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.