refactor(storybook): replace fake knobs with controls for simple stories

package.json

@@ -38,6 +38,7 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.6",
     "@storybook/addon-a11y": "8.0.9",
+    "@storybook/addon-controls": "8.0.9",
     "@storybook/addon-docs": "8.0.9",
     "@storybook/addon-interactions": "8.0.9",
     "@storybook/addon-mdx-gfm": "8.0.9",

packages/calcite-components/.storybook/helpers.ts

@@ -10,5 +10,3 @@ export const iconNames = Object.keys(icons)
       .replace(iPrefixedNumberIconNamePattern, "$1")
       .localeCompare(b.replace(iPrefixedNumberIconNamePattern, "$1"));
   });
-
-export { boolean } from "./fake-knobs";

packages/calcite-components/.storybook/interfaces.ts

@@ -0,0 +1,56 @@
+/* Note: using `.d.ts` file extension will exclude it from the output build */
+export type Alignment = "start" | "center" | "end";
+export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
+export type FlipContext = "both" | "start" | "end";
+export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
+export type Layout =
+  | "horizontal"
+  | "vertical"
+  | "grid"
+  | "inline"
+  | "center"
+  | "auto"
+  | "fixed"
+  | "none"
+  | "horizontal-single";
+export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
+export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto";
+export type ModeName = "light" | "dark" | "auto";
+export type Position = "start" | "end" | "top" | "bottom";
+export type SelectionAppearance = "icon" | "border";
+export type SelectionMode =
+  | "single"
+  | "none"
+  | "children"
+  | "single-persist"
+  | "multichildren"
+  | "ancestors"
+  | "multiple";
+export type Scale = "s" | "m" | "l";
+export type Status = "invalid" | "valid" | "idle";
+export type Width = "auto" | "half" | "full";
+export type ArrowType = "inline" | "edge" | "none";
+export type DisplayMode = "dock" | "float" | "overlay";
+export type ToggleDisplay = "button" | "switch";
+export type Dir = "ltr" | "rtl";
+export type ButtonType = "radio" | "checkbox";
+export type InteractionMode = "interactive" | "static";
+export type IconType = "chevron" | "caret" | "ellipsis" | "overflow";
+export type DeterminateType = "determinate" | "indeterminate";
+export type FillType = "single" | "range";
+export type LabelType = "percent" | "units";
+export type ClickType = "click" | "hover";
+export type CollapseDirection = "down" | "up";
+export type TextType =
+  | "text"
+  | "textarea"
+  | "email"
+  | "password"
+  | "tel"
+  | "number"
+  | "search"
+  | "file"
+  | "time"
+  | "date";
+export type Mode = "offset" | "name";

packages/calcite-components/.storybook/main.ts

@@ -2,6 +2,7 @@ module.exports = {
   addons: [
     "@storybook/addon-a11y",
     "@storybook/addon-docs",
+    "@storybook/addon-controls",
     "@storybook/addon-interactions",
     "@storybook/addon-mdx-gfm",
     "@storybook/addon-themes",

packages/calcite-components/.storybook/resources.ts

@@ -1,4 +1,30 @@
-import { Alignment, Appearance, LogicalFlowPosition, Position, Scale } from "../src/components/interfaces";
+import {
+  Alignment,
+  Appearance,
+  LogicalFlowPosition,
+  Position,
+  Scale,
+  Status,
+  Kind,
+  Width,
+  SelectionMode,
+  ArrowType,
+  DisplayMode,
+  ToggleDisplay,
+  Layout,
+  Dir,
+  ButtonType,
+  InteractionMode,
+  IconType,
+  DeterminateType,
+  FillType,
+  LabelType,
+  ClickType,
+  CollapseDirection,
+  TextType,
+  Mode,
+  SelectionAppearance,
+} from "./interfaces";
 
 interface AttributeMetadata<T> {
   values: T[];
@@ -11,13 +37,82 @@ interface CommonAttributes {
   scale: AttributeMetadata<Scale>;
   logicalFlowPosition: AttributeMetadata<LogicalFlowPosition>;
   position: AttributeMetadata<Position>;
+  status: AttributeMetadata<Status>;
+  kind: AttributeMetadata<Kind>;
+  width: AttributeMetadata<Width>;
+  selectionMode: AttributeMetadata<SelectionMode>;
+  arrowType: AttributeMetadata<ArrowType>;
+  displayMode: AttributeMetadata<DisplayMode>;
+  toggleDisplay: AttributeMetadata<ToggleDisplay>;
+  layout: AttributeMetadata<Layout>;
+  dir: AttributeMetadata<Dir>;
+  buttonType: AttributeMetadata<ButtonType>;
+  interactionMode: AttributeMetadata<InteractionMode>;
+  iconType: AttributeMetadata<IconType>;
+  determinateType: AttributeMetadata<DeterminateType>;
+  fillType: AttributeMetadata<FillType>;
+  labelType: AttributeMetadata<LabelType>;
+  clickType: AttributeMetadata<ClickType>;
+  collapseDirection: AttributeMetadata<CollapseDirection>;
+  textType: AttributeMetadata<TextType>;
+  mode: AttributeMetadata<Mode>;
+  selectionAppearance: AttributeMetadata<SelectionAppearance>;
 }
 
 const logicalFlowPositionOptions: LogicalFlowPosition[] = ["inline-start", "inline-end", "block-start", "block-end"];
-const positionOptions: Position[] = ["start", "end"];
+const positionOptions: Position[] = ["start", "end", "top", "bottom"];
 const scaleOptions: Scale[] = ["s", "m", "l"];
 const alignmentOptions: Alignment[] = ["start", "center", "end"];
-const appearanceOptions: Appearance[] = ["solid", "transparent", "outline"];
+const appearanceOptions: Appearance[] = ["solid", "outline", "outline-fill", "transparent"];
+const statusOptions: Status[] = ["invalid", "valid", "idle"];
+const kindOptions: Kind[] = ["brand", "danger", "info", "inverse", "neutral", "warning", "success"];
+const widthOptions: Width[] = ["auto", "half", "full"];
+const selectionModeOptions: SelectionMode[] = [
+  "single",
+  "none",
+  "children",
+  "single-persist",
+  "multichildren",
+  "ancestors",
+  "multiple",
+];
+const arrowTypeOptions: ArrowType[] = ["inline", "edge", "none"];
+const displayModeOptions: DisplayMode[] = ["dock", "float", "overlay"];
+const toggleDisplayOptions: ToggleDisplay[] = ["button", "switch"];
+const layoutOptions: Layout[] = [
+  "horizontal",
+  "vertical",
+  "grid",
+  "inline",
+  "center",
+  "auto",
+  "fixed",
+  "none",
+  "horizontal-single",
+];
+const dirOptions: Dir[] = ["ltr", "rtl"];
+const buttonTypeOptions: ButtonType[] = ["radio", "checkbox"];
+const interactionModeOptions: InteractionMode[] = ["interactive", "static"];
+const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow"];
+const determinateTypeOptions: DeterminateType[] = ["determinate", "indeterminate"];
+const fillTypeOptions: FillType[] = ["single", "range"];
+const labelTypeOptions: LabelType[] = ["percent", "units"];
+const clickTypeOptions: ClickType[] = ["click", "hover"];
+const collapseDirectionOptions: CollapseDirection[] = ["down", "up"];
+const textTypeOptions: TextType[] = [
+  "text",
+  "textarea",
+  "email",
+  "password",
+  "tel",
+  "number",
+  "search",
+  "file",
+  "time",
+  "date",
+];
+const modeOptions: Mode[] = ["offset", "name"];
+const selectionAppearanceOptions: SelectionAppearance[] = ["icon", "border"];
 
 export const ATTRIBUTES: CommonAttributes = {
   alignment: {
@@ -40,4 +135,84 @@ export const ATTRIBUTES: CommonAttributes = {
     values: scaleOptions,
     defaultValue: scaleOptions[1],
   },
+  status: {
+    values: statusOptions,
+    defaultValue: statusOptions[2],
+  },
+  kind: {
+    values: kindOptions,
+    defaultValue: kindOptions[0],
+  },
+  width: {
+    values: widthOptions,
+    defaultValue: widthOptions[0],
+  },
+  selectionMode: {
+    values: selectionModeOptions,
+    defaultValue: selectionModeOptions[6],
+  },
+  arrowType: {
+    values: arrowTypeOptions,
+    defaultValue: arrowTypeOptions[0],
+  },
+  displayMode: {
+    values: displayModeOptions,
+    defaultValue: displayModeOptions[0],
+  },
+  toggleDisplay: {
+    values: toggleDisplayOptions,
+    defaultValue: toggleDisplayOptions[0],
+  },
+  layout: {
+    values: layoutOptions,
+    defaultValue: layoutOptions[0],
+  },
+  dir: {
+    values: dirOptions,
+    defaultValue: dirOptions[0],
+  },
+  buttonType: {
+    values: buttonTypeOptions,
+    defaultValue: buttonTypeOptions[0],
+  },
+  interactionMode: {
+    values: interactionModeOptions,
+    defaultValue: interactionModeOptions[0],
+  },
+  iconType: {
+    values: iconTypeOptions,
+    defaultValue: iconTypeOptions[0],
+  },
+  determinateType: {
+    values: determinateTypeOptions,
+    defaultValue: determinateTypeOptions[0],
+  },
+  fillType: {
+    values: fillTypeOptions,
+    defaultValue: fillTypeOptions[1],
+  },
+  labelType: {
+    values: labelTypeOptions,
+    defaultValue: labelTypeOptions[0],
+  },
+  clickType: {
+    values: clickTypeOptions,
+    defaultValue: clickTypeOptions[0],
+  },
+  collapseDirection: {
+    values: collapseDirectionOptions,
+    defaultValue: collapseDirectionOptions[0],
+  },
+  textType: {
+    values: textTypeOptions,
+    defaultValue: textTypeOptions[0],
+  },
+  mode: {
+    values: modeOptions,
+    defaultValue: modeOptions[0],
+  },
+  selectionAppearance: {
+    values: selectionAppearanceOptions,
+    defaultValue: selectionAppearanceOptions[0],
+  },
 };

packages/calcite-components/.storybook/utils.ts

@@ -17,44 +17,6 @@ export const modesDarkDefault = {
   themeOverride: "dark",
 };
 
-export interface KnobbedAttribute {
-  name: string;
-  value: ReturnType<any>;
-}
-
-export interface SimpleAttribute {
-  name: string;
-  value: string | boolean | number;
-}
-
-export type Attribute = KnobbedAttribute | SimpleAttribute;
-export type Attributes = Attribute[];
-
-interface DeferredAttribute {
-  name: string;
-  commit: () => Attribute;
-}
-
-export const createComponentHTML = (tagName: string, attributes: Attributes, contentHTML: string = ""): string =>
-  `<${tagName} ${attributes
-    .map(({ name, value }) => {
-      const booleanAttr = typeof value === "boolean";
-      if (booleanAttr) {
-        return value ? name : "";
-      }
-      return `${name}="${value}"`;
-    })
-    .join(" ")}>${contentHTML}</${tagName}>`;
-
-export const filterComponentAttributes = (attributesList: DeferredAttribute[], exceptions: string[]): Attributes => {
-  if (!exceptions.length) {
-    return attributesList.map((attr) => attr.commit());
-  }
-  return attributesList
-    .filter((attr) => !exceptions.find((except) => except === attr.name))
-    .map((attr) => attr.commit());
-};
-
 /**
  * This helper creates a story that captures all breakpoints across all scales for testing.
  *