feat(frontend): added storybook with tailwind integration

chore(frontend): added some required radix components

frontend/src/components/v2/Button/Button.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    children: 'Hello Infisical'
+  }
+};

frontend/src/components/v2/Button/Button.tsx

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  children: ReactNode;
+  isDisabled?: boolean;
+  // loading state
+  isLoading?: boolean;
+  // various button sizes
+  size: 'sm' | 'md' | 'lg';
+};
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Props;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, isDisabled = false, className, ...props }, ref): JSX.Element => {
+    return (
+      <button
+        ref={ref}
+        aria-disabled={isDisabled}
+        type="button"
+        className={twMerge(
+          'bg-primary hover:opacity-80 transition-all text-sm px-4 py-2 font-bold rounded',
+          className
+        )}
+        disabled={isDisabled}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

frontend/src/components/v2/Button/index.tsx

@@ -0,0 +1 @@
+export { Button } from './Button';