@licklist/design 0.78.5-dev.107 → 0.78.5-dev.108

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

@@ -0,0 +1,245 @@
+import React, { useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './PeriodCard'
+import { NewInput } from '../NewInput'
+import { IconButton } from '../IconButton'
+import type { PeriodCardValue } from './PeriodCard'
+
+export default {
+  title: 'v2/Components/PeriodCard',
+  component: PeriodCard,
+  parameters: {
+    layout: 'padded',
+  },
+} as Meta<typeof PeriodCard>
+
+type Story = StoryObj<typeof PeriodCard>
+
+const defaultValue: PeriodCardValue = {
+  days: [],
+  is24Hours: true,
+  maxCapacity: 1,
+  minCapacity: null,
+}
+
+export const Default: Story = {
+  args: {
+    value: defaultValue,
+    onChange: () => {},
+    onDelete: () => alert('Delete period'),
+  },
+}
+
+export const WithDaysSelected: Story = {
+  args: {
+    value: {
+      days: ['Monday', 'Wednesday', 'Friday'],
+      is24Hours: true,
+      maxCapacity: 5,
+      minCapacity: 2,
+    },
+    onChange: () => {},
+    onDelete: () => alert('Delete period'),
+  },
+}
+
+export const WithCustomTime: Story = {
+  args: {
+    value: {
+      days: ['Saturday', 'Sunday'],
+      is24Hours: false,
+      startTime: '10:00',
+      endTime: '18:00',
+      maxCapacity: 10,
+      minCapacity: null,
+    },
+    onChange: () => {},
+    onDelete: () => alert('Delete period'),
+  },
+}
+
+export const WithoutDelete: Story = {
+  args: {
+    value: defaultValue,
+    onChange: () => {},
+  },
+}
+
+export const DaysAndTimeOnly: Story = {
+  args: {
+    value: {
+      days: ['Monday', 'Tuesday'],
+      is24Hours: false,
+      startTime: '08:00',
+      endTime: '16:00',
+      maxCapacity: 1,
+      minCapacity: null,
+    },
+    onChange: () => {},
+    onDelete: () => alert('Delete'),
+    hideCapacity: true,
+    labels: {
+      badge: 'Availability',
+    },
+  },
+}
+
+export const CapacityOnly: Story = {
+  args: {
+    value: {
+      days: [],
+      is24Hours: true,
+      maxCapacity: 20,
+      minCapacity: 5,
+    },
+    onChange: () => {},
+    onDelete: () => alert('Delete'),
+    hideDays: true,
+    hideTime: true,
+    labels: {
+      badge: 'Capacity Limit',
+      sectionTitle: 'Capacity Range',
+      minValue: 'Min Capacity',
+      maxValue: 'Max Capacity',
+    },
+  },
+}
+
+export const CustomLabels: Story = {
+  args: {
+    value: {
+      days: ['Monday', 'Tuesday'],
+      is24Hours: true,
+      maxCapacity: 3,
+      minCapacity: 1,
+    },
+    onChange: () => {},
+    onDelete: () => alert('Delete'),
+    labels: {
+      badge: 'Capacity Period',
+      sectionTitle: 'Capacity Override',
+      minValue: 'Min Capacity',
+      maxValue: 'Max Capacity',
+      days: 'Available Days',
+      time: 'Time Settings',
+      alignToggle: 'Use venue opening hours',
+    },
+  },
+}
+
+const InteractiveTemplate = () => {
+  const [periods, setPeriods] = useState<PeriodCardValue[]>([
+    { days: [], is24Hours: true, maxCapacity: 1, minCapacity: null },
+  ])
+
+  const addPeriod = () => {
+    setPeriods([
+      ...periods,
+      { days: [], is24Hours: true, maxCapacity: 1, minCapacity: null },
+    ])
+  }
+
+  const removePeriod = (index: number) => {
+    setPeriods(periods.filter((_, i) => i !== index))
+  }
+
+  const updatePeriod = (index: number, updated: PeriodCardValue) => {
+    setPeriods(periods.map((p, i) => (i === index ? updated : p)))
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 600 }}>
+      {periods.map((period, index) => (
+        <PeriodCard
+          key={index}
+          value={period}
+          onChange={(updated) => updatePeriod(index, updated)}
+          onDelete={() => removePeriod(index)}
+          labels={{
+            badge: 'Capacity Period',
+            sectionTitle: 'Capacity Override',
+            minValue: 'Min Capacity',
+            maxValue: 'Max Capacity',
+          }}
+        />
+      ))}
+      <button
+        type="button"
+        onClick={addPeriod}
+        style={{
+          padding: '8px 16px',
+          border: '1px dashed #ccc',
+          borderRadius: 8,
+          background: 'none',
+          cursor: 'pointer',
+        }}
+      >
+        + Add Period
+      </button>
+    </div>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveTemplate />,
+}
+
+// ── Session Period (children mode) ──
+
+const SessionPeriodTemplate = () => {
+  const [periods, setPeriods] = useState([
+    { interval: 15, startTime: '09:00', endTime: '17:00' },
+  ])
+
+  const addPeriod = () => {
+    setPeriods([...periods, { interval: 15, startTime: '09:00', endTime: '17:00' }])
+  }
+
+  const removePeriod = (index: number) => {
+    setPeriods(periods.filter((_, i) => i !== index))
+  }
+
+  const updatePeriod = (index: number, updates: Partial<typeof periods[0]>) => {
+    setPeriods(periods.map((p, i) => (i === index ? { ...p, ...updates } : p)))
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 600 }}>
+      {periods.map((period, index) => (
+        <PeriodCard
+          key={index}
+          title={`Period ${index + 1}`}
+          onDelete={periods.length > 1 ? () => removePeriod(index) : undefined}
+        >
+          <PeriodCardSection label="Sessions every">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <NewInput
+                type="number"
+                min={1}
+                value={period.interval}
+                onChange={(e) =>
+                  updatePeriod(index, {
+                    interval: parseInt((e.target as HTMLInputElement).value) || 0,
+                  })
+                }
+                style={{ width: 80 }}
+              />
+              <span style={{ fontSize: 14, color: '#6b7a99' }}>minutes</span>
+            </div>
+          </PeriodCardSection>
+          <PeriodCardTimeRange
+            startTime={period.startTime}
+            endTime={period.endTime}
+            onStartTimeChange={(v) => updatePeriod(index, { startTime: v })}
+            onEndTimeChange={(v) => updatePeriod(index, { endTime: v })}
+          />
+        </PeriodCard>
+      ))}
+      <IconButton label="Add Time Period" icon="add" onClick={addPeriod} />
+    </div>
+  )
+}
+
+export const SessionPeriod: Story = {
+  render: () => <SessionPeriodTemplate />,
+}

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;
+  }
+}