chore: init storybook

frontend/.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:storybook/recommended"
   ],
   overrides: [
     {

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

frontend/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

frontend/.storybook/preview.tsx

@@ -0,0 +1,51 @@
+import type { Preview } from "@storybook/react";
+import { argent, braavos, jsonRpcProvider, StarknetConfig, useInjectedConnectors } from "@starknet-react/core";
+import { sepolia, Chain } from "@starknet-react/chains";
+import React from "react";
+import "../src/globals.css"
+
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+
+    },
+
+  },
+  decorators: [
+    (Story) => {
+      const chains = [sepolia];
+      function rpc(chain: Chain) {
+        return {
+          nodeUrl: `https://starknet-${chain.network}.public.blastapi.io/rpc/v0_7`
+        }
+      }
+      const provider = jsonRpcProvider({ rpc });
+      const { connectors } = useInjectedConnectors({
+        recommended: [argent(), braavos()],
+        order: "random",
+      });
+      return (
+
+        <StarknetConfig
+          autoConnect
+          chains={chains}
+          provider={provider}
+          connectors={connectors}
+        >
+            <div className="h-[100vh] mt-10 flex flex-col items-center justify-center">
+              {Story()}
+          </div>
+
+        </StarknetConfig>
+
+      )
+    }
+  ],
+};
+
+export default preview;

frontend/package.json

@@ -7,27 +7,39 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint ./src"
+    "lint": "eslint ./src",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@starknet-react/core": "^2.9.0",
+    "@tanstack/react-query": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "axios": "^1.7.2",
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
-    "tailwindcss": "^3.3.5",
-    "@tanstack/react-query": "^5.0.1"
+    "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/nextjs": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.16",
     "eslint": "8.33.0",
     "eslint-plugin-react": "^7.31.4",
+    "eslint-plugin-storybook": "^0.11.0",
     "postcss": "^8.4.31",
+    "storybook": "^8.4.2",
     "typescript": "4.9.5",
     "vite": "^4.1.0",
     "vite-plugin-checker": "^0.5.1"

frontend/src/stories/Button.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/ui/Button";
+import { ComponentProps } from "react";
+
+type StoryProps = ComponentProps<typeof Button> & {
+    buttonText: string
+};
+
+const meta: Meta<StoryProps> = {
+    title: "Components/Button",
+    component: Button,
+
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const Primary: Story = {
+    args: {
+        buttonText: "Konoha"
+    },
+    render: ({ buttonText, ...args }) => {
+        return <Button className="w-[200px] h-[46]" {...args} >{buttonText}</Button>;
+    },
+};
+

frontend/src/stories/ComentCard.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CommentCard from "../components/CommentCard";
+import { ComponentProps } from "react";
+
+type StoryProps = ComponentProps<typeof CommentCard>;
+const meta: Meta<StoryProps> = {
+  title: "Components/CommentCard",
+  component: CommentCard,
+
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+export const Default: Story = {
+  args: {
+    address: "0x05662997723d56add3da71a86105788cb29b4e4e55325c2cc61fb600ac975d80",
+    text: "Yaaaaaay!!!",
+  },
+  render: (args) => {
+    return <CommentCard {...args} />;
+  },
+};

frontend/src/stories/Comments.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj, } from "@storybook/react";
+import Comments from "../components/Comments";
+import { ComponentProps } from 'react';
+
+type StoryProps = ComponentProps<typeof Comments>;
+
+
+
+type Story = StoryObj<StoryProps>;
+
+const meta: Meta<StoryProps> = {
+    title: "Components/Comments",
+    component: Comments,
+};
+
+export default meta;
+
+
+
+export const Default: Story = {
+    args: {
+        proposalId: "123",
+    },
+};
+
+export const EmptyComments: Story = {
+    args: {
+        proposalId: "456",
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        proposalId: "789",
+    },
+
+};

frontend/src/stories/Dialog.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Dialog from "../components/ui/Dialog";
+import { ComponentProps } from "react";
+
+type StoryProps = ComponentProps<typeof Dialog> & {
+    buttonText: string
+};
+
+const meta: Meta<StoryProps> = {
+    title: "Components/Dialog",
+    component: Dialog,
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {
+    args: {
+        buttonText: "Konoha"
+    },
+    render: ({ buttonText, ...args }) => {
+        return <Dialog  {...args} >{buttonText}</Dialog>;
+    },
+};
+

frontend/src/stories/Header.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Header from "../components/Header";
+import { ComponentProps } from "react";
+
+type StoryProps = ComponentProps<typeof Header>;
+const meta: Meta<StoryProps> = {
+  title: "Components/Header",
+  component: Header,
+};
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const Connected: Story = {
+    render: (args) => <Header {...args} />,
+};
+export const NotConnected: Story = {
+  render: (args) => <Header {...args} />,
+};