From 2b64d7fd42900a2ae11b110c2f9d422541b02b2a Mon Sep 17 00:00:00 2001
From: Riccardo Perra <perrariccardo0@gmail.com>
Date: Sun, 12 Nov 2023 14:50:05 +0100
Subject: [PATCH] docs: add popover and tooltip stories

---
 .../SegmentedControl/SegmentedControl.tsx     |  16 ++-
 packages/kit/src/index.tsx                    |   2 +
 .../storybook/src/stories/Popover.stories.tsx |  64 ++++++++---
 .../storybook/src/stories/Tooltip.stories.tsx | 107 ++++++++++++++++++
 4 files changed, 170 insertions(+), 19 deletions(-)
 create mode 100644 packages/storybook/src/stories/Tooltip.stories.tsx

diff --git a/packages/kit/src/components/SegmentedControl/SegmentedControl.tsx b/packages/kit/src/components/SegmentedControl/SegmentedControl.tsx
index 5bd0c92..c009fe1 100644
--- a/packages/kit/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/kit/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,6 +1,6 @@
 import { Tabs } from "@kobalte/core";
 import { debounce } from "@solid-primitives/scheduled";
-import { onMount, splitProps } from "solid-js";
+import { createEffect, createSignal, on, onMount, splitProps } from "solid-js";
 import { SlotProp } from "../../utils/component";
 import { mergeClasses } from "../../utils/css";
 import * as styles from "./SegmentedControl.css";
@@ -38,7 +38,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
 	]);
 
 	let indicatorRef!: HTMLDivElement;
-	let listRef!: HTMLDivElement;
+	const [listRef, setListRef] = createSignal<HTMLElement>();
 
 	const disabled = () => (props.disabled ? "" : undefined);
 	const autoWidth = () => (props.autoWidth ? "" : undefined);
@@ -71,7 +71,15 @@ export function SegmentedControl(props: SegmentedControlProps) {
 
 	onMount(() => {
 		const resizeObserver = new ResizeObserver(handleListResize);
-		resizeObserver.observe(listRef);
+		createEffect(
+			on(listRef, listRef => {
+				if (!listRef) {
+					resizeObserver.disconnect();
+					return;
+				}
+				resizeObserver.observe(listRef);
+			}),
+		);
 	});
 
 	return (
@@ -88,7 +96,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
 				<Tabs.List
 					data-cui={"segmentedControlList"}
 					class={mergeClasses(styles.list, local.slotClasses?.list)}
-					ref={listRef}
+					ref={setListRef}
 				>
 					{props.children}
 					<Tabs.Indicator
diff --git a/packages/kit/src/index.tsx b/packages/kit/src/index.tsx
index b71db81..f410c81 100644
--- a/packages/kit/src/index.tsx
+++ b/packages/kit/src/index.tsx
@@ -62,3 +62,5 @@ export {
 	layoutVars,
 	responsiveStyle,
 } from "./foundation";
+
+export { As } from "@kobalte/core";
diff --git a/packages/storybook/src/stories/Popover.stories.tsx b/packages/storybook/src/stories/Popover.stories.tsx
index 76f473a..0a67d60 100644
--- a/packages/storybook/src/stories/Popover.stories.tsx
+++ b/packages/storybook/src/stories/Popover.stories.tsx
@@ -1,13 +1,26 @@
 import type { Meta, StoryObj } from "storybook-solidjs";
 
-import { Button, Popover, PopoverContent, PopoverTrigger } from "@codeui/kit";
+import { As, Button, Popover, PopoverContent, PopoverTrigger } from "@codeui/kit";
 import { DocsItemsContainer } from "./components/Section.jsx";
-import { As } from "@kobalte/core";
+import { For } from "solid-js";
+
+const placements = [
+	"top-start",
+	"top-end",
+	"right-start",
+	"right-end",
+	"bottom-start",
+	"bottom-end",
+	"left-start",
+	"left-end",
+] as const;
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
 const meta = {
 	title: "DesignSystem/Popover",
-	component: Popover,
+	component: props => {
+		return <Popover {...props} />;
+	},
 	tags: ["autodocs"],
 	argTypes: {},
 } satisfies Meta<typeof Popover>;
@@ -22,7 +35,7 @@ export const PopoverStory: Story = {
 		<Popover {...props}>
 			<PopoverTrigger asChild>
 				<As component={Button} theme={"secondary"}>
-					Open
+					Click me
 				</As>
 			</PopoverTrigger>
 			<PopoverContent title={"Title"}>
@@ -33,20 +46,41 @@ export const PopoverStory: Story = {
 	),
 };
 
+export const PopoverBordered: Story = {
+	name: "Popover Bordered",
+	render: props => (
+		<Popover {...props}>
+			<PopoverTrigger asChild>
+				<As component={Button} theme={"secondary"}>
+					Click me
+				</As>
+			</PopoverTrigger>
+			<PopoverContent title={"Title"} variant={"bordered"}>
+				About Kobalte A UI toolkit for building accessible web apps and design systems
+				with SolidJS.
+			</PopoverContent>
+		</Popover>
+	),
+};
+
 export const CustomPosition: Story = {
 	render: () => (
 		<DocsItemsContainer>
-			<Popover placement={"bottom-start"}>
-				<PopoverTrigger asChild>
-					<As component={Button} theme={"secondary"}>
-						Custom position
-					</As>
-				</PopoverTrigger>
-				<PopoverContent title={"Title"}>
-					About Kobalte A UI toolkit for building accessible web apps and design systems
-					with SolidJS.
-				</PopoverContent>
-			</Popover>
+			<For each={placements}>
+				{position => (
+					<Popover placement={position}>
+						<PopoverTrigger asChild>
+							<As component={Button} theme={"secondary"}>
+								{position}
+							</As>
+						</PopoverTrigger>
+						<PopoverContent title={"Title"}>
+							About Kobalte A UI toolkit for building accessible web apps and design
+							systems with SolidJS.
+						</PopoverContent>
+					</Popover>
+				)}
+			</For>
 		</DocsItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/Tooltip.stories.tsx b/packages/storybook/src/stories/Tooltip.stories.tsx
new file mode 100644
index 0000000..85906ca
--- /dev/null
+++ b/packages/storybook/src/stories/Tooltip.stories.tsx
@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+import { Button, Tooltip } from "@codeui/kit";
+
+const placements = [
+	"top-start",
+	"top-end",
+	"right-start",
+	"right-end",
+	"bottom-start",
+	"bottom-end",
+	"left-start",
+	"left-end",
+] as const;
+
+const meta = {
+	title: "DesignSystem/Tooltip",
+	component: props => {
+		return <Tooltip {...props} />;
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		placement: {
+			options: placements,
+			defaultValue: "top-start",
+			control: { type: "select" },
+		},
+		theme: {
+			options: ["primary", "secondary"],
+			defaultValue: "primary",
+			control: { type: "inline-radio" },
+		},
+		disabled: {
+			defaultValue: false,
+			type: "boolean",
+		},
+	},
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TooltipStory: Story = {
+	name: "Primary (default)",
+	args: {
+		content: "My tooltip content.",
+		theme: "primary",
+	},
+	render: props => (
+		<Tooltip {...props}>
+			<Button theme="primary" disabled={props.disabled}>
+				Hover me
+			</Button>
+		</Tooltip>
+	),
+};
+
+export const TooltipSecondary: Story = {
+	name: "Secondary",
+	args: {
+		content: "My tooltip content.",
+		theme: "secondary",
+	},
+	render: props => (
+		<Tooltip {...props}>
+			<Button theme="secondary">Hover me</Button>
+		</Tooltip>
+	),
+};
+
+export const TooltipDisabled: Story = {
+	name: "Disabled",
+	args: {
+		content: "My tooltip content.",
+		theme: "secondary",
+		disabled: true,
+	},
+	render: () => (
+		<Tooltip content={"My tooltip content."} theme={"secondary"} disabled>
+			<Button theme="secondary" disabled>
+				Hover me
+			</Button>
+		</Tooltip>
+	),
+};
+
+export const CustomJsxComponent: Story = {
+	name: "Custom component",
+	args: {
+		content: "My tooltip content.",
+		theme: "secondary",
+		disabled: true,
+	},
+	render: () => (
+		<Tooltip
+			content={
+				<Button theme={"primary"} size="xs">
+					Custom content
+				</Button>
+			}
+			theme={"secondary"}
+		>
+			<Button theme="secondary">Hover me</Button>
+		</Tooltip>
+	),
+};