@cardstack/boxel-cli 0.2.0 → 0.3.0-unstable.58

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

@@ -0,0 +1,25 @@
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import CopyButton from './index.gts';
+
+export default class CopyButtonUsage extends Component {
+  @tracked textToCopy: string = 'Text to copy';
+
+  <template>
+    <FreestyleUsage @name='CopyButton'>
+      <:example>
+        <CopyButton @textToCopy={{this.textToCopy}} />
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='text'
+          @onInput={{fn (mut this.textToCopy)}}
+          @value={{this.textToCopy}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

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

@@ -0,0 +1,211 @@
+import 'ember-power-calendar/styles';
+
+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 PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import { type TPowerCalendarRangeOnSelect } from 'ember-power-calendar/components/power-calendar-range';
+import powerCalendarFormatDate from 'ember-power-calendar/helpers/power-calendar-format-date';
+import {
+  type SelectedPowerCalendarRange,
+  add,
+} from 'ember-power-calendar/utils';
+
+import TriangleLeftIcon from '../../icons/triangle-left.gts';
+import TriangleRightIcon from '../../icons/triangle-right.gts';
+import IconButton from '../icon-button/index.gts';
+import { setupDateLibrary } from './setup.gts';
+
+interface Signature {
+  Args: {
+    disabled?: boolean;
+    end?: Date | null;
+    onSelect: TPowerCalendarRangeOnSelect;
+    selected?: SelectedPowerCalendarRange;
+    start?: Date | null;
+  };
+  Element: HTMLElement;
+}
+
+const dateFormat = 'MMM yyyy';
+const weekdayFormat = 'min';
+
+export default class DateRangePicker extends Component<Signature> {
+  @tracked leftCenter: Date;
+  @tracked rightCenter: Date;
+
+  constructor(owner: any, args: any) {
+    super(owner, args);
+
+    setupDateLibrary();
+
+    // If both start and end are provided, use them
+    if (this.args.start && this.args.end) {
+      const startMonth = this.args.start.getMonth();
+      const endMonth = this.args.end.getMonth();
+      const startYear = this.args.start.getFullYear();
+      const endYear = this.args.end.getFullYear();
+
+      // If dates are in the same month, show that month and the next month
+      if (startMonth === endMonth && startYear === endYear) {
+        this.leftCenter = this.args.start;
+        this.rightCenter = add(this.args.start, 1, 'month');
+      } else {
+        this.leftCenter = this.args.start;
+        this.rightCenter = this.args.end;
+      }
+    }
+    // If only start is provided, set right center to next month
+    else if (this.args.start) {
+      this.leftCenter = this.args.start;
+      this.rightCenter = add(this.args.start, 1, 'month');
+    }
+    // If only end is provided, set left center to previous month
+    else if (this.args.end) {
+      this.rightCenter = this.args.end;
+      this.leftCenter = add(this.args.end, -1, 'month');
+    }
+    // If neither is provided, use current date and next month
+    else {
+      const today = new Date();
+      this.leftCenter = today;
+      this.rightCenter = add(today, 1, 'month');
+    }
+  }
+
+  @action
+  onNavigate(side: 'left' | 'right', direction: 'previous' | 'next') {
+    const months = direction === 'next' ? 1 : -1;
+
+    if (side === 'left') {
+      const newLeftCenter = add(this.leftCenter, months, 'month');
+      this.leftCenter = newLeftCenter;
+
+      // If left month would overlap with right month, push right month forward
+      if (newLeftCenter >= this.rightCenter) {
+        this.rightCenter = add(newLeftCenter, 1, 'month');
+      }
+    } else {
+      const newRightCenter = add(this.rightCenter, months, 'month');
+      this.rightCenter = newRightCenter;
+
+      // If right month would overlap with left month, push left month backward
+      if (newRightCenter <= this.leftCenter) {
+        this.leftCenter = add(newRightCenter, -1, 'month');
+      }
+    }
+  }
+
+  <template>
+    <PowerCalendarRange
+      @selected={{@selected}}
+      @onSelect={{@onSelect}}
+      @locale='en-US'
+      ...attributes
+      as |calendar|
+    >
+      <div class='months-container {{if @disabled "disabled"}}'>
+        <div class='month-calendar'>
+          <calendar.Nav>
+            <div class='nav-container'>
+              <IconButton
+                @icon={{TriangleLeftIcon}}
+                aria-label='Previous month'
+                {{on 'click' (fn this.onNavigate 'left' 'previous')}}
+              />
+              <div class='month-name'>
+                {{powerCalendarFormatDate
+                  this.leftCenter
+                  dateFormat
+                  locale=calendar.locale
+                }}
+              </div>
+              <IconButton
+                @icon={{TriangleRightIcon}}
+                aria-label='Next month'
+                {{on 'click' (fn this.onNavigate 'left' 'next')}}
+              />
+            </div>
+          </calendar.Nav>
+          <calendar.Days
+            @weekdayFormat={{weekdayFormat}}
+            @center={{this.leftCenter}}
+          />
+        </div>
+
+        <div class='month-calendar'>
+          <calendar.Nav>
+            <div class='nav-container'>
+              <IconButton
+                @icon={{TriangleLeftIcon}}
+                aria-label='Previous month'
+                {{on 'click' (fn this.onNavigate 'right' 'previous')}}
+              />
+              <div class='month-name'>
+                {{powerCalendarFormatDate
+                  this.rightCenter
+                  dateFormat
+                  locale=calendar.locale
+                }}
+              </div>
+              <IconButton
+                @icon={{TriangleRightIcon}}
+                aria-label='Next month'
+                {{on 'click' (fn this.onNavigate 'right' 'next')}}
+              />
+            </div>
+          </calendar.Nav>
+          <calendar.Days
+            @weekdayFormat={{weekdayFormat}}
+            @center={{this.rightCenter}}
+          />
+        </div>
+      </div>
+    </PowerCalendarRange>
+    <style scoped>
+      .month-calendar {
+        width: 100%;
+      }
+      .months-container {
+        display: flex;
+        flex-direction: row;
+        gap: var(--boxel-sp-lg);
+      }
+      .months-container.disabled {
+        pointer-events: none;
+        opacity: 0.6;
+      }
+      .nav-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .days-container {
+        margin-top: auto;
+      }
+    </style>
+    {{!
+    Note: I don't think there is any reason why we can't implement scoped styles here unlike ember-power-select which uses wormholes
+    but we do so for now to avoid the complexity of maintaining fidelity with the way the ember-power-calendar styles are implemented.
+    We do so intentionally to
+    - maintain fidelity with the library
+    - avoid the complexity of implementing :deep() pseudo-class to styles to be applied
+     }}
+    {{! template-lint-disable require-scoped-style }}
+    <style>
+      .ember-power-calendar {
+        --ember-power-calendar-cell-size: 35px;
+        --ember-power-calendar-row-spacing: var(--boxel-sp-sm);
+        width: 100%;
+      }
+      .ember-power-calendar-week {
+        padding-bottom: var(--ember-power-calendar-row-spacing);
+      }
+      .ember-power-calendar-weekday {
+        padding: var(--boxel-sp-4xs);
+      }
+    </style>
+  </template>
+}

package/bundled-types/boxel-ui/components/date-range-picker/setup.gts

@@ -0,0 +1,11 @@
+import { registerDateLibrary } from 'ember-power-calendar';
+import dateLibrary from 'ember-power-calendar-moment';
+
+let hasRegistered = false;
+
+export function setupDateLibrary() {
+  if (!hasRegistered) {
+    registerDateLibrary(dateLibrary);
+    hasRegistered = true;
+  }
+}

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

@@ -0,0 +1,52 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import type {
+  NormalizeRangeActionValue,
+  SelectedPowerCalendarRange,
+} from 'ember-power-calendar/utils';
+
+import DateRangePicker from './index.gts';
+
+export default class DateRangePickerUsage extends Component {
+  @tracked range1: SelectedPowerCalendarRange = {
+    start: new Date(2024, 10, 1),
+    end: new Date(2024, 10, 15),
+  };
+
+  @action
+  onSelect1(selected: NormalizeRangeActionValue) {
+    this.range1 = selected.date;
+  }
+
+  parseDate(date: Date | null | undefined) {
+    if (!date) {
+      return '';
+    }
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+    return formatter.format(date);
+  }
+
+  get range1String() {
+    return `${this.parseDate(this.range1.start)} - ${this.parseDate(
+      this.range1.end,
+    )}`;
+  }
+
+  <template>
+    <FreestyleUsage @name='Date Range Picker'>
+      <:example>
+        {{this.range1String}}
+        <DateRangePicker
+          @selected={{this.range1}}
+          @onSelect={{this.onSelect1}}
+        />
+      </:example>
+    </FreestyleUsage>
+  </template>
+}

package/bundled-types/boxel-ui/components/drag-and-drop/index.gts

@@ -0,0 +1,256 @@
+import { LoadingIndicator } from '@cardstack/boxel-ui/components';
+import { fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import DropTargetModifier from 'ember-draggable-modifiers/modifiers/drop-target';
+import SortableItemModifier from 'ember-draggable-modifiers/modifiers/sortable-item';
+import {
+  insertAfter,
+  insertBefore,
+  removeItem,
+} from 'ember-draggable-modifiers/utils/array';
+
+import { and, eq } from '../../helpers/truth-helpers.ts';
+
+export type DndItem = Record<string, any>;
+
+export interface DndKanbanBoardArgs<DndColumn> {
+  columns: DndColumn[];
+  displayCard?: (card: DndItem) => boolean;
+  isLoading?: boolean;
+  onMove?: (
+    draggedCard: DndItem,
+    targetCard: DndItem,
+    sourceColumn: DndColumn,
+    targetColumn: DndColumn,
+  ) => void;
+}
+
+export class DndColumn {
+  @tracked cards: DndItem[];
+  title: string;
+
+  constructor(title: string, cards: DndItem[] = []) {
+    this.title = title;
+    this.cards = cards;
+  }
+}
+
+export interface DndKanbanBoardSignature<DndColumn> {
+  Args: DndKanbanBoardArgs<DndColumn>;
+  Blocks: {
+    card: [card?: DndItem, column?: DndColumn];
+    // We yield the card and column back to the consumer so they can decide how to render it or use additional information
+    // This rendering by the block will typically occur at the card of the kanaban
+    // but with more sophistication you can use it somewhere else
+    header: [column?: DndColumn];
+  };
+}
+
+export default class DndKanbanBoard extends Component<
+  DndKanbanBoardSignature<DndColumn>
+> {
+  @tracked draggedCard: DndItem | null = null;
+
+  @action moveCard({
+    source: {
+      data: { item: draggedItem, parent: draggedItemParent },
+    },
+    target: {
+      data: { item: dropTarget, parent: dropTargetParent },
+      edge,
+    },
+  }: any) {
+    draggedItemParent.cards = removeItem(draggedItemParent.cards, draggedItem);
+
+    if (dropTarget !== undefined) {
+      if (edge === 'top') {
+        dropTargetParent.cards = insertBefore(
+          dropTargetParent.cards,
+          dropTarget,
+          draggedItem,
+        );
+      } else if (edge === 'bottom') {
+        dropTargetParent.cards = insertAfter(
+          dropTargetParent.cards,
+          dropTarget,
+          draggedItem,
+        );
+      } else {
+        throw new Error('Invalid edge');
+      }
+    } else {
+      if (dropTargetParent !== undefined) {
+        // If the drop target is undefined, but the dropTargetParent is defined,  we are dropping the card into last index of the drop target of the column
+        dropTargetParent.cards = [...dropTargetParent.cards, draggedItem];
+      }
+    }
+
+    if (this.args.onMove) {
+      this.args.onMove(
+        draggedItem,
+        dropTarget,
+        draggedItemParent,
+        dropTargetParent,
+      );
+    }
+  }
+
+  @action
+  onDragStart(card: DndItem) {
+    this.draggedCard = card;
+  }
+
+  @action
+  onDragEnd() {
+    this.draggedCard = null;
+  }
+
+  @action
+  displayCard(card: DndItem): boolean {
+    if (this.args.displayCard) {
+      return this.args.displayCard(card);
+    }
+    return true;
+  }
+
+  <template>
+    <div class='draggable-container' {{on 'dragend' this.onDragEnd}}>
+      {{#each @columns as |column|}}
+        <div
+          class='column'
+          {{DropTargetModifier
+            group='cards'
+            data=(hash parent=column)
+            onDrop=this.moveCard
+          }}
+        >
+          {{#if (has-block 'header')}}
+            <div class='column-header'>
+              {{yield column to='header'}}
+            </div>
+          {{/if}}
+
+          <div class='column-drop-zone'>
+            {{#each column.cards as |card|}}
+              {{#if (this.displayCard card)}}
+                <div
+                  class='draggable-card {{if @isLoading "is-loading"}}'
+                  {{SortableItemModifier
+                    group='cards'
+                    data=(hash item=card parent=column)
+                    onDrop=this.moveCard
+                    isOnTargetClass='is-on-target'
+                    onDragStart=(fn this.onDragStart card)
+                  }}
+                >
+                  {{#if (and @isLoading (eq card this.draggedCard))}}
+                    <div class='overlay'></div>
+                    {{yield card column to='card'}}
+                    <LoadingIndicator
+                      @color='var(--boxel-light)'
+                      class='loader loader--small'
+                    />
+                  {{else}}
+                    {{yield card column to='card'}}
+                  {{/if}}
+                </div>
+              {{/if}}
+            {{/each}}
+          </div>
+        </div>
+      {{/each}}
+    </div>
+
+    <style scoped>
+      .draggable-container {
+        --draggable-overlay-z-index: 5;
+        display: flex;
+        overflow-x: auto;
+        flex-grow: 1;
+        gap: var(--dnd-container-gap, var(--boxel-sp));
+        transition: transform 0.5s ease;
+        height: 100%;
+      }
+      .draggable-card {
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+        background: var(--boxel-light);
+        transition:
+          all 0.3s ease,
+          filter 0.3s ease;
+        cursor: grab;
+      }
+      .draggable-card :where(.boundaries) {
+        box-shadow: none;
+      }
+      .draggable-card.is-loading {
+        position: relative;
+      }
+      .draggable-card.is-loading > .overlay {
+        position: absolute;
+        top: 0%;
+        left: 0%;
+        width: 100%;
+        height: 100%;
+        background-color: rgb(38 38 38 / 50%);
+        z-index: var(--draggable-overlay-z-index);
+        border-radius: var(--boxel-border-radius);
+      }
+      .draggable-card.is-loading > .loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: calc(var(--draggable-overlay-z-index) + 1);
+      }
+      .draggable-card.is-loading > .loader--small {
+        --loading-indicator-size: 18px;
+      }
+      .draggable-card.is-on-target {
+        transform: scale(0.95);
+        filter: brightness(0.7);
+      }
+      .draggable-card-empty {
+        filter: brightness(0.7);
+        border: 1px dashed var(--boxel-300);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .column {
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 var(--boxel-xs-container);
+        height: 100%;
+        border-radius: var(--dnd-column-border-radius, 14px);
+        overflow: hidden;
+        background-color: var(--dnd-drop-zone-bg, var(--boxel-200));
+      }
+      .column-header {
+        position: sticky;
+        z-index: calc(var(--draggable-overlay-z-index) +2);
+        top: 0;
+        background-color: var(--dnd-header-bg, transparent);
+        font-weight: 600;
+        padding: var(--boxel-sp-sm) var(--boxel-sp) var(--boxel-sp-xxs)
+          var(--boxel-sp);
+      }
+      .column-drop-zone {
+        position: relative;
+        padding: var(--boxel-sp-xs);
+        display: grid;
+        align-content: flex-start;
+        gap: var(--boxel-sp-xs);
+        height: 100%;
+        overflow-y: auto;
+      }
+      .column-drop-zone:has(.draggable-card.is-dragging)
+        .draggable-card:not(.is-dragging) {
+        filter: brightness(0.7);
+      }
+    </style>
+  </template>
+}

package/bundled-types/boxel-ui/components/drag-and-drop/usage.gts

@@ -0,0 +1,142 @@
+import { cssVar } from '@cardstack/boxel-ui/helpers';
+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 CSSVariableInfo,
+  cssVariable,
+} from 'ember-freestyle/decorators/css-variable';
+import { get } from 'lodash';
+
+import Pill from '../pill/index.gts';
+import DndKanbanBoard, { DndColumn } from './index.gts';
+
+export default class DndUsage extends Component {
+  @tracked columns = [
+    new DndColumn('Todo', [
+      { assignee: 'Justin', task: 'Implement a Todo App' },
+      { assignee: 'Lucas', task: 'Create Boxel UI Component' },
+      { assignee: 'Richard', task: 'Design a Chess App' },
+      { assignee: 'Chuan', task: 'Research on Bug' },
+    ]),
+    new DndColumn('In Progress', []),
+    new DndColumn('Done', []),
+  ];
+  @tracked isLoading = false;
+
+  @cssVariable({ cssClassName: 'dnd-freestyle-container' })
+  declare dndContainerGap: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'dnd-freestyle-container' })
+  declare dndColumnBorderRadius: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'dnd-freestyle-container' })
+  declare dndHeaderBg: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'dnd-freestyle-container' })
+  declare dndDropZoneBg: CSSVariableInfo;
+
+  <template>
+    <FreestyleUsage
+      @name='Dnd Kanban Board'
+      style={{cssVar
+        dnd-container-gap=this.dndContainerGap.value
+        dnd-column-border-radius=this.dndColumnBorderRadius.value
+        dnd-header-bg=this.dndHeaderBg.value
+        dnd-drop-zone-bg=this.dndDropZoneBg.value
+      }}
+    >
+      <:description>
+        This component implements a drag-and-drop Kanban board using
+        ember-draggable-modifiers. It allows users to create custom
+        functionality for column headers and design custom draggable cards. This
+        flexibility enables developers to implement unique actions or menus
+        within column headers. Users can also define their own draggable card
+        designs with custom styles.
+      </:description>
+      <:example>
+        <div class='dnd-wrapper'>
+          <DndKanbanBoard
+            @columns={{this.columns}}
+            @isLoading={{this.isLoading}}
+          >
+            <:header as |column|>
+              {{column.title}}
+            </:header>
+            <:card as |card column|>
+              <div class='custom-card'>
+                <Pill @kind='default' class='column-info'>
+                  {{column.title}}
+                </Pill>
+                <h3>{{get card 'assignee'}}</h3>
+                <p>{{get card 'task'}}</p>
+              </div>
+            </:card>
+          </DndKanbanBoard>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.Array
+          @name='columns'
+          @description='Array of Column objects representing the kanban board columns'
+          @required={{true}}
+        />
+        <Args.Bool
+          @name='isLoading'
+          @description='Indicates if the card is in a loading state. You can also use onMove arguments to experiment with the loading state, allowing for dynamic updates during card movements.'
+          @optional={{true}}
+          @onInput={{fn (mut this.isLoading)}}
+          @value={{this.isLoading}}
+        />
+        <Args.Action
+          @name='onMove'
+          @description='Custom callback function triggered when a card is moved'
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='dnd-container-gap'
+          @type='length'
+          @description='Gap between columns in the kanban board - px'
+          @defaultValue={{this.dndContainerGap.defaults}}
+          @value={{this.dndContainerGap.value}}
+          @onInput={{this.dndContainerGap.update}}
+        />
+        <Css.Basic
+          @name='dnd-column-border-radius'
+          @type='length'
+          @description='Border radius for kanban board columns'
+          @defaultValue={{this.dndColumnBorderRadius.defaults}}
+          @value={{this.dndColumnBorderRadius.value}}
+          @onInput={{this.dndColumnBorderRadius.update}}
+        />
+        <Css.Basic
+          @name='dnd-header-bg'
+          @type='color'
+          @description='Background color for kanban board headers'
+          @defaultValue={{this.dndHeaderBg.defaults}}
+          @value={{this.dndHeaderBg.value}}
+          @onInput={{this.dndHeaderBg.update}}
+        />
+        <Css.Basic
+          @name='dnd-drop-zone-bg'
+          @type='color'
+          @description='Background color for kanban board drop zones'
+          @defaultValue={{this.dndDropZoneBg.defaults}}
+          @value={{this.dndDropZoneBg.value}}
+          @onInput={{this.dndDropZoneBg.update}}
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <style scoped>
+      .dnd-wrapper {
+        height: 600px;
+      }
+      .custom-card {
+        padding: var(--boxel-sp);
+      }
+      .column-info {
+        display: table;
+        margin-left: auto;
+      }
+    </style>
+  </template>
+}