@postxl/generators 1.1.1 → 1.2.1

package/dist/frontend-core/template/src/components/ui/command/command.tsx

@@ -1,165 +0,0 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import { Command as CommandPrimitive } from 'cmdk'
-import React from 'react'
-
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@components/ui/dialog/dialog'
-import { cn } from '@lib/utils'
-
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = 'Command Palette',
-  description = 'Search for a command to run...',
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const commandInputVariants = cva('', {
-  variants: {
-    variant: { default: '', borderless: 'border-none' },
-    inputSize: {
-      sm: 'h-7.5 py-2',
-      md: 'h-9 py-3',
-      lg: 'h-12 py-4',
-    },
-  },
-  defaultVariants: { variant: 'default', inputSize: 'md' },
-})
-
-export type CommandInputProps = Omit<React.ComponentProps<typeof CommandPrimitive.Input>, 'size'> &
-  VariantProps<typeof commandInputVariants> & {
-    wrapperClassName?: string
-  }
-
-export const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
-  ({ className, wrapperClassName, variant, inputSize, ...props }, ref) => {
-    return (
-      <div
-        data-slot="command-input-wrapper"
-        className={cn(
-          'flex items-center gap-2 border-b px-3',
-          commandInputVariants({ variant, inputSize }),
-          wrapperClassName,
-        )}
-      >
-        <MagnifyingGlassIcon className="size-4 shrink-0 opacity-50" />
-        <CommandPrimitive.Input
-          ref={ref}
-          data-slot="command-input"
-          className={cn(
-            'placeholder:text-muted-foreground flex w-full rounded bg-transparent text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-            className,
-          )}
-          {...props}
-        />
-      </div>
-    )
-  },
-)
-CommandInput.displayName = 'CommandInput'
-
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
-}
-
-function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn('bg-border -mx-1 h-px', className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  commandInputVariants,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.stories.tsx

@@ -1,160 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import {
-  CommandPalette,
-  CommandPaletteEmpty,
-  CommandPaletteDialog,
-  CommandPaletteGroup,
-  CommandPaletteInput,
-  CommandPaletteItem,
-  CommandPaletteList,
-  CommandPaletteSeparator,
-  CommandPaletteShortcut,
-} from './command-palette'
-import { CalendarIcon, EnvelopeClosedIcon, FaceIcon, GearIcon, PersonIcon, RocketIcon } from '@radix-ui/react-icons'
-import { useEffect, useState } from 'react'
-
-const meta = {
-  title: 'Command Palette',
-  component: CommandPalette,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'The Command Palette component is used to display a list of commands or actions that can be triggered by the user.',
-      },
-    },
-  },
-} satisfies Meta<typeof CommandPalette>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A basic command palette with grouped items and keyboard shortcuts.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center">
-      <CommandPalette className="rounded-lg border shadow-md md:min-w-[450px]">
-        <CommandPaletteInput placeholder="Type a command or search..." />
-        <CommandPaletteList>
-          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
-          <CommandPaletteGroup heading="Suggestions">
-            <CommandPaletteItem>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <FaceIcon className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem disabled>
-              <RocketIcon className="mr-2 h-4 w-4" />
-              <span>Launch</span>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-          <CommandPaletteSeparator />
-          <CommandPaletteGroup heading="Settings">
-            <CommandPaletteItem>
-              <PersonIcon className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-              <span>Mail</span>
-              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <GearIcon className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-        </CommandPaletteList>
-      </CommandPalette>
-    </div>
-  ),
-}
-
-const CommandPaletteDialogExample = () => {
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [])
-
-  return (
-    <div className="flex items-center justify-center">
-      <p className="text-sm text-muted-foreground">
-        Press{' '}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-          <span className="text-xs">⌘</span>J
-        </kbd>
-      </p>
-      <CommandPaletteDialog open={open} onOpenChange={setOpen}>
-        <CommandPaletteInput placeholder="Type a command or search..." />
-        <CommandPaletteList>
-          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
-          <CommandPaletteGroup heading="Suggestions">
-            <CommandPaletteItem>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <FaceIcon className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <RocketIcon className="mr-2 h-4 w-4" />
-              <span>Launch</span>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-          <CommandPaletteSeparator />
-          <CommandPaletteGroup heading="Settings">
-            <CommandPaletteItem>
-              <PersonIcon className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-              <span>Mail</span>
-              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <GearIcon className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-        </CommandPaletteList>
-      </CommandPaletteDialog>
-    </div>
-  )
-}
-
-export const Dialog: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Command palette displayed in a dialog that can be opened with ⌘J keyboard shortcut.',
-      },
-    },
-  },
-  render: () => <CommandPaletteDialogExample />,
-}

package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.tsx

@@ -1,134 +0,0 @@
-import { type DialogProps } from '@radix-ui/react-dialog'
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-
-import { Command as CommandPalettePrimitive } from 'cmdk'
-import * as React from 'react'
-
-import { Dialog, DialogContent } from '@components/ui/dialog/dialog'
-import { cn } from '@lib/utils'
-
-const CommandPalette = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive
-    ref={ref}
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-CommandPalette.displayName = CommandPalettePrimitive.displayName
-
-type CommandPaletteDialogProps = DialogProps
-
-const CommandPaletteDialog = ({ children, ...props }: CommandPaletteDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <CommandPalette className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </CommandPalette>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandPaletteInput = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Input>
->(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPalettePrimitive.Input
-      ref={ref}
-      className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandPaletteInput.displayName = CommandPalettePrimitive.Input.displayName
-
-const CommandPaletteList = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.List
-    ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-    {...props}
-  />
-))
-
-CommandPaletteList.displayName = CommandPalettePrimitive.List.displayName
-
-const CommandPaletteEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Empty>
->((props, ref) => <CommandPalettePrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />)
-
-CommandPaletteEmpty.displayName = CommandPalettePrimitive.Empty.displayName
-
-const CommandPaletteGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Group
-    ref={ref}
-    className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandPaletteGroup.displayName = CommandPalettePrimitive.Group.displayName
-
-const CommandPaletteSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
-))
-CommandPaletteSeparator.displayName = CommandPalettePrimitive.Separator.displayName
-
-const CommandPaletteItem = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandPaletteItem.displayName = CommandPalettePrimitive.Item.displayName
-
-const CommandPaletteShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />
-}
-CommandPaletteShortcut.displayName = 'CommandPaletteShortcut'
-
-export {
-  CommandPalette,
-  CommandPaletteDialog,
-  CommandPaletteInput,
-  CommandPaletteList,
-  CommandPaletteEmpty,
-  CommandPaletteGroup,
-  CommandPaletteItem,
-  CommandPaletteShortcut,
-  CommandPaletteSeparator,
-}

package/dist/frontend-core/template/src/components/ui/content-frame/content-frame.stories.tsx

@@ -1,198 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
-import { cn } from '@lib/utils'
-
-import { Button } from '@components/ui/button/button'
-
-import { ContentFrame } from './content-frame'
-import { expect, userEvent, screen } from 'storybook/test'
-import { useState } from 'react'
-import { Modal } from '@components/ui/modal/modal'
-import { Badge } from '@components/ui/badge/badge'
-
-const meta = {
-  title: 'ContentFrame',
-  component: ContentFrame,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    title: {
-      control: 'text',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'inverted'],
-    },
-  },
-} satisfies Meta<typeof ContentFrame>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    title: 'Title',
-    variant: 'default',
-  },
-  render: (args) => (
-    <div className="w-[350px]">
-      <ContentFrame {...args}>
-        <div className="p-2">Content inside the frame</div>
-      </ContentFrame>
-    </div>
-  ),
-  play: async () => {
-    expect(screen.getByText('Title')).toBeVisible()
-    expect(screen.getByText('Content inside the frame')).toBeVisible()
-    const frame = screen.getByText('Content inside the frame').closest('div')
-  },
-}
-
-export const Variants: Story = {
-  args: { title: '' },
-  render: () => (
-    <div className="flex gap-2">
-      <div className="w-[200px]">
-        <ContentFrame title="default" variant="default">
-          <div className="p-2">Content</div>
-        </ContentFrame>
-      </div>
-      <div className="w-[200px]">
-        <ContentFrame title="inverted" variant="inverted">
-          <div className="p-2">Content</div>
-        </ContentFrame>
-      </div>
-    </div>
-  ),
-}
-
-export const WithTitleLink: Story = {
-  args: {
-    title: '',
-    titleLink: (
-      <a href="https://example.com/" target="_blank" rel="noopener noreferrer">
-        <h2 className="text-xl overflow-hidden text-ellipsis whitespace-nowrap">Title with Link</h2>
-      </a>
-    ),
-  },
-  render: (args) => (
-    <div className="w-[350px]">
-      <ContentFrame {...args}>
-        <div className="p-2">Content inside the frame</div>
-      </ContentFrame>
-    </div>
-  ),
-  play: async () => {
-    // Check that the title link exists and is correct
-    const link = screen.getByRole('link', { name: /title with link/i })
-    expect(link).toHaveAttribute('href', 'https://example.com/')
-  },
-}
-
-export const CollapsibleAndExpandable: Story = {
-  args: { title: '' },
-  render: () => {
-    const dummyText =
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum laoreet erat ac sodales. Pellentesque nec nunc in ipsum tincidunt congue sit amet in augue. Sed interdum consequat arcu, ac tempor nisl eleifend sed. Mauris gravida ipsum orci, sed vestibulum nisl commodo in. Aliquam ut dolor dui. Donec fermentum viverra faucibus. In aliquet erat et quam ornare, et accumsan magna ornare. Suspendisse potenti. Etiam a elit dui. Mauris et lectus vel metus lobortis luctus. Vestibulum elementum sit amet augue vel rutrum. Aenean sem turpis, viverra hendrerit consequat eget, vulputate sed nunc. Pellentesque sollicitudin diam nunc, vel pretium massa mattis at. Curabitur fringilla convallis mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum laoreet erat ac sodales. Pellentesque nec nunc in ipsum tincidunt congue sit amet in augue. Sed interdum consequat arcu, ac tempor nisl eleifend sed. Mauris gravida ipsum orci, sed vestibulum nisl commodo in. Aliquam ut dolor dui. Donec fermentum viverra faucibus. In aliquet erat et quam ornare, et accumsan magna ornare. Suspendisse potenti. Etiam a elit dui. Mauris et lectus vel metus lobortis luctus. Vestibulum elementum sit amet augue vel rutrum. Aenean sem turpis, viverra hendrerit consequat eget, vulputate sed nunc. Pellentesque sollicitudin diam nunc, vel pretium massa mattis at. Curabitur fringilla convallis mollis. '
-
-    const [isCollapsed, setIsCollapsed] = useState(false)
-    const [isExpanded, setIsExpanded] = useState(false)
-    return (
-      <>
-        <div className="w-[350px]">
-          <div
-            className={cn(
-              'relative h-[250px]',
-              isCollapsed ? 'min-w-[60px] max-w-[60px]' : 'min-w-[350px] max-w-[350px]',
-            )}
-          >
-            <ContentFrame
-              title="Collapsible and Expandable"
-              variant="inverted"
-              collapsed={isCollapsed}
-              onExpand={() => setIsExpanded(true)}
-            >
-              <div className="p-2">{dummyText}</div>
-            </ContentFrame>
-            <Button
-              title={isCollapsed ? 'Show normal' : 'Collapse'}
-              variant="neutral"
-              size="iconSm"
-              className="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-1/4 z-10 rounded-full bg-muted-foreground text-background"
-              onClick={() => setIsCollapsed(!isCollapsed)}
-            >
-              {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-            </Button>
-          </div>
-        </div>
-        <Modal isOpen={isExpanded} setIsOpen={setIsExpanded} title="Collapsible and Expandable">
-          <div className="p-2">{dummyText}</div>
-        </Modal>
-      </>
-    )
-  },
-  play: async () => {
-    // Collapse the frame
-    const collapseBtn = screen.getByRole('button', { name: /collapse/i })
-    await userEvent.click(collapseBtn)
-    // After collapse, check that the ChevronRightIcon is rendered (collapsed state)
-    expect(screen.getByRole('button', { name: /show normal/i })).toBeVisible()
-    const expandModal = screen.getByText('Collapsible and Expandable')
-    expect(expandModal).toBeVisible()
-  },
-}
-
-export const WithControlsAndIndicators: Story = {
-  args: {
-    title: '',
-  },
-  render: (args) => {
-    const [newsUnread, setNewsUnread] = useState(true)
-    return (
-      <div className="w-[350px]">
-        <ContentFrame
-          {...args}
-          title={newsUnread ? 'Unread News' : 'No unread News'}
-          controls={[
-            <Button key="c1" variant="outline" size="sm" onClick={() => setNewsUnread(!newsUnread)}>
-              {newsUnread ? 'Read all' : 'Unread all'}
-            </Button>,
-          ]}
-          indicators={
-            newsUnread
-              ? [
-                  <Badge
-                    data-testid="pill-label"
-                    key="i1"
-                    className="self-center bg-(--ring) rounded-full h-5 text-background font-bold px-2"
-                  >
-                    3
-                  </Badge>,
-                ]
-              : []
-          }
-        >
-          <div className="p-2">
-            {newsUnread ? (
-              <>
-                News 1<br />
-                News 2<br />
-                News 3
-              </>
-            ) : (
-              'No new content'
-            )}
-          </div>
-        </ContentFrame>
-      </div>
-    )
-  },
-  play: async () => {
-    // Check for control button
-    expect(screen.getByRole('button', { name: /read all|unread all/i })).toBeVisible()
-    // Check for indicator badge
-    expect(screen.getByTestId('pill-label')).toBeVisible()
-  },
-}