docs: add ErrorPage, NoResults, and NotFoundPage as subcomponents of AppShell stories

packages/component-library/src/AppShell/index.stories.tsx

@@ -1,10 +1,26 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { ErrorPage, type Props as ErrorPageProps } from "../ErrorPage/index.jsx";
+import { NetworkError as NetworkErrorStory } from "../ErrorPage/index.stories.jsx";
+import { InfoBox } from "../InfoBox/index.jsx";
+import { NoResults, type Props as NoResultsProps } from "../NoResults/index.jsx";
+import { WarningVariant as WarningVariantStory } from "../NoResults/index.stories.jsx";
+import { NotFoundPage } from "../NotFoundPage/index.jsx";
 import { AppBody as AppShellComponent } from "./index.jsx";
 
 const meta = {
   component: AppShellComponent,
+  subcomponents: { ErrorPage, NoResults, NotFoundPage },
   globals: {
+    args: {
+    appName: "Component Library",
+    children: "Hello world!",
+    tabs: [
+      { children: "Home", segment: "" },
+      { children: "Products", segment: "products" },
+      { children: "Developers", segment: "developers" },
+    ],
+  },
     bare: true,
     theme: {
       disable: true,
@@ -35,17 +51,54 @@ const meta = {
       },
     },
   },
+  tags: ["autodocs"],
 } satisfies Meta<typeof AppShellComponent>;
 export default meta;
 
 export const AppShell = {
   args: {
-    appName: "Component Library",
-    children: "Hello world!",
-    tabs: [
-      { children: "Home", segment: "" },
-      { children: "Foo", segment: "foo" },
-      { children: "Bar", segment: "bar" },
-    ],
+    ...meta.globals?.args,
   },
+  render: (args) => (
+    <AppShellComponent {...args}>
+      <InfoBox>
+        {args.children}
+      </InfoBox>
+    </AppShellComponent>
+  )
 } satisfies StoryObj<typeof AppShellComponent>;
+
+type Story = StoryObj<typeof meta>;
+
+export const ErrorStory: Story = {
+  args: {
+    ...meta.globals?.args,
+  },
+  render: (args) => (
+    <AppShellComponent {...args}>
+      <ErrorPage {...NetworkErrorStory.args as ErrorPageProps} />
+    </AppShellComponent>
+  )
+};
+
+export const NoResultsStory: Story = {
+  args: {
+    ...meta.globals?.args,
+  },
+  render: (args) => (
+    <AppShellComponent {...args}>
+      <NoResults {...WarningVariantStory.args as NoResultsProps} />
+    </AppShellComponent>
+  )
+};
+
+export const NotFoundStory: Story = {
+  args: {
+    ...meta.globals?.args,
+  },
+  render: (args) => (
+    <AppShellComponent {...args}>
+      <NotFoundPage />
+    </AppShellComponent>
+  )
+};

packages/component-library/src/NoResults/index.tsx

@@ -4,10 +4,10 @@ import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass"
 import clsx from "clsx";
 import type { ReactNode } from "react";
 
-import styles from "./index.module.scss";
 import { Button } from "../Button/index.jsx";
+import styles from "./index.module.scss";
 
-type Props = {
+export type Props = {
   className?: string | undefined;
   onClearSearch?: (() => void) | undefined;
 } & (