feat: Storybook for Vite (#52)

* feat: storybook

* feat: option to add figma links

* refactor: resolve pr comments

* chore: fix storybook build

---------

Co-authored-by: Sriram Hariharan <sghsri@gmail.com>

src/stories/components/Button.stories.tsx

@@ -0,0 +1,97 @@
+import { Button } from 'src/views/components/common/Button/Button';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Common/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  args: {
+    children: 'Button',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {},
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Grid: Story = {
+  render: props => (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' />
+        <Button {...props} type='secondary' />
+        <Button {...props} type='tertiary' />
+        <Button {...props} type='danger' />
+        <Button {...props} type='warning' />
+        <Button {...props} type='success' />
+        <Button {...props} type='info' />
+      </div>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' disabled />
+        <Button {...props} type='secondary' disabled />
+        <Button {...props} type='tertiary' disabled />
+        <Button {...props} type='danger' disabled />
+        <Button {...props} type='warning' disabled />
+        <Button {...props} type='success' disabled />
+        <Button {...props} type='info' disabled />
+      </div>
+    </div>
+  ),
+};
+
+
+// TODO: Actually show the buttons as they appear in the design
+export const CourseButtons: Story = {
+  args: {
+    children: 'Add Course',
+  },
+  render: props => (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' />
+        <Button {...props} type='secondary' />
+        <Button {...props} type='tertiary' />
+        <Button {...props} type='danger' />
+        <Button {...props} type='warning' />
+        <Button {...props} type='success' />
+        <Button {...props} type='info' />
+      </div>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' disabled />
+        <Button {...props} type='secondary' disabled />
+        <Button {...props} type='tertiary' disabled />
+        <Button {...props} type='danger' disabled />
+        <Button {...props} type='warning' disabled />
+        <Button {...props} type='success' disabled />
+        <Button {...props} type='info' disabled />
+      </div>
+    </div>
+  ),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
+    },
+  },
+};

src/stories/components/Card.stories.tsx

@@ -0,0 +1,23 @@
+import Card from 'src/views/components/common/Card/Card';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Common/Card',
+  component: Card,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {
+    children: <div>Hello</div>,
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/Divider.stories.ts

@@ -0,0 +1,18 @@
+import Divider from 'src/views/components/common/Divider/Divider';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'color',
+    },
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/Link.stories.ts

@@ -0,0 +1,24 @@
+import Link from 'src/views/components/common/Link/Link';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'color',
+    },
+  },
+  args: {
+    children: 'Link',
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/Spinner.stories.ts

@@ -0,0 +1,14 @@
+import Spinner from 'src/views/components/common/Spinner/Spinner';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};