From 4c4b0e34e0d49349fb2434dcff9666d33b8b3a5c Mon Sep 17 00:00:00 2001
From: NgocNhi123 <ngocnhi@166>
Date: Mon, 1 Jul 2024 00:10:41 +0700
Subject: [PATCH] migrate components

---
 new-docs/src/components/dialog.stories.tsx    | 103 ++++++++++++
 new-docs/src/components/icon.stories.tsx      | 110 +++++++++++++
 new-docs/src/components/input.stories.tsx     | 150 ++++++++++++++++++
 .../src/components/pagination.stories.tsx     |  69 ++++++++
 new-docs/src/components/pane.stories.tsx      |  50 ++++++
 new-docs/src/components/popover.stories.tsx   | 122 ++++++++++++++
 .../components/progress-circle.stories.tsx    |  70 ++++++++
 new-docs/src/components/radio.stories.tsx     |  86 ++++++++++
 new-docs/src/components/switcher-fake.tsx     |   9 --
 new-docs/src/components/tag.stories.tsx       |  43 +++++
 new-docs/src/components/text-area.stories.tsx |  31 ++++
 .../src/components/time-input.stories.tsx     |  91 +++++++++++
 new-docs/src/components/tooltip.stories.tsx   |  67 ++++++++
 new-docs/src/components/tree.stories.tsx      |  64 ++++++++
 new-docs/src/utils/placement.ts               |  19 +++
 15 files changed, 1075 insertions(+), 9 deletions(-)
 create mode 100644 new-docs/src/components/dialog.stories.tsx
 create mode 100644 new-docs/src/components/icon.stories.tsx
 create mode 100644 new-docs/src/components/input.stories.tsx
 create mode 100644 new-docs/src/components/pagination.stories.tsx
 create mode 100644 new-docs/src/components/pane.stories.tsx
 create mode 100644 new-docs/src/components/popover.stories.tsx
 create mode 100644 new-docs/src/components/progress-circle.stories.tsx
 create mode 100644 new-docs/src/components/radio.stories.tsx
 delete mode 100644 new-docs/src/components/switcher-fake.tsx
 create mode 100644 new-docs/src/components/tag.stories.tsx
 create mode 100644 new-docs/src/components/text-area.stories.tsx
 create mode 100644 new-docs/src/components/time-input.stories.tsx
 create mode 100644 new-docs/src/components/tooltip.stories.tsx
 create mode 100644 new-docs/src/components/tree.stories.tsx
 create mode 100644 new-docs/src/utils/placement.ts

diff --git a/new-docs/src/components/dialog.stories.tsx b/new-docs/src/components/dialog.stories.tsx
new file mode 100644
index 00000000..2b306b3d
--- /dev/null
+++ b/new-docs/src/components/dialog.stories.tsx
@@ -0,0 +1,103 @@
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+import { Button, Dialog, DivGrow, Paragraph } from "../../../core/src";
+import { GalleryDialog } from "../../../gallery/src";
+import { Utils } from "../utils/utils";
+
+const meta: Meta = {
+	title: "Components/Dialog",
+	component: Dialog,
+} as Meta;
+
+Utils.page.component(meta, {
+	primary: "none",
+	shots: [<GalleryDialog key="1" />],
+});
+
+export default meta;
+
+export const Primary = (): JSX.Element => <div>None</div>;
+
+/**
+ * Dialog is a [controlled][1], [declarative][3] component: you should have a
+ * boolean [state][2] for whether the dialog should be visible or not, and
+ * conditionally render a dialog based on that state.
+ *
+ * A dialog will call its \`onEsc\` function when the user press the "Esc" key or
+ * click on the backdrop. It's common to set your state to \`false\` here to
+ * "close" the dialog.
+ *
+ * [1]: https://reactjs.org/docs/forms.html#controlled-components
+ * [2]: https://reactjs.org/docs/hooks-state.html
+ * [3]: https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs
+ */
+export const Basic = (): JSX.Element => {
+	const [visible, setVisible] = useState(false);
+	return (
+		<>
+			<Button onClick={() => setVisible(true)} children="Show" />
+			{visible && (
+				<Dialog onEsc={() => setVisible(false)}>Hello world!</Dialog>
+			)}
+		</>
+	);
+};
+
+/**
+ * Out of the box, dialogs render their children as-is, without even a padding,
+ * to allow maximum customization. Therefore, the Dialog component has supporting
+ * components to give you common dialog layout:
+ *
+ * - \`Dialog.Body\` wraps its children inside a padding.
+ * - \`Dialog.Footer\` places its children horizontally, with gaps, aligned to end.
+ * - \`Dialog.Title\` makes its children bold and larger, like a title.
+ */
+export const Layout = (): JSX.Element => {
+	const [visible, setVisible] = useState(false);
+	return (
+		<>
+			<Button onClick={() => setVisible(true)} children="Show" />
+			{visible && (
+				<Dialog onEsc={() => setVisible(false)}>
+					<Dialog.Body>
+						<Dialog.Title>Title</Dialog.Title>
+						<Paragraph>Body</Paragraph>
+					</Dialog.Body>
+					<Dialog.Footer>
+						<Button>First</Button>
+						<DivGrow />
+						<Button>Second</Button>
+						<Button highlight>Third</Button>
+					</Dialog.Footer>
+				</Dialog>
+			)}
+		</>
+	);
+};
+
+/**
+ * The Dialog component has some utility methods as alternatives to the browser's
+ * built-in dialogs:
+ *
+ * - \`Dialog.alert\` for [\`window.alert\`][1]
+ * - \`Dialog.confirm\` for [\`window.confirm\`][2]
+ * - \`Dialog.prompt\` for [\`window.prompt\`][3]
+ *
+ * They accept the same parameters as their built-in counterparts, but return
+ * async results and thus do not block the main flow. They are implemented using
+ * Moai's components.
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
+ * [2]: https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
+ * [3]: https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
+ */
+export const Utilities = (): JSX.Element => (
+	<Button
+		onClick={async () => {
+			const name = await Dialog.prompt("What's your name?");
+			const yes = await Dialog.confirm(`Is your name: "${name}"?`);
+			Dialog.alert(yes ? `Hello ${name}!` : "But you said so!");
+		}}
+		children="Ask name"
+	/>
+);
diff --git a/new-docs/src/components/icon.stories.tsx b/new-docs/src/components/icon.stories.tsx
new file mode 100644
index 00000000..0b5fd335
--- /dev/null
+++ b/new-docs/src/components/icon.stories.tsx
@@ -0,0 +1,110 @@
+import { Meta } from "@storybook/react";
+import { SVGAttributes } from "react";
+import { FaHome } from "react-icons/fa";
+import { Icon, text } from "../../../core/src";
+import { GalleryIcon } from "../../../gallery/src";
+import { Utils } from "../utils/utils";
+
+const meta: Meta = {
+	title: "Components/Icon",
+	component: Icon,
+	argTypes: {
+		display: Utils.arg(["block", "inline"]),
+		component: Utils.arg(null),
+		size: Utils.arg("number"),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [<GalleryIcon key="1" />],
+});
+
+export default meta;
+
+interface Props {
+	display?: "block" | "inline";
+	size?: number;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<div>
+		<span>Some text </span>
+		<Icon
+			display={props.display ?? "block"}
+			component={FaHome}
+			size={props.size}
+		/>
+		<span> another text</span>
+	</div>
+);
+
+/**
+ * The recommended way to use the Icon component is to import an icon from the
+ * [react-icons][1] package and pass it to the \`icon\` prop. All icons in the
+ * package can be used with Moai out of the box.
+ *
+ * ~~~ts
+ *
+ * import { FaHome } from "react-icons/fa";
+ * ~~~
+ *
+ * [1]: https://react-icons.github.io/react-icons/
+ */
+export const Basic = (): JSX.Element => <Icon component={FaHome} />;
+
+/**
+ * To make layout more predictable, icons are rendered as [block elements][1] by
+ * default. However, for icons that are parts of texts, they should be rendered as
+ * [inline elements][2]. This is done by setting the \`display\` prop to
+ * \`inline\`.
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
+ * [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
+ */
+export const Display = (): JSX.Element => (
+	<p>
+		<span>Some text </span>
+		<Icon display="inline" component={FaHome} />
+		<span> another text</span>
+	</p>
+);
+
+/**
+ * SVG icons usually use the [\`currentcolor\`][1] keyword for their colors. This
+ * means to set the color of an icon, you should set the [text color][2] of its
+ * container. Moai has a [\`text\`][3] utility that provides predefined,
+ * accessible colors for icons.
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword
+ * [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/color
+ * [3]: /docs/patterns-color-text--page
+ */
+export const Color = (): JSX.Element => (
+	<div className={text.highlightWeak}>
+		<Icon component={FaHome} />
+	</div>
+);
+
+/**
+ * Technically, the \`component\` prop expects a [function component][1] that
+ * returns an SVG element. You can use it to display your own custom icons (e.g.
+ * logos, product icons). With tools like [React SVGR][3], you can even create
+ * your own icon sets to use with Moai. See the [Advanced section][2] in the Icon
+ * Pattern guide for detail.
+ *
+ * [1]: https://reactjs.org/docs/components-and-props.html#function-and-class-components
+ * [2]: /docs/patterns-icon--advanced
+ * [3]: https://react-svgr.com
+ */
+export const Advanced = (): JSX.Element => {
+	// In practice, this should be defined outside of your component, or even
+	// better, automatically generated by a tool like react-svgr.
+	const Line = (props: SVGAttributes<SVGElement>) => (
+		<svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
+			{/* This is just a horizontal line */}
+			<path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
+		</svg>
+	);
+	return <Icon component={Line} />;
+};
diff --git a/new-docs/src/components/input.stories.tsx b/new-docs/src/components/input.stories.tsx
new file mode 100644
index 00000000..71f48b1d
--- /dev/null
+++ b/new-docs/src/components/input.stories.tsx
@@ -0,0 +1,150 @@
+import { Meta } from "@storybook/react";
+import * as Fm from "formik";
+import { useState } from "react";
+import { HiPhone } from "react-icons/hi";
+import { Button, Dialog, DivPx, Input } from "../../../core/src";
+import { GalleryInput1, GalleryInput2 } from "../../../gallery/src";
+import { Utils } from "../utils/utils";
+
+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"),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [<GalleryInput1 key="1" />, <GalleryInput2 key="2" />],
+});
+
+export default meta;
+
+interface Props {
+	type?: string;
+	style?: string;
+	size?: string;
+	maxLength?: number;
+	disabled?: boolean;
+	readOnly?: boolean;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<div style={{ width: 200 }}>
+		<Input
+			type={props.type}
+			// eslint-disable-next-line
+			style={(Input.styles as any)[props.style!]}
+			// eslint-disable-next-line
+			size={(Input.sizes as any)[props.size!]}
+			maxLength={props.maxLength}
+			disabled={props.disabled}
+			readOnly={props.readOnly}
+			aria-label="Default input"
+		/>
+	</div>
+);
+
+/**
+ * Input should be used as a [controlled][1] component. You should have a
+ * [state][2] to store the text value, and give its control to an Input via its
+ * \`value\` and \`setValue\` props. At the moment, these props work with
+ * \`string\` values only.
+ *
+ * To have good accessibility, ensure that your inputs have their matching labels.
+ * You can do it in many ways: wrap the input inside a \`label\`, or explicitly
+ * [link][3] it to one (like in the example below), or via the \`aria-label\` and
+ * \`aria-labelledby\` props.
+ *
+ * Note that Moai's inputs don't have the [confusing][4] default width. Instead,
+ * inputs always fill 100% of their container width. This means you should control
+ * the width of an input via its container.
+ *
+ * [1]: https://reactjs.org/docs/forms.html#controlled-components
+ * [2]: https://reactjs.org/docs/hooks-state.html
+ * [3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for
+ * [4]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-size
+ */
+export const Basic = (): JSX.Element => {
+	const [text, setText] = useState<string>("Hello");
+	return (
+		<div style={{ width: 200 }}>
+			<label htmlFor="basic-input">Basic example</label>
+			<Input id="basic-input" value={text} setValue={setText} />
+		</div>
+	);
+};
+
+/**
+ * Input follows the [standard approach][1] to support suggestion. You should
+ * define your suggestion as a \`datalist\` element, then give its \`id\` to an
+ * input via the \`list\` prop.
+ *
+ * As a convenient shortcut, you can also define your suggestion directly via the
+ * \`list\` prop and Input will create the \`datalist\` element for you. You'll
+ * still need an explicit \`id\` for the list:
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
+ */
+export const Suggestion = (): JSX.Element => (
+	<div style={{ width: 200 }}>
+		<Input
+			aria-label="suggestion-input"
+			list={{ id: "suggestion-list", values: ["red", "green", "blue"] }}
+		/>
+	</div>
+);
+
+/**
+ * Input supports both [controlled][1] and [uncontrolled][2] usages, making it
+ * easy to use them with form builders like [Formik][3] and [React Hook Form][4],
+ * right out of the box. See our [Form guide][5] to learn more.
+ *
+ * [1]: https://reactjs.org/docs/forms.html#controlled-components
+ * [2]: https://reactjs.org/docs/uncontrolled-components.html
+ * [3]: https://formik.org
+ * [4]: https://react-hook-form.com
+ * [5]: /docs/guides-icons--primary
+ */
+export const Form = (): JSX.Element => (
+	// "Fm" is the Formik's namespace
+	<Fm.Formik
+		initialValues={{ email: "" }}
+		onSubmit={(values) => Dialog.alert(values.email)}
+	>
+		<Fm.Form style={{ width: 200 }}>
+			<label htmlFor="form-email">Email</label>
+			<Fm.Field id="form-email" type="email" name="email" as={Input} />
+			<DivPx size={8} />
+			<Button type="submit" highlight children="Submit" />
+		</Fm.Form>
+	</Fm.Formik>
+);
+
+/**
+ * An input can have an icon defined via the \`icon\` prop. This follows our [Icon
+ * standard][1], which supports all SVG icons. See the [Icon guide][1] to learn
+ * more.
+ *
+ * [1]: /docs/guides-icons--primary
+ */
+export const Icon = (): JSX.Element => (
+	// The icon is imported from the "react-icons" external library, like
+	// import { HiPhone } from "react-icons/hi";
+	<div style={{ width: 200 }}>
+		<Input
+			icon={HiPhone}
+			placeholder="(888) 000-9999"
+			aria-label="Enter phone"
+		/>
+	</div>
+);
diff --git a/new-docs/src/components/pagination.stories.tsx b/new-docs/src/components/pagination.stories.tsx
new file mode 100644
index 00000000..d6c50ef4
--- /dev/null
+++ b/new-docs/src/components/pagination.stories.tsx
@@ -0,0 +1,69 @@
+import { Meta } from "@storybook/react";
+import { useCallback, useState } from "react";
+import { Pagination } from "../../../core/src";
+import { Utils } from "../utils/utils";
+
+const meta: Meta = {
+	title: "Components/Pagination",
+	component: Pagination,
+};
+
+Utils.page.component(meta, { primary: "none", shots: [] });
+
+export default meta;
+
+export const Primary = (): JSX.Element => {
+	const [page, setPage] = useState(1);
+	return <Pagination value={page} setValue={setPage} max={10} min={1} />;
+};
+
+/**
+ * Pagination is a [controlled][1] component. You should maintain a number
+ * [state][2] for the current page, and pass the control to a pagination via its
+ * \`value\` and \`setValue\` props. It also requires the \`min\` and \`max\`
+ * props (inclusive) to define the range of pages users can go to.
+ *
+ * [1]: https://reactjs.org/docs/forms.html#controlled-components
+ * [2]: https://reactjs.org/docs/hooks-state.html
+ */
+export const Basic = Primary;
+
+/**
+ * You may need to fetch some new data when users navigate to a new page. In these
+ * cases, return a [\`Promise\`][1] in the \`setValue\` callback to have the
+ * pagination displays a loading state while waiting for data.
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
+ */
+export const Async = (): JSX.Element => {
+	const [page, setPage] = useState(1);
+	const setPageAsync = useCallback((page: number): Promise<void> => {
+		return new Promise((resolve) => {
+			setPage(page);
+			window.setTimeout(() => resolve(), 1000);
+		});
+	}, []);
+	return <Pagination value={page} setValue={setPageAsync} max={10} min={1} />;
+};
+
+/**
+ * In most cases, paginations should start at "1" to mimic real-life counting.
+ * However, your pagination back end may start at "0". In these cases, it's
+ * recommended to use zero-based counting for your state and most logic, and only
+ * translate to one-based in the pagination's props.
+ */
+export const Counting = (): JSX.Element => {
+	// Zero-based API
+	const TOTAL_PAGES = 9;
+	const [page, setPage] = useState(0);
+
+	// One-based UI
+	return (
+		<Pagination
+			value={page + 1}
+			setValue={(page) => setPage(page - 1)}
+			max={TOTAL_PAGES + 1}
+			min={1}
+		/>
+	);
+};
diff --git a/new-docs/src/components/pane.stories.tsx b/new-docs/src/components/pane.stories.tsx
new file mode 100644
index 00000000..3558ba9b
--- /dev/null
+++ b/new-docs/src/components/pane.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta } from "@storybook/react";
+import { Pane } from "../../../core/src";
+import { Utils } from "../utils/utils";
+
+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"),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [],
+});
+
+export default meta;
+
+interface Props {
+	noPadding?: boolean;
+	fullHeight?: boolean;
+	contentWidth?: boolean;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<div style={{ height: 100 }}>
+		<Pane {...props}>
+			Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+		</Pane>
+	</div>
+);
+
+/**
+ * A pane only require its \`children\` to be defined. See the [props table][1]
+ * below for props to control its padding, width and height.
+ *
+ * [1]: #props
+ */
+export const Basic = (): JSX.Element => (
+	<Pane>
+		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus
+		sapiente vero ad eius fuga atque repellendus? Repellat sint veniam
+		adipisci accusamus, nihil explicabo odio, id neque ducimus voluptate
+		nulla? Maiores?
+	</Pane>
+);
diff --git a/new-docs/src/components/popover.stories.tsx b/new-docs/src/components/popover.stories.tsx
new file mode 100644
index 00000000..2d29a4fc
--- /dev/null
+++ b/new-docs/src/components/popover.stories.tsx
@@ -0,0 +1,122 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Button, Popover, PopoverPlacement } from "../../../core/src";
+import { PLACEMENTS } from "../utils/placement";
+import { Utils } from "../utils/utils";
+
+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),
+	},
+};
+
+Utils.page.component(meta, { primary: "sticky", shots: [] });
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+interface Props {
+	placement?: PopoverPlacement;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<Popover
+		placement={props.placement}
+		target={(popover) => (
+			<Button onClick={popover.toggle} children="Show popover" />
+		)}
+		content={() => <div style={{ padding: 8 }} children="Hello" />}
+	/>
+);
+
+/**
+A popover consists of 2 parts: a "content" and a "target". They are both
+[render props][1].
+
+The \`content\` prop expects a function that returns what to be rendered inside
+the pop-up container. This is a function to avoid unnecessary renders (e.g.
+when the popover is not activated).
+
+The \`target\` prop expects a function that returns an element. This element
+is always rendered, and should use the \`popover\` param to activate the
+popover on users' action. The \`popover\` param has the following interface:
+
+~~~ts
+interface PopoverTarget {
+	// Open or close the popover
+	toggle: () => void;
+	// "true" if the popover is opened
+	opened: boolean;
+}
+~~~
+
+This means Popover is similar to an [uncontrolled][2] component. You cannot
+control whether a popover is opened via a prop, but instead can only "trigger"
+it, imperatively, via the callback you received.
+
+[1]: https://reactjs.org/docs/render-props.html
+[2]: https://reactjs.org/docs/uncontrolled-components.html
+ */
+export const Basic = (): JSX.Element => (
+	<Popover
+		target={(popover) => (
+			<Button
+				onClick={() => popover.toggle()}
+				selected={popover.opened}
+				children="Show popover"
+			/>
+		)}
+		content={() => "Hello"}
+	/>
+);
+
+/**
+In order to position the content relative to the target, Popover needs to wrap
+the target inside a wrapper. By default, this wrapper is an HTML \`div\`
+element with a \`width: fit-content\`. This should work for most cases, but
+there are also other wrappers at \`Popover.targetWrappers\` for other cases:
+
+- \`inline\` should be used when your \`target\` is an [inline][1] element,
+such as a \`<span />\`.
+- \`block\` should be used when you don't want the \`fit-content\` width, e.g.
+for full-width buttons.
+
+[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
+ */
+export const TargetWrapper = (): JSX.Element => (
+	<Popover
+		content={() => "Hello"}
+		target={(popover) => <span onClick={popover.toggle}>Click me!</span>}
+		TargetWrapper={Popover.targetWrappers.inline}
+	/>
+);
+
+/**
+By default, Popover positions its content on top of its target. This can be
+changed by the \`placement\` prop, which expects a string of [Popper.js'
+\`placement\`][1] option. You can see (and try!) all available placements at
+the [props table][2] below.
+
+Note that this is more like a suggestion. If there is no space in the selected
+placement, Popover will choose another placement, usually the opposite
+one, to keep the content in the viewport.
+
+[1]: https://popper.js.org/docs/v2/constructors/#options
+[2]: #props
+ */
+export const PlacementExample: Story = {
+	name: "Placement",
+	render: (): JSX.Element => (
+		<Popover
+			placement="right"
+			target={(popover) => (
+				<Button onClick={popover.toggle} children="Show popover" />
+			)}
+			content={() => <div style={{ padding: 8 }} children="Hello" />}
+		/>
+	),
+};
diff --git a/new-docs/src/components/progress-circle.stories.tsx b/new-docs/src/components/progress-circle.stories.tsx
new file mode 100644
index 00000000..3b3d6337
--- /dev/null
+++ b/new-docs/src/components/progress-circle.stories.tsx
@@ -0,0 +1,70 @@
+import { Meta } from "@storybook/react";
+import { ProgressCircle, ProgressCircleProps } from "../../../core/src";
+import { GalleryProgress } from "../../../gallery/src";
+import { Utils } from "../utils/utils";
+
+const meta: Meta = {
+	title: "Components/Progress Circle",
+	component: ProgressCircle,
+	argTypes: {
+		size: Utils.arg("number"),
+		value: Utils.arg("number"),
+		color: Utils.arg(ProgressCircle.colors),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [<GalleryProgress key="1" />],
+});
+
+export default meta;
+
+interface Props {
+	size: number;
+	value: number;
+	color?: string;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<ProgressCircle
+		size={props.size ?? 16}
+		value={props.value ?? 0.4}
+		// eslint-disable-next-line
+		color={(ProgressCircle.colors as any)[props.color!]}
+	/>
+);
+
+/**
+A progress circle requires its \`size\` and \`value\` props to be defined. The
+value should be a number from 0 (no progress yet) to 1 (all's done), or the
+"indeterminate" string to show a spinning circle.
+ */
+export const Basic = (): JSX.Element => (
+	<div style={{ display: "flex", gap: 8 }}>
+		<ProgressCircle size={16} value={0.4} />
+		<ProgressCircle size={16} value="indeterminate" />
+	</div>
+);
+
+/**
+The color of a progress circle is set via its \`color\` prop. Colors are
+defined at \`ProgressCircle.colors\`:
+
+- \`neutral\` shows a gray circle. This is the default value.
+- \`highlight\` highlight the circle.
+- \`inverse\` is for displaying the circle on top of a colored background.
+ */
+export const Color = (): JSX.Element => {
+	const base: ProgressCircleProps = { size: 16, value: "indeterminate" };
+	const { neutral, highlight, inverse } = ProgressCircle.colors;
+	return (
+		<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+			<ProgressCircle {...base} color={neutral} />
+			<ProgressCircle {...base} color={highlight} />
+			<div style={{ background: "var(--highlight-5)", padding: 8 }}>
+				<ProgressCircle {...base} color={inverse} />
+			</div>
+		</div>
+	);
+};
diff --git a/new-docs/src/components/radio.stories.tsx b/new-docs/src/components/radio.stories.tsx
new file mode 100644
index 00000000..f9d91ac0
--- /dev/null
+++ b/new-docs/src/components/radio.stories.tsx
@@ -0,0 +1,86 @@
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+import { Radio } from "../../../core/src";
+import { Book, someBooks } from "../utils/example";
+import { Utils } from "../utils/utils";
+
+const meta: Meta = {
+	title: "Components/Radio",
+	component: Radio,
+	argTypes: {
+		disabled: Utils.arg("boolean"),
+		checked: Utils.arg("boolean"),
+		value: Utils.arg(null),
+		children: Utils.arg(null),
+		name: Utils.arg(null),
+		setValue: Utils.arg(null),
+		defaultChecked: Utils.arg(null),
+		forwardedRef: Utils.arg(null),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [],
+});
+
+export default meta;
+
+interface Props {
+	disabled?: boolean;
+	checked?: boolean;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<Radio
+		checked={props.checked ?? true}
+		disabled={props.disabled}
+		name="radio"
+		value="1"
+		children="Radio"
+	/>
+);
+
+/**
+It's recommended to use the [Radio Group][1] component. However, when you need complex layout customization, you can still use the Radio component manually.  It should be used as a controlled component, but its props are a little bit more complicated than other input components:
+
+- \`checked\`: whether the radio should be checked
+- \`value\`: the text value of the radio
+- \`setValue\`: a callback to set the radio as selected
+
+Like in HTML, a \`name\` prop is also required to group your radio buttons.
+
+[1]: /docs/components-radio-group--primary
+ */
+export const Basic = (): JSX.Element => {
+	const [selected, setSelected] = useState(someBooks[1].isbn.toString());
+
+	const toRadio = (book: Book, index: number): JSX.Element => (
+		<li key={book.isbn} style={{ marginTop: index === 0 ? 0 : 8 }}>
+			<Radio
+				name="basic-radios"
+				checked={selected === book.isbn.toString()}
+				value={book.isbn.toString()}
+				setValue={setSelected}
+				children={book.title}
+			/>
+		</li>
+	);
+
+	return <ul>{someBooks.map(toRadio)}</ul>;
+};
+
+/**
+The \`children\` prop of Radio accepts \`ReactNode\` but intentionally excludes the falsy values (e.g. \`false\`, \`null\`, \`undefined\`). This ensures your radio buttons always have accessible labels, even if the labels are not _displayed_.
+
+To hide the label of a radio button, set its \`hideLabel\` prop to \`true\`.  You'll still need to define a label at the \`children\` prop. Sighted users won't see the label, but screen readers will announce it for unsighted users.
+
+This should be used where the surrounding context can visually tell your sighted users about the meaning of the radio buttons. A common use case is to have a radio button for each row of a table. In fact, for a real-life example, see the [\`selectable\`][1] section of the Table component.
+
+[1]: /docs/components-table--selectable-single
+ */
+export const WithoutLabel = (): JSX.Element => (
+	<Radio name="radio" value="1" hideLabel>
+		Sample Radio
+	</Radio>
+);
diff --git a/new-docs/src/components/switcher-fake.tsx b/new-docs/src/components/switcher-fake.tsx
deleted file mode 100644
index 5a111282..00000000
--- a/new-docs/src/components/switcher-fake.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { SwitcherOption } from "../../../core/src";
-
-/**
- * This is not a part of the source code. It exists only for Storybook's
- * ArgsTable to describe the Option interface.
- */
-export const SwitcherOptionComponent = <R,>(
-	props: SwitcherOption<R>,
-): JSX.Element => <div>{props.key}</div>;
diff --git a/new-docs/src/components/tag.stories.tsx b/new-docs/src/components/tag.stories.tsx
new file mode 100644
index 00000000..56700026
--- /dev/null
+++ b/new-docs/src/components/tag.stories.tsx
@@ -0,0 +1,43 @@
+import { Meta } from "@storybook/react";
+import { Tag } from "../../../core/src";
+import { GalleryTag } from "../../../gallery/src";
+import { Utils } from "../utils/utils";
+
+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),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [<GalleryTag key="1" />],
+});
+
+export default meta;
+
+interface Props {
+	color?: string;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<Tag
+		// eslint-disable-next-line
+		color={(Tag.colors as any)[props.color ?? "gray"]}
+		children="Foo"
+	/>
+);
+
+/**
+A tag requires a label, defined as a string via the \`children\` prop, and a
+color, defined via the same name prop, and should come from the \`Tag.colors\`
+list. You can try all available colors in the [All Props][1] table below.
+
+[1]: #props
+ */
+export const Basic = (): JSX.Element => <Tag color={Tag.colors.green}>Foo</Tag>;
diff --git a/new-docs/src/components/text-area.stories.tsx b/new-docs/src/components/text-area.stories.tsx
new file mode 100644
index 00000000..218be529
--- /dev/null
+++ b/new-docs/src/components/text-area.stories.tsx
@@ -0,0 +1,31 @@
+import { TextArea } from "../../../core/src";
+import { Utils } from "../utils/utils";
+
+export default {
+	title: "Draft/TextArea",
+	component: TextArea,
+	argTypes: {
+		style: Utils.arg(TextArea.styles),
+		size: Utils.arg(TextArea.sizes),
+		disabled: Utils.arg("boolean"),
+		readOnly: Utils.arg("boolean"),
+	},
+};
+
+interface Props {
+	style?: string;
+	size?: string;
+	disabled?: boolean;
+	readOnly?: boolean;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<TextArea
+		// eslint-disable-next-line
+		style={(TextArea.styles as any)[props.style!]}
+		// eslint-disable-next-line
+		size={(TextArea.sizes as any)[props.size!]}
+		disabled={props.disabled}
+		readOnly={props.readOnly}
+	/>
+);
diff --git a/new-docs/src/components/time-input.stories.tsx b/new-docs/src/components/time-input.stories.tsx
new file mode 100644
index 00000000..4ecde88b
--- /dev/null
+++ b/new-docs/src/components/time-input.stories.tsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { TimeInput } from "../../../core/src";
+import { Utils } from "../utils/utils";
+
+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),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [],
+});
+
+export default meta;
+
+interface Props {
+	style?: string;
+	size?: string;
+	fill?: boolean;
+	disabled?: boolean;
+}
+
+export const Primary = (props: Props): JSX.Element => {
+	const [value, setValue] = useState<Date>(() => {
+		const date = new Date();
+		date.setSeconds(0); // TimeInput's value's second must be 0
+		return date;
+	});
+	return (
+		<TimeInput
+			value={value}
+			setValue={setValue}
+			interval={TimeInput.intervals.minute}
+			// eslint-disable-next-line
+			style={(TimeInput.styles as any)[props.style!]}
+			// eslint-disable-next-line
+			size={(TimeInput.sizes as any)[props.size!]}
+			fill={props.fill}
+			disabled={props.disabled}
+		/>
+	);
+};
+
+/**
+Time Input is a [controlled][1] component. You should have a [Date][2] state
+to store the time, and give its control to a time input via the \`value\` and
+\`setValue\` prop.
+
+Time Input also requires an \`interval\` prop, which specifies the difference
+between 2 options. It should come from the \`TimeInput.intervals\` list:
+
+- \`minute\`: one option every minute
+- \`quarter\`: every 15 minutes (e.g. 0, 15, 30, 45)
+- \`half\`: every 30 minutes (e.g. 0, 30)
+- \`hour\`: every hour
+
+It's important to note that your \`value\` prop must always satisfy your 
+\`interval\` prop, or else Time Input will throw a runtime error. You may want
+to use the [\`setMinutes\`][3] utility to ensure this (see the code of the
+example below). It also means you should never change your \`interval\` prop at
+runtime, because it easily invalidates your current \`value\`.
+
+[1]: https://reactjs.org/docs/forms.html#controlled-components
+[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+[3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+ */
+export const Basic = (): JSX.Element => {
+	const [value, setValue] = useState<Date>(() => {
+		const date = new Date();
+		date.setSeconds(0); // Ensure second is zero
+		date.setMinutes(15); // Ensure value follows interval
+		return date;
+	});
+	return (
+		<TimeInput
+			interval={TimeInput.intervals.quarter}
+			value={value}
+			setValue={setValue}
+		/>
+	);
+};
diff --git a/new-docs/src/components/tooltip.stories.tsx b/new-docs/src/components/tooltip.stories.tsx
new file mode 100644
index 00000000..a8430bcc
--- /dev/null
+++ b/new-docs/src/components/tooltip.stories.tsx
@@ -0,0 +1,67 @@
+import { Meta } from "@storybook/react";
+import { Tooltip, TooltipProps } from "../../../core/src";
+import { PLACEMENTS } from "../utils/placement";
+import { Utils } from "../utils/utils";
+
+const meta: Meta = {
+	title: "Components/Tooltip",
+	component: Tooltip,
+	argTypes: {
+		placement: Utils.arg(PLACEMENTS),
+		content: Utils.arg(null),
+		children: Utils.arg(null),
+	},
+};
+
+Utils.page.component(meta, { primary: "sticky", shots: [] });
+
+export default meta;
+
+interface Props {
+	placement?: TooltipProps["placement"];
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<Tooltip content="Hello Moai" placement={props.placement}>
+		<span tabIndex={0}>Hover me</span>
+	</Tooltip>
+);
+
+/**
+To have a tooltip for an element, wrap the \`Tooltip\` component outside it,
+and define the information via the \`content\` prop. The tooltip is shown when
+users hover or focus on the element.
+
+To have your tooltips [accessible][1] to all users, even those who don't use a
+mouse, ensure your elements are [focusable][2]. For example, if it's a
+non-interactive element like a \`<span>\`, you may want to use
+\`tabIndex={0}\`. You don't need to do anything for interactive elements like
+buttons and inputs.
+
+[1]: https://www.nngroup.com/articles/tooltip-guidelines/
+[2]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard#interactive_elements_must_be_focusable
+ */
+export const Basic = (): JSX.Element => (
+	<Tooltip content="Hello Moai">
+		<span tabIndex={0}>Hover me</span>
+	</Tooltip>
+);
+
+/**
+By default, Tooltip positions the \`content\` on top of the \`children\`. This
+can be changed via the \`placement\` prop, which expects a string of [Tippy.js'
+\`placement\`][1] option. You can see (and try!) all available placements at
+the [props table][2] below.
+
+Note that this is more like a suggestion. If there is no space in the selected
+placement, Tooltip will choose another placement, usually the opposite
+one, to keep the content in the viewport.
+
+[1]: https://atomiks.github.io/tippyjs/v6/all-props/#placement
+[2]: #props
+ */
+export const Placement = (): JSX.Element => (
+	<Tooltip content="Hello Moai" placement="right">
+		<span tabIndex={0}>Hover me</span>
+	</Tooltip>
+);
diff --git a/new-docs/src/components/tree.stories.tsx b/new-docs/src/components/tree.stories.tsx
new file mode 100644
index 00000000..c99aadcc
--- /dev/null
+++ b/new-docs/src/components/tree.stories.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Meta } from "@storybook/react";
+import { Dialog, Tree, TreeProps } from "../../../core/src";
+import { Utils } from "../utils/utils";
+
+const meta: Meta = {
+	title: "Draft/Tree",
+	component: Tree,
+	argTypes: {
+		parentMode: Utils.arg(["select", "expand"]),
+	},
+};
+
+export default meta;
+
+const root = {
+	id: "root",
+	label: "Document",
+	children: [
+		{
+			id: "hello-file",
+			label: "hello.txt",
+		},
+		{
+			id: "gallery-folder",
+			label: "Gallery",
+			children: [
+				{
+					id: "autumn-picture",
+					label: "autumn.png",
+				},
+				{
+					id: "summer-picture",
+					label: "summer.png",
+				},
+			],
+		},
+	],
+};
+
+interface Props {
+	parentMode: TreeProps["parentMode"];
+}
+
+export const Basic = (props: Props): JSX.Element => {
+	const [expanded, setExpanded] = useState<Set<string>>(new Set());
+	const [selected, setSelected] = useState<Set<string>>(new Set());
+
+	return (
+		<div style={{ width: 200 }}>
+			<Tree
+				expanded={expanded}
+				setExpanded={setExpanded}
+				selected={selected}
+				setSelected={setSelected}
+				node={root}
+				parentMode={props.parentMode}
+				getRowActions={(node) => [
+					{ label: "Say", fn: () => Dialog.alert(node.label) },
+				]}
+			/>
+		</div>
+	);
+};
diff --git a/new-docs/src/utils/placement.ts b/new-docs/src/utils/placement.ts
new file mode 100644
index 00000000..1d374e71
--- /dev/null
+++ b/new-docs/src/utils/placement.ts
@@ -0,0 +1,19 @@
+import { PopoverPlacement } from "../../../core/src";
+
+export const PLACEMENTS: PopoverPlacement[] = [
+	"top",
+	"top-start",
+	"top-end",
+	"right",
+	"right-start",
+	"right-end",
+	"bottom",
+	"bottom-start",
+	"bottom-end",
+	"left",
+	"left-start",
+	"left-end",
+	"auto",
+	"auto-start",
+	"auto-end",
+];