@linktr.ee/linkapp 0.0.48 → 0.0.49

package/dev-server/components/settings-preview.tsx

@@ -1,330 +1,166 @@
-import { LinkAppSettings, SettingsElement } from "../../src/types";
+import { Settings } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import type { LinkAppManifest, LinkAppSettings, SettingsElement } from '../../src/types'
+import { FormElement } from './form/form-element'
 
 interface SettingsPreviewProps {
-  settings: LinkAppSettings;
+  settings: LinkAppSettings
+  manifest?: Partial<LinkAppManifest>
+  previewProps?: Record<string, unknown>
 }
 
-export function SettingsPreview({ settings }: SettingsPreviewProps) {
-  return (
-    <div className="max-w-4xl mx-auto p-6 space-y-6">
-      {/* Header */}
-      <div className="space-y-2">
-        <h2 className="text-2xl font-bold">{settings.title}</h2>
-        {settings.overview && (
-          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-            {settings.overview.title && (
-              <h3 className="font-semibold text-blue-900 mb-1">
-                {settings.overview.title}
-              </h3>
-            )}
-            <p className="text-blue-800 text-sm">
-              {settings.overview.description}
-            </p>
-          </div>
-        )}
-      </div>
+export function SettingsPreview({ settings, manifest, previewProps = {} }: SettingsPreviewProps) {
+  const [iconError, setIconError] = useState(false)
 
-      {/* Metadata */}
-      <div className="grid grid-cols-2 gap-4 bg-gray-50 border border-gray-200 rounded-lg p-4">
-        <div>
-          <span className="text-sm font-medium text-gray-600">Uses URL:</span>
-          <span className="ml-2 text-sm">
-            {settings.uses_url || settings.has_url ? "Yes" : "No"}
-          </span>
-        </div>
-        <div>
-          <span className="text-sm font-medium text-gray-600">
-            Supports Featured Layout:
-          </span>
-          <span className="ml-2 text-sm">
-            {settings.supports_featured_layout ? "Yes" : "No"}
-          </span>
-        </div>
-        {settings.icon && (
-          <div>
-            <span className="text-sm font-medium text-gray-600">Icon:</span>
-            <span className="ml-2 text-sm">{settings.icon}</span>
-          </div>
-        )}
-        {settings.settings_tab_title && (
-          <div>
-            <span className="text-sm font-medium text-gray-600">
-              Settings Tab Title:
-            </span>
-            <span className="ml-2 text-sm">{settings.settings_tab_title}</span>
-          </div>
-        )}
-      </div>
+  // Build values map from preview_props merged with defaultValues
+  const values = useMemo(() => {
+    const result: Record<string, unknown> = {}
 
-      {/* Setup Instructions */}
-      {settings.setup_instructions && (
-        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
-          {settings.setup_instructions.title && (
-            <h3 className="font-semibold text-green-900 mb-1">
-              {settings.setup_instructions.title}
-            </h3>
-          )}
-          <p className="text-green-800 text-sm">
-            {settings.setup_instructions.description}
-          </p>
-        </div>
-      )}
+    // First, set default values from elements
+    for (const element of settings.elements) {
+      if (element.defaultValue !== undefined) {
+        result[element.id] = element.defaultValue
+      }
+    }
 
-      {/* Settings Elements */}
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Settings Elements</h3>
-        {settings.elements.length === 0 ? (
-          <p className="text-gray-500 italic">No settings elements defined</p>
-        ) : (
-          <div className="space-y-4">
-            {settings.elements.map((element, index) => (
-              <SettingsElementCard key={element.id} element={element} index={index} />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+    // Then, override with preview props
+    return { ...result, ...previewProps }
+  }, [settings.elements, previewProps])
 
-interface SettingsElementCardProps {
-  element: SettingsElement;
-  index: number;
-}
+  // Filter elements based on conditional display
+  const visibleElements = useMemo(() => {
+    return settings.elements.filter((element) => shouldDisplayElement(element, values))
+  }, [settings.elements, values])
 
-function SettingsElementCard({ element, index }: SettingsElementCardProps) {
   return (
-    <div className="border border-gray-300 rounded-lg p-4 bg-white shadow-sm">
-      <div className="flex items-start justify-between mb-3">
-        <div className="flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-mono bg-gray-100 px-2 py-1 rounded">
-              {index + 1}
-            </span>
-            <h4 className="font-semibold text-lg">{element.title || element.label}</h4>
-          </div>
-          <p className="text-sm text-gray-600 mt-1">
-            <span className="font-mono text-xs bg-blue-100 text-blue-800 px-1.5 py-0.5 rounded">
-              {element.id}
-            </span>
-          </p>
-        </div>
-        <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-          {element.inputType}
-        </span>
-      </div>
-
-      {element.description && (
-        <p className="text-sm text-gray-700 mb-3">{element.description}</p>
-      )}
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-        {element.placeholder && (
-          <div>
-            <span className="font-medium text-gray-600">Placeholder:</span>
-            <span className="ml-2 text-gray-800">{element.placeholder}</span>
-          </div>
-        )}
-
-        {element.defaultValue !== undefined && (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-2xl mx-auto p-6">
+        {/* Header */}
+        <div className="mb-6 flex items-start gap-3">
+          {!iconError && (
+            <img src="/app-icon.svg" alt="" className="h-8 w-8 shrink-0" onError={() => setIconError(true)} />
+          )}
           <div>
-            <span className="font-medium text-gray-600">Default Value:</span>
-            <span className="ml-2 text-gray-800 font-mono text-xs">
-              {typeof element.defaultValue === "boolean"
-                ? element.defaultValue.toString()
-                : Array.isArray(element.defaultValue)
-                  ? `[${element.defaultValue.join(", ")}]`
-                  : element.defaultValue}
-            </span>
+            <h1 className="text-xl font-semibold text-gray-900">{manifest?.name || settings.title}</h1>
+            {(manifest?.tagline || settings.overview?.description) && (
+              <p className="mt-1 text-sm text-gray-500">{manifest?.tagline || settings.overview?.description}</p>
+            )}
           </div>
-        )}
+        </div>
 
-        {element.validation && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Validation:</span>
-            <div className="ml-2 mt-1 space-y-1">
-              {element.validation.required && (
-                <div className="text-xs">
-                  <span className="bg-red-100 text-red-800 px-2 py-0.5 rounded">
-                    Required
-                  </span>
-                </div>
-              )}
-              {element.validation.minLength !== undefined && (
-                <div className="text-xs text-gray-600">
-                  Min Length: {element.validation.minLength}
-                </div>
-              )}
-              {element.validation.maxLength !== undefined && (
-                <div className="text-xs text-gray-600">
-                  Max Length: {element.validation.maxLength}
-                </div>
-              )}
-              {element.validation.min !== undefined && (
-                <div className="text-xs text-gray-600">
-                  Min: {element.validation.min}
-                </div>
-              )}
-              {element.validation.max !== undefined && (
-                <div className="text-xs text-gray-600">
-                  Max: {element.validation.max}
-                </div>
-              )}
-              {element.validation.maxSize !== undefined && (
-                <div className="text-xs text-gray-600">
-                  Max Size: {element.validation.maxSize}
-                </div>
-              )}
-              {element.validation.pattern && (
-                <div className="text-xs text-gray-600 font-mono">
-                  Pattern: {element.validation.pattern}
-                </div>
-              )}
+        {/* Form Card */}
+        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+          {/* Form Header */}
+          <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
+            <div className="flex items-center justify-between">
+              <h2 className="font-semibold text-gray-900">Settings</h2>
+              <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-500">
+                Preview Mode
+              </span>
             </div>
           </div>
-        )}
 
-        {element.options && element.options.length > 0 && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Options:</span>
-            <div className="ml-2 mt-1 space-y-1">
-              {element.options.map((option) => (
-                <div key={option.value} className="text-xs bg-gray-50 px-2 py-1 rounded">
-                  <span className="font-mono text-blue-700">{option.value}</span>
-                  <span className="mx-1 text-gray-400">→</span>
-                  <span>{option.label}</span>
+          {/* Form Content */}
+          <div className="p-6">
+            {visibleElements.length === 0 ? (
+              <div className="text-center py-12">
+                <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
+                  <Settings className="h-6 w-6 text-gray-400" />
                 </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {element.linkBehaviorLabels && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Link Behavior Labels:</span>
-            <div className="ml-2 mt-1 space-y-1">
-              <div className="text-xs">
-                <span className="font-medium">Embed:</span> {element.linkBehaviorLabels.embedLabel}
+                <p className="text-sm text-gray-500 font-medium">No settings defined</p>
+                <p className="text-xs text-gray-400 mt-1">Add elements to your config to preview the form</p>
               </div>
-              <div className="text-xs">
-                <span className="font-medium">Link Off:</span> {element.linkBehaviorLabels.linkOffLabel}
+            ) : (
+              <div className="space-y-6">
+                {visibleElements.map((element) => (
+                  <FormElement key={element.id} element={element} value={values[element.id]} />
+                ))}
               </div>
-            </div>
-          </div>
-        )}
-
-        {element.accept && element.accept.length > 0 && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Accepted Files:</span>
-            <span className="ml-2 text-xs font-mono">
-              {element.accept.join(", ")}
-            </span>
-          </div>
-        )}
-
-        {element.multiple && (
-          <div>
-            <span className="bg-orange-100 text-orange-800 px-2 py-0.5 rounded text-xs">
-              Multiple values allowed
-            </span>
-          </div>
-        )}
-
-        {element.capability && (
-          <div>
-            <span className="font-medium text-gray-600">Integration Capability:</span>
-            <span className="ml-2 text-xs">{element.capability}</span>
-          </div>
-        )}
-
-        {element.vendor && (
-          <div>
-            <span className="font-medium text-gray-600">Vendor:</span>
-            <span className="ml-2 text-xs">{element.vendor}</span>
+            )}
           </div>
-        )}
+        </div>
 
-        {element.array_options && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Array Options:</span>
-            <div className="ml-2 mt-1 space-y-1 text-xs">
-              {element.array_options.add_item_button_text && (
-                <div>Add Button: "{element.array_options.add_item_button_text}"</div>
-              )}
-              {element.array_options.add_item_title && (
-                <div>Add Title: "{element.array_options.add_item_title}"</div>
-              )}
-              {element.array_options.edit_item_title && (
-                <div>Edit Title: "{element.array_options.edit_item_title}"</div>
-              )}
-              {element.array_options.item_format && (
-                <div>Item Format: "{element.array_options.item_format}"</div>
-              )}
-              {element.array_options.min !== undefined && (
-                <div>Min Items: {element.array_options.min}</div>
-              )}
-              {element.array_options.max !== undefined && (
-                <div>Max Items: {element.array_options.max}</div>
-              )}
-            </div>
-          </div>
-        )}
+        {/* Metadata Card */}
+        <MetadataSummary settings={settings} />
+      </div>
+    </div>
+  )
+}
 
-        {element.array_elements && element.array_elements.length > 0 && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Array Elements:</span>
-            <div className="ml-2 mt-2 space-y-2">
-              {element.array_elements.map((arrayElement, arrayIndex) => (
-                <div key={arrayElement.id} className="bg-gray-50 border border-gray-200 rounded p-3">
-                  <div className="text-xs font-mono text-blue-700 mb-1">
-                    {arrayElement.id}
-                  </div>
-                  <div className="text-xs">
-                    <span className="font-medium">Type:</span> {arrayElement.inputType}
-                  </div>
-                  {arrayElement.label && (
-                    <div className="text-xs">
-                      <span className="font-medium">Label:</span> {arrayElement.label}
-                    </div>
-                  )}
-                  {arrayElement.placeholder && (
-                    <div className="text-xs">
-                      <span className="font-medium">Placeholder:</span> {arrayElement.placeholder}
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
+interface MetadataSummaryProps {
+  settings: LinkAppSettings
+}
 
-        {element.conditionalDisplay && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Conditional Display:</span>
-            <div className="ml-2 mt-1 text-xs bg-yellow-50 border border-yellow-200 rounded p-2">
-              Depends on <span className="font-mono">{element.conditionalDisplay.dependsOn}</span>
-              {" "}
-              {element.conditionalDisplay.operator || "equals"}
-              {" "}
-              <span className="font-mono">{String(element.conditionalDisplay.value)}</span>
-            </div>
-          </div>
-        )}
+function MetadataSummary({ settings }: MetadataSummaryProps) {
+  const metadata = [
+    {
+      label: 'Uses URL',
+      value: settings.uses_url || settings.has_url ? 'Yes' : 'No',
+    },
+    settings.featured_chin_position && {
+      label: 'Chin Position',
+      value: settings.featured_chin_position,
+    },
+    settings.sheet_behavior && {
+      label: 'Sheet Behavior',
+      value: settings.sheet_behavior,
+    },
+    settings.featured_head_click_behavior && {
+      label: 'Click Behavior',
+      value: settings.featured_head_click_behavior,
+    },
+    settings.icon && { label: 'Icon', value: settings.icon },
+  ].filter(Boolean) as Array<{ label: string; value: string }>
+
+  if (metadata.length === 0) return null
 
-        {element.action && (
-          <div className="col-span-2">
-            <span className="font-medium text-gray-600">Action:</span>
-            <div className="ml-2 mt-1 text-xs">
-              On {element.action.on}: {element.action.type}
-              {element.action.data && (
-                <div className="font-mono text-xs mt-1 bg-gray-50 p-1 rounded">
-                  {JSON.stringify(element.action.data, null, 2)}
-                </div>
-              )}
+  return (
+    <div className="mt-6 bg-white rounded-xl border border-gray-200 overflow-hidden">
+      <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
+        <h3 className="font-semibold text-gray-900 text-sm">Configuration</h3>
+      </div>
+      <div className="p-6">
+        <div className="grid grid-cols-2 gap-4">
+          {metadata.map(({ label, value }) => (
+            <div key={label} className="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-50">
+              <span className="text-sm text-gray-500">{label}</span>
+              <span className="text-sm font-medium text-gray-900">{value}</span>
             </div>
-          </div>
-        )}
+          ))}
+        </div>
       </div>
     </div>
-  );
+  )
+}
+
+/**
+ * Evaluates conditional display rules to determine if an element should be shown
+ */
+function shouldDisplayElement(element: SettingsElement, values: Record<string, unknown>): boolean {
+  // New format (preferred): conditional with fieldId and values array
+  if (element.conditional) {
+    const { fieldId, values: allowedValues } = element.conditional
+    const currentValue = values[fieldId]
+    return allowedValues.some((v) => v === currentValue)
+  }
+
+  // Legacy format (deprecated): conditionalDisplay with dependsOn, value, operator
+  if (element.conditionalDisplay) {
+    const { dependsOn, value, operator = 'equals' } = element.conditionalDisplay
+    const currentValue = values[dependsOn]
+
+    switch (operator) {
+      case 'equals':
+        return currentValue === value
+      case 'notEquals':
+        return currentValue !== value
+      case 'contains':
+        return typeof currentValue === 'string' && typeof value === 'string' && currentValue.includes(value)
+      default:
+        return true
+    }
+  }
+
+  return true
 }

package/dev-server/components/ui/checkbox.tsx

@@ -0,0 +1,29 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '../../lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 shadow-sm',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-[state=checked]:text-white',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-3.5 w-3.5" strokeWidth={3} />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/dev-server/components/ui/dialog.tsx

@@ -50,9 +50,7 @@ function DialogContent({
         )}
         {...props}
       >
-        <div className="flex h-full flex-col">
-          {children}
-        </div>
+        <div className="flex h-full flex-col">{children}</div>
 
         {showCloseButton && (
           <DialogPrimitive.Close
@@ -69,13 +67,7 @@ function DialogContent({
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn(className)}
-      {...props}
-    />
-  )
+  return <div data-slot="dialog-header" className={cn(className)} {...props} />
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {

package/dev-server/components/ui/field.tsx

@@ -1,62 +1,37 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "../../lib/utils"
-import { Label } from "./label"
+import { cn } from '../../lib/utils'
+import { Label } from './label'
 
 interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
-  orientation?: "vertical" | "horizontal"
+  orientation?: 'vertical' | 'horizontal'
 }
 
-const Field = React.forwardRef<HTMLDivElement, FieldProps>(
-  ({ className, orientation = "vertical", ...props }, ref) => (
-    <div
-      ref={ref}
-      role="group"
-      className={cn(
-        "space-y-2",
-        orientation === "horizontal" && "flex items-start gap-3 space-y-0",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Field.displayName = "Field"
-
-const FieldLabel = React.forwardRef<
-  React.ElementRef<typeof Label>,
-  React.ComponentPropsWithoutRef<typeof Label>
->(({ className, ...props }, ref) => (
-  <Label
+const Field = React.forwardRef<HTMLDivElement, FieldProps>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <div
     ref={ref}
-    className={cn("text-sm font-medium text-gray-900", className)}
+    role="group"
+    className={cn('space-y-2', orientation === 'horizontal' && 'flex items-start gap-3 space-y-0', className)}
     {...props}
   />
 ))
-FieldLabel.displayName = "FieldLabel"
+Field.displayName = 'Field'
 
-const FieldDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-gray-500", className)}
-    {...props}
-  />
-))
-FieldDescription.displayName = "FieldDescription"
+const FieldLabel = React.forwardRef<React.ElementRef<typeof Label>, React.ComponentPropsWithoutRef<typeof Label>>(
+  ({ className, ...props }, ref) => (
+    <Label ref={ref} className={cn('text-sm font-medium text-gray-900', className)} {...props} />
+  )
+)
+FieldLabel.displayName = 'FieldLabel'
 
-const FieldError = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-red-500", className)}
-    {...props}
-  />
-))
-FieldError.displayName = "FieldError"
+const FieldDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => <p ref={ref} className={cn('text-sm text-gray-500', className)} {...props} />
+)
+FieldDescription.displayName = 'FieldDescription'
+
+const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => <p ref={ref} className={cn('text-sm text-red-500', className)} {...props} />
+)
+FieldError.displayName = 'FieldError'
 
 export { Field, FieldLabel, FieldDescription, FieldError }