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

package/bundled-types/boxel-ui/components/accordion/item/index.gts

@@ -0,0 +1,156 @@
+import ChevronRight from '@cardstack/boxel-icons/chevron-right';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { on } from '@ember/modifier';
+
+import cn from '../../../helpers/cn.ts';
+import optional from '../../../helpers/optional.ts';
+
+export interface AccordionItemSignature {
+  Args: {
+    className?: string;
+    contentClass?: string;
+    disabled?: boolean;
+    id: string;
+    isOpen: boolean;
+    onClick?: (event: Event) => void;
+  };
+  Blocks: {
+    content: [];
+    title: [];
+  };
+  Element: HTMLDivElement;
+}
+
+const AccordionItem: TemplateOnlyComponent<AccordionItemSignature> = <template>
+  <div
+    class={{cn 'boxel-accordion-item' @className open=@isOpen}}
+    ...attributes
+  >
+    <h3 class='boxel-accordion-item-title'>
+      <button
+        class='boxel-accordion-item-trigger'
+        {{on 'click' (optional @onClick)}}
+        id={{@id}}
+        aria-controls='section-{{@id}}'
+        aria-expanded={{@isOpen}}
+        disabled={{@disabled}}
+      >
+        <ChevronRight
+          class='boxel-accordion-item-icon'
+          width='14'
+          height='14'
+        />
+        {{yield to='title'}}
+      </button>
+    </h3>
+    <div
+      class={{cn 'boxel-accordion-item-content' @contentClass}}
+      data-state={{if @isOpen 'open' 'closed'}}
+      id='section-{{@id}}'
+      role='region'
+      aria-labelledby={{@id}}
+      aria-hidden={{if @isOpen 'false' 'true'}}
+    >
+      <div class='boxel-accordion-item-content-inner'>
+        {{yield to='content'}}
+      </div>
+    </div>
+  </div>
+  <style scoped>
+    @layer boxelComponentL1 {
+      .boxel-accordion-item {
+        min-height: var(
+          --boxel-accordion-item-min-height,
+          var(--boxel-form-control-height)
+        );
+        padding-inline: var(--boxel-accordion-item-padding-inline, 0);
+        padding-block: var(--boxel-accordion-item-padding-block, 2px);
+      }
+      .boxel-accordion-item:not(:first-child) {
+        border-top: var(
+          --boxel-accordion-item-border,
+          var(
+            --accordion-border,
+            1px solid var(--border, var(--boxel-border-color))
+          )
+        );
+      }
+
+      .boxel-accordion-item-title {
+        margin: 0;
+        font-size: var(--boxel-accordion-title-font-size, inherit);
+        font-weight: var(--boxel-accordion-title-font-weight, 700);
+        line-height: inherit;
+        letter-spacing: inherit;
+      }
+
+      .boxel-accordion-item-trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+        width: 100%;
+        max-width: 100%;
+        padding-block: var(
+          --boxel-accordion-trigger-padding-block,
+          var(--boxel-sp-xs)
+        );
+        padding-inline: var(--boxel-accordion-trigger-padding-inline, 0);
+        color: inherit;
+        background-color: transparent;
+        border: none;
+        text-align: start;
+      }
+      .boxel-accordion-item-trigger:focus-visible {
+        outline-color: var(--ring, var(--boxel-highlight));
+      }
+      .boxel-accordion-item-trigger:hover:not(:disabled) {
+        cursor: pointer;
+      }
+      .boxel-accordion-item-trigger:disabled {
+        opacity: 0.5;
+      }
+
+      .boxel-accordion-item-icon {
+        flex-shrink: 0;
+      }
+      [aria-expanded] .boxel-accordion-item-icon {
+        transform: rotate(90deg);
+      }
+
+      .boxel-accordion-item-content {
+        display: grid;
+        grid-template-rows: 0fr;
+      }
+      .boxel-accordion-item-content[data-state='open'] {
+        grid-template-rows: 1fr;
+      }
+      .boxel-accordion-item-content-inner {
+        overflow: hidden;
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        .boxel-accordion-item {
+          --_bai-transition: var(--boxel-accordion-transition, 200ms ease-out);
+        }
+
+        .boxel-accordion-item-icon {
+          transition: transform var(--_bai-transition);
+        }
+
+        .boxel-accordion-item-content {
+          transition: grid-template-rows var(--_bai-transition);
+        }
+        .boxel-accordion-item-content-inner {
+          transition: opacity var(--_bai-transition);
+          opacity: 0;
+        }
+        .boxel-accordion-item-content[data-state='open']
+          .boxel-accordion-item-content-inner {
+          opacity: 1;
+        }
+      }
+    }
+  </style>
+</template>;
+
+export default AccordionItem;

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

@@ -0,0 +1,157 @@
+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 { eq } from '../../helpers/truth-helpers.ts';
+import Accordion from './index.gts';
+
+export default class AccordionUsage extends Component {
+  @tracked displayContainer?: boolean;
+
+  <template>
+    <FreestyleUsage @name='Accordion'>
+      <:example>
+        <Accordion @displayContainer={{this.displayContainer}} as |A|>
+          <A.Item
+            @id='schema'
+            @onClick={{fn this.selectItem 'schema'}}
+            @isOpen={{eq this.selectedItem 'schema'}}
+          >
+            <:title>Schema Editor</:title>
+            <:content><p>Lorem ipsum dolor sit amet, consectetur adipiscing
+                elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+                aliqua.</p></:content>
+          </A.Item>
+          <A.Item
+            @id='playground'
+            @onClick={{fn this.selectItem 'playground'}}
+            @isOpen={{eq this.selectedItem 'playground'}}
+          >
+            <:title>Playground</:title>
+            <:content>
+              <p>Adipiscing enim eu turpis egestas pretium aenean. At elementum
+                eu facilisis sed odio morbi quis commodo odio. Risus ultricies
+                tristique nulla aliquet enim tortor at auctor urna. Amet
+                consectetur adipiscing elit ut. Pellentesque adipiscing commodo
+                elit at imperdiet dui accumsan. Sed blandit libero volutpat sed.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio
+                eu feugiat pretium nibh ipsum consequat nisl vel pretium. Massa
+                tempor nec feugiat nisl pretium fusce.
+              </p>
+            </:content>
+          </A.Item>
+          <A.Item
+            @id='item'
+            @onClick={{fn this.selectItem 'item'}}
+            @isOpen={{eq this.selectedItem 'item'}}
+            @disabled={{true}}
+          >
+            <:title>Disabled item</:title>
+            <:content>Content</:content>
+          </A.Item>
+          <A.Item
+            @id='other'
+            @onClick={{fn this.selectItem 'other'}}
+            @isOpen={{eq this.selectedItem 'other'}}
+          >
+            <:title>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+              do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Odio eu feugiat pretium nibh ipsum consequat</:title>
+            <:content>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio
+                eu feugiat pretium nibh ipsum consequat nisl vel pretium. Massa
+                tempor nec feugiat nisl pretium fusce. Vestibulum mattis
+                ullamcorper velit sed ullamcorper morbi tincidunt ornare massa.
+                Neque vitae tempus quam pellentesque. Magna etiam tempor orci
+                eu. Dui id ornare arcu odio ut sem nulla pharetra. Egestas dui
+                id ornare arcu odio. Ante metus dictum at tempor. Diam maecenas
+                ultricies mi eget mauris. Tristique nulla aliquet enim tortor at
+                auctor urna. Sodales ut eu sem integer vitae justo eget magna.
+                Adipiscing enim eu turpis egestas pretium aenean. At elementum
+                eu facilisis sed odio morbi quis commodo odio. Risus ultricies
+                tristique nulla aliquet enim tortor at auctor urna. Amet
+                consectetur adipiscing elit ut. Pellentesque adipiscing commodo
+                elit at imperdiet dui accumsan. Sed blandit libero volutpat sed.
+              </p>
+            </:content>
+          </A.Item>
+        </Accordion>
+      </:example>
+      <:api as |Args|>
+        <Args.Bool
+          @name='displayContainer'
+          @description='displays container with rounded borders'
+          @value={{this.displayContainer}}
+          @onInput={{fn (mut this.displayContainer)}}
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='--boxel-accordion-border'
+          @type='border'
+          @description='border property'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-item-border'
+          @type='border-top'
+          @description='separator between items'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-trigger-min-height'
+          @type='min-height'
+          @description='min-height for accordion trigger'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-content-min-height'
+          @type='min-height'
+          @description='min-height for accordion item content'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-item-padding-block'
+          @type='padding-block'
+          @description='vertical padding for accordion item'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-item-padding-inline'
+          @type='padding-inline'
+          @description='horizontal padding for accordion item'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-trigger-padding-block'
+          @type='padding-block'
+          @description='vertical padding for trigger'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-trigger-padding-inline'
+          @type='padding-inline'
+          @description='horizontal padding for trigger'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-title-font-weight'
+          @type='font-weight'
+          @description='title font-weight'
+        />
+        <Css.Basic
+          @name='--boxel-accordion-transition'
+          @type='transition-time transition-style'
+          @description='title font-weight'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+  </template>
+
+  @tracked selectedItem: string | null = 'schema';
+
+  @action selectItem(item: string) {
+    if (this.selectedItem === item) {
+      this.selectedItem = null;
+      return;
+    }
+    this.selectedItem = item;
+  }
+}

package/bundled-types/boxel-ui/components/add-button/index.gts

@@ -0,0 +1,46 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import PlusIcon from '../../icons/icon-plus.gts';
+import IconButton from '../icon-button/index.gts';
+
+interface Signature {
+  Args: {
+    iconHeight?: string;
+    iconWidth?: string;
+    loading?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+const AddButton: TemplateOnlyComponent<Signature> = <template>
+  <IconButton
+    @loading={{@loading}}
+    @icon={{PlusIcon}}
+    @width={{if @iconWidth @iconWidth '20px'}}
+    @height={{if @iconHeight @iconHeight '20px'}}
+    class='boxel-add-button'
+    aria-label={{if @loading 'loading' 'add'}}
+    data-test-create-new-card-button
+    ...attributes
+  />
+
+  <style scoped>
+    .boxel-add-button {
+      --boxel-icon-button-background: var(--background, var(--boxel-100));
+      --boxel-icon-button-color: var(--foreground, var(--boxel-dark));
+      --icon-color: var(--boxel-icon-button-color);
+      border-radius: 50%;
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow, 0 4px 6px 0px rgb(0 0 0 / 35%));
+    }
+    .boxel-add-button:not(:disabled):hover {
+      --boxel-icon-button-background: var(--accent, var(--boxel-200));
+      --boxel-icon-button-color: var(--accent-foreground, var(--boxel-dark));
+    }
+  </style>
+</template>;
+
+export default AddButton;

package/bundled-types/boxel-ui/components/add-button/usage.gts

@@ -0,0 +1,54 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import BoxelAddButton from './index.gts';
+
+export default class AddButtonUsage extends Component {
+  @tracked loading = false;
+  @tracked iconWidth?: string;
+  @tracked iconHeight?: string;
+
+  @action log(message: string): void {
+    console.log(message);
+  }
+
+  <template>
+    <FreestyleUsage @name='AddButton'>
+      <:example>
+        <BoxelAddButton
+          {{on 'click' (fn this.log 'button clicked')}}
+          @iconWidth={{this.iconWidth}}
+          @iconHeight={{this.iconHeight}}
+          @loading={{this.loading}}
+        />
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='iconWidth'
+          @defaultValue='40px'
+          @optional={{true}}
+          @onInput={{fn (mut this.iconWidth)}}
+          @value={{this.iconWidth}}
+        />
+        <Args.String
+          @name='iconHeight'
+          @defaultValue='40px'
+          @optional={{true}}
+          @onInput={{fn (mut this.iconHeight)}}
+          @value={{this.iconHeight}}
+        />
+        <Args.Bool
+          @name='loading'
+          @defaultValue={{false}}
+          @optional={{true}}
+          @onInput={{fn (mut this.loading)}}
+          @value={{this.loading}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

package/bundled-types/boxel-ui/components/alert/index.gts

@@ -0,0 +1,151 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import type { ComponentLike } from '@glint/template';
+
+import { cn, eq } from '../../helpers.ts';
+import { FailureBordered, Warning } from '../../icons.gts';
+import Button, { type BoxelButtonKind } from '../button/index.gts';
+
+interface MessagesSignature {
+  Args: {
+    messages: string[];
+    type?: 'error' | 'warning';
+  };
+  Element: HTMLDivElement;
+}
+
+interface ActionSignature {
+  Args: {
+    action?: () => void;
+    actionName?: string;
+    kind?: BoxelButtonKind;
+  };
+  Element: HTMLDivElement;
+}
+
+interface Signature {
+  Args: {
+    type?: 'error' | 'warning';
+  };
+  Blocks: {
+    default: [
+      {
+        Action: ComponentLike<ActionSignature>;
+        Messages: ComponentLike<MessagesSignature>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+const Messages: TemplateOnlyComponent<MessagesSignature> = <template>
+  {{#each @messages as |message i|}}
+    <div class='alert'>
+      {{#if (eq @type 'error')}}
+        <FailureBordered class='alert-icon failure-icon' />
+      {{else if (eq @type 'warning')}}
+        <Warning class='alert-icon' />
+      {{/if}}
+      <p
+        class='message'
+        data-test-alert-message='{{i}}'
+        data-test-card-error={{eq @type 'error'}}
+      >
+        {{message}}
+      </p>
+    </div>
+  {{/each}}
+  <style scoped>
+    .alert {
+      display: flex;
+      gap: var(--boxel-sp-xs);
+    }
+    .alert + .alert {
+      margin-top: var(--boxel-sp-lg);
+    }
+    .alert-icon {
+      min-width: 20px;
+      height: 20px;
+      --icon-background-color: var(--boxel-error-400);
+    }
+    .failure-icon {
+      --icon-background-color: var(--destructive, var(--boxel-error-400));
+      --icon-color: var(--destructive-foreground, var(--boxel-light));
+    }
+    .message {
+      align-self: center;
+      overflow: hidden;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      margin: 0;
+    }
+  </style>
+</template>;
+
+const Action: TemplateOnlyComponent<ActionSignature> = <template>
+  {{#if @action}}
+    <Button
+      {{on 'click' @action}}
+      class='action-button'
+      @size='extra-small'
+      @kind={{@kind}}
+      data-test-alert-action-button={{@actionName}}
+    >
+      {{@actionName}}
+    </Button>
+  {{/if}}
+  <style scoped>
+    .action-button {
+      --boxel-button-min-width: max-content;
+      width: fit-content;
+      margin-left: auto;
+    }
+  </style>
+</template>;
+
+const Alert: TemplateOnlyComponent<Signature> = <template>
+  <div
+    class={{cn
+      'alert-container'
+      error-container=(eq @type 'error')
+      warning-container=(eq @type 'warning')
+    }}
+    data-test-boxel-alert={{@type}}
+    ...attributes
+  >
+    {{yield
+      (hash
+        Messages=(component Messages type=@type)
+        Action=(component
+          Action kind=(if (eq @type 'warning') 'primary-dark' 'primary')
+        )
+      )
+    }}
+  </div>
+
+  <style scoped>
+    .alert-container {
+      display: flex;
+      flex-direction: column;
+      padding: var(--boxel-sp-sm);
+      font: 500 var(--boxel-font-xs);
+      letter-spacing: var(--boxel-lsp-sm);
+      border-radius: var(--boxel-border-radius-xxl);
+    }
+    .error-container {
+      background-color: var(--destructive-foreground, var(--boxel-650));
+      color: var(--destructive, var(--boxel-light));
+    }
+    .warning-container {
+      background-color: var(--accent, var(--boxel-warning-200));
+      color: var(--accent-foreground, var(--boxel-dark));
+    }
+
+    .alert-container > :deep(* + *) {
+      margin-top: var(--boxel-sp-sm);
+    }
+  </style>
+</template>;
+
+export default Alert;

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

@@ -0,0 +1,66 @@
+import { array, fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import { TrackedArray } from 'tracked-built-ins';
+
+import Alert from './index.gts';
+
+interface Signature {
+  Element: HTMLElement;
+}
+
+export default class AlertUsage extends Component<Signature> {
+  @tracked private messageType: 'error' | 'warning' = 'error';
+  private messages = new TrackedArray([
+    'Patch command can’t run because it doesn’t have all the fields in arguments returned by Open AI.',
+    'Error rendering attached cards.',
+  ]);
+  private retryHandler = () => console.log('Retry action triggered');
+
+  <template>
+    <FreestyleUsage @name='Alert'>
+      <:description>
+        A component that displays error or warning messages with an optional
+        action.
+      </:description>
+      <:example>
+        <Alert @type={{this.messageType}} as |Alert|>
+          <Alert.Messages @messages={{this.messages}} />
+          <Alert.Action @actionName='Retry' @action={{this.retryHandler}} />
+        </Alert>
+      </:example>
+
+      <:api as |Args|>
+        <Args.String
+          @name='type'
+          @description='Type of the first message'
+          @value={{this.messageType}}
+          @options={{array '' 'error' 'warning'}}
+          @onInput={{fn (mut this.messageType)}}
+        />
+        <Args.Array
+          @name='messages'
+          @description='Alert messages'
+          @items={{this.messages}}
+        />
+        <Args.Action
+          @name='retryAction'
+          @description='Optional callback function that is triggered when the retry button is clicked'
+          @optional={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <FreestyleUsage @name='Without Retry Button'>
+      <:example>
+        <Alert @type='warning' as |Alert|>
+          <Alert.Messages
+            @messages={{array
+              'You are about to run out of credit. Please upgrade your plan or buy additional credit soon.'
+            }}
+          />
+        </Alert>
+      </:example>
+    </FreestyleUsage>
+  </template>
+}