Skip to content

Commit 31268aa

Browse files
MrtenzMrtenz
committed
Add Storybook plugin and stories for SDK components
1 parent 882232c commit 31268aa

File tree

90 files changed

+6783
-1598
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+6783
-1598
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { StorybookConfig } from '@storybook/types';
2+
3+
const config: StorybookConfig = {
4+
stories: ['../src/**/*.stories.tsx', '../src/**/*.mdx'],
5+
framework: {
6+
name: '@metamask/snaps-storybook',
7+
options: {},
8+
},
9+
addons: [
10+
'@storybook/addon-controls',
11+
],
12+
core: {
13+
disableTelemetry: true,
14+
}
15+
};
16+
17+
export default config;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { Preview, SnapsRenderer } from '@metamask/snaps-storybook';
2+
3+
const preview: Preview = {
4+
tags: ['autodocs'],
5+
};
6+
7+
export default preview;

‎packages/snaps-sdk/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"jsx-runtime.d.ts"
4343
],
4444
"scripts": {
45+
"start": "storybook dev --port 7000 --no-open",
4546
"test": "jest && yarn posttest",
4647
"posttest": "jest-it-up --margin 0.25",
4748
"test:ci": "yarn test",
@@ -72,6 +73,9 @@
7273
"@metamask/eslint-config-jest": "^12.1.0",
7374
"@metamask/eslint-config-nodejs": "^12.1.0",
7475
"@metamask/eslint-config-typescript": "^12.1.0",
76+
"@metamask/snaps-storybook": "workspace:^",
77+
"@storybook/addon-controls": "^8.1.11",
78+
"@storybook/blocks": "^8.1.11",
7579
"@swc/core": "1.3.78",
7680
"@types/jest": "^27.5.1",
7781
"@typescript-eslint/eslint-plugin": "^5.42.1",
@@ -93,6 +97,7 @@
9397
"prettier": "^2.7.1",
9498
"prettier-plugin-packagejson": "^2.2.11",
9599
"rimraf": "^4.1.2",
100+
"storybook": "^8.0.0",
96101
"ts-jest": "^29.1.1",
97102
"tsup": "^8.0.1",
98103
"typescript": "~4.8.4"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { Json } from '@metamask/utils';
22

33
/**
4-
* A key, which can be a string or a number.
4+
* A key, i.e., a string value.
55
*/
6-
export type Key = string | number;
6+
export type Key = string;
77

88
/**
99
* A JSON object.

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { Meta, Story } from '@metamask/snaps-storybook';
2+
3+
import type { AddressProps } from './Address';
4+
import { Address } from './Address';
5+
6+
const meta: Meta<typeof Address> = {
7+
title: 'Address',
8+
component: Address,
9+
argTypes: {
10+
address: {
11+
description:
12+
'The address to display. This must be a valid Ethereum address starting with `0x`.',
13+
table: {
14+
// eslint-disable-next-line no-template-curly-in-string
15+
type: { summary: '`0x${string}`' },
16+
},
17+
},
18+
},
19+
};
20+
21+
export default meta;
22+
23+
/**
24+
* The address component renders an (Ethereum) address.
25+
*/
26+
export const Default: Story<AddressProps> = {
27+
render: (props) => <Address {...props} />,
28+
args: {
29+
address: '0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520',
30+
},
31+
};

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import type { Meta, Story } from '@metamask/snaps-storybook';
2+
3+
import type { BoxProps } from './Box';
4+
import { Box } from './Box';
5+
import { Button } from './form';
6+
import { Heading } from './Heading';
7+
import { Text } from './Text';
8+
9+
const meta: Meta<typeof Box> = {
10+
title: 'Box',
11+
component: Box,
12+
argTypes: {
13+
direction: {
14+
description: 'The direction in which to lay out the children.',
15+
options: ['vertical', 'horizontal'],
16+
control: {
17+
type: 'inline-radio',
18+
},
19+
table: {
20+
defaultValue: {
21+
summary: 'vertical',
22+
},
23+
},
24+
},
25+
alignment: {
26+
description: 'The alignment of the children in the box.',
27+
options: ['start', 'center', 'end', 'space-between'],
28+
control: {
29+
type: 'select',
30+
},
31+
table: {
32+
defaultValue: {
33+
summary: 'start',
34+
},
35+
},
36+
},
37+
},
38+
};
39+
40+
export default meta;
41+
42+
/**
43+
* The default box, which renders its children in a vertical layout.
44+
*/
45+
export const Vertical: Story<BoxProps> = {
46+
name: 'Vertical direction',
47+
render: (props) => (
48+
<Box {...props}>
49+
<Heading>Box</Heading>
50+
<Text>A box with some text, and a</Text>
51+
<Button>Button</Button>
52+
</Box>
53+
),
54+
args: {
55+
direction: 'vertical',
56+
},
57+
};
58+
59+
/**
60+
* The box with horizontal layout, which renders its children in a horizontal
61+
* layout (i.e., next to each other instead of on top of each other).
62+
*/
63+
export const Horizontal: Story<BoxProps> = {
64+
name: 'Horizontal direction',
65+
render: (props) => (
66+
<Box {...props}>
67+
<Heading>Box</Heading>
68+
<Text>A box with some text, and a</Text>
69+
<Button>Button</Button>
70+
</Box>
71+
),
72+
args: {
73+
direction: 'horizontal',
74+
},
75+
};
76+
77+
/**
78+
* The box with center alignment, which centers its children.
79+
*/
80+
export const Center: Story<BoxProps> = {
81+
name: 'Center alignment',
82+
render: (props) => (
83+
<Box {...props}>
84+
<Heading>Box</Heading>
85+
<Text>A box with some text, and a</Text>
86+
<Button>Button</Button>
87+
</Box>
88+
),
89+
args: {
90+
alignment: 'center',
91+
},
92+
};
93+
94+
/**
95+
* The box with space-between alignment, which spaces its children evenly.
96+
*
97+
* This only works with horizontal direction.
98+
*/
99+
export const SpaceBetween: Story<BoxProps> = {
100+
name: 'Space between alignment',
101+
render: (props) => (
102+
<Box {...props}>
103+
<Heading>Box</Heading>
104+
<Text>A box with some text, and a</Text>
105+
<Button>Button</Button>
106+
</Box>
107+
),
108+
args: {
109+
direction: 'horizontal',
110+
alignment: 'space-between',
111+
},
112+
};

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { Meta, Story } from '@metamask/snaps-storybook';
2+
3+
import type { HeadingProps } from './Heading';
4+
import { Heading } from './Heading';
5+
6+
const meta: Meta<typeof Heading> = {
7+
title: 'Heading',
8+
component: Heading,
9+
};
10+
11+
export default meta;
12+
13+
/**
14+
* The default heading, with text. It can be used to display a title or section
15+
* header.
16+
*
17+
* This is currently the only variant.
18+
*/
19+
export const Default: Story<HeadingProps> = {
20+
render: (props) => <Heading {...props} />,
21+
args: {
22+
children: 'Heading',
23+
},
24+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { createSnapComponent } from '../component';
66
*
77
* @property children - The text to display in the heading.
88
*/
9-
type HeadingProps = {
9+
export type HeadingProps = {
1010
children: StringElement;
1111
};
1212

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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import type { Meta, Story } from '@metamask/snaps-storybook';
2+
3+
import { Address } from './Address';
4+
import type { RowProps } from './Row';
5+
import { Row } from './Row';
6+
import { Text } from './Text';
7+
8+
const meta: Meta<typeof Row> = {
9+
title: 'Row',
10+
component: Row,
11+
argTypes: {
12+
label: {
13+
description: 'The label of the row, shown on the left.',
14+
table: {
15+
type: { summary: 'string' },
16+
},
17+
},
18+
19+
children: {
20+
description:
21+
'The children of the row, shown on the right. This can be an address, an image, value, or text.',
22+
table: {
23+
type: {
24+
summary: 'AddressElement | ImageElement | TextElement | ValueElement',
25+
},
26+
},
27+
},
28+
29+
variant: {
30+
description: 'The variant of the row.',
31+
options: ['default', 'warning', 'critical'],
32+
control: {
33+
type: 'select',
34+
},
35+
table: {
36+
type: { summary: '"default" | "warning" | "critical"' },
37+
defaultValue: { summary: '"default"' },
38+
},
39+
},
40+
41+
tooltip: {
42+
description: 'The tooltip text to show on hover.',
43+
control: {
44+
type: 'text',
45+
},
46+
table: {
47+
type: { summary: 'string' },
48+
},
49+
},
50+
},
51+
};
52+
53+
export default meta;
54+
55+
/**
56+
* The default row, with a label and children.
57+
*/
58+
export const Default: Story<RowProps> = {
59+
render: (props) => <Row {...props} />,
60+
args: {
61+
label: 'Label',
62+
children: <Text>Row text</Text>,
63+
},
64+
};
65+
66+
/**
67+
* A warning row, which indicates a warning. It renders the row with a yellow
68+
* background.
69+
*/
70+
export const Warning: Story<RowProps> = {
71+
render: (props) => <Row {...props} />,
72+
args: {
73+
label: 'Label',
74+
children: <Text>Warning text</Text>,
75+
variant: 'warning',
76+
},
77+
};
78+
79+
/**
80+
* A critical row, which indicates a critical issue. It renders the row with a
81+
* red background.
82+
*/
83+
export const Critical: Story<RowProps> = {
84+
render: (props) => <Row {...props} />,
85+
args: {
86+
label: 'Label',
87+
children: <Text>Critical text</Text>,
88+
variant: 'critical',
89+
},
90+
};
91+
92+
/**
93+
* A row with a tooltip, which shows the tooltip text on hover. It shows a
94+
* different icon depending on the variant.
95+
*/
96+
export const Tooltip: Story<RowProps> = {
97+
name: 'With tooltip',
98+
render: (props) => <Row {...props} />,
99+
args: {
100+
label: 'Label',
101+
children: <Text>Row text</Text>,
102+
tooltip: 'Tooltip text',
103+
},
104+
};
105+
106+
/**
107+
* A row with an address.
108+
*/
109+
export const WithAddress: Story<RowProps> = {
110+
name: 'With address',
111+
render: (props) => <Row {...props} />,
112+
args: {
113+
label: 'Label',
114+
children: <Address address="0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520" />,
115+
},
116+
};

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
array,
1313
lazy,
1414
nullable,
15-
number,
1615
object,
1716
record,
1817
string,
@@ -68,7 +67,7 @@ import type {
6867
/**
6968
* A struct for the {@link Key} type.
7069
*/
71-
export const KeyStruct: Describe<Key> = nullUnion([string(), number()]);
70+
export const KeyStruct: Describe<Key> = nullUnion([string()]);
7271

7372
/**
7473
* A struct for the {@link StringElement} type.

0 commit comments

Comments
 (0)