feat: build the tabs component

SigNoz · Mar 4, 2025 · 018aad4 · 018aad4
1 parent 1a95f43
commit 018aad4
Show file tree

Hide file tree

Showing 14 changed files with 7,424 additions and 5,352 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -14,9 +14,11 @@
 	},
 	"dependencies": {
 		"@signozhq/button": "workspace:*",
-		"@signozhq/input": "workspace:*",
 		"@signozhq/design-tokens": "latest",
+		"@signozhq/input": "workspace:*",
+		"@signozhq/tabs": "workspace:*",
 		"@signozhq/tailwind-config": "workspace:*",
+		"lucide-react": "^0.477.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},

diff --git a/apps/docs/stories/tabs.stories.tsx b/apps/docs/stories/tabs.stories.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Tabs from '@signozhq/tabs';
+import { Home, Code, Settings, Zap, BarChart3, History } from 'lucide-react';
+
+const meta: Meta<typeof Tabs> = {
+	title: 'Components/Tabs',
+	component: Tabs,
+	parameters: {
+		layout: 'centered',
+		backgrounds: {
+			default: 'dark',
+		},
+		controls: {
+			disable: true,
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div className="dark p-4">
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+	args: {
+		defaultValue: 'overview',
+		items: [
+			{
+				key: 'overview',
+				label: <span>Overview</span>,
+				prefixIcon: <Home size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Overview</div>
+						<p>Overview content goes here.</p>
+					</div>
+				),
+			},
+			{
+				key: 'issues',
+				label: <span>Issues</span>,
+				prefixIcon: <Code size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Issues</div>
+						<p>Issues content goes here.</p>
+					</div>
+				),
+			},
+			{
+				key: 'settings',
+				label: <span>Settings</span>,
+				prefixIcon: <Settings size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Settings</div>
+						<p>Settings content goes here.</p>
+					</div>
+				),
+			},
+		],
+	},
+};
+
+export const WithCustomColors: Story = {
+	args: {
+		defaultValue: 'overview',
+		slideColor: 'sienna-500',
+		tabColor: 'sienna-500',
+		hoverColor: 'sienna-500',
+		items: [
+			{
+				key: 'overview',
+				label: <span>Overview</span>,
+				prefixIcon: <Home size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Overview</div>
+						<p>Overview content goes here.</p>
+					</div>
+				),
+			},
+			{
+				key: 'issues',
+				label: <span>Issues</span>,
+				prefixIcon: <Code size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Issues</div>
+						<p>Issues content goes here.</p>
+					</div>
+				),
+			},
+			{
+				key: 'autofix',
+				label: <span>Autofix</span>,
+				prefixIcon: <Zap size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Autofix</div>
+						<p>Autofix content goes here.</p>
+					</div>
+				),
+			},
+			{
+				key: 'metrics',
+				label: <span>Metrics</span>,
+				prefixIcon: <BarChart3 size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Metrics</div>
+						<p>Metrics content goes here.</p>
+					</div>
+				),
+			},
+		],
+	},
+};
+
+export const WithIconsAndDisabled: Story = {
+	args: {
+		defaultValue: 'overview',
+		items: [
+			{
+				key: 'overview',
+				label: <span>Overview</span>,
+				prefixIcon: <Home size={16} />,
+				suffixIcon: <Code size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Overview</div>
+						<p>Overview content goes here.</p>
+					</div>
+				),
+			},
+			{
+				key: 'issues',
+				label: <span>Issues</span>,
+				prefixIcon: <Code size={16} />,
+				disabled: true,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">Issues</div>
+						<p>Issues content goes here.</p>
+					</div>
+				),
+			},
+			{
+				key: 'history',
+				label: <span>History</span>,
+				prefixIcon: <History size={16} />,
+				children: (
+					<div className="text-vanilla-400">
+						<div className="text-xl font-semibold">History</div>
+						<p>History content goes here.</p>
+					</div>
+				),
+			},
+		],
+	},
+};
diff --git a/packages/tabs/.eslintrc.js b/packages/tabs/.eslintrc.js
@@ -0,0 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
+export default {
+	extends: ['@repo/eslint-config/react.js'],
+};
diff --git a/packages/tabs/components.json b/packages/tabs/components.json
@@ -0,0 +1,19 @@
+{
+	"style": "new-york",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "@signozhq/tailwind-config/tailwind.config.js",
+		"css": "src/index.css",
+		"baseColor": "zinc",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "src",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	}
+}
diff --git a/packages/tabs/package.json b/packages/tabs/package.json
@@ -0,0 +1,58 @@
+{
+	"name": "@signozhq/tabs",
+	"version": "0.0.0",
+	"sideEffects": false,
+	"license": "MIT",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/tabs.d.ts",
+			"import": "./dist/tabs.js"
+		}
+	},
+	"main": "./dist/tabs.js",
+	"module": "./dist/tabs.js",
+	"types": "./dist/tabs.d.ts",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"lint": "eslint . --max-warnings 0",
+		"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+	},
+	"devDependencies": {
+		"@repo/eslint-config": "workspace:*",
+		"@repo/typescript-config": "workspace:*",
+		"@signozhq/tailwind-config": "workspace:*",
+		"@types/node": "^22.5.5",
+		"@types/react": "^18.2.61",
+		"@types/react-dom": "^18.2.19",
+		"@vitejs/plugin-react": "^4.2.1",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.11.0",
+		"postcss": "^8.4.47",
+		"react-dom": "^18.2.0",
+		"tailwindcss": "^3.4.12",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.0",
+		"vite-plugin-dts": "^4.2.1",
+		"vite-plugin-lib-inject-css": "^2.1.1"
+	},
+	"dependencies": {
+		"@radix-ui/react-icons": "^1.3.0",
+		"@radix-ui/react-slot": "^1.1.0",
+		"@radix-ui/react-tabs": "^1.1.3",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.445.0",
+		"react": "^18.2.0",
+		"tailwind-merge": "^2.5.2",
+		"tailwindcss-animate": "^1.0.7"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"description": "A new package"
+}
diff --git a/packages/tabs/postcss.config.js b/packages/tabs/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/packages/tabs/src/index.css b/packages/tabs/src/index.css
@@ -0,0 +1,67 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 10% 3.9%;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+		--tw-ring-offset-color: #09f;
+	}
+}
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
diff --git a/packages/tabs/src/lib/utils.ts b/packages/tabs/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}