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

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

@@ -0,0 +1,79 @@
+import { htmlSafe } from '@ember/template';
+import Component from '@glimmer/component';
+
+import { getContrastColor } from '../../helpers/contrast-color.ts';
+import cssVar from '../../helpers/css-var.ts';
+import { deterministicColorFromString } from '../../helpers/deterministic-color-from-string.ts';
+
+interface Signature {
+  Args: {
+    displayName?: string;
+    isReady: boolean;
+    thumbnailURL?: string;
+    userId?: string | null;
+  };
+  Element: HTMLDivElement;
+}
+
+const setBackgroundImage = (backgroundURL: string | null | undefined) => {
+  if (!backgroundURL) {
+    return;
+  }
+  return htmlSafe(`background-image: url(${backgroundURL});`);
+};
+
+export default class Avatar extends Component<Signature> {
+  <template>
+    {{#let (deterministicColorFromString @userId) as |bgColor|}}
+      <div
+        class='profile-icon'
+        style={{if
+          @thumbnailURL
+          (setBackgroundImage @thumbnailURL)
+          (cssVar
+            profile-avatar-icon-background=bgColor
+            profile-avatar-text-color=(getContrastColor bgColor)
+          )
+        }}
+        data-test-profile-icon={{@isReady}}
+        data-test-profile-icon-userId={{@userId}}
+        role={{if @thumbnailURL 'img' 'presentation'}}
+        aria-label={{if @displayName @displayName @userId}}
+        ...attributes
+      >
+        {{#unless @thumbnailURL}}
+          {{this.profileInitials}}
+        {{/unless}}
+      </div>
+    {{/let}}
+    <style scoped>
+      .profile-icon {
+        --icon-size: var(--profile-avatar-icon-size, 40px);
+        background: var(--profile-avatar-icon-background, var(--boxel-dark));
+        background-position: center;
+        background-size: cover;
+        border-radius: 50%;
+        border: var(--profile-avatar-icon-border, 2px solid white);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--icon-size);
+        width: var(--icon-size);
+        color: var(--profile-avatar-text-color, var(--boxel-light));
+        font-size: calc(var(--icon-size) * 0.55);
+        letter-spacing: 0;
+        line-height: 1;
+      }
+    </style>
+  </template>
+
+  get profileInitials() {
+    if (!this.args.isReady) {
+      return undefined;
+    }
+    let name = this.args.displayName?.length
+      ? this.args.displayName
+      : (this.args.userId?.replace(/^@/, '') ?? '');
+    return name.slice(0, 1).toUpperCase();
+  }
+}

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

@@ -0,0 +1,96 @@
+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 { cssVar } from '../../helpers/css-var.ts';
+import Avatar from './index.gts';
+
+export default class AvatarUsage extends Component {
+  @tracked userId = 'user123';
+  @tracked displayName = 'John Doe';
+  @tracked thumbnailURL =
+    'https://images.pexels.com/photos/4571943/pexels-photo-4571943.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=1';
+  @tracked isReady = true;
+
+  @cssVariable({ cssClassName: 'avatar-freestyle-container' })
+  declare profileAvatarIconSize: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'avatar-freestyle-container' })
+  declare profileAvatarIconBorder: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'avatar-freestyle-container' })
+  declare profileAvatarTextColor: CSSVariableInfo;
+
+  <template>
+    <div
+      class='avatar-freestyle-container'
+      style={{cssVar
+        profile-avatar-icon-size=this.profileAvatarIconSize.value
+        profile-avatar-icon-border=this.profileAvatarIconBorder.value
+      }}
+    >
+      <FreestyleUsage @name='Avatar'>
+        <:description>
+          An avatar component that displays a user's initials on a colored
+          background.
+        </:description>
+        <:example>
+          <Avatar
+            @userId={{this.userId}}
+            @displayName={{this.displayName}}
+            @thumbnailURL={{this.thumbnailURL}}
+            @isReady={{this.isReady}}
+          />
+        </:example>
+        <:api as |Args|>
+          <Args.String
+            @name='userId'
+            @required={{true}}
+            @description='Unique identifier for the user'
+            @value={{this.userId}}
+            @onInput={{fn (mut this.userId)}}
+          />
+          <Args.String
+            @name='displayName'
+            @description='User display name'
+            @defaultValue='userId'
+            @value={{this.displayName}}
+            @onInput={{fn (mut this.displayName)}}
+          />
+          <Args.String
+            @name='thumbnailURL'
+            @description='URL of the user thumbnail'
+            @value={{this.thumbnailURL}}
+            @onInput={{fn (mut this.thumbnailURL)}}
+          />
+          <Args.Bool
+            @name='isReady'
+            @required={{true}}
+            @description='Shows initials on the avatar once this is true'
+            @value={{this.isReady}}
+            @onInput={{fn (mut this.isReady)}}
+          />
+        </:api>
+        <:cssVars as |Css|>
+          <Css.Basic
+            @name='profile-avatar-icon-size'
+            @type='length'
+            @description='Size of the avatar (CSS length value).'
+            @value={{this.profileAvatarIconSize.value}}
+            @onInput={{this.profileAvatarIconSize.update}}
+          />
+          <Css.Basic
+            @name='profile-avatar-icon-border'
+            @type='<line-width> || <line-style> || <color>'
+            @description='Border of the avatar (CSS border value).'
+            @value={{this.profileAvatarIconBorder.value}}
+            @onInput={{this.profileAvatarIconBorder.update}}
+          />
+        </:cssVars>
+      </FreestyleUsage>
+    </div>
+  </template>
+}

package/bundled-types/boxel-ui/components/basic-fitted/index.gts

@@ -0,0 +1,340 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import cssUrl from 'ember-css-url';
+
+import type { Icon } from '../../icons.ts';
+
+interface Signature {
+  Args: {
+    description?: string;
+    iconComponent?: Icon;
+    isEmpty?: boolean;
+    primary: string;
+    secondary?: string;
+    thumbnailURL?: string;
+  };
+  Blocks: { content: []; default: []; empty: []; thumbnail: [] };
+  Element: HTMLDivElement;
+}
+
+const BasicFitted: TemplateOnlyComponent<Signature> = <template>
+  <div class='fitted-template' ...attributes>
+    {{#if @isEmpty}}
+      {{! empty links-to field }}
+      <div data-test-empty-field class='empty-field'>
+        {{yield to='empty'}}
+      </div>
+    {{else}}
+      <div class='thumbnail-section'>
+        {{#if (has-block 'thumbnail')}}
+          {{yield to='thumbnail'}}
+        {{else}}
+          {{#if @thumbnailURL}}
+            <div
+              class='card-thumbnail'
+              style={{cssUrl 'background-image' @thumbnailURL}}
+            />
+          {{else}}
+            <@iconComponent data-test-card-type-icon class='card-type-icon' />
+          {{/if}}
+        {{/if}}
+      </div>
+      {{#if (has-block 'content')}}
+        {{yield to='content'}}
+      {{else}}
+        <div class='info-section'>
+          <h3 class='card-title' data-test-card-title>{{@primary}}</h3>
+          <h4 class='card-display-name' data-test-card-display-name>
+            {{@secondary}}
+          </h4>
+        </div>
+      {{/if}}
+      {{#if @description}}
+        <div class='card-description' data-test-card-description>
+          {{@description}}
+        </div>
+      {{/if}}
+
+      {{yield}}
+    {{/if}}
+  </div>
+  <style scoped>
+    @layer boxelComponentL1 {
+      :global(.fitted-template) {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        gap: var(--boxel-sp-xs);
+        padding: var(--boxel-sp-xs);
+        background-color: var(--card);
+        color: var(--card-foreground);
+        overflow: hidden;
+      }
+      :global(.thumbnail-section) {
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+      }
+      :global(.card-thumbnail) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--boxel-light);
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        border-radius: var(--boxel-border-radius-sm);
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      :global(.card-thumbnail-placeholder) {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        background-color: var(--accent, var(--boxel-highlight));
+      }
+      :global(.card-type-icon) {
+        aspect-ratio: 1 / 1;
+        min-width: 32px;
+        min-height: 32px;
+        max-height: 52px;
+        max-width: 52px;
+        width: 100%;
+        height: auto;
+      }
+      :global(.info-section) {
+        width: 100%;
+        overflow: hidden;
+      }
+      :global(.card-title) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        margin-block: 0;
+        font-weight: 500;
+        font-size: var(--boxel-body-font-size);
+        letter-spacing: var(--boxel-lsp-sm);
+        line-height: 1.25;
+        text-overflow: ellipsis;
+      }
+      :global(.card-display-name) {
+        margin-top: var(--boxel-sp-4xs);
+        margin-bottom: 0;
+        color: var(--muted-foreground, var(--boxel-450));
+        font-weight: 500;
+        font-size: var(--boxel-caption-font-size);
+        line-height: var(--boxel-caption-line-height);
+        letter-spacing: var(--boxel-lsp-xs);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      :global(.card-description) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-block: 0;
+        font-size: var(--boxel-caption-font-size);
+        line-height: var(--boxel-caption-line-height);
+        letter-spacing: var(--boxel-lsp-xs);
+        text-overflow: ellipsis;
+      }
+
+      /* Aspect Ratio <= 1.0 (Vertical) */
+      /* Common */
+      @container fitted-card ((aspect-ratio <= 1) and (height < 180px)) {
+        :global(.card-title) {
+          font-size: var(--boxel-caption-font-size);
+        }
+      }
+
+      @container fitted-card (aspect-ratio <= 1.0) {
+        :global(.fitted-template) {
+          flex-direction: column;
+        }
+        :global(.thumbnail-section) {
+          width: 100%;
+          height: 50cqmin;
+        }
+        :global(.info-section) {
+          text-align: center;
+        }
+      }
+
+      @container fitted-card (aspect-ratio <= 1.0) and (height <= 128px) {
+        :global(.thumbnail-section) {
+          height: 45cqmin;
+        }
+      }
+
+      @container fitted-card (aspect-ratio <= 1.0) and (width <= 140px) and (height <= 148px) {
+        :global(.card-description) {
+          display: none;
+        }
+      }
+
+      @container fitted-card (aspect-ratio <= 1.0) and (width <= 100px) and (400px <= height) {
+        :global(.card-description) {
+          -webkit-line-clamp: 15;
+        }
+      }
+
+      /* Vertical Tiles*/
+      /* Small Tile (150 x 170) */
+      @container fitted-card (aspect-ratio <= 1.0) and (150px <= width ) and (170px <= height) {
+        :global(.thumbnail-section) {
+          min-height: 70px;
+        }
+        :global(.card-title) {
+          -webkit-line-clamp: 2;
+        }
+        :global(.card-description) {
+          display: none;
+        }
+      }
+      /* CardsGrid Tile (170 x 250) */
+      @container fitted-card (aspect-ratio <= 1.0) and (width = 170px) and (height = 250px) {
+        :global(.thumbnail-section) {
+          height: auto;
+          aspect-ratio: 1 / 1;
+        }
+        :global(.card-title) {
+          -webkit-line-clamp: 2;
+        }
+      }
+      /* Tall Tile (150 x 275) */
+      @container fitted-card (aspect-ratio <= 1.0) and (150px <= width ) and (275px <= height) {
+        :global(.thumbnail-section) {
+          min-height: 85px;
+        }
+        :global(.card-title) {
+          font-size: var(--boxel-font-size-sm);
+          -webkit-line-clamp: 4;
+        }
+      }
+      /* Large Tile (250 x 275) */
+      @container fitted-card (aspect-ratio <= 1.0) and (250px <= width ) and (275px <= height) {
+        :global(.thumbnail-section) {
+          min-height: 150px;
+        }
+        :global(.card-title) {
+          font-size: var(--boxel-font-size-sm);
+          -webkit-line-clamp: 3;
+        }
+      }
+      /* Vertical Cards */
+      @container fitted-card (aspect-ratio <= 1.0) and (400px <= width) {
+        :global(.fitted-template) {
+          padding: var(--boxel-sp);
+          gap: var(--boxel-sp);
+        }
+        :global(.thumbnail-section) {
+          min-height: 236px;
+        }
+        :global(.card-title) {
+          font-size: var(--boxel-font-size);
+          -webkit-line-clamp: 4;
+        }
+      }
+      /* Expanded Card (400 x 445) */
+
+      /* 1.0 < Aspect Ratio (Horizontal) */
+      @container fitted-card (1.0 < aspect-ratio) {
+        :global(.card-description) {
+          display: none;
+        }
+        :global(.thumbnail-section) {
+          aspect-ratio: 1;
+        }
+      }
+      @container fitted-card (1.0 < aspect-ratio) and (height <= 65px) {
+        :global(.info-section) {
+          align-self: center;
+        }
+      }
+      /* Badges */
+      @container fitted-card (1.0 < aspect-ratio) and (width < 250px) {
+        :global(.fitted-template) {
+          padding: var(--boxel-sp-xxxs);
+        }
+        :global(.thumbnail-section) {
+          display: none;
+        }
+      }
+      /* Small Badge (150 x 40) */
+      @container fitted-card (1.0 < aspect-ratio) and (width < 250px) and (height < 65px) {
+        :global(.card-title) {
+          -webkit-line-clamp: 1;
+          font-weight: 500;
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+        }
+        :global(.card-display-name) {
+          margin-top: 0;
+        }
+      }
+      /* Medium Badge (150 x 65) */
+
+      /* Large Badge (150 x 105) */
+      @container fitted-card (1.0 < aspect-ratio) and (width < 250px) and (105px <= height) {
+        :global(.card-title) {
+          -webkit-line-clamp: 3;
+        }
+      }
+
+      /* Strips */
+      /* Single Strip (250 x 40) */
+      @container fitted-card (1.0 < aspect-ratio) and (250px <= width) and (height < 65px) {
+        :global(.fitted-template) {
+          padding: var(--boxel-sp-xxxs);
+        }
+        :global(.card-display-name) {
+          display: none;
+        }
+      }
+      /* Double Strip (250 x 65) */
+      /* Triple Strip (250 x 105) */
+      /* Double Wide Strip (400 x 65) */
+      /* Triple Wide Strip (400 x 105) */
+
+      /* Horizontal Tiles */
+      /* Regular Tile (250 x 170) */
+      @container fitted-card (1.0 < aspect-ratio) and (250px <= width < 400px) and (170px <= height) {
+        :global(.thumbnail-section) {
+          height: 40%;
+        }
+        :global(.card-title) {
+          -webkit-line-clamp: 4;
+          font-size: var(--boxel-font-size-sm);
+        }
+      }
+
+      /* Horizontal Cards */
+      /* Compact Card (400 x 170) */
+      @container fitted-card (1.0 < aspect-ratio) and (400px <= width) and (170px <= height) {
+        :global(.thumbnail-section) {
+          height: 100%;
+        }
+      }
+      /* Full Card (400 x 275) */
+      @container fitted-card (1.0 < aspect-ratio) and (400px <= width) and (275px <= height) {
+        :global(.fitted-template) {
+          padding: var(--boxel-sp);
+          gap: var(--boxel-sp);
+        }
+        :global(.thumbnail-section) {
+          max-width: 44%;
+        }
+        :global(.card-title) {
+          -webkit-line-clamp: 4;
+          font-size: var(--boxel-font-size);
+        }
+      }
+    }
+  </style>
+</template>;
+
+export default BasicFitted;