@redis-ui/components 42.8.0 → 43.2.1

package/skills/redis-ui-components/references/MidBar.md

@@ -0,0 +1,358 @@
+# MidBar
+
+A navigation mid-bar that combines optional start/middle/end groups with tab navigation and a shared `Tabs` composition state.
+
+## Import
+
+```tsx
+import { MidBar } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+### `MidBar`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| tabs | `TTab[]` | - | Tab trigger/content items rendered by the header and content pane. |
+| startGroup | `ReactNode` | - | Content rendered in the start slot of the header. |
+| middleGroup | `ReactNode` | - | Content rendered in the middle slot when no tabs are provided. |
+| endGroup | `ReactNode` | - | Content rendered in the end slot of the header. |
+| defaultValue | `NoInfer<TValue>` | - | Initial active tab value for the shared compose state. |
+| value | `NoInfer<TValue>` | - | Controlled active tab value. |
+| onChange | `(newValue: TValue) => void` | - | Called when the active tab changes. |
+| activateOnFocus | `boolean` | `false` | Activates a tab as soon as it receives focus. |
+
+`MidBar` also accepts the shared state props from `MidBar.Compose` through the internal `Tabs.Compose` wrapper.
+
+### `MidBar.Compose`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| defaultValue | `NoInfer<TValue>` | - | Initial active tab value for the shared compose state. |
+| value | `NoInfer<TValue>` | - | Controlled active tab value. |
+| onChange | `(newValue: TValue) => void` | - | Called when the active tab changes. |
+| activateOnFocus | `boolean` | `false` | Activates a tab as soon as it receives focus. |
+| children | `ReactNode` | required | Custom header and content layout built from the compound parts. |
+| compose wrapper props | `ComposeElementProps` | - | Standard wrapper props inherited from `Tabs.Compose`. |
+
+### `MidBar.Header`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| tabs | `TabTriggerInfo[]` | - | Tab trigger metadata rendered by the header tab bar. |
+| startGroup | `ReactNode` | - | Start-slot content for the header. |
+| middleGroup | `ReactNode` | - | Middle-slot content when tabs are not provided. |
+| endGroup | `ReactNode` | - | End-slot content for the header. |
+| compose wrapper props | `ComposeElementProps` | - | Standard header wrapper props without `children`. |
+
+`MidBar.Header` is a convenience wrapper around `MidBar.Header.Compose`, `MidBar.Header.Group`, and `MidBar.Header.TabBar`.
+
+### `MidBar.Header.Compose`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Custom header layout. |
+| compose wrapper props | `ComposeElementProps` | - | Standard header container props. |
+
+### `MidBar.Header.Group`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| position | `'start' \| 'middle' \| 'end'` | required | Header slot position. |
+| children | `ReactNode` | required | Group content rendered in the selected header slot. |
+| compose wrapper props | `ComposeElementProps` | - | Standard group container props. |
+
+### `MidBar.Header.TabBar`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| tabs | `TabTriggerInfo[]` | required | Tabs rendered as header triggers. |
+| variant | `'default' \| 'sub'` | `'default'` | Tab bar visual variant. |
+| compose wrapper props | `ComposeElementProps` | - | Standard tab bar container props. |
+
+`MidBar.Header.TabBar` reuses the `Tabs.TabBar` implementation, including `Trigger`, `Trigger.Compose`, `Trigger.Tab`, and `Trigger.Marker`.
+
+### `MidBar.ContentPane`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| tabs | `TabContentInfo[]` | required | Content panes rendered for each tab. |
+| compose wrapper props | `ComposeElementProps` | - | Standard content pane container props. |
+
+`MidBar.ContentPane` reuses the `Tabs.ContentPane` implementation, including `Compose` and `Content`.
+
+### `MidBar.ContentPane.Compose`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Custom content pane layout. |
+| compose wrapper props | `ComposeElementProps` | - | Standard content pane container props. |
+
+### `MidBar.ContentPane.Content`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| value | `string` | required | Tab value linked to the content panel. |
+| children | `ReactNode` | required | Content rendered inside the panel. |
+| compose wrapper props | `ComposeElementProps<HTMLDivElement>` | - | Standard content panel props. |
+
+## Sub-components
+
+- `MidBar.Compose` - Shared tab state wrapper used for custom layouts.
+- `MidBar.Header` - Convenience wrapper for the header slots and tab bar.
+- `MidBar.Header.Compose` - Header layout container.
+- `MidBar.Header.Group` - Positioned header slot container for start, middle, or end content.
+- `MidBar.Header.TabBar` - Tab bar alias built on `Tabs.TabBar`.
+- `MidBar.Header.TabBar.Compose` - Custom tab bar layout container.
+- `MidBar.Header.TabBar.Trigger` - Single tab trigger wrapper.
+- `MidBar.Header.TabBar.Trigger.Compose` - Custom trigger container.
+- `MidBar.Header.TabBar.Trigger.Tab` - Trigger label container.
+- `MidBar.Header.TabBar.Trigger.Marker` - Trigger state marker.
+- `MidBar.ContentPane` - Content pane alias built on `Tabs.ContentPane`.
+- `MidBar.ContentPane.Compose` - Custom content pane layout container.
+- `MidBar.ContentPane.Content` - Individual tab content panel.
+
+## Examples
+
+### Playground
+
+```tsx
+import { MidBar, Button } from '@redislabsdev/redis-ui-components';
+
+const tabs = [
+  { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
+  { value: 'tab2', label: 'Second Tab', content: 'Second Tab Content' },
+  {
+    value: 'tab3',
+    label: 'Third Tab (disabled)',
+    content: 'Third Tab Content',
+    disabled: true
+  }
+];
+
+<MidBar
+  tabs={tabs}
+  defaultValue={tabs[0].value}
+  startGroup={<div>Databases</div>}
+  endGroup={<Button>Create database</Button>}
+/>
+```
+
+### WithoutTabs
+
+```tsx
+import { MidBar, Button } from '@redislabsdev/redis-ui-components';
+
+<MidBar startGroup={<div>Databases</div>} endGroup={<Button>Create database</Button>} />
+```
+
+### WithTabs
+
+```tsx
+import { useState } from 'react';
+import { MidBar, Button } from '@redislabsdev/redis-ui-components';
+
+const tabs = [
+  { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
+  { value: 'tab2', label: 'Second Tab', content: 'Second Tab Content' },
+  {
+    value: 'tab3',
+    label: 'Third Tab (disabled)',
+    content: 'Third Tab Content',
+    disabled: true
+  }
+];
+
+function Example() {
+  const [selectedTab, setSelectedTab] = useState(tabs[0].value);
+
+  return (
+    <MidBar
+      tabs={tabs}
+      value={selectedTab}
+      onChange={setSelectedTab}
+      startGroup={<div>Databases</div>}
+      endGroup={<Button>Create database</Button>}
+    />
+  );
+}
+```
+
+### TabsOnly
+
+```tsx
+import { useState } from 'react';
+import { MidBar } from '@redislabsdev/redis-ui-components';
+
+const tabs = [
+  { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
+  { value: 'tab2', label: 'Second Tab', content: 'Second Tab Content' },
+  {
+    value: 'tab3',
+    label: 'Third Tab (disabled)',
+    content: 'Third Tab Content',
+    disabled: true
+  }
+];
+
+function Example() {
+  const [selectedTab, setSelectedTab] = useState(tabs[0].value);
+
+  return <MidBar tabs={tabs} value={selectedTab} onChange={setSelectedTab} />;
+}
+```
+
+### MiddleGroupOnly
+
+```tsx
+import { MidBar } from '@redislabsdev/redis-ui-components';
+
+<MidBar middleGroup={<div>Middle</div>} />;
+```
+
+### StartAndMiddleGroupOnly
+
+```tsx
+import { MidBar } from '@redislabsdev/redis-ui-components';
+
+<MidBar startGroup={<div>Start</div>} middleGroup={<div>Middle</div>} />;
+```
+
+### WithCustomMiddleGroup
+
+```tsx
+import { MidBar, Button } from '@redislabsdev/redis-ui-components';
+
+<MidBar
+  startGroup={<div>Databases</div>}
+  middleGroup={<div>Middle</div>}
+  endGroup={<Button>Create database</Button>}
+/>
+```
+
+### HeaderAndContentPane
+
+> MidBar component can be shallow composed using 2 main parts:
+> - `MidBar.Header` for rendering header with tabs and groups
+> - `MidBar.ContentPane` for rendering content
+>
+> State management props should be passed to `MidBar.Compose`
+>
+> All parts can have custom styling
+
+```tsx
+import { MidBar, Button } from '@redislabsdev/redis-ui-components';
+
+const tabs = [
+  { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
+  { value: 'tab2', label: 'Second Tab', content: 'Second Tab Content' },
+  {
+    value: 'tab3',
+    label: 'Third Tab (disabled)',
+    content: 'Third Tab Content',
+    disabled: true
+  }
+];
+
+<MidBar.Compose defaultValue={tabs[0].value}>
+  <MidBar.Header
+    tabs={tabs}
+    startGroup={<div>Databases</div>}
+    endGroup={<Button>Create database</Button>}
+  />
+
+  <MidBar.ContentPane tabs={tabs} />
+</MidBar.Compose>
+```
+
+### HeaderComposition
+
+> The `MidBar.Header` can be deeply composed using:
+> - `MidBar.Header.Compose` as the main container
+> - `MidBar.Header.Group` for start/middle/end groups
+> - `MidBar.Header.TabBar.Compose` for custom tab bar composition
+>
+> This allows full control over the header layout and styling
+
+```tsx
+import { MidBar, Button } from '@redislabsdev/redis-ui-components';
+
+const tabs = [
+  { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
+  { value: 'tab2', label: 'Second Tab', content: 'Second Tab Content' },
+  {
+    value: 'tab3',
+    label: 'Third Tab (disabled)',
+    content: 'Third Tab Content',
+    disabled: true
+  }
+];
+
+<MidBar.Compose defaultValue={tabs[0].value}>
+  <MidBar.Header.Compose>
+    <MidBar.Header.Group position="start">Databases</MidBar.Header.Group>
+    <MidBar.Header.TabBar.Compose>
+      {tabs.map(({ value, label, disabled }) => (
+        <MidBar.Header.TabBar.Trigger.Compose key={value} value={value} disabled={disabled}>
+          <MidBar.Header.TabBar.Trigger.Tab>{label ?? value}</MidBar.Header.TabBar.Trigger.Tab>
+          <MidBar.Header.TabBar.Trigger.Marker />
+        </MidBar.Header.TabBar.Trigger.Compose>
+      ))}
+    </MidBar.Header.TabBar.Compose>
+    <MidBar.Header.Group position="end">
+      <Button>Create database</Button>
+    </MidBar.Header.Group>
+  </MidBar.Header.Compose>
+
+  <MidBar.ContentPane tabs={tabs} />
+</MidBar.Compose>
+```
+
+### ContentPaneComposition
+
+> The `MidBar.ContentPane` can be composed using:
+> - `MidBar.ContentPane.Compose` as the main container
+> - `MidBar.ContentPane.Content` for individual tab content
+>
+> This allows custom styling for each content section
+
+```tsx
+import { MidBar, Button } from '@redislabsdev/redis-ui-components';
+
+const tabs = [
+  { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
+  { value: 'tab2', label: 'Second Tab', content: 'Second Tab Content' },
+  {
+    value: 'tab3',
+    label: 'Third Tab (disabled)',
+    content: 'Third Tab Content',
+    disabled: true
+  }
+];
+
+<MidBar.Compose defaultValue={tabs[0].value}>
+  <MidBar.Header
+    tabs={tabs}
+    startGroup={<div>Databases</div>}
+    endGroup={<Button>Create database</Button>}
+  />
+
+  <MidBar.ContentPane.Compose>
+    {tabs.map(({ value, content }) => (
+      <MidBar.ContentPane.Content key={value} value={value}>
+        <div style={{ padding: '20px', background: '#f5f5f5' }}>{content}</div>
+      </MidBar.ContentPane.Content>
+    ))}
+  </MidBar.ContentPane.Compose>
+</MidBar.Compose>
+```
+
+## Notes
+
+- `MidBar` is a compound wrapper around `Tabs.Compose`, `Tabs.ContentPane`, and the custom `MidBar.Header` layout.
+- `MidBar.Header` automatically switches between the tab bar and the middle group depending on whether `tabs` are provided.
+- `MidBar.Header.TabBar` and `MidBar.ContentPane` reuse the corresponding `Tabs` building blocks.
+- The shallow composition story uses `MidBar.Compose` to keep shared tab state in one place.
+- The header composition story uses `MidBar.Header.Compose`, `MidBar.Header.Group`, and `MidBar.Header.TabBar.Compose` for full layout control.
+- The content pane composition story uses `MidBar.ContentPane.Compose` and `MidBar.ContentPane.Content` for custom panel rendering.