feat: add storybook (#199)

.eslintrc.cjs

@@ -24,6 +24,7 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "prettier",
+    "plugin:storybook/recommended",
   ],
 
   // eslint-disable-next-line prettier/prettier
@@ -77,7 +78,7 @@ module.exports = {
     "node_modules/",
   ],
 
-  // this is a hack to make sure eslint will look at all of the file extensions we
+  // this is a hack to make sure eslint will look at all the file extensions we
   // care about without having to put it on the command line
   overrides: [
     {

.gitignore

@@ -31,3 +31,6 @@ npm-debug.log*
 
 crate/target
 crate/Cargo.lock
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,55 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+import path, { join, dirname } from "path";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../client/src/**/*.mdx",
+    "../client/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    },
+  },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          configFile: "client/tsconfig.json",
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
+    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: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

client/.gitignore

@@ -1,2 +1,4 @@
 # generating openapi client can generate error logs.
 *.log
+
+*storybook.log

client/src/app/pages/home/home.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Home } from "./home";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Home",
+  component: Home,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+} satisfies Meta<typeof Home>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

client/src/app/pages/vulnerability-details/overview.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Overview } from "./overview";
+
+const meta = {
+  title: "Vulnerabilities/Vulnerability Details/Overview",
+  component: Overview,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Overview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    vulnerability: {
+      // type VulnerabilityHead
+      cwes: [],
+      description: "Some description here",
+      discovered: "And here",
+      identifier: "vulny-wulny",
+      title: "Some Fun Vulnerability",
+      modified: null,
+      normative: false,
+      published: null,
+      released: null,
+      withdrawn: null,
+      average_score: null,
+      average_severity: null,
+
+      // advisories, if any
+      advisories: [],
+    },
+  },
+};

client/src/app/pages/vulnerability-details/vulnerability-details.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { CveDetails } from "./vulnerability-details";
+
+const meta = {
+  title: "Vulnerabilities/Vulnerability Details/Vulnerability Details",
+  component: CveDetails,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CveDetails>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};