@licklist/design 0.78.5-dev.59 → 0.78.5-dev.60

package/src/index.ts

@@ -29,7 +29,8 @@ export * from './report'
 export * from './venue-map-sets'
 export * from './affiliate'
 export * from './typeahead-helper'
-export * from './zone'
+export { ZoneForm } from './zone/form'
+export type { ZoneFormProps } from './zone/form'
 export * from './resource'
 export * from './virtualized'
 export * from './customers'
@@ -49,4 +50,5 @@ export * from './UnderMaintenance'
 export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
 export * from './v2/pages/Settings'
+export * from './v2/pages/ZonesResources'
 export * from './v2/components'

package/src/v2/components/ActionMenu/ActionMenu.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ActionMenu } from './ActionMenu'
+
+export default {
+  title: 'v2/Components/ActionMenu',
+  component: ActionMenu,
+} as Meta<typeof ActionMenu>
+
+type Story = StoryObj<typeof ActionMenu>
+
+const defaultItems = [
+  { label: 'Edit', onClick: () => console.log('Edit') },
+  { label: 'Duplicate', onClick: () => console.log('Duplicate') },
+  { label: 'Delete', onClick: () => console.log('Delete'), variant: 'danger' as const },
+]
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const OpenDown: Story = {
+  args: {
+    items: defaultItems,
+    direction: 'down',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const WithCustomIconColour: Story = {
+  args: {
+    items: defaultItems,
+    iconColour: '#E0423A',
+    direction: 'down',
+  },
+}
+
+export const SingleItem: Story = {
+  args: {
+    items: [{ label: 'Edit', onClick: () => console.log('Edit') }],
+    direction: 'down',
+  },
+}

package/src/v2/components/ActionMenu/ActionMenu.tsx

@@ -112,4 +112,4 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', i
       )}
     </div>
   )
-}
+}

package/src/v2/components/Checkbox/Checkbox.scss

@@ -13,7 +13,7 @@
 
   &__wrapper {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 11px;
     cursor: pointer;
     user-select: none;

package/src/v2/components/IconButton/IconButton.scss

@@ -0,0 +1,75 @@
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+  padding: 0 16px 0 12px;
+  height: 34px;
+  background: transparent;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+
+  &:hover {
+    background: var(--surface-secondary);
+    color: var(--label-primary);
+
+    .icon-button__icon {
+      color: var(--label-primary);
+    }
+
+    .icon-button__label {
+      color: var(--label-primary);
+    }
+  }
+
+  &:active {
+    background: var(--surface-tertiary);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    color: var(--label-primary);
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--label-primary);
+  }
+}
+
+// Icon-only variant (no label)
+.icon-button--icon-only {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--label-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--surface-primary, #fff);
+  }
+
+  &:active {
+    background: var(--surface-tertiary);
+  }
+}
+
+// Danger variant
+.icon-button--danger {
+  color: var(--label-danger, #cc3c35);
+
+  &:hover {
+    background: var(--surface-primary, #fff);
+  }
+}

package/src/v2/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { IconButton } from './IconButton'
+
+export default {
+  title: 'v2/Components/IconButton',
+  component: IconButton,
+} as Meta<typeof IconButton>
+
+type Story = StoryObj<typeof IconButton>
+
+export const BackWithLabel: Story = {
+  args: {
+    label: 'Go Back',
+    icon: 'back',
+  },
+}
+
+export const AddWithLabel: Story = {
+  args: {
+    label: 'Add Item',
+    icon: 'add',
+  },
+}
+
+export const DeleteWithLabel: Story = {
+  args: {
+    label: 'Remove Item',
+    icon: 'delete',
+    variant: 'danger',
+  },
+}
+
+export const IconOnlyBack: Story = {
+  args: {
+    icon: 'back',
+  },
+}
+
+export const IconOnlyAdd: Story = {
+  args: {
+    icon: 'add',
+  },
+}
+
+export const IconOnlyDelete: Story = {
+  args: {
+    icon: 'delete',
+    variant: 'danger',
+  },
+}

package/src/v2/components/IconButton/IconButton.tsx

@@ -0,0 +1,50 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react'
+import { ArrowLeftIcon, PlusIcon, DeleteIcon } from '../../icons'
+import './IconButton.scss'
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string
+  icon?: 'back' | 'add' | 'delete' | ReactNode
+  variant?: 'default' | 'danger'
+}
+
+export function IconButton({
+  label,
+  icon = 'back',
+  variant = 'default',
+  className = '',
+  ...props
+}: IconButtonProps) {
+  const isIconOnly = !label
+  const classes = [
+    isIconOnly ? 'icon-button--icon-only' : 'icon-button',
+    variant === 'danger' ? 'icon-button--danger' : '',
+    className,
+  ].filter(Boolean).join(' ')
+
+  const iconSize = isIconOnly ? 32 : 16
+
+  const renderIcon = () => {
+    if (icon === 'back') return ArrowLeftIcon({ width: iconSize, height: iconSize })
+    if (icon === 'add') return PlusIcon({ width: iconSize, height: iconSize })
+    if (icon === 'delete') return DeleteIcon({ width: iconSize, height: iconSize })
+    return icon
+  }
+
+  if (isIconOnly) {
+    return (
+      <button type="button" className={classes} {...props}>
+        {renderIcon()}
+      </button>
+    )
+  }
+
+  return (
+    <button className={classes} {...props}>
+      <span className="icon-button__icon">
+        {renderIcon()}
+      </span>
+      <span className="icon-button__label">{label}</span>
+    </button>
+  )
+}

package/src/v2/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps } from './IconButton'

package/src/v2/components/NewInput/NewInput.tsx

@@ -94,7 +94,8 @@ export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewIn
       <div className={containerClasses}>
         {(label || optional) && (
           <label className="new-form-input__label">
-            {label} {optional && <span className="new-form-input__label-optional">(Optional)</span>}
+            <span>{label}</span>
+            {optional && <span className="new-form-input__label-optional">(optional)</span>}
           </label>
         )}
 

package/src/v2/components/NewPageHeader/NewPageHeader.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { NewPageHeader } from './NewPageHeader'
+import { Button, ButtonText } from '../Button'
 
 const meta: Meta<typeof NewPageHeader> = {
   title: 'V2/Components/NewPageHeader',
@@ -42,3 +43,30 @@ export const CustomCancelLabel: Story = {
     onCancel: () => alert('Go Back clicked'),
   },
 }
+
+export const WithAction: Story = {
+  args: {
+    title: 'Zones & Resources',
+    renderRight: () => (
+      <Button variant="primary" onClick={() => alert('Add Zone clicked')}>
+        <ButtonText color="white">+ Add Zone</ButtonText>
+      </Button>
+    ),
+  },
+}
+
+export const WithMultipleActions: Story = {
+  args: {
+    title: 'Zones & Resources',
+    renderRight: () => (
+      <>
+        <Button variant="secondary" onClick={() => alert('Export clicked')}>
+          <ButtonText color="action">Export</ButtonText>
+        </Button>
+        <Button variant="primary" onClick={() => alert('Add Zone clicked')}>
+          <ButtonText color="white">+ Add Zone</ButtonText>
+        </Button>
+      </>
+    ),
+  },
+}

package/src/v2/components/ZoneCard/AddResourceButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconButton } from '../IconButton'
+
+export interface AddResourceButtonProps {
+  label?: string
+  onClick: () => void
+  className?: string
+}
+
+export const AddResourceButton: React.FC<AddResourceButtonProps> = ({
+  label = 'Add Resource',
+  onClick,
+  className = '',
+}) => {
+  return (
+    <div className={`zone-card__add-resource-wrapper ${className}`}>
+      <IconButton label={label} icon='add' onClick={onClick} />
+    </div>
+  )
+}

package/src/v2/components/ZoneCard/ResourceRow.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { ActionMenu, ActionMenuItem } from '../ActionMenu'
+import { GripVerticalIcon } from '../../icons'
+import { DragHandleProps } from './ZoneContainer'
+import './ZoneCard.scss'
+
+export interface ResourceRowProps {
+  name: string
+  quantity: number
+  capacity: number
+  menuItems?: ActionMenuItem[]
+  draggable?: boolean
+  dragHandleProps?: DragHandleProps
+  onClick?: () => void
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const ResourceRow = React.forwardRef<HTMLDivElement, ResourceRowProps>(({
+  name,
+  quantity,
+  capacity,
+  menuItems = [],
+  draggable = true,
+  dragHandleProps,
+  onClick,
+  className = '',
+  style,
+}, ref) => {
+  const classes = [
+    'zone-card__resource',
+    onClick ? 'zone-card__resource--clickable' : '',
+    className,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <div ref={ref} className={classes} style={style} onClick={onClick}>
+      {draggable && (
+        <div
+          className="zone-card__drag-handle zone-card__drag-handle--resource"
+          {...dragHandleProps}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {GripVerticalIcon({ width: 14, height: 14 })}
+        </div>
+      )}
+      <span className="zone-card__resource-name">{name}</span>
+      <div className="zone-card__resource-stats">
+        <span className="zone-card__resource-stat">Qty: {quantity}</span>
+        <span className="zone-card__resource-stat">Cap: {capacity}</span>
+        <span className="zone-card__resource-stat zone-card__resource-stat--total">
+          Total: {quantity * capacity}
+        </span>
+      </div>
+      {menuItems.length > 0 && (
+        <div className="zone-card__resource-actions" onClick={(e) => e.stopPropagation()}>
+          <ActionMenu items={menuItems} />
+        </div>
+      )}
+    </div>
+  )
+})
+
+ResourceRow.displayName = 'ResourceRow'

package/src/v2/components/ZoneCard/ZoneCard.scss

@@ -0,0 +1,142 @@
+.zone-card {
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  overflow: visible;
+  background: var(--surface-primary);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: var(--surface-secondary);
+  }
+
+  &__drag-handle {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    border-radius: 4px;
+    cursor: grab;
+    color: var(--label-secondary);
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: var(--label-primary);
+      background: var(--surface-primary);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &--resource {
+      color: var(--label-secondary);
+    }
+  }
+
+  &__name {
+    flex: 1;
+    min-width: 0;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--label-primary);
+  }
+
+  &__header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+
+  &__total {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+    color: var(--label-secondary);
+    white-space: nowrap;
+  }
+
+  // Resource rows
+  &__resource {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 16px 10px 32px;
+    border-top: 1px solid var(--border-primary);
+    transition: background 0.2s ease;
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--surface-secondary);
+      }
+    }
+  }
+
+  &__resource-name {
+    flex: 1;
+    min-width: 0;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 20px;
+    color: var(--label-primary);
+  }
+
+  &__resource-stats {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    flex-shrink: 0;
+  }
+
+  &__resource-stat {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+    color: var(--label-secondary);
+    white-space: nowrap;
+    min-width: 56px;
+
+    &--total {
+      min-width: 56px;
+      text-align: right;
+    }
+  }
+
+  &__resource-actions {
+    flex-shrink: 0;
+    width: 32px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  // Add resource button wrapper
+  &__add-resource-wrapper {
+    padding: 12px 16px;
+    border-top: 1px solid var(--border-primary);
+  }
+}
+
+@media (max-width: 768px) {
+  .zone-card {
+    &__resource {
+      padding-left: 16px;
+    }
+
+    &__resource-stats {
+      gap: 16px;
+    }
+
+    &__resource-stat {
+      min-width: auto;
+    }
+  }
+}

package/src/v2/components/ZoneCard/ZoneCard.stories.tsx

@@ -0,0 +1,140 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ZoneCard } from './ZoneCard'
+import { ZoneContainer } from './ZoneContainer'
+import { ZoneHeader } from './ZoneHeader'
+import { ResourceRow } from './ResourceRow'
+import { AddResourceButton } from './AddResourceButton'
+
+export default {
+  title: 'v2/Components/ZoneCard',
+  component: ZoneCard,
+  parameters: {
+    layout: 'padded',
+  },
+} as Meta<typeof ZoneCard>
+
+type Story = StoryObj<typeof ZoneCard>
+
+const zoneMenuItems = [
+  { label: 'Edit Zone', onClick: () => alert('Edit Zone') },
+  { label: 'Delete Zone', onClick: () => alert('Delete Zone'), variant: 'danger' as const },
+]
+
+const resourceMenuItems = [
+  { label: 'Edit Resource', onClick: () => alert('Edit Resource') },
+  { label: 'Delete Resource', onClick: () => alert('Delete Resource'), variant: 'danger' as const },
+]
+
+// Composed ZoneCard (all-in-one)
+export const Default: Story = {
+  args: {
+    name: 'Bowling',
+    status: 'active',
+    totalCapacity: 2,
+    menuItems: zoneMenuItems,
+    onAddResource: () => alert('Add Resource'),
+    resources: [
+      { id: '1', name: 'Table', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+      { id: '2', name: 'Lane', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+    ],
+  },
+}
+
+export const DisabledZone: Story = {
+  args: {
+    name: 'VIP Lounge',
+    status: 'disabled',
+    totalCapacity: 0,
+    menuItems: zoneMenuItems,
+    onAddResource: () => alert('Add Resource'),
+    resources: [],
+  },
+}
+
+// Individual components composed manually
+export const ComposedManually: Story = {
+  render: () => (
+    <ZoneContainer>
+      <ZoneHeader
+        name="Bowling"
+        status="active"
+        totalCapacity={2}
+        menuItems={zoneMenuItems}
+      />
+      <ResourceRow
+        name="Table"
+        quantity={1}
+        capacity={1}
+        menuItems={resourceMenuItems}
+        onClick={() => alert('Edit Table')}
+      />
+      <ResourceRow
+        name="Lane"
+        quantity={1}
+        capacity={1}
+        menuItems={resourceMenuItems}
+        onClick={() => alert('Edit Lane')}
+      />
+      <AddResourceButton onClick={() => alert('Add Resource')} />
+    </ZoneContainer>
+  ),
+}
+
+// Standalone ZoneHeader
+export const StandaloneHeader: Story = {
+  render: () => (
+    <ZoneContainer>
+      <ZoneHeader
+        name="Main Floor"
+        status="active"
+        totalCapacity={50}
+        menuItems={zoneMenuItems}
+      />
+    </ZoneContainer>
+  ),
+}
+
+// Standalone ResourceRow
+export const StandaloneResource: Story = {
+  render: () => (
+    <ZoneContainer>
+      <ResourceRow
+        name="Table"
+        quantity={10}
+        capacity={4}
+        menuItems={resourceMenuItems}
+        onClick={() => alert('Edit Table')}
+      />
+    </ZoneContainer>
+  ),
+}
+
+// Multiple zones
+export const MultipleZones: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <ZoneCard
+        name="Bowling"
+        status="active"
+        totalCapacity={2}
+        menuItems={zoneMenuItems}
+        onAddResource={() => alert('Add Resource')}
+        resources={[
+          { id: '1', name: 'Table', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+          { id: '2', name: 'Lane', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+        ]}
+      />
+      <ZoneCard
+        name="VIP Lounge"
+        status="active"
+        totalCapacity={20}
+        menuItems={zoneMenuItems}
+        onAddResource={() => alert('Add Resource')}
+        resources={[
+          { id: '3', name: 'Sofa', quantity: 4, capacity: 5, menuItems: resourceMenuItems },
+        ]}
+      />
+    </div>
+  ),
+}