(
34 |
35 | {label}
36 |
37 | )}
38 | />
39 | );
40 |
41 | expect(container).toMatchSnapshot();
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/__tests__/Switch.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 |
4 | import { Switch } from '../src';
5 |
6 | describe('Switch', () => {
7 | it('should render Switch', () => {
8 | const { container } = render(
9 |
10 | Label
11 |
12 | );
13 |
14 | expect(container).toMatchSnapshot();
15 | });
16 |
17 | it('should render checked Switch', () => {
18 | const { container } = render(
19 |
20 | Label
21 |
22 | );
23 |
24 | expect(container).toMatchSnapshot();
25 | });
26 |
27 | it('should render disabled Switch', () => {
28 | const { container } = render(
29 |
30 | Label
31 |
32 | );
33 |
34 | expect(container).toMatchSnapshot();
35 | });
36 |
37 | it('should render Switch with custom className values', () => {
38 | const { container } = render(
39 |
46 | Label
47 |
48 | );
49 |
50 | expect(container).toMatchSnapshot();
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/__tests__/Textarea.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 |
4 | import { Textarea } from '../src';
5 |
6 | describe('Textarea', () => {
7 | it('should render Textarea', () => {
8 | const { container } = render(
9 |
10 | );
11 |
12 | expect(container).toMatchSnapshot();
13 | });
14 |
15 | it('should render disabled Textarea', () => {
16 | const { container } = render(
17 |
18 | );
19 |
20 | expect(container).toMatchSnapshot();
21 | });
22 |
23 | it('should render Textarea with custom className', () => {
24 | const { container } = render(
25 |
31 | );
32 |
33 | expect(container).toMatchSnapshot();
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/__tests__/Type.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 |
4 | import { Type } from '../src';
5 |
6 | describe('Type', () => {
7 | it('should render Type with default values', () => {
8 | const { getByText, container } = render(Lorem ipsum dolor);
9 |
10 | expect(getByText('Lorem ipsum dolor')).toBeInTheDocument();
11 |
12 | expect(container).toMatchSnapshot();
13 | });
14 |
15 | it('should render Type with large size, bold weight and inverse option', () => {
16 | const { getByText, container } = render(
17 |
18 | Lorem ipsum dolor sit
19 |
20 | );
21 |
22 | expect(getByText('Lorem ipsum dolor sit')).toBeInTheDocument();
23 |
24 | expect(container).toMatchSnapshot();
25 | });
26 |
27 | it('should render Type with custom className', () => {
28 | const { getByText, container } = render(
29 | Lorem ipsum dolor sit amet
30 | );
31 |
32 | expect(getByText('Lorem ipsum dolor sit amet')).toBeInTheDocument();
33 |
34 | expect(container).toMatchSnapshot();
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/Button.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Button should render Button with custom className 1`] = `
4 |
5 |
10 |
11 | `;
12 |
13 | exports[`Button should render disabled tertiary Button 1`] = `
14 |
15 |
21 |
22 | `;
23 |
24 | exports[`Button should render primary Button 1`] = `
25 |
26 |
31 |
32 | `;
33 |
34 | exports[`Button should render secondary Button with destructive style 1`] = `
35 |
36 |
41 |
42 | `;
43 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/Checkbox.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Checkbox should render Checkbox with custom className values 1`] = `
4 |
5 |
8 |
13 |
19 |
20 |
25 |
28 |
35 |
41 |
42 |
47 |
50 |
57 |
63 |
64 |
69 |
72 |
78 |
84 |
85 |
5 |
8 | -
11 |
14 | Heading 1
15 |
16 |
19 | Content 1
20 |
21 |
22 | -
25 |
28 | Heading 2
29 |
30 |
33 | Content 2
34 |
35 |
36 | -
39 |
42 | Heading 3
43 |
44 |
47 | Content 3
48 |
49 |
50 |
51 |
56 |
59 | -
62 |
65 | Heading 1
66 |
67 |
70 | Content 1
71 |
72 |
73 | -
76 |
79 | Heading 2
80 |
81 |
84 | Content 2
85 |
86 |
87 | -
90 |
93 | Heading 3
94 |
95 |
98 | Content 3
99 |
100 |
101 |
102 |
15 |
18 | Hello World!
19 |
20 |
5 |
8 |
11 |
14 | Onboarding tip goes here.
15 |
16 |
17 |
22 |
25 |
29 |
32 | Onboarding tip goes here.
33 |
34 |
35 |
5 |
8 |
16 |
22 |
23 |
28 |
31 |
39 |
45 |
46 |
51 |
54 |
63 |
69 |
70 |
75 |
78 |
87 |
93 |
94 |
5 |
8 | Section title
9 |
10 |
15 |
18 | Section title
19 |
20 |
5 |
24 |
25 | `;
26 |
27 | exports[`SelectMenu should render SelectMenu with custom className 1`] = `
28 |
29 |
48 |
49 | `;
50 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/Switch.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Switch should render Switch 1`] = `
4 |
5 |
8 |
14 |
20 |
21 |
26 |
29 |
35 |
41 |
42 |
47 |
50 |
57 |
63 |
64 |
69 |
72 |
79 |
85 |
86 |
5 |
12 |
13 | `;
14 |
15 | exports[`Textarea should render Textarea with custom className 1`] = `
16 |
17 |
24 |
25 | `;
26 |
27 | exports[`Textarea should render disabled Textarea 1`] = `
28 |
29 |
37 |
38 | `;
39 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/Type.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Type should render Type with custom className 1`] = `
4 |
5 |
8 | Lorem ipsum dolor sit amet
9 |
10 |
15 |
18 | Lorem ipsum dolor
19 |
20 |
25 |
28 | Lorem ipsum dolor sit
29 |
30 |
25 |
31 |
32 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/Disclosure.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | useEffect,
3 | HTMLProps,
4 | ReactElement,
5 | DetailedHTMLProps,
6 | LiHTMLAttributes,
7 | } from 'react';
8 | import { disclosure } from 'figma-plugin-ds';
9 | import clsx from 'clsx';
10 |
11 | interface DisclosureProps extends Readonly> {
12 | readonly items: T[];
13 | render(...itemData: [T, number, T[]]): ReactElement;
14 | }
15 |
16 | interface DisclosureItemProps
17 | extends Readonly<
18 | DetailedHTMLProps, HTMLLIElement>
19 | > {
20 | readonly heading: string;
21 | readonly content: string;
22 | readonly section?: boolean;
23 | readonly expanded?: boolean;
24 | readonly labelProps?: Readonly>;
25 | readonly contentProps?: Readonly>;
26 | }
27 |
28 | export function Disclosure({
29 | items,
30 | render,
31 | className = '',
32 | ...props
33 | }: DisclosureProps) {
34 | useEffect(() => {
35 | disclosure.init();
36 |
37 | return () => disclosure.destroy();
38 | }, []);
39 |
40 | return (
41 |
42 | {items.map(render)}
43 |
44 | );
45 | }
46 |
47 | export const DisclosureItem = ({
48 | section,
49 | expanded,
50 | heading,
51 | content,
52 | className = '',
53 | labelProps = {},
54 | contentProps = {},
55 | ...props
56 | }: DisclosureItemProps) => {
57 | const { className: labelClassName = '', ...labelRest } = labelProps;
58 | const { className: contentClassName = '', ...contentRest } = contentProps;
59 |
60 | return (
61 |
69 |
77 | {heading}
78 |
79 |
80 |
84 | {content}
85 |
86 |
87 | );
88 | };
89 |
--------------------------------------------------------------------------------
/src/components/Icon.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | import type { IconName, ColorName } from '../types';
5 |
6 | export interface Props extends Readonly> {
7 | readonly iconName?: Readonly;
8 | readonly spin?: boolean;
9 | readonly colorName?: Readonly;
10 | }
11 |
12 | export const Icon = ({
13 | children,
14 | iconName,
15 | className = '',
16 | spin,
17 | colorName,
18 | ...props
19 | }: Props) => (
20 |
30 | {children}
31 |
32 | );
33 |
--------------------------------------------------------------------------------
/src/components/IconButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | import { Icon, Props as IconProps } from './Icon';
5 |
6 | interface Props extends Readonly> {
7 | readonly selected?: boolean;
8 | readonly iconProps: IconProps;
9 | }
10 |
11 | export const IconButton = ({
12 | selected,
13 | className = '',
14 | iconProps,
15 | ...props
16 | }: Props) => (
17 |
25 |
26 |
27 | );
28 |
--------------------------------------------------------------------------------
/src/components/Input.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | import { Icon, Props as IconProps } from './Icon';
5 |
6 | interface Props extends Readonly> {
7 | readonly containerProps?: Readonly>;
8 | readonly iconProps?: IconProps;
9 | }
10 |
11 | export const Input = ({
12 | className = '',
13 | type = 'input',
14 | containerProps = {},
15 | iconProps = {},
16 | ...props
17 | }: Props) => {
18 | const { className: containerClassName = '', ...containerRest } =
19 | containerProps;
20 | const { iconName } = iconProps;
21 |
22 | return (
23 |
31 | {iconName && }
32 |
33 |
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/Label.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | interface Props extends Readonly> {}
5 |
6 | export const Label = ({ children, className = '', ...props }: Props) => (
7 |
8 | {children}
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/OnboardingTip.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | import { Icon, Props as IconProps } from './Icon';
5 |
6 | interface Props extends Readonly> {
7 | readonly containerProps?: Readonly>;
8 | readonly iconProps: IconProps;
9 | }
10 |
11 | export const OnboardingTip = ({
12 | children,
13 | className = '',
14 | containerProps = {},
15 | iconProps,
16 | ...props
17 | }: Props) => {
18 | const { className: containerClassName = '', ...containerRest } =
19 | containerProps;
20 |
21 | return (
22 |
26 |
27 |
28 |
29 | {children}
30 |
31 |
25 |
31 |
32 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/SectionTitle.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | interface Props extends Readonly> {}
5 |
6 | export const SectionTitle = ({ children, className = '', ...props }: Props) => (
7 |
8 | {children}
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/SelectMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, HTMLProps, ReactElement } from 'react';
2 | import { selectMenu } from 'figma-plugin-ds';
3 | import clsx from 'clsx';
4 |
5 | interface SelectMenuProps extends Readonly> {
6 | readonly options: T[];
7 | render(...optionData: [T, number, T[]]): ReactElement;
8 | }
9 |
10 | interface SelectMenuItemProps extends Readonly> {}
11 |
12 | export function SelectMenu({
13 | options,
14 | render,
15 | className = '',
16 | ...props
17 | }: SelectMenuProps) {
18 | useEffect(() => {
19 | selectMenu.init();
20 |
21 | return () => selectMenu.destroy();
22 | }, []);
23 |
24 | return (
25 |
28 | );
29 | }
30 |
31 | export const SelectMenuOption = ({
32 | children,
33 | ...props
34 | }: SelectMenuItemProps) => ;
35 |
--------------------------------------------------------------------------------
/src/components/Switch.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | interface Props
5 | extends Omit>, 'onChange'> {
6 | readonly containerProps?: Readonly>;
7 | readonly labelProps?: Readonly>;
8 | readonly onChange?: (e: React.ChangeEvent) => void;
9 | }
10 |
11 | export const Switch = ({
12 | children,
13 | id,
14 | className = '',
15 | containerProps = {},
16 | labelProps = {},
17 | ...props
18 | }: Props) => {
19 | const { className: containerClassName = '', ...containerRest } =
20 | containerProps;
21 | const { className: labelClassName = '', ...labelRest } = labelProps;
22 |
23 | return (
24 |
25 |
31 |
32 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/Textarea.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | interface Props extends Readonly> {}
5 |
6 | export const Textarea = ({ className = '', ...props }: Props) => (
7 |
8 | );
9 |
--------------------------------------------------------------------------------
/src/components/Type.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLProps } from 'react';
2 | import clsx from 'clsx';
3 |
4 | import type { Size, Weight } from '../types';
5 |
6 | interface Props extends Omit>, 'size'> {
7 | readonly size?: Size;
8 | readonly weight?: Weight;
9 | readonly inverse?: boolean;
10 | }
11 |
12 | export const Type = ({
13 | children,
14 | size,
15 | weight,
16 | inverse,
17 | className = '',
18 | ...props
19 | }: Props) => (
20 |
30 | {children}
31 |
32 | );
33 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Button';
2 | export * from './Checkbox';
3 | export * from './Disclosure';
4 | export * from './Icon';
5 | export * from './IconButton';
6 | export * from './Input';
7 | export * from './Label';
8 | export * from './OnboardingTip';
9 | export * from './Radio';
10 | export * from './SectionTitle';
11 | export * from './SelectMenu';
12 | export * from './Switch';
13 | export * from './Textarea';
14 | export * from './Type';
15 |
--------------------------------------------------------------------------------
/src/constants/colorNames.ts:
--------------------------------------------------------------------------------
1 | export const colorNames = [
2 | 'blue',
3 | 'purple',
4 | 'purple4',
5 | 'hot-pink',
6 | 'green',
7 | 'red',
8 | 'yellow',
9 | 'black',
10 | 'black8',
11 | 'black3',
12 | 'white',
13 | 'white8',
14 | 'white4',
15 | ] as const;
16 |
--------------------------------------------------------------------------------
/src/constants/iconNames.ts:
--------------------------------------------------------------------------------
1 | export const iconNames = [
2 | 'adjust',
3 | 'alert',
4 | 'angle',
5 | 'arrow-left-right',
6 | 'up-down',
7 | 'auto-layout-horizontal',
8 | 'auto-layout-vertical',
9 | 'back',
10 | 'blend-empty',
11 | 'blend',
12 | 'break',
13 | 'caret-down',
14 | 'caret-left',
15 | 'caret-right',
16 | 'caret-up',
17 | 'check',
18 | 'close',
19 | 'component',
20 | 'corner-radius',
21 | 'corners',
22 | 'distribute-horizontal-spacing',
23 | 'distribute-vertical-spacing',
24 | 'draft',
25 | 'effects',
26 | 'ellipses',
27 | 'eyedropper',
28 | 'forward',
29 | 'frame',
30 | 'group',
31 | 'hidden',
32 | 'horizontal-padding',
33 | 'hyperlink',
34 | 'image',
35 | 'instance',
36 | 'key',
37 | 'layout-align-bottom',
38 | 'align-horizontal-centers',
39 | 'align-left',
40 | 'align-right',
41 | 'align-top',
42 | 'align-vertical-centers',
43 | 'layout-grid-columns',
44 | 'layout-grid-rows',
45 | 'layout-grid-uniform',
46 | 'library',
47 | 'link-broken',
48 | 'link-connected',
49 | 'list-detailed',
50 | 'list-tile',
51 | 'list',
52 | 'lock-off',
53 | 'lock-on',
54 | 'minus',
55 | 'play',
56 | 'plus',
57 | 'random',
58 | 'recent',
59 | 'resize-to-fit',
60 | 'resolve-filled',
61 | 'resolve',
62 | 'reverse',
63 | 'search-large',
64 | 'search',
65 | 'settings',
66 | 'share',
67 | 'smiley',
68 | 'sort-alpha-asc',
69 | 'sort-alpha-dsc',
70 | 'sort-top-bottom',
71 | 'spacing',
72 | 'spinner',
73 | 'star-off',
74 | 'star-on',
75 | 'stroke-weight',
76 | 'styles',
77 | 'swap',
78 | 'theme',
79 | 'tidy-up-grid',
80 | 'tidy-up-list-horizontal',
81 | 'tidy-up-list-vertical',
82 | 'timer',
83 | 'trash',
84 | 'vertical-padding',
85 | 'visible',
86 | 'warning-large',
87 | 'warning',
88 | ] as const;
89 |
--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export * from './colorNames';
2 | export * from './iconNames';
3 | export * from './sizes';
4 | export * from './tints';
5 | export * from './weights';
6 |
--------------------------------------------------------------------------------
/src/constants/sizes.ts:
--------------------------------------------------------------------------------
1 | export const sizes = ['small', 'large', 'xlarge'] as const;
2 |
--------------------------------------------------------------------------------
/src/constants/tints.ts:
--------------------------------------------------------------------------------
1 | export const tints = ['primary', 'secondary', 'tertiary'] as const;
2 |
--------------------------------------------------------------------------------
/src/constants/weights.ts:
--------------------------------------------------------------------------------
1 | export const weights = ['medium', 'bold'] as const;
2 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import 'figma-plugin-ds/dist/figma-plugin-ds.css';
2 |
3 | export * from './components';
4 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import { colorNames, iconNames, sizes, tints, weights } from './constants';
2 |
3 | export type ColorName = (typeof colorNames)[number];
4 | export type IconName = (typeof iconNames)[number];
5 | export type Size = (typeof sizes)[number];
6 | export type Tint = (typeof tints)[number];
7 | export type Weight = (typeof weights)[number];
8 |
--------------------------------------------------------------------------------
/stories/Button.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { Button } from '../src';
5 |
6 | import { tints } from '../src/constants';
7 |
8 | import type { Tint } from '../src/types';
9 |
10 | interface Props {
11 | readonly tint: Tint;
12 | readonly destructive: boolean;
13 | readonly disabled: boolean;
14 | readonly label: string;
15 | }
16 |
17 | export default {
18 | title: 'Button',
19 | component: Button,
20 | argTypes: {
21 | tint: {
22 | options: tints,
23 | control: {
24 | type: 'inline-radio',
25 | },
26 | },
27 | },
28 | args: {
29 | tint: 'primary',
30 | destructive: false,
31 | disabled: false,
32 | label: 'Label',
33 | } as Props,
34 | } as Meta;
35 |
36 | export const Normal: Story = ({ label, ...args }) => (
37 |
38 | );
39 |
--------------------------------------------------------------------------------
/stories/Checkbox.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 | import { useArgs } from '@storybook/addons';
4 |
5 | import { Checkbox } from '../src';
6 |
7 | interface Props {
8 | readonly checked: boolean;
9 | readonly disabled: boolean;
10 | readonly label: string;
11 | }
12 |
13 | export default {
14 | title: 'Checkbox',
15 | args: {
16 | checked: false,
17 | disabled: false,
18 | label: 'Label',
19 | } as Props,
20 | } as Meta;
21 |
22 | export const Normal: Story = ({ checked, label, ...args }) => {
23 | const [_args, updateArgs] = useArgs();
24 |
25 | return (
26 | updateArgs({ checked: e.target.checked })}
31 | >
32 | {label}
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/stories/Disclosure.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { Disclosure, DisclosureItem } from '../src';
5 |
6 | const items = [
7 | { heading: 'Heading 1', content: 'Content 1', id: 1 },
8 | { heading: 'Heading 2', content: 'Content 2', id: 2 },
9 | { heading: 'Heading 3', content: 'Content 3', id: 3 },
10 | ];
11 |
12 | interface Props {
13 | readonly items: typeof items;
14 | }
15 |
16 | export default {
17 | title: 'Disclosure',
18 | args: { items } as Props,
19 | parameters: {
20 | controls: {
21 | disabled: true,
22 | },
23 | },
24 | } as Meta;
25 |
26 | export const Normal: Story = ({ items }) => (
27 | (
30 |
37 | )}
38 | />
39 | );
40 |
--------------------------------------------------------------------------------
/stories/Icon.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { Icon } from '../src';
5 |
6 | import { iconNames, colorNames } from '../src/constants';
7 |
8 | import type { IconName, ColorName } from '../src/types';
9 |
10 | interface Props {
11 | readonly iconName: IconName;
12 | readonly colorName: ColorName;
13 | readonly spin: boolean;
14 | readonly value: string;
15 | }
16 |
17 | export default {
18 | title: 'Icon',
19 | component: Icon,
20 | argTypes: {
21 | iconName: {
22 | options: iconNames,
23 | control: {
24 | type: 'select',
25 | },
26 | },
27 | colorName: {
28 | options: colorNames,
29 | control: {
30 | type: 'select',
31 | },
32 | },
33 | },
34 | args: {
35 | iconName: 'blend',
36 | colorName: 'black',
37 | spin: false,
38 | value: '',
39 | } as Props,
40 | parameters: {
41 | backgrounds: {
42 | disable: false,
43 | },
44 | },
45 | } as Meta;
46 |
47 | export const Normal: Story = ({ value, ...args }) => (
48 | {value}
49 | );
50 |
--------------------------------------------------------------------------------
/stories/IconButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { IconButton } from '../src';
5 |
6 | import { iconNames } from '../src/constants';
7 |
8 | import type { IconName } from '../src/types';
9 |
10 | interface Props {
11 | readonly iconName: IconName;
12 | readonly selected: boolean;
13 | }
14 |
15 | export default {
16 | title: 'IconButton',
17 | argTypes: {
18 | iconName: {
19 | options: iconNames,
20 | control: {
21 | type: 'select',
22 | },
23 | },
24 | },
25 | args: {
26 | iconName: 'theme',
27 | selected: false,
28 | } as Props,
29 | } as Meta;
30 |
31 | export const Normal: Story = ({ iconName, ...args }) => (
32 |
33 | );
34 |
--------------------------------------------------------------------------------
/stories/Input.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 | import { useArgs } from '@storybook/addons';
4 |
5 | import { Input } from '../src';
6 |
7 | import { iconNames } from '../src/constants';
8 |
9 | import type { IconName } from '../src/types';
10 |
11 | interface Props {
12 | readonly value: string;
13 | readonly placeholder: string;
14 | readonly iconName: IconName;
15 | readonly disabled: boolean;
16 | }
17 |
18 | export default {
19 | title: 'Input',
20 | argTypes: {
21 | iconName: {
22 | options: iconNames,
23 | control: {
24 | type: 'select',
25 | },
26 | },
27 | },
28 | args: {
29 | value: 'Value',
30 | placeholder: 'Placeholder',
31 | iconName: 'search',
32 | disabled: false,
33 | } as Props,
34 | } as Meta;
35 |
36 | export const Normal: Story = ({ iconName, ...args }) => {
37 | const [_args, updateArgs] = useArgs();
38 |
39 | return (
40 |
44 | updateArgs({ value: (e.target as HTMLInputElement).value })
45 | }
46 | />
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/stories/Label.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { Label } from '../src';
5 |
6 | interface Props {
7 | readonly label: string;
8 | }
9 |
10 | export default {
11 | title: 'Label',
12 | component: Label,
13 | args: {
14 | label: 'Label',
15 | } as Props,
16 | } as Meta;
17 |
18 | export const Normal: Story = ({ label }) => ;
19 |
--------------------------------------------------------------------------------
/stories/OnboardingTip.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { OnboardingTip } from '../src';
5 |
6 | import { iconNames } from '../src/constants';
7 |
8 | import type { IconName } from '../src/types';
9 |
10 | interface Props {
11 | readonly iconName: IconName;
12 | readonly message: string;
13 | }
14 |
15 | export default {
16 | title: 'OnboardingTip',
17 | argTypes: {
18 | iconName: {
19 | options: iconNames,
20 | control: {
21 | type: 'select',
22 | },
23 | },
24 | },
25 | args: {
26 | iconName: 'warning',
27 | message: 'Onboarding tip goes here.',
28 | } as Props,
29 | } as Meta;
30 |
31 | export const Normal: Story = ({ iconName, message }) => (
32 | {message}
33 | );
34 |
--------------------------------------------------------------------------------
/stories/Radio.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 | import { useArgs } from '@storybook/addons';
4 |
5 | import { Radio } from '../src';
6 |
7 | interface Props {
8 | readonly checked: boolean;
9 | readonly disabled: boolean;
10 | readonly value: string;
11 | }
12 |
13 | export default {
14 | title: 'Radio',
15 | args: {
16 | checked: false,
17 | disabled: false,
18 | value: 'Radio Button',
19 | } as Props,
20 | } as Meta;
21 |
22 | export const Normal: Story = ({ checked, value, ...args }) => {
23 | const [_args, updateArgs] = useArgs();
24 |
25 | return (
26 | updateArgs({ checked: e.target.checked })}
31 | >
32 | {value}
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/stories/SectionTitle.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { SectionTitle } from '../src';
5 |
6 | interface Props {
7 | readonly sectionTitle: string;
8 | }
9 |
10 | export default {
11 | title: 'SectionTitle',
12 | component: SectionTitle,
13 | args: {
14 | sectionTitle: 'Section Title',
15 | } as Props,
16 | } as Meta;
17 |
18 | export const Normal: Story = ({ sectionTitle }) => (
19 | {sectionTitle}
20 | );
21 |
--------------------------------------------------------------------------------
/stories/SelectMenu.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 |
4 | import { SelectMenu, SelectMenuOption } from '../src';
5 |
6 | const options = [
7 | { value: 1, label: 'Option 1' },
8 | { value: 2, label: 'Option 2' },
9 | { value: 3, label: 'Option 3' },
10 | ];
11 |
12 | interface Props {
13 | readonly options: typeof options;
14 | }
15 |
16 | export default {
17 | title: 'SelectMenu',
18 | args: { options } as Props,
19 | decorators: [
20 | (Story) => (
21 |
22 |
23 |
24 | ),
25 | ],
26 | } as Meta;
27 |
28 | export const Normal: Story = ({ options }) => (
29 | (
32 |
33 | {label}
34 |
35 | )}
36 | />
37 | );
38 |
--------------------------------------------------------------------------------
/stories/Switch.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 | import { useArgs } from '@storybook/addons';
4 |
5 | import { Switch } from '../src';
6 |
7 | interface Props {
8 | readonly checked: boolean;
9 | readonly disabled: boolean;
10 | readonly value: string;
11 | }
12 |
13 | export default {
14 | title: 'Switch',
15 | args: {
16 | checked: false,
17 | disabled: false,
18 | value: 'Label',
19 | } as Props,
20 | } as Meta;
21 |
22 | export const Normal: Story = ({ checked, value, ...args }) => {
23 | const [_args, updateArgs] = useArgs();
24 |
25 | return (
26 | updateArgs({ checked: e.target.checked })}
31 | >
32 | {value}
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/stories/Textarea.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Meta, Story } from '@storybook/react';
3 | import { useArgs } from '@storybook/addons';
4 |
5 | import { Textarea } from '../src';
6 |
7 | interface Props {
8 | readonly placeholder: string;
9 | readonly value: string;
10 | readonly rows: number;
11 | readonly disabled: boolean;
12 | }
13 |
14 | export default {
15 | title: 'Textarea',
16 | component: Textarea,
17 | args: {
18 | placeholder: 'Placeholder',
19 | value: 'Initial Value',
20 | rows: 2,
21 | disabled: false,
22 | } as Props,
23 | } as Meta;
24 |
25 | export const Normal: Story = ({ value, ...args }) => {
26 | const [_args, updateArgs] = useArgs();
27 |
28 | return (
29 |