feat: add storybook for switch component (#63)

Co-authored-by: Hoang, Vu <[email protected]>

packages/ui/src/stories/switch.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Switch } from '../switch';
+import { Label } from '../label';
+
+const meta = {
+	title: 'Coderum/Switch',
+	component: Switch,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {},
+	args: {
+		disabled: false,
+		onChange: fn(),
+	},
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Checked: Story = {};
+
+export const WithLabel: Story = {
+	render: (args) => (
+		<div className='flex items-center space-x-2'>
+			<Switch
+				{...args}
+				id='airplane-mode'
+			/>
+			<Label htmlFor='airplane-mode'>Airplane Mode</Label>
+		</div>
+	),
+};
+
+export const Disabled: Story = {
+	args: {
+		disabled: true,
+	},
+};

packages/ui/src/styles/tailwind.css

@@ -820,6 +820,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }