@licklist/design 0.78.45 → 0.78.47

package/src/v2/components/PeriodCard/PeriodCard.tsx

@@ -0,0 +1,350 @@
+import React from 'react'
+import { NewInput } from '../NewInput'
+import { Checkbox } from '../Checkbox'
+import { IconButton } from '../IconButton'
+import { ClockIcon } from '../../icons'
+import './PeriodCard.scss'
+
+export interface PeriodCardValue {
+  days: string[]
+  is24Hours: boolean
+  startTime?: string
+  endTime?: string
+  maxCapacity: number
+  minCapacity: number | null
+}
+
+export interface PeriodCardLabels {
+  badge?: string
+  sectionTitle?: string
+  minValue?: string
+  maxValue?: string
+  days?: string
+  time?: string
+  alignToggle?: string
+  startTime?: string
+  endTime?: string
+}
+
+const DEFAULT_LABELS: Required<PeriodCardLabels> = {
+  badge: 'Period',
+  sectionTitle: 'Override',
+  minValue: 'Min',
+  maxValue: 'Max',
+  days: 'Days',
+  time: 'Time',
+  alignToggle: 'Align with Opening Hours',
+  startTime: 'Start Time',
+  endTime: 'End Time',
+}
+
+const DAY_OPTIONS = [
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday',
+]
+
+export interface PeriodCardProps {
+  /** Controlled value for built-in sections. Not needed when using children. */
+  value?: PeriodCardValue
+  /** Called when built-in sections change. Not needed when using children. */
+  onChange?: (value: PeriodCardValue) => void
+  onDelete?: () => void
+  labels?: PeriodCardLabels
+  dayLabels?: string[]
+  /** Plain text title rendered at the top (e.g. "Period 1"). Mutually exclusive with badge header. */
+  title?: string
+  /** Hide the badge + delete header row (useful with title) */
+  hideHeader?: boolean
+  /** Hide the min/max capacity section */
+  hideCapacity?: boolean
+  /** Hide the days selection section */
+  hideDays?: boolean
+  /** Hide the time section */
+  hideTime?: boolean
+  /** Make the min value field optional (shows "(optional)" label) */
+  minOptional?: boolean
+  /** Custom icon for the badge. Defaults to ClockIcon */
+  badgeIcon?: React.ReactNode
+  /** Custom content. When provided, built-in sections (capacity, days, time) are not rendered. */
+  children?: React.ReactNode
+  className?: string
+}
+
+export const PeriodCard: React.FC<PeriodCardProps> = ({
+  value,
+  onChange,
+  onDelete,
+  labels: labelsProp,
+  dayLabels,
+  title,
+  hideHeader = false,
+  hideCapacity = false,
+  hideDays = false,
+  hideTime = false,
+  minOptional = true,
+  badgeIcon,
+  children,
+  className = '',
+}) => {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp }
+  const days = dayLabels || DAY_OPTIONS
+  const hasChildren = !!children
+
+  const updateField = (updates: Partial<PeriodCardValue>) => {
+    if (value && onChange) {
+      onChange({ ...value, ...updates })
+    }
+  }
+
+  const toggleDay = (day: string) => {
+    if (!value) return
+    const current = value.days || []
+    const updated = current.includes(day)
+      ? current.filter((d) => d !== day)
+      : [...current, day]
+    updateField({ days: updated })
+  }
+
+  const toggleAlignHours = (checked: boolean) => {
+    if (checked) {
+      updateField({ is24Hours: true, startTime: undefined, endTime: undefined })
+    } else {
+      updateField({ is24Hours: false, startTime: '09:00', endTime: '17:00' })
+    }
+  }
+
+  const leftDays = days.slice(0, 4)
+  const rightDays = days.slice(4)
+
+  return (
+    <div className={`period-card ${className}`}>
+      {/* Title (plain text heading) */}
+      {title && (
+        <div className="period-card__title-row">
+          <span className="period-card__title">{title}</span>
+          {onDelete && <IconButton icon="delete" onClick={onDelete} />}
+        </div>
+      )}
+
+      {/* Badge header */}
+      {!hideHeader && !title && (
+        <div className="period-card__header">
+          <div className="period-card__badge-group">
+            {badgeIcon || <ClockIcon width={20} height={20} />}
+            <span className="period-card__badge">{labels.badge}</span>
+          </div>
+          {onDelete && (
+            <IconButton icon="delete" onClick={onDelete} />
+          )}
+        </div>
+      )}
+
+      {/* Custom children mode */}
+      {hasChildren ? (
+        children
+      ) : (
+        <>
+          {/* Capacity / Value Override */}
+          {!hideCapacity && value && (
+            <div className="period-card__section">
+              <label className="period-card__section-label">
+                {labels.sectionTitle}
+              </label>
+              <div className="period-card__row">
+                <NewInput
+                  label={labels.minValue}
+                  optional={minOptional}
+                  type="number"
+                  min={0}
+                  value={
+                    value.minCapacity === null || value.minCapacity === 0
+                      ? ''
+                      : value.minCapacity
+                  }
+                  onChange={(e) =>
+                    updateField({
+                      minCapacity:
+                        (e.target as HTMLInputElement).value === ''
+                          ? null
+                          : parseInt((e.target as HTMLInputElement).value, 10) || 0,
+                    })
+                  }
+                />
+                <NewInput
+                  label={labels.maxValue}
+                  type="number"
+                  min={1}
+                  value={value.maxCapacity === 0 ? '' : value.maxCapacity}
+                  onChange={(e) =>
+                    updateField({
+                      maxCapacity:
+                        (e.target as HTMLInputElement).value === ''
+                          ? 0
+                          : parseInt((e.target as HTMLInputElement).value, 10) || 0,
+                    })
+                  }
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Days */}
+          {!hideDays && value && (
+            <div className="period-card__section">
+              <label className="period-card__section-label">
+                {labels.days}
+              </label>
+              <div className="period-card__days-grid">
+                <div className="period-card__days-col">
+                  {leftDays.map((day) => (
+                    <DayCheckbox
+                      key={day}
+                      label={day}
+                      checked={value.days?.includes(day) || false}
+                      onChange={() => toggleDay(day)}
+                    />
+                  ))}
+                </div>
+                <div className="period-card__days-col">
+                  {rightDays.map((day) => (
+                    <DayCheckbox
+                      key={day}
+                      label={day}
+                      checked={value.days?.includes(day) || false}
+                      onChange={() => toggleDay(day)}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Time */}
+          {!hideTime && value && (
+            <div className="period-card__section">
+              <label className="period-card__section-label">
+                {labels.time}
+              </label>
+              <Checkbox
+                label={labels.alignToggle}
+                checked={value.is24Hours ?? true}
+                onChange={(e) => toggleAlignHours(e.target.checked)}
+              />
+              {!value.is24Hours && (
+                <div className="period-card__row period-card__row--time">
+                  <NewInput
+                    label={labels.startTime}
+                    type="time"
+                    value={value.startTime || '09:00'}
+                    onChange={(e) =>
+                      updateField({ startTime: (e.target as HTMLInputElement).value })
+                    }
+                  />
+                  <NewInput
+                    label={labels.endTime}
+                    type="time"
+                    value={value.endTime || '17:00'}
+                    onChange={(e) =>
+                      updateField({ endTime: (e.target as HTMLInputElement).value })
+                    }
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+// ── Sub-components for composition ──
+
+export interface PeriodCardSectionProps {
+  label?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export const PeriodCardSection: React.FC<PeriodCardSectionProps> = ({
+  label,
+  children,
+  className = '',
+}) => (
+  <div className={`period-card__section ${className}`}>
+    {label && (
+      <label className="period-card__section-label">{label}</label>
+    )}
+    {children}
+  </div>
+)
+
+PeriodCardSection.displayName = 'PeriodCardSection'
+
+export interface PeriodCardTimeRangeProps {
+  startTime: string
+  endTime: string
+  onStartTimeChange: (value: string) => void
+  onEndTimeChange: (value: string) => void
+  startLabel?: string
+  endLabel?: string
+  separator?: string
+  className?: string
+}
+
+export const PeriodCardTimeRange: React.FC<PeriodCardTimeRangeProps> = ({
+  startTime,
+  endTime,
+  onStartTimeChange,
+  onEndTimeChange,
+  startLabel,
+  endLabel,
+  separator = 'to',
+  className = '',
+}) => (
+  <div className={`period-card__time-range ${className}`}>
+    <NewInput
+      label={startLabel}
+      type="time"
+      value={startTime}
+      onChange={(e) => onStartTimeChange((e.target as HTMLInputElement).value)}
+    />
+    <span className="period-card__time-separator">{separator}</span>
+    <NewInput
+      label={endLabel}
+      type="time"
+      value={endTime}
+      onChange={(e) => onEndTimeChange((e.target as HTMLInputElement).value)}
+    />
+  </div>
+)
+
+PeriodCardTimeRange.displayName = 'PeriodCardTimeRange'
+
+// ── Day checkbox (also exported for standalone use) ──
+
+interface DayCheckboxProps {
+  label: string
+  checked: boolean
+  onChange: () => void
+}
+
+const DayCheckbox: React.FC<DayCheckboxProps> = ({ label, checked, onChange }) => (
+  <label className="day-checkbox">
+    <input
+      type="checkbox"
+      className="day-checkbox__input"
+      checked={checked}
+      onChange={onChange}
+    />
+    <span className="day-checkbox__box" />
+    <span className="day-checkbox__label">{label}</span>
+  </label>
+)
+
+PeriodCard.displayName = 'PeriodCard'

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

@@ -0,0 +1,8 @@
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './PeriodCard'
+export type {
+  PeriodCardProps,
+  PeriodCardValue,
+  PeriodCardLabels,
+  PeriodCardSectionProps,
+  PeriodCardTimeRangeProps,
+} from './PeriodCard'

package/src/v2/components/ReorderRow/ReorderRow.scss

@@ -0,0 +1,68 @@
+.reorder-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--surface-secondary, #f5f6fa);
+  border-radius: 8px;
+
+  &--clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--surface-secondary-hover, #edeef3);
+    }
+  }
+
+  &__drag-handle {
+    display: flex;
+    align-items: center;
+    cursor: grab;
+    color: var(--label-secondary, #6b7a99);
+    flex-shrink: 0;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &__left {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', system-ui, sans-serif);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--label-primary, #121e52);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__subtitle {
+    font-family: var(--font-family-sans, 'Geist', system-ui, sans-serif);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+    color: var(--label-secondary, #6b7a99);
+    margin-top: 2px;
+  }
+
+  &__right {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}

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

@@ -0,0 +1,124 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ReorderRow } from './ReorderRow'
+import { Badge } from '../Badge'
+
+export default {
+  title: 'v2/Components/ReorderRow',
+  component: ReorderRow,
+  parameters: {
+    layout: 'padded',
+  },
+} as Meta<typeof ReorderRow>
+
+type Story = StoryObj<typeof ReorderRow>
+
+export const Default: Story = {
+  args: {
+    label: 'Test Zone',
+    subtitle: '0 resources · Total capacity: 0',
+  },
+}
+
+export const WithSubtitle: Story = {
+  args: {
+    label: 'Bowling Alley',
+    subtitle: '3 resources · Total capacity: 12',
+  },
+}
+
+export const WithoutSubtitle: Story = {
+  args: {
+    label: 'VIP Lounge',
+  },
+}
+
+export const NoDragHandle: Story = {
+  args: {
+    label: 'Static Row',
+    subtitle: 'No drag handle shown',
+    hideDragHandle: true,
+  },
+}
+
+export const Clickable: Story = {
+  args: {
+    label: 'Click me',
+    subtitle: 'Has hover state',
+    onClick: () => alert('Clicked!'),
+  },
+}
+
+export const MultipleRows: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: 500 }}>
+      <ReorderRow
+        label="Main Floor"
+        subtitle="5 resources · Total capacity: 20"
+      />
+      <ReorderRow
+        label="VIP Lounge"
+        subtitle="2 resources · Total capacity: 8"
+      />
+      <ReorderRow
+        label="Outdoor Area"
+        subtitle="3 resources · Total capacity: 15"
+      />
+    </div>
+  ),
+}
+
+const ColorDot = ({ color }: { color: string }) => (
+  <span
+    style={{
+      width: 12,
+      height: 12,
+      borderRadius: '50%',
+      backgroundColor: color,
+      display: 'inline-block',
+    }}
+  />
+)
+
+export const PriorityReorder: Story = {
+  render: () => (
+    <div style={{ maxWidth: 500 }}>
+      <div style={{ marginBottom: 16 }}>
+        <h3 style={{ margin: '0 0 4px', fontSize: 16, fontWeight: 600, color: '#121e52' }}>
+          Set a new priority order for your pricing periods
+        </h3>
+        <p style={{ margin: 0, fontSize: 13, color: '#6b7a99' }}>
+          Update the priority order of your pricing periods. The first period in the list has the highest priority and will take precedence when multiple periods overlap.
+        </p>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <ReorderRow
+          label="Peak"
+          subtitle="Peak Period"
+          leftContent={<ColorDot color="#ef4444" />}
+          rightContent={<Badge variant="neutral">Priority 1</Badge>}
+        />
+        <ReorderRow
+          label="Xmas"
+          leftContent={<ColorDot color="#f97316" />}
+          rightContent={<Badge variant="neutral">Priority 2</Badge>}
+        />
+        <ReorderRow
+          label="Off Peak"
+          subtitle="This is for when we're not busy."
+          leftContent={<ColorDot color="#3b82f6" />}
+          rightContent={<Badge variant="neutral">Priority 3</Badge>}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithLeftAndRightContent: Story = {
+  args: {
+    label: 'Peak',
+    subtitle: 'Peak Period',
+    leftContent: <ColorDot color="#ef4444" />,
+    rightContent: <Badge variant="neutral">Priority 1</Badge>,
+  },
+}

package/src/v2/components/ReorderRow/ReorderRow.tsx

@@ -0,0 +1,88 @@
+import React, { HTMLAttributes } from 'react'
+import { GripVerticalIcon } from '../../icons'
+import './ReorderRow.scss'
+
+export interface DragHandleRenderProps {
+  /** Spread onto the drag handle element for dnd-kit or similar */
+  attributes?: HTMLAttributes<HTMLElement>
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  listeners?: Record<string, Function> | undefined
+}
+
+export interface ReorderRowProps {
+  label: string
+  subtitle?: string
+  /** Render prop for the drag handle — receives attributes/listeners to spread */
+  dragHandleProps?: DragHandleRenderProps
+  /** Hide the drag handle (e.g. when not in reorder mode) */
+  hideDragHandle?: boolean
+  /** Content between the drag handle and label (e.g. color dot, icon) */
+  leftContent?: React.ReactNode
+  /** Right-side content (e.g. action menu, capacity badge) */
+  rightContent?: React.ReactNode
+  onClick?: () => void
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const ReorderRow = React.forwardRef<HTMLDivElement, ReorderRowProps>(
+  (
+    {
+      label,
+      subtitle,
+      dragHandleProps,
+      hideDragHandle = false,
+      leftContent,
+      rightContent,
+      onClick,
+      className = '',
+      style,
+    },
+    ref,
+  ) => {
+    const handleKeyDown = onClick
+      ? (e: React.KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            onClick()
+          }
+        }
+      : undefined
+
+    return (
+      <div
+        ref={ref}
+        style={style}
+        className={`reorder-row ${onClick ? 'reorder-row--clickable' : ''} ${className}`}
+        onClick={onClick}
+        onKeyDown={handleKeyDown}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        {!hideDragHandle && (
+          <div
+            className="reorder-row__drag-handle"
+            {...dragHandleProps?.attributes}
+            {...dragHandleProps?.listeners}
+          >
+            {GripVerticalIcon({ width: 20, height: 20 })}
+          </div>
+        )}
+        {leftContent && (
+          <div className="reorder-row__left">{leftContent}</div>
+        )}
+        <div className="reorder-row__content">
+          <span className="reorder-row__label">{label}</span>
+          {subtitle && (
+            <span className="reorder-row__subtitle">{subtitle}</span>
+          )}
+        </div>
+        {rightContent && (
+          <div className="reorder-row__right">{rightContent}</div>
+        )}
+      </div>
+    )
+  },
+)
+
+ReorderRow.displayName = 'ReorderRow'

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

@@ -0,0 +1,2 @@
+export { ReorderRow } from './ReorderRow'
+export type { ReorderRowProps, DragHandleRenderProps } from './ReorderRow'

package/src/v2/components/index.ts

@@ -68,6 +68,12 @@ export type { PaginationProps } from './Pagination'
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
 
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './PeriodCard'
+
+export { ReorderRow } from './ReorderRow'
+export type { ReorderRowProps, DragHandleRenderProps } from './ReorderRow'
+export type { PeriodCardProps, PeriodCardValue, PeriodCardLabels, PeriodCardSectionProps, PeriodCardTimeRangeProps } from './PeriodCard'
+
 // Icons
 export {
   InfoIcon,

package/src/v2/index.ts

@@ -53,6 +53,19 @@ export type { UserPanelProps } from './components/UserPanel'
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard'
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard'
 
+// SettingsSubPage (generic settings sub-page layout)
+export { SettingsSubPage } from './pages/SettingsSubPage'
+export type { SettingsSubPageProps } from './pages/SettingsSubPage'
+
+// ZonesResources Page (deprecated — use SettingsSubPage)
+// PeriodCard Component
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './components/PeriodCard'
+export type { PeriodCardProps, PeriodCardValue, PeriodCardLabels, PeriodCardSectionProps, PeriodCardTimeRangeProps } from './components/PeriodCard'
+
+// ReorderRow Component
+export { ReorderRow } from './components/ReorderRow'
+export type { ReorderRowProps, DragHandleRenderProps } from './components/ReorderRow'
+
 // ZonesResources Page
 export { ZonesResourcesPage } from './pages/ZonesResources'
 export type { ZonesResourcesPageProps } from './pages/ZonesResources'