feat: add storybook (#51)

* feat: add storybook
* docs: add segmented control stories
* fix: update ci for storybook
* fix: improve storybook theme
* docs: add popover stories
* docs: add popover and tooltip stories

Author: riccardoperra

.github/workflows/format.yml

@@ -28,8 +28,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Run Build and Tests
-        run: pnpm run build-test
+#      - name: Run Build and Tests
+#        run: pnpm run build-test
 
         env:
           CI: true

.github/workflows/tests.yml

@@ -33,3 +33,4 @@ lerna-debug.log
 Thumbs.db
 # Local Netlify folder
 .netlify
+storybook-static

.gitignore

@@ -1,5 +1,5 @@
 # repository root netlify.toml
 [build]
 base = "/"
-publish = "packages/playground-next/dist/public"
-command = "pnpm --filter=@codeui/vanilla-extract build && pnpm --filter=@codeui/playground-next build"
+publish = "packages/storybook/storybook-static"
+command = "pnpm --filter=@codeui/storybook-playground build-storybook"

netlify.toml

@@ -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/components/RadioList/RadioList.tsx

@@ -70,6 +70,9 @@ export function SegmentedControl(props: SegmentedControlProps) {
 	}, 0);
 
 	onMount(() => {
+		if (!listRef) {
+			return;
+		}
 		const resizeObserver = new ResizeObserver(handleListResize);
 		resizeObserver.observe(listRef);
 	});

packages/kit/src/components/SegmentedControl/SegmentedControl.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";
 
@@ -60,3 +62,5 @@ export {
 	layoutVars,
 	responsiveStyle,
 } from "./foundation";
+
+export { As } from "@kobalte/core";

packages/kit/src/index.tsx

@@ -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/.gitignore

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

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

@@ -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/global.css

@@ -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/main.ts

@@ -0,0 +1,67 @@
+import { Preview } from "storybook-solidjs";
+import { themes, ThemeVars } 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";
+import { themeVars } from "@codeui/kit";
+
+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: () => any) => {
+		return <ThemeWrapper>{Story()}</ThemeWrapper>;
+	},
+];
+
+const darkTheme: ThemeVars = {
+	...themes.dark,
+	appBg: "#111",
+	barBg: "#111",
+	appContentBg: "#050505",
+};
+
+const lightTheme: ThemeVars = {
+	...themes.normal,
+};
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		decorators: decorators,
+		darkMode: {
+			current: "dark",
+			dark: darkTheme,
+			light: lightTheme,
+		},
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		docs: {
+			container: (props: DocsContainerProps) => {
+				const dark = useDarkMode();
+				return <DocsContainer {...props} theme={dark ? darkTheme : lightTheme} />;
+			},
+		},
+	},
+};
+
+export default preview;