From 090a9054e4a171fa72a3337c2e27b6f16c0bf73a Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 12:08:31 -0400
Subject: [PATCH] Button strories lint

---
 .../src/components/shared/Badge/index.ts      |  1 +
 .../src/stories/Components/Badge.stories.tsx  | 76 +++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 packages/frontend/src/stories/Components/Badge.stories.tsx

diff --git a/packages/frontend/src/components/shared/Badge/index.ts b/packages/frontend/src/components/shared/Badge/index.ts
index 9c8edca2..0c6caa07 100644
--- a/packages/frontend/src/components/shared/Badge/index.ts
+++ b/packages/frontend/src/components/shared/Badge/index.ts
@@ -1 +1,2 @@
 export * from './Badge';
+export * from './Badge.theme';
diff --git a/packages/frontend/src/stories/Components/Badge.stories.tsx b/packages/frontend/src/stories/Components/Badge.stories.tsx
new file mode 100644
index 00000000..36cdb617
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Badge.stories.tsx
@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Badge, BadgeTheme } from 'components/shared/Badge';
+
+const badgeVariants: BadgeTheme['variant'][] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'inset',
+];
+const badgeSizes: BadgeTheme['size'][] = ['xs', 'sm'];
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: badgeVariants,
+    },
+    size: {
+      control: 'select',
+      options: badgeSizes,
+    },
+    children: {
+      control: 'object',
+    },
+  },
+  args: {
+    variant: 'primary',
+    size: 'sm',
+    children: '1',
+  },
+} as Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  render: ({ variant, size, children, ...args }) => (
+    <Badge variant={variant} size={size} {...args}>
+      {children}
+    </Badge>
+  ),
+  args: {
+    variant: 'primary',
+    size: 'sm',
+    children: '1',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    children: '1',
+  },
+};
+
+export const All: Story = {
+  render: () => (
+    <>
+      {badgeVariants.map((variant, index) => (
+        <div className="flex gap-5" key={index}>
+          {badgeSizes.map((size) => (
+            <Badge key={variant} variant={variant} size={size}>
+              {size}
+            </Badge>
+          ))}
+          {variant}
+        </div>
+      ))}
+    </>
+  ),
+};