@licklist/design 0.78.45 → 0.78.46

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'

package/src/v2/pages/DeleteEntity/DeleteEntityPage.scss

@@ -0,0 +1,96 @@
+.delete-entity-page {
+  padding: 0;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48px 32px;
+
+    @media (max-width: 768px) {
+      padding: 24px 16px;
+    }
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    max-width: 672px;
+  }
+
+  &__entity-name {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__warning-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+    background: var(--surface-secondary, #f8f8fa);
+    border: 1px solid var(--border-primary, #e8e9ef);
+    border-radius: 8px;
+  }
+
+  &__warning-text {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--label-status-error, #ef4444);
+    margin: 0;
+  }
+
+  &__warning-description {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-secondary, #626a90);
+    margin: 0;
+  }
+
+  &__consequences {
+    list-style: disc;
+    padding-left: 20px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    li {
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 14px;
+      color: var(--label-secondary, #626a90);
+    }
+  }
+
+  &__confirm-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs, 2px);
+  }
+
+  &__confirm-label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  &__confirm-error {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 11px;
+    color: var(--label-status-error, #ef4444);
+  }
+}

package/src/v2/pages/DeleteEntity/DeleteEntityPage.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { DeleteEntityPage } from './DeleteEntityPage'
+
+const meta: Meta<typeof DeleteEntityPage> = {
+  title: 'v2/Pages/DeleteEntity',
+  component: DeleteEntityPage,
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj<typeof DeleteEntityPage>
+
+const baseArgs = {
+  confirmWord: 'DELETE',
+  warningTitle: 'This action cannot be undone',
+  confirmLabelPrefix: 'Type',
+  confirmLabelSuffix: 'to confirm deletion',
+  confirmErrorMessage: 'Please type DELETE to confirm.',
+  isDeleting: false,
+  onDelete: () => console.log('Delete confirmed'),
+  onCancel: () => console.log('Cancel'),
+}
+
+/**
+ * **Delete Zone** — confirmation page for deleting a zone.
+ *
+ * Lists the consequences of the action and requires the user to type
+ * the confirmation word before the destructive button is enabled.
+ */
+export const DeleteZone: Story = {
+  name: 'Delete Zone',
+  args: {
+    ...baseArgs,
+    title: 'Delete Zone',
+    entityName: 'Main Hall',
+    deleteButtonLabel: 'Delete Zone',
+    warningDescription:
+      'You are about to permanently delete the zone "Main Hall". This will:',
+    consequences: [
+      'Remove the zone from your venue layout',
+      'Delete all resources assigned to this zone',
+      'Cancel any future bookings linked to this zone',
+    ],
+  },
+}
+
+/**
+ * **Delete Special Hours** — confirmation page for removing a special hours schedule.
+ */
+export const DeleteSpecialHours: Story = {
+  name: 'Delete Special Hours',
+  args: {
+    ...baseArgs,
+    title: 'Delete Special Hours',
+    entityName: 'Christmas Closure',
+    deleteButtonLabel: 'Delete Schedule',
+    warningDescription:
+      'You are about to permanently delete the special hours schedule "Christmas Closure". This will:',
+    consequences: [
+      'Remove all date-specific overrides from this schedule',
+      'Restore your default opening hours for the affected dates',
+    ],
+  },
+}
+
+/**
+ * **Deleting** — destructive button shown in its loading state while the
+ * delete request is in flight.
+ */
+export const Deleting: Story = {
+  name: 'Deleting',
+  args: {
+    ...baseArgs,
+    title: 'Delete Zone',
+    entityName: 'Main Hall',
+    deleteButtonLabel: 'Delete Zone',
+    warningDescription:
+      'You are about to permanently delete the zone "Main Hall". This will:',
+    consequences: ['Remove the zone from your venue layout'],
+    isDeleting: true,
+  },
+}

package/src/v2/pages/DeleteEntity/DeleteEntityPage.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { Button } from '../../components/Button/Button'
+import { NewInput } from '../../components/NewInput/NewInput'
+import './DeleteEntityPage.scss'
+
+export interface DeleteEntityPageProps {
+  /** Page title shown in the header (e.g. "Delete Zone") */
+  title: string
+  /** Name of the entity being deleted, displayed prominently */
+  entityName: string
+  /** Bullet list of consequences shown inside the warning card */
+  consequences: string[]
+  /** Label for the destructive action button */
+  deleteButtonLabel: string
+  /** Whether the delete request is in flight */
+  isDeleting: boolean
+  /** Word the user must type to confirm deletion (e.g. "DELETE") */
+  confirmWord: string
+  /** Heading inside the warning card (e.g. "This action cannot be undone") */
+  warningTitle: string
+  /** Description below the warning title */
+  warningDescription: string
+  /** Label above the confirmation input — `confirmWord` is rendered as <strong> */
+  confirmLabelPrefix: string
+  confirmLabelSuffix: string
+  /** Error message shown when the typed value does not match `confirmWord` */
+  confirmErrorMessage: string
+  onDelete: () => void | Promise<void>
+  onCancel: () => void
+}
+
+export function DeleteEntityPage({
+  title,
+  entityName,
+  consequences,
+  deleteButtonLabel,
+  isDeleting,
+  confirmWord,
+  warningTitle,
+  warningDescription,
+  confirmLabelPrefix,
+  confirmLabelSuffix,
+  confirmErrorMessage,
+  onDelete,
+  onCancel,
+}: DeleteEntityPageProps) {
+  const [confirmationInput, setConfirmationInput] = useState('')
+  const [confirmationError, setConfirmationError] = useState(false)
+
+  const handleDelete = async () => {
+    if (confirmationInput.toLowerCase() !== confirmWord.toLowerCase()) {
+      setConfirmationError(true)
+      return
+    }
+
+    await onDelete()
+  }
+
+  return (
+    <div className="delete-entity-page">
+      <NewPageHeader title={title} onCancel={onCancel} />
+      <div className="delete-entity-page__content">
+        <div className="delete-entity-page__inner">
+          <h2 className="delete-entity-page__entity-name">{entityName}</h2>
+
+          <div className="delete-entity-page__warning-card">
+            <p className="delete-entity-page__warning-text">{warningTitle}</p>
+            <p className="delete-entity-page__warning-description">
+              {warningDescription}
+            </p>
+            <ul className="delete-entity-page__consequences">
+              {consequences.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+
+            <div className="delete-entity-page__confirm-field">
+              <p className="delete-entity-page__confirm-label">
+                {confirmLabelPrefix} <strong>{confirmWord}</strong>{' '}
+                {confirmLabelSuffix}
+              </p>
+              {confirmationError && (
+                <span className="delete-entity-page__confirm-error">
+                  {confirmErrorMessage}
+                </span>
+              )}
+              <NewInput
+                value={confirmationInput}
+                onChange={(e) => {
+                  setConfirmationInput(
+                    (e.target as HTMLInputElement).value,
+                  )
+                  setConfirmationError(false)
+                }}
+                error={confirmationError ? ' ' : undefined}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Button
+              variant="destructive-strong"
+              onClick={handleDelete}
+              disabled={isDeleting}
+              isLoading={isDeleting}
+              style={{
+                background: 'var(--fills-main-fill-danger, #cc3c35)',
+              }}
+            >
+              {deleteButtonLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DeleteEntityPage

package/src/v2/pages/DeleteEntity/index.ts

@@ -0,0 +1,2 @@
+export { DeleteEntityPage } from './DeleteEntityPage'
+export type { DeleteEntityPageProps } from './DeleteEntityPage'