From 70af694bbf48a20d7ad76f27b7d37f90b1d6b327 Mon Sep 17 00:00:00 2001 From: NgocNhi123 Date: Sun, 11 Aug 2024 23:47:26 +0700 Subject: [PATCH] update meta --- .storybook/docs/args-table.css | 5 +++ src/docs/components/dialog.stories.tsx | 10 ++--- src/docs/components/icon.stories.tsx | 23 +++++----- src/docs/components/input.stories.tsx | 42 +++++++++++-------- src/docs/components/pagination.stories.tsx | 3 -- src/docs/components/pane.stories.tsx | 21 ++++------ src/docs/components/popover.stories.tsx | 20 ++++----- .../components/progress-circle.stories.tsx | 23 +++++----- src/docs/components/tag.stories.tsx | 31 +++++++------- src/docs/components/time-input.stories.tsx | 30 +++++++------ src/docs/components/tooltip.stories.tsx | 18 ++++---- src/docs/utils/arg-type.ts | 6 ++- src/{old-docs => docs}/utils/placement.ts | 2 +- 13 files changed, 119 insertions(+), 115 deletions(-) rename src/{old-docs => docs}/utils/placement.ts (82%) diff --git a/.storybook/docs/args-table.css b/.storybook/docs/args-table.css index 290a19d1..0ebe77c2 100644 --- a/.storybook/docs/args-table.css +++ b/.storybook/docs/args-table.css @@ -43,3 +43,8 @@ .docblock-argstable:not(.x) tbody td[colspan="3"] { background-color: var(--border-weak) !important; } + +/* "controls" column inputs */ +.docblock-argstable-body:not(.x) tr td label input { + width: 100%; +} diff --git a/src/docs/components/dialog.stories.tsx b/src/docs/components/dialog.stories.tsx index a7edd19f..fbe52fb2 100644 --- a/src/docs/components/dialog.stories.tsx +++ b/src/docs/components/dialog.stories.tsx @@ -2,18 +2,16 @@ import { Meta, StoryObj } from "@storybook/react"; import { useState } from "react"; import { Button, Dialog, DivGrow, Paragraph } from "../../core"; import { GalleryDialog } from "../../gallery"; -import { Utils } from "../../old-docs/utils/utils"; +import { docsMetaParameters } from "../utils/parameter"; const meta: Meta = { title: "Components/Dialog", component: Dialog, + parameters: docsMetaParameters({ + gallery: , + }), } as Meta; -Utils.page.component(meta, { - primary: "none", - shots: [], -}); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/components/icon.stories.tsx b/src/docs/components/icon.stories.tsx index d4c35cd6..2a05436f 100644 --- a/src/docs/components/icon.stories.tsx +++ b/src/docs/components/icon.stories.tsx @@ -3,23 +3,24 @@ import { SVGAttributes } from "react"; import { FaHome } from "react-icons/fa"; import { Icon, text } from "../../core"; import { GalleryIcon } from "../../gallery"; -import { Utils } from "../../old-docs/utils/utils"; +import { docsMetaParameters } from "../utils/parameter"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta: Meta = { title: "Components/Icon", component: Icon, - argTypes: { - display: Utils.arg(["block", "inline"]), - component: Utils.arg(null), - size: Utils.arg("number"), - }, + parameters: docsMetaParameters({ + gallery: , + }), + argTypes: docsMetaArgTypes({ + "": { + display: ["block", "inline"], + component: false, + size: "number", + }, + }), }; -Utils.page.component(meta, { - primary: "sticky", - shots: [], -}); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/components/input.stories.tsx b/src/docs/components/input.stories.tsx index a70bbaca..97d7a1b3 100644 --- a/src/docs/components/input.stories.tsx +++ b/src/docs/components/input.stories.tsx @@ -4,29 +4,37 @@ import { useState } from "react"; import { HiPhone } from "react-icons/hi"; import { Button, Dialog, DivPx, Input } from "../../core"; import { GalleryInput1, GalleryInput2 } from "../../gallery"; -import { Utils } from "../../old-docs/utils/utils"; +import { docsMetaParameters } from "../utils/parameter"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta: Meta = { title: "Components/Input", component: Input, - argTypes: { - type: Utils.arg("string", "Visual"), - style: Utils.arg(Input.styles, "Visual"), - size: Utils.arg(Input.sizes, "Visual"), - icon: Utils.arg(null, "Visual"), - list: Utils.arg(null, "Visual"), - defaultValue: Utils.arg(null, "State"), - value: Utils.arg(null, "State"), - setValue: Utils.arg(null, "State"), - onChange: Utils.arg(null, "State"), - }, + parameters: docsMetaParameters({ + gallery: ( + <> + + + + ), + }), + argTypes: docsMetaArgTypes({ + Visual: { + type: false, + style: Input.styles, + size: Input.sizes, + icon: false, + list: false, + }, + State: { + defaultValue: false, + value: false, + setValue: false, + onChange: false, + }, + }), }; -Utils.page.component(meta, { - primary: "sticky", - shots: [, ], -}); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/components/pagination.stories.tsx b/src/docs/components/pagination.stories.tsx index 6ecf9e38..61459ce8 100644 --- a/src/docs/components/pagination.stories.tsx +++ b/src/docs/components/pagination.stories.tsx @@ -1,15 +1,12 @@ import { Meta, StoryObj } from "@storybook/react"; import { useCallback, useState } from "react"; import { Pagination } from "../../core"; -import { Utils } from "../../old-docs/utils/utils"; const meta: Meta = { title: "Components/Pagination", component: Pagination, }; -Utils.page.component(meta, { primary: "none", shots: [] }); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/components/pane.stories.tsx b/src/docs/components/pane.stories.tsx index 707cc44a..9209df41 100644 --- a/src/docs/components/pane.stories.tsx +++ b/src/docs/components/pane.stories.tsx @@ -1,23 +1,20 @@ import { Meta, StoryObj } from "@storybook/react"; import { Pane } from "../../core"; -import { Utils } from "../../old-docs/utils/utils"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta: Meta = { title: "Components/Pane", component: Pane, - argTypes: { - children: Utils.arg("React.ReactNode"), - noPadding: Utils.arg("boolean"), - fullHeight: Utils.arg("boolean"), - contentWidth: Utils.arg("boolean"), - }, + argTypes: docsMetaArgTypes({ + "": { + children: false, + noPadding: "boolean", + fullHeight: "boolean", + contentWidth: "boolean", + }, + }), }; -Utils.page.component(meta, { - primary: "sticky", - shots: [], -}); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/components/popover.stories.tsx b/src/docs/components/popover.stories.tsx index d19f17cd..520faf57 100644 --- a/src/docs/components/popover.stories.tsx +++ b/src/docs/components/popover.stories.tsx @@ -1,21 +1,21 @@ import { Meta, StoryObj } from "@storybook/react"; import { Button, Popover } from "../../core"; -import { PLACEMENTS } from "../../old-docs/utils/placement"; -import { Utils } from "../../old-docs/utils/utils"; +import { PLACEMENTS } from "../utils/placement"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta: Meta = { title: "Components/Popover", component: Popover, - argTypes: { - placement: Utils.arg(PLACEMENTS), - target: Utils.arg(null), - content: Utils.arg(null), - TargetWrapper: Utils.arg(null), - }, + argTypes: docsMetaArgTypes({ + "": { + placement: PLACEMENTS, + target: false, + content: false, + TargetWrapper: false, + }, + }), }; -Utils.page.component(meta, { primary: "sticky", shots: [] }); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/components/progress-circle.stories.tsx b/src/docs/components/progress-circle.stories.tsx index d790ae2d..8f83e3ce 100644 --- a/src/docs/components/progress-circle.stories.tsx +++ b/src/docs/components/progress-circle.stories.tsx @@ -1,23 +1,24 @@ import { Meta, StoryObj } from "@storybook/react"; import { ProgressCircle, ProgressCircleProps } from "../../core"; import { GalleryProgress } from "../../gallery"; -import { Utils } from "../../old-docs/utils/utils"; +import { docsMetaParameters } from "../utils/parameter"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta: Meta = { title: "Components/Progress Circle", component: ProgressCircle, - argTypes: { - size: Utils.arg("number"), - value: Utils.arg("number"), - color: Utils.arg(ProgressCircle.colors), - }, + parameters: docsMetaParameters({ + gallery: , + }), + argTypes: docsMetaArgTypes({ + "": { + size: "number", + value: "number", + color: ProgressCircle.colors, + }, + }), }; -Utils.page.component(meta, { - primary: "sticky", - shots: [], -}); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/components/tag.stories.tsx b/src/docs/components/tag.stories.tsx index 7ebabc7f..afe77d99 100644 --- a/src/docs/components/tag.stories.tsx +++ b/src/docs/components/tag.stories.tsx @@ -1,33 +1,30 @@ import { Meta, StoryObj } from "@storybook/react"; import { Tag } from "../../core"; -import { Utils } from "../../old-docs/utils/utils"; import { GalleryTag } from "../../gallery"; +import { docsMetaParameters } from "../utils/parameter"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta: Meta = { title: "Components/Tag", component: Tag, - argTypes: { - children: Utils.arg(null), - color: Utils.arg(Tag.colors), - size: Utils.arg(Tag.sizes), - forwardedRef: Utils.arg(null), - }, + parameters: docsMetaParameters({ + gallery: , + }), + argTypes: docsMetaArgTypes({ + "": { + children: false, + color: Tag.colors, + size: Tag.sizes, + forwardedRef: false, + }, + }), }; -Utils.page.component(meta, { - primary: "sticky", - shots: [], -}); - export default meta; export const Primary: StoryObj = { render: (props) => ( - + ), }; diff --git a/src/docs/components/time-input.stories.tsx b/src/docs/components/time-input.stories.tsx index f276eb0c..124f8962 100644 --- a/src/docs/components/time-input.stories.tsx +++ b/src/docs/components/time-input.stories.tsx @@ -1,27 +1,25 @@ import { useState } from "react"; import { TimeInput } from "../../core"; -import { Utils } from "../../old-docs/utils/utils"; import { StoryObj } from "@storybook/react"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta = { title: "Components/TimeInput", component: TimeInput, - argTypes: { - style: Utils.arg(TimeInput.styles), - size: Utils.arg(TimeInput.sizes), - fill: Utils.arg("boolean"), - disabled: Utils.arg("boolean"), - value: Utils.arg(null), - setValue: Utils.arg(null), - id: Utils.arg(null), - }, + argTypes: docsMetaArgTypes({ + "": { + interval: Object.values(TimeInput.intervals), + style: TimeInput.styles, + size: TimeInput.sizes, + fill: "boolean", + disabled: "boolean", + value: false, + setValue: false, + id: false, + }, + }), }; -Utils.page.component(meta, { - primary: "sticky", - shots: [], -}); - export default meta; export const Primary: StoryObj = { @@ -36,7 +34,7 @@ export const Primary: StoryObj = { {...props} value={value} setValue={setValue} - interval={TimeInput.intervals.minute} + interval={props.interval ?? TimeInput.intervals.minute} /> ); }, diff --git a/src/docs/components/tooltip.stories.tsx b/src/docs/components/tooltip.stories.tsx index 452e098a..88feb023 100644 --- a/src/docs/components/tooltip.stories.tsx +++ b/src/docs/components/tooltip.stories.tsx @@ -1,20 +1,20 @@ import { Meta, StoryObj } from "@storybook/react"; import { Tooltip } from "../../core"; -import { PLACEMENTS } from "../../old-docs/utils/placement"; -import { Utils } from "../../old-docs/utils/utils"; +import { PLACEMENTS } from "../utils/placement"; +import { docsMetaArgTypes } from "../utils/arg-type"; const meta: Meta = { title: "Components/Tooltip", component: Tooltip, - argTypes: { - placement: Utils.arg(PLACEMENTS), - content: Utils.arg(null), - children: Utils.arg(null), - }, + argTypes: docsMetaArgTypes({ + "": { + placement: PLACEMENTS, + content: false, + children: false, + }, + }), }; -Utils.page.component(meta, { primary: "sticky", shots: [] }); - export default meta; export const Primary: StoryObj = { diff --git a/src/docs/utils/arg-type.ts b/src/docs/utils/arg-type.ts index 45d79c55..218358d7 100644 --- a/src/docs/utils/arg-type.ts +++ b/src/docs/utils/arg-type.ts @@ -1,7 +1,7 @@ import { ArgTypes } from "@storybook/react"; import { ComponentProps, ComponentType } from "react"; -type DocsValue = false | "boolean" | object; +type DocsValue = false | "boolean" | object | "number"; type DocsGroup = Partial< Record, DocsValue> @@ -29,11 +29,13 @@ const transformValue = (value: DocsValue): RawValue => { return { control: false }; case "boolean": return { control: "boolean" }; + case "number": + return { control: "number" }; default: return { control: "select", mapping: value, - options: Object.keys(value), + options: Array.isArray(value) ? value : Object.keys(value), }; } }; diff --git a/src/old-docs/utils/placement.ts b/src/docs/utils/placement.ts similarity index 82% rename from src/old-docs/utils/placement.ts rename to src/docs/utils/placement.ts index a62fc94f..b47be806 100644 --- a/src/old-docs/utils/placement.ts +++ b/src/docs/utils/placement.ts @@ -1,4 +1,4 @@ -import { PopoverPlacement } from "../../../core/src"; +import { PopoverPlacement } from "../../core"; export const PLACEMENTS: PopoverPlacement[] = [ "top",