migrate draft

new-docs/pages/draft/button-group/api.ts

@@ -0,0 +1,19 @@
+import { APIData } from "../../../utils/api/api";
+
+export const ButtonGroupAPI: APIData[] = [
+	{
+		prop: "skipChildTypeCheck",
+		description: {
+			type: "boolean",
+			description: "",
+		},
+	},
+	{
+		prop: "fill",
+		description: {
+			type: "boolean",
+			description:
+				"If set to true, the button's width is 100% of its container.",
+		},
+	},
+];

new-docs/pages/draft/button-group/button-group.tsx

@@ -0,0 +1,19 @@
+import { GoSearch } from "react-icons/go";
+import { Button, ButtonGroup, Input, Select } from "@moai/core/src";
+
+export const ButtonGroupExample = (): JSX.Element => {
+	const input = <Input placeholder="Search" />;
+	const button = <Button icon={GoSearch} iconLabel="Search" />;
+	const select = <Select options={["Posts"].map(Select.toStringOption)} />;
+	return (
+		<div style={{ width: 320 }}>
+			<ButtonGroup>
+				{[
+					{ fill: false, element: select },
+					{ fill: true, element: input },
+					{ fill: false, element: button },
+				]}
+			</ButtonGroup>
+		</div>
+	);
+};

new-docs/pages/draft/button-group/index.stories.mdx

@@ -0,0 +1,11 @@
+import { ButtonGroupExample } from "./button-group";
+import { APIReference } from "../../../utils/api/api";
+import { ButtonGroupAPI } from "./api";
+
+## Button Group
+
+<ButtonGroupExample />
+
+### API Reference
+
+<APIReference data={ButtonGroupAPI} />

new-docs/pages/draft/menu/api.ts

@@ -0,0 +1,19 @@
+import { APIData } from "../../../utils/api/api";
+
+export const MenuAPI: APIData[] = [
+	{
+		prop: "items",
+		description: {
+			type: "MenuItemProps[]",
+			description: "",
+		},
+		required: true,
+	},
+	{
+		prop: "onEsc",
+		description: {
+			type: "(() => void)",
+			description: "",
+		},
+	},
+];

new-docs/pages/draft/menu/index.stories.mdx

@@ -0,0 +1,11 @@
+import { MenuExample } from "./menu";
+import { APIReference } from "../../../utils/api/api";
+import { MenuAPI } from "./api";
+
+## Menu
+
+<MenuExample />
+
+### API Reference
+
+<APIReference data={MenuAPI} />

new-docs/pages/draft/menu/menu.tsx

@@ -0,0 +1,13 @@
+import { Menu } from "@moai/core/src";
+
+export const MenuExample = (): JSX.Element => {
+	return (
+		<Menu
+			items={[
+				{ label: "Foo", fn: () => window.alert("foo") },
+				{ label: "Bar", fn: () => window.alert("bar") },
+				{ label: "Baz", disabled: true },
+			]}
+		/>
+	);
+};

new-docs/pages/draft/steps/api.ts

@@ -0,0 +1,20 @@
+import { APIData } from "../../../utils/api/api";
+
+export const StepsAPI: APIData[] = [
+	{
+		prop: "steps",
+		description: {
+			type: "Step[]",
+			description: "",
+		},
+		required: true,
+	},
+	{
+		prop: "current",
+		description: {
+			type: "number",
+			description: "",
+		},
+		required: true,
+	},
+];

new-docs/pages/draft/steps/index.stories.mdx

@@ -0,0 +1,11 @@
+import { StepsExample } from "./steps";
+import { APIReference } from "../../../utils/api/api";
+import { StepsAPI } from "./api";
+
+## Menu
+
+<StepsExample />
+
+### API Reference
+
+<APIReference data={StepsAPI} />

new-docs/pages/draft/steps/steps.tsx

@@ -0,0 +1,14 @@
+import { Steps } from "@moai/core/src";
+
+export const StepsExample = (): JSX.Element => {
+	return (
+		<Steps
+			steps={[
+				{ title: "First" },
+				{ title: "Second" },
+				{ title: "Third and long long" },
+			]}
+			current={1}
+		/>
+	);
+};

new-docs/pages/draft/textarea/api.tsx

@@ -0,0 +1,86 @@
+import { APIData } from "../../../utils/api/api";
+
+export const TextareaAPI: APIData[] = [
+	{
+		prop: "style",
+		description: {
+			type: "InputStyle",
+			description: (
+				<>
+					Style of the text box. Choose one from{" "}
+					<code>TextArea.styles</code>
+					for example: <code>TextArea.styles.flat.</code> Same default
+					as the &quot;Input&quot; component.
+				</>
+			),
+		},
+	},
+	{
+		prop: "size",
+		description: {
+			type: "TextAreaSize",
+			description: (
+				<>
+					Size of the text box. Choose one from{" "}
+					<code>TextArea.sizes</code> for example:{" "}
+					<code>TextArea.size.medium</code>. Same default as the
+					&quot;Input&quot; component.
+				</>
+			),
+		},
+	},
+	{
+		prop: "disabled",
+		description: {
+			type: "boolean",
+			description: "",
+		},
+	},
+	{
+		prop: "readOnly",
+		description: {
+			type: "boolean",
+			description: "",
+		},
+	},
+	{
+		prop: "defaultValue",
+		description: {
+			type: "string",
+			description: "Initial value of the input in uncontrolled mode.",
+		},
+	},
+	{
+		prop: "value",
+		description: {
+			type: "string",
+			description: "Value of the input in controlled mode",
+		},
+	},
+	{
+		prop: "setValue",
+		description: {
+			type: "((value: string) => void)",
+			description: "Handler to set the value in controlled mode",
+		},
+	},
+	{
+		prop: "onChange",
+		description: {
+			type: "ChangeEventHandler<HTMLTextAreaElement>",
+			description: (
+				<>
+					The{" "}
+					<a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange">
+						HTML `onchange`
+					</a>{" "}
+					event handler. Note that you should not need to use
+					onChange! This exists only for compatibility with 3rd-party
+					libraries (those that passing props to a custom rendered
+					component). You should use
+					<code>setValue</code> most of the time.
+				</>
+			),
+		},
+	},
+];

new-docs/pages/draft/textarea/index.stories.mdx

@@ -0,0 +1,11 @@
+import { TextareaExample } from "./textarea";
+import { APIReference } from "../../../utils/api/api";
+import { TextareaAPI } from "./api";
+
+## Textarea
+
+<TextareaExample />
+
+### API Reference
+
+<APIReference data={TextareaAPI} />

new-docs/pages/draft/textarea/textarea.tsx

@@ -0,0 +1,5 @@
+import { TextArea } from "@moai/core/src";
+
+export const TextareaExample = (): JSX.Element => {
+	return <TextArea />;
+};

new-docs/pages/draft/tree/api.tsx

@@ -0,0 +1,97 @@
+import { APIData } from "../../../utils/api/api";
+
+export const TreeAPI: APIData[] = [
+	{
+		prop: "parentMode",
+		description: {
+			type: "select | expand",
+			description: (
+				<>
+					Whether clicking on a parent&lsquo; s title will select or
+					expand it. If set to &quot;select&quot;, clicking on the
+					chevron arrow will expand it.
+				</>
+			),
+		},
+		required: true,
+	},
+	{
+		prop: "_level",
+		description: {
+			type: "number",
+			description: (
+				<>
+					Nested level. This is only used to render the left padding
+					of nested nodes. The consumer usually should not set this
+					since they are passing the root node.
+				</>
+			),
+		},
+	},
+	{
+		prop: "node",
+		description: {
+			type: "TreeNode",
+			description:
+				"The tree node itself. The Tree component simply renders this.",
+		},
+	},
+	{
+		prop: "loadChildren",
+		description: {
+			type: "((node: TreeNode) => Promise<void>)",
+			description: (
+				<>
+					Because Tree is a controlled component, it can only ask the
+					host to load children and update the root on their side.
+					Because Tree is a controlled component, it can only ask the
+					host to load children and update the root on their side.
+				</>
+			),
+		},
+	},
+	{
+		prop: "getRowActions",
+		description: {
+			type: "((node: TreeNode) => MenuItemAction[])",
+			description: (
+				<>
+					Actions to display for a given node/row. Return an empty
+					array will be the same as not define this prop.
+				</>
+			),
+		},
+	},
+	{
+		prop: "selected",
+		description: {
+			type: "Set<string>",
+			description: "Selected nodes in controlled mode",
+		},
+		required: true,
+	},
+	{
+		prop: "setSelected",
+		description: {
+			type: "(set: Set<string>) => void",
+			description: "Handler to set selected nodes in controlled mode",
+		},
+		required: true,
+	},
+	{
+		prop: "expanded",
+		description: {
+			type: "Set<string>",
+			description: "Expanded nodes in controlled mode.",
+		},
+		required: true,
+	},
+	{
+		prop: "setExpanded",
+		description: {
+			type: "(set: Set<string>) => void",
+			description: "Handler to set expanded nodes in controlled mode",
+		},
+		required: true,
+	},
+];

new-docs/pages/draft/tree/index.stories.mdx

@@ -0,0 +1,11 @@
+import { TreeExample } from "./tree";
+import { APIReference } from "../../../utils/api/api";
+import { TreeAPI } from "./api";
+
+## Tree
+
+<TreeExample />
+
+### API Reference
+
+<APIReference data={MenuAPI} />