chore: storybook

packages/ui/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-	"extends": ["../../.eslintrc.json", "neon/react", "neon/prettier"],
+	"extends": ["../../.eslintrc.json", "neon/react", "plugin:storybook/recommended", "@unocss", "neon/prettier"],
 	"settings": {
 		"react": {
 			"version": "detect"
@@ -7,6 +7,11 @@
 	},
 	"rules": {
 		"react/react-in-jsx-scope": 0,
-		"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
+		"react/jsx-filename-extension": [
+			1,
+			{
+				"extensions": [".tsx"]
+			}
+		]
 	}
 }

packages/ui/.gitignore

@@ -20,6 +20,7 @@ typings/
 docs/**/*
 !docs/index.json
 !docs/README.md
+storybook-static/
 
 # Miscellaneous
 .tmp/

packages/ui/.ladle/components.tsx

@@ -1,5 +0,0 @@
-import type { GlobalProvider } from '@ladle/react';
-import '@unocss/reset/tailwind-compat.css';
-import 'uno.css';
-
-export const Provider: GlobalProvider = ({ children }) => <>{children}</>;

packages/ui/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-styling',
+	],
+	core: {
+		builder: '@storybook/builder-vite',
+	},
+	framework: {
+		name: '@storybook/react-vite',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+} satisfies StorybookConfig;

packages/ui/.storybook/preview.css

@@ -0,0 +1,7 @@
+html {
+	color-scheme: light;
+}
+
+html.dark {
+	color-scheme: dark;
+}

packages/ui/.storybook/preview.ts

@@ -0,0 +1,28 @@
+import type { Preview } from '@storybook/react';
+import { withThemeByClassName } from '@storybook/addon-styling';
+
+import '@unocss/reset/tailwind-compat.css';
+import './preview.css';
+import 'virtual:uno.css';
+
+export default {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+} satisfies Preview;
+
+export const decorators = [
+	withThemeByClassName({
+		themes: {
+			light: 'bg-light-600',
+			dark: 'dark bg-dark-600',
+		},
+		defaultTheme: 'light',
+	}),
+];

packages/ui/package.json

@@ -10,7 +10,8 @@
 		"prepack": "yarn build && yarn lint",
 		"changelog": "git cliff --prepend ./CHANGELOG.md -u -c ./cliff.toml -r ../../ --include-path 'packages/ui/*'",
 		"release": "cliff-jumper",
-		"storybook": "ladle serve"
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"type": "module",
 	"module": "./dist/ui.js",
@@ -43,27 +44,38 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
-		"ariakit": "^2.0.0-next.43",
+		"ariakit": "^2.0.0-next.44",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
 		"@favware/cliff-jumper": "^2.0.0",
-		"@ladle/react": "^2.11.0",
 		"@react-icons/all-files": "^4.1.0",
+		"@storybook/addon-essentials": "^7.0.4",
+		"@storybook/addon-interactions": "^7.0.4",
+		"@storybook/addon-links": "^7.0.4",
+		"@storybook/addon-styling": "^1.0.0",
+		"@storybook/blocks": "^7.0.4",
+		"@storybook/react": "^7.0.4",
+		"@storybook/react-vite": "^7.0.4",
+		"@storybook/testing-library": "^0.1.0",
 		"@types/node": "16.18.23",
-		"@types/react": "^18.0.33",
+		"@types/react": "^18.0.35",
 		"@types/react-dom": "^18.0.11",
-		"@unocss/reset": "^0.51.0",
+		"@unocss/eslint-config": "^0.51.4",
+		"@unocss/reset": "^0.51.4",
 		"@vitejs/plugin-react": "^3.1.0",
-		"@vitest/coverage-c8": "^0.29.8",
+		"@vitest/coverage-c8": "^0.30.1",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.38.0",
 		"eslint-config-neon": "^0.1.42",
 		"eslint-formatter-pretty": "^5.0.0",
+		"eslint-plugin-storybook": "^0.6.11",
 		"prettier": "^2.8.7",
+		"prop-types": "^15.8.1",
+		"storybook": "^7.0.4",
 		"typescript": "^5.0.4",
-		"unocss": "^0.51.0",
+		"unocss": "^0.51.4",
 		"vite": "^4.2.1",
 		"vite-plugin-dts": "^2.2.0",
 		"vitest": "^0.29.8"

packages/ui/src/lib/components/Alert.tsx

@@ -51,7 +51,7 @@ export function Alert({ title, type, children }: PropsWithChildren<IAlert>) {
 		<div className="mb-4 mt-6">
 			<div className="relative flex">
 				<div className="p-4">{children}</div>
-				<div className="pointer-events-none absolute flex h-full w-full">
+				<div className="pointer-events-none absolute h-full w-full flex">
 					<div className={`rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-b-2 border-l-2 border-t-2 ${border}`} />
 					<div className={`relative border-b-2 ${border}`}>
 						<div className={`-translate-y-50% pointer-events-auto flex place-items-center gap-2 px-2 ${text}`}>

packages/ui/src/lib/components/Section.stories.tsx

@@ -1,58 +1,13 @@
-import type { Story } from '@ladle/react';
-import type { PropsWithChildren } from 'react';
-import { Section, type SectionOptions } from './Section.jsx';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Section } from './Section.jsx';
 
-export const Default = () => <Section title="Test">Test 1234</Section>;
+export default {
+	title: 'Section',
+	component: Section,
+} satisfies Meta<typeof Section>;
 
-export const Padded = () => (
-	<Section padded title="Test">
-		Test 1234
-	</Section>
-);
+type Story = StoryObj<typeof Section>;
 
-export const Background = () => (
-	<Section background title="Test">
-		Test 1234
-	</Section>
-);
-
-export const Dense = () => (
-	<Section dense title="Test">
-		Test 1234
-	</Section>
-);
-
-export const Gutter = () => (
-	<Section gutter title="Test">
-		Test 1234
-	</Section>
-);
-
-export const Playground: Story<PropsWithChildren<SectionOptions>> = ({
-	title,
-	background,
-	defaultClosed,
-	dense,
-	gutter,
-	padded,
-}: PropsWithChildren<SectionOptions>) => (
-	<Section
-		background={background}
-		defaultClosed={defaultClosed}
-		dense={dense}
-		gutter={gutter}
-		padded={padded}
-		title={title}
-	>
-		Test 1234
-	</Section>
-);
-
-Playground.args = {
-	title: 'Test',
-	background: true,
-	defaultClosed: false,
-	dense: false,
-	gutter: true,
-	padded: true,
-};
+export const Default = {
+	render: () => <Section title="Test">Test Content</Section>,
+} satisfies Story;

packages/ui/src/lib/components/discord/Message.tsx

@@ -40,7 +40,7 @@ export function DiscordMessage({
 				<div className="static" id="content-wrapper">
 					{followUp ? (
 						<span
-							className="h-5.5 absolute left-0 mr-1 hidden w-[56px] cursor-default select-none text-right text-xs leading-loose text-[rgb(163_166_170)] group-hover:inline-block"
+							className="absolute left-0 mr-1 hidden h-5.5 w-[56px] cursor-default select-none text-right text-xs leading-loose text-[rgb(163_166_170)] group-hover:inline-block"
 							id="time"
 						>
 							{time}

packages/ui/src/lib/components/discord/MessageAuthor.tsx

@@ -13,11 +13,11 @@ export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMe
 				className="absolute left-[16px] mt-0.5 h-10 w-10 cursor-pointer select-none rounded-full"
 				src={avatar}
 			/>
-			<h2 className="text-size-inherit m-0 font-medium leading-snug" id="user-info">
+			<h2 className="m-0 text-size-inherit font-medium leading-snug" id="user-info">
 				<span className="mr-1" id="username">
 					<span className="cursor-pointer text-base font-medium text-white hover:underline">{username}</span>
 					{bot ? (
-						<span className="bg-blurple vertical-top relative top-1 ml-1 rounded px-1 text-xs" id="bot">
+						<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
 							BOT
 						</span>
 					) : null}

packages/ui/src/lib/components/discord/MessageAuthorReply.tsx

@@ -9,7 +9,7 @@ export function DiscordMessageAuthorReply({ avatar, bot, username }: IDiscordMes
 		<>
 			<img alt={`${username}'s avatar`} className="mr-1 h-4 w-4 select-none rounded-full" src={avatar} />
 			{bot ? (
-				<div className="bg-blurple vertical-top mr-1 rounded px-1 text-xs" id="bot">
+				<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
 					BOT
 				</div>
 			) : null}

packages/ui/src/lib/components/discord/MessageBaseReply.tsx

@@ -8,7 +8,7 @@ export function DiscordMessageBaseReply({
 }: PropsWithChildren<{ author?: IDiscordMessageAuthorReply | undefined; authorNode?: ReactNode | undefined }>) {
 	return (
 		<div
-			className="before:rounded-tl-1.5 relative mb-1 flex place-items-center before:absolute before:bottom-0 before:left-[-36px] before:right-full before:top-[50%] before:mr-1 before:block before:border-l-2 before:border-t-2 before:border-[rgb(79_84_92)] before:content-none"
+			className="relative mb-1 flex place-items-center before:absolute before:bottom-0 before:left-[-36px] before:right-full before:top-[50%] before:mr-1 before:block before:border-l-2 before:border-t-2 before:border-[rgb(79_84_92)] before:rounded-tl-1.5 before:content-none"
 			id="reply-wrapper"
 		>
 			<div className="flex place-items-center [&>span]:opacity-60">

packages/ui/src/lib/components/discord/MessageEmbed.tsx

@@ -23,7 +23,7 @@ export function DiscordMessageEmbed({
 }: PropsWithChildren<IDiscordMessageEmbed>) {
 	return (
 		<div className="py-0.5" id="outer-embed-wrapper">
-			<div className="border-l-blurple grid max-w-max rounded border-l-4 bg-[rgb(47_49_54)]" id="embed-wrapper">
+			<div className="grid max-w-max border-l-4 border-l-blurple rounded bg-[rgb(47_49_54)]" id="embed-wrapper">
 				<div className="max-w-128">
 					<div className="pb-4 pl-3 pr-4 pt-2">
 						{author ? <DiscordMessageEmbedAuthor {...author} /> : authorNode ?? null}

packages/ui/src/lib/components/discord/MessageInteraction.tsx

@@ -12,7 +12,7 @@ export function DiscordMessageInteraction({ author, authorNode, command }: IDisc
 	return (
 		<DiscordMessageBaseReply author={author} authorNode={authorNode}>
 			<span className="mr-1 select-none text-sm leading-snug text-white">used</span>
-			<div className="text-blurple cursor-pointer text-sm leading-snug hover:underline">{command}</div>
+			<div className="cursor-pointer text-sm leading-snug text-blurple hover:underline">{command}</div>
 		</DiscordMessageBaseReply>
 	);
 }

packages/ui/vite.config.ts

@@ -5,7 +5,7 @@ import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
 export default defineConfig({
-	plugins: [dts(), react(), Unocss()],
+	plugins: [dts(), react(), Unocss({ include: ['.storybook/preview.ts'] })],
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'src/lib/index.ts'),