add Tabs to the design system

apps/design-system/src/components/Tabs.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@asyncapi/studio-ui'
+
+const meta: Meta = {
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
+  }
+}
+
+export default meta
+
+
+export const Default = {
+  render: () => (  <Tabs defaultValue="visual_editor">
+    <TabsList>
+      <TabsTrigger value="visual_editor">Visual Editor</TabsTrigger>
+      <TabsTrigger value="code_editor">Code Editor</TabsTrigger>
+      <TabsTrigger value="examples">Examples</TabsTrigger>
+    </TabsList>
+      <TabsContent value="visual_editor">Visual Editor Layout</TabsContent>
+      <TabsContent value="code_editor">Code Editor Layout</TabsContent>
+      <TabsContent value="examples">Examples Layout</TabsContent>
+  </Tabs>)
+}

apps/design-system/src/styles/tailwind.output.css

@@ -563,6 +563,10 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .flex {
   display: flex;
 }
@@ -579,6 +583,10 @@ video {
   width: 100%;
 }
 
+.w-\[360px\] {
+  width: 360px;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -603,6 +611,14 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));

packages/ui/components/Separator.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@asyncapi/studio-utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-gray-800 h-full w-[1px]", orientation === "horizontal" && "h-[1px] w-full", className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

packages/ui/components/Tabs.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "@asyncapi/studio-utils"
+import { Separator } from './Separator'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <div className='w-fit'>
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex gap-3 h-7 rounded-md p-l-1 text-gray-500 font-medium",
+      className
+    )}
+    {...props}
+  />
+  <Separator orientation='horizontal' />
+  </div>
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex text-gray-500 items-center justify-center whitespace-nowrap rounded-sm py-1.5 text-sm  transition-all focus-visible:outline-none focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-gray-300 data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 focus-visible:outline-none text-gray-500",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

packages/ui/components/index.tsx

@@ -19,4 +19,5 @@ export * from './AppCard'
 export * from './VisualEditor/Example'
 export * from './VisualEditor/CodeEditor'
 export * from './VisualEditor'
+export * from './Tabs'
 export { default as Tooltip } from './Tooltip'

packages/ui/package.json

@@ -25,7 +25,9 @@
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "classnames": "^2.3.2",
@@ -35,12 +37,12 @@
     "react-icons": "^5.2.1"
   },
   "devDependencies": {
+    "@asyncapi/studio-utils": "workspace:*",
     "@types/lodash": "^4.17.0",
     "@types/react": "^18.2.5",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.31",
     "tailwind-config": "workspace:*",
-    "@asyncapi/studio-utils": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "^8.0.2",
     "typescript": "^4.9.4"

packages/utils/package.json

@@ -6,7 +6,8 @@
   "types": "dist/index.d.ts",
   "private": true,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "dev": "tsup --watch"
   },
   "keywords": [],
   "author": "",