@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

package/bundled-types/boxel-ui/components/dropdown/usage.gts

@@ -0,0 +1,119 @@
+import { array, fn } from '@ember/helper';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import menuItem from '../../helpers/menu-item.ts';
+import BoxelButton from '../button/index.gts';
+import BoxelMenu from '../menu/index.gts';
+import BoxelDropdown from './index.gts';
+
+export default class BoxelDropdownUsage extends Component {
+  dropdownVariants = ['default', 'primary', 'secondary'];
+
+  @tracked shouldDropdownAutoClose = false;
+  @tracked variant: undefined | 'primary' | 'secondary' | 'default' = undefined;
+
+  @action log(string: string): void {
+    console.log(string);
+  }
+
+  <template>
+    <FreestyleUsage @name='Dropdown'>
+      <:description>
+        This component is a building block for more complex components. By
+        default this component will render the dropdown in the body using
+        #-in-element and absolutely position it to place it in the proper
+        coordinates relative to the trigger. Consider using
+        <a
+          href='https://github.com/josemarluedke/ember-focus-trap'
+        >ember-focus-trap</a>
+        within the content block to improve accessibility when the dropdown is
+        open.
+      </:description>
+      <:example>
+        <BoxelDropdown
+          @autoClose={{this.shouldDropdownAutoClose}}
+          @variant={{this.variant}}
+        >
+          <:trigger as |bindings|>
+            <BoxelButton {{bindings}}>
+              Trigger
+            </BoxelButton>
+          </:trigger>
+          <:content as |dd|>
+            <BoxelMenu
+              @closeMenu={{dd.close}}
+              @items={{array
+                (menuItem
+                  'Duplicate' (fn this.log 'Duplicate menu item clicked')
+                )
+                (menuItem 'Share' (fn this.log 'Share menu item clicked'))
+              }}
+            />
+          </:content>
+        </BoxelDropdown>
+
+        {{! Note: the shape of the PublicAPI object passed to the optional
+        registerAPI action is as follows:
+
+          {
+            uniqueId: string;
+            disabled: boolean;
+            isOpen: boolean;
+            actions: {
+              toggle: (e?: Event) => void;
+              close: (e?: Event, skipFocus?: boolean) => void;
+              open: (e?: Event) => void;
+              reposition: (...args: any[]) => undefined | RepositionChanges;
+            };
+          }
+        }}
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='contentClass'
+          @description='CSS Class to apply to the dropdown content div'
+          @hideControls={{true}}
+        />
+        <Args.String
+          @name='variant'
+          @optional={{true}}
+          @description='Theme-based variant for consistent styling'
+          @options={{this.dropdownVariants}}
+          @onInput={{fn (mut this.variant)}}
+          @value={{this.variant}}
+        />
+        <Args.Bool
+          @name='matchTriggerWidth'
+          @description='Whether to match the width of the trigger'
+          @hideControls={{true}}
+        />
+        <Args.Action
+          @name='registerAPI'
+          @description='Action called when the publicAPI changes, passing the publicAPI object.'
+        />
+        <Args.Action
+          @name='onClose'
+          @description='Action called when the dropdown is closing'
+        />
+        <Args.Bool
+          @name='autoClose'
+          @optional={{true}}
+          @description='Whether the dropdown should automatically close when mouse leaves the dropdown content'
+          @value={{this.shouldDropdownAutoClose}}
+          @onInput={{fn (mut this.shouldDropdownAutoClose)}}
+        />
+        <Args.Yield
+          @name='trigger'
+          @description='Content to be used as trigger for basic dropdown. Yields a bindings modifier which applies aria- attributes and event handling.'
+        />
+        <Args.Yield
+          @name='content'
+          @description='Content to show on dropdown. The provided block is rendered when trigger is triggered. Yields close action to close the dropdown'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

package/bundled-types/boxel-ui/components/email-input/index.gts

@@ -0,0 +1,111 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { debounce } from '@ember/runloop';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import validateEmailFormat, {
+  type EmailFormatValidationError,
+  isValidEmailFormat,
+} from '../../helpers/validate-email-format.ts';
+import BoxelInput, { type InputValidationState } from '../input/index.gts';
+
+interface Signature {
+  Args: {
+    disabled?: boolean;
+    onChange?: (
+      value: string | null,
+      validation: EmailFormatValidationError | null,
+      ev: Event,
+    ) => void;
+    placeholder?: string;
+    required?: boolean;
+    value: string | null;
+  };
+  Element: HTMLElement;
+}
+
+const DEFAULT_FALLBACK_MESSAGE = 'Enter a valid email address';
+
+export default class EmailInput extends Component<Signature> {
+  private fallbackErrorMessage = DEFAULT_FALLBACK_MESSAGE;
+
+  @tracked private validationState: InputValidationState = this.args.value
+    ? isValidEmailFormat(this.args.value)
+      ? 'valid'
+      : 'invalid'
+    : 'initial';
+  @tracked private inputValue = this.args.value ?? '';
+  @tracked private errorMessage = this.args.value
+    ? validateEmailFormat(this.args.value)?.message
+    : '';
+  @tracked private hasBlurred = false;
+
+  private notify(
+    value: string | null,
+    validation: EmailFormatValidationError | null,
+    ev: Event,
+  ) {
+    this.args.onChange?.(value, validation, ev);
+  }
+
+  private handleValidation = (input: string, ev: Event) => {
+    input = input?.trim();
+
+    let t = ev.target as HTMLInputElement | null;
+    let required = this.args.required || t?.required;
+
+    if (!input?.length && !required) {
+      this.validationState = 'initial';
+      this.errorMessage = undefined;
+      this.notify(input, null, ev);
+      return;
+    }
+
+    const validation = validateEmailFormat(input);
+    if (validation) {
+      this.validationState = this.hasBlurred ? 'invalid' : 'initial';
+      this.errorMessage =
+        this.validationState === 'invalid'
+          ? (validation.message ?? this.fallbackErrorMessage)
+          : undefined;
+    } else {
+      this.validationState = 'valid';
+      this.errorMessage = undefined;
+    }
+
+    this.notify(input, validation, ev);
+  };
+
+  @action onInput(ev: Event): void {
+    this.hasBlurred = false;
+    if (this.validationState === 'invalid') {
+      this.validationState = 'initial';
+    }
+    this.errorMessage = undefined;
+    let value = (ev?.target as HTMLInputElement | null)?.value ?? '';
+    this.inputValue = value;
+    debounce(this.handleValidation, value, ev, 300);
+  }
+
+  @action onBlur(ev: Event): void {
+    this.hasBlurred = true;
+    this.handleValidation(this.inputValue, ev);
+  }
+
+  <template>
+    <BoxelInput
+      @type='email'
+      @value={{this.inputValue}}
+      {{on 'input' this.onInput}}
+      @onBlur={{this.onBlur}}
+      @state={{this.validationState}}
+      @errorMessage={{this.errorMessage}}
+      @disabled={{@disabled}}
+      @placeholder={{if @placeholder @placeholder 'Enter email'}}
+      @required={{@required}}
+      data-test-boxel-email-input
+      ...attributes
+    />
+  </template>
+}

package/bundled-types/boxel-ui/components/email-input/usage.gts

@@ -0,0 +1,75 @@
+import { fn } from '@ember/helper';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import EmailInput from './index.gts';
+
+export default class EmailInputUsage extends Component {
+  @tracked value: string | null = null;
+  @tracked disabled = false;
+  @tracked required = false;
+  @tracked placeholder?: string;
+
+  @action handleChange(newValue: string | null): void {
+    this.value = newValue;
+  }
+
+  <template>
+    <FreestyleUsage @name='EmailInput'>
+      <:description>
+        <p>
+          <code>EmailInput</code>
+          wraps
+          <code>BoxelInput</code>
+          with client-side validation for email addresses. Input values are
+          committed via
+          <code>@onChange</code>, which also passes along the current validation
+          error object (or
+          <code>null</code>); invalid input surfaces a descriptive error message
+          on blur.
+        </p>
+      </:description>
+      <:example>
+        <EmailInput
+          @value={{this.value}}
+          @onChange={{fn (mut this.value)}}
+          @disabled={{this.disabled}}
+          @placeholder={{this.placeholder}}
+          @required={{this.required}}
+        />
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='value'
+          @description='The current value passed to the input'
+          @value={{this.value}}
+          @onInput={{fn (mut this.value)}}
+          @optional={{true}}
+        />
+        <Args.Action
+          @name='onChange'
+          @description='Called with input (string, or null if empty) when not invalid'
+        />
+        <Args.String
+          @name='placeholder'
+          @description='Empty input placeholder'
+          @value={{this.placeholder}}
+          @onInput={{fn (mut this.placeholder)}}
+          @defaultValue='Enter email'
+        />
+        <Args.Bool
+          @name='disabled'
+          @value={{this.disabled}}
+          @onInput={{fn (mut this.disabled)}}
+        />
+        <Args.Bool
+          @name='required'
+          @value={{this.required}}
+          @onInput={{fn (mut this.required)}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

package/bundled-types/boxel-ui/components/entity-icon-display/index.gts

@@ -0,0 +1,144 @@
+import { concat } from '@ember/helper';
+import GlimmerComponent from '@glimmer/component';
+
+interface EntityDisplayWithIconArgs {
+  Args: {
+    //prefer using args.title if the title is just a string
+    center?: boolean;
+    title?: string;
+    underline?: boolean;
+  };
+  Blocks: {
+    content?: []; //we can choose use this to pass instead of using args.title if the title block HTML is complex
+    icon?: [];
+    tag?: [];
+    title?: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class EntityDisplayWithIcon extends GlimmerComponent<EntityDisplayWithIconArgs> {
+  get shouldAlignCenter() {
+    return this.args.center;
+  }
+
+  get shouldUnderlineText() {
+    return this.args.underline;
+  }
+
+  <template>
+    <div
+      class={{concat
+        'entity-icon-display'
+        (if this.shouldAlignCenter ' center')
+      }}
+      ...attributes
+    >
+      {{#if (has-block 'icon')}}
+        <span class='entity-icon'>
+          {{yield to='icon'}}
+        </span>
+      {{/if}}
+
+      <div class='entity-info'>
+        {{! Title and tag }}
+        <div class='entity-title-tag-container'>
+          {{! this guard clause is already priotize yield to 'title' instead of using args.title if both are provided}}
+          {{#if (has-block 'title')}}
+            {{yield to='title'}}
+          {{else if @title}}
+            <span
+              class={{concat
+                'entity-title'
+                (if this.shouldUnderlineText ' underline')
+              }}
+            >
+              {{@title}}
+            </span>
+          {{/if}}
+
+          {{#if (has-block 'tag')}}
+            {{yield to='tag'}}
+          {{/if}}
+        </div>
+
+        {{! Extra Content }}
+        {{#if (has-block 'content')}}
+          <div class='entity-content'>
+            {{yield to='content'}}
+          </div>
+        {{/if}}
+      </div>
+
+    </div>
+    <style scoped>
+      .entity-icon-display {
+        display: var(--entity-display-display, flex);
+        align-items: var(--entity-display-align-items, flex-start);
+        flex-direction: var(--entity-display-flex-direction, row);
+        gap: var(--entity-display-gap, var(--boxel-sp-xxxs));
+      }
+      .entity-icon-display.center {
+        align-items: center;
+      }
+      .entity-icon {
+        display: var(--entity-display-icon-display, inline-flex);
+        align-items: var(--entity-display-icon-align-items, center);
+        justify-content: var(--entity-display-icon-justify-content, center);
+        flex-shrink: 0;
+        width: var(--entity-display-icon-size, var(--boxel-icon-sm));
+        height: var(--entity-display-icon-size, var(--boxel-icon-sm));
+      }
+      .entity-info {
+        display: var(--entity-display-info-display, flex);
+        flex-direction: var(--entity-display-info-flex-direction, column);
+        gap: var(--entity-display-info-gap, var(--boxel-sp-xxxs));
+      }
+      .entity-title-tag-container {
+        display: var(--entity-display-title-tag-container-display, flex);
+        flex-wrap: var(--entity-display-title-tag-container-flex-wrap, wrap);
+        align-items: var(
+          --entity-display-title-tag-container-align-items,
+          center
+        );
+        gap: var(
+          --entity-display-title-tag-container-gap,
+          var(--boxel-sp-xxxs)
+        );
+      }
+      .entity-title {
+        color: var(--entity-display-title-color, var(--boxel-dark));
+        font-size: var(
+          --entity-display-title-font-size,
+          var(--boxel-font-size-sm)
+        );
+        font-weight: var(--entity-display-title-font-weight, 600);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--entity-display-title-line-clamp, 1);
+        margin: var(--entity-display-title-margin, 0);
+        word-break: var(--entity-display-title-word-break, break-word);
+      }
+      .entity-title.underline {
+        text-decoration: var(--entity-display-title-underline, underline);
+      }
+      .entity-content {
+        color: var(--entity-display-content-color, var(--boxel-400));
+        font-size: var(
+          --entity-display-content-font-size,
+          var(--boxel-font-size-xs)
+        );
+        font-weight: var(--entity-display-content-font-weight, 400);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--entity-display-content-line-clamp, 1);
+        margin: var(--entity-display-content-margin, 0);
+        word-break: var(--entity-display-content-word-break, break-word);
+      }
+    </style>
+  </template>
+}

package/bundled-types/boxel-ui/components/entity-icon-display/usage.gts

@@ -0,0 +1,54 @@
+import PhoneIcon from '@cardstack/boxel-icons/phone';
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import EntityDisplayWithIcon from './index.gts';
+
+export default class EntityIconDisplayUsage extends Component {
+  @tracked title: string | null = null;
+  @tracked center = false;
+  @tracked underline = false;
+
+  <template>
+    <FreestyleUsage
+      @name='EntityDisplayWithIcon'
+      @description='A component that displays an entity with an icon.'
+    >
+      <:example>
+        <EntityDisplayWithIcon @underline={{false}}>
+          <:title>
+            +60123456789
+          </:title>
+          <:icon>
+            <PhoneIcon class='icon' />
+          </:icon>
+        </EntityDisplayWithIcon>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='title'
+          @optional={{false}}
+          @description='Entity display title.'
+          @value={{this.title}}
+          @onInput={{fn (mut this.title)}}
+        />
+        <Args.Bool
+          @name='center'
+          @description='Whether to center the entity display.'
+          @value={{this.center}}
+          @onInput={{fn (mut this.center)}}
+          @defaultValue={{false}}
+        />
+        <Args.Bool
+          @name='underline'
+          @description='Whether to underline the entity display title.'
+          @value={{this.underline}}
+          @onInput={{fn (mut this.underline)}}
+          @defaultValue={{false}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

package/bundled-types/boxel-ui/components/entity-thumbnail-display/index.gts

@@ -0,0 +1,148 @@
+import { concat } from '@ember/helper';
+import GlimmerComponent from '@glimmer/component';
+
+interface EntityDisplayWithThumbnailArgs {
+  Args: {
+    //prefer using args.title if the title is just a string
+    center?: boolean;
+    title?: string;
+    underline?: boolean;
+  };
+  Blocks: {
+    content?: [];
+    tag?: [];
+    //we can choose use this to pass instead of using args.title if the title block HTML is complex
+    thumbnail?: [];
+    title?: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class EntityDisplayWithThumbnail extends GlimmerComponent<EntityDisplayWithThumbnailArgs> {
+  get shouldAlignCenter() {
+    return this.args.center;
+  }
+
+  get shouldUnderlineText() {
+    return this.args.underline;
+  }
+
+  <template>
+    <div
+      class={{concat
+        'entity-thumbnail-display'
+        (if this.shouldAlignCenter ' center')
+      }}
+      ...attributes
+    >
+      {{#if (has-block 'thumbnail')}}
+        <div class='entity-thumbnail'>
+          {{yield to='thumbnail'}}
+        </div>
+      {{/if}}
+
+      <div class='entity-info'>
+        {{! Title and tag }}
+        <div class='entity-title-tag-container'>
+          {{! this guard clause is already priotize yield to 'title' instead of using args.title if both are provided}}
+          {{#if (has-block 'title')}}
+            {{yield to='title'}}
+          {{else if @title}}
+            <span
+              class={{concat
+                'entity-title'
+                (if this.shouldUnderlineText ' underline')
+              }}
+            >
+              {{@title}}
+            </span>
+          {{/if}}
+
+          {{#if (has-block 'tag')}}
+            {{yield to='tag'}}
+          {{/if}}
+        </div>
+
+        {{! Extra Content }}
+        {{#if (has-block 'content')}}
+          <div class='entity-content'>
+            {{yield to='content'}}
+          </div>
+        {{/if}}
+      </div>
+
+    </div>
+    <style scoped>
+      .entity-thumbnail-display {
+        display: var(--entity-display-display, flex);
+        align-items: var(--entity-display-align-items, flex-start);
+        gap: var(--entity-display-gap, var(--boxel-sp-xxxs));
+      }
+      .entity-thumbnail-display.center {
+        align-items: center;
+      }
+      .entity-thumbnail {
+        display: var(--entity-display-thumbnail-display, inline-flex);
+        align-items: var(--entity-display-thumbnail-align-items, center);
+        justify-content: var(
+          --entity-display-thumbnail-justify-content,
+          center
+        );
+        flex-shrink: 0;
+        width: var(--entity-display-thumbnail-size, var(--boxel-icon-sm));
+        height: var(--entity-display-thumbnail-size, var(--boxel-icon-sm));
+        overflow: hidden;
+      }
+      .entity-info {
+        display: var(--entity-display-info-display, flex);
+        flex-direction: var(--entity-display-info-flex-direction, column);
+        gap: var(--entity-display-info-gap, var(--boxel-sp-xxxs));
+      }
+      .entity-title-tag-container {
+        display: var(--entity-display-title-tag-container-display, flex);
+        flex-wrap: var(--entity-display-title-tag-container-flex-wrap, wrap);
+        align-items: var(
+          --entity-display-title-tag-container-align-items,
+          center
+        );
+        gap: var(
+          --entity-display-title-tag-container-gap,
+          var(--boxel-sp-xxxs)
+        );
+      }
+      .entity-title {
+        color: var(--entity-display-title-color, var(--boxel-dark));
+        font-size: var(
+          --entity-display-title-font-size,
+          var(--boxel-font-size-sm)
+        );
+        font-weight: var(--entity-display-title-font-weight, 600);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--entity-display-title-line-clamp, 1);
+        margin: var(--entity-display-title-margin, 0);
+        word-break: var(--entity-display-title-word-break, break-word);
+      }
+      .entity-title.underline {
+        text-decoration: var(--entity-display-title-underline, underline);
+      }
+      .entity-content {
+        color: var(--entity-display-content-color, var(--boxel-400));
+        font-size: var(
+          --entity-display-content-font-size,
+          var(--boxel-font-size-xs)
+        );
+        font-weight: var(--entity-display-content-font-weight, 400);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--entity-display-content-line-clamp, 1);
+        margin: var(--entity-display-content-margin, 0);
+        word-break: var(--entity-display-content-word-break, break-word);
+      }
+    </style>
+  </template>
+}