[WEB-4835] feat: storybook enhancements (#7702)

* ✨ feat: integrate Storybook addons and enhance Tabs component

- Added `@storybook/addon-designs` and `@storybook/addon-docs` to the project dependencies.
- Enhanced the Tabs component stories to support dynamic tab options.
- Introduced a custom theme for Storybook with a new manager configuration.
- Added a new SVG logo for branding in Storybook.
- Pinned the storybook and related packages version

* ♻️  refactor: update Storybook manager configuration by removing unused import

* ♻️  refactor: enhance Tabs story with size labels and layout adjustments

* 🚨 fix: lint issues

* 🚨 fix: lock file

* ✏️  fix: update brand image path in Storybook manager configuration

* ♻️ refactor: improve Tabs story by ensuring safe default value and enhancing content rendering

packages/propel/src/tabs/tabs.stories.tsx

@@ -1,64 +1,97 @@
-import { Fragment } from "react";
+import { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Tabs } from "./tabs";
 
-const meta: Meta<typeof Tabs> = {
+type TabOption = {
+  label: string;
+  value: string;
+};
+
+const tabOptions: TabOption[] = [
+  { label: "Account", value: "account" },
+  { label: "Password", value: "password" },
+];
+
+interface StoryProps extends ComponentProps<typeof Tabs> {
+  options: TabOption[];
+}
+
+const meta: Meta<StoryProps> = {
   title: "Components/Tabs",
   component: Tabs,
   parameters: {
     layout: "centered",
   },
+  args: {
+    defaultValue: "account",
+    options: tabOptions,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <Tabs defaultValue="account">
-        <Tabs.List>
-          <Tabs.Trigger value="account">Overview</Tabs.Trigger>
-          <Tabs.Trigger value="password">Settings</Tabs.Trigger>
-          <Tabs.Indicator />
-        </Tabs.List>
-        <Tabs.Content value="account" className="p-4">
-          Overview settings go here
-        </Tabs.Content>
-        <Tabs.Content value="password" className="p-4">
-          Settings settings go here
-        </Tabs.Content>
-      </Tabs>
-    </div>
-  ),
+  args: {
+    options: [
+      {
+        label: "Account",
+        value: "account",
+      },
+      {
+        label: "Password",
+        value: "password",
+      },
+    ],
+  },
+
+  render: ({ defaultValue, options }) => {
+    const safeDefault = options?.some((o) => o.value === defaultValue) ? defaultValue : options?.[0]?.value;
+    return (
+      <div className="w-[400px]">
+        <Tabs defaultValue={safeDefault}>
+          <Tabs.List>
+            {options.map((option) => (
+              <Tabs.Trigger key={option.value} value={option.value}>
+                {option.label}
+              </Tabs.Trigger>
+            ))}
+            <Tabs.Indicator />
+          </Tabs.List>
+          {options.map((option) => (
+            <Tabs.Content key={option.value} value={option.value} className="p-4">
+              {option.label} content goes here
+            </Tabs.Content>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
 };
 
 export const Sizes: Story = {
-  render: () => {
+  render: ({ defaultValue, options }) => {
     const sizes = ["sm", "md", "lg"] as const;
-    const labels = {
+    const sizeLabels: Record<(typeof sizes)[number], string> = {
       sm: "Small",
       md: "Medium",
       lg: "Large",
     };
-
     return (
-      <div className="w-[400px]">
-        {sizes.map((size, index) => (
-          <Fragment key={size}>
-            {index > 0 && <div className="h-4" />}
-            <div className="text-lg">{labels[size]}</div>
-            <Tabs defaultValue="overview">
+      <div className="w-[400px] grid gap-4">
+        {sizes.map((size) => (
+          <div key={size} className="flex flex-col gap-2">
+            <div className="text-lg">{sizeLabels[size]}</div>
+            <Tabs defaultValue={defaultValue}>
               <Tabs.List>
-                <Tabs.Trigger value="overview" size={size}>
-                  Overview
-                </Tabs.Trigger>
-                <Tabs.Trigger value="settings" size={size}>
-                  Settings
-                </Tabs.Trigger>
+                {options.map((option) => (
+                  <Tabs.Trigger key={option.value} value={option.value} size={size}>
+                    {option.label}
+                  </Tabs.Trigger>
+                ))}
               </Tabs.List>
             </Tabs>
-          </Fragment>
+          </div>
         ))}
       </div>
     );