docs: switch to CSF Next

Author: scriptcoded

packages/storybook/.storybook/main.ts

@@ -1,7 +1,7 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import { defineMain } from "@storybook/react-vite/node";
 import type { UserConfig } from "vite";
 
-const config: StorybookConfig = {
+export default defineMain({
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-docs",
@@ -29,5 +29,4 @@ const config: StorybookConfig = {
       ],
     } satisfies UserConfig);
   },
-};
-export default config;
+});

packages/storybook/.storybook/preview.ts

@@ -1,15 +1,21 @@
-import type { Preview } from "@storybook/react-vite";
-
-import "@scouterna/ui-webc/dist/ui-webc/ui-webc.css";
-
 import { setCustomElementsManifest } from "@stencil/storybook-plugin";
+import { definePreview } from "@storybook/react-vite";
 import kebabCase from "lodash.kebabcase";
 import customElements from "../../ui-webc/dist/custom-elements.json";
-// This export isn't very nice, but @stencil/storybook-plugin doesn't expose this functionality
+import addonDocs from "@storybook/addon-docs";
+import addonA11y from "@storybook/addon-a11y";
+import addonVitest from "@storybook/addon-vitest";
+
+// This import isn't very nice, but @stencil/storybook-plugin doesn't expose this functionality
 import { parameters } from "../node_modules/@stencil/storybook-plugin/dist/entry-preview-argtypes";
 
+// Include styles to have our web components render correctly
+import "@scouterna/ui-webc/dist/ui-webc/ui-webc.css";
+
+// Register the custom elements manifest for Stencil integration
 setCustomElementsManifest(customElements);
 
+// Utility for converting our React component display names to web component tag names
 const getComponentWebcName = (component: unknown): string | null => {
   if (
     component &&
@@ -23,9 +29,11 @@ const getComponentWebcName = (component: unknown): string | null => {
   return null;
 };
 
-const preview: Preview = {
+export default definePreview({
+  addons: [addonDocs(), addonA11y(), addonVitest()],
   parameters: {
     docs: {
+      // Automatically extract argTypes and component descriptions from web components
       extractArgTypes: (component: unknown) => {
         const webcName = getComponentWebcName(component);
         if (!webcName) return null;
@@ -36,7 +44,8 @@ const preview: Preview = {
         if (!webcName) return null;
         return parameters.docs.extractComponentDescription(webcName);
       },
-    },
+      // biome-ignore lint/suspicious/noExplicitAny: We need to cast becuase these are internal APIs.
+    } as any,
     actions: {
       argTypesRegex: "^onScout.*",
     },
@@ -48,11 +57,9 @@ const preview: Preview = {
     },
     options: {
       storySort: {
-        order: ["Basics", "Jamboree26"],
+        order: ["Basics", "Jamboree26", ["Bottom Bar", "Bottom Bar Item"]],
       },
     },
   },
   tags: ["autodocs"],
-};
-
-export default preview;
+});

packages/storybook/package.json

@@ -3,6 +3,13 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "imports": {
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx"
+    ]
+  },
   "scripts": {
     "build": "storybook build",
     "dev": "storybook dev -p 6006 --no-open"

packages/storybook/src/stories/bottom-bar-item.stories.tsx

@@ -1,21 +1,18 @@
 import { ScoutBottomBarItem } from "@scouterna/ui-react";
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
 import BonfireIcon from "iconoir/icons/bonfire.svg?raw";
+import preview from "#.storybook/preview";
 
-const meta = {
+const meta = preview.meta({
   title: "Jamboree26/Bottom Bar Item",
   component: ScoutBottomBarItem,
   parameters: {
     layout: "centered",
   },
-} satisfies Meta<typeof ScoutBottomBarItem>;
+});
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const BottomBarItem: Story = {
+export const BottomBarItem = meta.story({
   args: {
     icon: BonfireIcon,
     label: "Activities",
@@ -25,4 +22,4 @@ export const BottomBarItem: Story = {
       <ScoutBottomBarItem {...args} />
     </div>
   ),
-};
+});

packages/storybook/src/stories/bottom-bar.stories.tsx

@@ -1,24 +1,21 @@
 import { ScoutBottomBar, ScoutBottomBarItem } from "@scouterna/ui-react";
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
 import BonfireIcon from "iconoir/icons/bonfire.svg?raw";
 import CalendarIcon from "iconoir/icons/calendar.svg?raw";
 import MapIcon from "iconoir/icons/map.svg?raw";
 import MoreHorizIcon from "iconoir/icons/more-horiz.svg?raw";
+import preview from "#.storybook/preview";
 
-const meta = {
+const meta = preview.meta({
   title: "Jamboree26/Bottom Bar",
   component: ScoutBottomBar,
   parameters: {
     layout: "centered",
   },
-} satisfies Meta<typeof ScoutBottomBar>;
+});
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const BasicExample: Story = {
+export const BasicExample = meta.story({
   args: {},
   render: (args) => (
     <div style={{ maxWidth: "24rem", width: "100vw" }}>
@@ -30,4 +27,4 @@ export const BasicExample: Story = {
       </ScoutBottomBar>
     </div>
   ),
-};
+});

packages/storybook/src/stories/button.stories.tsx

@@ -1,24 +1,22 @@
 import { ScoutButton } from "@scouterna/ui-react";
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import preview from "#.storybook/preview";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta = preview.meta({
   title: "Basics/Button",
   component: ScoutButton,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered",
   },
-} satisfies Meta<typeof ScoutButton>;
+});
 
 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 = {
+export const Primary = meta.story({
   args: {
     variant: "primary",
   },
   render: (args) => <ScoutButton {...args}>Hello, World!</ScoutButton>,
-};
+});

packages/ui-react/lib/components/stencil-generated/components.ts

@@ -25,14 +25,14 @@ export const ScoutBottomBar: StencilReactComponent<ScoutBottomBarElement, ScoutB
     defineCustomElement: defineScoutBottomBar
 });
 
-export type ScoutBottomBarItemEvents = NonNullable<unknown>;
+export type ScoutBottomBarItemEvents = { onScoutClick: EventName<CustomEvent<void>> };
 
 export const ScoutBottomBarItem: StencilReactComponent<ScoutBottomBarItemElement, ScoutBottomBarItemEvents> = /*@__PURE__*/ createComponent<ScoutBottomBarItemElement, ScoutBottomBarItemEvents>({
     tagName: 'scout-bottom-bar-item',
     elementClass: ScoutBottomBarItemElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {} as ScoutBottomBarItemEvents,
+    events: { onScoutClick: 'scoutClick' } as ScoutBottomBarItemEvents,
     defineCustomElement: defineScoutBottomBarItem
 });
 

packages/ui-webc/src/components.d.ts

@@ -10,8 +10,16 @@ import { Variant } from "./components/button/button";
 export { ItemType } from "./components/bottom-bar-item/bottom-bar-item";
 export { Variant } from "./components/button/button";
 export namespace Components {
+    /**
+     * The bottom bar component is used in the Jamboree26 app to provide
+     * navigation at the bottom of the screen.
+     */
     interface ScoutBottomBar {
     }
+    /**
+     * A bottom bar item used within the bottom bar for navigation. Should not be
+     * used outside of a bottom bar.
+     */
     interface ScoutBottomBarItem {
         "active"?: boolean;
         "href"?: string;
@@ -37,18 +45,41 @@ export namespace Components {
         "variant": Variant;
     }
 }
+export interface ScoutBottomBarItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLScoutBottomBarItemElement;
+}
 export interface ScoutButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLScoutButtonElement;
 }
 declare global {
+    /**
+     * The bottom bar component is used in the Jamboree26 app to provide
+     * navigation at the bottom of the screen.
+     */
     interface HTMLScoutBottomBarElement extends Components.ScoutBottomBar, HTMLStencilElement {
     }
     var HTMLScoutBottomBarElement: {
         prototype: HTMLScoutBottomBarElement;
         new (): HTMLScoutBottomBarElement;
     };
+    interface HTMLScoutBottomBarItemElementEventMap {
+        "scoutClick": void;
+    }
+    /**
+     * A bottom bar item used within the bottom bar for navigation. Should not be
+     * used outside of a bottom bar.
+     */
     interface HTMLScoutBottomBarItemElement extends Components.ScoutBottomBarItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLScoutBottomBarItemElementEventMap>(type: K, listener: (this: HTMLScoutBottomBarItemElement, ev: ScoutBottomBarItemCustomEvent<HTMLScoutBottomBarItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLScoutBottomBarItemElementEventMap>(type: K, listener: (this: HTMLScoutBottomBarItemElement, ev: ScoutBottomBarItemCustomEvent<HTMLScoutBottomBarItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLScoutBottomBarItemElement: {
         prototype: HTMLScoutBottomBarItemElement;
@@ -81,13 +112,22 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * The bottom bar component is used in the Jamboree26 app to provide
+     * navigation at the bottom of the screen.
+     */
     interface ScoutBottomBar {
     }
+    /**
+     * A bottom bar item used within the bottom bar for navigation. Should not be
+     * used outside of a bottom bar.
+     */
     interface ScoutBottomBarItem {
         "active"?: boolean;
         "href"?: string;
         "icon": string;
         "label": string;
+        "onScoutClick"?: (event: ScoutBottomBarItemCustomEvent<void>) => void;
         /**
           * @default "button"
          */
@@ -118,7 +158,15 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * The bottom bar component is used in the Jamboree26 app to provide
+             * navigation at the bottom of the screen.
+             */
             "scout-bottom-bar": LocalJSX.ScoutBottomBar & JSXBase.HTMLAttributes<HTMLScoutBottomBarElement>;
+            /**
+             * A bottom bar item used within the bottom bar for navigation. Should not be
+             * used outside of a bottom bar.
+             */
             "scout-bottom-bar-item": LocalJSX.ScoutBottomBarItem & JSXBase.HTMLAttributes<HTMLScoutBottomBarItemElement>;
             /**
              * A simple button component.

packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.tsx

@@ -1,8 +1,12 @@
-import { Component, h, Prop } from "@stencil/core";
+import { Component, Event, type EventEmitter, h, Prop } from "@stencil/core";
 import clsx from "clsx";
 
 export type ItemType = "button" | "link";
 
+/**
+ * A bottom bar item used within the bottom bar for navigation. Should not be
+ * used outside of a bottom bar.
+ */
 @Component({
   tag: "scout-bottom-bar-item",
   styleUrl: "bottom-bar-item.css",
@@ -16,6 +20,9 @@ export class BottomBarItem {
   @Prop() label!: string;
   @Prop() active?: boolean;
 
+  @Event()
+  scoutClick: EventEmitter<void>;
+
   render() {
     const Tag = this.type === "link" ? "a" : "button";
 
@@ -27,7 +34,11 @@ export class BottomBarItem {
         : {};
 
     return (
-      <Tag class={clsx("button", this.active && "active")} {...props}>
+      <Tag
+        class={clsx("button", this.active && "active")}
+        onClick={() => this.scoutClick.emit()}
+        {...props}
+      >
         <span class="icon" innerHTML={this.icon} />
         <span class="label">{this.label}</span>
       </Tag>

packages/ui-webc/src/components/bottom-bar-item/readme.md

@@ -5,6 +5,11 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+A bottom bar item used within the bottom bar for navigation. Should not be
+used outside of a bottom bar.
+
 ## Properties
 
 | Property             | Attribute | Description | Type                 | Default     |
@@ -16,6 +21,13 @@
 | `type`               | `type`    |             | `"button" \| "link"` | `"button"`  |
 
 
+## Events
+
+| Event        | Description | Type                |
+| ------------ | ----------- | ------------------- |
+| `scoutClick` |             | `CustomEvent<void>` |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*