@licklist/design 0.78.5-dev.69 → 0.78.5-dev.70

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

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { InfoGrid } from './InfoGrid'
+import { Badge } from '../Badge'
+
+export default {
+  title: 'v2/Components/InfoGrid',
+  component: InfoGrid,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof InfoGrid>
+
+type Story = StoryObj<typeof InfoGrid>
+
+export const TwoColumns: Story = {
+  args: {
+    columns: 2,
+    items: [
+      { label: 'Full Name', value: 'Jane Doe' },
+      { label: 'Email', value: 'jane.doe@example.com' },
+      { label: 'Phone', value: '+1 (555) 000-1234' },
+      { label: 'Member Since', value: '12 Jan 2023' },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 480 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const ThreeColumns: Story = {
+  args: {
+    columns: 3,
+    items: [
+      { label: 'Provider', value: 'Acme Adventures' },
+      { label: 'Location', value: 'Sydney, NSW' },
+      { label: 'Category', value: 'Outdoor' },
+      { label: 'Total Bookings', value: '1,204' },
+      { label: 'Revenue', value: '$48,320' },
+      { label: 'Rating', value: '4.8 / 5' },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 720 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const WithReactNodeValues: Story = {
+  args: {
+    columns: 2,
+    items: [
+      { label: 'Full Name', value: 'John Smith' },
+      {
+        label: 'Status',
+        value: <Badge variant="success">Active</Badge>,
+      },
+      { label: 'Role', value: 'Manager' },
+      { label: 'Last Login', value: '2 hours ago' },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 480 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}

package/src/v2/components/InfoGrid/InfoGrid.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import './InfoGrid.scss'
+
+export interface InfoGridItem {
+  label: string
+  value: React.ReactNode
+}
+
+export interface InfoGridProps {
+  items: InfoGridItem[]
+  columns?: 2 | 3 | 4
+  className?: string
+}
+
+export const InfoGrid: React.FC<InfoGridProps> = ({
+  items,
+  columns = 2,
+  className = '',
+}) => (
+  <div className={`info-grid info-grid--cols-${columns} ${className}`}>
+    {items.map((item, index) => (
+      <div key={index} className="info-grid__item">
+        <span className="info-grid__label">{item.label}</span>
+        <span className="info-grid__value">{item.value}</span>
+      </div>
+    ))}
+  </div>
+)

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

@@ -0,0 +1 @@
+export * from './InfoGrid'

package/src/v2/components/NewTable/NewTable.scss

@@ -18,7 +18,7 @@
   }
 
   &__header-cell {
-    padding: 16px 24px;
+    padding: 14px 16px;
     font-size: var(--text-small-size, 13px);
     font-weight: 500;
     color: var(--label-secondary, #9399B3);
@@ -58,7 +58,7 @@
   }
 
   &__cell {
-    padding: 16px 24px;
+    padding: 16px 16px;
     font-size: var(--text-base-size, 14px);
     color: var(--label-primary, #121E52);
     vertical-align: middle;
@@ -84,12 +84,12 @@
     min-width: 600px; // Ensure table doesn't collapse too much
 
     &__header-cell {
-      padding: 12px 16px;
+      padding: 10px 12px;
       font-size: 12px;
     }
 
     &__cell {
-      padding: 12px 16px;
+      padding: 12px 12px;
       font-size: 13px;
     }
 

package/src/v2/components/RadioCard/RadioCard.scss

@@ -0,0 +1,76 @@
+.radio-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &__option {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 16px;
+    border: 1.5px solid var(--border-primary, #e8e9ef);
+    border-radius: 8px;
+    cursor: pointer;
+    background: var(--surface-primary, #ffffff);
+    transition: border-color 0.15s, background 0.15s;
+
+    &--selected {
+      border-color: var(--border-selected, #6200ee);
+      background: var(--surface-action-soft, #f3e8ff);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &__radio-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__radio {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1.5px solid var(--border-primary, #e8e9ef);
+    flex-shrink: 0;
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--selected {
+      border-color: var(--border-selected, #6200ee);
+
+      &::after {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--border-selected, #6200ee);
+      }
+    }
+  }
+
+  &__text {
+    flex: 1;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--label-primary, #121e52);
+    display: block;
+  }
+
+  &__description {
+    font-size: 13px;
+    color: var(--label-secondary, #626a90);
+    margin-top: 2px;
+    display: block;
+  }
+}

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

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+import { RadioCard } from './RadioCard'
+
+const meta: Meta<typeof RadioCard> = {
+  title: 'v2/Components/RadioCard',
+  component: RadioCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof RadioCard>
+
+export const Default: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [value, setValue] = useState('manager')
+
+      return (
+        <div style={{ width: 400 }}>
+          <RadioCard
+            name="role-default"
+            value={value}
+            onChange={setValue}
+            options={[
+              {
+                value: 'manager',
+                label: 'Manager',
+                description: 'Full access to manage staff, bookings, and settings.',
+              },
+              {
+                value: 'sub-manager',
+                label: 'Sub-Manager',
+                description: 'Can manage bookings and staff but cannot change settings.',
+              },
+              {
+                value: 'viewer',
+                label: 'Viewer',
+                description: 'Read-only access to reports and bookings.',
+              },
+            ]}
+          />
+        </div>
+      )
+    }
+
+    return <Wrapper />
+  },
+}
+
+export const NoDescriptions: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [value, setValue] = useState('option-a')
+
+      return (
+        <div style={{ width: 400 }}>
+          <RadioCard
+            name="role-no-desc"
+            value={value}
+            onChange={setValue}
+            options={[
+              { value: 'option-a', label: 'Option A' },
+              { value: 'option-b', label: 'Option B' },
+              { value: 'option-c', label: 'Option C' },
+            ]}
+          />
+        </div>
+      )
+    }
+
+    return <Wrapper />
+  },
+}
+
+export const WithDisabled: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [value, setValue] = useState('manager')
+
+      return (
+        <div style={{ width: 400 }}>
+          <RadioCard
+            name="role-disabled"
+            value={value}
+            onChange={setValue}
+            options={[
+              {
+                value: 'manager',
+                label: 'Manager',
+                description: 'Full access to manage staff, bookings, and settings.',
+              },
+              {
+                value: 'sub-manager',
+                label: 'Sub-Manager',
+                description: 'Can manage bookings and staff but cannot change settings.',
+              },
+              {
+                value: 'viewer',
+                label: 'Viewer',
+                description: 'Read-only access. This option is currently unavailable.',
+                disabled: true,
+              },
+            ]}
+          />
+        </div>
+      )
+    }
+
+    return <Wrapper />
+  },
+}

package/src/v2/components/RadioCard/RadioCard.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import './RadioCard.scss'
+
+export interface RadioCardOption {
+  value: string
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+export interface RadioCardProps {
+  options: RadioCardOption[]
+  value: string
+  onChange(value: string): void
+  name: string
+  className?: string
+}
+
+export const RadioCard: React.FC<RadioCardProps> = ({
+  options,
+  value,
+  onChange,
+  name,
+  className = '',
+}) => (
+  <div className={`radio-card ${className}`}>
+    {options.map((option) => {
+      const isSelected = option.value === value
+      const isDisabled = option.disabled ?? false
+
+      const optionClass = [
+        'radio-card__option',
+        isSelected ? 'radio-card__option--selected' : '',
+        isDisabled ? 'radio-card__option--disabled' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')
+
+      const radioClass = [
+        'radio-card__radio',
+        isSelected ? 'radio-card__radio--selected' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')
+
+      return (
+        <label key={option.value} className={optionClass}>
+          <input
+            type="radio"
+            name={name}
+            value={option.value}
+            checked={isSelected}
+            disabled={isDisabled}
+            onChange={() => !isDisabled && onChange(option.value)}
+            className="radio-card__radio-input"
+          />
+          <div className={radioClass} />
+          <div className="radio-card__text">
+            <span className="radio-card__label">{option.label}</span>
+            {option.description && (
+              <span className="radio-card__description">{option.description}</span>
+            )}
+          </div>
+        </label>
+      )
+    })}
+  </div>
+)

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

@@ -0,0 +1 @@
+export * from './RadioCard'

package/src/v2/components/StatusBadge/StatusBadge.scss

@@ -0,0 +1,53 @@
+@import '../../styles/index.scss';
+
+.status-badge {
+  display: inline-flex;
+  align-self: flex-start;
+  width: fit-content;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 100px;
+  border: 1px solid transparent;
+  font-family: var(--font-family-mono, 'Geist Mono', monospace);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 13px;
+  white-space: nowrap;
+  color: var(--label-primary, #121e52);
+
+  &--active {
+    background-color: var(--surface-colour-green-soft, #eef9ea);
+    border-color: var(--colour-overlay, #d4edcc);
+  }
+
+  &--invited {
+    background-color: var(--surface-colour-blue-soft, #e7f4fc);
+    border-color: var(--colour-overlay, #b4dbf6);
+  }
+
+  &--suspended {
+    background-color: var(--surface-colour-yellow-soft, #fefce8);
+    border-color: var(--colour-overlay, #fde68a);
+  }
+
+  &--imported {
+    background-color: var(--surface-colour-yellow-soft, #fefce8);
+    border-color: var(--colour-overlay, #fde68a);
+  }
+
+  &--disabled {
+    background-color: var(--surface-colour-red-soft, #fceceb);
+    border-color: var(--colour-overlay, #f5c4c2);
+  }
+
+  &--inactive {
+    background-color: var(--surface-secondary, #f8f8fa);
+    border-color: var(--border-primary, #e8e9ef);
+  }
+
+  &--expired {
+    background-color: var(--surface-status-alert, #fcf6e7);
+    border-color: var(--border-status-alert, #fed7b6);
+  }
+}

package/src/v2/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import './StatusBadge.scss'
+
+export type StatusBadgeStatus =
+  | 'active'
+  | 'disabled'
+  | 'suspended'
+  | 'invited'
+  | 'imported'
+  | 'inactive'
+  | 'expired'
+
+export interface StatusBadgeProps {
+  status: StatusBadgeStatus
+}
+
+const STATUS_LABELS: Record<StatusBadgeStatus, string> = {
+  active: 'Active',
+  disabled: 'Disabled',
+  suspended: 'Suspended',
+  invited: 'Invited',
+  imported: 'Imported',
+  inactive: 'Inactive',
+  expired: 'Expired',
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => (
+  <span className={`status-badge status-badge--${status}`}>
+    {STATUS_LABELS[status]}
+  </span>
+)

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

@@ -0,0 +1,2 @@
+export { StatusBadge } from './StatusBadge'
+export type { StatusBadgeProps, StatusBadgeStatus } from './StatusBadge'

package/src/v2/components/StepIndicator/StepIndicator.scss

@@ -0,0 +1,62 @@
+.step-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0;
+
+  &__step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--label-secondary, #626a90);
+
+    &--active .step-indicator__num {
+      background: var(--border-selected, #6200ee);
+      border-color: var(--border-selected, #6200ee);
+      color: #ffffff;
+    }
+
+    &--done .step-indicator__num {
+      background: var(--surface-action-soft, #f3e8ff);
+      border-color: var(--surface-action-soft, #f3e8ff);
+      color: var(--border-selected, #6200ee);
+    }
+
+    &--active .step-indicator__label {
+      color: var(--label-primary, #121e52);
+      font-weight: 600;
+    }
+
+    &--done .step-indicator__label {
+      color: var(--label-secondary, #626a90);
+    }
+  }
+
+  &__num {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1.5px solid var(--border-primary, #e8e9ef);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 600;
+    flex-shrink: 0;
+    background: transparent;
+    color: var(--label-secondary, #626a90);
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  &__divider {
+    flex: 1;
+    min-width: 24px;
+    height: 1px;
+    background: var(--border-primary, #e8e9ef);
+    margin: 0 8px;
+  }
+}

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { StepIndicator } from './StepIndicator'
+
+const meta: Meta<typeof StepIndicator> = {
+  title: 'v2/Components/StepIndicator',
+  component: StepIndicator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof StepIndicator>
+
+const steps = ['Email', 'Details', 'Role', 'Providers']
+
+export const Step1of4: Story = {
+  args: {
+    steps,
+    currentStep: 1,
+  },
+}
+
+export const Step2of4: Story = {
+  args: {
+    steps,
+    currentStep: 2,
+  },
+}
+
+export const Step4of4: Story = {
+  args: {
+    steps,
+    currentStep: 4,
+  },
+}

package/src/v2/components/StepIndicator/StepIndicator.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import './StepIndicator.scss'
+
+export interface StepIndicatorProps {
+  steps: string[]
+  currentStep: number
+  className?: string
+}
+
+export const StepIndicator: React.FC<StepIndicatorProps> = ({
+  steps,
+  currentStep,
+  className = '',
+}) => (
+  <div className={`step-indicator ${className}`}>
+    {steps.map((label, index) => {
+      const stepNumber = index + 1
+      const isDone = currentStep > stepNumber
+      const isActive = currentStep === stepNumber
+      const modifierClass = isDone
+        ? 'step-indicator__step--done'
+        : isActive
+        ? 'step-indicator__step--active'
+        : 'step-indicator__step--pending'
+
+      return (
+        <React.Fragment key={stepNumber}>
+          <div className={`step-indicator__step ${modifierClass}`}>
+            <div className="step-indicator__num">
+              {isDone ? '✓' : stepNumber}
+            </div>
+            <span className="step-indicator__label">{label}</span>
+          </div>
+          {index < steps.length - 1 && (
+            <div className="step-indicator__divider" />
+          )}
+        </React.Fragment>
+      )
+    })}
+  </div>
+)

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

@@ -0,0 +1 @@
+export * from './StepIndicator'

package/src/v2/components/TableControls/TableControls.scss

@@ -0,0 +1,63 @@
+@import '../../styles/index.scss';
+
+.table-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+
+  // ── Search + action row ────────────────────────────────────────────────────
+  &__top-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  &__search-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+    max-width: 480px;
+  }
+
+  &__search-label {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--label-primary, #121e52);
+  }
+
+  &__search {
+    width: 100%;
+    height: 40px;
+    padding: 0 12px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-primary, #121e52);
+    background: var(--surface-primary, #ffffff);
+    border: 1px solid var(--border-primary, #e8e9ef);
+    border-radius: var(--radius-md, 6px);
+    outline: none;
+    transition: border-color 0.15s;
+    box-sizing: border-box;
+
+    &::placeholder {
+      color: var(--label-tertiary, #9ea4bf);
+    }
+
+    &:focus {
+      border-color: var(--border-selected, #6200ee);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+    align-items: center;
+  }
+}