feat: link field, closes #31

app/lib/fields/field.server.ts

@@ -1,6 +1,7 @@
 import {attachmentFieldHandlers} from './attachment.server'
 import {dateFieldHandlers} from './date.server'
 import {imageFieldHandlers} from './image.server'
+import {linkFieldHandlers} from './link.server'
 import {markdownFieldHandlers} from './markdown.server'
 import {relationFieldHandlers} from './relation.server'
 import {selectFieldHandlers} from './select.server'
@@ -20,6 +21,7 @@ export const FIELD_HANDLERS: {[type: string]: FieldHandlers} = {
   attachment: attachmentFieldHandlers,
   date: dateFieldHandlers,
   image: imageFieldHandlers,
+  link: linkFieldHandlers,
   markdown: markdownFieldHandlers,
   relation: relationFieldHandlers,
   select: selectFieldHandlers,

app/lib/fields/field.ts

@@ -1,6 +1,7 @@
 import {attachmentField} from './attachment'
 import {dateField} from './date'
 import {imageField} from './image'
+import {linkField} from './link'
 import {markdownField} from './markdown'
 import {relationField} from './relation'
 import {selectField} from './select'
@@ -51,13 +52,15 @@ export const FIELD_TYPES = [
   'relation',
   'markdown',
   'date',
-  'image'
+  'image',
+  'link'
 ] as const
 
 export const FIELDS: {[type: string]: Field} = {
   attachment: attachmentField,
   date: dateField,
   image: imageField,
+  link: linkField,
   markdown: markdownField,
   relation: relationField,
   select: selectField,

app/lib/fields/link.server.tsx

@@ -0,0 +1,12 @@
+import {type FieldHandlers} from './field.server'
+
+export const linkFieldHandlers: FieldHandlers = {
+  valueSetter: (formData, name) => {
+    return JSON.stringify({
+      title: formData.get(`${name}-title`) as string,
+      target: formData.get(`${name}-target`) as string
+    })
+  },
+  valueGetter: value => value,
+  metaSave: () => ''
+}

app/lib/fields/link.tsx

@@ -0,0 +1,65 @@
+import {Label, Input, HelperText} from '../components/input'
+
+import {type Field} from './field'
+
+const editComponent: Field['editComponent'] = ({
+  value,
+  name,
+  label,
+  helperText,
+  validation
+}) => {
+  const {title: linkTitle, target} =
+    value === '' ? {title: '', target: ''} : JSON.parse(value)
+
+  return (
+    <Label>
+      {label}
+      <Input
+        name={`${name}-title`}
+        defaultValue={linkTitle}
+        required={validation.required}
+        placeholder="Link Text"
+      />
+      <Input
+        name={`${name}-target`}
+        defaultValue={target}
+        required={validation.required}
+        placeholder="https://..."
+      />
+      <HelperText>{helperText}</HelperText>
+    </Label>
+  )
+}
+
+const viewComponent = ({value, title}: {value: string; title: string}) => {
+  const {title: linkTitle, target} = JSON.parse(value)
+
+  return (
+    <div className="mb-4">
+      <div className="mb-4 font-bold block">{title}</div>
+      <a href={target} className="bg-gray-300 p-2 rounded" target="_blank">
+        {linkTitle} 📤
+      </a>
+    </div>
+  )
+}
+
+const metaComponent = () => <></>
+
+const listComponent = ({value}: {value: string; title: string}) => {
+  const {title: linkTitle, target} = JSON.parse(value)
+
+  return (
+    <a href={target} className="bg-gray-300 p-2 rounded" target="_blank">
+      {linkTitle} 📤
+    </a>
+  )
+}
+
+export const linkField: Field = {
+  editComponent,
+  viewComponent,
+  listComponent,
+  metaComponent
+}

app/lib/fields/relation.tsx

@@ -118,7 +118,7 @@ const ViewComponent: Field['viewComponent'] = ({value, title, meta}) => {
   if (isPending) {
     return (
       <p className="mb-4">
-        <h5 className="mb-2 font-bold">{title}</h5>
+        <span className="mb-2 font-bold">{title}</span>
         Loading...
       </p>
     )
@@ -127,7 +127,7 @@ const ViewComponent: Field['viewComponent'] = ({value, title, meta}) => {
   if (error) {
     return (
       <p className="mb-4">
-        <h5 className="mb-2 font-bold">{title}</h5>
+        <span className="mb-2 font-bold">{title}</span>
         Could not load relation
       </p>
     )

app/routes/app.field-manager.add.tsx

@@ -82,6 +82,7 @@ const FieldManagerAdd = () => {
             <option value="attachment">Attachment</option>
             <option value="date">Date</option>
             <option value="image">Image</option>
+            <option value="link">Link</option>
             <option value="markdown">Markdown</option>
             <option value="relation">Relation</option>
             <option value="select">Select</option>