docs: organize components into groups

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

@@ -9,6 +9,7 @@ import { NotFoundPage } from "../NotFoundPage/index.jsx";
 import { AppBody as AppShellComponent } from "./index.jsx";
 
 const meta = {
+  title: "layouts & pages/AppShell",
   component: AppShellComponent,
   subcomponents: { ErrorPage, NoResults, NotFoundPage },
   globals: {

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

@@ -4,6 +4,7 @@ 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: {

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: {

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

@@ -4,6 +4,7 @@ import { Button as ButtonComponent, VARIANTS, SIZES } from "./index.jsx";
 import { iconControl } from "../icon-control.jsx";
 
 const meta = {
+  title: "forms & controls/Button",
   component: ButtonComponent,
   argTypes: {
     children: {

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

@@ -8,6 +8,7 @@ import { Card as CardComponent, VARIANTS } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "building blocks/Card",
   component: CardComponent,
   globals: {
     background: "primary",

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { CopyButton as CopyButtonComponent } from "./index.jsx";
 
 const meta = {
+  title: "forms & controls/CopyButton",
   component: CopyButtonComponent,
   argTypes: {
     text: {

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

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { CrossfadeTabPanels as CrossfadeTabPanelsComponent } from "./index.jsx";
 import { TabList } from "../TabList/index.jsx";
 import { Tabs } from "../unstyled/Tabs/index.jsx";
+import { CrossfadeTabPanels as CrossfadeTabPanelsComponent } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "navigation & menus/CrossfadeTabPanels",
   component: CrossfadeTabPanelsComponent,
   parameters: {
     docs: {

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DropdownCaretDown as DropdownCaretDownComponent } from "./index.jsx";
 
 const meta = {
+  title: "building blocks/DropdownCaretDown",
   component: DropdownCaretDownComponent,
   argTypes: {
     width: {

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

@@ -5,6 +5,7 @@ import { EntityList as EntityListComponent } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "data & tables/EntityList",
   component: EntityListComponent,
   argTypes: {
     label: {

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

@@ -4,6 +4,7 @@ import { fn } from "@storybook/test";
 import { ErrorPage as ErrorPageComponent } from "./index.jsx";
 
 const meta = {
+  title: "layouts & pages/ErrorPage",
   component: ErrorPageComponent,
   parameters: {
     layout: "fullscreen",

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Footer as FooterComponent } from "./index.jsx";
 
 const meta = {
+  title: "navigation & menus/Footer",
   component: FooterComponent,
   parameters: {
     layout: "fullscreen",

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

@@ -8,6 +8,7 @@ import { MainNavTabs } from "../MainNavTabs/index.jsx";
 import { Header as HeaderComponent } from "./index.jsx";
 
 const meta = {
+  title: "navigation & menus/Header",
   component: HeaderComponent,
   decorators: [
     (Story) => (

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

@@ -6,6 +6,7 @@ import { iconControl } from "../icon-control.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "overlays & dialogs/InfoBox",
   component: InfoBoxComponent,
   argTypes: {
     variant: {

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Link as LinkComponent } from "./index.jsx";
 
 const meta = {
+  title: "building blocks/Link",
   component: LinkComponent,
   argTypes: {
     children: {

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

@@ -4,6 +4,7 @@ import { Tabs } from "../unstyled/Tabs/index.jsx";
 import { MainNavTabs as MainNavTabsComponent } from "./index.jsx";
 
 const meta = {
+  title: "navigation & menus/MainNavTabs",
   component: MainNavTabsComponent,
   argTypes: {
     tabs: {

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

@@ -4,6 +4,7 @@ import { Meter as MeterComponent } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "data & tables/Meter",
   component: MeterComponent,
   argTypes: {
     value: {

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { MobileNavTabs as MobileNavTabsComponent } from "./index.jsx";
 
 const meta = {
+  title: "navigation & menus/MobileNavTabs",
   component: MobileNavTabsComponent,
   parameters: {
     layout: "padded",

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

@@ -6,6 +6,7 @@ import { iconControl } from "../icon-control.jsx";
 import { NoResults as NoResultsComponent } from "./index.jsx";
 
 const meta = {
+  title: "layouts & pages/NoResults",
   component: NoResultsComponent,
   parameters: {
     layout: "fullscreen",

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { NotFoundPage as NotFoundPageComponent } from "./index.jsx";
 
 const meta = {
+  title: "layouts & pages/NotFoundPage",
   component: NotFoundPageComponent,
   parameters: {
     layout: "fullscreen",

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Paginator as PaginatorComponent } from "./index.jsx";
 
 const meta = {
+  title: "data & tables/Paginator",
   component: PaginatorComponent,
   parameters: {
     layout: "padded",

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

@@ -6,6 +6,7 @@ import { SearchInput as SearchInputComponent, SIZES } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "forms & controls/SearchInput",
   component: SearchInputComponent,
   argTypes: {
     label: {

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

@@ -10,6 +10,7 @@ import styles from "./index.stories.module.scss";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { children, beforeIcon, ...argTypes } = buttonMeta.argTypes;
 const meta = {
+  title: "forms & controls/Select",
   component: SelectComponent,
   argTypes: {
     ...argTypes,

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

@@ -6,6 +6,7 @@ import { SingleToggleGroup as SingleToggleGroupComponent } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "forms & controls/SingleToggleGroup",
   component: SingleToggleGroupComponent,
   argTypes: {
     items: {

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Skeleton as SkeletonComponent } from "./index.jsx";
 
 const meta = {
+  title: "loading/Skeleton",
   component: SkeletonComponent,
   argTypes: {
     label: {

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Spinner as SpinnerComponent } from "./index.jsx";
 
 const meta = {
+  title: "loading/Spinner",
   component: SpinnerComponent,
   argTypes: {
     label: {

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

@@ -13,6 +13,7 @@ const cardMetaArgTypes = () => {
 };
 
 const meta = {
+  title: "data & tables/StatCard",
   component: StatCardComponent,
   parameters: {
     layout: "padded",

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

@@ -1,14 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import {
-  Status as StatusComponent,
-  VARIANTS,
   SIZES,
+  Status as StatusComponent,
   STYLES,
+  VARIANTS,
 } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "building blocks/Status",
   component: StatusComponent,
   argTypes: {
     children: {

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

@@ -6,6 +6,7 @@ import { Switch as SwitchComponent } from "./index.jsx";
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "forms & controls/Switch",
   component: SwitchComponent,
   argTypes: {
     isDisabled: {

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

@@ -4,6 +4,7 @@ import { Tabs as UnstyledTabs } from "../unstyled/Tabs/index.jsx";
 import { TabList as TabListComponent } from "./index.jsx";
 
 const meta = {
+  title: "navigation & menus/TabList",
   component: TabListComponent,
   argTypes: {
     items: {

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

@@ -11,6 +11,7 @@ import { Table as TableComponent, type ColumnConfig, type RowConfig, type SortDe
 import styles from "./index.stories.module.scss";
 
 const meta = {
+  title: "data & tables/Table",
   component: TableComponent,
   parameters: {
     layout: "padded",

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Term as TermComponent } from "./index.jsx";
 
 const meta = {
+  title: "typography/Term",
   component: TermComponent,
   argTypes: {
     children: {