@licklist/design 0.78.35 → 0.78.36

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

@@ -0,0 +1,226 @@
+.zone-card {
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  overflow: visible;
+  background: var(--surface-primary);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px 16px;
+    background: var(--surface-secondary);
+  }
+
+  &__drag-handle {
+    display: flex;
+    align-items: center;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: grab;
+    color: var(--label-tertiary, var(--label-secondary));
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+
+    &:hover {
+      color: var(--label-secondary);
+      background: var(--surface-primary);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &--resource {
+      color: var(--label-tertiary, var(--label-secondary));
+    }
+  }
+
+  // Mobile reorder arrows (replaces drag handles)
+  &__reorder-arrows {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex-shrink: 0;
+
+    &--resource {
+      margin-right: 0;
+    }
+  }
+
+  &__arrow-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--label-tertiary, var(--label-secondary));
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+
+    &:hover:not(:disabled) {
+      color: var(--label-secondary);
+      background: var(--surface-primary);
+    }
+
+    &:disabled {
+      opacity: 0.25;
+      pointer-events: none;
+    }
+  }
+
+  &__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-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    gap: 2px;
+
+    .zone-card__total {
+      text-align: left;
+      min-width: auto;
+    }
+  }
+
+  &__header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    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;
+    min-width: 72px;
+    text-align: right;
+  }
+
+  // Resource rows
+  &__resource {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    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);
+      }
+    }
+
+    &--mobile {
+      padding-left: 16px;
+    }
+  }
+
+  &__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: 72px;
+
+    &--total {
+      min-width: 72px;
+      text-align: right;
+    }
+  }
+
+  &__resource-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    gap: 2px;
+  }
+
+  // Mobile-only compact stats line
+  &__resource-stats-mobile {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    color: var(--label-secondary);
+    white-space: nowrap;
+  }
+
+  &__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 {
+    &__header {
+      padding: 10px 12px;
+    }
+
+    &__resource {
+      padding: 10px 12px 10px 12px;
+      gap: 12px;
+    }
+
+    &__resource-stats {
+      gap: 16px;
+    }
+
+    &__resource-stat {
+      min-width: auto;
+    }
+
+    &__add-resource-wrapper {
+      padding: 10px 12px;
+    }
+  }
+}

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

@@ -0,0 +1,137 @@
+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',
+
+    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 EmptyZone: Story = {
+  args: {
+    name: 'VIP Lounge',
+    totalCapacity: 0,
+    menuItems: zoneMenuItems,
+    onAddResource: () => alert('Add Resource'),
+    resources: [],
+  },
+}
+
+// Individual components composed manually
+export const ComposedManually: Story = {
+  render: () => (
+    <ZoneContainer>
+      <ZoneHeader
+        name="Bowling"
+        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"
+        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>
+  ),
+}

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { ActionMenuItem } from '../ActionMenu'
+import { ZoneContainer } from './ZoneContainer'
+import { ZoneHeader } from './ZoneHeader'
+import { ResourceRow } from './ResourceRow'
+import { AddResourceButton } from './AddResourceButton'
+import { DragHandleProps } from './ZoneContainer'
+
+export interface ZoneResource {
+  id: string
+  name: string
+  quantity: number
+  capacity: number
+  menuItems?: ActionMenuItem[]
+  dragHandleProps?: DragHandleProps
+}
+
+export interface ZoneCardProps {
+  name: string
+  totalCapacity: number
+  resources?: ZoneResource[]
+  menuItems?: ActionMenuItem[]
+  onAddResource?: () => void
+  className?: string
+  draggable?: boolean
+  onResourceClick?: (resource: ZoneResource) => void
+  dragHandleProps?: DragHandleProps
+  style?: React.CSSProperties
+}
+
+export const ZoneCard = React.forwardRef<HTMLDivElement, ZoneCardProps>(({
+  name,
+  totalCapacity,
+  resources = [],
+  menuItems = [],
+  onAddResource,
+  className = '',
+  draggable = true,
+  onResourceClick,
+  dragHandleProps,
+  style,
+}, ref) => {
+  return (
+    <ZoneContainer ref={ref} className={className} style={style}>
+      <ZoneHeader
+        name={name}
+        totalCapacity={totalCapacity}
+        menuItems={menuItems}
+        draggable={draggable}
+        dragHandleProps={dragHandleProps}
+      />
+      {resources.map((resource) => (
+        <ResourceRow
+          key={resource.id}
+          name={resource.name}
+          quantity={resource.quantity}
+          capacity={resource.capacity}
+          menuItems={resource.menuItems}
+          draggable={draggable}
+          dragHandleProps={resource.dragHandleProps}
+          onClick={onResourceClick ? () => onResourceClick(resource) : undefined}
+        />
+      ))}
+      {onAddResource && <AddResourceButton onClick={onAddResource} />}
+    </ZoneContainer>
+  )
+})
+
+ZoneCard.displayName = 'ZoneCard'

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import './ZoneCard.scss'
+
+export interface DragHandleProps {
+  [key: string]: unknown
+}
+
+export interface ZoneContainerProps {
+  children: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const ZoneContainer = React.forwardRef<HTMLDivElement, ZoneContainerProps>(({
+  children,
+  className = '',
+  style,
+}, ref) => {
+  return (
+    <div ref={ref} className={`zone-card ${className}`} style={style}>
+      {children}
+    </div>
+  )
+})
+
+ZoneContainer.displayName = 'ZoneContainer'

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

@@ -0,0 +1,84 @@
+import React from 'react'
+import { ActionMenu, ActionMenuItem } from '../ActionMenu'
+import { GripVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { DragHandleProps } from './ZoneContainer'
+import './ZoneCard.scss'
+
+export interface ZoneHeaderProps {
+  name: string
+  totalCapacity: number
+  totalLabel?: string
+  menuItems?: ActionMenuItem[]
+  draggable?: boolean
+  dragHandleProps?: DragHandleProps
+  className?: string
+  isMobile?: boolean
+  isFirst?: boolean
+  isLast?: boolean
+  onMoveUp?: () => void
+  onMoveDown?: () => void
+}
+
+export const ZoneHeader: React.FC<ZoneHeaderProps> = ({
+  name,
+  totalCapacity,
+  totalLabel = 'Total',
+  menuItems = [],
+  draggable = true,
+  dragHandleProps,
+  className = '',
+  isMobile = false,
+  isFirst = false,
+  isLast = false,
+  onMoveUp,
+  onMoveDown,
+}) => {
+  return (
+    <div className={`zone-card__header ${className}`}>
+      {draggable && !isMobile && (
+        <div className="zone-card__drag-handle" {...dragHandleProps}>
+          {GripVerticalIcon({ width: 20, height: 20 })}
+        </div>
+      )}
+      {draggable && isMobile && (
+        <div className="zone-card__reorder-arrows">
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isFirst}
+            onClick={(e) => { e.stopPropagation(); onMoveUp?.() }}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isLast}
+            onClick={(e) => { e.stopPropagation(); onMoveDown?.() }}
+          >
+            <ArrowDownIcon />
+          </button>
+        </div>
+      )}
+      {isMobile ? (
+        <>
+          <div className="zone-card__header-info">
+            <span className="zone-card__name">{name}</span>
+            <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
+          </div>
+          {menuItems.length > 0 && (
+            <div className="zone-card__header-right">
+              <ActionMenu items={menuItems} />
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <span className="zone-card__name">{name}</span>
+          <div className="zone-card__header-right">
+            <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
+            {menuItems.length > 0 && <ActionMenu items={menuItems} />}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+export { ZoneCard } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource } from './ZoneCard'
+
+export { ZoneContainer } from './ZoneContainer'
+export type { ZoneContainerProps, DragHandleProps } from './ZoneContainer'
+
+export { ZoneHeader } from './ZoneHeader'
+export type { ZoneHeaderProps } from './ZoneHeader'
+
+export { ResourceRow } from './ResourceRow'
+export type { ResourceRowProps, ResourceRowLabels } from './ResourceRow'
+
+export { AddResourceButton } from './AddResourceButton'
+export type { AddResourceButtonProps } from './AddResourceButton'

package/src/v2/components/index.ts

@@ -1,3 +1,6 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps } from './IconButton'
+
 export { Badge } from './Badge'
 export type { BadgeProps } from './Badge'
 
@@ -58,6 +61,9 @@ export { NPSScore } from './NPSScore'
 export { Pagination } from './Pagination'
 export type { PaginationProps } from './Pagination'
 
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
+
 // Icons
 export {
   InfoIcon,
@@ -76,6 +82,10 @@ export {
   ClearIcon,
   CloseIcon,
   EllipsisIcon,
-  CircleIcon
+  CircleIcon,
+  GripVerticalIcon,
+  PlusIcon,
+  DeleteIcon,
+  ClockIcon
 } from '../icons'
 

package/src/v2/index.ts

@@ -21,6 +21,19 @@ export type { AlertProps, AlertVariant } from './components/Alert'
 export { Button } from './components/Button'
 export type { ButtonProps } from './components/Button'
 
+// NewInput Component
+export { NewInput } from './components/NewInput'
+export type { NewInputProps } from './components/NewInput'
+
+// Checkbox Component
+export { Checkbox } from './components/Checkbox'
+export type { CheckboxProps } from './components/Checkbox'
+
+// NewPageHeader Component
+export { NewPageHeader } from './components/NewPageHeader'
+export type { NewPageHeaderProps } from './components/NewPageHeader'
+
+
 // EntityHeader Component
 export { EntityHeader } from './components/EntityHeader'
 export type { EntityHeaderProps } from './components/EntityHeader'
@@ -36,6 +49,14 @@ export type { NPSScoreProps, NPSSubmitData } from './components/NPSScore'
 export { UserPanel } from './components/UserPanel'
 export type { UserPanelProps } from './components/UserPanel'
 
+// ZoneCard Components
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard'
+
+// ZonesResources Page
+export { ZonesResourcesPage } from './pages/ZonesResources'
+export type { ZonesResourcesPageProps } from './pages/ZonesResources'
+
 // ============================================================================
 // Navigation Components
 // ============================================================================

package/src/v2/pages/ZonesResources/ZonesResourcesPage.scss

@@ -0,0 +1,43 @@
+.zones-resources-page {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  &__back {
+    padding: 24px 32px 0 32px;
+    align-self: flex-start;
+
+    .ghost-button {
+      color: var(--fill-action, #5D5BF4);
+      border-color: var(--borders-main-border-primary, #E8E9EF);
+
+      &:not(.active):hover:not(:disabled) {
+        background-color: var(--surface-action-soft, #F4F4FE);
+        color: var(--fill-action, #5D5BF4);
+      }
+
+      .ghost-button__icon svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 16px 16px 0 16px;
+    }
+  }
+
+  &__content {
+    padding: 24px 32px;
+
+    @media (max-width: 768px) {
+      padding: 0;
+    }
+  }
+
+  &__action {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}