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

package/bundled-types/boxel-ui/components/color-picker/index.gts

@@ -0,0 +1,125 @@
+import IconX from '@cardstack/boxel-icons/x';
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+
+import cn from '../../helpers/cn.ts';
+import IconButton from '../icon-button/index.gts';
+import BoxelInput from '../input/index.gts';
+import Swatch from '../swatch/index.gts';
+
+interface Signature {
+  Args: {
+    color: string | null;
+    disabled?: boolean;
+    onChange: (color: string | null) => void;
+    placeholder?: string;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class ColorPicker extends Component<Signature> {
+  <template>
+    <div class='color-picker' ...attributes>
+      <label class={{cn 'color-input-container' disabled=@disabled}}>
+        <span class='boxel-sr-only'>Color Picker</span>
+        <Swatch
+          class='color-preview'
+          @color={{@color}}
+          @hideLabel={{true}}
+          @style='round'
+        />
+        <BoxelInput
+          type='color'
+          @value={{@color}}
+          @onInput={{@onChange}}
+          @disabled={{@disabled}}
+          data-test-color-input
+        />
+      </label>
+
+      <BoxelInput
+        class='color-text-input'
+        @value={{@color}}
+        @onInput={{@onChange}}
+        @disabled={{@disabled}}
+        @placeholder={{@placeholder}}
+        data-test-color-text-input
+      />
+
+      {{#if @color}}
+        {{#unless @disabled}}
+          <IconButton
+            class='remove'
+            @icon={{IconX}}
+            @width='16px'
+            @height='16px'
+            {{on 'click' this.remove}}
+            aria-label='Unset color'
+            data-test-remove-color
+          />
+        {{/unless}}
+      {{/if}}
+    </div>
+
+    <style scoped>
+      @layer boxelComponentL3 {
+        .color-picker {
+          --color-picker-width: 2.5rem;
+          --color-picker-height: 2.5rem;
+          position: relative;
+        }
+        .color-text-input {
+          padding-inline: var(--color-picker-width);
+          transition: none;
+        }
+        .color-input-container {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--color-picker-width);
+          height: 100%;
+          z-index: 1;
+        }
+        .color-input-container > :deep(.input-container) {
+          visibility: collapse;
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+        }
+        .color-input-container:not(.disabled):hover {
+          cursor: pointer;
+        }
+        .color-input-container:not(.disabled):hover :deep(.preview) {
+          box-shadow: var(--shadow-xs, var(--boxel-box-shadow));
+        }
+        .remove {
+          position: absolute;
+          top: 0;
+          right: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--color-picker-width);
+          height: 100%;
+          z-index: 1;
+          opacity: 0.5;
+        }
+        .remove:focus,
+        .remove:hover {
+          opacity: 1;
+          outline: 0;
+        }
+      }
+    </style>
+  </template>
+
+  private remove = (ev: Event) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.args.onChange?.(null);
+  };
+}

package/bundled-types/boxel-ui/components/color-picker/usage.gts

@@ -0,0 +1,56 @@
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import ColorPicker from './index.gts';
+
+export default class ColorPickerUsage extends Component {
+  @tracked color: string | null = 'oklch(59.69% 0.56 49.77 / .5)';
+  @tracked disabled = false;
+
+  private onChange = (newColor: string | null) => {
+    this.color = newColor;
+  };
+
+  <template>
+    <FreestyleUsage
+      @name='ColorPicker'
+      @description='Color input field that allows users to select a color from the color spectrum or type in a color code.'
+    >
+      <:example>
+        <label>
+          <span class='boxel-sr-only'>Color</span>
+          <ColorPicker
+            @color={{this.color}}
+            @onChange={{this.onChange}}
+            @disabled={{this.disabled}}
+          />
+        </label>
+      </:example>
+
+      <:api as |Args|>
+        <Args.String
+          @name='color'
+          @optional={{false}}
+          @description='Color value'
+          @value={{this.color}}
+          @onInput={{fn (mut this.color)}}
+        />
+        <Args.Action
+          @name='onChange'
+          @description='A callback function that is called when the color is changed.'
+          @value={{this.onChange}}
+          @onInput={{fn (mut this.onChange)}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @description='Whether the color picker is disabled.'
+          @value={{this.disabled}}
+          @onInput={{fn (mut this.disabled)}}
+          @defaultValue={{false}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

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

@@ -0,0 +1,67 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { cn, element, eq } from '../../helpers.ts';
+
+export type BoxelContainerDisplayOption =
+  | 'default'
+  | 'grid'
+  | 'inline-grid'
+  | 'flex'
+  | 'inline-flex';
+
+interface Signature {
+  Args: {
+    display?: BoxelContainerDisplayOption;
+    tag?: keyof HTMLElementTagNameMap;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+const Container: TemplateOnlyComponent<Signature> = <template>
+  {{#let (element @tag) as |TagName|}}
+    <TagName
+      class={{cn
+        'boxel-container'
+        boxel-grid=(eq @display 'grid')
+        boxel-inline-grid=(eq @display 'inline-grid')
+        boxel-flex=(eq @display 'flex')
+        boxel-inline-flex=(eq @display 'inline-flex')
+      }}
+      ...attributes
+    >
+      {{yield}}
+    </TagName>
+  {{/let}}
+  <style scoped>
+    @layer {
+      .boxel-container {
+        padding: var(--boxel-container-padding, var(--boxel-sp));
+      }
+      .boxel-grid {
+        display: grid;
+        gap: var(--boxel-container-gap, var(--boxel-sp));
+      }
+      .boxel-inline-grid {
+        display: inline-grid;
+        gap: var(--boxel-container-gap, var(--boxel-sp));
+      }
+      .boxel-flex {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-container-gap, var(--boxel-sp));
+        align-items: center;
+      }
+      .boxel-inline-flex {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-container-gap, var(--boxel-sp));
+        align-items: center;
+      }
+    }
+  </style>
+</template>;
+
+export default Container;

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

@@ -0,0 +1,59 @@
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import BoxelContainer, { type BoxelContainerDisplayOption } from './index.gts';
+
+interface Signature {
+  Element: HTMLElement;
+}
+
+export default class BoxelContainerUsage extends Component<Signature> {
+  private displayOptions: BoxelContainerDisplayOption[] = [
+    'default',
+    'grid',
+    'inline-grid',
+    'flex',
+    'inline-flex',
+  ];
+  @tracked private tag?: keyof HTMLElementTagNameMap;
+  @tracked private display?: BoxelContainerDisplayOption;
+
+  <template>
+    <FreestyleUsage @name='BoxelContainer'>
+      <:description>
+        A container that provides standard padding, with options to make it grid
+        or flexbox.
+      </:description>
+      <:example>
+        <BoxelContainer
+          @display={{this.display}}
+          @tag={{if this.tag this.tag 'div'}}
+        >
+          <h3>h3</h3>
+          <p>Hello</p>
+        </BoxelContainer>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='tag'
+          @description='HTML element tag name (ie. button, section, ul, etc)'
+          @value={{this.tag}}
+          @defaultValue='div'
+          @optional={{true}}
+          @onInput={{fn (mut this.tag)}}
+        />
+        <Args.String
+          @name='display'
+          @optional={{true}}
+          @description='Css display property for grid, flex, inline-grid, and inline-flex'
+          @defaultValue='HTML element default'
+          @options={{this.displayOptions}}
+          @onInput={{fn (mut this.display)}}
+          @value='default'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

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

@@ -0,0 +1,184 @@
+import DotsVertical from '@cardstack/boxel-icons/dots-vertical';
+import Plus from '@cardstack/boxel-icons/plus';
+import Trash from '@cardstack/boxel-icons/trash-2';
+import XIcon from '@cardstack/boxel-icons/x';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { concat } from '@ember/helper';
+
+import cn from '../../helpers/cn.ts';
+import { IconPencil, ThreeDotsHorizontal } from '../../icons.gts';
+import type { Icon } from '../../icons/types.ts';
+import type { BoxelButtonSize } from '../button/index.gts';
+import IconButton from '../icon-button/index.gts';
+
+export type ContextButtonVariant =
+  | 'highlight'
+  | 'ghost'
+  | 'destructive'
+  | 'highlight-icon'
+  | 'destructive-icon'
+  | 'primary-dark'; // 'highlight' is default
+
+export const contextButtonVariants: ContextButtonVariant[] = [
+  'highlight',
+  'highlight-icon',
+  'ghost',
+  'destructive',
+  'destructive-icon',
+  'primary-dark',
+];
+
+export type ContextButtonIcon =
+  | 'context-menu'
+  | 'context-menu-vertical'
+  | 'add'
+  | 'edit'
+  | 'delete'
+  | 'close'
+  | Icon; // 'context-menu' is default
+
+export const contextButtonIconOptions: ContextButtonIcon[] = [
+  'context-menu',
+  'context-menu-vertical',
+  'add',
+  'edit',
+  'delete',
+  'close',
+];
+
+interface Signature {
+  Args: {
+    disabled?: boolean;
+    height?: string; // iconHeight
+    icon?: ContextButtonIcon; // defaults to horizontal 'content-menu'
+    isActive?: boolean;
+    isToggle?: boolean;
+    label: string; // aria-label for icon button (required)
+    loading?: boolean;
+    size?: BoxelButtonSize;
+    variant?: ContextButtonVariant;
+    width?: string; // iconWidth
+  };
+  Element: HTMLButtonElement | HTMLAnchorElement;
+}
+
+const getIcon = (icon: ContextButtonIcon = 'context-menu') => {
+  if (icon === 'context-menu') {
+    return ThreeDotsHorizontal;
+  }
+  if (icon === 'context-menu-vertical') {
+    return DotsVertical;
+  }
+  if (icon === 'close') {
+    return XIcon;
+  }
+  if (icon === 'add') {
+    return Plus;
+  }
+  if (icon === 'edit') {
+    return IconPencil;
+  }
+  if (icon === 'delete') {
+    return Trash;
+  }
+  return icon;
+};
+
+function getVariant(variant: ContextButtonVariant = 'highlight') {
+  if (contextButtonVariants.includes(variant)) {
+    return variant;
+  }
+  return 'highlight';
+}
+
+const DropdownButton: TemplateOnlyComponent<Signature> = <template>
+  {{#let (getVariant @variant) (getIcon @icon) as |variant icon|}}
+    <IconButton
+      class={{cn
+        'boxel-context-button'
+        (concat 'boxel-context-button--' variant)
+        boxel-context-button--active=@isActive
+      }}
+      @icon={{icon}}
+      @size={{if @size @size 'base'}}
+      @loading={{@loading}}
+      @disabled={{@disabled}}
+      @width={{@width}}
+      @height={{@height}}
+      aria-label={{@label}}
+      aria-pressed={{if @isToggle (if @isActive 'true' 'false')}}
+      data-active={{if @isActive 'true' 'false'}}
+      ...attributes
+    />
+  {{/let}}
+  <style scoped>
+    @layer boxelComponentL2 {
+      .boxel-context-button {
+        color: inherit;
+        background-color: transparent;
+        transition: none;
+      }
+      .boxel-context-button--highlight-icon {
+        color: var(--primary, var(--boxel-highlight));
+      }
+      .boxel-context-button--highlight:hover,
+      .boxel-context-button--highlight.boxel-context-button--active,
+      .boxel-context-button--highlight-icon:hover {
+        color: var(--primary-foreground, var(--boxel-dark));
+        background-color: var(--primary, var(--boxel-highlight));
+      }
+      .boxel-context-button--highlight-icon.boxel-context-button--active {
+        color: var(--primary-foreground, var(--boxel-dark));
+        background-color: var(--primary, var(--boxel-highlight));
+      }
+      .boxel-context-button--highlight[aria-expanded='true'],
+      .boxel-context-button--highlight-icon[aria-expanded='true'] {
+        color: var(--primary-foreground, var(--boxel-dark));
+        background-color: color-mix(
+          in oklab,
+          var(--primary, var(--boxel-highlight)),
+          var(--primary-foreground, var(--boxel-dark)) 15%
+        );
+      }
+
+      .boxel-context-button--ghost:hover {
+        background-color: color-mix(in oklab, currentColor 10%, transparent);
+      }
+      .boxel-context-button--ghost.boxel-context-button--active {
+        background-color: color-mix(in oklab, currentColor 10%, transparent);
+      }
+      .boxel-context-button--ghost[aria-expanded='true'] {
+        background-color: color-mix(in oklab, currentColor 25%, transparent);
+      }
+
+      .boxel-context-button--destructive-icon {
+        color: var(--destructive, var(--boxel-danger));
+      }
+      .boxel-context-button--destructive:hover,
+      .boxel-context-button--destructive.boxel-context-button--active,
+      .boxel-context-button--destructive-icon:hover {
+        color: var(--destructive-foreground, var(--boxel-light-100));
+        background-color: var(--destructive, var(--boxel-danger));
+      }
+      .boxel-context-button--destructive-icon.boxel-context-button--active {
+        color: var(--destructive-foreground, var(--boxel-light-100));
+        background-color: var(--destructive, var(--boxel-danger));
+      }
+
+      .boxel-context-button--primary-dark {
+        color: var(--primary, var(--boxel-highlight));
+        background-color: var(--primary-foreground, var(--boxel-700));
+        border: 1px solid var(--boxel-light-hover-35);
+      }
+
+      .boxel-context-button:disabled,
+      .boxel-context-button[disabled] {
+        color: var(--boxel-400);
+        pointer-events: none;
+        cursor: initial;
+      }
+    }
+  </style>
+</template>;
+
+export default DropdownButton;

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

@@ -0,0 +1,125 @@
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import { type BoxelButtonSize, buttonSizeOptions } from '../button/index.gts';
+import ContextButton, {
+  type ContextButtonIcon,
+  type ContextButtonVariant,
+  contextButtonIconOptions,
+  contextButtonVariants,
+} from './index.gts';
+
+export default class ContextButtonUsage extends Component {
+  private iconOptions = contextButtonIconOptions;
+  private variants = contextButtonVariants;
+  private sizeVariants = buttonSizeOptions;
+  @tracked private icon?: ContextButtonIcon;
+  @tracked private variant?: ContextButtonVariant;
+  @tracked private size?: BoxelButtonSize;
+  @tracked private width?: string;
+  @tracked private height?: string;
+  @tracked private isLoading = false;
+  @tracked private isDisabled = false;
+  @tracked private isActive = false;
+  @tracked private isToggle = false;
+  @tracked private label = 'context-button usage';
+
+  <template>
+    <FreestyleUsage @name='ContextButton'>
+      <:example>
+        <ContextButton
+          @label={{this.label}}
+          @icon={{this.icon}}
+          @variant={{this.variant}}
+          @size={{this.size}}
+          @loading={{this.isLoading}}
+          @disabled={{this.isDisabled}}
+          @isActive={{this.isActive}}
+          @isToggle={{this.isToggle}}
+          @width={{this.width}}
+          @height={{this.height}}
+        />
+      </:example>
+
+      <:api as |Args|>
+        <Args.String
+          @name='label'
+          @description='aria-label attribute value'
+          @required={{true}}
+          @value={{this.label}}
+          @onInput={{fn (mut this.label)}}
+        />
+        <Args.String
+          @name='icon'
+          @description='Options from dropdown, or IconComponent'
+          @value={{this.icon}}
+          @options={{this.iconOptions}}
+          @onInput={{fn (mut this.icon)}}
+          @defaultValue='context-menu'
+        />
+        <Args.String
+          @name='variant'
+          @optional={{true}}
+          @value={{this.variant}}
+          @options={{this.variants}}
+          @onInput={{fn (mut this.variant)}}
+          @defaultValue='default'
+        />
+        <Args.String
+          @name='size'
+          @optional={{true}}
+          @value={{this.size}}
+          @options={{this.sizeVariants}}
+          @onInput={{fn (mut this.size)}}
+          @defaultValue='base (30px)'
+        />
+        <Args.Bool
+          @name='loading'
+          @optional={{true}}
+          @value={{this.isLoading}}
+          @onInput={{fn (mut this.isLoading)}}
+          @defaultValue='false'
+        />
+        <Args.Bool
+          @name='disabled'
+          @optional={{true}}
+          @value={{this.isDisabled}}
+          @onInput={{fn (mut this.isDisabled)}}
+          @defaultValue='false'
+        />
+        <Args.Bool
+          @name='isActive'
+          @optional={{true}}
+          @value={{this.isActive}}
+          @onInput={{fn (mut this.isActive)}}
+          @defaultValue='false'
+        />
+        <Args.Bool
+          @name='isToggle'
+          @optional={{true}}
+          @value={{this.isToggle}}
+          @onInput={{fn (mut this.isToggle)}}
+          @defaultValue='false'
+        />
+        <Args.String
+          @name='width'
+          @optional={{true}}
+          @description='icon width'
+          @defaultValue='16px or 20px'
+          @value={{this.width}}
+          @onInput={{fn (mut this.width)}}
+        />
+        <Args.String
+          @name='height'
+          @optional={{true}}
+          @description='icon height'
+          @defaultValue='16px or 20px'
+          @value={{this.height}}
+          @onInput={{fn (mut this.height)}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

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

@@ -0,0 +1,79 @@
+import Copy from '@cardstack/boxel-icons/copy';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import type { MiddlewareState } from '@floating-ui/dom';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import {
+  type BoxelButtonKind,
+  type BoxelButtonSize,
+} from '../button/index.gts';
+import IconButton from '../icon-button/index.gts';
+import Tooltip from '../tooltip/index.gts';
+
+interface Signature {
+  Args: {
+    ariaLabel?: string;
+    height?: string;
+    offset?: number;
+    placement?: MiddlewareState['placement'];
+    size?: BoxelButtonSize;
+    textToCopy: string;
+    tooltipText?: string;
+    variant?: BoxelButtonKind;
+    width?: string;
+  };
+  Element: HTMLElement;
+}
+
+export default class CopyButton extends Component<Signature> {
+  @tracked private recentlyCopied = false;
+
+  @action private async copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(this.args.textToCopy);
+      this.recentlyCopied = true;
+
+      setTimeout(() => (this.recentlyCopied = false), 2000);
+    } catch (error: unknown) {
+      console.error(error instanceof Error ? error.message : error);
+    }
+  }
+
+  <template>
+    <Tooltip
+      @placement={{@placement}}
+      @offset={{@offset}}
+      class='boxel-copy-button-tooltip'
+      ...attributes
+    >
+      <:trigger>
+        <IconButton
+          @icon={{Copy}}
+          @variant={{@variant}}
+          @size={{if @size @size 'base'}}
+          @width={{if @width @width '18'}}
+          @height={{if @height @height '18'}}
+          {{on 'click' this.copyToClipboard}}
+          class='boxel-copy-button'
+          aria-label={{if
+            this.recentlyCopied
+            'Copied'
+            (if @ariaLabel @ariaLabel 'Copy to clipboard')
+          }}
+          data-test-boxel-copy-button
+        />
+      </:trigger>
+      <:content>
+        <span>
+          {{if
+            this.recentlyCopied
+            'Copied!'
+            (if @tooltipText @tooltipText 'Copy to clipboard')
+          }}
+        </span>
+      </:content>
+    </Tooltip>
+  </template>
+}