chore: storybook shared

.storybook/main.ts

@@ -26,13 +26,10 @@ const config: StorybookConfig = {
 			propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
 		},
 	},
-	// core: {
-	// 	builder: {
-	// 		name: "@storybook/builder-vite",
-	// 		options: { fsCache: false },
-	// 	},
-	// },
-	stories: ["../packages/reshaped/src/**/*.stories.tsx"],
+	stories: [
+		"../packages/reshaped/src/**/*.stories.tsx",
+		"../packages/headless/src/**/*.stories.tsx",
+	],
 	staticDirs: ["./public"],
 	addons: [
 		"@storybook/addon-vitest",
@@ -50,9 +47,17 @@ const config: StorybookConfig = {
 	],
 	async viteFinal(config: UserConfig) {
 		return mergeConfig(config, {
+			resolve: {
+				alias: {
+					"@reshaped/headless": resolve(__dirname, "../packages/headless/src"),
+				},
+			},
 			plugins: [
 				tsconfigPaths({
-					projects: [resolve(__dirname, "../packages/reshaped/tsconfig.json")],
+					projects: [
+						resolve(__dirname, "../packages/reshaped/tsconfig.json"),
+						resolve(__dirname, "../packages/headless/tsconfig.json"),
+					],
 				}),
 			],
 			css: {

.storybook/plugins/iframe.mjs

@@ -1,6 +1,6 @@
 import React from "react";
-import { addons, types } from "storybook/manager-api";
 import { AddonPanel } from "storybook/internal/components";
+import { addons, types } from "storybook/manager-api";
 
 const ADDON_ID = "reshaped-iframe";
 const PANEL_ID = `${ADDON_ID}/panel`;

.storybook/plugins/preset.mjs

@@ -1,5 +1,5 @@
-import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);

packages/headless/src/hooks/_internal/useSingletonRTL.tsx

@@ -3,7 +3,7 @@
 import { isRTL } from "@reshaped/utilities";
 import React from "react";
 
-import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect";
 
 type Context = {
 	rtl: [boolean, (state: boolean) => void];

packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx → packages/headless/src/hooks/tests/useHandlerRef.stories.tsx

@@ -1,13 +1,11 @@
-import { useHandlerRef } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, Mock, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useHandlerRef from "../useHandlerRef";
 
 export default {
-	title: "Hooks/useHandlerRef",
+	title: "Headless/Hooks/useHandlerRef",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -38,16 +36,16 @@ export const base: StoryObj<{ handleEffect: Mock }> = {
 		};
 
 		return (
-			<View gap={4}>
-				<Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>
+			<div style={{ display: "flex", gap: "4px" }}>
+				<button onClick={() => setCount((prev) => prev + 1)}>Increase count</button>
 				<Component onEffect={handleEffect} count={count} />
-			</View>
+			</div>
 		);
 	},
 	play: async ({ canvas, args }) => {
 		const button = canvas.getAllByRole("button")[0];
 
-		// mount, triggerred twice in dev mode
+		// mount, triggered twice in dev mode
 		expect(args.handleEffect).toHaveBeenCalledTimes(2);
 
 		await userEvent.click(button);

packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx → packages/headless/src/hooks/tests/useHotkeys.stories.tsx

@@ -1,11 +1,10 @@
-import { useHotkeys } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import View from "components/View";
+import useHotkeys from "../useHotkeys";
 
 export default {
-	title: "Hooks/useHotkeys",
+	title: "Headless/Hooks/useHotkeys",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -38,48 +37,42 @@ export const base = {
 		const nActive = checkHotkeyState("n");
 
 		return (
-			<View
-				animated
-				gap={2}
-				direction="row"
-				backgroundColor={active ? "positive-faded" : undefined}
-				padding={2}
-				borderRadius="small"
+			<div
+				style={{
+					display: "flex",
+					gap: 8,
+					padding: 8,
+					background: active ? "violet" : "transparent",
+				}}
 			>
-				<View
-					paddingInline={4}
-					paddingBlock={2}
-					borderRadius="small"
-					borderColor="neutral-faded"
-					animated
-					backgroundColor={shiftActive ? "neutral-faded" : "elevation-raised"}
-					shadow={shiftActive ? undefined : "raised"}
+				<div
+					style={{
+						padding: 4,
+						borderRadius: 4,
+						backgroundColor: shiftActive ? "tomato" : "transparent",
+					}}
 				>
 					Shift
-				</View>
-				<View
-					paddingInline={4}
-					paddingBlock={2}
-					borderRadius="small"
-					borderColor="neutral-faded"
-					animated
-					backgroundColor={bActive ? "neutral-faded" : "elevation-raised"}
-					shadow={bActive ? undefined : "raised"}
+				</div>
+				<div
+					style={{
+						padding: 4,
+						borderRadius: 4,
+						backgroundColor: bActive ? "tomato" : "transparent",
+					}}
 				>
 					b
-				</View>
-				<View
-					paddingInline={4}
-					paddingBlock={2}
-					borderRadius="small"
-					borderColor="neutral-faded"
-					animated
-					backgroundColor={nActive ? "neutral-faded" : "elevation-raised"}
-					shadow={nActive ? undefined : "raised"}
+				</div>
+				<div
+					style={{
+						padding: 4,
+						borderRadius: 4,
+						backgroundColor: nActive ? "tomato" : "transparent",
+					}}
 				>
 					n
-				</View>
-			</View>
+				</div>
+			</div>
 		);
 	},
 };

packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx → packages/headless/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx

@@ -1,13 +1,11 @@
-import { useKeyboardArrowNavigation } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { useRef } from "react";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation";
 
 export default {
-	title: "Hooks/useKeyboardArrowNavigation",
+	title: "Headless/Hooks/useKeyboardArrowNavigation",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -21,11 +19,11 @@ export const base: StoryObj = {
 		useKeyboardArrowNavigation({ ref });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -56,11 +54,11 @@ export const horizontal: StoryObj = {
 		useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -95,11 +93,11 @@ export const vertical: StoryObj = {
 		useKeyboardArrowNavigation({ ref, orientation: "vertical" });
 
 		return (
-			<View gap={2} direction="column" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "column" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -130,11 +128,11 @@ export const circular: StoryObj = {
 		useKeyboardArrowNavigation({ ref, circular: true });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {
@@ -162,11 +160,11 @@ export const disabled: StoryObj = {
 		useKeyboardArrowNavigation({ ref, disabled: true });
 
 		return (
-			<View gap={2} direction="row" attributes={{ ref }}>
-				<Button onClick={() => {}}>Action 1</Button>
-				<Button onClick={() => {}}>Action 2</Button>
-				<Button onClick={() => {}}>Action 3</Button>
-			</View>
+			<div style={{ display: "flex", gap: 8, flexDirection: "row" }} ref={ref}>
+				<button onClick={() => {}}>Action 1</button>
+				<button onClick={() => {}}>Action 2</button>
+				<button onClick={() => {}}>Action 3</button>
+			</div>
 		);
 	},
 	play: async ({ canvas }) => {

packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx → packages/headless/src/hooks/tests/useKeyboardMode.stories.tsx

@@ -1,12 +1,10 @@
-import { useKeyboardMode } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import { expect, userEvent } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useKeyboardMode from "../useKeyboardMode";
 
 export default {
-	title: "Hooks/useKeyboardMode",
+	title: "Headless/Hooks/useKeyboardMode",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -16,12 +14,12 @@ const Component = () => {
 	const { activate, deactivate, disable, enable } = useKeyboardMode();
 
 	return (
-		<View direction="row" gap={2}>
-			<Button onClick={activate}>Activate</Button>
-			<Button onClick={deactivate}>Deactivate</Button>
-			<Button onClick={disable}>Disable</Button>
-			<Button onClick={enable}>Enable</Button>
-		</View>
+		<div style={{ display: "flex", gap: 8, flexDirection: "row" }}>
+			<button onClick={activate}>Activate</button>
+			<button onClick={deactivate}>Deactivate</button>
+			<button onClick={disable}>Disable</button>
+			<button onClick={enable}>Enable</button>
+		</div>
 	);
 };
 

packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx → packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx

@@ -1,13 +1,11 @@
-import { useOnClickOutside } from "@reshaped/headless";
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fn, userEvent, type Mock } from "storybook/test";
 
-import Button from "components/Button";
-import View from "components/View";
+import useOnClickOutside from "../useOnClickOutside";
 
 export default {
-	title: "Hooks/useOnClickOutside",
+	title: "Headless/Hooks/useOnClickOutside",
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -28,12 +26,12 @@ export const base: StoryObj<{ handleOutsideClick: Mock }> = {
 		});
 
 		return (
-			<View gap={4} align="start">
-				<Button attributes={{ ref }} onClick={() => setTarget("inside")}>
+			<div style={{ display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }}>
+				<button ref={ref} onClick={() => setTarget("inside")}>
 					Trigger
-				</Button>
+				</button>
 				{target && `Clicked ${target}`}
-			</View>
+			</div>
 		);
 	},
 	play: async ({ canvas, args }) => {
@@ -64,10 +62,10 @@ export const refs: StoryObj<{ handleOutsideClick: Mock }> = {
 		});
 
 		return (
-			<View gap={4} align="start">
-				<Button attributes={{ ref }}>Trigger</Button>
-				<Button attributes={{ ref: ref2 }}>Trigger 2</Button>
-			</View>
+			<div style={{ display: "flex", gap: 16, flexDirection: "column", alignItems: "flex-start" }}>
+				<button ref={ref}>Trigger</button>
+				<button ref={ref2}>Trigger 2</button>
+			</div>
 		);
 	},
 	play: async ({ canvas, args }) => {
@@ -106,11 +104,7 @@ export const disabled: StoryObj<{ handleOutsideClick: Mock }> = {
 			}
 		);
 
-		return (
-			<View gap={4} align="start">
-				<Button attributes={{ ref }}>Trigger</Button>
-			</View>
-		);
+		return <button ref={ref}>Trigger</button>;
 	},
 	play: async ({ args }) => {
 		await userEvent.click(document.body);
@@ -133,9 +127,9 @@ export const deps: StoryObj<{ handleOutsideClick: Mock }> = {
 		});
 
 		return (
-			<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>
+			<button ref={ref} onClick={() => setCount((prev) => prev + 1)}>
 				Trigger
-			</Button>
+			</button>
 		);
 	},
 	play: async ({ canvas, args }) => {