@postxl/generators 0.2.2

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

@@ -0,0 +1,17 @@
+import { Spinner } from '@components/ui/spinner/spinner'
+import { APP_CONFIG } from '@lib/config'
+
+export function Loader({ label }: Readonly<{ label: string }>) {
+  // disable loader during e2e tests to avoid slowdown due to transitions
+  if (APP_CONFIG.mapBoxDisableTransitions) {
+    return null
+  }
+  return (
+    <div className="flex absolute z-1 left-0 top-0 bottom-0 right-0 bg-secondary/50">
+      <div className="flex items-center justify-center flex-1 flex-col">
+        <Spinner classNames="w-[24px] h-[25px]" />
+        <h3 className="pb-0 pt-3 font-medium text-xl mb-2 text-muted-foreground">{label}</h3>
+      </div>
+    </div>
+  )
+}

package/dist/frontend-core/template/src/components/ui/mark-value-renderer/mark-value-renderer.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { MarkValueRenderer } from './mark-value-renderer'
+import { useRef, useState } from 'react'
+import { expect, userEvent, screen, within } from 'storybook/test'
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@components/ui/command/command'
+
+const meta = {
+  title: 'MarkValueRenderer',
+  component: MarkValueRenderer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof MarkValueRenderer>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor nisl velit, at posuere nisi mollis rutrum. Mauris rutrum blandit metus, non rutrum ante luctus non. Donec magna metus, congue vel sodales ut, auctor a metus.',
+    searchValues: ['Phasellus port', 'etu', 'NotFound'],
+  },
+  render: (args) => (
+    <div className="">
+      <MarkValueRenderer {...args} />
+    </div>
+  ),
+}
+
+export const InteractiveExample: Story = {
+  args: { text: '', searchValues: [] },
+  render: () => {
+    const [open, setOpen] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
+    const allValues = [
+      'Black leather laptop bag',
+      'Laptop backpack with USB charging port',
+      'Stainless steel reusable water bottle',
+      'Glass water bottle with silicone sleeve',
+      'Wireless Bluetooth headphones with noise cancellation',
+      'Over-ear headphones with built-in microphone',
+      'Ergonomic keyboard with backlight',
+      'Compact Bluetooth keyboard for tablet and phone',
+      'Digital camera with interchangeable lens',
+      'Compact travel camera with 4K resolution',
+      'Men`s wristwatch with stainless steel case',
+      'Smartwatch with heart rate monitor and GPS',
+      'Classic umbrella with wooden handle',
+      'Automatic folding umbrella in black',
+      'Recycled paper notebook with leather cover',
+    ]
+    const [selectedValue, setSelectedValue] = useState<string>('')
+    const commandRef = useRef<HTMLDivElement>(null)
+
+    return (
+      <div ref={commandRef}>
+        <Command
+          className="w-[350px] border"
+          onFocus={() => setOpen(true)}
+          onBlur={(e) => {
+            if (commandRef.current && !commandRef.current.contains(e.relatedTarget as Node)) {
+              setOpen(false)
+              setSearchValue('')
+            }
+          }}
+        >
+          <CommandInput
+            placeholder={selectedValue || 'Search...'}
+            variant={open ? 'default' : 'borderless'}
+            inputSize="md"
+            value={searchValue}
+            onValueChange={(val) => {
+              setSearchValue(val)
+            }}
+          />
+          {open && (
+            <CommandList>
+              <CommandEmpty data-testid="no-results">No results found.</CommandEmpty>
+              {allValues.map((value) => (
+                <CommandItem
+                  key={value}
+                  data-testid={`item-${value}`}
+                  onSelect={() => {
+                    setSelectedValue(value)
+                    setOpen(false)
+                    setSearchValue('')
+                  }}
+                >
+                  {searchValue ? <MarkValueRenderer text={value} searchValues={[searchValue]} /> : value}
+                </CommandItem>
+              ))}
+            </CommandList>
+          )}
+        </Command>
+      </div>
+    )
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const commandInput = canvas.getByPlaceholderText('Search...')
+    await userEvent.click(commandInput)
+    await userEvent.type(commandInput, 'leather')
+
+    const item = await canvas.findByTestId('item-Recycled paper notebook with leather cover')
+    // the MarkValueRenderer wraps matches in <mark>, so find that fragment directly
+    const highlighted = item.querySelector('mark')
+    if (!highlighted) throw new Error('Highlighted fragment (<mark>) not found inside the item')
+    const highlightedColor = window.getComputedStyle(highlighted).color
+    const itemColor = window.getComputedStyle(item).color
+    expect(highlightedColor).not.toBe(itemColor)
+  },
+}

package/dist/frontend-core/template/src/components/ui/mark-value-renderer/mark-value-renderer.tsx

@@ -0,0 +1,48 @@
+import { memo } from 'react'
+
+/**
+ * Adds a mark tag around all search hits in the text,
+ * so that the given searchValues are highlighted in the text
+ */
+const MarkValueRenderer = memo(({ text, searchValues }: { text: string; searchValues: string[] | undefined }) => {
+  if (!searchValues || searchValues.length === 0) {
+    return <span>{text}</span>
+  }
+
+  // escape special characters; empty strings are removed using .filter(Boolean)
+  const escapedFilterValues = searchValues
+    .map((value) => {
+      return value.replaceAll(/[|\\{}()[\]^$+*?.]/g, String.raw`\$&`)
+    })
+    .filter(Boolean)
+
+  // no words to highlight
+  if (escapedFilterValues.length === 0) {
+    return <span>{text}</span>
+  }
+
+  // The split method is used to divide the "text" string into parts based on the regular expression.
+  // This results in an array ("parts") where the matching words and the non-matching segments are separated.
+  const regex = new RegExp(`(${escapedFilterValues.join('|')})`, 'gi')
+  const parts = text.split(regex)
+
+  return (
+    <span>
+      {parts.map((part, index) => {
+        // to compare the parts with the words, the parts also have to be escaped
+        const escapedPart = part.replaceAll(/[|\\{}()[\]^$+*?.]/g, String.raw`\$&`)
+        return escapedFilterValues.some((escapedWord) => escapedPart.toLowerCase() === escapedWord.toLowerCase()) ? (
+          <mark key={`${part}_${index}`} className="text-primary font-semibold bg-transparent">
+            {part}
+          </mark>
+        ) : (
+          part
+        )
+      })}
+    </span>
+  )
+})
+
+MarkValueRenderer.displayName = 'MarkCellValueRenderer'
+
+export { MarkValueRenderer }

package/dist/frontend-core/template/src/components/ui/menubar/menu.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from './menubar'
+
+const meta = {
+  title: 'Menubar',
+  component: Menubar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The menubar is a horizontal bar that lists the top-level menus in an application. It provides quick access to a consistent set of commands.',
+      },
+    },
+  },
+} satisfies Meta<typeof Menubar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A comprehensive menubar with File, Edit, View, and Profiles menus showcasing various menu item types including shortcuts, submenus, checkboxes, and radio groups.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center">
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              New Window <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>New Incognito Window</MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Share</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Email link</MenubarItem>
+                <MenubarItem>Messages</MenubarItem>
+                <MenubarItem>Notes</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarSeparator />
+            <MenubarItem>
+              Print... <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Find</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Search the web</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Find...</MenubarItem>
+                <MenubarItem>Find Next</MenubarItem>
+                <MenubarItem>Find Previous</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarSeparator />
+            <MenubarItem>Cut</MenubarItem>
+            <MenubarItem>Copy</MenubarItem>
+            <MenubarItem>Paste</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+            <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
+            <MenubarSeparator />
+            <MenubarItem inset>
+              Reload <MenubarShortcut>⌘R</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled inset>
+              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Hide Sidebar</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Profiles</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value="benoit">
+              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+              <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+            </MenubarRadioGroup>
+            <MenubarSeparator />
+            <MenubarItem inset>Edit...</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Add Profile...</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    </div>
+  ),
+}

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

@@ -0,0 +1,208 @@
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn('flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm', className)}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+))
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />
+}
+MenubarShortcut.displayname = 'MenubarShortcut'
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}