Add PolymorphicFieldExample with TestField</s> listing

FieldListing/0355feb3-993a-4ede-9cf2-3d013a8b9936.json

@@ -0,0 +1,74 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "FieldListing",
+        "module": "https://realms-staging.stack.cards/catalog/catalog-app/listing/listing"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "name": "PolymorphicFieldExample with TestField</s>",
+      "images": [],
+      "summary": "The TestField component defines a polymorphic custom field used within cards to manage a string value called firstName. It provides multiple variations of its visual representation, including fitted and embedded versions, to adapt to different UI contexts. It serves as a flexible, reusable field type that can be included in other card definitions. The primary purpose of the TestField and its subclasses is to demonstrate customizable, component-based field definitions and their integration within card structures. The PolymorphicFieldExample illustrates how such a field can be embedded within a card, including the ability to dynamically change its subclass, facilitating flexible data modeling and UI rendering within the card system.",
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      }
+    },
+    "relationships": {
+      "tags.0": {
+        "links": {
+          "self": "https://realms-staging.stack.cards/catalog/Tag/51de249c-516a-4c4d-bd88-76e88274c483"
+        }
+      },
+      "tags.1": {
+        "links": {
+          "self": "https://realms-staging.stack.cards/catalog/Tag/b793225c-32f9-404c-b2a9-b4041b93090c"
+        }
+      },
+      "skills": {
+        "links": {
+          "self": null
+        }
+      },
+      "license": {
+        "links": {
+          "self": "https://realms-staging.stack.cards/catalog/License/4c5a023b-a72c-4f90-930b-da60a1de5b2d"
+        }
+      },
+      "specs.0": {
+        "links": {
+          "self": "../Spec/fbacf3b7-2ebe-4448-b873-cba8c0ec2014"
+        }
+      },
+      "examples": {
+        "links": {
+          "self": null
+        }
+      },
+      "publisher": {
+        "links": {
+          "self": null
+        }
+      },
+      "categories.0": {
+        "links": {
+          "self": "https://realms-staging.stack.cards/catalog/Category/developer-tools-code"
+        }
+      },
+      "categories.1": {
+        "links": {
+          "self": "https://realms-staging.stack.cards/catalog/Category/software-development"
+        }
+      },
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}

Spec/fbacf3b7-2ebe-4448-b873-cba8c0ec2014.json

@@ -0,0 +1,40 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "Spec",
+        "module": "https://cardstack.com/base/spec"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "ref": {
+        "name": "TestField",
+        "module": "../polymorphic-field-example"
+      },
+      "readMe": "## Usage as a Field\n\nThe `TestField` spec can be used as a field within a consuming card or field. Here's an example:\n\n```json\n{\n  \"data\": {\n    \"type\": \"card\",\n    \"attributes\": {\n      \"firstName\": \"John\"\n    },\n    \"relationships\": {\n      \"specialField\": {\n        \"links\": {\n          \"self\": \"./TestField\"\n        }\n      }\n    },\n    \"meta\": {\n      \"adoptsFrom\": {\n        \"module\": \"https://realms-staging.stack.cards/chuan16/prospective-scallop/polymorphic-field-example\",\n        \"name\": \"TestField\"\n      }\n    }\n  }\n}\n```\n\nIn this example, the `specialField` is using the `TestField` spec.\n\n## Template Usage\n\nTo use the `TestField` spec in a template, you can access its fields like this:\n\n```hbs\n<@fields.specialField @format=\"fitted\" />\n```\n\nThis will render the `fitted` format of the `TestField` spec.\n\n## Summary\n\nThe `TestField` spec is a field definition that can be used within a consuming card or field. It has a `firstName` field of type `StringField`. The spec provides `fitted` and `embedded` formats for rendering the field.\n\n## Import\n\n```gts\nimport { TestField } from 'https://realms-staging.stack.cards/chuan16/prospective-scallop/polymorphic-field-example';\n```",
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      },
+      "specType": "field",
+      "cardTitle": "TestField",
+      "cardDescription": null,
+      "containedExamples": []
+    },
+    "relationships": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      },
+      "linkedExamples": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}

polymorphic-field-example.gts

@@ -0,0 +1,99 @@
+import {
+  Component,
+  CardDef,
+  field,
+  contains,
+  StringField,
+  FieldDef,
+  linksToMany,
+} from 'https://cardstack.com/base/card-api';
+import { on } from '@ember/modifier';
+
+export class TestField extends FieldDef {
+  static displayName = 'TestField';
+  @field firstName = contains(StringField);
+
+  static fitted = class Fitted extends Component<typeof this> {
+    <template>
+      <div data-test-baseclass>
+        BaseClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <div data-test-baseclass>
+        Embedded BaseClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+}
+export class SubTestField extends TestField {
+  static displayName = 'SubTestField';
+
+  static fitted = class Fitted extends Component<typeof this> {
+    <template>
+      <div data-test-subclass>
+        SubClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <div data-test-subclass>
+        Embedded SubClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+
+  static edit = class Edit extends Component<typeof this> {
+    <template>
+      <div data-test-edit>
+        Edit
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+}
+
+export class CardWithSpecialFields extends CardDef {
+  static displayName = 'CardWithSpecialFields';
+  @field specialField = contains(TestField);
+
+  static fitted = class Fitted extends Component<typeof this> {
+    setSubclass = () => {
+      this.args.model.specialField = new SubTestField({});
+    };
+    <template>
+      <div data-test-card-with-special-fields>
+        <@fields.specialField />
+        <button {{on 'click' this.setSubclass}} data-test-set-subclass>Set
+          Subclass From Inside</button>
+      </div>
+    </template>
+  };
+}
+
+export class PolymorphicFieldExample extends CardDef {
+  static displayName = 'PolymorphicFieldExample';
+  @field specialField = contains(TestField);
+  @field cardsWithSpecialFields = linksToMany(() => CardWithSpecialFields);
+
+  static isolated = class Isolated extends Component<typeof this> {
+    setSubclass = () => {
+      this.args.model.specialField = new SubTestField({});
+    };
+    <template>
+      <button {{on 'click' this.setSubclass}} data-test-set-subclass>Set
+        Subclass From Outside</button>
+      <@fields.specialField />
+      <@fields.cardsWithSpecialFields />
+    </template>
+  };
+}