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

package/bundled-types/host-app/components/card-search/section-header.gts

@@ -0,0 +1,117 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import { BoxelInput, RealmIcon } from '@cardstack/boxel-ui/components';
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+import type { RealmSectionInfo } from '@cardstack/host/utils/card-search/sections';
+
+import type { ComponentLike } from '@glint/template';
+
+interface Signature {
+  Element: HTMLElement;
+  Args: {
+    hideCount?: boolean;
+    icon?: ComponentLike<{ Element: Element }>;
+    realmInfo?: RealmSectionInfo;
+    title: string;
+    totalCount?: number;
+    showOnlyLabel?: string;
+    showOnlyChecked?: boolean;
+    onShowOnlyChange?: (checked: boolean) => void;
+  };
+  Blocks: {};
+}
+
+export default class SearchSheetSectionHeader extends Component<Signature> {
+  @action
+  handleShowOnlyChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.args.onShowOnlyChange?.(target.checked);
+  }
+
+  <template>
+    <header
+      class='search-sheet-section-header'
+      data-test-search-sheet-section-header
+    >
+      <div class='icon'>
+        {{#if @realmInfo}}
+          <RealmIcon @realmInfo={{@realmInfo}} />
+        {{else if @icon}}
+          {{#let @icon as |IconComponent|}}
+            <IconComponent class='icon-svg' />
+          {{/let}}
+        {{/if}}
+      </div>
+      <div class='title'>{{@title}}</div>
+      {{#unless @hideCount}}
+        <div
+          class='count'
+          data-test-search-sheet-section-count
+          data-test-results-count
+        >
+          {{#if (eq @totalCount 0)}}
+            No results
+          {{else}}
+            {{@totalCount}}
+            {{if (eq @totalCount 1) 'result' 'results'}}
+          {{/if}}
+        </div>
+      {{/unless}}
+      {{#if @showOnlyLabel}}
+        <label class='show-only'>
+          <span class='show-only-label'>Show only
+            <strong>{{@showOnlyLabel}}</strong></span>
+          <BoxelInput
+            @type='checkbox'
+            @value={{@showOnlyChecked}}
+            @onChange={{this.handleShowOnlyChange}}
+            data-test-search-sheet-show-only
+          />
+        </label>
+      {{/if}}
+    </header>
+    <style scoped>
+      .search-sheet-section-header {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-sm);
+        padding: var(--boxel-sp) 0 var(--boxel-sp-xs);
+        margin-bottom: var(--boxel-sp-lg);
+      }
+      .icon {
+        --boxel-realm-icon-size: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        flex-shrink: 0;
+      }
+      .icon-svg {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+      .title {
+        font: 600 var(--boxel-font);
+      }
+      .count {
+        font: 500 var(--boxel-font);
+        color: var(--boxel-450);
+      }
+      .show-only {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+        cursor: pointer;
+        font: var(--boxel-font-sm);
+      }
+      .show-only-label {
+        user-select: none;
+      }
+    </style>
+  </template>
+}

package/bundled-types/host-app/components/editor/directory.gts

@@ -0,0 +1,308 @@
+import { registerDestructor } from '@ember/destroyable';
+import { fn, concat } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import type Owner from '@ember/owner';
+import Component from '@glimmer/component';
+
+import { tracked } from '@glimmer/tracking';
+
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+import { velcro } from 'ember-velcro';
+import { TrackedArray } from 'tracked-built-ins';
+
+import { ContextButton, Menu } from '@cardstack/boxel-ui/components';
+import { eq, MenuItem } from '@cardstack/boxel-ui/helpers';
+
+import { DropdownArrowDown, IconTrash } from '@cardstack/boxel-ui/icons';
+
+import type { LocalPath } from '@cardstack/runtime-common/paths';
+
+import scrollIntoViewModifier from '@cardstack/host/modifiers/scroll-into-view';
+import { directory } from '@cardstack/host/resources/directory';
+import { normalizeDirPath } from '@cardstack/host/utils/normalized-dir-path';
+
+interface Args {
+  Args: {
+    relativePath: string;
+    realmURL: string;
+    selectedFile?: LocalPath;
+    openDirs?: LocalPath[];
+    onFileSelected?: (entryPath: LocalPath) => void;
+    onDirectorySelected?: (entryPath: LocalPath) => void;
+    onDeleteFile?: (entryPath: LocalPath) => void;
+    scrollPositionKey?: LocalPath;
+  };
+}
+
+export default class Directory extends Component<Args> {
+  <template>
+    {{#each this.listing.entries key='path' as |entry|}}
+      <div class='level' data-test-directory-level>
+        {{#let (concat @relativePath entry.name) as |entryPath|}}
+          {{#if (eq entry.kind 'file')}}
+            <div
+              class='file-row {{if (this.isSelectedFile entryPath) "selected"}}'
+              data-test-file-row={{entryPath}}
+              {{on 'contextmenu' (fn this.onFileRowContextMenu entryPath)}}
+            >
+              <button
+                data-test-file={{entryPath}}
+                title={{entry.name}}
+                {{on 'click' (fn this.selectFile entryPath)}}
+                {{scrollIntoViewModifier
+                  (this.isSelectedFile entryPath)
+                  container='file-tree'
+                  key=@scrollPositionKey
+                }}
+                class='file {{if (this.isSelectedFile entryPath) "selected"}}'
+              >
+                {{entry.name}}
+              </button>
+              {{#if @onDeleteFile}}
+                <ContextButton
+                  class='file-menu-trigger'
+                  @icon='context-menu'
+                  @size='extra-small'
+                  @label='File options'
+                  @variant='ghost'
+                  {{on 'click' (fn this.openFileMenu entryPath)}}
+                />
+              {{/if}}
+            </div>
+          {{else}}
+            <button
+              data-test-directory={{entryPath}}
+              title={{entry.name}}
+              {{on 'click' (fn this.selectDirectory entryPath)}}
+              class='directory'
+            >
+              <DropdownArrowDown
+                class={{concat
+                  'icon '
+                  (if (this.isOpenDirectory entryPath) 'open' 'closed')
+                }}
+              />{{entry.name}}
+            </button>
+            {{#if (this.isOpenDirectory entryPath)}}
+              <Directory
+                @relativePath='{{@relativePath}}{{entry.name}}'
+                @realmURL={{@realmURL}}
+                @selectedFile={{if
+                  @selectedFile
+                  @selectedFile
+                  this.selectedFile
+                }}
+                @openDirs={{if @openDirs @openDirs this.openDirs}}
+                @onFileSelected={{this.selectFile}}
+                @onDirectorySelected={{this.selectDirectory}}
+                @onDeleteFile={{@onDeleteFile}}
+                @scrollPositionKey={{@scrollPositionKey}}
+              />
+            {{/if}}
+          {{/if}}
+        {{/let}}
+      </div>
+    {{/each}}
+    {{#if this.menuTriggerEl}}
+      <div
+        class='file-tree-context-menu'
+        {{velcro this.menuTriggerEl placement='bottom-start' strategy='fixed'}}
+        {{onClickOutside this.closeMenu exceptSelector='.file-menu-trigger'}}
+      >
+        <Menu
+          class='file-tree-context-menu-list'
+          @items={{this.menuItems}}
+          @closeMenu={{this.closeMenu}}
+        />
+      </div>
+    {{/if}}
+    <style scoped>
+      .level {
+        --icon-length: 14px;
+        --icon-margin: 4px;
+
+        padding-left: 0em;
+      }
+
+      .level .level {
+        padding-left: 1em;
+      }
+
+      .file-row {
+        display: flex;
+        align-items: center;
+        border-radius: var(--boxel-border-radius-xs);
+      }
+
+      .file-row:hover,
+      .file-row:focus-within {
+        background-color: var(--boxel-200);
+      }
+
+      .file-row.selected {
+        color: var(--boxel-dark);
+        background-color: var(--boxel-highlight);
+      }
+
+      .file-row .file {
+        flex: 1;
+        min-width: 0;
+        background: transparent;
+        border: 0;
+        padding: var(--boxel-sp-xxxs);
+        padding-left: calc(var(--icon-length) + var(--icon-margin));
+        text-align: start;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: inherit;
+        border-radius: var(--boxel-border-radius-xs);
+      }
+
+      .file-menu-trigger {
+        flex-shrink: 0;
+        visibility: hidden;
+        margin-right: var(--boxel-sp-xxxs);
+      }
+
+      .file-row:hover .file-menu-trigger,
+      .file-row:focus-within .file-menu-trigger {
+        visibility: visible;
+      }
+
+      .file-tree-context-menu {
+        z-index: var(--boxel-layer-floating-button);
+      }
+
+      .directory {
+        border-radius: var(--boxel-border-radius-xs);
+        background: transparent;
+        border: 0;
+        padding: var(--boxel-sp-xxxs);
+        width: 100%;
+        text-align: start;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-left: 0;
+      }
+
+      .directory:hover {
+        background-color: var(--boxel-200);
+      }
+
+      .directory :deep(.icon) {
+        width: var(--icon-length);
+        height: var(--icon-length);
+        margin-bottom: -2px;
+        padding: 0 2px;
+      }
+
+      .directory :deep(.icon.closed) {
+        transform: rotate(-90deg);
+      }
+    </style>
+  </template>
+
+  private listing = directory(
+    this,
+    () => this.args.relativePath,
+    () => this.args.realmURL,
+  );
+
+  @tracked private selectedFile?: LocalPath;
+  @tracked private menuTriggerEl?: HTMLElement;
+  private openDirs: TrackedArray<LocalPath> = new TrackedArray();
+  private menuEntryPath?: LocalPath;
+  constructor(owner: Owner, args: Args['Args']) {
+    super(owner, args);
+    registerDestructor(this, () => {
+      this.menuEntryPath = undefined;
+      this.menuTriggerEl = undefined;
+    });
+  }
+
+  @action
+  private selectFile(entryPath: LocalPath) {
+    this.selectedFile = entryPath;
+    this.args.onFileSelected?.(entryPath);
+  }
+
+  @action
+  private selectDirectory(entryPath: LocalPath) {
+    const dirPath = normalizeDirPath(entryPath);
+
+    let index = this.openDirs.indexOf(dirPath);
+    if (index !== -1) {
+      this.openDirs.splice(index, 1);
+    } else {
+      this.openDirs.push(dirPath);
+    }
+
+    this.args.onDirectorySelected?.(dirPath);
+  }
+
+  @action
+  private isSelectedFile(entryPath: LocalPath) {
+    return this.args.selectedFile
+      ? this.args.selectedFile === entryPath
+      : this.selectedFile === entryPath;
+  }
+
+  @action
+  private isOpenDirectory(entryPath: LocalPath) {
+    let dirPath = normalizeDirPath(entryPath);
+    let openDirs = this.args.openDirs ?? this.openDirs;
+
+    return openDirs.includes(dirPath);
+  }
+
+  private get menuItems() {
+    if (!this.menuEntryPath) {
+      return [];
+    }
+    return [
+      new MenuItem({
+        label: 'Delete',
+        action: () => this.deleteFileEntry(this.menuEntryPath!),
+        icon: IconTrash,
+        dangerous: true,
+      }),
+    ];
+  }
+
+  @action
+  private closeMenu() {
+    this.menuEntryPath = undefined;
+    this.menuTriggerEl = undefined;
+  }
+
+  @action
+  private openFileMenu(entryPath: LocalPath, e: MouseEvent) {
+    if (!this.args.onDeleteFile) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.menuTriggerEl === e.currentTarget) {
+      this.closeMenu();
+      return;
+    }
+    this.menuEntryPath = entryPath;
+    this.menuTriggerEl = e.currentTarget as HTMLElement;
+  }
+
+  @action
+  private onFileRowContextMenu(entryPath: LocalPath, e: MouseEvent) {
+    if (!this.args.onDeleteFile) {
+      return;
+    }
+    this.openFileMenu(entryPath, e);
+  }
+
+  @action
+  private deleteFileEntry(entryPath: LocalPath) {
+    this.args.onDeleteFile?.(entryPath);
+  }
+}

package/bundled-types/host-app/components/editor/file-tree.gts

@@ -0,0 +1,69 @@
+import type Owner from '@ember/owner';
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { restartableTask, timeout } from 'ember-concurrency';
+
+import type { LocalPath } from '@cardstack/runtime-common';
+
+import Directory from './directory';
+
+interface Signature {
+  Args: {
+    realmURL: string;
+    selectedFile?: LocalPath;
+    openDirs?: LocalPath[];
+    onFileSelected?: (entryPath: LocalPath) => Promise<void>;
+    onDirectorySelected?: (entryPath: LocalPath) => void;
+    onDeleteFile?: (entryPath: LocalPath) => void;
+    scrollPositionKey?: LocalPath;
+  };
+}
+
+export default class FileTree extends Component<Signature> {
+  <template>
+    <nav>
+      <Directory
+        @relativePath=''
+        @realmURL={{@realmURL}}
+        @selectedFile={{@selectedFile}}
+        @openDirs={{@openDirs}}
+        @onFileSelected={{@onFileSelected}}
+        @onDirectorySelected={{@onDirectorySelected}}
+        @onDeleteFile={{@onDeleteFile}}
+        @scrollPositionKey={{@scrollPositionKey}}
+      />
+      {{#if this.showMask}}
+        <div class='mask' data-test-file-tree-mask></div>
+      {{/if}}
+    </nav>
+
+    <style scoped>
+      .mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: white;
+        height: 100%;
+        width: 100%;
+      }
+      nav {
+        position: relative;
+      }
+    </style>
+  </template>
+
+  @tracked private showMask = true;
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    this.hideMask.perform();
+  }
+
+  private hideMask = restartableTask(async () => {
+    // fine tuned to coincide with debounce in RestoreScrollPosition modifier
+    await timeout(300);
+    this.showMask = false;
+  });
+}

package/bundled-types/host-app/components/editor/import-module.gts

@@ -0,0 +1,27 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { importResource } from '@cardstack/host/resources/import';
+import type LoaderService from '@cardstack/host/services/loader-service';
+
+export interface Signature {
+  Args: { url: string };
+  Blocks: {
+    ready: [Record<string, any>];
+    error: [{ type: string; message: string }];
+  };
+}
+
+export default class ImportModule extends Component<Signature> {
+  @service declare loaderService: LoaderService;
+  imported = importResource(this, () => this.args.url);
+
+  <template>
+    {{#if this.imported.module}}
+      {{yield this.imported.module to='ready'}}
+    {{/if}}
+    {{#if this.imported.error}}
+      {{yield this.imported.error to='error'}}
+    {{/if}}
+  </template>
+}