@startsimpli/ui 0.4.6 → 0.4.7

package/src/components/lists/CreateListDialog.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface CreateListDialogProps {
+  open: boolean
+  onClose: () => void
+  onSubmit: (data: { name: string; description: string; sourceType: string }) => void
+  isSubmitting?: boolean
+  sourceTypes?: Array<{ value: string; label: string }>
+}
+
+const defaultSourceTypes = [
+  { value: 'static', label: 'Static' },
+  { value: 'funnel', label: 'Funnel' },
+  { value: 'query', label: 'Query' },
+]
+
+export function CreateListDialog({
+  open,
+  onClose,
+  onSubmit,
+  isSubmitting = false,
+  sourceTypes = defaultSourceTypes,
+}: CreateListDialogProps) {
+  const [name, setName] = React.useState('')
+  const [description, setDescription] = React.useState('')
+  const [sourceType, setSourceType] = React.useState(sourceTypes[0]?.value ?? 'static')
+
+  React.useEffect(() => {
+    if (open) {
+      setName('')
+      setDescription('')
+      setSourceType(sourceTypes[0]?.value ?? 'static')
+    }
+  }, [open, sourceTypes])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    onSubmit({ name: name.trim(), description: description.trim(), sourceType })
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={isSubmitting ? undefined : onClose}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div className="relative z-50 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
+        <h2 className="text-lg font-semibold text-foreground">Create List</h2>
+
+        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
+          {/* Name */}
+          <div className="space-y-1.5">
+            <label htmlFor="list-name" className="text-sm font-medium text-foreground">
+              Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="list-name"
+              type="text"
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter list name"
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm',
+                'placeholder:text-muted-foreground',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            />
+          </div>
+
+          {/* Description */}
+          <div className="space-y-1.5">
+            <label htmlFor="list-description" className="text-sm font-medium text-foreground">
+              Description
+            </label>
+            <textarea
+              id="list-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description"
+              rows={3}
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm resize-none',
+                'placeholder:text-muted-foreground',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            />
+          </div>
+
+          {/* Source Type */}
+          <div className="space-y-1.5">
+            <label htmlFor="list-source-type" className="text-sm font-medium text-foreground">
+              Source Type
+            </label>
+            <select
+              id="list-source-type"
+              value={sourceType}
+              onChange={(e) => setSourceType(e.target.value)}
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {sourceTypes.map((st) => (
+                <option key={st.value} value={st.value}>
+                  {st.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className={cn(
+                'rounded-md border px-4 py-2 text-sm font-medium',
+                'hover:bg-muted transition-colors',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting || !name.trim()}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                'hover:bg-primary/90 transition-colors',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {isSubmitting ? 'Creating...' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/components/lists/ListCard.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface ListCardProps {
+  name: string
+  sourceType: string
+  memberCount: number
+  createdAt: string
+  onClick?: () => void
+  className?: string
+}
+
+const sourceTypeBadgeClasses: Record<string, string> = {
+  static: 'bg-blue-100 text-blue-700 border-blue-200',
+  funnel: 'bg-purple-100 text-purple-700 border-purple-200',
+  query: 'bg-green-100 text-green-700 border-green-200',
+}
+
+export function ListCard({
+  name,
+  sourceType,
+  memberCount,
+  createdAt,
+  onClick,
+  className,
+}: ListCardProps) {
+  const badgeClass =
+    sourceTypeBadgeClasses[sourceType] ??
+    'bg-gray-100 text-gray-700 border-gray-200'
+
+  return (
+    <div
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onClick={onClick}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onClick()
+              }
+            }
+          : undefined
+      }
+      className={cn(
+        'rounded-lg border bg-card text-card-foreground p-4 transition-all duration-150',
+        onClick && 'cursor-pointer hover:shadow-md hover:border-primary/30',
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <h4 className="text-sm font-semibold text-foreground truncate">
+            {name}
+          </h4>
+          <p className="text-xs text-muted-foreground mt-1">
+            {memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}
+          </p>
+        </div>
+        <span
+          className={cn(
+            'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium shrink-0',
+            badgeClass,
+          )}
+        >
+          {sourceType}
+        </span>
+      </div>
+      <p className="text-xs text-muted-foreground mt-2">
+        Created {createdAt}
+      </p>
+    </div>
+  )
+}

package/src/components/lists/index.ts

@@ -0,0 +1,5 @@
+export { ListCard } from './ListCard'
+export type { ListCardProps } from './ListCard'
+
+export { CreateListDialog } from './CreateListDialog'
+export type { CreateListDialogProps } from './CreateListDialog'

package/src/components/pipeline/StageTransitionModal.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface StageTransitionModalProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: (targetStage: string, notes?: string) => void
+  currentStage: string
+  stages: Array<{ id: string; label: string }>
+  entityName?: string
+  isSubmitting?: boolean
+}
+
+export function StageTransitionModal({
+  open,
+  onClose,
+  onConfirm,
+  currentStage,
+  stages,
+  entityName,
+  isSubmitting = false,
+}: StageTransitionModalProps) {
+  const [targetStage, setTargetStage] = React.useState('')
+  const [notes, setNotes] = React.useState('')
+
+  React.useEffect(() => {
+    if (open) {
+      // Default to the first stage that isn't the current one
+      const firstOther = stages.find((s) => s.id !== currentStage)
+      setTargetStage(firstOther?.id ?? '')
+      setNotes('')
+    }
+  }, [open, currentStage, stages])
+
+  const handleConfirm = () => {
+    if (!targetStage) return
+    onConfirm(targetStage, notes.trim() || undefined)
+  }
+
+  const currentLabel = stages.find((s) => s.id === currentStage)?.label ?? currentStage
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={isSubmitting ? undefined : onClose}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div className="relative z-50 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
+        <h2 className="text-lg font-semibold text-foreground">
+          Move {entityName ? `"${entityName}"` : 'Item'} to Stage
+        </h2>
+
+        <div className="mt-4 space-y-4">
+          {/* Current stage indicator */}
+          <div className="space-y-1.5">
+            <p className="text-sm font-medium text-foreground">Current Stage</p>
+            <p className="text-sm text-muted-foreground">{currentLabel}</p>
+          </div>
+
+          {/* Target stage select */}
+          <div className="space-y-1.5">
+            <label htmlFor="target-stage" className="text-sm font-medium text-foreground">
+              New Stage
+            </label>
+            <select
+              id="target-stage"
+              value={targetStage}
+              onChange={(e) => setTargetStage(e.target.value)}
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {stages
+                .filter((s) => s.id !== currentStage)
+                .map((stage) => (
+                  <option key={stage.id} value={stage.id}>
+                    {stage.label}
+                  </option>
+                ))}
+            </select>
+          </div>
+
+          {/* Notes */}
+          <div className="space-y-1.5">
+            <label htmlFor="transition-notes" className="text-sm font-medium text-foreground">
+              Notes <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <textarea
+              id="transition-notes"
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="Add notes about this transition..."
+              rows={3}
+              disabled={isSubmitting}
+              className={cn(
+                'w-full rounded-md border bg-background px-3 py-2 text-sm resize-none',
+                'placeholder:text-muted-foreground',
+                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className={cn(
+                'rounded-md border px-4 py-2 text-sm font-medium',
+                'hover:bg-muted transition-colors',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleConfirm}
+              disabled={isSubmitting || !targetStage}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                'hover:bg-primary/90 transition-colors',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {isSubmitting ? 'Moving...' : 'Confirm'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/pipeline/index.ts

@@ -0,0 +1,2 @@
+export { StageTransitionModal } from './StageTransitionModal'
+export type { StageTransitionModalProps } from './StageTransitionModal'

package/src/components/settings/SettingsCard.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+export interface SettingsCardProps {
+  title: string
+  description?: string
+  icon?: React.ElementType
+  action?: React.ReactNode
+  children?: React.ReactNode
+}
+
+export function SettingsCard({ title, description, icon: Icon, action, children }: SettingsCardProps) {
+  return (
+    <div className="rounded-xl border bg-white text-gray-900 shadow-sm">
+      <div className="flex items-start justify-between p-6">
+        <div className="flex items-start gap-4">
+          {Icon && (
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100">
+              <Icon className="h-5 w-5 text-gray-600" />
+            </div>
+          )}
+          <div>
+            <h3 className="font-semibold leading-none tracking-tight">{title}</h3>
+            {description && (
+              <p className="text-sm text-gray-500 mt-1.5">{description}</p>
+            )}
+          </div>
+        </div>
+        {action && <div className="flex-shrink-0 ml-4">{action}</div>}
+      </div>
+      {children && <div className="px-6 pb-6 pt-0">{children}</div>}
+    </div>
+  )
+}

package/src/components/settings/SettingsLayout.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+export interface SettingsNavItem {
+  id: string
+  label: string
+  href: string
+  icon?: React.ElementType
+}
+
+export interface SettingsLayoutProps {
+  children: React.ReactNode
+  title?: string
+  description?: string
+}
+
+export function SettingsLayout({ children, title, description }: SettingsLayoutProps) {
+  return (
+    <div className="space-y-6 max-w-4xl">
+      {title && (
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
+          {description && <p className="text-gray-600 mt-1">{description}</p>}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}

package/src/components/settings/SettingsNav.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import * as React from 'react'
+
+export interface SettingsNavItem {
+  id: string
+  label: string
+  href: string
+  icon?: React.ElementType
+}
+
+export interface SettingsNavProps {
+  items: SettingsNavItem[]
+  activeId?: string
+  onNavigate: (href: string) => void
+}
+
+export function SettingsNav({ items, activeId, onNavigate }: SettingsNavProps) {
+  return (
+    <nav className="flex flex-col gap-1">
+      {items.map((item) => {
+        const isActive = item.id === activeId
+        const Icon = item.icon
+
+        return (
+          <button
+            key={item.id}
+            onClick={() => onNavigate(item.href)}
+            className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left ${
+              isActive
+                ? 'bg-gray-100 text-gray-900'
+                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+            }`}
+          >
+            {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+            {item.label}
+          </button>
+        )
+      })}
+    </nav>
+  )
+}

package/src/components/settings/index.ts

@@ -0,0 +1,6 @@
+export { SettingsLayout } from './SettingsLayout'
+export type { SettingsLayoutProps, SettingsNavItem as SettingsLayoutNavItem } from './SettingsLayout'
+export { SettingsNav } from './SettingsNav'
+export type { SettingsNavProps, SettingsNavItem } from './SettingsNav'
+export { SettingsCard } from './SettingsCard'
+export type { SettingsCardProps } from './SettingsCard'