From 77e18b55fa1b7be1354253874cfa7a901f3aa1e9 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Thu, 4 Apr 2024 07:46:19 +0000 Subject: [PATCH 1/2] feat: add tabs component --- package.json | 1 + pnpm-lock.yaml | 30 +++++++++++++++++ src/components/Tabs/Tabs.stories.tsx | 48 +++++++++++++++++++++++++++ src/components/Tabs/Tabs.tsx | 49 ++++++++++++++++++++++++++++ src/components/Tabs/index.tsx | 1 + src/components/index.ts | 1 + src/tailwind/index.ts | 3 +- 7 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 src/components/Tabs/Tabs.stories.tsx create mode 100644 src/components/Tabs/Tabs.tsx create mode 100644 src/components/Tabs/index.tsx diff --git a/package.json b/package.json index 68ed299..519f40d 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-tabs": "^1.0.4", "@tanstack/react-table": "^8.15.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 507d6ff..295fc17 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ dependencies: '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-tabs': + specifier: ^1.0.4 + version: 1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) '@tanstack/react-table': specifier: ^8.15.3 version: 8.15.3(react-dom@18.2.0)(react@18.2.0) @@ -2558,6 +2561,33 @@ packages: '@types/react': 18.2.28 react: 18.2.0 + /@radix-ui/react-tabs@1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@types/react': 18.2.28 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.28)(react@18.2.0): resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx new file mode 100644 index 0000000..2228e19 --- /dev/null +++ b/src/components/Tabs/Tabs.stories.tsx @@ -0,0 +1,48 @@ +import { Meta } from "@storybook/react"; +import React from "react"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "./index"; +import { StoryObj } from "@storybook/react"; + +const meta = { + title: "Elements/Tabs", + component: Tabs, + argTypes: {}, + parameters: { + layout: "centered" + }, + + tags: ["autodocs"] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const DefaultVariant: Story = { + name: "Tabs", + render: () => ( + + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + + +
Tab Content 1
+ + +
Tab Content 2
+ + +
Tab Content 3
+ + + ) +}; diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx new file mode 100644 index 0000000..b8f9508 --- /dev/null +++ b/src/components/Tabs/Tabs.tsx @@ -0,0 +1,49 @@ +import * as React from "react"; +import * as TabsPrimitive from "@radix-ui/react-tabs"; +import { cn } from "../../utilities"; + +const Tabs = TabsPrimitive.Root; + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsList.displayName = TabsPrimitive.List.displayName; + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsContent.displayName = TabsPrimitive.Content.displayName; + +export { Tabs, TabsList, TabsTrigger, TabsContent }; diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx new file mode 100644 index 0000000..5de2df6 --- /dev/null +++ b/src/components/Tabs/index.tsx @@ -0,0 +1 @@ +export * from "./Tabs"; diff --git a/src/components/index.ts b/src/components/index.ts index bffbe7b..d08145b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -9,3 +9,4 @@ export * from "./Table"; export * from "./Tag"; export * from "./Badge"; export * from "./Spinner"; +export * from "./Tabs"; diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index 4bc24c0..e0ce108 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -359,7 +359,8 @@ export const zenmlPlugin = plugin( } }, boxShadow: { - sm: "0px 0px 4px 0px rgba(0, 0, 0, 0.10)" + sm: "0px 0px 4px 0px rgba(0, 0, 0, 0.10)", + inner: "inset 0 -2px 0 0,0 2px 0 0" }, backgroundImage: { "gradient-dark": From ed94ac780ab90f3926034e9fd0fc7cee81885a14 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Thu, 4 Apr 2024 07:46:46 +0000 Subject: [PATCH 2/2] chore: add changeset --- .changeset/chatty-bikes-clap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chatty-bikes-clap.md diff --git a/.changeset/chatty-bikes-clap.md b/.changeset/chatty-bikes-clap.md new file mode 100644 index 0000000..69c5143 --- /dev/null +++ b/.changeset/chatty-bikes-clap.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add tabs