Merge branch 'main' into ci/ai-in-previews-cs-6672

cardstack · Apr 12, 2024 · 8fb885d · 8fb885d
2 parents b3e0eb6 + 563cc3a
commit 8fb885d
Show file tree

Hide file tree

Showing 41 changed files with 720 additions and 136 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -77,6 +77,10 @@ jobs:
         if: always()
         run: pnpm run lint
         working-directory: packages/realm-server
+      - name: Lint Runtime Common
+        if: always()
+        run: pnpm run lint
+        working-directory: packages/runtime-common
 
   ai-bot-test:
     name: AI bot Tests

diff --git a/README.md b/README.md
@@ -82,6 +82,7 @@ Instead of running `pnpm start:base`, you can alternatively use `pnpm start:all`
 | :4204 | `root (/)` drafts realm                                   | ✅                  | 🚫                   |
 | :4205 | qunit server mounting realms in iframes for testing       | ✅                  | 🚫                   |
 | :5001 | Mail user interface for viewing emails sent to local SMTP | ✅                  | 🚫                   |
+| :5435 | Postgres DB                                               | ✅                  | 🚫                   |
 | :8008 | Matrix synapse server                                     | ✅                  | 🚫                   |
 
 #### Using `start:development`

diff --git a/packages/base/card-api.gts b/packages/base/card-api.gts
@@ -1823,12 +1823,14 @@ class DefaultAtomViewTemplate extends GlimmerComponent<{
     fields: Record<string, new () => GlimmerComponent>;
   };
 }> {
+  get text() {
+    return (
+      this.args.model.title?.trim() ||
+      `Untitled ${this.args.model.constructor.displayName}`
+    );
+  }
   <template>
-    {{#each-in @fields as |key Field|}}
-      {{#if (eq key 'title')}}
-        <Field />
-      {{/if}}
-    {{/each-in}}
+    {{this.text}}
   </template>
 }
 

diff --git a/packages/boxel-motion/test-app/package.json b/packages/boxel-motion/test-app/package.json
@@ -87,7 +87,7 @@
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-qunit": "^8.0.1",
-    "glimmer-scoped-css": "^0.4.0",
+    "glimmer-scoped-css": "^0.4.1",
     "loader.js": "^4.7.0",
     "normalize.css": "8.0.1",
     "prettier": "^3.0.3",

diff --git a/packages/boxel-ui/addon/package.json b/packages/boxel-ui/addon/package.json
@@ -86,7 +86,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "eslint-plugin-typescript-sort-keys": "^2.1.0",
-    "glimmer-scoped-css": "^0.4.0",
+    "glimmer-scoped-css": "^0.4.1",
     "prettier": "^2.8.7",
     "prettier-plugin-ember-template-tag": "^1.1.0",
     "rollup": "^3.28.1",

diff --git a/packages/boxel-ui/addon/rollup.config.mjs b/packages/boxel-ui/addon/rollup.config.mjs
@@ -94,10 +94,15 @@ function scopedCSS(srcDir) {
       hash.update(source);
       let cssFileName = hash.digest('hex').slice(0, 10) + '.css';
       let dir = path.dirname(localPath);
-      let css = decodeScopedCSSRequest(source);
+      let cssAndFile = decodeScopedCSSRequest(source);
       return {
         id: path.resolve(path.dirname(importer), cssFileName),
-        meta: { 'scoped-css': { css, fileName: path.join(dir, cssFileName) } },
+        meta: {
+          'scoped-css': {
+            css: cssAndFile.css,
+            fileName: path.join(dir, cssFileName),
+          },
+        },
         external: 'relative',
       };
     },

diff --git a/packages/boxel-ui/addon/src/components/icon-button/usage.gts b/packages/boxel-ui/addon/src/components/icon-button/usage.gts
@@ -21,6 +21,9 @@ export default class IconButtonUsage extends Component {
   @tracked width = '40px';
   @tracked height = '40px';
 
+  @tracked showIconBorders = false;
+  @tracked hideIconOverflow = false;
+
   cssClassName = 'boxel-icon-button';
   @cssVariable declare boxelIconButtonWidth: CSSVariableInfo;
   @cssVariable declare boxelIconButtonHeight: CSSVariableInfo;
@@ -30,6 +33,14 @@ export default class IconButtonUsage extends Component {
     console.log(message);
   }
 
+  @action toggleShowIconBorders(): void {
+    this.showIconBorders = !this.showIconBorders;
+  }
+
+  @action toggleHideIconOverflow(): void {
+    this.hideIconOverflow = !this.hideIconOverflow;
+  }
+
   <template>
     <FreestyleUsage @name='IconButton'>
       <:example>
@@ -98,5 +109,81 @@ export default class IconButtonUsage extends Component {
         />
       </:cssVars>
     </FreestyleUsage>
+
+    <FreestyleUsage @name='All Icons'>
+      <:example>
+        <label class='checkbox-label'>
+          <input
+            type='checkbox'
+            checked={{this.showIconBorders}}
+            {{on 'change' this.toggleShowIconBorders}}
+          />
+          Show icon bounds
+        </label>
+        <label class='checkbox-label'>
+          <input
+            type='checkbox'
+            checked={{this.hideIconOverflow}}
+            {{on 'change' this.toggleHideIconOverflow}}
+          />
+          Hide icon overflow
+        </label>
+        <section class='all-icons'>
+          {{#each ALL_ICON_COMPONENTS as |icon|}}
+            <div
+              class='icon-and-label
+                {{if this.showIconBorders "show-borders"}}
+                {{if this.hideIconOverflow "hide-icon-overflow"}}'
+            >
+              <BoxelIconButton
+                @icon={{icon}}
+                @variant={{this.variant}}
+                @width={{this.width}}
+                @height={{this.height}}
+                aria-label='Special Button'
+                {{on 'click' (fn this.log 'Button clicked')}}
+                class='icon'
+                style={{cssVar
+                  boxel-icon-button-width=this.boxelIconButtonWidth.value
+                  boxel-icon-button-height=this.boxelIconButtonHeight.value
+                }}
+              />
+              <span class='label'>{{icon.name}}</span>
+            </div>
+          {{/each}}
+        </section>
+      </:example>
+    </FreestyleUsage>
+    <style>
+      .checkbox-label {
+        display: flex;
+        align-items: center;
+        margin-bottom: var(--boxel-sp);
+        gap: var(--boxel-sp-xxs);
+      }
+
+      .all-icons {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .icon-and-label {
+        display: flex;
+        width: 15rem;
+        flex-direction: column;
+        align-items: center;
+        margin: 0 10px 10px 0;
+      }
+
+      .hide-icon-overflow .icon {
+        overflow: hidden;
+      }
+
+      .show-borders .icon {
+        border: 1px solid var(--boxel-500);
+        width: calc(var(--boxel-icon-button-width) + 2px);
+        height: calc(var(--boxel-icon-button-height) + 2px);
+      }
+    </style>
   </template>
 }
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
@@ -202,6 +202,7 @@ export default class ResizablePanelGroup extends Component<Signature> {
   registerPanel(context: {
     collapsible: boolean | undefined;
     defaultLengthFraction: number | undefined;
+    isHidden: boolean | undefined;
     lengthPx: number | undefined;
     minLengthPx: number | undefined;
   }) {
@@ -213,6 +214,8 @@ export default class ResizablePanelGroup extends Component<Signature> {
         context.defaultLengthFraction === undefined
       ) {
         context.lengthPx = -1;
+      } else if (context.isHidden) {
+        context.lengthPx = 0;
       } else {
         context.lengthPx =
           context.defaultLengthFraction * this.panelGroupLengthPx;
@@ -226,6 +229,7 @@ export default class ResizablePanelGroup extends Component<Signature> {
       minLengthPx: context.minLengthPx,
       collapsible:
         context.collapsible == undefined ? true : context.collapsible,
+      isHidden: context.isHidden,
     });
 
     this.calculatePanelRatio();

diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts
@@ -16,6 +16,7 @@ export type PanelContext = {
   defaultLengthFraction?: number;
   id: number;
   initialMinLengthPx?: number;
+  isHidden?: boolean;
   lengthPx: number;
   minLengthPx?: number;
 };
@@ -34,6 +35,7 @@ interface Signature {
     registerPanel: (context: {
       collapsible: boolean | undefined;
       defaultLengthFraction: number | undefined;
+      isHidden: boolean | undefined;
       lengthPx: number | undefined;
       minLengthPx: number | undefined;
     }) => number;
@@ -46,15 +48,9 @@ interface Signature {
   Element: HTMLDivElement;
 }
 
-let managePanelRegistration = modifier(
-  (_element, [panel, isHidden]: [Panel, boolean | undefined]) => {
-    if (isHidden) {
-      scheduleOnce('afterRender', panel, panel.unregisterPanel);
-    } else {
-      scheduleOnce('afterRender', panel, panel.registerPanel);
-    }
-  },
-);
+let managePanelRegistration = modifier((_element, [panel]: [Panel]) => {
+  scheduleOnce('afterRender', panel, panel.registerPanel);
+});
 
 export default class Panel extends Component<Signature> {
   <template>
@@ -73,7 +69,7 @@ export default class Panel extends Component<Signature> {
         )
       }}
       {{createRef (@resizablePanelElId this.id) bucket=@panelGroupComponent}}
-      {{managePanelRegistration this @isHidden}}
+      {{managePanelRegistration this}}
       ...attributes
     >
       {{yield}}
@@ -116,6 +112,7 @@ export default class Panel extends Component<Signature> {
         defaultLengthFraction: this.args.defaultLengthFraction,
         minLengthPx: this.args.minLengthPx,
         collapsible: this.args.collapsible,
+        isHidden: this.args.isHidden,
       });
     }
   }

diff --git a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts
@@ -300,8 +300,8 @@ module('Integration | ResizablePanelGroup', function (hooks) {
     assert.hasNumericStyle('.panel-1-content', 'height', 0, 0);
     this.renderController.panels[1].isHidden = false;
     await sleep(100); // let didResizeModifier run
-    assert.hasNumericStyle('.panel-0-content', 'height', 156, 1);
-    assert.hasNumericStyle('.panel-1-content', 'height', 62, 1);
+    assert.hasNumericStyle('.panel-0-content', 'height', 168, 1);
+    assert.hasNumericStyle('.panel-1-content', 'height', 50, 1);
     this.renderController.panels[1].isHidden = true;
     await sleep(100); // let didResizeModifier run
     assert.hasNumericStyle('.panel-0-content', 'height', 218, 1);

diff --git a/packages/host/app/lib/current-run.ts b/packages/host/app/lib/current-run.ts
@@ -36,7 +36,6 @@ import {
   type SerializedError,
 } from '@cardstack/runtime-common/error';
 import { RealmPaths, LocalPath } from '@cardstack/runtime-common/paths';
-import { reportError } from '@cardstack/runtime-common/realm';
 import {
   isIgnored,
   type Reader,
@@ -476,9 +475,9 @@ export class CurrentRun {
         deferred.reject(err);
         throw err;
       }
-      let warning = `encountered error indexing card instance ${path}: ${error.error.detail}`;
-      log.warn(warning);
-      reportError(new Error(warning));
+      log.warn(
+        `encountered error indexing card instance ${path}: ${error.error.detail}`,
+      );
       this.setInstance(instanceURL, error);
       deferred.fulfill();
     }

diff --git a/packages/host/app/lib/SQLiteAdapter.ts → packages/host/app/lib/sqlite-adapter.ts b/packages/host/app/lib/SQLiteAdapter.ts → packages/host/app/lib/sqlite-adapter.ts
diff --git a/packages/host/tests/integration/components/card-basics-test.gts b/packages/host/tests/integration/components/card-basics-test.gts
@@ -1243,6 +1243,7 @@ module('Integration | card-basics', function (hooks) {
     let { default: StringField } = string;
     let { default: NumberField } = number;
     class Person extends FieldDef {
+      static displayName = 'Person';
       @field firstName = contains(StringField);
       @field lastName = contains(StringField);
       @field age = contains(NumberField);
@@ -1253,16 +1254,23 @@ module('Integration | card-basics', function (hooks) {
       });
     }
     loader.shimModule(`${testRealmURL}test-cards`, { Person });
-    let helloWorld = new Person({
+    let person = new Person({
       firstName: 'Arthur',
       lastName: 'M',
       age: 10,
     });
 
-    await renderCard(loader, helloWorld, 'atom');
+    await renderCard(loader, person, 'atom');
     assert.dom('[data-test-compound-field-component]').hasText('Arthur M');
     assert.dom('[data-test-compound-field-component]').doesNotContainText('10');
     assert.dom('[data-test-compound-field-format="atom"]').exists();
+
+    person.firstName = '';
+    person.lastName = '';
+    await renderCard(loader, person, 'atom');
+    assert
+      .dom('[data-test-compound-field-component]')
+      .hasText('Untitled Person');
   });
 
   test('render user-provided atom view template', async function (assert) {

diff --git a/packages/host/tests/unit/indexer-test.ts b/packages/host/tests/unit/indexer-test.ts
@@ -9,7 +9,7 @@ import {
 } from '@cardstack/runtime-common';
 
 import ENV from '@cardstack/host/config/environment';
-import SQLiteAdapter from '@cardstack/host/lib/SQLiteAdapter';
+import SQLiteAdapter from '@cardstack/host/lib/sqlite-adapter';
 
 import { testRealmURL, setupIndex } from '../helpers';
 

diff --git a/packages/host/tests/unit/query-test.ts b/packages/host/tests/unit/query-test.ts
@@ -12,8 +12,8 @@ import {
 } from '@cardstack/runtime-common';
 
 import ENV from '@cardstack/host/config/environment';
-import SQLiteAdapter from '@cardstack/host/lib/SQLiteAdapter';
 import { shimExternals } from '@cardstack/host/lib/externals';
+import SQLiteAdapter from '@cardstack/host/lib/sqlite-adapter';
 
 import { CardDef } from 'https://cardstack.com/base/card-api';
 

diff --git a/packages/host/tests/unit/sqlite-test.ts b/packages/host/tests/unit/sqlite-test.ts
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 
-import SQLiteAdapter from '@cardstack/host/lib/SQLiteAdapter';
+import SQLiteAdapter from '@cardstack/host/lib/sqlite-adapter';
 
 module('Unit | sqlite | SQLiteAdapter', function () {
   test('run a sqlite db using the SQLiteAdapter', async function (assert) {

diff --git a/packages/realm-server/migrations/.eslintrc.js b/packages/realm-server/migrations/.eslintrc.js
@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    sourceType: 'script',
+  },
+  env: {
+    browser: false,
+    node: true,
+  },
+  extends: ['plugin:n/recommended'],
+  rules: {
+    camelcase: 'off',
+  },
+};