migrate components

core/src/toast/pane/pane.tsx

@@ -5,7 +5,7 @@ import { DivPx } from "../../div/div";
 import { Icon, IconComponent } from "../../icon/icon";
 import { coreIcons } from "../../icons/icons";
 import { shadow } from "../../shadow/shadow";
-import { Paragraph, text } from "../../text/text";
+import { text } from "../../text/text";
 import s from "./pane.module.css";
 
 export interface ToastPaneType {
@@ -75,9 +75,7 @@ export const ToastPane = (props: Props): JSX.Element => (
 				<Icon display="block" component={props.type.iconComponent} />
 			</div>
 			<DivPx size={12} />
-			<div className={s.children}>
-				<Paragraph>{props.children}</Paragraph>
-			</div>
+			<div className={s.children}>{props.children}</div>
 			<DivPx size={12} />
 			<Close {...props} />
 		</div>

core/src/tooltip/tooltip.tsx

@@ -1,7 +1,6 @@
 import Tippy, { TippyProps } from "@tippyjs/react/headless";
 import { border } from "../border/border";
 import { shadow } from "../shadow/shadow";
-import { Paragraph } from "../text/text";
 import s from "./tooltip.module.css";
 
 type Children = TippyProps["children"];
@@ -42,7 +41,7 @@ export const TooltipPane = (props: PaneProps): JSX.Element => (
 					<div className={[s.arrow].join(" ")} />
 				</div>
 			)}
-			<Paragraph children={props.children} />
+			{props.children}
 		</div>
 	</div>
 );

new-docs/src/components/radio-group-fake.tsx

@@ -0,0 +1,9 @@
+import { RadioOption } from "../../../core/src";
+
+/**
+ * This is not a part of the source code. It exists only for Storybook's
+ * ArgsTable to describe the RadioOption interface.
+ */
+export const RadioOptionComponent = <R,>(
+	props: RadioOption<R>,
+): JSX.Element => <div>{props.id}</div>;

new-docs/src/components/radio-group.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+import { RadioGroup, RadioOption } from "../../../core/src";
+import { Book, someBooks } from "../utils/example";
+import { Utils } from "../utils/utils";
+import { RadioOptionComponent } from "./radio-group-fake";
+
+const meta: Meta = {
+	title: "Components/Radio Group",
+	component: RadioGroup,
+	subcomponents: { RadioOption: RadioOptionComponent as any },
+	argTypes: {
+		row: Utils.arg("boolean"),
+		value: Utils.arg(null),
+		setValue: Utils.arg(null),
+		options: Utils.arg(null),
+		name: Utils.arg(null),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [],
+});
+
+export default meta;
+
+interface Props {
+	row?: boolean;
+}
+
+export const Primary = (props: Props): JSX.Element => {
+	const [value, setValue] = useState(someBooks[1].isbn);
+	const toOption = (book: Book): RadioOption<number> => ({
+		id: book.isbn.toString(),
+		value: book.isbn,
+		label: book.title,
+	});
+	return (
+		<RadioGroup
+			name="primary-group"
+			value={value}
+			setValue={setValue}
+			options={someBooks.map(toOption)}
+			row={props.row}
+		/>
+	);
+};
+
+/**
+RadioGroup is a [controlled][1], [generic][2] component. You should have a
+[state][3] of any type for your value, and give its control to a radio group
+via the \`value\` and \`setValue\` props. Like in HTML, a radio group also
+require a \`name\` to group its options.
+
+The options of a radio group are defined as an array via the \`options\` prop.
+Each option should have a string \`label\`, a \`value\` of your type, and a
+unique \`id\`. See the [\`RadioOption\` table][4] below for more detail.
+
+[1]: https://reactjs.org/docs/forms.html#controlled-components
+[2]: https://www.typescriptlang.org/docs/handbook/2/generics.html
+[3]: https://reactjs.org/docs/hooks-state.html
+[4]: #props
+ */
+export const Basic = (): JSX.Element => {
+	type Value = Book["isbn"];
+
+	const [value, setValue] = useState<Value>(someBooks[1].isbn);
+
+	const toOption = (book: Book): RadioOption<Value> => ({
+		id: book.isbn.toString(),
+		value: book.isbn,
+		label: book.title,
+	});
+
+	return (
+		<RadioGroup<Value>
+			name="basic-group"
+			value={value}
+			setValue={setValue}
+			options={someBooks.map(toOption)}
+		/>
+	);
+};

new-docs/src/components/select-fake.tsx

@@ -0,0 +1,9 @@
+import { SelectOption } from "../../../core/src";
+
+/**
+ * This is not a part of the source code. It exists only for Storybook's
+ * ArgsTable to describe the SelectOption interface.
+ */
+export const SelectOptionComponent = <R,>(
+	props: SelectOption<R>,
+): JSX.Element => <div>{props.id}</div>;

new-docs/src/components/select.stories.tsx

@@ -0,0 +1,143 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Select } from "../../../core/src";
+import { GallerySelect } from "../../../gallery/src";
+import { Utils } from "../utils/utils";
+import { SelectOptionComponent } from "./select-fake";
+
+const meta: Meta = {
+	title: "Components/Select",
+	component: Select,
+	subcomponents: { SelectOption: SelectOptionComponent as any },
+	argTypes: {
+		style: Utils.arg(Select.styles, "Visual"),
+		size: Utils.arg(Select.sizes, "Visual"),
+		fill: Utils.arg("boolean", "Visual"),
+		disabled: Utils.arg("boolean", "Visual"),
+		value: Utils.arg(null, "Controlled"),
+		setValue: Utils.arg(null, "Controlled"),
+		defaultValue: Utils.arg(null, "Uncontrolled"),
+		forwardedRef: Utils.arg(null, "Uncontrolled"),
+		options: Utils.arg(null, "Others"),
+		id: Utils.arg(null, "Others"),
+		required: Utils.arg(null, "Others"),
+	},
+};
+
+Utils.page.component(meta, {
+	primary: "sticky",
+	shots: [<GallerySelect key="1" />],
+});
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+interface Props {
+	style?: string;
+	size?: string;
+	fill?: boolean;
+	disabled?: boolean;
+}
+
+export const Primary = (props: Props): JSX.Element => (
+	<Select<number>
+		options={[
+			{ value: 0, id: "red", label: "Red" },
+			{ value: 1, id: "blue", label: "Blue" },
+			{ value: 2, id: "green", label: "Green" },
+		]}
+		// eslint-disable-next-line
+		style={(Select.styles as any)[props.style!]}
+		// eslint-disable-next-line
+		size={(Select.sizes as any)[props.size!]}
+		fill={props.fill}
+		disabled={props.disabled}
+	/>
+);
+
+/**
+Select is a [controlled][1], [generic][2] component. You should have a
+[state][3] of any type for your value, and give its control to a select via
+the \`value\` and \`setValue\` props.
+
+The options of a select are defined as an array via the \`options\` prop.
+Each option should have a string \`label\`, a \`value\` of your type, and a
+unique \`id\`. See the [\`SelectOption\` table][4] below for more detail.
+
+[1]: https://reactjs.org/docs/forms.html#controlled-components
+[2]: https://www.typescriptlang.org/docs/handbook/2/generics.html
+[3]: https://reactjs.org/docs/hooks-state.html
+[4]: #props
+ */
+export const Basic = (): JSX.Element => {
+	const [value, setValue] = useState<number>(1);
+	return (
+		<Select<number>
+			options={[
+				{ value: 0, id: "red", label: "Red" },
+				{ value: 1, id: "blue", label: "Blue" },
+				{ value: 2, id: "green", label: "Green" },
+			]}
+			value={value}
+			setValue={setValue}
+		/>
+	);
+};
+
+/**
+All options must have the \`id\`, \`label\` and \`value\` attributes defined.
+If these 3 attributes can be the same (usually in case of string-based
+options), you can use \`Select.toStringOption\` as a convenient shortcut to
+simplify the definition.
+
+Similarly, there is also a \`Select.toNumberOption\` for number-based
+options, which calls \`toString\` to provide \`id\` and \`label\` fields.
+ */
+export const StringOptionUtility: Story = {
+	name: "toStringOption Utility",
+	render: (): JSX.Element => {
+		const [value, setValue] = useState("Blue");
+		return (
+			<Select<string>
+				options={["Red", "Blue", "Green"].map(Select.toStringOption)}
+				value={value}
+				setValue={setValue}
+			/>
+		);
+	},
+};
+
+/**
+A select can not have value outside of its options. To have a blank/empty state
+for your select, explicitly define it as a disabled option. We recommend using
+\`null\` to represent this option's value. The type of your Select (and your
+state) should then be \`null | Something\`.
+
+This actually follows the [common practice][1] as when using the HTML
+\`select\` element.
+
+[1]: https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box
+ */
+export const Placeholder = (): JSX.Element => {
+	const [value, setValue] = useState<null | number>(null);
+	return (
+		<Select<number | null>
+			options={[
+				{
+					value: null,
+					id: "null",
+					// This works as the "placeholder"
+					label: "Select a color",
+					// Remove this if users should be able to select the
+					// "empty" state
+					disabled: true,
+				},
+				{ value: 0, id: "red", label: "Red" },
+				{ value: 1, id: "blue", label: "Blue" },
+				{ value: 2, id: "green", label: "Green" },
+			]}
+			value={value}
+			setValue={setValue}
+		/>
+	);
+};

new-docs/src/components/switcher-fake.tsx

@@ -0,0 +1,9 @@
+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>;