Feat: setup design tokens stories and overall improvements (#23)

* fix: setup tailwind in storybook docs

* feat: write story for design token colors

* feat: write story for design token spacings

* feat: write stories for design token typography

* fix: move button under components

* chore: add and apply Inter font

* refactor: import design tokens from it's package and write transformer functions

* feat: add gradients to color story

apps/docs/.storybook/main.js

@@ -20,7 +20,12 @@ const config = {
   core: {},
 
   async viteFinal(config) {
-    // customize the Vite config here
+    config.css = {
+      postcss: {
+        plugins: [require("tailwindcss"), require("autoprefixer")],
+      },
+    };
+
     return {
       ...config,
       define: { "process.env": {} },

apps/docs/.storybook/preview.css

@@ -0,0 +1 @@
+@import "../index.css";

apps/docs/.storybook/preview.js

@@ -1,3 +1,5 @@
+import "./preview.css";
+
 // Configure Storybook parameters
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

apps/docs/components/ColorPalette.tsx

@@ -0,0 +1,62 @@
+import { getTransformedColorTokens } from "../utils";
+
+const colors = getTransformedColorTokens();
+
+function ColorPalette() {
+  return (
+    <div className="p-5">
+      <h1 className="mb-5 text-lg font-bold text-vanilla-100">Pallette</h1>
+
+      {/* Regular colors */}
+      <div className="grid grid-cols-4 gap-5 mb-12">
+        {colors
+          .filter((item) => item.name !== "Gradient")
+          .map((color) => (
+            <div key={color.name}>
+              <h3 className="mt-4 text-base font-bold capitalize text-vanilla-100">
+                {color.name}
+              </h3>
+              <div className="overflow-hidden rounded-lg shadow-lg">
+                {color.shades.map((shade) => (
+                  <div
+                    key={shade.name}
+                    className={`flex items-center justify-between w-full h-12 px-4 font-semibold ${color.name === "ink" || color.name === "slate" ? "text-vanilla-100" : ""}`}
+                    style={{ backgroundColor: shade.value }}
+                  >
+                    <span>{shade.name}</span>
+                    <span className="uppercase">{shade.value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+      </div>
+
+      {/* Gradients */}
+      {colors
+        .filter((item) => item.name === "Gradient")
+        .map((color) => (
+          <div key={color.name}>
+            <h1 className="mb-5 text-lg font-bold text-vanilla-100">
+              Gradients
+            </h1>
+
+            <div className="grid grid-cols-6 gap-5 mb-12">
+              {color.shades.map((shade) => (
+                <div className=" shadow-lg">
+                  <div
+                    key={shade.name}
+                    className={`flex items-center justify-between w-full h-20 px-4 font-semibold overflow-hidden rounded-lg`}
+                    style={{ backgroundImage: shade.value }}
+                  ></div>
+                  <span className="text-vanilla-100">{shade.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+export default ColorPalette;

apps/docs/components/Spacing.tsx

@@ -0,0 +1,29 @@
+import { getTransformedSpacingTokens } from "../utils";
+
+const spacing = getTransformedSpacingTokens();
+const spacingKeys = Object.keys(spacing);
+
+function Spacing() {
+  console.log(spacingKeys);
+
+  return (
+    <div className="p-4">
+      <h1 className="mb-5 text-lg font-bold text-vanilla-100">Spacing Scale</h1>
+
+      {spacingKeys.map((size) => {
+        const value = spacing[size as keyof typeof spacing];
+
+        return (
+          <div key={size} className="mb-4">
+            <span className="text-vanilla-100">
+              {size} - {value}
+            </span>
+            <div className={`bg-slate-50 h-4`} style={{ width: value }}></div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default Spacing;

apps/docs/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/docs/package.json

@@ -15,6 +15,7 @@
 	"dependencies": {
 		"@signozhq/button": "workspace:*",
 		"@signozhq/input": "workspace:*",
+		"@signozhq/design-tokens": "latest",
 		"@signozhq/tailwind-config": "workspace:*",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
@@ -31,9 +32,12 @@
 		"@storybook/react-vite": "^8.3.3",
 		"@types/react": "^18.3.11",
 		"@vitejs/plugin-react": "^4.2.1",
+		"autoprefixer": "^10.4.20",
 		"eslint": "^9.11.0",
+		"postcss": "^8.4.35",
 		"serve": "^14.2.1",
 		"storybook": "^8.3.3",
+		"tailwindcss": "^3.4.12",
 		"typescript": "^5.3.3",
 		"vite": "^5.1.4"
 	}

apps/docs/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/docs/stories/button.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "@signozhq/button";
 
 const meta: Meta<typeof Button> = {
+  title: "Components/Button",
   component: Button,
   argTypes: {
     variant: {
@@ -62,12 +63,12 @@ export const Primary: Story = {
   },
 };
 
-export const Secondary: Story = {
+export const Default: Story = {
   render: (args) => <Button {...args} />,
   args: {
     ...Primary.args,
-    children: "Secondary",
-    variant: "secondary",
+    children: "Default",
+    variant: "default",
   },
 };
 

apps/docs/stories/colors.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ColorPalette from "../components/ColorPalette";
+import { getTransformedColorTokens } from "../utils";
+
+const meta: Meta<typeof ColorPalette> = {
+  title: "Design System/Colors",
+  component: ColorPalette,
+  tags: ["autodocs"],
+  parameters: {
+    backgrounds: {
+      default: "dark",
+      values: [{ name: "dark", value: "#000" }],
+    },
+  },
+};
+
+const colors = getTransformedColorTokens();
+
+export default meta;
+type Story = StoryObj<typeof ColorPalette>;
+
+export const Default: Story = {
+  render: () => <ColorPalette />,
+};

apps/docs/stories/spacing.stories.tsx

@@ -0,0 +1,14 @@
+import Spacing from "../components/Spacing";
+
+export default {
+  title: "Design System/Spacing",
+  component: Spacing,
+  parameters: {
+    backgrounds: {
+      default: "dark",
+      values: [{ name: "dark", value: "#000" }],
+    },
+  },
+};
+
+export const SpacingScale = () => <Spacing />;

apps/docs/stories/typography.stories.tsx

@@ -0,0 +1,64 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { getTransformedTypographyTokens } from "../utils";
+
+export default {
+  title: "Design System/Typography",
+  component: () => null,
+  parameters: {
+    backgrounds: {
+      default: "dark",
+      values: [{ name: "dark", value: "#1a1a1a" }],
+    },
+  },
+} as Meta;
+
+const typography = getTransformedTypographyTokens();
+
+const getFontSize = (variant: string): string => {
+  return typography.FONTSIZE[variant as keyof typeof typography.FONTSIZE] || "";
+};
+
+const getFontWeight = (variant: string): string => {
+  return (
+    typography.FONTWEIGHT[variant as keyof typeof typography.FONTWEIGHT] || ""
+  );
+};
+
+const FontSizeShowcase: React.FC = () => (
+  <div className="p-5">
+    <h1 className="mb-5 text-lg font-bold text-vanilla-100">Font Sizes</h1>
+    <div className="grid grid-cols-1 gap-4">
+      {Object.keys(typography.FONTSIZE).map((variant) => (
+        <div key={variant} className="text-vanilla-100">
+          <h2 style={{ fontSize: getFontSize(variant) }}>
+            {variant} - {getFontSize(variant)}
+          </h2>
+          <p style={{ fontSize: getFontSize(variant) }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const FontWeightShowcase: React.FC = () => (
+  <div className="p-5">
+    <h1 className="mb-5 text-lg font-bold text-vanilla-100">Font Weights</h1>
+    <div className="grid grid-cols-1 gap-4">
+      {Object.keys(typography.FONTWEIGHT).map((variant) => (
+        <div key={variant} className="text-vanilla-100">
+          <h2 style={{ fontWeight: getFontWeight(variant) }}>
+            {variant} - {getFontWeight(variant)}
+          </h2>
+          <p style={{ fontWeight: getFontWeight(variant) }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const FontSize: StoryFn = () => <FontSizeShowcase />;
+export const FontWeight: StoryFn = () => <FontWeightShowcase />;

apps/docs/tailwind.config.js

@@ -0,0 +1,11 @@
+const sharedConfig = require("@signozhq/tailwind-config/tailwind.config.js");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  ...sharedConfig,
+  content: [
+    ...sharedConfig.content,
+    "./stories/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+};