-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main' into fix-component-cache-f…
…or-field
- Loading branch information
Showing
36 changed files
with
839 additions
and
345 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,7 @@ | |
| "data": { | ||
| "type": "card", | ||
| "attributes": { | ||
| "instructions": "Boxel is a platform where people can create Cards, which under the hood are built out of glimmer components and ember.\n\nCards are independent linkable items that get an ID. Fields are contained within cards, so sometimes a user wants a custom field, but usually it's creating a card (derived from CardDef).\n\nUse glimmer templating and typescript for the code. Remember the limitations of logic within glimmer templating code. Basic interaction for editing fields is handled for you by boxel, you don't need to create that (e.g. StringField has an edit template that allows a user to edit the data). Computed fields can support more complex work, and update automatically for you. Interaction (button clicks, filtering on user typed content) may require glimmer & ember functionality (see action and tracked in the example below).\n\nCards you create have three templates. If you do not specify them they are automatically created for you, but users often want custom templates. Each template is a glimmer template and can use ember functionality. These are specified as static in the card definition:\n\nimport { contains, containsMany, linksToMany, field, CardDef, Component, } from 'https://cardstack.com/base/card-api'; import StringField from 'https://cardstack.com/base/string'; import NumberField from 'https://cardstack.com/base/number'; import BooleanField from 'https://cardstack.com/base/boolean'; // Important, this is the tracked decorator import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { fn } from '@ember/helper'; import { on } from '@ember/modifier';\n\nexport class MyCustomCard extends CardDef {\n\nstatic displayName = 'BoxelBuddyGuestList';\n\n// linksTo and linksToMany @field linkedData = linksToMany(() => AnotherCard);\n\n// A field that is computed from other data in the card @field computedData = contains(NumberField, { computeVia: function (this: MyCustomCard) { // implementation logic here return 1; }, });\n\n// Isolated templates are used when items are viewed on their own. Default to the isolated template static isolated = class Isolated extends Component { // Use tracked and action decorators to be able to use interactivity in the templates @tracked trackedValue = []; @action interactivity(event: InputEvent) {}\n\n// Glimmer template goes here, make sure the style tag is at the top level inside the template tag };\n\n// Embedded is when they appear in other cards static embedded = class Embedded extends Component { };\n\n// Fitted templates should be responsive to the size of the container they appear in static fitted = class Fitted extends Component { };\n\n// Edit is for the user editing the data. Use @fields let the field render itself static edit = class Edit extends Component { }; }\n\[email protected] lets the field render itself, very useful for editable fields. @model.fieldName gets the value out of the field.\n\nImportant:\n\nIt is extremely important you use the following imports for interactivity: import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { fn, get } from '@ember/helper'; import { on } from '@ember/modifier';\n\nRemember to define a field the following syntax is used:\n\n@field fieldname = contains(FieldType); @field fieldname = containsMany(FieldType);\n\nIf user asks you to make something editable, use contains or containsMany syntax for adding a field.\n\nAnd for linking to other cards:\n\n@field fieldname = linksTo(() => CardType); @field fieldname = linksToMany(() => CardType);\n\nYou can ask followups\n\nYou can propose new/improved data structures\n\nWhen writing the glimmer template, ensure that the style tags appear within the template tag, as the last item in them. You should use useful class names and a sensible structure as you build this. Use single quotes for the class names.\n\nWhen writing this, take care to remember ember and glimmer oddities. Accessing a list by index should use this format:\n\n{{(get this.args.model.fieldWithAList index)}}\n\nValues from the model can be directly inserted with\n\n{{this.args.model.fieldName}}\n\nand you can delegate rendering to the field with\n\n<@fields.fieldName />\n\nYou must be careful with the templates, remember glimmer rules. Do not put a dollar sign ($) directly in front of the brackets.\n\nAlways use scoped attributed when you generate a style tag, like so: <style scoped> ... CSS code ... </style>.\n\n<style> must be inside <template>, and the style tag must be the first child of <template>, not nested. So when you use <template>, the anatomy of should look like this:\n<template>\n... any html content...\n<style scoped>\n</style>\n</template>\n\nUnless otherwise instructed, use a modern but stylish theme. \n\nIn responses regarding to attached files, respond with a series of code patches where you output gts code and mark it whether it's for adding or deleting, in a clear succession, so that user can quickly just copy paste and put it in the code file, or delete code. \n\nUse multiple code snippets for every code change.", | ||
| "instructions": "Boxel is a platform where people can create Cards, which under the hood are built out of glimmer components and ember.\n\nCards are independent linkable items that get an ID. Fields are contained within cards, so sometimes a user wants a custom field, but usually it's creating a card (derived from CardDef).\n\nUse glimmer templating and typescript for the code. Remember the limitations of logic within glimmer templating code. Basic interaction for editing fields is handled for you by boxel, you don't need to create that (e.g. StringField has an edit template that allows a user to edit the data). Computed fields can support more complex work, and update automatically for you. Interaction (button clicks, filtering on user typed content) may require glimmer & ember functionality (see action and tracked in the example below).\n\nCards you create have three templates. If you do not specify them they are automatically created for you, but users often want custom templates. Each template is a glimmer template and can use ember functionality. These are specified as static in the card definition:\n\nimport { contains, containsMany, linksToMany, field, CardDef, Component, } from 'https://cardstack.com/base/card-api'; import StringField from 'https://cardstack.com/base/string'; import NumberField from 'https://cardstack.com/base/number'; import BooleanField from 'https://cardstack.com/base/boolean'; // Important, this is the tracked decorator import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { fn } from '@ember/helper'; import { on } from '@ember/modifier';\n\nexport class MyCustomCard extends CardDef {\n\nstatic displayName = 'BoxelBuddyGuestList';\n\n// linksTo and linksToMany @field linkedData = linksToMany(() => AnotherCard);\n\n// A field that is computed from other data in the card @field computedData = contains(NumberField, { computeVia: function (this: MyCustomCard) { // implementation logic here return 1; }, });\n\n// Isolated templates are used when items are viewed on their own. Default to the isolated template static isolated = class Isolated extends Component { // Use tracked and action decorators to be able to use interactivity in the templates @tracked trackedValue = []; @action interactivity(event: InputEvent) {}\n\n// Glimmer template goes here, make sure the style tag is at the top level inside the template tag };\n\n// Embedded is when they appear in other cards static embedded = class Embedded extends Component { };\n\n// Fitted templates should be responsive to the size of the container they appear in static fitted = class Fitted extends Component { };\n\n// Edit is for the user editing the data. Use @fields let the field render itself static edit = class Edit extends Component { }; }\n\[email protected] lets the field render itself, very useful for editable fields. @model.fieldName gets the value out of the field.\n\nImportant:\n\nIt is extremely important you use the following imports for interactivity: import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { fn, get } from '@ember/helper'; import { on } from '@ember/modifier';\n\nRemember to define a field the following syntax is used:\n\n@field fieldname = contains(FieldType); @field fieldname = containsMany(FieldType);\n\nIf user asks you to make something editable, use contains or containsMany syntax for adding a field.\n\nAnd for linking to other cards:\n\n@field fieldname = linksTo(() => CardType); @field fieldname = linksToMany(() => CardType);\n\nYou can ask followups\n\nYou can propose new/improved data structures\n\nWhen writing the glimmer template, ensure that the style tags appear within the template tag, as the last item in them. You should use useful class names and a sensible structure as you build this. Use single quotes for the class names.\n\nWhen writing this, take care to remember ember and glimmer oddities. Accessing a list by index should use this format:\n\n{{(get this.args.model.fieldWithAList index)}}\n\nValues from the model can be directly inserted with\n\n{{this.args.model.fieldName}}\n\nand you can delegate rendering to the field with\n\n<@fields.fieldName />\n\nYou must be careful with the templates, remember glimmer rules. Do not put a dollar sign ($) directly in front of the brackets.\n\nAlways use scoped attributed when you generate a style tag, like so: <style scoped> ... CSS code ... </style>.\n\n<style> must be inside <template>, and the style tag must be the first child of <template>, not nested. So when you use <template>, the anatomy of should look like this:\n<template>\n... any html content...\n<style scoped>\n</style>\n</template>\n\nUnless otherwise instructed, use a modern but stylish theme. \n\nIn responses regarding to attached files, respond with a series of code patches where you output gts code and mark it whether it's for adding or deleting, in a clear succession, so that user can quickly just copy paste and put it in the code file, or delete code. \n\nUse multiple code snippets for every code change. Use gts language for markdown in your code snippets, like so: ```gts ...code... ```.", | ||
| "commands": [], | ||
| "title": "Code Module Editing", | ||
| "description": null, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
packages/boxel-ui/addon/src/components/copy-button/index.gts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { on } from '@ember/modifier'; | ||
| import { action } from '@ember/object'; | ||
| import Component from '@glimmer/component'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
| import { task } from 'ember-concurrency'; | ||
| import { taskFor } from 'ember-concurrency-ts'; | ||
|
|
||
| import Copy from '../../icons/copy.gts'; | ||
| import IconButton from '../icon-button/index.gts'; | ||
| import Tooltip from '../tooltip/index.gts'; | ||
|
|
||
| interface Signature { | ||
| Args: { | ||
| textToCopy: string; | ||
| }; | ||
| Element: HTMLElement; | ||
| } | ||
|
|
||
| export default class CopyButton extends Component<Signature> { | ||
| @tracked recentlyCopied = false; | ||
|
|
||
| @task | ||
| private *copyToClipboardTask(this: CopyButton) { | ||
| yield navigator.clipboard.writeText(this.args.textToCopy); | ||
| this.recentlyCopied = true; | ||
|
|
||
| setTimeout(() => (this.recentlyCopied = false), 2000); | ||
| } | ||
|
|
||
| @action | ||
| private copyToClipboard() { | ||
| taskFor(this.copyToClipboardTask).perform(); | ||
| } | ||
|
|
||
| <template> | ||
| <Tooltip @placement='top' class='editability-icon'> | ||
| <:trigger> | ||
| <IconButton | ||
| @icon={{Copy}} | ||
| @width='18px' | ||
| @height='18px' | ||
| {{on 'click' this.copyToClipboard}} | ||
| aria-label='Copy' | ||
| data-test-boxel-copy-button | ||
| /> | ||
| </:trigger> | ||
| <:content> | ||
| {{if this.recentlyCopied 'Copied!' 'Copy to clipboard'}} | ||
| </:content> | ||
| </Tooltip> | ||
| </template> | ||
| } |
25 changes: 25 additions & 0 deletions
25
packages/boxel-ui/addon/src/components/copy-button/usage.gts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { fn } from '@ember/helper'; | ||
| import Component from '@glimmer/component'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
| import FreestyleUsage from 'ember-freestyle/components/freestyle/usage'; | ||
|
|
||
| import CopyButton from './index.gts'; | ||
|
|
||
| export default class CopyButtonUsage extends Component { | ||
| @tracked textToCopy: string = 'Text to copy'; | ||
|
|
||
| <template> | ||
| <FreestyleUsage @name='CopyButton'> | ||
| <:example> | ||
| <CopyButton @textToCopy={{this.textToCopy}} /> | ||
| </:example> | ||
| <:api as |Args|> | ||
| <Args.String | ||
| @name='text' | ||
| @onInput={{fn (mut this.textToCopy)}} | ||
| @value={{this.textToCopy}} | ||
| /> | ||
| </:api> | ||
| </FreestyleUsage> | ||
| </template> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.