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

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

@@ -0,0 +1,223 @@
+import Captions from '@cardstack/boxel-icons/captions';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+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 FittedFormatSpec,
+  cn,
+  FITTED_FORMATS,
+  gt,
+  gte,
+} from '../../helpers.ts';
+import type { Icon } from '../../icons.ts';
+import CardContainer from '../card-container/index.gts';
+import BasicFitted from './index.gts';
+
+type Spec = Partial<FittedFormatSpec> & { height: number; width: number };
+
+const OTHER_SIZES: Spec[] = [
+  { width: 226, height: 226 },
+  { width: 164, height: 224 },
+  { width: 164, height: 180 },
+  { width: 140, height: 148 },
+  { width: 120, height: 128 },
+  { width: 100, height: 118 },
+  { width: 100, height: 400 },
+  { width: 151, height: 78 },
+  { width: 300, height: 151 },
+  { width: 300, height: 180 },
+  { width: 100, height: 29 },
+  { width: 150, height: 58 },
+  { width: 226, height: 58 },
+  { width: 300, height: 115 },
+];
+
+const calcRatio = ({ width, height }: Spec) => (width / height).toFixed(2);
+
+interface FittedItemContainerSignature {
+  Args: { spec: Spec };
+  Blocks: { default: [] };
+}
+
+const FittedItemContainer: TemplateOnlyComponent<FittedItemContainerSignature> =
+  <template>
+    <div
+      class={{cn
+        'item'
+        wide=(gt @spec.width 300)
+        full-width=(gte @spec.width 400)
+      }}
+    >
+      <div class='desc'>
+        <h4>{{@spec.title}} {{@spec.width}}px &times; {{@spec.height}}px</h4>
+        Aspect Ratio
+        {{calcRatio @spec}}
+      </div>
+
+      {{yield}}
+    </div>
+    <style scoped>
+      .card {
+        container-name: fitted-card;
+        container-type: size;
+        overflow: hidden;
+      }
+      .wide {
+        grid-column: span 2;
+      }
+      .full-width {
+        grid-column: -1 / 1;
+      }
+      .item {
+        position: relative;
+        padding-top: 50px;
+        padding-inline: var(--boxel-sp);
+        padding-bottom: var(--boxel-sp);
+        background-color: color-mix(
+          in oklab,
+          var(--background, var(--boxel-light)) 90%,
+          var(--foreground, var(--boxel-dark))
+        );
+      }
+      .desc {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: var(--boxel-sp-4xs);
+        background-color: var(--boxel-light);
+        border-left: var(--boxel-border-card);
+        border-right: var(--boxel-border-card);
+        border-bottom: var(--boxel-border-card);
+        color: var(--muted-foreground, var(--boxel-450));
+        font: var(--boxel-font-xs);
+      }
+      h4 {
+        margin: 0;
+        font-weight: 500;
+      }
+    </style>
+  </template>;
+
+interface PreviewTemplateSignature {
+  Args: { specs: { items: Spec[]; title: string }[] };
+  Blocks: { default: [spec: Spec] };
+}
+
+const FittedUsagePreview: TemplateOnlyComponent<PreviewTemplateSignature> =
+  <template>
+    <div class='scroller' tabindex='0'>
+      <h3>Standard Fitted Sizes</h3>
+      {{#each @specs as |specGroup|}}
+        <h3>{{specGroup.title}}</h3>
+        {{#each specGroup.items as |spec|}}
+          <FittedItemContainer @spec={{spec}}>
+            {{yield spec}}
+          </FittedItemContainer>
+        {{/each}}
+      {{/each}}
+    </div>
+    <style scoped>
+      .scroller {
+        max-height: 40vh;
+        overflow-y: scroll;
+        border: 1px solid var(--border, var(--boxel-200));
+        padding: 10px;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: var(--boxel-sp-xs);
+      }
+      h3 {
+        grid-column: -1 / 1;
+        font-weight: 500;
+      }
+    </style>
+  </template>;
+
+export default class BasicFittedUsage extends Component {
+  @tracked primary: string =
+    'Primary: Singularity’s Echo – A Mind-Bending Sci-Fi Masterpiece';
+  @tracked secondary: string = 'Secondary: Robert Fields';
+  @tracked description: string =
+    'Description: In an era hungry for originality, "Singularity’s Echo" emerges as a luminous beacon in the cosmic darkness—an audacious journey that redefines what viewers can expect from the genre. Directed by the elusive auteur Oruni Kilrain, this film harnesses the raw power of interstellar wonder and transforms it into a multilayered narrative tapestry. Blending heart-stirring drama with disorienting visuals, "Singularity’s Echo" reminds us that true cinematic frontiers remain ripe for exploration, stretching beyond the gravitational pull of safe storytelling.';
+  @tracked thumbnailURL: string =
+    'https://boxel-images.boxel.ai/app-assets/blog-posts/space-movie-thumb.jpeg';
+  iconComponent: Icon = Captions;
+  specs = [
+    ...FITTED_FORMATS.flatMap((format) => ({
+      title: format.name,
+      items: format.specs,
+    })),
+    {
+      title: 'More Sizes',
+      items: OTHER_SIZES,
+    },
+  ];
+
+  <template>
+    {{! template-lint-disable no-inline-styles style-concatenation }}
+    <FreestyleUsage @name='BasicFitted'>
+      <:description>
+        Designed to render well inside a CSS container with the following
+        properties specified:
+        <pre>
+          .sample-container-class {
+            container-name: fitted-card;
+            container-type: size;
+            width: /* ... */;
+            height: /* ... */;
+          }
+        </pre>
+      </:description>
+      <:example>
+        <FittedUsagePreview @specs={{this.specs}} as |spec|>
+          <CardContainer
+            @displayBoundaries={{true}}
+            style='container-name: fitted-card; container-type: size; width: {{spec.width}}px; height: {{spec.height}}px'
+          >
+            <BasicFitted
+              @primary={{this.primary}}
+              @secondary={{this.secondary}}
+              @description={{this.description}}
+              @thumbnailURL={{this.thumbnailURL}}
+              @iconComponent={{this.iconComponent}}
+            />
+          </CardContainer>
+        </FittedUsagePreview>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='primary'
+          @description='string to display as the primary text'
+          @value={{this.primary}}
+          @onInput={{fn (mut this.primary)}}
+        />
+        <Args.String
+          @name='secondary'
+          @description='string to display as the secondary text'
+          @value={{this.secondary}}
+          @onInput={{fn (mut this.secondary)}}
+        />
+        <Args.String
+          @name='description'
+          @description='string to display as the secondary text'
+          @value={{this.description}}
+          @onInput={{fn (mut this.description)}}
+        />
+        <Args.String
+          @name='thumbnailURL'
+          @description='URL of the thumbnail to display'
+          @value={{this.thumbnailURL}}
+          @onInput={{fn (mut this.thumbnailURL)}}
+        />
+        <Args.Component
+          @name='iconComponent'
+          @description='Component for the thumbnail icon'
+          @value={{this.iconComponent}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

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

@@ -0,0 +1,416 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { array, concat, hash } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+
+import { cn, eq, not, or, sanitizeHtml } from '../../helpers.ts';
+import LoadingIndicator from '../loading-indicator/index.gts';
+
+export type BoxelButtonKind =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'muted'
+  | 'destructive'
+  | 'danger' // deprecated, same as 'destructive'
+  | 'text-only'
+  | 'primary-dark'
+  | 'secondary-light'
+  | 'secondary-dark';
+
+export const buttonKindOptions: BoxelButtonKind[] = [
+  'default',
+  'primary',
+  'secondary',
+  'muted',
+  'destructive',
+  'text-only',
+  'primary-dark',
+  'secondary-light',
+  'secondary-dark',
+];
+
+export type BoxelButtonSize =
+  | 'auto'
+  | 'extra-small'
+  | 'small'
+  | 'base'
+  | 'tall'
+  | 'touch';
+
+export const buttonSizeOptions = [
+  'base',
+  'auto',
+  'extra-small',
+  'small',
+  'tall',
+  'touch',
+];
+
+interface Signature {
+  Args: {
+    as?: string;
+    class?: string;
+    disabled?: boolean;
+    href?: string;
+    kind?: BoxelButtonKind;
+    loading?: boolean;
+    models?: any;
+    query?: any;
+    rectangular?: boolean;
+    route?: any;
+    size?: BoxelButtonSize;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLButtonElement | HTMLAnchorElement;
+}
+const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
+  {{#let
+    (cn
+      'boxel-button'
+      @class
+      (concat 'size-' (if @size @size 'base'))
+      (concat 'kind-' (if @kind @kind 'default'))
+      loading=@loading
+      rectangular=@rectangular
+    )
+    as |classes|
+  }}
+    {{#if (or (not @as) (eq @as 'button'))}}
+      <button
+        class={{classes}}
+        aria-label={{if @loading 'loading'}}
+        aria-disabled={{@disabled}}
+        disabled={{@disabled}}
+        data-test-boxel-button
+        ...attributes
+      >
+        {{#if @loading}}
+          <LoadingIndicator
+            class='loading-indicator'
+            @color='var(--boxel-button-text-color)'
+            data-test-boxel-button-loading-indicator
+          />
+        {{/if}}
+        {{yield}}
+      </button>
+    {{else if (eq @as 'anchor')}}
+      <a
+        class={{classes}}
+        href={{unless @disabled (if @href (sanitizeHtml @href))}}
+        data-test-boxel-button
+        ...attributes
+      >
+        {{yield}}
+      </a>
+    {{else if (eq @as 'link-to')}}
+      <LinkTo
+        class={{classes}}
+        @route={{@route}}
+        @models={{if @models @models (array)}}
+        @query={{if @query @query (hash)}}
+        @disabled={{@disabled}}
+        data-test-boxel-button
+        tabindex={{if @disabled -1 0}}
+        ...attributes
+      >
+        {{yield}}
+      </LinkTo>
+    {{/if}}
+  {{/let}}
+  <style scoped>
+    @layer boxelComponentL1 {
+      /* Button */
+      .boxel-button {
+        --boxel-loading-indicator-size: var(
+          --boxel-button-loading-icon-size,
+          var(--boxel-icon-xs)
+        );
+
+        display: inline-flex;
+        justify-content: center;
+        height: min-content;
+        align-items: center;
+        border-radius: var(
+          --boxel-button-border-radius,
+          var(--radius, var(--boxel-border-radius))
+        );
+        transition: var(
+          --boxel-button-transition,
+          var(--boxel-transition-properties)
+        );
+
+        /* kind variants + disabled state */
+        border: var(--boxel-button-border, none);
+        color: var(--boxel-button-text-color);
+        background-color: var(--boxel-button-color);
+
+        /* size variants */
+        font: var(--boxel-button-font, 700 var(--boxel-font-sm));
+        font-family: inherit;
+        min-height: var(--boxel-button-min-height);
+        min-width: var(--boxel-button-min-width);
+        padding: var(--boxel-button-padding);
+        letter-spacing: var(--boxel-button-letter-spacing, var(--boxel-lsp));
+        box-shadow: var(--boxel-button-box-shadow);
+      }
+      .boxel-button:not(.rectangular) {
+        border-radius: var(--boxel-button-border-radius, 100px);
+      }
+      .boxel-button:not(:disabled):hover {
+        background-color: color-mix(
+          in oklab,
+          var(--boxel-button-color) 90%,
+          transparent
+        );
+      }
+      .boxel-button:focus-visible {
+        outline-color: var(--ring, var(--boxel-highlight));
+        outline-offset: 2px;
+      }
+
+      .loading-indicator {
+        margin-right: var(
+          --boxel-button-loading-indicator-gap,
+          var(--boxel-sp-xxs)
+        );
+      }
+
+      /* select disabled buttons and links that don't have href */
+
+      /*
+        a.disabled-link is a special case for an automatically appended class by the LinkTo component
+        the LinkTo component appends the href regardless, so we have to select it in other ways.
+        Removing the chained classes will make kind-variants overwrite the disabled style on the LinkTo (specificity issues)
+      */
+      .boxel-button:disabled,
+      a.boxel-button:not([href]),
+      a.boxel-button[href=''],
+      a.boxel-button.disabled-link {
+        --boxel-button-color: var(--boxel-border-color);
+        --boxel-button-border: 1px solid var(--boxel-button-color);
+        --boxel-button-text-color: var(--boxel-450);
+        --boxel-button-box-shadow: none;
+
+        cursor: default;
+      }
+
+      /* the a element does not have a disabled attribute. Clicking will still trigger event listeners */
+      a.boxel-button:not([href]),
+      a.boxel-button[href=''],
+      a.boxel-button.disabled-link {
+        pointer-events: none;
+      }
+
+      /*
+        loading state.
+        this should only be relevant for buttons - links shouldn't need it.
+        We want to preserve the "normal" styling of the button but not allow interaction
+      */
+      .loading {
+        pointer-events: none;
+      }
+
+      /* overwrite the global style for links in global.css */
+      a.boxel-button:hover {
+        color: var(--boxel-button-text-color);
+      }
+
+      /**
+      * Kind variants - variants that control the colors on a button
+      *
+      * The @kind argument on the button component should create a corresponding class with format
+      * kind-@kind
+      *
+      * Classes for the @kind argument can control the following properties:
+      *
+      * --boxel-button-color (css "background-color" property)
+      * --boxel-button-border (css shorthand "border" property)
+      * --boxel-button-text-color (css "color" property)
+      *
+      */
+      .kind-default {
+        --boxel-button-color: var(--background, var(--boxel-light));
+        --boxel-button-text-color: var(--foreground, var(--boxel-dark));
+        --boxel-button-border: 1px solid var(--border, var(--boxel-400));
+      }
+      .kind-default:not(:disabled):hover,
+      .kind-default:not(:disabled):active {
+        --boxel-button-color: var(--accent, var(--boxel-light));
+        --boxel-button-text-color: var(--accent-foreground, var(--boxel-dark));
+        --boxel-button-border: 1px solid var(--border, var(--boxel-dark));
+      }
+
+      .kind-primary {
+        --boxel-button-color: var(--primary, var(--boxel-highlight));
+        --boxel-button-text-color: var(--primary-foreground, var(--boxel-dark));
+      }
+      .kind-primary:not(:disabled):hover,
+      .kind-primary:not(:disabled):active {
+        --boxel-button-color: var(--primary, var(--boxel-highlight-hover));
+      }
+
+      .kind-secondary {
+        --boxel-button-color: var(--secondary, var(--boxel-light));
+        --boxel-button-text-color: var(
+          --secondary-foreground,
+          var(--boxel-dark)
+        );
+        --boxel-button-border: 1px solid
+          var(--secondary, var(--boxel-button-border-color));
+      }
+      .kind-secondary:not(:disabled):hover,
+      .kind-secondary:not(:disabled):active {
+        --boxel-button-border: 1px solid var(--secondary, var(--boxel-dark));
+      }
+
+      .kind-muted {
+        --boxel-button-color: var(--muted, var(--boxel-100));
+        --boxel-button-text-color: var(--muted-foreground, var(--boxel-dark));
+      }
+      .kind-muted:not(:disabled):hover {
+        background-color: color-mix(
+          in oklab,
+          var(--muted, var(--boxel-100)) 96%,
+          var(--muted-foreground, var(--boxel-dark))
+        );
+      }
+
+      .kind-destructive,
+      .kind-danger {
+        --boxel-button-color: var(--destructive, var(--boxel-danger));
+        --boxel-button-text-color: var(
+          --destructive-foreground,
+          var(--boxel-light-100)
+        );
+      }
+      .kind-destructive:not(:disabled):hover,
+      .kind-destructive:not(:disabled):active,
+      .kind-danger:not(:disabled):hover,
+      .kind-danger:not(:disabled):active {
+        --boxel-button-color: var(--destructive, var(--boxel-danger-hover));
+      }
+
+      .kind-text-only {
+        /* transparent background and border */
+        --boxel-button-color: transparent;
+        --boxel-button-text-color: inherit;
+      }
+      .kind-text-only:not(:disabled):hover,
+      .kind-text-only:not(:disabled):active {
+        --boxel-button-color: var(
+          --accent,
+          color-mix(in oklab, currentColor 10%, transparent)
+        );
+        --boxel-button-text-color: var(--accent-foreground, currentColor);
+      }
+
+      .kind-primary-dark {
+        /* inverted background and foreground */
+        --boxel-button-color: var(--foreground, var(--boxel-dark));
+        --boxel-button-text-color: var(--background, var(--boxel-light));
+      }
+      .kind-primary-dark:not(:disabled):hover,
+      .kind-primary-dark:not(:disabled):active {
+        --boxel-button-color: color-mix(
+          in oklab,
+          var(--foreground, var(--boxel-dark)) 85%,
+          transparent
+        );
+      }
+
+      .kind-secondary-light {
+        /* transparent on light background */
+        --boxel-button-color: transparent;
+        --boxel-button-text-color: var(--foreground, var(--boxel-dark));
+        --boxel-button-border: 1px solid
+          var(--border, var(--boxel-button-border-color));
+      }
+      .kind-secondary-dark {
+        /* transparent on dark background */
+        --boxel-button-color: transparent;
+        --boxel-button-text-color: var(--background, var(--boxel-light));
+        --boxel-button-border: 1px solid
+          var(--border, var(--boxel-button-border-color));
+      }
+      .kind-secondary-light:not(:disabled):hover,
+      .kind-secondary-light:not(:disabled):active,
+      .kind-secondary-dark:not(:disabled):hover,
+      .kind-secondary-dark:not(:disabled):active {
+        --boxel-button-border: 1px solid var(--boxel-button-text-color);
+      }
+
+      /**
+      * Size variants - variants that control the size and spacing of a button
+      *
+      * The @size argument on the button component should create a corresponding class with format
+      * size-@size
+      *
+      * Classes for the @size argument can control the following properties:
+      *
+      * --boxel-button-padding
+      * --boxel-button-min-width
+      * --boxel-button-min-height
+      * --boxel-button-font
+      * --boxel-button-letter-spacing
+      * --boxel-loading-indicator-size
+      *
+      */
+
+      .size-extra-small {
+        --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
+        --boxel-button-min-height: var(--boxel-button-xs);
+        --boxel-button-min-width: 5rem;
+        --boxel-button-loading-icon-size: var(--boxel-icon-2xs);
+        --boxel-button-font: 700 var(--boxel-font-xs);
+        --boxel-button-letter-spacing: var(--boxel-lsp-lg);
+      }
+      .size-extra-small.rectangular {
+        border-radius: var(--boxel-border-radius-sm);
+      }
+
+      .size-small {
+        --boxel-button-padding: var(--boxel-sp-4xs) var(--boxel-sp-sm);
+        --boxel-button-min-height: var(--boxel-button-sm);
+        --boxel-button-min-width: 5rem;
+      }
+      .size-small.rectangular {
+        border-radius: var(--boxel-border-radius-sm);
+      }
+
+      .size-base {
+        --boxel-button-padding: var(--boxel-sp-4xs) var(--boxel-sp-xl);
+        --boxel-button-min-height: var(--boxel-button-sm);
+        --boxel-button-min-width: 5rem;
+      }
+
+      /* tall but thinner button */
+      .size-tall {
+        --boxel-button-padding: var(--boxel-sp-xxs) var(--boxel-sp-lg);
+        --boxel-button-min-height: var(--boxel-button-tall);
+        --boxel-button-min-width: 5rem;
+      }
+
+      /*
+        extra tall button mainly used in mobile screens
+        touchable as it's bigger
+        */
+      .size-touch {
+        --boxel-button-padding: var(--boxel-sp-xs) var(--boxel-sp-lg);
+        --boxel-button-min-height: var(--boxel-button-touch);
+        --boxel-button-min-width: 5rem;
+        --boxel-button-loading-icon-size: var(--boxel-icon-sm);
+        --boxel-button-font: 700 var(--boxel-font);
+        --boxel-button-letter-spacing: var(--boxel-lsp-xs);
+      }
+
+      /* auto size properties & smallest padding size */
+      .size-auto {
+        --boxel-button-padding: 2px;
+      }
+    }
+  </style>
+</template>;
+
+export default ButtonComponent;