Corrected Button Component and added storybook ui

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

@@ -11,8 +11,8 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: [
+    "../stories/**/*.mdx",
     "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../**/*.stories.@(js|jsx|mjs|ts|tsx)"
   ],
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
@@ -25,9 +25,6 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/nextjs"),
     options: {},
   },
-  staticDirs: ["..\\public"],
-  docs:{
-    "autodocs": true
-  }
+  staticDirs: ["../public"],
 };
 export default config;

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

@@ -1,5 +1,4 @@
 import type { Preview } from "@storybook/react";
-import "@repo/ui/styles/shadcn-rose"
 
 const preview: Preview = {
   parameters: {
@@ -13,4 +12,3 @@ const preview: Preview = {
 };
 
 export default preview;
-

apps/dashboard-app/app/(dashboard)/skill-trees/_components/Notes.tsx

@@ -49,7 +49,7 @@ const Notes = ({ title, ids,  data}: any) => {
             setRevisionTimeTaken(revisionTimeTaken);
         };
         fetchPages();
-    },[ids, apiToken,title])
+    },[ids, apiToken,title,data]);
 
     const handleSearch = (event:any) => {
         setSearchNotes(event.target.value);

apps/dashboard-app/app/(dashboard)/skill-trees/_components/SkillTreeCard.tsx

@@ -18,7 +18,7 @@ const SkillTreeCard = ({skillTree, skillTrees}:any) => {
             setTotalProjects(totalProjects)
         }
         fetchTotal()
-    },[])
+    },[skillTree,skillTrees])
   return (
     <Card className="flex flex-col items-center justify-between ">
         <CardHeader className="flex flex-col items-center justify-center gap-2 ">

apps/dashboard-app/app/(dashboard)/skill-trees/_components/SkillTrees.tsx

@@ -42,7 +42,7 @@ const SkillTrees = ({skillTreeItems,selfAreaItems}:any) => {
             setSelfAreasToReview(selfAreasToReview)
         }
         fetchSkillTrees()
-    },[skillTreeItems,searchParams])
+    },[skillTreeItems,searchParams,selfAreaItems])
 
     const [totalNotes, setTotalNotes] = useState([]);
     const [totalAttachments, setTotalAttachments] = useState([]);

apps/dashboard-app/app/auth/_components/LoginClient.tsx

@@ -9,7 +9,7 @@ import { DEFAULT_LOGIN_REDIRECT } from '../../../routes';
 export default function LoginClient() {
     const router = useRouter();
     const searchParams = useSearchParams()
-    const urlError = searchParams.get('error') === "OAuthAccountNotLinked" ?
+    const urlError = searchParams?.get('error') === "OAuthAccountNotLinked" ?
      "Email already in use with different provider" : ""
     return (
         <LoginCard

apps/dashboard-app/app/auth/_components/VerificationClient.tsx

@@ -12,7 +12,7 @@ export default function VerificationClient() {
     const [error, setError] = useState<string | undefined>()
     const [success, setSuccess] = useState<string | undefined>()
     const searchParams = useSearchParams();
-    const token = searchParams.get('token');
+    const token = searchParams?.get('token');
 
     const onSubmit = useCallback(async()=>{
         if (success || error) return;

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/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
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} 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 Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

apps/dashboard-app/stories/Button.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
+    </button>
+  );
+};