feat: add storybook

packages/kit/src/components/RadioList/RadioList.tsx

@@ -11,7 +11,7 @@ import { baseFieldContainer } from "../TextField/TextField.css";
 import { createFieldMessageProps } from "../Field/FieldMessage/createFieldMessageProps";
 import * as styles from "./Radio.css";
 
-type RadioListProps = RadioGroup.RadioGroupRootProps &
+export type RadioListProps = RadioGroup.RadioGroupRootProps &
 	BaseFieldProps &
 	FieldWithErrorMessageSupport & { label?: JSXElement; description?: string };
 

packages/kit/src/index.tsx

@@ -35,7 +35,9 @@ export {
 export { Popover, PopoverTrigger, PopoverContent } from "./components/Popover/Popover";
 export { Select } from "./components/Select/Select";
 export { createSelectOptions } from "./components/Select/createSelectValue";
+
 export { RadioList, RadioListItem } from "./components/RadioList/RadioList";
+export type { RadioListProps } from "./components/RadioList/RadioList";
 
 export { Link } from "./components/Link/Link";
 

packages/storybook/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/storybook/.storybook/global-ve.css.ts

@@ -0,0 +1,12 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { themeVars } from "@codeui/kit";
+
+globalStyle("[data-cui-theme=dark] body", {
+	background: themeVars.accent1,
+	color: themeVars.foreground,
+});
+
+globalStyle("[data-cui-theme=light] body", {
+	background: themeVars.background,
+	color: themeVars.foreground,
+});

packages/storybook/.storybook/global.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
+
+html, body {
+	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.multipleItemsContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+
+.itemsContainer {
+	display: flex;
+	align-items: center;
+	gap: 2rem;
+}
+

packages/storybook/.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from "storybook-solidjs-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+	return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config: StorybookConfig = {
+	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: [
+		getAbsolutePath("@storybook/addon-links"),
+		getAbsolutePath("@storybook/addon-essentials"),
+		getAbsolutePath("@storybook/addon-interactions"),
+		getAbsolutePath("storybook-dark-mode"),
+	],
+	framework: {
+		name: getAbsolutePath("storybook-solidjs-vite"),
+		options: {},
+	},
+	docs: {
+		autodocs: "tag",
+	},
+};
+
+export default config;

packages/storybook/.storybook/preview.tsx

@@ -0,0 +1,58 @@
+import { Preview } from "storybook-solidjs";
+import { themes } from "@storybook/theming";
+import { DARK_MODE_EVENT_NAME, useDarkMode } from "storybook-dark-mode";
+import { addons } from "@storybook/addons";
+import { Component, createEffect, createSignal, FlowProps } from "solid-js";
+import "./reset.css";
+import "./global.css";
+import "./global-ve.css";
+import { DocsContainer, DocsContainerProps } from "@storybook/blocks";
+
+function ThemeWrapper(props: FlowProps) {
+	const [darkMode, setDarkMode] = createSignal<boolean>(true);
+	const channel = addons.getChannel();
+	channel.on(DARK_MODE_EVENT_NAME, setDarkMode);
+
+	createEffect(() => {
+		document.documentElement.setAttribute(
+			"data-cui-theme",
+			darkMode() ? "dark" : "light",
+		);
+	});
+	return <div>{props.children}</div>;
+}
+
+export const decorators = [
+	(Story: Component) => {
+		return (
+			<ThemeWrapper>
+				<Story />
+			</ThemeWrapper>
+		);
+	},
+];
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		decorators: decorators,
+		darkMode: {
+			dark: { ...themes.dark, appBg: "#1c1c1c", appContentBg: "#151718" },
+			light: { ...themes.normal, appBg: "#f9fafb", appContentBg: "#ffffff" },
+		},
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		docs: {
+			container: (props: DocsContainerProps) => {
+				const dark = useDarkMode();
+				return <DocsContainer {...props} theme={dark ? themes.dark : themes.light} />;
+			},
+		},
+	},
+};
+
+export default preview;