From 730fa3df0899c408ce796d2c6fd2fe8a568ed413 Mon Sep 17 00:00:00 2001
From: Hoang Vu <huyhoangnguyen0897@gmail.com>
Date: Sat, 11 May 2024 19:07:58 +0700
Subject: [PATCH] feat: add storybook for switch component (#63)

Co-authored-by: Hoang, Vu <hoang.vu@zoi.tech>
---
 packages/ui/src/stories/switch.stories.tsx | 41 ++++++++++++++++++++++
 packages/ui/src/styles/tailwind.css        |  6 ++++
 2 files changed, 47 insertions(+)
 create mode 100644 packages/ui/src/stories/switch.stories.tsx

diff --git a/packages/ui/src/stories/switch.stories.tsx b/packages/ui/src/stories/switch.stories.tsx
new file mode 100644
index 0000000..956abc9
--- /dev/null
+++ b/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,
+	},
+};
diff --git a/packages/ui/src/styles/tailwind.css b/packages/ui/src/styles/tailwind.css
index 1e1a794..311c1e6 100644
--- a/packages/ui/src/styles/tailwind.css
+++ b/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;
 }