diff --git a/packages/base/spec.gts b/packages/base/spec.gts index d9ee3d899f..f42d2c1937 100644 --- a/packages/base/spec.gts +++ b/packages/base/spec.gts @@ -36,7 +36,11 @@ import { type CommandContext, type ResolvedCodeRef, } from '@cardstack/runtime-common'; -import { eq, not, type MenuItemOptions } from '@cardstack/boxel-ui/helpers'; +import { + eq, + not, + type MenuItemOptions, +} from '@cardstack/boxel-ui/helpers'; import { AiBw as AiBwIcon } from '@cardstack/boxel-ui/icons'; import GlimmerComponent from '@glimmer/component'; @@ -57,6 +61,11 @@ import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-r import PopulateWithSampleDataCommand from '@cardstack/boxel-host/commands/populate-with-sample-data'; import GenerateExampleCardsCommand from '@cardstack/boxel-host/commands/generate-example-cards'; import { type GetMenuItemParams } from './menu-items'; +import { provide } from 'ember-provide-consume-context'; +import { + PermissionsContextName, + type Permissions, +} from '@cardstack/runtime-common'; export type SpecType = 'card' | 'field' | 'component' | 'app' | 'command'; @@ -102,207 +111,97 @@ class SpecTypeField extends StringField { const PRIMITIVE_INCOMPATIBILITY_MESSAGE = 'Examples are not currently supported for primitive fields'; -class Isolated extends Component { - get defaultIcon() { - if (!this.args.model) { - return; - } - return this.args.model.constructor?.icon; - } - - @action - generateReadme() { - this.generateReadmeTask.perform(); - } - - generateReadmeTask = task(async () => { - if (!this.args.model) { - return; - } - - let commandContext = this.args.context?.commandContext; - if (!commandContext) { - console.error('Command context not available'); - return; - } - - try { - const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( - commandContext, - ); - const result = await generateReadmeSpecCommand.execute({ - spec: this.args.model as Spec, - }); - - console.log('Generated README:', result.readme); - } catch (error) { - console.error('Error generating README:', error); - } - }); - - get icon() { - return this.cardDef?.icon; - } - - @use private loadCardDef = resource(() => { - let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ - value: undefined, - }); - (async () => { - try { - if (this.args.model.ref && this.args.model.id) { - let cardDef = await loadCardDef(this.args.model.ref, { - loader: myLoader(), - relativeTo: new URL(this.args.model.id), - }); - cardDefObj.value = cardDef; - } - } catch (e) { - cardDefObj.value = undefined; - } - })(); - return cardDefObj; - }); - - get cardDef() { - return this.loadCardDef.value; - } - - get isPrimitiveField() { - return isPrimitive(this.cardDef); - } - - get absoluteRef() { - if (!this.args.model.ref || !this.args.model.id) { - return undefined; - } - let url = new URL(this.args.model.id); - let ref = codeRefWithAbsoluteURL(this.args.model.ref, url); - if (!isResolvedCodeRef(ref)) { - throw new Error('ref is not a resolved code ref'); - } - return ref; - } - - private get realmInfo() { - return getCardMeta(this.args.model as CardDef, 'realmInfo'); - } +// Exported Header Component +interface SpecHeaderSignature { + Element: HTMLElement; + Args: { + icon?: CardOrFieldTypeIcon; + defaultIcon?: CardOrFieldTypeIcon; + isEditMode?: boolean; + }; + Blocks: { + title: []; + description: []; + }; +} +export class SpecHeader extends GlimmerComponent { +} + +// Exported Readme Section Component +interface SpecReadmeSectionSignature { + Element: HTMLElement; + Args: { + canEdit?: boolean; + onGenerateReadme?: () => void; + isGenerating?: boolean; + }; + Blocks: { + default: []; + }; +} + +export class SpecReadmeSection extends GlimmerComponent { + +} + +// Exported Examples Section Component +interface SpecExamplesSectionSignature { + Element: HTMLElement; + Args: { + specType?: string; + isPrimitiveField: boolean; + }; + Blocks: { + linkedExamples: []; + containedExamples: []; + }; +} + +export class SpecExamplesSection extends GlimmerComponent { + +} + +// This component (ExamplesWithInteractive) renders interactive examples for field configuration, shown only in subclass spec UIs. +// It allows users to interact with the field examples in the UI, but does not permit any data to be written to the server—even if users lack write permissions. +interface ExamplesWithInteractiveSignature { + Args: {}; + Element: HTMLElement; + Blocks: { + default: []; + }; +} + +export class ExamplesWithInteractive extends GlimmerComponent { + @provide(PermissionsContextName) + get permissions(): Permissions | undefined { + return { canWrite: true, canRead: true }; + } + + +} + +// Exported Module Section Component +interface SpecModuleSectionSignature { + Element: HTMLElement; + Args: { + moduleHref?: string; + refName?: string; + specType?: string; + realmInfo: any; + }; +} + +export class SpecModuleSection extends GlimmerComponent { + +} + +class Isolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + const result = await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + + console.log('Generated README:', result.readme); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + get absoluteRef() { + if (!this.args.model.ref || !this.args.model.id) { + return undefined; + } + let url = new URL(this.args.model.id); + let ref = codeRefWithAbsoluteURL(this.args.model.ref, url); + if (!isResolvedCodeRef(ref)) { + throw new Error('ref is not a resolved code ref'); + } + return ref; + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + @@ -554,113 +827,41 @@ class Edit extends Component { +} diff --git a/packages/catalog-realm/field-spec/audio-field-spec.gts b/packages/catalog-realm/field-spec/audio-field-spec.gts index 555fbd5544..a1dd2fe7f5 100644 --- a/packages/catalog-realm/field-spec/audio-field-spec.gts +++ b/packages/catalog-realm/field-spec/audio-field-spec.gts @@ -1,8 +1,384 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import AudioField from '../fields/audio'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(AudioField);`; +const waveformPlayerFieldCode = `@field waveformPlayer = contains(AudioField, { + configuration: { + presentation: 'waveform-player', + }, +});`; +const playlistRowFieldCode = `@field playlistRow = contains(AudioField, { + configuration: { + presentation: 'playlist-row', + }, +});`; +const miniPlayerFieldCode = `@field miniPlayer = contains(AudioField, { + configuration: { + presentation: 'mini-player', + }, +});`; +const albumCoverFieldCode = `@field albumCover = contains(AudioField, { + configuration: { + presentation: 'album-cover', + }, +});`; +const withVolumeFieldCode = `@field withVolume = contains(AudioField, { + configuration: { + options: { + showVolume: true, + }, + }, +});`; +const trimEditorFieldCode = `@field trimEditor = contains(AudioField, { + configuration: { + presentation: 'trim-editor', + }, +});`; +const advancedControlsFieldCode = `@field advancedControls = contains(AudioField, { + configuration: { + options: { + showVolume: true, + showSpeedControl: true, + showLoopControl: true, + }, + }, +});`; + +class AudioFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class AudioFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class AudioFieldSpec extends Spec { static displayName = 'Audio Field Spec'; @@ -65,7 +441,6 @@ export class AudioFieldSpec extends Spec { }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = AudioFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = AudioFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/color-field-spec.gts b/packages/catalog-realm/field-spec/color-field-spec.gts index ba9c4fd6a5..f008719ff0 100644 --- a/packages/catalog-realm/field-spec/color-field-spec.gts +++ b/packages/catalog-realm/field-spec/color-field-spec.gts @@ -1,8 +1,373 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import ColorField from '../fields/color'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(ColorField);`; +const wheelFieldCode = `@field wheel = contains(ColorField, { + configuration: { + variant: 'wheel', + }, +});`; +const sliderRgbFieldCode = `@field sliderRgb = contains(ColorField, { + configuration: { + variant: 'slider', + options: { + defaultFormat: 'rgb', + }, + }, +});`; +const sliderHslFieldCode = `@field sliderHsl = contains(ColorField, { + configuration: { + variant: 'slider', + options: { + defaultFormat: 'hsl', + }, + }, +});`; +const swatchesPickerFieldCode = `@field swatchesPicker = contains(ColorField, { + configuration: { + variant: 'swatches-picker', + }, +});`; +const advancedFieldCode = `@field advanced = contains(ColorField, { + configuration: { + variant: 'advanced', + }, +});`; +const withContrastCheckerFieldCode = `@field withContrastChecker = contains(ColorField, { + configuration: { + options: { + showContrastChecker: true, + }, + }, +});`; + +class ColorFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class ColorFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class ColorFieldSpec extends Spec { static displayName = 'Color Field Spec'; @@ -60,7 +425,6 @@ export class ColorFieldSpec extends Spec { }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = ColorFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = ColorFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/components/field-spec-edit-template.gts b/packages/catalog-realm/field-spec/components/field-spec-edit-template.gts deleted file mode 100644 index df211b67ea..0000000000 --- a/packages/catalog-realm/field-spec/components/field-spec-edit-template.gts +++ /dev/null @@ -1,422 +0,0 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { - Component, - CardDef, - BaseDef, - getCardMeta, - getFields, -} from 'https://cardstack.com/base/card-api'; -import { - FieldContainer, - RealmIcon, - BoxelButton, -} from '@cardstack/boxel-ui/components'; -import BookOpenText from '@cardstack/boxel-icons/book-open-text'; -import GitBranch from '@cardstack/boxel-icons/git-branch'; -import LayoutList from '@cardstack/boxel-icons/layout-list'; -import { DiagonalArrowLeftUp as ExportArrow } from '@cardstack/boxel-ui/icons'; -import { action } from '@ember/object'; -import { on } from '@ember/modifier'; -import { task } from 'ember-concurrency'; -import { use, resource } from 'ember-resources'; -import { TrackedObject } from 'tracked-built-ins'; -import { - codeRefWithAbsoluteURL, - isOwnField, - isPrimitive, - isResolvedCodeRef, - loadCardDef, -} from '@cardstack/runtime-common'; -import type { Loader } from '@cardstack/runtime-common'; -import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; -import { FieldRenderer } from '../../components/field-renderer'; - -function myLoader(): Loader { - // @ts-ignore - return (import.meta as any).loader; -} - -export default class FieldSpecEditTemplate extends Component { - get defaultIcon() { - if (!this.args.model) { - return; - } - return this.args.model.constructor?.icon; - } - - @action - generateReadme() { - this.generateReadmeTask.perform(); - } - - generateReadmeTask = task(async () => { - if (!this.args.model) { - return; - } - - let commandContext = this.args.context?.commandContext; - if (!commandContext) { - console.error('Command context not available'); - return; - } - - try { - const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( - commandContext, - ); - await generateReadmeSpecCommand.execute({ - spec: this.args.model as Spec, - }); - } catch (error) { - console.error('Error generating README:', error); - } - }); - - get icon() { - return this.cardDef?.icon; - } - - @use private loadCardDef = resource(() => { - let cardDefObject = new TrackedObject<{ - value: typeof BaseDef | undefined; - }>({ - value: undefined, - }); - (async () => { - try { - if (this.args.model.ref && this.args.model.id) { - let cardDef = await loadCardDef(this.args.model.ref, { - loader: myLoader(), - relativeTo: new URL(this.args.model.id), - }); - cardDefObject.value = cardDef; - } - } catch (e) { - cardDefObject.value = undefined; - } - })(); - return cardDefObject; - }); - - get cardDef() { - return this.loadCardDef.value; - } - - get isPrimitiveField() { - return isPrimitive(this.cardDef); - } - - get absoluteRef() { - if (!this.args.model.ref || !this.args.model.id) { - return undefined; - } - let url = new URL(this.args.model.id); - let ref = codeRefWithAbsoluteURL(this.args.model.ref, url); - if (!isResolvedCodeRef(ref)) { - throw new Error('ref is not a resolved code ref'); - } - return ref; - } - - private get realmInfo() { - return getCardMeta(this.args.model as CardDef, 'realmInfo'); - } - - get allFields() { - if (!this.args.model) return {}; - return getFields(this.args.model, { - includeComputeds: false, - }); - } - - get configurationFields() { - if (!this.args.model) return []; - const card = this.args.model.constructor as typeof BaseDef; - return Object.keys(this.allFields).filter((name) => isOwnField(card, name)); - } - - get specModal(): CardDef { - return this.args.model as CardDef; - } - - -} diff --git a/packages/catalog-realm/field-spec/components/field-spec-isolated-template.gts b/packages/catalog-realm/field-spec/components/field-spec-isolated-template.gts deleted file mode 100644 index dce1aeb4d3..0000000000 --- a/packages/catalog-realm/field-spec/components/field-spec-isolated-template.gts +++ /dev/null @@ -1,399 +0,0 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { - Component, - CardDef, - BaseDef, - getCardMeta, - getFields, -} from 'https://cardstack.com/base/card-api'; -import { FieldContainer, RealmIcon } from '@cardstack/boxel-ui/components'; -import BookOpenText from '@cardstack/boxel-icons/book-open-text'; -import GitBranch from '@cardstack/boxel-icons/git-branch'; -import LayoutList from '@cardstack/boxel-icons/layout-list'; -import { DiagonalArrowLeftUp as ExportArrow } from '@cardstack/boxel-ui/icons'; -import { action } from '@ember/object'; -import { task } from 'ember-concurrency'; -import { use, resource } from 'ember-resources'; -import { TrackedObject } from 'tracked-built-ins'; -import { - codeRefWithAbsoluteURL, - isOwnField, - isPrimitive, - isResolvedCodeRef, - loadCardDef, -} from '@cardstack/runtime-common'; -import type { Loader } from '@cardstack/runtime-common'; -import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; -import { FieldRenderer } from '../../components/field-renderer'; - -function myLoader(): Loader { - // @ts-ignore - return (import.meta as any).loader; -} - -export default class FieldSpecIsolatedTemplate extends Component { - get defaultIcon() { - if (!this.args.model) { - return; - } - return this.args.model.constructor?.icon; - } - - @action - generateReadme() { - this.generateReadmeTask.perform(); - } - - generateReadmeTask = task(async () => { - if (!this.args.model) { - return; - } - - let commandContext = this.args.context?.commandContext; - if (!commandContext) { - console.error('Command context not available'); - return; - } - - try { - const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( - commandContext, - ); - await generateReadmeSpecCommand.execute({ - spec: this.args.model as Spec, - }); - } catch (error) { - console.error('Error generating README:', error); - } - }); - - get icon() { - return this.cardDef?.icon; - } - - @use private loadCardDef = resource(() => { - let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ - value: undefined, - }); - (async () => { - try { - if (this.args.model.ref && this.args.model.id) { - let cardDef = await loadCardDef(this.args.model.ref, { - loader: myLoader(), - relativeTo: new URL(this.args.model.id), - }); - cardDefObj.value = cardDef; - } - } catch (e) { - cardDefObj.value = undefined; - } - })(); - return cardDefObj; - }); - - get cardDef() { - return this.loadCardDef.value; - } - - get isPrimitiveField() { - return isPrimitive(this.cardDef); - } - - get absoluteRef() { - if (!this.args.model.ref || !this.args.model.id) { - return undefined; - } - let url = new URL(this.args.model.id); - let ref = codeRefWithAbsoluteURL(this.args.model.ref, url); - if (!isResolvedCodeRef(ref)) { - throw new Error('ref is not a resolved code ref'); - } - return ref; - } - - private get realmInfo() { - return getCardMeta(this.args.model as CardDef, 'realmInfo'); - } - - get allFields() { - if (!this.args.model) return {}; - return getFields(this.args.model, { - includeComputeds: false, - }); - } - - get configurationFields() { - if (!this.args.model) return []; - const card = this.args.model.constructor as typeof BaseDef; - return Object.keys(this.allFields).filter((name) => isOwnField(card, name)); - } - - get specModal(): CardDef { - return this.args.model as CardDef; - } - - -} diff --git a/packages/catalog-realm/field-spec/date-field-spec.gts b/packages/catalog-realm/field-spec/date-field-spec.gts index 2264d63e80..c88abe110d 100644 --- a/packages/catalog-realm/field-spec/date-field-spec.gts +++ b/packages/catalog-realm/field-spec/date-field-spec.gts @@ -1,8 +1,363 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import DateField from '../fields/date'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(DateField);`; +const compactFieldCode = `@field compact = contains(DateField, { + configuration: { + preset: 'tiny', + }, + });`; +const customFormatFieldCode = `@field customFormat = contains(DateField, { + configuration: { + format: 'MMM D, YYYY', + }, + });`; +const countdownFieldCode = `@field countdown = contains(DateField, { + configuration: { + presentation: 'countdown', + countdownOptions: { + label: 'Launch in', + showControls: true, + }, + }, + });`; +const timelineFieldCode = `@field timeline = contains(DateField, { + configuration: { + presentation: 'timeline', + timelineOptions: { + eventName: 'Release', + status: 'active', + }, + }, + });`; +const ageFieldCode = `@field age = contains(DateField, { + configuration: { + presentation: 'age', + ageOptions: { + showNextBirthday: true, + }, + }, + });`; + +class DateFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class DateFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class DateFieldSpec extends Spec { static displayName = 'Date Field Spec'; @@ -24,7 +379,37 @@ export class DateFieldSpec extends Spec { }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + // Countdown presentation with controls + @field countdown = contains(DateField, { + configuration: { + presentation: 'countdown', + countdownOptions: { + label: 'Launch in', + showControls: true, + }, + }, + }); + + // Timeline presentation with event data + @field timeline = contains(DateField, { + configuration: { + presentation: 'timeline', + timelineOptions: { + eventName: 'Release', + status: 'active', + }, + }, + }); + + // Age presentation highlighting next birthday + @field age = contains(DateField, { + configuration: { + presentation: 'age', + ageOptions: { + showNextBirthday: true, + }, + }, + }); + static isolated = DateFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = DateFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/date-range-field-spec.gts b/packages/catalog-realm/field-spec/date-range-field-spec.gts index b3d843d6a0..d7b1e91f31 100644 --- a/packages/catalog-realm/field-spec/date-range-field-spec.gts +++ b/packages/catalog-realm/field-spec/date-range-field-spec.gts @@ -1,16 +1,294 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import DateRangeField from '../fields/date/date-range'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(DateRangeField);`; + +class DateRangeFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class DateRangeFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class DateRangeFieldSpec extends Spec { static displayName = 'Date Range Field Spec'; // Standard DateRangeField - default configuration @field standard = contains(DateRangeField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + DateRangeFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = DateRangeFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/datetime-field-spec.gts b/packages/catalog-realm/field-spec/datetime-field-spec.gts index feee190d91..6e1a6fd56d 100644 --- a/packages/catalog-realm/field-spec/datetime-field-spec.gts +++ b/packages/catalog-realm/field-spec/datetime-field-spec.gts @@ -1,8 +1,315 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import DatetimeField from '../fields/date-time'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(DatetimeField);`; +const shortFieldCode = `@field short = contains(DatetimeField, { + configuration: { + preset: 'short', + }, + });`; +const customFormatFieldCode = `@field customFormat = contains(DatetimeField, { + configuration: { + format: 'ddd, MMM D [at] h:mm A', + }, + });`; + +class DatetimeFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class DatetimeFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class DatetimeFieldSpec extends Spec { static displayName = 'Datetime Field Spec'; @@ -23,8 +330,7 @@ export class DatetimeFieldSpec extends Spec { format: 'ddd, MMM D [at] h:mm A', }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + DatetimeFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = DatetimeFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/datetime-stamp-field-spec.gts b/packages/catalog-realm/field-spec/datetime-stamp-field-spec.gts index aefba9c23a..a2496ed898 100644 --- a/packages/catalog-realm/field-spec/datetime-stamp-field-spec.gts +++ b/packages/catalog-realm/field-spec/datetime-stamp-field-spec.gts @@ -1,16 +1,298 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import DatetimeStampField from '../fields/datetime-stamp'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(DatetimeStampField);`; + +class DatetimeStampFieldSpecIsolated extends Component< + typeof DatetimeStampFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class DatetimeStampFieldSpecEdit extends Component< + typeof DatetimeStampFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class DatetimeStampFieldSpec extends Spec { static displayName = 'Datetime Stamp Field Spec'; // Standard DatetimeStampField - default configuration @field standard = contains(DatetimeStampField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + DatetimeStampFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = DatetimeStampFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/day-field-spec.gts b/packages/catalog-realm/field-spec/day-field-spec.gts index c63f76867d..ec167a69d6 100644 --- a/packages/catalog-realm/field-spec/day-field-spec.gts +++ b/packages/catalog-realm/field-spec/day-field-spec.gts @@ -1,16 +1,293 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import DayField from '../fields/date/day'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(DayField);`; + +class DayFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class DayFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class DayFieldSpec extends Spec { static displayName = 'Day Field Spec'; // Standard DayField - default configuration @field standard = contains(DayField); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = DayFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = DayFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/duration-field-spec.gts b/packages/catalog-realm/field-spec/duration-field-spec.gts index e44a002052..9057837976 100644 --- a/packages/catalog-realm/field-spec/duration-field-spec.gts +++ b/packages/catalog-realm/field-spec/duration-field-spec.gts @@ -1,8 +1,335 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import DurationField from '../fields/time/duration'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(DurationField);`; +const fullFieldCode = `@field full = contains(DurationField, { + configuration: { + includeYears: true, + includeMonths: true, + includeDays: true, + includeHours: true, + includeMinutes: true, + includeSeconds: true, + }, + });`; +const dayTimeFieldCode = `@field dayTime = contains(DurationField, { + configuration: { + includeDays: true, + includeHours: true, + includeMinutes: true, + includeSeconds: true, + }, + });`; +const yearMonthFieldCode = `@field yearMonth = contains(DurationField, { + configuration: { + includeYears: true, + includeMonths: true, + }, + });`; + +class DurationFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class DurationFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class DurationFieldSpec extends Spec { static displayName = 'Duration Field Spec'; @@ -39,8 +366,7 @@ export class DurationFieldSpec extends Spec { includeMonths: true, }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + DurationFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = DurationFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/image-field-spec.gts b/packages/catalog-realm/field-spec/image-field-spec.gts index 215229e5aa..6bb0d08c46 100644 --- a/packages/catalog-realm/field-spec/image-field-spec.gts +++ b/packages/catalog-realm/field-spec/image-field-spec.gts @@ -1,8 +1,326 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import ImageField from '../fields/image'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const browseFieldCode = `@field browse = contains(ImageField, { + configuration: { + variant: 'browse', + }, + });`; +const avatarFieldCode = `@field avatar = contains(ImageField, { + configuration: { + variant: 'avatar', + presentation: 'card', + options: { + showProgress: true, + }, + }, + });`; +const dropzoneFieldCode = `@field dropzone = contains(ImageField, { + configuration: { + variant: 'dropzone', + presentation: 'inline', + options: { + showImageModal: true, + showProgress: true, + }, + }, + });`; + +class ImageFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class ImageFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class ImageFieldSpec extends Spec { static displayName = 'Image Field Spec'; @@ -36,8 +354,6 @@ export class ImageFieldSpec extends Spec { }, }, }); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = ImageFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = ImageFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/month-day-field-spec.gts b/packages/catalog-realm/field-spec/month-day-field-spec.gts index a9c62e862c..27ba50e5b2 100644 --- a/packages/catalog-realm/field-spec/month-day-field-spec.gts +++ b/packages/catalog-realm/field-spec/month-day-field-spec.gts @@ -1,16 +1,294 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import MonthDayField from '../fields/date/month-day'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(MonthDayField);`; + +class MonthDayFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class MonthDayFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class MonthDayFieldSpec extends Spec { static displayName = 'Month Day Field Spec'; // Standard MonthDayField - default configuration @field standard = contains(MonthDayField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + MonthDayFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = MonthDayFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/month-field-spec.gts b/packages/catalog-realm/field-spec/month-field-spec.gts index fff893f775..d0e42b0749 100644 --- a/packages/catalog-realm/field-spec/month-field-spec.gts +++ b/packages/catalog-realm/field-spec/month-field-spec.gts @@ -1,16 +1,293 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import MonthField from '../fields/date/month'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(MonthField);`; + +class MonthFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class MonthFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class MonthFieldSpec extends Spec { static displayName = 'Month Field Spec'; // Standard MonthField - default configuration @field standard = contains(MonthField); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = MonthFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = MonthFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/month-year-field-spec.gts b/packages/catalog-realm/field-spec/month-year-field-spec.gts index 4492092b5a..8a3b9e8411 100644 --- a/packages/catalog-realm/field-spec/month-year-field-spec.gts +++ b/packages/catalog-realm/field-spec/month-year-field-spec.gts @@ -1,16 +1,294 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import MonthYearField from '../fields/date/month-year'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(MonthYearField);`; + +class MonthYearFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class MonthYearFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class MonthYearFieldSpec extends Spec { static displayName = 'Month Year Field Spec'; // Standard MonthYearField - default configuration @field standard = contains(MonthYearField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + MonthYearFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = MonthYearFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/multiple-image-field-spec.gts b/packages/catalog-realm/field-spec/multiple-image-field-spec.gts index 9bef884c31..37fe5a56c1 100644 --- a/packages/catalog-realm/field-spec/multiple-image-field-spec.gts +++ b/packages/catalog-realm/field-spec/multiple-image-field-spec.gts @@ -1,8 +1,335 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import MultipleImageField from '../fields/multiple-image'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const listFieldCode = `@field list = contains(MultipleImageField, { + configuration: { + variant: 'list', + presentation: 'grid', + }, + });`; +const galleryFieldCode = `@field gallery = contains(MultipleImageField, { + configuration: { + variant: 'gallery', + presentation: 'carousel', + options: { + allowBatchSelect: true, + allowReorder: true, + maxFiles: 4, + showProgress: true, + }, + }, + });`; +const dropzoneFieldCode = `@field dropzone = contains(MultipleImageField, { + configuration: { + variant: 'dropzone', + presentation: 'carousel', + options: { + allowBatchSelect: true, + showProgress: true, + maxFiles: 10, + }, + }, + });`; + +class MultipleImageFieldSpecIsolated extends Component< + typeof MultipleImageFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class MultipleImageFieldSpecEdit extends Component< + typeof MultipleImageFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class MultipleImageFieldSpec extends Spec { static displayName = 'Multiple Image Field Spec'; @@ -41,8 +368,7 @@ export class MultipleImageFieldSpec extends Spec { }, }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + MultipleImageFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = MultipleImageFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/number-field-spec.gts b/packages/catalog-realm/field-spec/number-field-spec.gts index fccaa32d90..16f84b3015 100644 --- a/packages/catalog-realm/field-spec/number-field-spec.gts +++ b/packages/catalog-realm/field-spec/number-field-spec.gts @@ -1,8 +1,391 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import NumberField from '../fields/number'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(NumberField);`; +const progressBarFieldCode = `@field progressBar = contains(NumberField, { + configuration: { + presentation: 'progress-bar', + }, + });`; +const progressCircleFieldCode = `@field progressCircle = contains(NumberField, { + configuration: { + presentation: 'progress-circle', + }, + });`; +const statFieldCode = `@field stat = contains(NumberField, { + configuration: { + presentation: 'stat', + }, + });`; +const scoreFieldCode = `@field score = contains(NumberField, { + configuration: { + presentation: 'score', + }, + });`; +const badgeNotificationFieldCode = `@field badgeNotification = contains(NumberField, { + configuration: { + presentation: 'badge-notification', + }, + });`; +const badgeMetricFieldCode = `@field badgeMetric = contains(NumberField, { + configuration: { + presentation: 'badge-metric', + }, + });`; +const badgeCounterFieldCode = `@field badgeCounter = contains(NumberField, { + configuration: { + presentation: 'badge-counter', + }, + });`; +const gaugeFieldCode = `@field gauge = contains(NumberField, { + configuration: { + presentation: 'gauge', + }, + });`; + +class NumberFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class NumberFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class NumberFieldSpec extends Spec { static displayName = 'Number Field Spec'; @@ -65,8 +448,6 @@ export class NumberFieldSpec extends Spec { presentation: 'gauge', }, }); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; -} \ No newline at end of file + static isolated = NumberFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = NumberFieldSpecEdit as unknown as typeof Spec.edit; +} diff --git a/packages/catalog-realm/field-spec/quantity-field-spec.gts b/packages/catalog-realm/field-spec/quantity-field-spec.gts index a87bd0ecf6..4307f51932 100644 --- a/packages/catalog-realm/field-spec/quantity-field-spec.gts +++ b/packages/catalog-realm/field-spec/quantity-field-spec.gts @@ -1,16 +1,294 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import QuantityField from '../fields/quantity'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(QuantityField);`; + +class QuantityFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class QuantityFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class QuantityFieldSpec extends Spec { static displayName = 'Quantity Field Spec'; // Standard QuantityField - default configuration @field standard = contains(QuantityField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + QuantityFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = QuantityFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/quarter-field-spec.gts b/packages/catalog-realm/field-spec/quarter-field-spec.gts index e47e2f59d1..e2fd91485c 100644 --- a/packages/catalog-realm/field-spec/quarter-field-spec.gts +++ b/packages/catalog-realm/field-spec/quarter-field-spec.gts @@ -1,16 +1,293 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import QuarterField from '../fields/date/quarter'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(QuarterField);`; + +class QuarterFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class QuarterFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class QuarterFieldSpec extends Spec { static displayName = 'Quarter Field Spec'; // Standard QuarterField - default configuration @field standard = contains(QuarterField); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = QuarterFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = QuarterFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/rating-field-spec.gts b/packages/catalog-realm/field-spec/rating-field-spec.gts index 7e4a804390..b45f422eba 100644 --- a/packages/catalog-realm/field-spec/rating-field-spec.gts +++ b/packages/catalog-realm/field-spec/rating-field-spec.gts @@ -1,16 +1,293 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import RatingField from '../fields/rating'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(RatingField);`; + +class RatingFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class RatingFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class RatingFieldSpec extends Spec { static displayName = 'Rating Field Spec'; // Standard RatingField - default configuration @field standard = contains(RatingField); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = RatingFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = RatingFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/recurring-pattern-field-spec.gts b/packages/catalog-realm/field-spec/recurring-pattern-field-spec.gts index 9ca55a0bd7..48aafb55ea 100644 --- a/packages/catalog-realm/field-spec/recurring-pattern-field-spec.gts +++ b/packages/catalog-realm/field-spec/recurring-pattern-field-spec.gts @@ -1,16 +1,298 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import RecurringPatternField from '../fields/recurring-pattern'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(RecurringPatternField);`; + +class RecurringPatternFieldSpecIsolated extends Component< + typeof RecurringPatternFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class RecurringPatternFieldSpecEdit extends Component< + typeof RecurringPatternFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class RecurringPatternFieldSpec extends Spec { static displayName = 'Recurring Pattern Field Spec'; // Standard RecurringPatternField - default configuration @field standard = contains(RecurringPatternField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + RecurringPatternFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = RecurringPatternFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/relative-time-field-spec.gts b/packages/catalog-realm/field-spec/relative-time-field-spec.gts index 60d6753f16..71d92c7d00 100644 --- a/packages/catalog-realm/field-spec/relative-time-field-spec.gts +++ b/packages/catalog-realm/field-spec/relative-time-field-spec.gts @@ -1,16 +1,298 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import RelativeTimeField from '../fields/time/relative-time'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(RelativeTimeField);`; + +class RelativeTimeFieldSpecIsolated extends Component< + typeof RelativeTimeFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class RelativeTimeFieldSpecEdit extends Component< + typeof RelativeTimeFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class RelativeTimeFieldSpec extends Spec { static displayName = 'Relative Time Field Spec'; // Standard RelativeTimeField - default configuration @field standard = contains(RelativeTimeField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + RelativeTimeFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = RelativeTimeFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/time-field-spec.gts b/packages/catalog-realm/field-spec/time-field-spec.gts index 91d8c98e53..eebaa11ec2 100644 --- a/packages/catalog-realm/field-spec/time-field-spec.gts +++ b/packages/catalog-realm/field-spec/time-field-spec.gts @@ -1,8 +1,313 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import TimeField from '../fields/time'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(TimeField);`; +const hour24FieldCode = `@field hour24 = contains(TimeField, { + configuration: { + hourCycle: 'h23', + }, + });`; +const longStyleFieldCode = `@field longStyle = contains(TimeField, { + configuration: { + timeStyle: 'long', + }, + });`; + +class TimeFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class TimeFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class TimeFieldSpec extends Spec { static displayName = 'Time Field Spec'; @@ -23,8 +328,6 @@ export class TimeFieldSpec extends Spec { timeStyle: 'long', }, }); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = TimeFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = TimeFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/time-period-field-spec.gts b/packages/catalog-realm/field-spec/time-period-field-spec.gts index 6146922612..81f1b8c429 100644 --- a/packages/catalog-realm/field-spec/time-period-field-spec.gts +++ b/packages/catalog-realm/field-spec/time-period-field-spec.gts @@ -1,16 +1,296 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import TimePeriodField from '../fields/time-period'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(TimePeriodField);`; + +class TimePeriodFieldSpecIsolated extends Component< + typeof TimePeriodFieldSpec +> { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class TimePeriodFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class TimePeriodFieldSpec extends Spec { static displayName = 'Time Period Field Spec'; // Standard TimePeriodField - default configuration @field standard = contains(TimePeriodField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + TimePeriodFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = TimePeriodFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/time-range-field-spec.gts b/packages/catalog-realm/field-spec/time-range-field-spec.gts index 1d07e5c508..0e0ad2bb17 100644 --- a/packages/catalog-realm/field-spec/time-range-field-spec.gts +++ b/packages/catalog-realm/field-spec/time-range-field-spec.gts @@ -1,16 +1,294 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import TimeRangeField from '../fields/time/time-range'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(TimeRangeField);`; + +class TimeRangeFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class TimeRangeFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class TimeRangeFieldSpec extends Spec { static displayName = 'Time Range Field Spec'; // Standard TimeRangeField - default configuration @field standard = contains(TimeRangeField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + TimeRangeFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = TimeRangeFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/week-field-spec.gts b/packages/catalog-realm/field-spec/week-field-spec.gts index a707e3c0c5..feecf124bc 100644 --- a/packages/catalog-realm/field-spec/week-field-spec.gts +++ b/packages/catalog-realm/field-spec/week-field-spec.gts @@ -1,16 +1,293 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import WeekField from '../fields/date/week'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(WeekField);`; + +class WeekFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class WeekFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class WeekFieldSpec extends Spec { static displayName = 'Week Field Spec'; // Standard WeekField - default configuration @field standard = contains(WeekField); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = WeekFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = WeekFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/field-spec/year-field-spec.gts b/packages/catalog-realm/field-spec/year-field-spec.gts index 8bb99d0e21..1feadf1843 100644 --- a/packages/catalog-realm/field-spec/year-field-spec.gts +++ b/packages/catalog-realm/field-spec/year-field-spec.gts @@ -1,16 +1,293 @@ -import { Spec } from 'https://cardstack.com/base/spec'; -import { field, contains } from 'https://cardstack.com/base/card-api'; +import { + Spec, + SpecHeader, + SpecReadmeSection, + ExamplesWithInteractive, + SpecModuleSection, +} from 'https://cardstack.com/base/spec'; +import { + field, + contains, + Component, + CardDef, + BaseDef, + getCardMeta, +} from 'https://cardstack.com/base/card-api'; import YearField from '../fields/date/year'; -import FieldSpecEditTemplate from './components/field-spec-edit-template'; -import FieldSpecIsolatedTemplate from './components/field-spec-isolated-template'; +import CodeSnippet from '../components/code-snippet'; + +import { action } from '@ember/object'; +import { task } from 'ember-concurrency'; +import { use, resource } from 'ember-resources'; +import { TrackedObject } from 'tracked-built-ins'; +import { isPrimitive, loadCardDef } from '@cardstack/runtime-common'; +import type { Loader } from '@cardstack/runtime-common'; +import GenerateReadmeSpecCommand from '@cardstack/boxel-host/commands/generate-readme-spec'; + +function myLoader(): Loader { + // @ts-ignore + return (import.meta as any).loader; +} + +const standardFieldCode = `@field standard = contains(YearField);`; + +class YearFieldSpecIsolated extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObj = new TrackedObject<{ value: typeof BaseDef | undefined }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObj.value = cardDef; + } + } catch (e) { + cardDefObj.value = undefined; + } + })(); + return cardDefObj; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} + +class YearFieldSpecEdit extends Component { + get defaultIcon() { + if (!this.args.model) { + return; + } + return this.args.model.constructor?.icon; + } + + @action + generateReadme() { + this.generateReadmeTask.perform(); + } + + generateReadmeTask = task(async () => { + if (!this.args.model) { + return; + } + + let commandContext = this.args.context?.commandContext; + if (!commandContext) { + console.error('Command context not available'); + return; + } + + try { + const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( + commandContext, + ); + await generateReadmeSpecCommand.execute({ + spec: this.args.model as Spec, + }); + } catch (error) { + console.error('Error generating README:', error); + } + }); + + get icon() { + return this.cardDef?.icon; + } + + @use private loadCardDef = resource(() => { + let cardDefObject = new TrackedObject<{ + value: typeof BaseDef | undefined; + }>({ + value: undefined, + }); + (async () => { + try { + if (this.args.model.ref && this.args.model.id) { + let cardDef = await loadCardDef(this.args.model.ref, { + loader: myLoader(), + relativeTo: new URL(this.args.model.id), + }); + cardDefObject.value = cardDef; + } + } catch (e) { + cardDefObject.value = undefined; + } + })(); + return cardDefObject; + }); + + get cardDef() { + return this.loadCardDef.value; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); + } + + private get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + +} export class YearFieldSpec extends Spec { static displayName = 'Year Field Spec'; // Standard YearField - default configuration @field standard = contains(YearField); - - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = YearFieldSpecIsolated as unknown as typeof Spec.isolated; + static edit = YearFieldSpecEdit as unknown as typeof Spec.edit; } diff --git a/packages/catalog-realm/fields/audio.gts b/packages/catalog-realm/fields/audio.gts index 2cfdab0bde..2599bd0da8 100644 --- a/packages/catalog-realm/fields/audio.gts +++ b/packages/catalog-realm/fields/audio.gts @@ -26,7 +26,7 @@ import { AlbumCoverPlayer } from './components/album-cover-player'; import { TrimEditor } from './components/trim-editor'; import { PlaylistRow } from './components/playlist-row'; import { VolumeControl } from './components/volume-control'; -import { eq, or, and, bool } from '@cardstack/boxel-ui/helpers'; +import { eq, or, and, bool, not } from '@cardstack/boxel-ui/helpers'; import { BoxelInput, Button, @@ -99,15 +99,19 @@ class AudioFieldEdit extends Component { {{/if}} - + {{#if @canEdit}} + + {{/if}}
@@ -116,6 +120,7 @@ class AudioFieldEdit extends Component { @value={{@model.cardTitle}} @onInput={{fn (mut @model.cardTitle)}} placeholder='Track title' + @disabled={{not @canEdit}} /> @@ -124,11 +129,15 @@ class AudioFieldEdit extends Component { @value={{@model.artist}} @onInput={{fn (mut @model.artist)}} placeholder='Artist name' + @disabled={{not @canEdit}} />
{{else}} -