Skip to content

Commit 018aad4

Browse files
ahmadshaheerahmadshaheer
committed
feat: build the tabs component
1 parent 1a95f43 commit 018aad4

14 files changed

+7424
-5352
lines changed

‎apps/docs/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@
1414
},
1515
"dependencies": {
1616
"@signozhq/button": "workspace:*",
17-
"@signozhq/input": "workspace:*",
1817
"@signozhq/design-tokens": "latest",
18+
"@signozhq/input": "workspace:*",
19+
"@signozhq/tabs": "workspace:*",
1920
"@signozhq/tailwind-config": "workspace:*",
21+
"lucide-react": "^0.477.0",
2022
"react": "^18.2.0",
2123
"react-dom": "^18.2.0"
2224
},

‎apps/docs/stories/tabs.stories.tsx

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import React from 'react';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import Tabs from '@signozhq/tabs';
4+
import { Home, Code, Settings, Zap, BarChart3, History } from 'lucide-react';
5+
6+
const meta: Meta<typeof Tabs> = {
7+
title: 'Components/Tabs',
8+
component: Tabs,
9+
parameters: {
10+
layout: 'centered',
11+
backgrounds: {
12+
default: 'dark',
13+
},
14+
controls: {
15+
disable: true,
16+
},
17+
},
18+
decorators: [
19+
(Story) => (
20+
<div className="dark p-4">
21+
<Story />
22+
</div>
23+
),
24+
],
25+
};
26+
27+
export default meta;
28+
type Story = StoryObj<typeof Tabs>;
29+
30+
export const Default: Story = {
31+
args: {
32+
defaultValue: 'overview',
33+
items: [
34+
{
35+
key: 'overview',
36+
label: <span>Overview</span>,
37+
prefixIcon: <Home size={16} />,
38+
children: (
39+
<div className="text-vanilla-400">
40+
<div className="text-xl font-semibold">Overview</div>
41+
<p>Overview content goes here.</p>
42+
</div>
43+
),
44+
},
45+
{
46+
key: 'issues',
47+
label: <span>Issues</span>,
48+
prefixIcon: <Code size={16} />,
49+
children: (
50+
<div className="text-vanilla-400">
51+
<div className="text-xl font-semibold">Issues</div>
52+
<p>Issues content goes here.</p>
53+
</div>
54+
),
55+
},
56+
{
57+
key: 'settings',
58+
label: <span>Settings</span>,
59+
prefixIcon: <Settings size={16} />,
60+
children: (
61+
<div className="text-vanilla-400">
62+
<div className="text-xl font-semibold">Settings</div>
63+
<p>Settings content goes here.</p>
64+
</div>
65+
),
66+
},
67+
],
68+
},
69+
};
70+
71+
export const WithCustomColors: Story = {
72+
args: {
73+
defaultValue: 'overview',
74+
slideColor: 'sienna-500',
75+
tabColor: 'sienna-500',
76+
hoverColor: 'sienna-500',
77+
items: [
78+
{
79+
key: 'overview',
80+
label: <span>Overview</span>,
81+
prefixIcon: <Home size={16} />,
82+
children: (
83+
<div className="text-vanilla-400">
84+
<div className="text-xl font-semibold">Overview</div>
85+
<p>Overview content goes here.</p>
86+
</div>
87+
),
88+
},
89+
{
90+
key: 'issues',
91+
label: <span>Issues</span>,
92+
prefixIcon: <Code size={16} />,
93+
children: (
94+
<div className="text-vanilla-400">
95+
<div className="text-xl font-semibold">Issues</div>
96+
<p>Issues content goes here.</p>
97+
</div>
98+
),
99+
},
100+
{
101+
key: 'autofix',
102+
label: <span>Autofix</span>,
103+
prefixIcon: <Zap size={16} />,
104+
children: (
105+
<div className="text-vanilla-400">
106+
<div className="text-xl font-semibold">Autofix</div>
107+
<p>Autofix content goes here.</p>
108+
</div>
109+
),
110+
},
111+
{
112+
key: 'metrics',
113+
label: <span>Metrics</span>,
114+
prefixIcon: <BarChart3 size={16} />,
115+
children: (
116+
<div className="text-vanilla-400">
117+
<div className="text-xl font-semibold">Metrics</div>
118+
<p>Metrics content goes here.</p>
119+
</div>
120+
),
121+
},
122+
],
123+
},
124+
};
125+
126+
export const WithIconsAndDisabled: Story = {
127+
args: {
128+
defaultValue: 'overview',
129+
items: [
130+
{
131+
key: 'overview',
132+
label: <span>Overview</span>,
133+
prefixIcon: <Home size={16} />,
134+
suffixIcon: <Code size={16} />,
135+
children: (
136+
<div className="text-vanilla-400">
137+
<div className="text-xl font-semibold">Overview</div>
138+
<p>Overview content goes here.</p>
139+
</div>
140+
),
141+
},
142+
{
143+
key: 'issues',
144+
label: <span>Issues</span>,
145+
prefixIcon: <Code size={16} />,
146+
disabled: true,
147+
children: (
148+
<div className="text-vanilla-400">
149+
<div className="text-xl font-semibold">Issues</div>
150+
<p>Issues content goes here.</p>
151+
</div>
152+
),
153+
},
154+
{
155+
key: 'history',
156+
label: <span>History</span>,
157+
prefixIcon: <History size={16} />,
158+
children: (
159+
<div className="text-vanilla-400">
160+
<div className="text-xl font-semibold">History</div>
161+
<p>History content goes here.</p>
162+
</div>
163+
),
164+
},
165+
],
166+
},
167+
};

‎packages/tabs/.eslintrc.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import("eslint").Linter.Config} */
2+
export default {
3+
extends: ['@repo/eslint-config/react.js'],
4+
};

‎packages/tabs/components.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"style": "new-york",
3+
"rsc": false,
4+
"tsx": true,
5+
"tailwind": {
6+
"config": "@signozhq/tailwind-config/tailwind.config.js",
7+
"css": "src/index.css",
8+
"baseColor": "zinc",
9+
"cssVariables": true,
10+
"prefix": ""
11+
},
12+
"aliases": {
13+
"components": "@/components",
14+
"utils": "@/lib/utils",
15+
"ui": "src",
16+
"lib": "@/lib",
17+
"hooks": "@/hooks"
18+
}
19+
}

‎packages/tabs/package.json

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"name": "@signozhq/tabs",
3+
"version": "0.0.0",
4+
"sideEffects": false,
5+
"license": "MIT",
6+
"type": "module",
7+
"exports": {
8+
".": {
9+
"types": "./dist/tabs.d.ts",
10+
"import": "./dist/tabs.js"
11+
}
12+
},
13+
"main": "./dist/tabs.js",
14+
"module": "./dist/tabs.js",
15+
"types": "./dist/tabs.d.ts",
16+
"files": [
17+
"dist"
18+
],
19+
"scripts": {
20+
"build": "vite build",
21+
"dev": "vite build --watch",
22+
"lint": "eslint . --max-warnings 0",
23+
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
24+
},
25+
"devDependencies": {
26+
"@repo/eslint-config": "workspace:*",
27+
"@repo/typescript-config": "workspace:*",
28+
"@signozhq/tailwind-config": "workspace:*",
29+
"@types/node": "^22.5.5",
30+
"@types/react": "^18.2.61",
31+
"@types/react-dom": "^18.2.19",
32+
"@vitejs/plugin-react": "^4.2.1",
33+
"autoprefixer": "^10.4.20",
34+
"eslint": "^9.11.0",
35+
"postcss": "^8.4.47",
36+
"react-dom": "^18.2.0",
37+
"tailwindcss": "^3.4.12",
38+
"typescript": "^5.3.3",
39+
"vite": "^5.0.0",
40+
"vite-plugin-dts": "^4.2.1",
41+
"vite-plugin-lib-inject-css": "^2.1.1"
42+
},
43+
"dependencies": {
44+
"@radix-ui/react-icons": "^1.3.0",
45+
"@radix-ui/react-slot": "^1.1.0",
46+
"@radix-ui/react-tabs": "^1.1.3",
47+
"class-variance-authority": "^0.7.0",
48+
"clsx": "^2.1.1",
49+
"lucide-react": "^0.445.0",
50+
"react": "^18.2.0",
51+
"tailwind-merge": "^2.5.2",
52+
"tailwindcss-animate": "^1.0.7"
53+
},
54+
"publishConfig": {
55+
"access": "public"
56+
},
57+
"description": "A new package"
58+
}

‎packages/tabs/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎packages/tabs/src/index.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
@layer base {
5+
:root {
6+
--background: 0 0% 100%;
7+
--foreground: 240 10% 3.9%;
8+
--card: 0 0% 100%;
9+
--card-foreground: 240 10% 3.9%;
10+
--popover: 0 0% 100%;
11+
--popover-foreground: 240 10% 3.9%;
12+
--primary: 240 5.9% 10%;
13+
--primary-foreground: 0 0% 98%;
14+
--secondary: 240 4.8% 95.9%;
15+
--secondary-foreground: 240 5.9% 10%;
16+
--muted: 240 4.8% 95.9%;
17+
--muted-foreground: 240 3.8% 46.1%;
18+
--accent: 240 4.8% 95.9%;
19+
--accent-foreground: 240 5.9% 10%;
20+
--destructive: 0 84.2% 60.2%;
21+
--destructive-foreground: 0 0% 98%;
22+
--border: 240 5.9% 90%;
23+
--input: 240 5.9% 90%;
24+
--ring: 240 10% 3.9%;
25+
--chart-1: 12 76% 61%;
26+
--chart-2: 173 58% 39%;
27+
--chart-3: 197 37% 24%;
28+
--chart-4: 43 74% 66%;
29+
--chart-5: 27 87% 67%;
30+
--radius: 0.5rem;
31+
}
32+
.dark {
33+
--background: 240 10% 3.9%;
34+
--foreground: 0 0% 98%;
35+
--card: 240 10% 3.9%;
36+
--card-foreground: 0 0% 98%;
37+
--popover: 240 10% 3.9%;
38+
--popover-foreground: 0 0% 98%;
39+
--primary: 0 0% 98%;
40+
--primary-foreground: 240 5.9% 10%;
41+
--secondary: 240 3.7% 15.9%;
42+
--secondary-foreground: 0 0% 98%;
43+
--muted: 240 3.7% 15.9%;
44+
--muted-foreground: 240 5% 64.9%;
45+
--accent: 240 3.7% 15.9%;
46+
--accent-foreground: 0 0% 98%;
47+
--destructive: 0 62.8% 30.6%;
48+
--destructive-foreground: 0 0% 98%;
49+
--border: 240 3.7% 15.9%;
50+
--input: 240 3.7% 15.9%;
51+
--ring: 240 4.9% 83.9%;
52+
--chart-1: 220 70% 50%;
53+
--chart-2: 160 60% 45%;
54+
--chart-3: 30 80% 55%;
55+
--chart-4: 280 65% 60%;
56+
--chart-5: 340 75% 55%;
57+
--tw-ring-offset-color: #09f;
58+
}
59+
}
60+
@layer base {
61+
* {
62+
@apply border-border;
63+
}
64+
body {
65+
@apply bg-background text-foreground;
66+
}
67+
}

‎packages/tabs/src/lib/utils.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx, type ClassValue } from 'clsx';
2+
import { twMerge } from 'tailwind-merge';
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs));
6+
}

0 commit comments

Comments
 (0)