Just Ux impoorvements of sidebar

apps/dashboard-app/.eslintrc.json

@@ -1,7 +1,10 @@
 {
-  "extends": "next",
+  "extends": [
+    "next",
+    "plugin:storybook/recommended"
+  ],
   "rules": {
     "react/no-unescaped-entities": "off",
     "@next/next/no-page-custom-font": "off"
   }
-}
+}

apps/dashboard-app/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

apps/dashboard-app/.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  staticDirs: ["..\\public"],
+  docs:{
+    "autodocs": true
+  }
+};
+export default config;

apps/dashboard-app/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import "@repo/ui/styles/shadcn-rose"
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
+

apps/dashboard-app/components/LeftSidebarClient.tsx

@@ -2,7 +2,7 @@
 
 import LeftSidebar from "@repo/ui/organisms/home/LeftSidebar";
 import { useRouter } from "next/navigation";
-import { sidebarItems } from "../lib/constant";
+import { sidebarStartItems, sidebarEndItems } from "../lib/constant";
 
 const LeftSidebarClient = () => {
 
@@ -14,7 +14,7 @@ const LeftSidebarClient = () => {
 
   return (
     <>
-        <LeftSidebar sidebarItems={sidebarItems} redirect={redirect}/>
+        <LeftSidebar sidebarStartItems={sidebarStartItems} sidebarEndItems={sidebarEndItems} redirect={redirect}/>
     </>
   )
 }

apps/dashboard-app/lib/constant.ts

@@ -27,10 +27,11 @@ import { LandmarkIcon, ArrowLeftRightIcon, BadgeCentIcon, BluetoothConnectedIcon
   YoutubeIcon,
   VideoIcon,
   DatabaseIcon,
-  SproutIcon} from "lucide-react";
+  SproutIcon,
+  FolderIcon} from "lucide-react";
 import { Connection } from "./types";
 
-export const sidebarItems = [
+export const sidebarStartItems = [
   {
       title: "Notion Dbs",
       image: '/notion.png',
@@ -88,11 +89,19 @@ export const sidebarItems = [
       title: "Skill Trees",
       icon: NetworkIcon,
       href: "/skill-trees"
-  },
+  }
+]
+
+export const sidebarEndItems = [
   {
       title: "Settings",
       icon: Settings,
       href: "/settings"
+  },
+  {
+      title: "Documentation",
+      icon: FolderIcon,
+      href: "/docs"
   }
 ]
 

apps/dashboard-app/package.json

@@ -6,7 +6,9 @@
     "dev": "next dev --port 4000",
     "build": "next build",
     "start": "next start --port 4000",
-    "lint": "next lint --max-warnings 20"
+    "lint": "next lint --max-warnings 20",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@codemirror/basic-setup": "^0.20.0",
@@ -47,14 +49,25 @@
     "winston": "^3.13.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.7.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@types/bcryptjs": "^2.4.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
+    "eslint-plugin-storybook": "^0.8.0",
     "postcss": "^8",
+    "storybook": "^8.2.9",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

apps/dashboard-app/stories/Button.stories.tsx

@@ -0,0 +1,28 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import { Button } from '@repo/ui/molecules/shadcn/Button';
+
+import {action} from "@storybook/addon-actions";
+
+const meta: Meta<typeof Button> = {
+    title: "Components/Molecules/Shadcn/Button",
+    component: Button,
+    tags: ['autodocs'],
+    parameters: {
+        layout: "centered",
+    }
+}
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+    args: {
+        variant: "default",
+        size: "sm",
+        disabled: false,
+        onClick: action('default button clicked'),
+        children: "Default Button",
+        className: "shadow-lg"
+    }
+}

apps/dashboard-app/tsconfig.json

@@ -15,7 +15,7 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "middleware.ts"
-, "pages/_app.js"  ],
+, "pages/_app.ts"  ],
   "exclude": [
     "node_modules"
   ]