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

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/no-explicit-any
+  listeners?: Record<string, (...args: any[]) => void> | 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/Toggle/Toggle.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Switch } from '../../shadcn/components/ui/switch'
 import './Toggle.scss'
 
 export interface ToggleProps {
@@ -9,13 +10,11 @@ export interface ToggleProps {
 }
 
 export const Toggle: React.FC<ToggleProps> = ({ checked, onChange, disabled = false, id }) => (
-  <button
+  <Switch
     id={id}
-    type="button"
-    role="switch"
-    aria-checked={checked}
+    checked={checked}
+    onCheckedChange={onChange}
     disabled={disabled}
-    className={`toggle-switch ${checked ? 'toggle-switch--checked' : ''}`}
-    onClick={() => onChange(!checked)}
+    className="toggle-switch"
   />
 )

package/src/v2/components/index.ts

@@ -111,6 +111,12 @@ export type { RadioCardGroupProps, RadioCardOption } from './RadioCard'
 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

@@ -58,6 +58,15 @@ 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'
 
@@ -219,5 +228,78 @@ export type { AuthLayoutProps, LoginPageProps, ResetPasswordPageProps, CreatePas
  * - @/v2/styles/form/NewInput.scss
  * - @/v2/styles/navigation/*.scss
  *
+ * shadcn/ui components are available from:
+ * - @/v2/shadcn/components/ui/
  */
 
+// shadcn/ui components
+// Note: shadcn components with name collisions (Button, Checkbox) should be imported
+// directly from '@licklist/design/v2/shadcn' to avoid ambiguity with native v2 components.
+export {
+  cn,
+  buttonVariants,
+  Input,
+  Label,
+  Badge,
+  badgeVariants,
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Separator,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+  Skeleton,
+  Switch,
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TooltipProvider as ShadcnTooltipProvider,
+  TooltipTrigger as ShadcnTooltipTrigger,
+  TooltipContent as ShadcnTooltipContent,
+} from './shadcn'
+// shadcn Button and Checkbox exported with Shadcn prefix to avoid collision with native v2 components
+export { Button as ShadcnButton, Checkbox as ShadcnCheckbox, Tooltip as ShadcnTooltip } from './shadcn'

package/src/v2/shadcn/_reference/AccountManagerCard.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { IconTelephone, IconMail } from '../../icons';
+
+interface AccountManagerCardProps {
+  fullName: string;
+  email: string;
+  avatarUrl: string | null;
+  companyPhone: string | null;
+}
+
+const AccountManagerCard: React.FC<AccountManagerCardProps> = ({
+  fullName,
+  email,
+  avatarUrl,
+  companyPhone,
+}) => {
+  return (
+    <div className="flex items-center gap-4 p-4 bg-surface-secondary border border-border-primary rounded-lg">
+      <div className="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-surface-tertiary border border-border-primary">
+        {avatarUrl ? (
+          <img src={avatarUrl} alt={fullName} className="w-full h-full object-cover" />
+        ) : (
+          <span className="text-label-secondary font-bold text-sm">
+            {fullName[0]?.toUpperCase() || '?'}
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col gap-1 flex-1 min-w-0">
+        <span className="text-label-primary text-sm font-semibold">{fullName}</span>
+        <div className="flex items-center gap-1.5">
+          <IconMail size={14} className="fill-fill-secondary flex-shrink-0" />
+          <span className="text-label-secondary text-xs truncate">{email}</span>
+        </div>
+        {companyPhone && (
+          <div className="flex items-center gap-1.5">
+            <IconTelephone size={14} className="fill-fill-secondary flex-shrink-0" />
+            <span className="text-label-secondary text-xs">{companyPhone}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AccountManagerCard;

package/src/v2/shadcn/_reference/AffiliatesTable.tsx

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { DataTable } from './tables/DataTable';
+import { ColumnConfig, RowAction } from './tables/types';
+import StatusBadge from './StatusBadge';
+import DeleteConfirmationDialog from './shared/DeleteConfirmationDialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './ui/tooltip';
+
+export interface Affiliate {
+  id: string;
+  name: string;
+  views: number;
+  lastSeen: string;
+  status: 'active' | 'disabled';
+  destinationUrl: string;
+  affiliateCode: string;
+}
+
+interface AffiliatesTableProps {
+  affiliates: Affiliate[];
+  onDelete: (id: string) => void;
+  onToggleStatus: (id: string) => void;
+}
+
+const AffiliatesTable: React.FC<AffiliatesTableProps> = ({ affiliates, onDelete, onToggleStatus }) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedAffiliate, setSelectedAffiliate] = useState<Affiliate | null>(null);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const handleDeleteClick = (affiliate: Affiliate) => {
+    setSelectedAffiliate(affiliate);
+    setShowDeleteDialog(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (selectedAffiliate) {
+      onDelete(selectedAffiliate.id);
+    }
+    setShowDeleteDialog(false);
+    setSelectedAffiliate(null);
+  };
+
+  const handleCopyLink = async (affiliate: Affiliate) => {
+    const affiliateLink = `${window.location.origin}/r/${affiliate.affiliateCode}`;
+    await navigator.clipboard.writeText(affiliateLink);
+    setCopiedId(affiliate.id);
+    setTimeout(() => setCopiedId(null), 1000);
+  };
+
+  const columns: ColumnConfig<Affiliate>[] = [
+    {
+      label: 'Affiliate',
+      render: (affiliate) => (
+        <div className="flex items-center gap-2 flex-1">
+          {/* Icon */}
+          <div className="flex w-8 h-8 justify-center items-center gap-2 rounded bg-surface-secondary flex-shrink-0">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M16.2424 14.1213L15.1818 13.0606L16.2424 12C17.414 10.8284 17.414 8.92892 16.2424 7.75734C15.0708 6.58577 13.1713 6.58577 11.9997 7.75734L10.9391 8.81801L9.87842 7.75734L10.9391 6.69668C12.6964 4.93932 15.5457 4.93932 17.3031 6.69668C19.0604 8.45405 19.0604 11.3033 17.3031 13.0606L16.2424 14.1213ZM14.121 16.2427L13.0604 17.3033C11.3031 19.0606 8.45379 19.0606 6.69644 17.3033C4.93908 15.5459 4.93908 12.6967 6.69644 10.9393L7.7571 9.87866L8.81775 10.9393L7.7571 12C6.58552 13.1716 6.58552 15.0711 7.7571 16.2427C8.92867 17.4142 10.8282 17.4142 11.9997 16.2427L13.0604 15.1819L14.121 16.2427ZM14.121 8.81801L15.1818 9.87866L9.87842 15.1819L8.81775 14.1213L14.121 8.81801Z" className="fill-label-secondary" />
+            </svg>
+          </div>
+
+          {/* Name */}
+          <div className="flex flex-col justify-center items-start gap-0.5 flex-1 min-w-0">
+            <h3 className="text-label-primary text-sm font-semibold leading-4 truncate w-full">
+              {affiliate.name}
+            </h3>
+          </div>
+        </div>
+      )
+    },
+    {
+      label: 'Views',
+      accessor: (affiliate) => affiliate.views.toLocaleString(),
+      width: 'w-[160px]'
+    },
+    {
+      label: 'Last Seen',
+      accessor: 'lastSeen',
+      width: 'w-[140px]'
+    },
+    {
+      label: 'Status',
+      render: (affiliate) => (
+        <div className="flex items-center gap-2">
+          <StatusBadge status={affiliate.status} />
+          
+          {/* Copy Button */}
+          <TooltipProvider delayDuration={200}>
+            <Tooltip open={copiedId === affiliate.id ? true : undefined}>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCopyLink(affiliate);
+                  }}
+                  className="w-8 h-8 relative flex items-center justify-center rounded-full hover:opacity-80 transition-all flex-shrink-0"
+                  aria-label="Copy link"
+                >
+                  <div className="absolute inset-0 w-8 h-8 rounded-full bg-surface-secondary"></div>
+                  <div className="relative z-10 transition-opacity duration-300">
+                    {copiedId === affiliate.id ? (
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="animate-fade-in">
+                        <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z" className="fill-fill-secondary" />
+                      </svg>
+                    ) : (
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="animate-fade-in">
+                        <path d="M7 6V3C7 2.44772 7.44772 2 8 2H20C20.5523 2 21 2.44772 21 3V17C21 17.5523 20.5523 18 20 18H17V21C17 21.5523 16.5523 22 16 22H4C3.44772 22 3 21.5523 3 21V7C3 6.44772 3.44772 6 4 6H7ZM5 8V20H15V8H5ZM9 6H17V16H19V4H9V6Z" className="fill-fill-secondary" />
+                      </svg>
+                    )}
+                  </div>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{copiedId === affiliate.id ? 'Copied!' : 'Copy affiliate link'}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      ),
+      width: 'w-[150px]',
+      className: 'flex justify-end'
+    }
+  ];
+
+  const rowActions = (affiliate: Affiliate): RowAction<Affiliate>[] => [
+    {
+      label: 'Edit Affiliate',
+      onClick: () => {
+        window.location.href = `/marketing/affiliates/edit/${affiliate.id}`;
+      }
+    },
+    {
+      label: affiliate.status === 'active' ? 'Disable' : 'Enable',
+      onClick: () => {
+        onToggleStatus(affiliate.id);
+      }
+    },
+    {
+      label: 'Copy Link',
+      onClick: () => {
+        handleCopyLink(affiliate);
+      }
+    },
+    {
+      label: 'Delete',
+      onClick: () => {
+        handleDeleteClick(affiliate);
+      },
+      variant: 'danger'
+    }
+  ];
+
+  return (
+    <>
+      <DataTable
+        data={affiliates}
+        columns={columns}
+        keyExtractor={(affiliate) => affiliate.id}
+        rowActions={rowActions}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmationDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        onConfirm={handleDeleteConfirm}
+        title={`Delete ${selectedAffiliate?.name}?`}
+        itemName={selectedAffiliate?.name}
+      />
+    </>
+  );
+};
+
+export default AffiliatesTable;