@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223

package/src/stories/ActionsMenu.stories.tsx

@@ -0,0 +1,256 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { fn } from 'storybook/test';
+import {
+  ArrowRightUpIcon,
+  Copy01Icon,
+  Download01Icon,
+  EyeIcon,
+  Link01Icon,
+  PencilIcon,
+  Settings01Icon,
+  ShareIcon,
+  StarIcon,
+  TrashBlankIcon,
+} from '../components/icons-v2-generated';
+import {
+  ActionsMenu,
+  ActionsMenuDropdown,
+  type ActionsMenuGroup,
+} from '../components/ui/actions-menu';
+
+const meta = {
+  title: 'UI/ActionsMenu',
+  component: ActionsMenu,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Grouped action menu rendered as a flat panel. Supports plain items, icons, checkboxes, submenus, separators, destructive (danger) rows, navigation links, and an optional secondary icon action on the right of a row. Use `ActionsMenu` to render the panel inline, or `ActionsMenuDropdown` to attach it to a trigger button (built on Radix DropdownMenu).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    groups: {
+      description: 'Array of groups, each holding an array of menu items',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the menu panel',
+    },
+    onItemClick: {
+      description: 'Fires when any item is activated',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: '4rem',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          minHeight: '400px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ActionsMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A simple single-group menu with icons.
+ */
+export const Default: Story = {
+  args: {
+    groups: [
+      {
+        items: [
+          { id: 'edit', label: 'Edit', icon: <PencilIcon />, onClick: fn() },
+          { id: 'duplicate', label: 'Duplicate', icon: <Copy01Icon />, onClick: fn() },
+          { id: 'share', label: 'Share', icon: <ShareIcon />, onClick: fn() },
+        ],
+      },
+    ],
+  },
+};
+
+/**
+ * Multiple groups separated by a divider, with a destructive row in the last group.
+ */
+export const GroupedWithDanger: Story = {
+  args: {
+    groups: [
+      {
+        id: 'primary',
+        separator: true,
+        items: [
+          { id: 'view', label: 'View details', icon: <EyeIcon />, onClick: fn() },
+          { id: 'edit', label: 'Edit', icon: <PencilIcon />, onClick: fn() },
+          { id: 'download', label: 'Download', icon: <Download01Icon />, onClick: fn() },
+        ],
+      },
+      {
+        id: 'destructive',
+        items: [
+          {
+            id: 'delete',
+            label: 'Delete',
+            icon: <TrashBlankIcon />,
+            danger: true,
+            onClick: fn(),
+          },
+        ],
+      },
+    ],
+  },
+};
+
+/**
+ * Checkbox items keep the menu open on click and reflect a `checked` state.
+ */
+export const WithCheckboxes: Story = {
+  args: {
+    groups: [
+      {
+        items: [
+          {
+            id: 'starred',
+            label: 'Starred',
+            type: 'checkbox',
+            checked: true,
+            icon: <StarIcon />,
+            onClick: fn(),
+          },
+          {
+            id: 'archived',
+            label: 'Archived',
+            type: 'checkbox',
+            checked: false,
+            onClick: fn(),
+          },
+        ],
+      },
+    ],
+  },
+};
+
+/**
+ * A submenu expands a nested set of items on hover/focus. Submenus rely on the
+ * Radix DropdownMenu root, so they must be rendered through `ActionsMenuDropdown`
+ * (the inline `ActionsMenu` panel has no menu context).
+ */
+export const WithSubmenu: StoryObj<typeof ActionsMenuDropdown> = {
+  render: (args) => <ActionsMenuDropdown {...args} />,
+  args: {
+    groups: [
+      {
+        items: [
+          { id: 'edit', label: 'Edit', icon: <PencilIcon />, onClick: fn() },
+          {
+            id: 'share',
+            label: 'Share',
+            type: 'submenu',
+            icon: <ShareIcon />,
+            submenu: [
+              { id: 'copy-link', label: 'Copy link', icon: <Link01Icon />, onClick: fn() },
+              { id: 'share-via', label: 'Share via…', icon: <ShareIcon />, onClick: fn() },
+            ],
+          },
+          { id: 'settings', label: 'Settings', icon: <Settings01Icon />, onClick: fn() },
+        ],
+      },
+    ],
+    onItemClick: fn(),
+  },
+};
+
+/**
+ * Disabled rows are non-interactive and dimmed.
+ */
+export const WithDisabledItem: Story = {
+  args: {
+    groups: [
+      {
+        items: [
+          { id: 'edit', label: 'Edit', icon: <PencilIcon />, onClick: fn() },
+          {
+            id: 'duplicate',
+            label: 'Duplicate (unavailable)',
+            icon: <Copy01Icon />,
+            disabled: true,
+            onClick: fn(),
+          },
+          { id: 'share', label: 'Share', icon: <ShareIcon />, onClick: fn() },
+        ],
+      },
+    ],
+  },
+};
+
+/**
+ * A row can carry a secondary icon action — a 40px button on the right with a
+ * divider that is independently clickable (e.g. "open in new tab").
+ */
+export const WithSecondaryAction: Story = {
+  args: {
+    groups: [
+      {
+        items: [
+          {
+            id: 'doc',
+            label: 'Open document',
+            icon: <EyeIcon />,
+            onClick: fn(),
+            iconAction: {
+              icon: <ArrowRightUpIcon className="w-5 h-5 text-ods-text-secondary" />,
+              'aria-label': 'Open in new tab',
+              href: 'https://example.com',
+              openInNewTab: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const dropdownGroups: ActionsMenuGroup[] = [
+  {
+    id: 'primary',
+    separator: true,
+    items: [
+      { id: 'view', label: 'View details', icon: <EyeIcon />, onClick: fn() },
+      { id: 'edit', label: 'Edit', icon: <PencilIcon />, onClick: fn() },
+      { id: 'duplicate', label: 'Duplicate', icon: <Copy01Icon />, onClick: fn() },
+    ],
+  },
+  {
+    id: 'destructive',
+    items: [
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: <TrashBlankIcon />,
+        danger: true,
+        onClick: fn(),
+      },
+    ],
+  },
+];
+
+/**
+ * `ActionsMenuDropdown` attaches the menu to a default ellipsis trigger button.
+ */
+export const Dropdown: StoryObj<typeof ActionsMenuDropdown> = {
+  render: (args) => <ActionsMenuDropdown {...args} />,
+  args: {
+    groups: dropdownGroups,
+    onItemClick: fn(),
+  },
+};

package/src/stories/AppLayoutSidebar.stories.tsx

@@ -49,6 +49,12 @@ sidebar is persistent: clicks on the header/sidebar/overlay do not close it
     },
   },
   tags: ['autodocs'],
+  args: {
+    children: null,
+    sidebarConfig: { items: navigationItems, onNavigate: fn(), onToggleMinimized: fn() },
+    headerProps: {},
+    mobileBurgerMenuProps: {},
+  },
 } satisfies Meta<typeof AppLayout>
 
 export default meta

package/src/stories/Board.stories.tsx

@@ -102,7 +102,7 @@ export const Default: Story = {
         <Board
           columns={columns}
           onChange={c => setColumns(prev => applyChange(prev, c))}
-          onTicketClick={id => console.log('click', id)}
+          getTicketHref={id => `#${id}`}
           onAddTicket={id => console.log('add to', id)}
         />
       </div>