Skip to content

Commit c2c86be

Browse files
author
NgocNhi123
committed
update meta
1 parent 925d253 commit c2c86be

13 files changed

+119
-115
lines changed

‎.storybook/docs/args-table.css

+5
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,8 @@
4343
.docblock-argstable:not(.x) tbody td[colspan="3"] {
4444
background-color: var(--border-weak) !important;
4545
}
46+
47+
/* "controls" column inputs */
48+
.docblock-argstable-body:not(.x) tr td label input {
49+
width: 100%;
50+
}

‎src/docs/components/dialog.stories.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,16 @@ import { Meta, StoryObj } from "@storybook/react";
22
import { useState } from "react";
33
import { Button, Dialog, DivGrow, Paragraph } from "../../core";
44
import { GalleryDialog } from "../../gallery";
5-
import { Utils } from "../../old-docs/utils/utils";
5+
import { docsMetaParameters } from "../utils/parameter";
66

77
const meta: Meta = {
88
title: "Components/Dialog",
99
component: Dialog,
10+
parameters: docsMetaParameters({
11+
gallery: <GalleryDialog key="1" />,
12+
}),
1013
} as Meta;
1114

12-
Utils.page.component(meta, {
13-
primary: "none",
14-
shots: [<GalleryDialog key="1" />],
15-
});
16-
1715
export default meta;
1816

1917
export const Primary: StoryObj<typeof Dialog> = {

‎src/docs/components/icon.stories.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,24 @@ import { SVGAttributes } from "react";
33
import { FaHome } from "react-icons/fa";
44
import { Icon, text } from "../../core";
55
import { GalleryIcon } from "../../gallery";
6-
import { Utils } from "../../old-docs/utils/utils";
6+
import { docsMetaParameters } from "../utils/parameter";
7+
import { docsMetaArgTypes } from "../utils/arg-type";
78

89
const meta: Meta = {
910
title: "Components/Icon",
1011
component: Icon,
11-
argTypes: {
12-
display: Utils.arg(["block", "inline"]),
13-
component: Utils.arg(null),
14-
size: Utils.arg("number"),
15-
},
12+
parameters: docsMetaParameters({
13+
gallery: <GalleryIcon key="1" />,
14+
}),
15+
argTypes: docsMetaArgTypes({
16+
"": {
17+
display: ["block", "inline"],
18+
component: false,
19+
size: "number",
20+
},
21+
}),
1622
};
1723

18-
Utils.page.component(meta, {
19-
primary: "sticky",
20-
shots: [<GalleryIcon key="1" />],
21-
});
22-
2324
export default meta;
2425

2526
export const Primary: StoryObj<typeof Icon> = {

‎src/docs/components/input.stories.tsx

+25-17
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,37 @@ import { useState } from "react";
44
import { HiPhone } from "react-icons/hi";
55
import { Button, Dialog, DivPx, Input } from "../../core";
66
import { GalleryInput1, GalleryInput2 } from "../../gallery";
7-
import { Utils } from "../../old-docs/utils/utils";
7+
import { docsMetaParameters } from "../utils/parameter";
8+
import { docsMetaArgTypes } from "../utils/arg-type";
89

910
const meta: Meta = {
1011
title: "Components/Input",
1112
component: Input,
12-
argTypes: {
13-
type: Utils.arg("string", "Visual"),
14-
style: Utils.arg(Input.styles, "Visual"),
15-
size: Utils.arg(Input.sizes, "Visual"),
16-
icon: Utils.arg(null, "Visual"),
17-
list: Utils.arg(null, "Visual"),
18-
defaultValue: Utils.arg(null, "State"),
19-
value: Utils.arg(null, "State"),
20-
setValue: Utils.arg(null, "State"),
21-
onChange: Utils.arg(null, "State"),
22-
},
13+
parameters: docsMetaParameters({
14+
gallery: (
15+
<>
16+
<GalleryInput1 key="1" />
17+
<GalleryInput2 key="2" />
18+
</>
19+
),
20+
}),
21+
argTypes: docsMetaArgTypes({
22+
Visual: {
23+
type: false,
24+
style: Input.styles,
25+
size: Input.sizes,
26+
icon: false,
27+
list: false,
28+
},
29+
State: {
30+
defaultValue: false,
31+
value: false,
32+
setValue: false,
33+
onChange: false,
34+
},
35+
}),
2336
};
2437

25-
Utils.page.component(meta, {
26-
primary: "sticky",
27-
shots: [<GalleryInput1 key="1" />, <GalleryInput2 key="2" />],
28-
});
29-
3038
export default meta;
3139

3240
export const Primary: StoryObj<typeof Input> = {

‎src/docs/components/pagination.stories.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import { Meta, StoryObj } from "@storybook/react";
22
import { useCallback, useState } from "react";
33
import { Pagination } from "../../core";
4-
import { Utils } from "../../old-docs/utils/utils";
54

65
const meta: Meta = {
76
title: "Components/Pagination",
87
component: Pagination,
98
};
109

11-
Utils.page.component(meta, { primary: "none", shots: [] });
12-
1310
export default meta;
1411

1512
export const Primary: StoryObj<typeof Pagination> = {

‎src/docs/components/pane.stories.tsx

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
import { Meta, StoryObj } from "@storybook/react";
22
import { Pane } from "../../core";
3-
import { Utils } from "../../old-docs/utils/utils";
3+
import { docsMetaArgTypes } from "../utils/arg-type";
44

55
const meta: Meta = {
66
title: "Components/Pane",
77
component: Pane,
8-
argTypes: {
9-
children: Utils.arg("React.ReactNode"),
10-
noPadding: Utils.arg("boolean"),
11-
fullHeight: Utils.arg("boolean"),
12-
contentWidth: Utils.arg("boolean"),
13-
},
8+
argTypes: docsMetaArgTypes({
9+
"": {
10+
children: false,
11+
noPadding: "boolean",
12+
fullHeight: "boolean",
13+
contentWidth: "boolean",
14+
},
15+
}),
1416
};
1517

16-
Utils.page.component(meta, {
17-
primary: "sticky",
18-
shots: [],
19-
});
20-
2118
export default meta;
2219

2320
export const Primary: StoryObj<typeof Pane> = {

‎src/docs/components/popover.stories.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { Meta, StoryObj } from "@storybook/react";
22
import { Button, Popover } from "../../core";
3-
import { PLACEMENTS } from "../../old-docs/utils/placement";
4-
import { Utils } from "../../old-docs/utils/utils";
3+
import { PLACEMENTS } from "../utils/placement";
4+
import { docsMetaArgTypes } from "../utils/arg-type";
55

66
const meta: Meta = {
77
title: "Components/Popover",
88
component: Popover,
9-
argTypes: {
10-
placement: Utils.arg(PLACEMENTS),
11-
target: Utils.arg(null),
12-
content: Utils.arg(null),
13-
TargetWrapper: Utils.arg(null),
14-
},
9+
argTypes: docsMetaArgTypes({
10+
"": {
11+
placement: PLACEMENTS,
12+
target: false,
13+
content: false,
14+
TargetWrapper: false,
15+
},
16+
}),
1517
};
1618

17-
Utils.page.component(meta, { primary: "sticky", shots: [] });
18-
1919
export default meta;
2020

2121
export const Primary: StoryObj<typeof Popover> = {

‎src/docs/components/progress-circle.stories.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
import { Meta, StoryObj } from "@storybook/react";
22
import { ProgressCircle, ProgressCircleProps } from "../../core";
33
import { GalleryProgress } from "../../gallery";
4-
import { Utils } from "../../old-docs/utils/utils";
4+
import { docsMetaParameters } from "../utils/parameter";
5+
import { docsMetaArgTypes } from "../utils/arg-type";
56

67
const meta: Meta = {
78
title: "Components/Progress Circle",
89
component: ProgressCircle,
9-
argTypes: {
10-
size: Utils.arg("number"),
11-
value: Utils.arg("number"),
12-
color: Utils.arg(ProgressCircle.colors),
13-
},
10+
parameters: docsMetaParameters({
11+
gallery: <GalleryProgress key="1" />,
12+
}),
13+
argTypes: docsMetaArgTypes({
14+
"": {
15+
size: "number",
16+
value: "number",
17+
color: ProgressCircle.colors,
18+
},
19+
}),
1420
};
1521

16-
Utils.page.component(meta, {
17-
primary: "sticky",
18-
shots: [<GalleryProgress key="1" />],
19-
});
20-
2122
export default meta;
2223

2324
export const Primary: StoryObj<typeof ProgressCircle> = {

‎src/docs/components/tag.stories.tsx

+14-17
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
11
import { Meta, StoryObj } from "@storybook/react";
22
import { Tag } from "../../core";
3-
import { Utils } from "../../old-docs/utils/utils";
43
import { GalleryTag } from "../../gallery";
4+
import { docsMetaParameters } from "../utils/parameter";
5+
import { docsMetaArgTypes } from "../utils/arg-type";
56

67
const meta: Meta = {
78
title: "Components/Tag",
89
component: Tag,
9-
argTypes: {
10-
children: Utils.arg(null),
11-
color: Utils.arg(Tag.colors),
12-
size: Utils.arg(Tag.sizes),
13-
forwardedRef: Utils.arg(null),
14-
},
10+
parameters: docsMetaParameters({
11+
gallery: <GalleryTag key="1" />,
12+
}),
13+
argTypes: docsMetaArgTypes({
14+
"": {
15+
children: false,
16+
color: Tag.colors,
17+
size: Tag.sizes,
18+
forwardedRef: false,
19+
},
20+
}),
1521
};
1622

17-
Utils.page.component(meta, {
18-
primary: "sticky",
19-
shots: [<GalleryTag key="1" />],
20-
});
21-
2223
export default meta;
2324

2425
export const Primary: StoryObj<typeof Tag> = {
2526
render: (props) => (
26-
<Tag
27-
// eslint-disable-next-line
28-
color={props.color ?? Tag.colors.gray}
29-
children="Foo"
30-
/>
27+
<Tag {...props} color={props.color ?? Tag.colors.gray} children="Foo" />
3128
),
3229
};
3330

‎src/docs/components/time-input.stories.tsx

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
import { useState } from "react";
22
import { TimeInput } from "../../core";
3-
import { Utils } from "../../old-docs/utils/utils";
43
import { StoryObj } from "@storybook/react";
4+
import { docsMetaArgTypes } from "../utils/arg-type";
55

66
const meta = {
77
title: "Components/TimeInput",
88
component: TimeInput,
9-
argTypes: {
10-
style: Utils.arg(TimeInput.styles),
11-
size: Utils.arg(TimeInput.sizes),
12-
fill: Utils.arg("boolean"),
13-
disabled: Utils.arg("boolean"),
14-
value: Utils.arg(null),
15-
setValue: Utils.arg(null),
16-
id: Utils.arg(null),
17-
},
9+
argTypes: docsMetaArgTypes({
10+
"": {
11+
interval: Object.values(TimeInput.intervals),
12+
style: TimeInput.styles,
13+
size: TimeInput.sizes,
14+
fill: "boolean",
15+
disabled: "boolean",
16+
value: false,
17+
setValue: false,
18+
id: false,
19+
},
20+
}),
1821
};
1922

20-
Utils.page.component(meta, {
21-
primary: "sticky",
22-
shots: [],
23-
});
24-
2523
export default meta;
2624

2725
export const Primary: StoryObj<typeof TimeInput> = {
@@ -36,7 +34,7 @@ export const Primary: StoryObj<typeof TimeInput> = {
3634
{...props}
3735
value={value}
3836
setValue={setValue}
39-
interval={TimeInput.intervals.minute}
37+
interval={props.interval ?? TimeInput.intervals.minute}
4038
/>
4139
);
4240
},

‎src/docs/components/tooltip.stories.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { Meta, StoryObj } from "@storybook/react";
22
import { Tooltip } from "../../core";
3-
import { PLACEMENTS } from "../../old-docs/utils/placement";
4-
import { Utils } from "../../old-docs/utils/utils";
3+
import { PLACEMENTS } from "../utils/placement";
4+
import { docsMetaArgTypes } from "../utils/arg-type";
55

66
const meta: Meta = {
77
title: "Components/Tooltip",
88
component: Tooltip,
9-
argTypes: {
10-
placement: Utils.arg(PLACEMENTS),
11-
content: Utils.arg(null),
12-
children: Utils.arg(null),
13-
},
9+
argTypes: docsMetaArgTypes({
10+
"": {
11+
placement: PLACEMENTS,
12+
content: false,
13+
children: false,
14+
},
15+
}),
1416
};
1517

16-
Utils.page.component(meta, { primary: "sticky", shots: [] });
17-
1818
export default meta;
1919

2020
export const Primary: StoryObj<typeof Tooltip> = {

‎src/docs/utils/arg-type.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ArgTypes } from "@storybook/react";
22
import { ComponentProps, ComponentType } from "react";
33

4-
type DocsValue = false | "boolean" | object;
4+
type DocsValue = false | "boolean" | object | "number";
55

66
type DocsGroup<CT extends ComponentType> = Partial<
77
Record<keyof ComponentProps<CT>, DocsValue>
@@ -29,11 +29,13 @@ const transformValue = (value: DocsValue): RawValue => {
2929
return { control: false };
3030
case "boolean":
3131
return { control: "boolean" };
32+
case "number":
33+
return { control: "number" };
3234
default:
3335
return {
3436
control: "select",
3537
mapping: value,
36-
options: Object.keys(value),
38+
options: Array.isArray(value) ? value : Object.keys(value),
3739
};
3840
}
3941
};

‎src/old-docs/utils/placement.ts ‎src/docs/utils/placement.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PopoverPlacement } from "../../../core/src";
1+
import { PopoverPlacement } from "../../core";
22

33
export const PLACEMENTS: PopoverPlacement[] = [
44
"top",

0 commit comments

Comments
 (0)