feat(storybook): add v1 page stories (#261)

.storybook/main.ts

@@ -26,7 +26,7 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-webpack5"),
     options: {},
   },
-  staticDirs: ["../public"],
+  staticDirs: ["../public", "../client/public", "../client/src/app/images"],
   typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {
@@ -46,6 +46,12 @@ const config: StorybookConfig = {
         }),
       ];
     }
+    if (config.module) {
+      config.module.rules?.push({
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      });
+    }
     return config;
   },
 };

.storybook/preview.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 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 "@patternfly/patternfly/patternfly-addons.css";
 import type { Preview } from "@storybook/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { initialize, mswLoader } from "msw-storybook-addon";

client/package.json

@@ -57,6 +57,7 @@
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.53.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -110,16 +111,5 @@
   },
   "msw": {
     "workerDirectory": "public"
-  },
-  "imports": {
-    "#useSbomsOfVulnerability": {
-      "storybook": "./src/app/hooks/domain-controls/useSbomsOfVulnerability.mock.ts",
-      "default": "./src/app/hooks/domain-controls/useSbomsOfVulnerability.ts"
-    },
-    "#*": [
-      "./*",
-      "./*.ts",
-      "./*.tsx"
-    ]
   }
 }

client/src/app/layout/header.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { HeaderApp } from "@app/layout/header";
+import { MemoryRouter } from "react-router-dom";
+import { fn } from "@storybook/test";
+import * as actual from "@app/hooks/useBranding";
+
+const useBranding = fn(actual.useBranding).mockName("useBranding");
+
+import { BrandingStrings } from "@trustify-ui/common";
+
+const meta = {
+  title: "Components/Layout/HeaderApp",
+  component: HeaderApp,
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={["/"]}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+} satisfies Meta<typeof HeaderApp>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockBrandingStrings: BrandingStrings = {
+  application: {
+    title: "Mock Trustify",
+    name: "Mock App",
+    description: "A description of the mock application.",
+  },
+  about: {
+    displayName: "Mock Trustify Display Name",
+    imageSrc: "/branding/images/masthead-logo.svg",
+    documentationUrl: "https://mock-docs.example.com",
+  },
+  masthead: {
+    leftBrand: {
+      src: "/mock-left-brand.svg",
+      alt: "Mock Left Brand",
+      height: "40px",
+    },
+    leftTitle: {
+      text: "Mock Left Title",
+      heading: "h1",
+      size: "xl",
+    },
+    rightBrand: {
+      src: "/mock-right-brand.svg",
+      alt: "Mock Right Brand",
+      height: "40px",
+    },
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    rightBrand: {},
+  },
+  async beforeEach() {
+    useBranding.mockImplementation(() => mockBrandingStrings);
+  },
+};

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

@@ -4,7 +4,7 @@ import { BrowserRouter } from "react-router-dom";
 import { AdvisoriesByVulnerability } from "./advisories-by-vulnerability";
 
 const meta = {
-  title: "Components/vulnerability-details/advisories-by-vulnerability.tsx",
+  title: "Components/VulnerabilityDetails/AdvisoriesByVulnerability",
   component: AdvisoriesByVulnerability,
   parameters: {
     layout: "fullscreen",

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Overview } from "./overview";
 
 const meta = {
-  title: "Components/vulnerability-details/overview.tsx",
+  title: "Components/VulnerabilityDetails/Overview",
   component: Overview,
   parameters: {
     layout: "fullscreen",

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

@@ -5,7 +5,7 @@ import { PackagesByVulnerability } from "./packages-by-vulnerability";
 import React from "react";
 
 const meta = {
-  title: "Components/vulnerability-details/packages-by-vulnerability.tsx",
+  title: "Components/VulnerabilityDetails/PackagesByVulnerability",
   component: PackagesByVulnerability,
   parameters: {
     layout: "fullscreen",

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

@@ -5,7 +5,7 @@ import { BrowserRouter } from "react-router-dom";
 import { SbomsByVulnerability } from "./sboms-by-vulnerability";
 
 const meta = {
-  title: "Components/vulnerability-details/sboms-by-vulnerability.tsx",
+  title: "Components/VulnerabilityDetails/SbomsByVulnerability",
   component: SbomsByVulnerability,
   parameters: {
     layout: "fullscreen",

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

@@ -4,7 +4,7 @@ import React from "react";
 import { CveDetails } from "./vulnerability-details";
 
 const meta = {
-  title: "Components/vulnerability-details/vulnerability-details.tsx",
+  title: "Components/VulnerabilityDetails/VulnerabilityDetails",
   component: CveDetails,
   parameters: {
     query: {

client/src/app/pages/vulnerability-list/components/SbomsCount.stories.tsx

@@ -2,15 +2,17 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 import { SbomsCount } from "./SbomsCount";
-import { sbomList } from "@mocks/data";
 import { SbomOfVulnerabilitySummary } from "@app/hooks/domain-controls/useSbomsOfVulnerability";
 import { AxiosError } from "axios";
 import { http, HttpResponse } from "msw";
 import { cveDetails } from "@mocks/handlers";
+import getSboms from "@mocks/data/sbom/list.json";
+import { fn } from "@storybook/test";
+import * as actual from "@app/hooks/domain-controls/useSbomsOfVulnerability";
 
-import { useSbomsOfVulnerability as mockUseSbomsOfVulnerability } from "#useSbomsOfVulnerability.mock";
-
-const useSbomsOfVulnerability = mockUseSbomsOfVulnerability;
+const useSbomsOfVulnerability = fn(actual.useSbomsOfVulnerability).mockName(
+  "useSbomsOfVulnerability"
+);
 
 type StoryArgs = {
   fetchError?: AxiosError<unknown, any>;
@@ -213,6 +215,6 @@ export const PopulatedState: Story = {
     });
   },
   parameters: {
-    mockReturnValue: sbomList,
+    mockReturnValue: getSboms,
   },
 };

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

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { VulnerabilityList } from "./vulnerability-list";
 import { MemoryRouter, Routes, Route } from "react-router-dom";
-import { handlers } from "@mocks/handlers";
 
 const meta = {
   title: "Components/VulnerabilityList/VulnerabilityList",

client/src/app/pages/vulnerability-list/vulnerability-toolbar.stories.tsx

@@ -540,7 +540,7 @@ const customContextData = {
 };
 
 const meta = {
-  title: "Components/vulnerability-list/vulnerability-toolbar.tsx",
+  title: "Components/VulnerabilityList/VulnerabilityToolbar",
   component: VulnerabilityToolbar,
   tags: ["autodocs"],
   decorators: [