diff --git a/CardListing/83a0f662-d7fa-47f1-b4d4-6b221e9cc730.json b/CardListing/83a0f662-d7fa-47f1-b4d4-6b221e9cc730.json new file mode 100644 index 0000000..1a22054 --- /dev/null +++ b/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 + } + } + } + } +} \ No newline at end of file diff --git a/Friend/1.json b/Friend/1.json new file mode 100644 index 0000000..7286635 --- /dev/null +++ b/Friend/1.json @@ -0,0 +1,21 @@ +{ + "data": { + "type": "card", + "attributes": { + "firstName": "Hassan" + }, + "relationships": { + "friend": { + "links": { + "self": "./2" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "../friend", + "name": "Friend" + } + } + } +} diff --git a/Friend/2.json b/Friend/2.json new file mode 100644 index 0000000..9c65fcc --- /dev/null +++ b/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" + } + } + } +} diff --git a/Friends/1.json b/Friends/1.json new file mode 100644 index 0000000..cf7b351 --- /dev/null +++ b/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" + } + } + } +} diff --git a/Spec/10.json b/Spec/10.json new file mode 100644 index 0000000..bf4c596 --- /dev/null +++ b/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" + } + } + } +} diff --git a/Spec/6.json b/Spec/6.json new file mode 100644 index 0000000..d2b3e8d --- /dev/null +++ b/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" + } + } + } +} diff --git a/friend.gts b/friend.gts new file mode 100644 index 0000000..1633bbb --- /dev/null +++ b/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 { + + }; +} diff --git a/friends.gts b/friends.gts new file mode 100644 index 0000000..b43b5b3 --- /dev/null +++ b/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 { + + }; +}