Add Storybook plugin and stories for SDK components

packages/snaps-sdk/.storybook/main.ts

@@ -0,0 +1,17 @@
+import { StorybookConfig } from '@storybook/types';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx', '../src/**/*.mdx'],
+  framework: {
+    name: '@metamask/snaps-storybook',
+    options: {},
+  },
+  addons: [
+    '@storybook/addon-controls',
+  ],
+  core: {
+    disableTelemetry: true,
+  }
+};
+
+export default config;

packages/snaps-sdk/.storybook/preview.ts

@@ -0,0 +1,7 @@
+import type { Preview, SnapsRenderer } from '@metamask/snaps-storybook';
+
+const preview: Preview = {
+  tags: ['autodocs'],
+};
+
+export default preview;

packages/snaps-sdk/package.json

@@ -42,6 +42,7 @@
     "jsx-runtime.d.ts"
   ],
   "scripts": {
+    "start": "storybook dev --port 7000 --no-open",
     "test": "jest && yarn posttest",
     "posttest": "jest-it-up --margin 0.25",
     "test:ci": "yarn test",
@@ -72,6 +73,9 @@
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
+    "@metamask/snaps-storybook": "workspace:^",
+    "@storybook/addon-controls": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
     "@swc/core": "1.3.78",
     "@types/jest": "^27.5.1",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
@@ -93,6 +97,7 @@
     "prettier": "^2.7.1",
     "prettier-plugin-packagejson": "^2.2.11",
     "rimraf": "^4.1.2",
+    "storybook": "^8.0.0",
     "ts-jest": "^29.1.1",
     "tsup": "^8.0.1",
     "typescript": "~4.8.4"

packages/snaps-sdk/src/jsx/component.ts

@@ -1,9 +1,9 @@
 import type { Json } from '@metamask/utils';
 
 /**
- * A key, which can be a string or a number.
+ * A key, i.e., a string value.
  */
-export type Key = string | number;
+export type Key = string;
 
 /**
  * A JSON object.

packages/snaps-sdk/src/jsx/components/Address.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import type { AddressProps } from './Address';
+import { Address } from './Address';
+
+const meta: Meta<typeof Address> = {
+  title: 'Address',
+  component: Address,
+  argTypes: {
+    address: {
+      description:
+        'The address to display. This must be a valid Ethereum address starting with `0x`.',
+      table: {
+        // eslint-disable-next-line no-template-curly-in-string
+        type: { summary: '`0x${string}`' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The address component renders an (Ethereum) address.
+ */
+export const Default: Story<AddressProps> = {
+  render: (props) => <Address {...props} />,
+  args: {
+    address: '0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520',
+  },
+};

packages/snaps-sdk/src/jsx/components/Box.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+import { Button } from './form';
+import { Heading } from './Heading';
+import { Text } from './Text';
+
+const meta: Meta<typeof Box> = {
+  title: 'Box',
+  component: Box,
+  argTypes: {
+    direction: {
+      description: 'The direction in which to lay out the children.',
+      options: ['vertical', 'horizontal'],
+      control: {
+        type: 'inline-radio',
+      },
+      table: {
+        defaultValue: {
+          summary: 'vertical',
+        },
+      },
+    },
+    alignment: {
+      description: 'The alignment of the children in the box.',
+      options: ['start', 'center', 'end', 'space-between'],
+      control: {
+        type: 'select',
+      },
+      table: {
+        defaultValue: {
+          summary: 'start',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The default box, which renders its children in a vertical layout.
+ */
+export const Vertical: Story<BoxProps> = {
+  name: 'Vertical direction',
+  render: (props) => (
+    <Box {...props}>
+      <Heading>Box</Heading>
+      <Text>A box with some text, and a</Text>
+      <Button>Button</Button>
+    </Box>
+  ),
+  args: {
+    direction: 'vertical',
+  },
+};
+
+/**
+ * The box with horizontal layout, which renders its children in a horizontal
+ * layout (i.e., next to each other instead of on top of each other).
+ */
+export const Horizontal: Story<BoxProps> = {
+  name: 'Horizontal direction',
+  render: (props) => (
+    <Box {...props}>
+      <Heading>Box</Heading>
+      <Text>A box with some text, and a</Text>
+      <Button>Button</Button>
+    </Box>
+  ),
+  args: {
+    direction: 'horizontal',
+  },
+};
+
+/**
+ * The box with center alignment, which centers its children.
+ */
+export const Center: Story<BoxProps> = {
+  name: 'Center alignment',
+  render: (props) => (
+    <Box {...props}>
+      <Heading>Box</Heading>
+      <Text>A box with some text, and a</Text>
+      <Button>Button</Button>
+    </Box>
+  ),
+  args: {
+    alignment: 'center',
+  },
+};
+
+/**
+ * The box with space-between alignment, which spaces its children evenly.
+ *
+ * This only works with horizontal direction.
+ */
+export const SpaceBetween: Story<BoxProps> = {
+  name: 'Space between alignment',
+  render: (props) => (
+    <Box {...props}>
+      <Heading>Box</Heading>
+      <Text>A box with some text, and a</Text>
+      <Button>Button</Button>
+    </Box>
+  ),
+  args: {
+    direction: 'horizontal',
+    alignment: 'space-between',
+  },
+};

packages/snaps-sdk/src/jsx/components/Heading.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import type { HeadingProps } from './Heading';
+import { Heading } from './Heading';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Heading',
+  component: Heading,
+};
+
+export default meta;
+
+/**
+ * The default heading, with text. It can be used to display a title or section
+ * header.
+ *
+ * This is currently the only variant.
+ */
+export const Default: Story<HeadingProps> = {
+  render: (props) => <Heading {...props} />,
+  args: {
+    children: 'Heading',
+  },
+};

packages/snaps-sdk/src/jsx/components/Heading.ts

@@ -6,7 +6,7 @@ import { createSnapComponent } from '../component';
  *
  * @property children - The text to display in the heading.
  */
-type HeadingProps = {
+export type HeadingProps = {
   children: StringElement;
 };
 

packages/snaps-sdk/src/jsx/components/Row.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import { Address } from './Address';
+import type { RowProps } from './Row';
+import { Row } from './Row';
+import { Text } from './Text';
+
+const meta: Meta<typeof Row> = {
+  title: 'Row',
+  component: Row,
+  argTypes: {
+    label: {
+      description: 'The label of the row, shown on the left.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+
+    children: {
+      description:
+        'The children of the row, shown on the right. This can be an address, an image, value, or text.',
+      table: {
+        type: {
+          summary: 'AddressElement | ImageElement | TextElement | ValueElement',
+        },
+      },
+    },
+
+    variant: {
+      description: 'The variant of the row.',
+      options: ['default', 'warning', 'critical'],
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: { summary: '"default" | "warning" | "critical"' },
+        defaultValue: { summary: '"default"' },
+      },
+    },
+
+    tooltip: {
+      description: 'The tooltip text to show on hover.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The default row, with a label and children.
+ */
+export const Default: Story<RowProps> = {
+  render: (props) => <Row {...props} />,
+  args: {
+    label: 'Label',
+    children: <Text>Row text</Text>,
+  },
+};
+
+/**
+ * A warning row, which indicates a warning. It renders the row with a yellow
+ * background.
+ */
+export const Warning: Story<RowProps> = {
+  render: (props) => <Row {...props} />,
+  args: {
+    label: 'Label',
+    children: <Text>Warning text</Text>,
+    variant: 'warning',
+  },
+};
+
+/**
+ * A critical row, which indicates a critical issue. It renders the row with a
+ * red background.
+ */
+export const Critical: Story<RowProps> = {
+  render: (props) => <Row {...props} />,
+  args: {
+    label: 'Label',
+    children: <Text>Critical text</Text>,
+    variant: 'critical',
+  },
+};
+
+/**
+ * A row with a tooltip, which shows the tooltip text on hover. It shows a
+ * different icon depending on the variant.
+ */
+export const Tooltip: Story<RowProps> = {
+  name: 'With tooltip',
+  render: (props) => <Row {...props} />,
+  args: {
+    label: 'Label',
+    children: <Text>Row text</Text>,
+    tooltip: 'Tooltip text',
+  },
+};
+
+/**
+ * A row with an address.
+ */
+export const WithAddress: Story<RowProps> = {
+  name: 'With address',
+  render: (props) => <Row {...props} />,
+  args: {
+    label: 'Label',
+    children: <Address address="0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520" />,
+  },
+};

packages/snaps-sdk/src/jsx/validation.ts

@@ -12,7 +12,6 @@ import {
   array,
   lazy,
   nullable,
-  number,
   object,
   record,
   string,
@@ -68,7 +67,7 @@ import type {
 /**
  * A struct for the {@link Key} type.
  */
-export const KeyStruct: Describe<Key> = nullUnion([string(), number()]);
+export const KeyStruct: Describe<Key> = nullUnion([string()]);
 
 /**
  * A struct for the {@link StringElement} type.

packages/snaps-sdk/tsconfig.build.json

@@ -9,6 +9,7 @@
   "exclude": [
     "**/*.test.ts",
     "**/*.test.tsx",
+    "**/*.stories.tsx",
     "./src/**/test-utils",
     "./src/**/__mocks__",
     "./src/**/__snapshots__"

packages/snaps-sdk/tsconfig.json

@@ -12,5 +12,10 @@
     "jsx.d.ts",
     "jsx-runtime.d.ts",
     "jsx-dev-runtime.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../snaps-storybook"
+    }
   ]
 }