[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/.storybook/main.ts

@@ -11,7 +11,7 @@ function getAbsolutePath(value: string) {
 }
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(ts|tsx)"],
-  addons: [],
+  addons: ["@storybook/addon-designs", "@storybook/addon-docs"],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},

packages/propel/.storybook/manager.ts

@@ -0,0 +1,14 @@
+import { addons } from "storybook/manager-api";
+import { create } from "storybook/theming";
+
+const planeTheme = create({
+  base: "dark",
+  brandTitle: "Plane UI",
+  brandUrl: "https://plane.so",
+  brandImage: "plane-lockup-light.svg",
+  brandTarget: "_self",
+});
+
+addons.setConfig({
+  theme: planeTheme,
+});

packages/propel/.storybook/preview.ts

@@ -1,11 +1,14 @@
 import type { Preview } from "@storybook/react-vite";
 import "@plane/tailwind-config/global.css";
 
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {},
-    },
+const parameters: Preview["parameters"] = {
+  controls: {
+    matchers: {},
   },
 };
+
+const preview: Preview = {
+  parameters,
+  tags: ["autodocs"],
+};
 export default preview;