diff --git a/packages/base/spec.gts b/packages/base/spec.gts index d9ee3d899f..c5810a20a5 100644 --- a/packages/base/spec.gts +++ b/packages/base/spec.gts @@ -10,6 +10,8 @@ import { getCardMeta, type CardOrFieldTypeIcon, BaseDef, + type CardContext, + type PartialBaseInstanceType, } from './card-api'; import StringField from './string'; import BooleanField from './boolean'; @@ -36,7 +38,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 +63,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,7 +113,20 @@ class SpecTypeField extends StringField { const PRIMITIVE_INCOMPATIBILITY_MESSAGE = 'Examples are not currently supported for primitive fields'; -class Isolated extends Component { +// Exported Header Component +interface SpecHeaderSignature { + Element: HTMLElement; + Args: { + model: PartialBaseInstanceType; + isEditMode?: boolean; + }; + Blocks: { + title: []; + description: []; + }; +} + +export class SpecHeader extends GlimmerComponent { get defaultIcon() { if (!this.args.model) { return; @@ -110,6 +134,139 @@ class Isolated extends Component { return this.args.model.constructor?.icon; } + 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; + } + + +} + +// Exported Readme Section Component +interface SpecReadmeSectionSignature { + Element: HTMLElement; + Args: { + model: PartialBaseInstanceType; + context?: CardContext; + isEditMode?: boolean; + }; + Blocks: { + default: []; + }; +} + +export class SpecReadmeSection extends GlimmerComponent { @action generateReadme() { this.generateReadmeTask.perform(); @@ -130,18 +287,87 @@ class Isolated extends Component { const generateReadmeSpecCommand = new GenerateReadmeSpecCommand( commandContext, ); - const result = await generateReadmeSpecCommand.execute({ + 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; + +} + +// Exported Examples Section Component +interface SpecExamplesSectionSignature { + Element: HTMLElement; + Args: { + model: PartialBaseInstanceType; + }; + Blocks: { + linkedExamples: []; + containedExamples: []; + }; +} + +export class SpecExamplesSection extends GlimmerComponent { + get specType() { + return this.args.model.specType; + } + + get isPrimitiveField() { + return isPrimitive(this.cardDef); } @use private loadCardDef = resource(() => { @@ -168,178 +394,211 @@ class Isolated extends Component { 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'); - } - +} + +// 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: { + model: PartialBaseInstanceType; + }; +} + +export class SpecModuleSection extends GlimmerComponent { + get realmInfo() { + return getCardMeta(this.args.model as CardDef, 'realmInfo'); + } + + get moduleHref() { + return this.args.model.moduleHref; + } + + get refName() { + return this.args.model.ref?.name; + } + + get specType() { + return this.args.model.specType; + } + + +} + +class Isolated extends Component { + 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; + } + + @@ -465,77 +763,6 @@ class Fitted extends Component { } class Edit 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 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; @@ -548,119 +775,31 @@ class Edit extends Component { return ref; } - private get realmInfo() { - return getCardMeta(this.args.model as CardDef, 'realmInfo'); - } - +} diff --git a/packages/catalog-realm/field-spec/audio-field-spec.gts b/packages/catalog-realm/field-spec/audio-field-spec.gts index 555fbd5544..f2ac49025c 100644 --- a/packages/catalog-realm/field-spec/audio-field-spec.gts +++ b/packages/catalog-realm/field-spec/audio-field-spec.gts @@ -1,8 +1,210 @@ -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, +} 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'; + +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 { + +} + +class AudioFieldSpecEdit extends Component { + +} export class AudioFieldSpec extends Spec { static displayName = 'Audio Field Spec'; @@ -65,7 +267,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..f012c8e756 100644 --- a/packages/catalog-realm/field-spec/color-field-spec.gts +++ b/packages/catalog-realm/field-spec/color-field-spec.gts @@ -1,8 +1,199 @@ -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, +} 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'; + +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 { + +} + +class ColorFieldSpecEdit extends Component { + +} export class ColorFieldSpec extends Spec { static displayName = 'Color Field Spec'; @@ -60,7 +251,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..7d377e8e85 100644 --- a/packages/catalog-realm/field-spec/date-field-spec.gts +++ b/packages/catalog-realm/field-spec/date-field-spec.gts @@ -1,8 +1,189 @@ -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, +} 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'; + +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 { + +} + +class DateFieldSpecEdit extends Component { + +} export class DateFieldSpec extends Spec { static displayName = 'Date Field Spec'; @@ -10,21 +191,52 @@ export class DateFieldSpec extends Spec { // Standard DateField - default configuration @field standard = contains(DateField); - // Compact preset - tiny preset for space-saving + // Compact preset - tiny date chips @field compact = contains(DateField, { configuration: { preset: 'tiny', }, }); - // Custom format - custom date formatting + // Custom format - flexible date display @field customFormat = contains(DateField, { configuration: { format: 'MMM D, YYYY', }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + // Countdown presentation + @field countdown = contains(DateField, { + configuration: { + presentation: 'countdown', + countdownOptions: { + label: 'Launch in', + showControls: true, + }, + }, + }); + + // Timeline presentation for events + @field timeline = contains(DateField, { + configuration: { + presentation: 'timeline', + timelineOptions: { + eventName: 'Release', + status: 'active', + }, + }, + }); + + // Age presentation + @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..dde772a50f 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,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(DateRangeField);`; + +class DateRangeFieldSpecIsolated extends Component { + +} + +class DateRangeFieldSpecEdit extends Component { + +} export class DateRangeFieldSpec extends Spec { static displayName = 'Date Range Field Spec'; - // Standard DateRangeField - default configuration + // Standard DateRangeField @field standard = contains(DateRangeField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = 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..1ebeb9027d 100644 --- a/packages/catalog-realm/field-spec/datetime-field-spec.gts +++ b/packages/catalog-realm/field-spec/datetime-field-spec.gts @@ -1,8 +1,139 @@ -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, +} 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'; + +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 { + +} + +class DatetimeFieldSpecEdit extends Component { + +} export class DatetimeFieldSpec extends Spec { static displayName = 'Datetime Field Spec'; @@ -25,6 +156,6 @@ export class DatetimeFieldSpec extends Spec { }); 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..b628a45b69 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,125 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(DatetimeStampField);`; + +class DatetimeStampFieldSpecIsolated extends Component< + typeof DatetimeStampFieldSpec +> { + +} + +class DatetimeStampFieldSpecEdit extends Component< + typeof DatetimeStampFieldSpec +> { + +} export class DatetimeStampFieldSpec extends Spec { static displayName = 'Datetime Stamp Field Spec'; - // Standard DatetimeStampField - default configuration + // Standard DatetimeStampField 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..fd79b23b33 100644 --- a/packages/catalog-realm/field-spec/day-field-spec.gts +++ b/packages/catalog-realm/field-spec/day-field-spec.gts @@ -1,8 +1,113 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(DayField);`; + +class DayFieldSpecIsolated extends Component { + +} + +class DayFieldSpecEdit extends Component { + +} export class DayFieldSpec extends Spec { static displayName = 'Day Field Spec'; @@ -10,7 +115,6 @@ export class DayFieldSpec extends 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..5cff564fed 100644 --- a/packages/catalog-realm/field-spec/duration-field-spec.gts +++ b/packages/catalog-realm/field-spec/duration-field-spec.gts @@ -1,16 +1,169 @@ -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, +} 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'; + +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 { + +} + +class DurationFieldSpecEdit extends Component { + +} export class DurationFieldSpec extends Spec { static displayName = 'Duration Field Spec'; - // Standard DurationField - default configuration + // Standard DurationField @field standard = contains(DurationField); - // Full duration - all time units (years, months, days, hours, minutes, seconds) + // Full duration breakdown @field full = contains(DurationField, { configuration: { includeYears: true, @@ -22,7 +175,7 @@ export class DurationFieldSpec extends Spec { }, }); - // Day-time duration - no years/months (avoids month-length ambiguity) + // Day + time units @field dayTime = contains(DurationField, { configuration: { includeDays: true, @@ -32,7 +185,7 @@ export class DurationFieldSpec extends Spec { }, }); - // Year-month duration - calendar-based periods (contracts, subscriptions) + // Year + month breakdown @field yearMonth = contains(DurationField, { configuration: { includeYears: true, @@ -40,7 +193,6 @@ export class DurationFieldSpec extends Spec { }, }); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = 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..eb461d9b06 100644 --- a/packages/catalog-realm/field-spec/image-field-spec.gts +++ b/packages/catalog-realm/field-spec/image-field-spec.gts @@ -1,20 +1,164 @@ -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, +} 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'; + +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 { + +} + +class ImageFieldSpecEdit extends Component { + +} export class ImageFieldSpec extends Spec { static displayName = 'Image Field Spec'; - // Browse variant - default browse variant for general image uploads + // Browse variant @field browse = contains(ImageField, { configuration: { variant: 'browse', }, }); - // Avatar variant - circular image upload for profile pictures + // Avatar variant @field avatar = contains(ImageField, { configuration: { variant: 'avatar', @@ -25,7 +169,7 @@ export class ImageFieldSpec extends Spec { }, }); - // Dropzone variant - drag and drop interface with modal preview + // Dropzone variant @field dropzone = contains(ImageField, { configuration: { variant: 'dropzone', @@ -37,7 +181,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..ffba68da3a 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,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(MonthDayField);`; + +class MonthDayFieldSpecIsolated extends Component { + +} + +class MonthDayFieldSpecEdit extends Component { + +} export class MonthDayFieldSpec extends Spec { static displayName = 'Month Day Field Spec'; - // Standard MonthDayField - default configuration + // Standard MonthDayField configuration @field standard = contains(MonthDayField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = 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..6d1b169b7f 100644 --- a/packages/catalog-realm/field-spec/month-field-spec.gts +++ b/packages/catalog-realm/field-spec/month-field-spec.gts @@ -1,16 +1,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(MonthField);`; + +class MonthFieldSpecIsolated extends Component { + +} + +class MonthFieldSpecEdit extends Component { + +} export class MonthFieldSpec extends Spec { static displayName = 'Month Field Spec'; - // Standard MonthField - default configuration + // Standard MonthField 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..91ff08325a 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,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(MonthYearField);`; + +class MonthYearFieldSpecIsolated extends Component { + +} + +class MonthYearFieldSpecEdit extends Component { + +} export class MonthYearFieldSpec extends Spec { static displayName = 'Month Year Field Spec'; - // Standard MonthYearField - default configuration + // Standard MonthYearField configuration @field standard = contains(MonthYearField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = 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..e55a1c20f8 100644 --- a/packages/catalog-realm/field-spec/multiple-image-field-spec.gts +++ b/packages/catalog-realm/field-spec/multiple-image-field-spec.gts @@ -1,13 +1,166 @@ -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, +} 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'; + +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 +> { + +} + +class MultipleImageFieldSpecEdit extends Component< + typeof MultipleImageFieldSpec +> { + +} export class MultipleImageFieldSpec extends Spec { static displayName = 'Multiple Image Field Spec'; - // List variant - standard list view with grid display + // List presentation @field list = contains(MultipleImageField, { configuration: { variant: 'list', @@ -15,7 +168,7 @@ export class MultipleImageFieldSpec extends Spec { }, }); - // Gallery variant - grid edit with carousel display and reordering + // Gallery presentation @field gallery = contains(MultipleImageField, { configuration: { variant: 'gallery', @@ -29,7 +182,7 @@ export class MultipleImageFieldSpec extends Spec { }, }); - // Dropzone variant - drag and drop multiple images with carousel + // Dropzone presentation @field dropzone = contains(MultipleImageField, { configuration: { variant: 'dropzone', @@ -43,6 +196,6 @@ 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..61c2a5ab4d 100644 --- a/packages/catalog-realm/field-spec/number-field-spec.gts +++ b/packages/catalog-realm/field-spec/number-field-spec.gts @@ -1,13 +1,222 @@ -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, +} 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'; + +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 { + +} + +class NumberFieldSpecEdit extends Component { + +} export class NumberFieldSpec extends Spec { static displayName = 'Number Field Spec'; - // Standard NumberField - default configuration + // Standard NumberField configuration @field standard = contains(NumberField); // Progress bar presentation @@ -66,7 +275,6 @@ export class NumberFieldSpec extends Spec { }, }); - 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..7a3ea25101 100644 --- a/packages/catalog-realm/field-spec/quantity-field-spec.gts +++ b/packages/catalog-realm/field-spec/quantity-field-spec.gts @@ -1,16 +1,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(QuantityField);`; + +class QuantityFieldSpecIsolated extends Component { + +} + +class QuantityFieldSpecEdit extends Component { + +} export class QuantityFieldSpec extends Spec { static displayName = 'Quantity Field Spec'; - // Standard QuantityField - default configuration + // Standard QuantityField configuration @field standard = contains(QuantityField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = 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..186025a8d8 100644 --- a/packages/catalog-realm/field-spec/quarter-field-spec.gts +++ b/packages/catalog-realm/field-spec/quarter-field-spec.gts @@ -1,16 +1,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(QuarterField);`; + +class QuarterFieldSpecIsolated extends Component { + +} + +class QuarterFieldSpecEdit extends Component { + +} export class QuarterFieldSpec extends Spec { static displayName = 'Quarter Field Spec'; - // Standard QuarterField - default configuration + // Standard QuarterField 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..8292a423cf 100644 --- a/packages/catalog-realm/field-spec/rating-field-spec.gts +++ b/packages/catalog-realm/field-spec/rating-field-spec.gts @@ -1,16 +1,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(RatingField);`; + +class RatingFieldSpecIsolated extends Component { + +} + +class RatingFieldSpecEdit extends Component { + +} export class RatingFieldSpec extends Spec { static displayName = 'Rating Field Spec'; - // Standard RatingField - default configuration + // Standard RatingField 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..6e451fc5cb 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,125 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(RecurringPatternField);`; + +class RecurringPatternFieldSpecIsolated extends Component< + typeof RecurringPatternFieldSpec +> { + +} + +class RecurringPatternFieldSpecEdit extends Component< + typeof RecurringPatternFieldSpec +> { + +} export class RecurringPatternFieldSpec extends Spec { static displayName = 'Recurring Pattern Field Spec'; - // Standard RecurringPatternField - default configuration + // Standard RecurringPatternField 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..baf262a1ed 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,125 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(RelativeTimeField);`; + +class RelativeTimeFieldSpecIsolated extends Component< + typeof RelativeTimeFieldSpec +> { + +} + +class RelativeTimeFieldSpecEdit extends Component< + typeof RelativeTimeFieldSpec +> { + +} export class RelativeTimeFieldSpec extends Spec { static displayName = 'Relative Time Field Spec'; - // Standard RelativeTimeField - default configuration + // Standard RelativeTimeField 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..39a55ba8dd 100644 --- a/packages/catalog-realm/field-spec/time-field-spec.gts +++ b/packages/catalog-realm/field-spec/time-field-spec.gts @@ -1,30 +1,160 @@ -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, +} 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'; + +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 { + +} + +class TimeFieldSpecEdit extends Component { + +} export class TimeFieldSpec extends Spec { static displayName = 'Time Field Spec'; - // Standard TimeField - default configuration + // Standard TimeField configuration @field standard = contains(TimeField); - // 24-hour format - 24-hour time display + // 24-hour format @field hour24 = contains(TimeField, { configuration: { hourCycle: 'h23', }, }); - // Long style - includes timezone information + // Long time style @field longStyle = contains(TimeField, { configuration: { 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..b3f59639f4 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,125 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(TimePeriodField);`; + +class TimePeriodFieldSpecIsolated extends Component< + typeof TimePeriodFieldSpec +> { + +} + +class TimePeriodFieldSpecEdit extends Component< + typeof TimePeriodFieldSpec +> { + +} export class TimePeriodFieldSpec extends Spec { static displayName = 'Time Period Field Spec'; - // Standard TimePeriodField - default configuration + // Standard TimePeriodField 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..a746b995d9 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,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(TimeRangeField);`; + +class TimeRangeFieldSpecIsolated extends Component { + +} + +class TimeRangeFieldSpecEdit extends Component { + +} export class TimeRangeFieldSpec extends Spec { static displayName = 'Time Range Field Spec'; - // Standard TimeRangeField - default configuration + // Standard TimeRangeField configuration @field standard = contains(TimeRangeField); - static isolated = - FieldSpecIsolatedTemplate as unknown as typeof Spec.isolated; - static edit = FieldSpecEditTemplate as unknown as typeof Spec.edit; + static isolated = 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..7ffa9e5513 100644 --- a/packages/catalog-realm/field-spec/week-field-spec.gts +++ b/packages/catalog-realm/field-spec/week-field-spec.gts @@ -1,16 +1,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(WeekField);`; + +class WeekFieldSpecIsolated extends Component { + +} + +class WeekFieldSpecEdit extends Component { + +} export class WeekFieldSpec extends Spec { static displayName = 'Week Field Spec'; - // Standard WeekField - default configuration + // Standard WeekField 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..3bc8320352 100644 --- a/packages/catalog-realm/field-spec/year-field-spec.gts +++ b/packages/catalog-realm/field-spec/year-field-spec.gts @@ -1,16 +1,120 @@ -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, +} 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'; + +const standardFieldCode = `@field standard = contains(YearField);`; + +class YearFieldSpecIsolated extends Component { + +} + +class YearFieldSpecEdit extends Component { + +} export class YearFieldSpec extends Spec { static displayName = 'Year Field Spec'; - // Standard YearField - default configuration + // Standard YearField 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}} -