@licklist/design 0.78.45 → 0.78.47

package/src/index.ts

@@ -51,4 +51,6 @@ export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
 export * from './v2/pages/Settings'
 export * from './v2/pages/ZonesResources'
+export * from './v2/pages/SettingsSubPage'
+export * from './v2/pages/DeleteEntity'
 export * from './v2/components'

package/src/v2/components/Button/Button.tsx

@@ -8,6 +8,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     | 'secondary-soft'
     | 'tertiary-soft'
     | 'primary-outline'
+    | 'outline'
     | 'secondary'
     | 'destructive-soft'
     | 'destructive-strong'

package/src/v2/components/PeriodCard/PeriodCard.scss

@@ -0,0 +1,157 @@
+.period-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--surface-secondary, #f5f6fa);
+
+  &__title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    font-family: var(--font-family-sans);
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--labels-main-label-primary, #121e52);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__badge-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--label-secondary, #6b7a99);
+  }
+
+  &__badge {
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    color: var(--label-secondary, #6b7a99);
+    border: 1px solid var(--border-primary, #e2e2e2);
+    border-radius: 999px;
+    padding: 2px 10px;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__section-label {
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--labels-main-label-primary, #121e52);
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      gap: 12px;
+    }
+
+    &--time {
+      margin-top: 8px;
+    }
+  }
+
+  &__days-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  &__days-col {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__time-range {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: end;
+    gap: 12px;
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+  }
+
+  &__time-separator {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-secondary, #6b7a99);
+    padding-bottom: 10px;
+  }
+}
+
+// Small square checkboxes for day selection
+.day-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__box {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    border: 1px solid var(--border-primary, #e2e2e2);
+    border-radius: 3px;
+    background: var(--surface-primary, #fff);
+    transition: all 0.15s ease;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 4.5px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  &__input:checked + &__box {
+    background: var(--fill-selected, #14215a);
+    border-color: var(--fill-selected, #14215a);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-primary, #121e52);
+  }
+}

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 />,
+}