Airtable: add Lookup, Rollup, Barcode, AI Text, User, and Duration fields

plugins/airtable/src/App.css

@@ -12,14 +12,6 @@ form {
     -webkit-user-select: none;
 }
 
-select:disabled {
-    opacity: 0.5;
-}
-
-select:not(:disabled) {
-    cursor: pointer;
-}
-
 .sticky-top {
     position: sticky;
     top: 0;
@@ -53,13 +45,6 @@ select:not(:disabled) {
     border-radius: 10px;
 }
 
-.setup-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    width: 100%;
-}
-
 .setup label {
     display: flex;
     flex-direction: row;
@@ -81,7 +66,7 @@ select:not(:disabled) {
 
 .mapping .fields {
     display: grid;
-    grid-template-columns: 1fr 8px 1fr 1fr;
+    grid-template-columns: 1fr 8px 1fr 8px 1fr;
     gap: 10px;
     margin-bottom: auto;
     padding-bottom: 10px;
@@ -99,6 +84,10 @@ select:not(:disabled) {
     color: var(--framer-color-text-tertiary);
 }
 
+.mapping .field-type-select {
+    width: 100%;
+}
+
 .mapping .source-field {
     display: flex;
     flex-direction: row;
@@ -127,44 +116,6 @@ select:not(:disabled) {
     box-shadow: none;
 }
 
-.mapping .unsupported-field {
-    grid-column: span 2;
-    background-color: var(--framer-color-bg-tertiary);
-    border-radius: 8px;
-    padding: 0px 10px;
-    height: 30px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    opacity: 0.5;
-    color: var(--framer-color-text-secondary);
-}
-
-.mapping .field-type-select {
-    width: 100%;
-}
-
-.mapping .heading-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.mapping .heading-link {
-    width: fit-content;
-    max-width: 50%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-}
-
-.mapping .heading-link:hover {
-    text-decoration: underline;
-}
-
 .mapping footer {
     position: sticky;
     bottom: 0;

plugins/airtable/src/App.tsx

@@ -26,8 +26,8 @@ export function App({ collection, previousBaseId, previousTableId, previousSlugF
         const hasDataSourceSelected = Boolean(dataSource)
 
         framer.showUI({
-            width: hasDataSourceSelected ? 425 : 320,
-            height: hasDataSourceSelected ? 425 : 345,
+            width: hasDataSourceSelected ? 360 : 320,
+            height: hasDataSourceSelected ? 425 : 350,
             minWidth: hasDataSourceSelected ? 360 : undefined,
             minHeight: hasDataSourceSelected ? 425 : undefined,
             resizable: hasDataSourceSelected,

plugins/airtable/src/FieldMapping.tsx

@@ -23,14 +23,14 @@ function ChevronIcon() {
 }
 
 const fieldTypeOptions: { type: Field["type"]; label: string }[] = [
-    { type: "string", label: "Plain Text" },
-    { type: "formattedText", label: "Formatted Text" },
-    { type: "date", label: "Date" },
-    { type: "link", label: "Link" },
-    { type: "image", label: "Image" },
+    { type: "boolean", label: "Boolean" },
     { type: "color", label: "Color" },
-    { type: "boolean", label: "Toggle" },
     { type: "number", label: "Number" },
+    { type: "string", label: "String" },
+    { type: "formattedText", label: "Formatted Text" },
+    { type: "image", label: "Image" },
+    { type: "link", label: "Link" },
+    { type: "date", label: "Date" },
     { type: "enum", label: "Option" },
     { type: "file", label: "File" },
 ]
@@ -40,48 +40,21 @@ interface FieldMappingRowProps {
     originalFieldName: string | undefined
     isIgnored: boolean
     disabled: boolean
-    unsupported?: boolean
-    missingCollection?: boolean
     onToggleIgnored?: (fieldId: string) => void
     onNameChange?: (fieldId: string, name: string) => void
     onTypeChange?: (fieldId: string, type: string) => void
 }
 
-interface SelectOption {
-    id: string
-    label: string
-}
-
 const FieldMappingRow = memo(
     ({
         field,
         originalFieldName,
         isIgnored,
         disabled,
-        unsupported,
-        missingCollection,
         onToggleIgnored,
         onNameChange,
         onTypeChange,
     }: FieldMappingRowProps) => {
-        let selectOptions: SelectOption[] = []
-        if (!unsupported && !missingCollection) {
-            if (isCollectionReference(field)) {
-                selectOptions = field.supportedCollections.map(collection => ({
-                    id: collection.id,
-                    label: collection.name,
-                }))
-            } else if (Array.isArray(field.allowedTypes)) {
-                selectOptions = field.allowedTypes.map(type => {
-                    const capitalizedType = type.charAt(0).toUpperCase() + type.slice(1)
-                    return {
-                        id: type,
-                        label: fieldTypeOptions.find(option => option.type === type)?.label ?? capitalizedType,
-                    }
-                })
-            }
-        }
-
         return (
             <>
                 <button
@@ -90,55 +63,67 @@ const FieldMappingRow = memo(
                     aria-disabled={isIgnored}
                     onClick={disabled ? undefined : () => onToggleIgnored?.(field.id)}
                     tabIndex={0}
-                    disabled={disabled || unsupported || missingCollection}
+                    disabled={disabled}
                 >
                     <input type="checkbox" checked={!isIgnored} tabIndex={-1} readOnly disabled={disabled} />
                     <span>{originalFieldName ?? field.id}</span>
                 </button>
                 <ChevronIcon />
-                {unsupported || missingCollection ? (
-                    <div className="unsupported-field">{unsupported ? "Unsupported Field" : "Missing Collection"}</div>
-                ) : (
-                    <>
-                        <select
-                            disabled={isIgnored || disabled || selectOptions.length <= 1}
-                            value={isCollectionReference(field) ? field.collectionId : field.type}
-                            onChange={event => onTypeChange?.(field.id, event.target.value)}
-                            className="field-type-select"
-                        >
-                            {selectOptions.map(option => (
-                                <option key={option.id} value={option.id}>
-                                    {option.label}
+                <input
+                    type="text"
+                    style={{
+                        width: "100%",
+                        opacity: isIgnored || disabled ? 0.5 : 1,
+                    }}
+                    disabled={isIgnored || disabled}
+                    placeholder={field.id}
+                    value={field.name}
+                    onChange={event => onNameChange?.(field.id, event.target.value)}
+                    onKeyDown={event => {
+                        if (event.key === "Enter") {
+                            event.preventDefault()
+                        }
+                    }}
+                />
+                <ChevronIcon />
+                <select
+                    className="field-type-select"
+                    style={{
+                        opacity: isIgnored || disabled ? 0.5 : 1,
+                    }}
+                    disabled={isIgnored || disabled}
+                    value={isCollectionReference(field) ? field.collectionId : field.type}
+                    onChange={event => onTypeChange?.(field.id, event.target.value)}
+                >
+                    {isCollectionReference(field) && (
+                        <>
+                            {field.supportedCollections.length === 0 && (
+                                <option value="unsupported">Unsupported</option>
+                            )}
+                            {field.supportedCollections.map(collection => (
+                                <option key={collection.id} value={collection.id}>
+                                    {collection.name}
                                 </option>
                             ))}
-                        </select>
-                        <input
-                            type="text"
-                            style={{
-                                width: "100%",
-                                opacity: isIgnored || disabled ? 0.5 : 1,
-                            }}
-                            disabled={isIgnored || disabled}
-                            placeholder={originalFieldName ?? field.id}
-                            value={field.name}
-                            onChange={event => onNameChange?.(field.id, event.target.value)}
-                            onKeyDown={event => {
-                                if (event.key === "Enter") {
-                                    event.preventDefault()
-                                }
-                            }}
-                        />
-                    </>
-                )}
+                        </>
+                    )}
+                    {!isCollectionReference(field) &&
+                        field.allowedTypes?.map(type => {
+                            const capitalizedType =
+                                typeof type === "string" ? type.charAt(0).toUpperCase() + type.slice(1) : ""
+
+                            return (
+                                <option key={type} value={type}>
+                                    {fieldTypeOptions.find(option => option.type === type)?.label ?? capitalizedType}
+                                </option>
+                            )
+                        })}
+                </select>
             </>
         )
     }
 )
 
-function isFieldMissingCollection(field: PossibleField): boolean {
-    return isCollectionReference(field) && field.supportedCollections.length === 0
-}
-
 const initialManagedCollectionFields: PossibleField[] = []
 const initialFieldIds: ReadonlySet<string> = new Set()
 
@@ -234,8 +219,16 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                         return { ...field, type: "string" } as PossibleField
                     case "formattedText":
                         return { ...field, type: "formattedText" } as PossibleField
+                    case "number":
+                        return { ...field, type: "number" } as PossibleField
+                    case "boolean":
+                        return { ...field, type: "boolean" } as PossibleField
                     case "color":
                         return { ...field, type: "color" } as PossibleField
+                    case "date":
+                        return { ...field, type: "date" } as PossibleField
+                    case "enum":
+                        return { ...field, type: "enum" } as PossibleField
                     default:
                         return field
                 }
@@ -274,10 +267,13 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
 
             const fieldsToSync = fields
                 .filter(field => !ignoredFieldIds.has(field.id))
-                .map(field => ({
-                    ...field,
-                    name: field.name.trim() || field.id,
-                }))
+                .map(field => {
+                    const originalFieldName = dataSource.fields.find(sourceField => sourceField.id === field.id)?.name
+                    return {
+                        ...field,
+                        name: field.name.trim() || originalFieldName || field.id,
+                    }
+                })
                 .filter(field => field.type !== "unsupported")
                 .filter(
                     field =>
@@ -313,18 +309,8 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
     return (
         <form className="framer-hide-scrollbar mapping" onSubmit={handleSubmit}>
             <hr className="sticky-top" />
-
             <label className="slug-field" htmlFor="slugField">
-                <div className="heading-row">
-                    <span>Slug Field</span>
-                    <a
-                        href={`https://airtable.com/${dataSource.baseId}/${dataSource.tableId}`}
-                        target="_blank"
-                        className="heading-link"
-                    >
-                        View in Airtable
-                    </a>
-                </div>
+                Slug Field
                 <select
                     required
                     name="slugField"
@@ -351,10 +337,14 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
 
             <div className="fields">
                 <span className="column-span-2">Column</span>
+                <span className="column-span-2">Field</span>
                 <span>Type</span>
-                <span>Name</span>
                 {fields
-                    .filter(field => field.type !== "unsupported" && !isFieldMissingCollection(field))
+                    .filter(
+                        field =>
+                            field.type !== "unsupported" &&
+                            (!isCollectionReference(field) || field.supportedCollections.length > 0)
+                    )
                     .map(field => (
                         <FieldMappingRow
                             key={`field-${field.id}`}
@@ -367,23 +357,19 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                             onTypeChange={changeFieldType}
                         />
                     ))}
-                {fields.filter(isFieldMissingCollection).map(field => (
-                    <FieldMappingRow
-                        key={`field-${field.id}`}
-                        field={field}
-                        missingCollection
-                        originalFieldName={dataSource.fields.find(sourceField => sourceField.id === field.id)?.name}
-                        isIgnored={true}
-                        disabled={!isAllowedToManage}
-                    />
-                ))}
                 {fields
-                    .filter(field => field.type === "unsupported")
+                    .filter(
+                        field =>
+                            (isCollectionReference(field) && field.supportedCollections.length === 0) ||
+                            field.type === "unsupported"
+                    )
                     .map(field => (
                         <FieldMappingRow
                             key={`field-${field.id}`}
-                            field={field}
-                            unsupported
+                            field={{
+                                ...field,
+                                name: isCollectionReference(field) ? "Missing Collection" : "Unsupported field",
+                            }}
                             originalFieldName={dataSource.fields.find(sourceField => sourceField.id === field.id)?.name}
                             isIgnored={true}
                             disabled={!isAllowedToManage}
@@ -399,13 +385,7 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                     tabIndex={0}
                     title={isAllowedToManage ? undefined : "Insufficient permissions"}
                 >
-                    {isSyncing ? (
-                        <div className="framer-spinner" />
-                    ) : (
-                        <span>
-                            Import <span style={{ textTransform: "capitalize" }}>{dataSource.tableName}</span>
-                        </span>
-                    )}
+                    {isSyncing ? <div className="framer-spinner" /> : <span>Import {dataSource.tableName}</span>}
                 </button>
             </footer>
         </form>