Add Friends Card Definition listing

CardListing/83a0f662-d7fa-47f1-b4d4-6b221e9cc730.json

@@ -0,0 +1,74 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "CardListing",
+        "module": "http://localhost:4201/catalog/catalog-app/listing/listing"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "name": "Friends Card Definition",
+      "images": [],
+      "summary": "The Friends catalog listing defines a card structure representing a person's friends. Its primary purpose is to model and display a person's first name along with a list of associated friends. The card includes fields for storing the first name and linking to multiple Friend entities, as well as a dynamically computed card title based on the first name. An embedded component provides a visual layout that presents the person's first name and the number of friends in a grid format.",
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      }
+    },
+    "relationships": {
+      "tags": {
+        "links": {
+          "self": null
+        }
+      },
+      "skills": {
+        "links": {
+          "self": null
+        }
+      },
+      "license": {
+        "links": {
+          "self": "http://localhost:4201/catalog/License/4c5a023b-a72c-4f90-930b-da60a1de5b2d"
+        }
+      },
+      "specs.0": {
+        "links": {
+          "self": "../Spec/10"
+        }
+      },
+      "specs.1": {
+        "links": {
+          "self": "../Spec/6"
+        }
+      },
+      "publisher": {
+        "links": {
+          "self": null
+        }
+      },
+      "categories.0": {
+        "links": {
+          "self": "http://localhost:4201/catalog/Category/software-development"
+        }
+      },
+      "categories.1": {
+        "links": {
+          "self": "http://localhost:4201/catalog/Category/web-development"
+        }
+      },
+      "examples.0": {
+        "links": {
+          "self": "../Friends/1"
+        }
+      },
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}

Friend/1.json

@@ -0,0 +1,21 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "firstName": "Hassan"
+    },
+    "relationships": {
+      "friend": {
+        "links": {
+          "self": "./2"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../friend",
+        "name": "Friend"
+      }
+    }
+  }
+}

Friend/2.json

@@ -0,0 +1,22 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "firstName": "Mango",
+      "cardThumbnailURL": "../green-mango.png"
+    },
+    "relationships": {
+      "friend": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../friend",
+        "name": "Friend"
+      }
+    }
+  }
+}

Friends/1.json

@@ -0,0 +1,26 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "firstName": "Mike Wazowski"
+    },
+    "relationships": {
+      "friends.0": {
+        "links": {
+          "self": "../Friend/1"
+        }
+      },
+      "friends.1": {
+        "links": {
+          "self": "../Friend/2"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../friends",
+        "name": "Friends"
+      }
+    }
+  }
+}

Spec/10.json

@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "cardTitle": "Friends from ../friends",
+      "cardDescription": "Spec for Friends from ../friends",
+      "specType": "card",
+      "ref": {
+        "module": "../friends",
+        "name": "Friends"
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/spec",
+        "name": "Spec"
+      }
+    }
+  }
+}

Spec/6.json

@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "cardTitle": "Friend from /friend",
+      "cardDescription": "Spec for Friend from /friend",
+      "specType": "card",
+      "ref": {
+        "module": "../friend",
+        "name": "Friend"
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/spec",
+        "name": "Spec"
+      }
+    }
+  }
+}

friend.gts

@@ -0,0 +1,43 @@
+import {
+  contains,
+  linksTo,
+  field,
+  CardDef,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import NumberField from 'https://cardstack.com/base/number';
+import StringField from 'https://cardstack.com/base/string';
+import { GridContainer } from '@cardstack/boxel-ui/components';
+import UserPlus from '@cardstack/boxel-icons/user-plus';
+
+export class Friend extends CardDef {
+  static displayName = 'Friend';
+  static icon = UserPlus;
+  @field firstName = contains(StringField);
+  @field friend = linksTo(() => Friend);
+  @field test = contains(NumberField, {
+    computeVia: function () {
+      // make sure we don't blow up when '/' appears
+      return 10 / 2;
+    },
+  });
+  @field cardTitle = contains(StringField, {
+    computeVia: function (this: Friend) {
+      return this.firstName;
+    },
+  });
+  @field cardDescription = contains(StringField, {
+    computeVia: function (this: Friend) {
+      return `Friend`;
+    },
+  });
+  @field cardThumbnailURL = contains(StringField);
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <GridContainer>
+        <@fields.firstName />
+      </GridContainer>
+    </template>
+  };
+}

friends.gts

@@ -0,0 +1,33 @@
+import {
+  contains,
+  linksToMany,
+  field,
+  CardDef,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import { Friend } from './friend';
+import { GridContainer } from '@cardstack/boxel-ui/components';
+import UsersIcon from '@cardstack/boxel-icons/users';
+
+export class Friends extends CardDef {
+  static displayName = 'Friends';
+  static icon = UsersIcon;
+  @field firstName = contains(StringField);
+  @field friends = linksToMany(Friend);
+  @field cardTitle = contains(StringField, {
+    computeVia: function (this: Friends) {
+      return this.firstName;
+    },
+  });
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <GridContainer>
+        <@fields.firstName />
+        has
+        {{@model.friends.length}}
+        friends
+      </GridContainer>
+    </template>
+  };
+}