Promote catalog fields to base

packages/catalog-realm/fields/amount-with-currency.gts → packages/base/amount-with-currency.gts

@@ -1,6 +1,5 @@
-import NumberField from 'https://cardstack.com/base/number';
-import { FieldDef, field, contains } from 'https://cardstack.com/base/card-api';
-import { Component } from 'https://cardstack.com/base/card-api';
+import NumberField from './number';
+import { FieldDef, field, contains, Component } from './card-api';
 import CurrencyField from './currency';
 import { action } from '@ember/object';
 import { BoxelInputGroup } from '@cardstack/boxel-ui/components';

packages/catalog-realm/fields/color-field/components/color-picker-field.gts → packages/base/color-field/components/color-picker-field.gts

@@ -174,7 +174,7 @@ export default class ColorPickerField extends Component<ColorFieldSignature> {
         {{else}}
           <ColorPicker
             @color={{@model}}
-            @onChange={{this.handleColorChange}}
+            @onChange={{this.handleColorChangeImmediate}}
             @disabled={{not @canEdit}}
           />
         {{/if}}

packages/base/color.gts

@@ -1,55 +1,28 @@
-import { Component, StringField } from './card-api';
-import {
-  ColorPalette,
-  Swatch,
-  ColorPicker,
-} from '@cardstack/boxel-ui/components';
-import { markdownEscape, not } from '@cardstack/boxel-ui/helpers';
-import PaintBucket from '@cardstack/boxel-icons/paint-bucket';
-
-// TypeScript configuration interface
-export type ColorFieldConfiguration = {
-  options?: {
-    showPalette?: boolean; // Show color palette component (default: false)
-  };
-};
+import { Component } from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import { Swatch } from '@cardstack/boxel-ui/components';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
+import PaletteIcon from '@cardstack/boxel-icons/palette';
+import ColorPickerField from './color-field/components/color-picker-field';
 
 class View extends Component<typeof ColorField> {
-  <template>
-    <Swatch @color={{@model}} @style='round' />
-  </template>
+  <template><Swatch @color={{@model}} @style='round' /></template>
 }
 
 class EditView extends Component<typeof ColorField> {
-  get options() {
-    return (this.args.configuration as ColorFieldConfiguration)?.options || {};
-  }
-
-  get showPalette(): boolean {
-    return this.options.showPalette ?? false;
-  }
-
   <template>
-    {{#if this.showPalette}}
-      <ColorPalette
-        @color={{@model}}
-        @onChange={{@set}}
-        @disabled={{not @canEdit}}
-      />
-    {{else}}
-      <ColorPicker
-        @color={{@model}}
-        @onChange={{@set}}
-        @disabled={{not @canEdit}}
-        @placeholder='Custom hex color (#ff00ff)'
-      />
-    {{/if}}
+    <ColorPickerField
+      @model={{@model}}
+      @set={{@set}}
+      @canEdit={{@canEdit}}
+      @configuration={{@configuration}}
+    />
   </template>
 }
 
 export default class ColorField extends StringField {
   static displayName = 'Color';
-  static icon = PaintBucket;
+  static icon = PaletteIcon;
 
   static embedded = View;
   static atom = View;

packages/base/components/age.gts

@@ -0,0 +1,198 @@
+import GlimmerComponent from '@glimmer/component';
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+interface AgeConfiguration {
+  ageOptions?: {
+    showNextBirthday?: boolean;
+  };
+}
+export interface AgeSignature {
+  Args: {
+    model?: any;
+    config?: AgeConfiguration;
+  };
+}
+
+export class Age extends GlimmerComponent<AgeSignature> {
+  get config(): AgeConfiguration | undefined {
+    return this.args.config as AgeConfiguration | undefined;
+  }
+
+  get birthDate() {
+    return this.args.model;
+  }
+
+  get showNextBirthday() {
+    return this.config?.ageOptions?.showNextBirthday ?? true;
+  }
+
+  get age() {
+    if (!this.birthDate) return null;
+
+    try {
+      const birth = new Date(this.birthDate);
+      const today = new Date();
+
+      // If birth date is in the future, return null (invalid)
+      if (birth > today) return null;
+
+      let years = today.getFullYear() - birth.getFullYear();
+      const monthDiff = today.getMonth() - birth.getMonth();
+
+      if (
+        monthDiff < 0 ||
+        (monthDiff === 0 && today.getDate() < birth.getDate())
+      ) {
+        years--;
+      }
+
+      // If less than 1 year old, calculate months
+      if (years === 0) {
+        let months = today.getMonth() - birth.getMonth();
+        if (today.getDate() < birth.getDate()) {
+          months--;
+        }
+        // Handle negative months (birth date in previous calendar year)
+        if (months < 0) {
+          months += 12;
+        }
+        return { years: 0, months };
+      }
+
+      return { years, months: 0 };
+    } catch {
+      return null;
+    }
+  }
+
+  get nextBirthday() {
+    if (!this.birthDate) return null;
+
+    try {
+      const birth = new Date(this.birthDate);
+      const today = new Date();
+
+      // If birth date is in the future, can't calculate next birthday
+      if (birth > today) return null;
+
+      const nextBday = new Date(
+        today.getFullYear(),
+        birth.getMonth(),
+        birth.getDate(),
+      );
+
+      if (nextBday < today) {
+        nextBday.setFullYear(today.getFullYear() + 1);
+      }
+
+      const diff = nextBday.getTime() - today.getTime();
+      const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
+
+      return days;
+    } catch {
+      return null;
+    }
+  }
+
+  get isFutureDate() {
+    if (!this.birthDate) return false;
+    try {
+      const birth = new Date(this.birthDate);
+      const today = new Date();
+      return birth > today;
+    } catch {
+      return false;
+    }
+  }
+
+  get birthDateDisplay() {
+    if (!this.birthDate) return '';
+
+    try {
+      return new Date(this.birthDate).toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      });
+    } catch {
+      return '';
+    }
+  }
+
+  <template>
+    <div class='age-calculator' data-test-age-calculator>
+      {{#if this.isFutureDate}}
+        <div class='age-error'>Invalid birth date (future date not allowed)</div>
+      {{else if this.age}}
+        <div class='age-display'>
+          <div class='age-value'>
+            {{#if (eq this.age.years 0)}}
+              {{this.age.months}}
+              {{if (eq this.age.months 1) 'month' 'months'}}
+              old
+            {{else}}
+              {{this.age.years}}
+              {{if (eq this.age.years 1) 'year' 'years'}}
+              old
+            {{/if}}
+          </div>
+          <div class='age-meta'>
+            Born
+            {{this.birthDateDisplay}}
+            {{#if this.showNextBirthday}}
+              {{#if this.nextBirthday}}
+                * • Next birthday in
+                {{this.nextBirthday}}
+                {{if (eq this.nextBirthday 1) 'day' 'days'}}
+              {{/if}}
+            {{/if}}
+          </div>
+        </div>
+      {{else}}
+        <div class='age-placeholder'>No birth date set</div>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .age-calculator {
+        padding: 0.75rem;
+        background: linear-gradient(
+          135deg,
+          rgba(59, 130, 246, 0.1),
+          rgba(147, 197, 253, 0.1)
+        );
+        border: 1px solid rgba(59, 130, 246, 0.2);
+        border-radius: var(--radius, 0.375rem);
+      }
+
+      .age-display {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+      }
+
+      .age-value {
+        font-size: 1.125rem;
+        font-weight: 700;
+        color: var(--primary, #3b82f6);
+      }
+
+      .age-meta {
+        font-size: 0.75rem;
+        color: var(--muted-foreground, #9ca3af);
+      }
+
+      .age-placeholder {
+        font-size: 0.875rem;
+        color: var(--muted-foreground, #9ca3af);
+        font-style: italic;
+      }
+
+      .age-error {
+        font-size: 0.875rem;
+        color: var(--destructive, #ef4444);
+        font-style: italic;
+      }
+    </style>
+  </template>
+}