console: add tabs component

## Description 🔖

[VIDEO](https://www.loom.com/share/5844476e527f4e1d9ec296bc3a4bb932)

This PR creates a Tabs component that wraps the Radix UI component.

## Solution and Design 🎨

The component accepts all the props of the Radix UI tab root component and a list of items that specify the label and the content of the tabs. The component can be used in a controlled way (e.g., the state of the tab is stored in the URL) or uncontrolled.

For styling radix ui states I've added this library: https://github.com/ecklf/tailwindcss-radix

## Review Setup 💻

Run storybook and look for Tabs component

## Review checklist. 📋

- [ ] stories work
- [ ] doc is clear

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5667
GitOrigin-RevId: 0e73ef1026d6673c3c2dd413b986fa8395abb1f6

console/package-lock.json

@@ -87,6 +87,7 @@
         "styled-components": "5.0.1",
         "styled-system": "5.1.5",
         "subscriptions-transport-ws": "0.9.16",
+        "tailwindcss-radix": "^2.5.0",
         "ts-essentials": "7.0.3",
         "uuid": "8.3.2",
         "xstate": "^4.30.1",
@@ -38429,6 +38430,11 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss-radix": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-radix/-/tailwindcss-radix-2.5.0.tgz",
+      "integrity": "sha512-vPIvolTmb0L6DlvIKBJRVGo+gB7ZU2jZbO8EpZw/5gBSTHx6PezRgQhR68kOuteh3F1q2PV3oBQgaIN4FxVmrw=="
+    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -71770,6 +71776,11 @@
         }
       }
     },
+    "tailwindcss-radix": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-radix/-/tailwindcss-radix-2.5.0.tgz",
+      "integrity": "sha512-vPIvolTmb0L6DlvIKBJRVGo+gB7ZU2jZbO8EpZw/5gBSTHx6PezRgQhR68kOuteh3F1q2PV3oBQgaIN4FxVmrw=="
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

console/package.json

@@ -140,6 +140,7 @@
     "styled-components": "5.0.1",
     "styled-system": "5.1.5",
     "subscriptions-transport-ws": "0.9.16",
+    "tailwindcss-radix": "^2.5.0",
     "ts-essentials": "7.0.3",
     "uuid": "8.3.2",
     "xstate": "^4.30.1",

console/src/new-components/Tabs/Tabs.stories.mdx

@@ -0,0 +1,97 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+
+import { TemplateStoriesFactory } from '@/utils/StoryUtils';
+import { Tabs } from '@/new-components/Tabs';
+
+<Meta
+  title="components/Tabs 🧬"
+  component={Tabs}
+  parameters={{
+    docs: { source: { type: 'code' } },
+    chromatic: { disableSnapshot: true },
+  }}
+  decorators={[Story => <div className={'p-4'}>{Story()}</div>]}
+  argTypes={{
+    value: {
+      defaultValue: 'tab-1',
+      control: {
+        type: 'select',
+        options: ['tab-1', 'tab-2', 'tab-3'],
+      },
+    },
+    onValueChange: { action: 'onValueChange' },
+  }}
+/>
+
+# Tabs 🧬
+
+- [🧰 Overview](#-overview)
+- [🐙 Code on Github](https://github.com/hasura/graphql-engine-mono/tree/main/console/src/new-components/Tabs/Tabs.tsx)
+
+## 🧰 Overview
+
+A component that display tabbed content. It is a wrapper around [radix-ui](https://www.radix-ui.com/docs/primitives/components/tabs) component. It can be used either in a controlled or uncontrolled way.
+
+### Basic usage
+
+```ts
+import { Tabs } from '@/new-components/Tabs';
+```
+
+```tsx
+<Tabs
+  value={value}
+  onValueChange={value => setValue(value)}
+  items={[
+    { value: 'tab-1', label: 'Tab 1', content: 'Content 1' },
+    { value: 'tab-2', label: 'Tab 2', content: 'Content 2' },
+    { value: 'tab-3', label: 'Tab 3', content: 'Content 3' },
+  ]}
+/>
+```
+
+export const Template = ({ value, onValueChange, ...rest }) => (
+  <Tabs
+    items={[
+      { value: 'tab-1', label: 'Tab 1', content: 'Content 1' },
+      { value: 'tab-2', label: 'Tab 2', content: 'Content 2' },
+      { value: 'tab-3', label: 'Tab 3', content: 'Content 3' },
+    ]}
+    value={value}
+    onValueChange={onValueChange}
+    {...rest}
+  />
+);
+
+<Canvas>
+  <Story name="Controlled">{Template.bind({})}</Story>
+</Canvas>
+
+<Canvas>
+  <Story name="Unontrolled">
+    <Tabs
+      items={[
+        { value: 'tab-1', label: 'Tab 1', content: 'Content 1' },
+        { value: 'tab-2', label: 'Tab 2', content: 'Content 2' },
+        { value: 'tab-3', label: 'Tab 3', content: 'Content 3' },
+      ]}
+    />
+  </Story>
+</Canvas>
+
+#### 🚦 Usage
+
+The component accepts all the props of the radix-ui [Tabs](https://www.radix-ui.com/docs/primitives/components/tabs) root component.
+
+- If used in a controlled way (e.g. the state of tabs navigation is stored in the URL), you should pass:
+  - `value`: the id of the selected tab
+  - `onValueChange`: the callback to be called when the tab is changed
+- The `items` prop is an array of objects that contain the following properties:
+  - `value`: the id of the tab
+  - `label`: the label of the tab
+  - `content`: the content of the tab
+
+```
+
+```

console/src/new-components/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import * as RadixTabs from '@radix-ui/react-tabs';
+import clsx from 'clsx';
+
+interface TabsItem {
+  value: string;
+  label: string;
+  content: React.ReactNode;
+}
+
+interface TabsProps extends React.ComponentProps<typeof RadixTabs.Root> {
+  items: TabsItem[];
+}
+
+export const Tabs: React.FC<TabsProps> = props => {
+  const { items, ...rest } = props;
+  return (
+    <RadixTabs.Root defaultValue={items[0]?.value} {...rest}>
+      <RadixTabs.List aria-label="Tabs">
+        <div className="border-b border-gray-200 mb-lg bg-legacybg flex space-x-4">
+          {items.map(({ value: itemValue, label }) => (
+            <RadixTabs.Trigger value={itemValue} asChild>
+              <button
+                className={clsx(
+                  'whitespace-nowrap py-xs px-sm border-b-2 font-semibold',
+                  'hover:border-gray-300 border-transparent text-muted',
+                  'radix-state-active:hover:border-yellow-500 radix-state-active:border-yellow-500 radix-state-active:text-yellow-500'
+                )}
+              >
+                {label}
+              </button>
+            </RadixTabs.Trigger>
+          ))}
+        </div>
+      </RadixTabs.List>
+      {items.map(({ value: itemValue, content }) => (
+        <RadixTabs.Content value={itemValue}>{content}</RadixTabs.Content>
+      ))}
+    </RadixTabs.Root>
+  );
+};

console/src/new-components/Tabs/index.tsx

@@ -0,0 +1 @@
+export * from './Tabs';

console/tailwind.config.js

@@ -82,5 +82,9 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms'),
+    require('tailwindcss-radix')(),
+  ],
 };