@linktr.ee/linkapp 0.0.47 → 0.0.49

package/README.md

@@ -132,7 +132,7 @@ export default function ExpandedLayout({ settings, theme }: AppProps<MySettings>
 ```typescript
 import { useExpandLinkApp } from '@linktr.ee/linkapp/sdk'
 
-// In featured layout, trigger popup/modal
+// In featured layout, expand to overlay
 function FeaturedLayout() {
   const expandLinkApp = useExpandLinkApp()
 

package/dev-server/components/form/array-field.tsx

@@ -0,0 +1,115 @@
+import { Plus } from 'lucide-react'
+import type * as React from 'react'
+
+import type { SettingsElement } from '../../../src/types'
+import { cn } from '../../lib/utils'
+
+// Forward declaration - FormElement will be passed as a prop to avoid circular dependency
+interface ArrayFieldProps {
+  element: SettingsElement
+  value?: unknown[]
+  renderElement: (element: SettingsElement, value?: unknown) => React.ReactNode
+}
+
+export function ArrayField({ element, value, renderElement }: ArrayFieldProps) {
+  const minItems = element.array_options?.min ?? 0
+  const maxItems = element.array_options?.max
+  const addButtonText = element.array_options?.add_item_button_text || 'Add item'
+
+  // Show at least one sample item to demonstrate the structure
+  const sampleItems = value && Array.isArray(value) && value.length > 0 ? value : [{}] // Show one empty sample
+
+  return (
+    <div className="space-y-3">
+      {/* Item count info */}
+      <div className="text-xs text-gray-500">
+        Items: {minItems} - {maxItems ?? 'unlimited'}
+      </div>
+
+      {/* Sample items showing structure */}
+      <div className="space-y-3">
+        {sampleItems.map((itemValue, index) => (
+          <ArrayItem
+            key={index}
+            index={index}
+            element={element}
+            value={itemValue as Record<string, unknown>}
+            renderElement={renderElement}
+          />
+        ))}
+      </div>
+
+      {/* Add button */}
+      <button
+        type="button"
+        disabled
+        className={cn(
+          'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md',
+          'border border-dashed border-gray-300 text-gray-500',
+          'cursor-not-allowed hover:bg-gray-50'
+        )}
+      >
+        <Plus className="h-4 w-4" />
+        {addButtonText}
+      </button>
+    </div>
+  )
+}
+
+interface ArrayItemProps {
+  index: number
+  element: SettingsElement
+  value?: Record<string, unknown>
+  renderElement: (element: SettingsElement, value?: unknown) => React.ReactNode
+}
+
+function ArrayItem({ index, element, value, renderElement }: ArrayItemProps) {
+  const itemFormat = element.array_options?.item_format
+  const arrayElements = element.array_elements || []
+
+  // Format the item title using the format string
+  const itemTitle = itemFormat ? formatItemTitle(itemFormat, value, index) : `Item ${index + 1}`
+
+  return (
+    <div className="border border-gray-200 rounded-lg bg-white">
+      {/* Item header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-gray-100 bg-gray-50 rounded-t-lg">
+        <span className="text-sm font-medium text-gray-700">{itemTitle}</span>
+        <span className="text-xs text-gray-400">#{index + 1}</span>
+      </div>
+
+      {/* Nested elements */}
+      <div className="p-4 space-y-4">
+        {arrayElements.map((nestedElement) => (
+          <div key={nestedElement.id}>{renderElement(nestedElement, value?.[nestedElement.id])}</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function formatItemTitle(format: string, value: Record<string, unknown> | undefined, index: number): string {
+  if (!value) return `Item ${index + 1}`
+
+  // Replace {{fieldId}} placeholders with values
+  let title = format
+  const placeholders = format.match(/\{\{(\w+)\}\}/g) || []
+
+  for (const placeholder of placeholders) {
+    const fieldId = placeholder.slice(2, -2)
+    const fieldValue = value[fieldId]
+    if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
+      title = title.replace(placeholder, String(fieldValue))
+    } else {
+      title = title.replace(placeholder, `[${fieldId}]`)
+    }
+  }
+
+  // Handle conditional sections like {{#price}}...{{/price}}
+  title = title.replace(/\{\{#(\w+)\}\}(.*?)\{\{\/\1\}\}/g, (_, fieldId, content) => {
+    const fieldValue = value[fieldId]
+    return fieldValue !== undefined && fieldValue !== null && fieldValue !== '' ? content : ''
+  })
+
+  return title || `Item ${index + 1}`
+}

package/dev-server/components/form/file-field.tsx

@@ -0,0 +1,48 @@
+import { Upload } from 'lucide-react'
+import * as React from 'react'
+
+import type { SettingsElement } from '../../../src/types'
+import { cn } from '../../lib/utils'
+
+interface FileFieldProps {
+  element: SettingsElement
+  value?: string | string[]
+}
+
+export function FileField({ element, value }: FileFieldProps) {
+  const acceptTypes = element.accept?.join(', ') || 'All files'
+  const hasValue = value && (Array.isArray(value) ? value.length > 0 : value)
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed',
+        'border-gray-300 bg-gray-50',
+        'cursor-not-allowed'
+      )}
+    >
+      <Upload className="h-8 w-8 text-gray-400 mb-2" />
+      {hasValue ? (
+        <p className="text-sm text-gray-600">
+          {Array.isArray(value) ? `${value.length} file(s) selected` : 'File selected'}
+        </p>
+      ) : (
+        <>
+          <p className="text-sm text-gray-500">
+            {element.multiple ? 'Drop files here or click to upload' : 'Drop file here or click to upload'}
+          </p>
+          <p className="text-xs text-gray-400 mt-1">Accepts: {acceptTypes}</p>
+        </>
+      )}
+      {element.validation?.maxSize && (
+        <p className="text-xs text-gray-400 mt-1">Max size: {formatFileSize(element.validation.maxSize)}</p>
+      )}
+    </div>
+  )
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}

package/dev-server/components/form/form-element.tsx

@@ -0,0 +1,304 @@
+import { MousePointer, Plug } from 'lucide-react'
+import * as React from 'react'
+
+import { type PlaceValue, type SettingsElement, SettingsElementInput } from '../../../src/types'
+import { cn } from '../../lib/utils'
+import { Checkbox } from '../ui/checkbox'
+import { Field, FieldDescription, FieldLabel } from '../ui/field'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
+import { Textarea } from '../ui/textarea'
+import { ArrayField } from './array-field'
+import { FileField } from './file-field'
+import { LinkBehaviorField } from './link-behavior-field'
+import { LocationField } from './location-field'
+
+interface FormElementProps {
+  element: SettingsElement
+  value?: unknown
+}
+
+export function FormElement({ element, value }: FormElementProps) {
+  const label = element.title || element.label || element.id
+  const description = element.description
+  const defaultValue = element.defaultValue
+  const displayValue = value ?? defaultValue
+
+  // Helper to render nested elements (for array fields)
+  const renderElement = (el: SettingsElement, val?: unknown) => <FormElement element={el} value={val} />
+
+  const renderInput = () => {
+    switch (element.inputType) {
+      case SettingsElementInput.text:
+      case SettingsElementInput.url:
+      case SettingsElementInput.email:
+        return (
+          <Input
+            id={element.id}
+            type="text"
+            placeholder={element.placeholder}
+            defaultValue={typeof displayValue === 'string' ? displayValue : ''}
+            disabled
+          />
+        )
+
+      case SettingsElementInput.number:
+        return (
+          <Input
+            id={element.id}
+            type="number"
+            placeholder={element.placeholder}
+            defaultValue={
+              typeof displayValue === 'string' || typeof displayValue === 'number' ? String(displayValue) : ''
+            }
+            min={element.validation?.min}
+            max={element.validation?.max}
+            disabled
+          />
+        )
+
+      case SettingsElementInput.textarea:
+        return (
+          <Textarea
+            id={element.id}
+            placeholder={element.placeholder}
+            defaultValue={typeof displayValue === 'string' ? displayValue : ''}
+            disabled
+          />
+        )
+
+      case SettingsElementInput.select:
+        return (
+          <Select defaultValue={typeof displayValue === 'string' ? displayValue : undefined} disabled>
+            <SelectTrigger id={element.id}>
+              <SelectValue placeholder={element.placeholder || 'Select an option'} />
+            </SelectTrigger>
+            <SelectContent>
+              {element.options?.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )
+
+      case SettingsElementInput.radio: {
+        // Support both radio_elements (id, title, description) and options (value, label)
+        const radioOptions = element.radio_elements
+          ? element.radio_elements.map((el) => ({
+              value: el.id,
+              label: el.title,
+              description: el.description,
+            }))
+          : element.options?.map((opt) => ({
+              value: opt.value,
+              label: opt.label,
+              description: undefined,
+            }))
+
+        return (
+          <RadioGroup
+            defaultValue={typeof displayValue === 'string' ? displayValue : undefined}
+            disabled
+            className="space-y-2"
+          >
+            {radioOptions?.map((option) => (
+              <div
+                key={option.value}
+                className={cn(
+                  'flex items-start gap-3 px-3 py-2.5 rounded-lg border transition-colors',
+                  displayValue === option.value ? 'border-gray-300 bg-gray-50' : 'border-gray-200 bg-white'
+                )}
+              >
+                <RadioGroupItem value={option.value} id={`${element.id}-${option.value}`} className="mt-0.5" />
+                <div className="flex flex-col">
+                  <Label
+                    htmlFor={`${element.id}-${option.value}`}
+                    className="text-sm font-normal text-gray-700 cursor-not-allowed"
+                  >
+                    {option.label}
+                  </Label>
+                  {option.description && <span className="text-xs text-gray-500 mt-0.5">{option.description}</span>}
+                </div>
+              </div>
+            ))}
+          </RadioGroup>
+        )
+      }
+
+      case SettingsElementInput.checkbox:
+        return (
+          <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-gray-200 bg-white">
+            <Checkbox id={element.id} checked={displayValue === true} disabled />
+            <Label htmlFor={element.id} className="text-sm font-normal text-gray-700 cursor-not-allowed">
+              {element.label || label}
+            </Label>
+          </div>
+        )
+
+      case SettingsElementInput.switch:
+        return (
+          <div className="flex items-center justify-between px-3 py-2.5 rounded-lg border border-gray-200 bg-white">
+            <Label htmlFor={element.id} className="text-sm font-normal text-gray-700 cursor-not-allowed">
+              {element.label || label}
+            </Label>
+            <Switch id={element.id} checked={displayValue === true} disabled />
+          </div>
+        )
+
+      case SettingsElementInput.file:
+        return <FileField element={element} value={displayValue as string | string[] | undefined} />
+
+      case SettingsElementInput.linkBehavior:
+        return (
+          <LinkBehaviorField element={element} value={typeof displayValue === 'string' ? displayValue : undefined} />
+        )
+
+      case SettingsElementInput.array:
+        return (
+          <ArrayField
+            element={element}
+            value={Array.isArray(displayValue) ? displayValue : undefined}
+            renderElement={renderElement}
+          />
+        )
+
+      case SettingsElementInput.button:
+        return (
+          <button
+            type="button"
+            disabled
+            className={cn(
+              'inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg',
+              'bg-gray-900 text-white',
+              'cursor-not-allowed opacity-60'
+            )}
+          >
+            {element.label || 'Button'}
+          </button>
+        )
+
+      case SettingsElementInput.integration:
+        return (
+          <div
+            className={cn(
+              'flex items-center gap-3 px-3 py-2.5 rounded-lg border border-dashed',
+              'border-gray-300 bg-gray-50/50 cursor-not-allowed'
+            )}
+          >
+            <div className="flex items-center justify-center w-8 h-8 rounded-md bg-gray-100">
+              <Plug className="h-4 w-4 text-gray-400" />
+            </div>
+            <div>
+              <p className="text-sm font-medium text-gray-600">
+                {element.capability || element.vendor || 'Connect service'}
+              </p>
+              {element.vendor && <p className="text-xs text-gray-400">Vendor: {element.vendor}</p>}
+            </div>
+          </div>
+        )
+
+      case SettingsElementInput.location:
+        return <LocationField element={element} value={displayValue as PlaceValue | undefined} />
+
+      default:
+        return (
+          <div className="text-sm text-gray-400 italic p-2 bg-gray-50 rounded border border-dashed border-gray-200">
+            Unsupported input type: {element.inputType}
+          </div>
+        )
+    }
+  }
+
+  // For checkbox and switch, don't wrap in Field with label (they have inline labels)
+  if (element.inputType === SettingsElementInput.checkbox || element.inputType === SettingsElementInput.switch) {
+    return (
+      <Field>
+        {renderInput()}
+        {description && <FieldDescription>{description}</FieldDescription>}
+        <ValidationBadges element={element} />
+      </Field>
+    )
+  }
+
+  return (
+    <Field>
+      <FieldLabel htmlFor={element.id}>{label}</FieldLabel>
+      {renderInput()}
+      {description && <FieldDescription>{description}</FieldDescription>}
+      <ValidationBadges element={element} />
+    </Field>
+  )
+}
+
+function ValidationBadges({ element }: { element: SettingsElement }) {
+  const validation = element.validation
+  if (!validation) return null
+
+  const badges: React.ReactNode[] = []
+
+  if (validation.required) {
+    badges.push(
+      <span key="required" className="text-xs text-red-500">
+        Required
+      </span>
+    )
+  }
+
+  if (validation.minLength !== undefined) {
+    badges.push(
+      <span key="minLength" className="text-xs text-gray-400">
+        Min {validation.minLength} chars
+      </span>
+    )
+  }
+
+  if (validation.maxLength !== undefined) {
+    badges.push(
+      <span key="maxLength" className="text-xs text-gray-400">
+        Max {validation.maxLength} chars
+      </span>
+    )
+  }
+
+  if (validation.min !== undefined) {
+    badges.push(
+      <span key="min" className="text-xs text-gray-400">
+        Min {validation.min}
+      </span>
+    )
+  }
+
+  if (validation.max !== undefined) {
+    badges.push(
+      <span key="max" className="text-xs text-gray-400">
+        Max {validation.max}
+      </span>
+    )
+  }
+
+  if (validation.pattern) {
+    badges.push(
+      <span key="pattern" className="text-xs text-gray-400" title={validation.pattern}>
+        Pattern
+      </span>
+    )
+  }
+
+  if (badges.length === 0) return null
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 mt-1.5">
+      {badges.map((badge, index) => (
+        <React.Fragment key={index}>
+          {badge}
+          {index < badges.length - 1 && <span className="text-gray-300">·</span>}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}

package/dev-server/components/form/link-behavior-field.tsx

@@ -0,0 +1,68 @@
+import { ExternalLink, Play } from 'lucide-react'
+import type * as React from 'react'
+
+import type { SettingsElement } from '../../../src/types'
+import { cn } from '../../lib/utils'
+
+interface LinkBehaviorFieldProps {
+  element: SettingsElement
+  value?: string
+}
+
+export function LinkBehaviorField({ element, value }: LinkBehaviorFieldProps) {
+  const embedLabel = element.linkBehaviorLabels?.embedLabel || 'Embed content'
+  const linkOffLabel = element.linkBehaviorLabels?.linkOffLabel || 'Go directly to URL'
+  const selectedValue = value || element.defaultValue || 'embedLabel'
+
+  return (
+    <div className="space-y-2">
+      <LinkBehaviorOption
+        icon={<Play className="h-5 w-5" />}
+        label={embedLabel}
+        selected={selectedValue === 'embedLabel'}
+      />
+      <LinkBehaviorOption
+        icon={<ExternalLink className="h-5 w-5" />}
+        label={linkOffLabel}
+        selected={selectedValue === 'linkOffLabel'}
+      />
+    </div>
+  )
+}
+
+interface LinkBehaviorOptionProps {
+  icon: React.ReactNode
+  label: string
+  selected: boolean
+}
+
+function LinkBehaviorOption({ icon, label, selected }: LinkBehaviorOptionProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 p-3 rounded-lg border-2 transition-colors cursor-not-allowed',
+        selected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 bg-white'
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center justify-center w-10 h-10 rounded-lg',
+          selected ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-500'
+        )}
+      >
+        {icon}
+      </div>
+      <div className="flex-1">
+        <p className={cn('text-sm font-medium', selected ? 'text-blue-900' : 'text-gray-700')}>{label}</p>
+      </div>
+      <div
+        className={cn(
+          'w-5 h-5 rounded-full border-2 flex items-center justify-center',
+          selected ? 'border-blue-500' : 'border-gray-300'
+        )}
+      >
+        {selected && <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />}
+      </div>
+    </div>
+  )
+}

package/dev-server/components/form/location-field.tsx

@@ -0,0 +1,60 @@
+import { MapPin, Search } from 'lucide-react'
+import * as React from 'react'
+
+import type { PlaceValue, SettingsElement } from '../../../src/types'
+import { cn } from '../../lib/utils'
+
+interface LocationFieldProps {
+  element: SettingsElement
+  value?: PlaceValue
+}
+
+export function LocationField({ element, value }: LocationFieldProps) {
+  const placeholderText = element.placeholder || 'Search for a place...'
+  const hasValue = value?.placeId
+
+  return (
+    <div className="space-y-3">
+      {/* Search input placeholder */}
+      <div
+        className={cn(
+          'flex items-center gap-2 px-3 py-2.5 rounded-lg border',
+          'border-gray-200 bg-gray-50 cursor-not-allowed'
+        )}
+      >
+        <Search className="h-4 w-4 text-gray-400" />
+        <span className="text-sm text-gray-400">{placeholderText}</span>
+      </div>
+
+      {/* Selected place preview */}
+      {hasValue ? (
+        <div className={cn('flex items-start gap-3 p-3 rounded-lg border', 'border-blue-200 bg-blue-50')}>
+          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-blue-100">
+            <MapPin className="h-5 w-5 text-blue-600" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-gray-900 truncate">{value.name}</p>
+            <p className="text-xs text-gray-500 truncate">{value.address}</p>
+            {value.rating && (
+              <p className="text-xs text-gray-400 mt-1">
+                Rating: {value.rating}/5
+                {value.userRatingsTotal && ` (${value.userRatingsTotal} reviews)`}
+              </p>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'flex flex-col items-center justify-center py-8 rounded-lg border-2 border-dashed',
+            'border-gray-300 bg-gray-50'
+          )}
+        >
+          <MapPin className="h-8 w-8 text-gray-400 mb-2" />
+          <p className="text-sm text-gray-500">No location selected</p>
+          <p className="text-xs text-gray-400 mt-1">Google Places integration (preview mode)</p>
+        </div>
+      )}
+    </div>
+  )
+}