Remove MaybeBase64Field, use StringField for cardThumbnailURL

lucaslyl · claude · lucaslyl · commit 24941df202ca · 2026-04-07T16:53:08.000+08:00
MaybeBase64Field was a StringField subclass whose only purpose was to
display "(Base64 encoded value)" instead of raw data. Now that
cardThumbnail (ImageDef) exists as the proper image field, the workaround
is no longer needed. Replace all usages with plain StringField and update
test snapshots accordingly.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/docs/spec.md b/docs/spec.md
@@ -64,7 +64,6 @@ Each spec type has specific characteristics and use cases:
 
 **Example Use Cases**:
 - `SocialMediaLink` - Composite field for social platform data
-- `MaybeBase64Field` - String field with base64 encoding capabilities
 - `TextAreaField` - Multi-line text input field
 - `GeoPointField` - Coordinate field for maps
 
diff --git a/packages/base/card-api.gts b/packages/base/card-api.gts
@@ -2631,23 +2631,6 @@ export function getDefaultFileMenuItems(
   return menuItems;
 }
 
-// TODO: This is a simple workaround until the thumbnailURL is converted into an actual image field
-export class MaybeBase64Field extends StringField {
-  static embedded = class Embedded extends Component<typeof this> {
-    get isBase64() {
-      return this.args.model?.startsWith('data:');
-    }
-    <template>
-      {{#if this.isBase64}}
-        <em>(Base64 encoded value)</em>
-      {{else}}
-        {{@model}}
-      {{/if}}
-    </template>
-  };
-  static atom = MaybeBase64Field.embedded;
-}
-
 // ImageDef
 class Isolated extends Component<typeof ImageDef> {
   <template>
@@ -2954,7 +2937,7 @@ export class CardInfoField extends FieldDef {
   @field name = contains(StringField);
   @field summary = contains(StringField);
   @field cardThumbnail = linksTo(() => ImageDef);
-  @field cardThumbnailURL = contains(MaybeBase64Field);
+  @field cardThumbnailURL = contains(StringField);
   @field theme = linksTo(() => Theme);
   @field notes = contains(MarkdownField);
 }
@@ -2992,10 +2975,7 @@ export class CardDef extends BaseDef {
       return this.cardInfo.summary;
     },
   });
-  // TODO: this will probably be an image or image url field card when we have it
-  // UPDATE: we now have a Base64ImageField card. we can probably refactor this
-  // to use it directly now (or wait until a better image field comes along)
-  @field cardThumbnailURL = contains(MaybeBase64Field, {
+  @field cardThumbnailURL = contains(StringField, {
     computeVia: function (this: CardDef) {
       return this.cardInfo.cardThumbnailURL;
     },
diff --git a/packages/experiments-realm/puppy-card.gts b/packages/experiments-realm/puppy-card.gts
@@ -1,7 +1,6 @@
 import Base64ImageField from 'https://cardstack.com/base/base64-image';
 import StringField from 'https://cardstack.com/base/string';
 import {
-  MaybeBase64Field,
   CardDef,
   field,
   contains,
@@ -18,7 +17,7 @@ export class PuppyCard extends CardDef {
       return this.name;
     },
   });
-  @field cardThumbnailURL = contains(MaybeBase64Field, {
+  @field cardThumbnailURL = contains(StringField, {
     computeVia: function (this: PuppyCard) {
       return this.picture.base64;
     },
diff --git a/packages/host/tests/cards/puppy-card.gts b/packages/host/tests/cards/puppy-card.gts
@@ -1,6 +1,5 @@
 import Base64ImageField from 'https://cardstack.com/base/base64-image';
 import {
-  MaybeBase64Field,
   CardDef,
   field,
   contains,
@@ -16,7 +15,7 @@ export class PuppyCard extends CardDef {
       return this.name;
     },
   });
-  @field cardThumbnailURL = contains(MaybeBase64Field, {
+  @field cardThumbnailURL = contains(StringField, {
     computeVia: function (this: PuppyCard) {
       return this.picture.base64;
     },
diff --git a/packages/host/tests/helpers/base-realm.ts b/packages/host/tests/helpers/base-realm.ts
@@ -93,7 +93,6 @@ let containsMany: (typeof CardAPIModule)['containsMany'];
 let isCard: (typeof CardAPIModule)['isCard'];
 let linksTo: (typeof CardAPIModule)['linksTo'];
 let linksToMany: (typeof CardAPIModule)['linksToMany'];
-let MaybeBase64Field: (typeof CardAPIModule)['MaybeBase64Field'];
 let createFromSerialized: (typeof CardAPIModule)['createFromSerialized'];
 let updateFromSerialized: (typeof CardAPIModule)['updateFromSerialized'];
 let serializeCard: (typeof CardAPIModule)['serializeCard'];
@@ -229,7 +228,6 @@ async function initialize() {
     unsubscribeFromChanges,
     flushLogs,
     queryableValue,
-    MaybeBase64Field,
     getFieldDescription,
     ReadOnlyField,
     instanceOf,
@@ -280,7 +278,6 @@ export {
   isCard,
   linksTo,
   linksToMany,
-  MaybeBase64Field,
   createFromSerialized,
   updateFromSerialized,
   serializeCard,
diff --git a/packages/host/tests/integration/components/card-basics-test.gts b/packages/host/tests/integration/components/card-basics-test.gts
@@ -74,7 +74,6 @@ import {
   linksTo,
   linksToMany,
   MarkdownField,
-  MaybeBase64Field,
   NumberField,
   PhoneNumberField,
   queryableValue,
@@ -1215,7 +1214,7 @@ module('Integration | card-basics', function (hooks) {
             return this.firstName;
           },
         });
-        @field cardThumbnailURL = contains(MaybeBase64Field, {
+        @field cardThumbnailURL = contains(StringField, {
           computeVia: function (this: Person) {
             return this.image.base64;
           },
@@ -1273,7 +1272,7 @@ module('Integration | card-basics', function (hooks) {
             return this.firstName;
           },
         });
-        @field cardThumbnailURL = contains(MaybeBase64Field, {
+        @field cardThumbnailURL = contains(StringField, {
           computeVia: function (this: Person) {
             return this.image.base64;
           },
diff --git a/packages/realm-server/tests/helpers/index.ts b/packages/realm-server/tests/helpers/index.ts
@@ -2080,7 +2080,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: true,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2116,7 +2116,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: false,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2170,7 +2170,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: true,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2206,7 +2206,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: false,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2296,7 +2296,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: false,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2341,7 +2341,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: true,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2404,7 +2404,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: false,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2449,7 +2449,7 @@ export const cardDefinition: Definition['fields'] = {
     type: 'contains',
     isComputed: true,
     fieldOrCard: {
-      name: 'MaybeBase64Field',
+      name: 'StringField',
       module: 'https://cardstack.com/base/card-api',
     },
     isPrimitive: true,
@@ -2514,7 +2514,7 @@ export const cardDefinition: Definition['fields'] = {
       type: 'contains',
       isComputed: false,
       fieldOrCard: {
-        name: 'MaybeBase64Field',
+        name: 'StringField',
         module: 'https://cardstack.com/base/card-api',
       },
       isPrimitive: true,
@@ -2552,7 +2552,7 @@ export const cardDefinition: Definition['fields'] = {
       type: 'contains',
       isComputed: true,
       fieldOrCard: {
-        name: 'MaybeBase64Field',
+        name: 'StringField',
         module: 'https://cardstack.com/base/card-api',
       },
       isPrimitive: true,
