[WEB-4725] chore: storybook setup & tailwind config package improvements (#7614)

* chore: global css file added to tailwind config package

* chore: tailwind config updated

* chore: cn utility function added to propel package

* chore: storybook init

* fix: format error

* chore: code refactor

* chore: code refactor

* fix: format error

* fix: build error

packages/propel/.eslintrc.js

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@plane/eslint-config/library.js"],
+  extends: ["@plane/eslint-config/library.js", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   rules: {
     "import/order": [

packages/propel/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+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) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;

packages/propel/.storybook/preview.ts

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

packages/propel/package.json

@@ -9,7 +9,9 @@
     "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
     "fix:lint": "eslint . --fix",
     "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "exports": {
     "./avatar": "./src/avatar/index.ts",
@@ -34,6 +36,7 @@
     "@plane/utils": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -43,8 +46,11 @@
     "@plane/eslint-config": "workspace:*",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
+    "@storybook/react-vite": "^9.1.2",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
+    "eslint-plugin-storybook": "^9.1.2",
+    "storybook": "^9.1.2",
     "typescript": "5.8.3"
   }
 }

packages/propel/src/utils/classname.tsx

@@ -0,0 +1,3 @@
+import { clsx, type ClassValue } from "clsx";
+
+export const cn = (...inputs: ClassValue[]) => clsx(inputs);

packages/propel/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./classname";