tabs storybook implementation

apps/web/app/global.css

@@ -45,6 +45,7 @@
     --button-hover: #a082e9;
     --button-stroke: #6947bb;
     --button-secondary: #ffffff;
+    --button-secondary-foreground: #000000;
     --button-secondary-stroke: #e6e6e6;
     --button-secondary-hover: #efefef;
   }

apps/web/tailwind.config.ts

@@ -87,6 +87,12 @@ export default {
           foreground: 'var(--button-foreground)',
           hover: 'var(--button-hover)',
           stroke: 'var(--button-stroke)',
+          secondary: {
+            DEFAULT: 'var(--button-secondary)',
+            foreground: 'var(--button-secondary-foreground)',
+            stroke: 'var(--button-secondary-stroke)',
+            hover: 'var(--button-secondary-hover)',
+          },
         },
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',

packages/ui/components/CheckboxFilter.tsx

@@ -43,7 +43,8 @@ export function CheckboxFilter({
             <div
               key={option}
               className="flex w-full cursor-pointer items-center justify-start space-x-2"
-              onClick={() => handleCheckboxChange(option)}>
+              // onClick={() => handleCheckboxChange(option)}
+            >
               <Checkbox
                 id={option}
                 checked={checkedState[option]}

packages/ui/shadcn/Button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         outline:
           'border border-input hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-button-secondary text-secondary-foreground hover:bg-button-secondary-hover border-button-secondary-stroke border',
+          'bg-button-secondary text-button-secondary-foreground hover:bg-button-secondary-hover border-button-secondary-stroke border',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'underline-offset-4 hover:underline text-primary',
       },

packages/ui/stories/CheckboxFilter.stories.js → packages/ui/stories/CheckboxFilter.stories.tsx

@@ -19,7 +19,6 @@ export default {
   args: {onApply: fn()},
 }
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
   args: {
     options: ['Accounting', 'ATS', 'Banking', 'Database'],

packages/ui/stories/Tabs.stories.tsx

@@ -0,0 +1,28 @@
+import {Tabs} from '../components/Tabs'
+
+export default {
+  title: 'Example/Tabs',
+  component: Tabs,
+  argTypes: {
+    tabConfig: {control: 'object'},
+    defaultValue: {control: 'text'},
+  },
+}
+
+export const Primary = {
+  args: {
+    tabConfig: [
+      {
+        key: 'connections',
+        title: 'Connections',
+        content: <div>Content1</div>,
+      },
+      {
+        key: 'settings',
+        title: 'Settings',
+        content: <div>Content2</div>,
+      },
+    ],
+    defaultValue: 'connections',
+  }
+}