@keboola/design 2.0.0 → 2.1.0

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,849 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Decorator, Meta, StoryObj } from '@storybook/react-vite';
-import type { InputType } from 'storybook/internal/types';
-
-import {
-  AlertTriangle,
-  Ellipsis,
-  Expand,
-  Gauge,
-  Keboola,
-  Menu,
-  Minus,
-  PanelLeft,
-  Pencil,
-  Plus,
-  Sparkles,
-  SquareTerminal,
-  Trash2,
-} from '@keboola/design/icons';
-
-import { cn } from '../../utils';
-import { Button } from '../Button';
-import { ButtonGroup } from '../ButtonGroup';
-import { DropdownMenu } from '../DropdownMenu';
-import { Link } from '../Link';
-import { Modal } from '../Modal';
-
-import { Sidebar } from './Sidebar';
-import { SidebarProvider, useSidebar } from './SidebarProvider';
-import type { SidebarCollapsible, SidebarMode, SidebarSide, SidebarVariant } from './types';
-
-type SidebarProviderDecorator = Decorator<ComponentProps<typeof SidebarProvider>>;
-
-const AppContent = ({
-  className,
-  side,
-  ...props
-}: ComponentProps<'main'> & { side?: SidebarSide | 'both' }) => {
-  const isBoth = side === 'both';
-  const isLeft = side === 'left' || isBoth;
-  const isRight = side === 'right' || isBoth;
-
-  return (
-    <main
-      {...props}
-      className={cn(
-        'tw-w-full tw-gap-4 tw-flex tw-flex-col tw-items-center tw-mx-auto tw-p-8 tw-my-2 tw-bg-white tw-rounded-xl tw-shadow-lg',
-        className,
-      )}
-    >
-      <h1>Keboola App</h1>
-      <div className="tw-flex tw-w-full tw-flex-1 tw-justify-between tw-gap-2">
-        {isLeft && (
-          <div>
-            <h3>Left Controls</h3>
-            <ButtonGroup space="compact">
-              <Sidebar.Trigger side="left">
-                <Button argo variant="primary">
-                  <PanelLeft className="tw-size-4" />
-                  Toggle
-                </Button>
-              </Sidebar.Trigger>
-
-              <Sidebar.FillTrigger side="left">
-                <Button argo variant="secondary">
-                  <PanelLeft className="tw-size-4" />
-                  Fill
-                </Button>
-              </Sidebar.FillTrigger>
-            </ButtonGroup>
-          </div>
-        )}
-
-        {isRight && (
-          <div>
-            <h3>Right Controls</h3>
-            <ButtonGroup space="compact">
-              <Sidebar.FillTrigger side="right">
-                <Button argo variant="secondary">
-                  <PanelLeft className="tw-size-4" />
-                  Fill
-                </Button>
-              </Sidebar.FillTrigger>
-
-              <Sidebar.Trigger side="right">
-                <Button argo variant="primary">
-                  <PanelLeft className="tw-size-4" />
-                  Toggle
-                </Button>
-              </Sidebar.Trigger>
-            </ButtonGroup>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-};
-
-const leftLayoutDecorator: SidebarProviderDecorator = (StoryFn) => (
-  <div className="tw-flex tw-flex-1">
-    <StoryFn />
-    <AppContent side="left" />
-  </div>
-);
-
-const rightLayoutDecorator: SidebarProviderDecorator = (StoryFn) => (
-  <div className="tw-flex tw-flex-1">
-    <AppContent side="right" />
-    <StoryFn />
-  </div>
-);
-
-const collapsibleControl: InputType = {
-  control: { type: 'radio' },
-  options: ['icon', 'off-canvas'] satisfies SidebarCollapsible[],
-};
-
-const variantControl: InputType = {
-  control: { type: 'radio' },
-  options: ['sided-floating', 'inset', 'floating'] satisfies SidebarVariant[],
-};
-
-export default {
-  component: SidebarProvider,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    defaultLeftMode: 'expanded',
-    leftVariant: 'sided-floating',
-    leftCollapsible: 'icon',
-    rightVariant: 'floating',
-    rightCollapsible: 'off-canvas',
-  },
-  argTypes: {
-    leftCollapsible: collapsibleControl,
-    leftVariant: variantControl,
-    rightCollapsible: collapsibleControl,
-    rightVariant: variantControl,
-  },
-  decorators: [
-    (StoryFn, context) => (
-      <SidebarProvider {...context.args}>
-        <div className="tailwindcss-preflight tw-flex tw-h-svh tw-w-svw tw-flex-col tw-bg-neutral-50">
-          <StoryFn />
-        </div>
-      </SidebarProvider>
-    ),
-  ],
-} satisfies Meta<typeof SidebarProvider>;
-
-const SidebarFillControlMenuButton = ({ side }: { side?: SidebarSide }) => (
-  <Sidebar.FillTrigger side={side}>
-    <Sidebar.MenuButton
-      tooltip="Sidebar Fill Control"
-      icon="expand-alt"
-      className="!tw-flex-none [&_svg]:tw-text-sidebar-foreground"
-    >
-      <span className="tw-sr-only">Sidebar Fill Control</span>
-    </Sidebar.MenuButton>
-  </Sidebar.FillTrigger>
-);
-
-const SidebarModeControlMenuButton = ({ side }: { side?: SidebarSide }) => {
-  const { mode, setMode } = useSidebar(side);
-
-  return (
-    <DropdownMenu variant="argo">
-      <DropdownMenu.Trigger asChild>
-        <Sidebar.MenuButton
-          tooltip="Sidebar State Control"
-          icon={['far', 'sidebar']}
-          className="!tw-flex-none [&_svg]:tw-text-sidebar-foreground"
-        >
-          <span className="tw-sr-only">Sidebar State Control</span>
-        </Sidebar.MenuButton>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.RadioGroup value={mode} onValueChange={setMode}>
-          <DropdownMenu.RadioItem closeOnSelect value="collapsed">
-            Collapsed
-          </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem closeOnSelect value="expanded">
-            Expanded
-          </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem closeOnSelect value="expand-on-hover">
-            Expand on Hover
-          </DropdownMenu.RadioItem>
-        </DropdownMenu.RadioGroup>
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  );
-};
-
-type Story = StoryObj<typeof SidebarProvider>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="tw-flex tw-flex-1">
-      <Sidebar side="left">
-        <Sidebar.Header>
-          <Sidebar.Menu>
-            <Sidebar.MenuItem>
-              <Sidebar.MenuIcon className="!tw-size-8 tw-text-secondary-500">
-                <Keboola className="tw-size-4" />
-              </Sidebar.MenuIcon>
-              Sticky Header
-            </Sidebar.MenuItem>
-          </Sidebar.Menu>
-
-          <Sidebar.SearchInput placeholder="Search" />
-        </Sidebar.Header>
-
-        <Sidebar.Content>
-          <Sidebar.Menu>
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Dashboard" asChild>
-                <Link href="#">
-                  <Sidebar.MenuIcon>
-                    <Gauge className="tw-size-4" />
-                  </Sidebar.MenuIcon>
-                  Dashboard
-                </Link>
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="AI Assistant" asChild>
-                <Link href="#">
-                  <Sidebar.MenuIcon>
-                    <Sparkles className="tw-size-4" />
-                  </Sidebar.MenuIcon>
-                  AI Assistant
-                </Link>
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Flows" asChild>
-                <Link href="#">
-                  <Sidebar.MenuIcon>
-                    <Menu className="tw-size-4" />
-                  </Sidebar.MenuIcon>
-                  Flows
-                </Link>
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Components" icon={['far', 'layer-group']}>
-                Components
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Templates" icon={['far', 'book-open']}>
-                Templates
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Data Catalog" icon={['far', 'database']}>
-                Data Catalog
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton
-                tooltip="Storage"
-                icon={['far', 'warehouse']}
-                aria-selected={true}
-              >
-                Storage
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Transformations" icon={['far', 'window-restore']}>
-                Transformations
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Workspaces" icon={['far', 'box']}>
-                Workspaces
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Jobs" icon={['far', 'key']}>
-                Jobs
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-          </Sidebar.Menu>
-        </Sidebar.Content>
-
-        <Sidebar.Footer>
-          <Sidebar.Menu>
-            <Sidebar.MenuItem>
-              <Sidebar.MenuCard
-                icon="clock"
-                title="Whats New"
-                className="tw-flex tw-flex-col tw-gap-2"
-              >
-                Our arbitrary content
-                <Button>Our Button</Button>
-              </Sidebar.MenuCard>
-              <Sidebar.MenuBadge>8</Sidebar.MenuBadge>
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <Sidebar.MenuButton tooltip="Support & Feedback" icon={['far', 'key']}>
-                Support & Feedback
-              </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-
-            <Sidebar.Separator />
-            <Sidebar.MenuItem>
-              <SidebarFillControlMenuButton side="left" />
-            </Sidebar.MenuItem>
-
-            <Sidebar.MenuItem>
-              <SidebarModeControlMenuButton side="left" />
-            </Sidebar.MenuItem>
-          </Sidebar.Menu>
-        </Sidebar.Footer>
-      </Sidebar>
-
-      <AppContent side="both" />
-
-      <Sidebar container side="right">
-        <div className="tw-flex tw-flex-col tw-items-center tw-p-4">
-          <h1>KAI</h1>
-          <Sidebar.FillTrigger side="right">
-            <Button block argo variant="secondary">
-              <PanelLeft className="tw-size-4" />
-              Fill
-            </Button>
-          </Sidebar.FillTrigger>
-        </div>
-      </Sidebar>
-    </div>
-  ),
-};
-
-export const Resizable: Story = {
-  render: () => {
-    const [rightWidth, setRightWidth] = useState(384);
-
-    return (
-      <SidebarProvider
-        rightVariant="floating"
-        rightCollapsible="off-canvas"
-        defaultRightMode="expanded"
-        rightWidth={rightWidth}
-        onRightWidthChange={setRightWidth}
-      >
-        <div className="tailwindcss-preflight tw-flex tw-h-svh tw-w-svw tw-bg-neutral-50">
-          <AppContent side="right" />
-
-          <Sidebar container side="right" resizable>
-            <div className="tw-flex tw-flex-col tw-items-center tw-gap-4 tw-p-4">
-              <h2>Resizable Sidebar</h2>
-              <p className="tw-text-sm tw-text-neutral-400">
-                Width: {rightWidth}px — Drag left edge to resize
-              </p>
-              <Sidebar.FillTrigger side="right">
-                <Button block argo variant="secondary">
-                  <Expand className="tw-size-4" />
-                  Fullscreen
-                </Button>
-              </Sidebar.FillTrigger>
-              <Sidebar.Trigger side="right">
-                <Button block argo variant="outline">
-                  <PanelLeft className="tw-size-4" />
-                  Collapse
-                </Button>
-              </Sidebar.Trigger>
-            </div>
-          </Sidebar>
-        </div>
-      </SidebarProvider>
-    );
-  },
-  decorators: [],
-};
-
-export const SidebarInSidebar: Story = {
-  args: {
-    rightWidth: 384,
-    leftVariant: 'none',
-  },
-  decorators: [rightLayoutDecorator],
-  render: () => {
-    const { isFill } = useSidebar('right');
-    const [innerMode, setInnerMode] = useState<SidebarMode>('collapsed');
-
-    const handleOnModeChange = (mode: SidebarMode) => {
-      setInnerMode(mode);
-    };
-
-    return (
-      <Sidebar container side="right">
-        <SidebarProvider
-          leftVariant="sided-floating"
-          leftMode={isFill ? innerMode : 'collapsed'}
-          leftCollapsible={isFill ? 'icon' : 'off-canvas'}
-          onLeftModeChange={handleOnModeChange}
-        >
-          <div className="tw-flex tw-flex-1">
-            <Sidebar className="tw-absolute">
-              <Sidebar.Content>
-                <Sidebar.SearchInput placeholder="Search" />
-
-                <Sidebar.Menu>
-                  <Sidebar.MenuItem>
-                    <Sidebar.MenuButton tooltip="Simple" icon={['far', 'rectangle-terminal']}>
-                      Action
-                    </Sidebar.MenuButton>
-                  </Sidebar.MenuItem>
-
-                  <Sidebar.MenuItem>
-                    <Sidebar.MenuCard icon="clock" title="Card">
-                      Content
-                    </Sidebar.MenuCard>
-                  </Sidebar.MenuItem>
-
-                  <Sidebar.MenuItem>
-                    <SidebarModeControlMenuButton side="left" />
-                  </Sidebar.MenuItem>
-                </Sidebar.Menu>
-              </Sidebar.Content>
-            </Sidebar>
-            <main className="tw-m-2 tw-flex tw-flex-1 tw-justify-center tw-rounded-xl tw-bg-neutral-50">
-              <h1>KAI</h1>
-            </main>
-          </div>
-        </SidebarProvider>
-      </Sidebar>
-    );
-  },
-};
-
-export const MenuItems: Story = {
-  decorators: [leftLayoutDecorator],
-  render: () => (
-    <Sidebar>
-      <Sidebar.Content>
-        <Sidebar.Menu>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="Simple" icon={['far', 'rectangle-terminal']}>
-              Simple
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              tooltip="Active"
-              icon={['far', 'rectangle-terminal']}
-              aria-selected={true}
-            >
-              Active
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="Disabled" icon={['far', 'rectangle-terminal']} disabled>
-              Disabled
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="Simple Anchor" asChild>
-              <a href="https://www.keboole.com">
-                <Sidebar.MenuIcon>
-                  <SquareTerminal className="tw-size-4" />
-                </Sidebar.MenuIcon>
-                Simple Anchor
-              </a>
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              tooltip="Simple Anchor - Active"
-              asChild
-              icon={['far', 'rectangle-terminal']}
-            >
-              {/*use react-router based on spec*/}
-              {/*https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current*/}
-              <a aria-current="page" href="https://www.keboola.com">
-                Simple Anchor - Active
-              </a>
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              tooltip="This will be very long text hidden with ellipsis"
-              icon={['far', 'rectangle-terminal']}
-            >
-              <span className="tw-truncate">This will be very long text hidden with ellipsis</span>
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuCard icon="clock" title="Card Item">
-              Content
-            </Sidebar.MenuCard>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.SubMenu icon={['far', 'layer-group']} label="Sub Menu" defaultOpen>
-              <Sidebar.SubItem>Plain Sub Item</Sidebar.SubItem>
-              <Sidebar.SubItem aria-selected>Active Sub Item</Sidebar.SubItem>
-              <Sidebar.SubItem asChild>
-                {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <a href="#">Anchor Sub Item</a>
-              </Sidebar.SubItem>
-              <Sidebar.SubItem disabled>Disabled Sub Item</Sidebar.SubItem>
-            </Sidebar.SubMenu>
-          </Sidebar.MenuItem>
-        </Sidebar.Menu>
-      </Sidebar.Content>
-    </Sidebar>
-  ),
-};
-
-/**
- * The SidebarMenuAction component is used to render a menu action within a SidebarMenuItem.
- *
- * This button works independently of the SidebarMenuButton i.e you can have the `<SidebarMenuButton />` as a clickable link and the `<SidebarMenuAction />` as a button.
- */
-export const MenuAction: Story = {
-  decorators: [leftLayoutDecorator],
-  render: () => (
-    <Sidebar>
-      <Sidebar.Content>
-        <Sidebar.Menu>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              tooltip="Dropdown Action With very very long text"
-              icon={['far', 'rectangle-terminal']}
-            >
-              <span className="tw-truncate">Dropdown Action With very very long text</span>
-            </Sidebar.MenuButton>
-            <DropdownMenu>
-              <DropdownMenu.Trigger asChild>
-                <Sidebar.MenuAction showOnHover>
-                  <Ellipsis />
-                  <span className="tw-sr-only">Actions</span>
-                </Sidebar.MenuAction>
-              </DropdownMenu.Trigger>
-
-              <DropdownMenu.Content side="right" align="start">
-                <DropdownMenu.Group>
-                  <DropdownMenu.Item icon={<Pencil className="tw-size-4" />}>
-                    Edit{' '}
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item icon={<Trash2 className="tw-size-4" />}>
-                    Delete{' '}
-                  </DropdownMenu.Item>
-                </DropdownMenu.Group>
-              </DropdownMenu.Content>
-            </DropdownMenu>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="As Non-actionable" icon="code">
-              <span className="tw-truncate">As Non-actionable</span>
-            </Sidebar.MenuButton>
-
-            <Sidebar.MenuAction asChild>
-              <AlertTriangle className="tw-text-warning-600" />
-            </Sidebar.MenuAction>
-          </Sidebar.MenuItem>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="As Non-actionable with Very long text" icon="code">
-              <span className="tw-truncate">As Non-actionable with Very long text</span>
-            </Sidebar.MenuButton>
-            <Sidebar.MenuAction asChild>
-              <AlertTriangle className="tw-text-warning-600" />
-            </Sidebar.MenuAction>
-          </Sidebar.MenuItem>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="As Link" asChild icon={['far', 'code-branch']}>
-              {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
-              <a href="#">As Link</a>
-            </Sidebar.MenuButton>
-            <Sidebar.MenuAction asChild>
-              <Link href="#">
-                <Gauge className="tw-text-warning-600" />
-                <span className="tw-sr-only">Dashboard</span>
-              </Link>
-            </Sidebar.MenuAction>
-          </Sidebar.MenuItem>
-        </Sidebar.Menu>
-      </Sidebar.Content>
-    </Sidebar>
-  ),
-};
-
-/**
- * The `Sidebar.MenuBadge` component is used to display notification counts, status indicators,
- * or other small pieces of information on menu buttons.
- *
- * The badge is positioned absolutely in the top-right corner of the menu button and automatically
- * adapts its color based on button state (hover, active). It's hidden when the sidebar is collapsed
- * to icon-only mode.
- */
-export const MenuBadge: Story = {
-  decorators: [leftLayoutDecorator],
-  render: () => (
-    <Sidebar>
-      <Sidebar.Content>
-        <Sidebar.Menu>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="Messages" icon={['far', 'rectangle-terminal']}>
-              Messages
-            </Sidebar.MenuButton>
-            <Sidebar.MenuBadge>5</Sidebar.MenuBadge>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="Storage" icon={['far', 'warehouse']} aria-selected={true}>
-              Storage
-            </Sidebar.MenuButton>
-            <Sidebar.MenuBadge>3</Sidebar.MenuBadge>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton
-              tooltip="Link"
-              icon={['far', 'warehouse']}
-              aria-selected={true}
-              asChild
-            >
-              <Link href="#">Link</Link>
-            </Sidebar.MenuButton>
-            <Sidebar.MenuBadge>3</Sidebar.MenuBadge>
-          </Sidebar.MenuItem>
-
-          <Sidebar.MenuItem>
-            <Sidebar.MenuCard icon="clock" title="Card With Badge">
-              Content
-            </Sidebar.MenuCard>
-            <Sidebar.MenuBadge>8</Sidebar.MenuBadge>
-          </Sidebar.MenuItem>
-        </Sidebar.Menu>
-      </Sidebar.Content>
-    </Sidebar>
-  ),
-};
-
-/**
- * Use the `Sidebar.Group` component to create a section within the sidebar.
- *
- * A `Sidebar.Group` has a `Sidebar.GroupLabel`, a `Sidebar.GroupContent` and an optional `Sidebar.GroupAction`.
- */
-export const Group: Story = {
-  decorators: [leftLayoutDecorator],
-  render: () => (
-    <Sidebar>
-      <Sidebar.Content>
-        <Sidebar.Group>
-          <Sidebar.GroupLabel>Group A</Sidebar.GroupLabel>
-          <Sidebar.GroupAction>
-            <Plus className="tw-size-4" />
-          </Sidebar.GroupAction>
-          <Sidebar.GroupContent>
-            <Sidebar.Menu>
-              <Sidebar.MenuItem>
-                <Sidebar.MenuButton tooltip="Group A Item" icon="gauge">
-                  Group A Item
-                </Sidebar.MenuButton>
-              </Sidebar.MenuItem>
-            </Sidebar.Menu>
-          </Sidebar.GroupContent>
-        </Sidebar.Group>
-
-        <Sidebar.Group>
-          <Sidebar.GroupLabel>Group B</Sidebar.GroupLabel>
-          <Sidebar.GroupAction>
-            <Minus className="tw-size-4" />
-          </Sidebar.GroupAction>
-          <Sidebar.GroupContent>
-            <Sidebar.Menu>
-              <Sidebar.MenuItem>
-                <Sidebar.MenuButton tooltip="Group B Item" icon="gauge">
-                  Group B Item
-                </Sidebar.MenuButton>
-              </Sidebar.MenuItem>
-            </Sidebar.Menu>
-          </Sidebar.GroupContent>
-        </Sidebar.Group>
-      </Sidebar.Content>
-    </Sidebar>
-  ),
-};
-
-/**
- * The `SidebarSeparator` component is used to render a separator within a `Sidebar`.
- */
-export const Separator: Story = {
-  decorators: [leftLayoutDecorator],
-  render: () => (
-    <Sidebar>
-      <Sidebar.Content>
-        <Sidebar.Menu>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="Menu & Menu" icon="folder-open">
-              Menu & Menu
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-        </Sidebar.Menu>
-
-        <Sidebar.Separator />
-
-        <Sidebar.Menu>
-          <Sidebar.MenuItem>
-            <Sidebar.MenuButton tooltip="Menu & Group" icon="folder-open">
-              Menu & Group
-            </Sidebar.MenuButton>
-          </Sidebar.MenuItem>
-        </Sidebar.Menu>
-
-        <Sidebar.Separator />
-
-        <Sidebar.Group>
-          <Sidebar.GroupLabel>Group A</Sidebar.GroupLabel>
-          <Sidebar.GroupContent>
-            <Sidebar.Menu>
-              <Sidebar.MenuItem>
-                <Sidebar.MenuButton tooltip="MenuItem * MenuItem" icon="folder-open">
-                  MenuItem * MenuItem
-                </Sidebar.MenuButton>
-              </Sidebar.MenuItem>
-
-              <Sidebar.Separator />
-
-              <Sidebar.MenuItem>
-                <Sidebar.MenuButton tooltip="Item E" icon="folder-open">
-                  Item E
-                </Sidebar.MenuButton>
-              </Sidebar.MenuItem>
-            </Sidebar.Menu>
-          </Sidebar.GroupContent>
-        </Sidebar.Group>
-      </Sidebar.Content>
-    </Sidebar>
-  ),
-};
-
-/*
- * Use the `Sidebar` component inside a `Modal` or `Popover` to create a modal sidebar.
- */
-export const InsideModal: Story = {
-  render: () => (
-    <Modal>
-      <Modal.Trigger asChild>
-        <Button>Open Modal</Button>
-      </Modal.Trigger>
-
-      <Modal.Content className="tw-size-[800px] !tw-flex-row tw-gap-0 tw-overflow-hidden tw-bg-neutral-50 tw-p-0">
-        <Modal.Header title="Story for Sidebar inside Modal" className="tw-sr-only" />
-        <SidebarProvider leftVariant="floating" leftCollapsible="icon">
-          <div className="tw-flex tw-flex-1">
-            <Sidebar side="left">
-              <Sidebar.Header>
-                <Sidebar.Menu>
-                  <Sidebar.MenuItem>
-                    <Sidebar.Trigger>
-                      <Sidebar.MenuButton tooltip="Collapse" icon={['far', 'sidebar']}>
-                        Collapse
-                      </Sidebar.MenuButton>
-                    </Sidebar.Trigger>
-                  </Sidebar.MenuItem>
-                </Sidebar.Menu>
-              </Sidebar.Header>
-            </Sidebar>
-
-            <AppContent>Keboola Content</AppContent>
-          </div>
-        </SidebarProvider>
-      </Modal.Content>
-    </Modal>
-  ),
-};
-
-export const StaticSiteMenu: Story = {
-  render: () => {
-    const HEADER_HEIGHT = '40px'; // Adjust based on your header height
-
-    return (
-      <>
-        <header
-          className="tw-top tw-static tw-flex tw-items-center tw-justify-center tw-border-b tw-border-neutral-150 tw-bg-white"
-          style={{
-            height: HEADER_HEIGHT,
-          }}
-        >
-          Static Site header
-        </header>
-
-        <div className="tw-flex tw-flex-1">
-          <Sidebar
-            style={{
-              top: HEADER_HEIGHT,
-            }}
-          >
-            <Sidebar.Header>
-              <Sidebar.Menu>
-                <Sidebar.MenuItem>
-                  <Sidebar.Trigger>
-                    <Sidebar.MenuButton tooltip="Hello" icon="bolt">
-                      Hello
-                    </Sidebar.MenuButton>
-                  </Sidebar.Trigger>
-                </Sidebar.MenuItem>
-              </Sidebar.Menu>
-            </Sidebar.Header>
-          </Sidebar>
-
-          <AppContent side="both" />
-
-          <Sidebar
-            side="right"
-            style={{
-              top: HEADER_HEIGHT,
-            }}
-          >
-            <Sidebar.Header>
-              <Sidebar.Menu>
-                <Sidebar.MenuItem>
-                  <Sidebar.Trigger side="right">
-                    <Sidebar.MenuButton tooltip="Hello" icon="bolt">
-                      Hello
-                    </Sidebar.MenuButton>
-                  </Sidebar.Trigger>
-                </Sidebar.MenuItem>
-              </Sidebar.Menu>
-            </Sidebar.Header>
-          </Sidebar>
-        </div>
-      </>
-    );
-  },
-};