Improve component library stories

packages/component-library/.storybook/preview.tsx

@@ -76,7 +76,9 @@ export const decorators: Decorator[] = [
               "data-background": globals.background,
             })}
           >
-            <Story />
+            <div className={styles.storyWrapper}>
+              <Story />
+            </div>
           </BodyProviders>
         )}
       </RootProviders>

packages/component-library/.storybook/storybook.module.scss

@@ -6,8 +6,8 @@ body,
 }
 
 .contents {
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  min-width: 100%;
   color: theme.color("foreground");
   background: theme.color("background", "primary");
   display: grid;
@@ -19,7 +19,6 @@ body,
   }
 
   &[data-layout="padded"] {
-    padding: theme.spacing(10);
     display: block;
     place-content: unset;
   }
@@ -29,3 +28,19 @@ body,
     place-content: unset;
   }
 }
+
+.storyWrapper {
+  padding: theme.spacing(4);
+  width: 100%;
+  max-width: min(100%, 1280px); // xl breakpoint
+  box-sizing: border-box;
+
+  [data-layout="padded"] & {
+    padding: theme.spacing(10);
+  }
+
+  [data-layout="fullscreen"] & {
+    padding: 0;
+    max-width: none;
+  }
+}

packages/component-library/package.json

@@ -68,6 +68,7 @@
     "@storybook/blocks": "catalog:",
     "@storybook/nextjs": "catalog:",
     "@storybook/react": "catalog:",
+    "@storybook/test": "catalog:",
     "@svgr/webpack": "catalog:",
     "@types/jest": "catalog:",
     "@types/react": "catalog:",

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

@@ -1,10 +1,29 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { AppBody as AppShellComponent } from "./index.jsx";
+import type { Props as ErrorPageProps } from "../ErrorPage/index.jsx";
+import { ErrorPage } from "../ErrorPage/index.jsx";
+import { NetworkError as NetworkErrorStory } from "../ErrorPage/index.stories.jsx";
+import { InfoBox } from "../InfoBox/index.jsx";
+import type { Props as NoResultsProps } from "../NoResults/index.jsx";
+import { NoResults } from "../NoResults/index.jsx";
+import { WarningVariant as WarningVariantStory } from "../NoResults/index.stories.jsx";
+import { NotFoundPage } from "../NotFoundPage/index.jsx";
 
 const meta = {
+  title: "layouts & pages/AppShell",
   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 +54,52 @@ 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/Badge/index.stories.module.scss

@@ -0,0 +1,8 @@
+@use "../theme";
+
+.variantsContainer {
+  display: flex;
+  gap: theme.spacing(2);
+  flex-wrap: wrap;
+  align-items: center;
+}

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

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Badge as BadgeComponent, VARIANTS, SIZES, STYLES } from "./index.jsx";
+import { Badge as BadgeComponent, SIZES, STYLES, VARIANTS } from "./index.jsx";
+import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "building blocks/Badge",
   component: BadgeComponent,
   argTypes: {
     children: {
@@ -33,6 +35,7 @@ const meta = {
       },
     },
   },
+  tags: ["autodocs"],
 } satisfies Meta<typeof BadgeComponent>;
 export default meta;
 
@@ -44,3 +47,133 @@ export const Badge = {
     size: "md",
   },
 } satisfies StoryObj<typeof BadgeComponent>;
+
+type Story = StoryObj<typeof BadgeComponent>;
+
+const renderAllVariants = (
+  style: (typeof STYLES)[number],
+  size: (typeof SIZES)[number],
+  children: React.ReactNode,
+) => (
+  <div className={styles.variantsContainer}>
+    {VARIANTS.map((variant) => (
+      <BadgeComponent key={variant} variant={variant} style={style} size={size}>
+        {children}
+      </BadgeComponent>
+    ))}
+  </div>
+);
+
+export const FilledXS: Story = {
+  args: {
+    children: "Badge",
+  },
+  render: ({ children }) => renderAllVariants("filled", "xs", children),
+  argTypes: {
+    variant: { table: { disable: true } },
+    style: { table: { disable: true } },
+    size: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Extra small filled badges in all variants",
+      },
+    },
+  },
+};
+
+export const FilledMD: Story = {
+  args: {
+    children: "Badge",
+  },
+  render: ({ children }) => renderAllVariants("filled", "md", children),
+  argTypes: {
+    variant: { table: { disable: true } },
+    style: { table: { disable: true } },
+    size: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Medium filled badges in all variants",
+      },
+    },
+  },
+};
+
+export const FilledLG: Story = {
+  args: {
+    children: "Badge",
+  },
+  render: ({ children }) => renderAllVariants("filled", "lg", children),
+  argTypes: {
+    variant: { table: { disable: true } },
+    style: { table: { disable: true } },
+    size: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Large filled badges in all variants",
+      },
+    },
+  },
+};
+
+export const OutlineXS: Story = {
+  args: {
+    children: "Badge",
+  },
+  render: ({ children }) => renderAllVariants("outline", "xs", children),
+  argTypes: {
+    variant: { table: { disable: true } },
+    style: { table: { disable: true } },
+    size: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Extra small outline badges in all variants",
+      },
+    },
+  },
+};
+
+export const OutlineMD: Story = {
+  args: {
+    children: "Badge",
+  },
+  render: ({ children }) => renderAllVariants("outline", "md", children),
+  argTypes: {
+    variant: { table: { disable: true } },
+    style: { table: { disable: true } },
+    size: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Medium outline badges in all variants",
+      },
+    },
+  },
+};
+
+export const OutlineLG: Story = {
+  args: {
+    children: "Badge",
+  },
+  render: ({ children }) => renderAllVariants("outline", "lg", children),
+  argTypes: {
+    variant: { table: { disable: true } },
+    style: { table: { disable: true } },
+    size: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Large outline badges in all variants",
+      },
+    },
+  },
+};

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Breadcrumbs as BreadcrumbsComponent } from "./index.jsx";
 
 const meta = {
+  title: "navigation & menus/Breadcrumbs",
   component: BreadcrumbsComponent,
   argTypes: {
     label: {
@@ -25,8 +26,8 @@ export const Breadcrumbs = {
     label: "Breadcrumbs",
     items: [
       { href: "/", label: "Home" },
-      { href: "/foo", label: "Foo" },
-      { label: "Bar" },
+      { href: "#", label: "Products" },
+      { label: "Pyth Core" },
     ],
   },
 } satisfies StoryObj<typeof BreadcrumbsComponent>;

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

@@ -1,20 +1,10 @@
-import * as icons from "@phosphor-icons/react/dist/ssr";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Button as ButtonComponent, VARIANTS, SIZES } from "./index.jsx";
-
-const iconControl = {
-  control: "select",
-  options: Object.keys(icons),
-  mapping: Object.fromEntries(
-    Object.entries(icons).map(([iconName, Icon]) => [
-      iconName,
-      <Icon key={iconName} weights={new Map()} />,
-    ]),
-  ),
-} as const;
+import { iconControl } from "../icon-control.jsx";
 
 const meta = {
+  title: "forms & controls/Button",
   component: ButtonComponent,
   argTypes: {
     children: {