docs: add popover and tooltip stories

riccardoperra · Nov 12, 2023 · 97308ec · 97308ec
1 parent de2994e
commit 97308ec
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 21 deletions.
diff --git a/packages/kit/src/components/SegmentedControl/SegmentedControl.tsx b/packages/kit/src/components/SegmentedControl/SegmentedControl.tsx
@@ -70,6 +70,9 @@ export function SegmentedControl(props: SegmentedControlProps) {
 	}, 0);
 
 	onMount(() => {
+		if (!listRef) {
+			return;
+		}
 		const resizeObserver = new ResizeObserver(handleListResize);
 		resizeObserver.observe(listRef);
 	});

diff --git 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/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
@@ -24,12 +24,8 @@ function ThemeWrapper(props: FlowProps) {
 }
 
 export const decorators = [
-	(Story: Component) => {
-		return (
-			<ThemeWrapper>
-				<Story />
-			</ThemeWrapper>
-		);
+	(Story: () => any) => {
+		return <ThemeWrapper>{Story()}</ThemeWrapper>;
 	},
 ];
 

diff --git 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
@@ -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>
+	),
+};