@emuanalytics/flow-rdf-ui 0.0.1 → 0.0.2

package/src/components/animation/animation.stories.ts

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
-import './animation';
-
-const meta: Meta = {
-  title: 'FlowAnimation',
-  component: 'flow-ui-alert',
-  argTypes: {
-    onClick: { action: 'onClick' },
-  },
-  render: (args, context) => {
-
-    console.log('context', context);
-
-    const mangledArgs: any  = {};
-
-    Object.keys(args).forEach((key) => {
-      const type = context.argTypes[key];
-      if (type.type?.name === 'boolean') {
-        mangledArgs[`?${key}`] = args[key];
-      } else {
-        mangledArgs[key] = args[key];
-      }
-    });
-
-    return html`<flow-ui-animation name="bounce" duration="2000" play><div class="box" style="width: 100px; height: 100px;background:red;"></div></flow-ui-animation>`
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Primary: Story = {
-  args: {
-    text: 'Primary',
-    variant: 'primary',
-    size: 'medium'
-  }
-};
-

package/src/components/animation/animation.styles.ts

@@ -1,10 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: contents;
-  }
-`;

package/src/components/animation/animation.test.ts

@@ -1,81 +0,0 @@
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import type FlowAnimation from './animation';
-
-describe('<flow-ui-animation>', () => {
-  const boxToAnimate = html`<div style="width: 10px; height: 10px;" data-testid="animated-box"></div>`;
-
-  it('renders', async () => {
-    const animationContainer = await fixture<FlowAnimation>(html`<flow-ui-animation>${boxToAnimate}</flow-ui-animation>`);
-
-    expect(animationContainer).to.exist;
-  });
-
-  it('is accessible', async () => {
-    const animationContainer = await fixture<FlowAnimation>(html`<flow-ui-animation>${boxToAnimate}</flow-ui-animation>`);
-
-    await expect(animationContainer).to.be.accessible();
-  });
-
-  describe('animation start', () => {
-    it('does not start the animation by default', async () => {
-      const animationContainer = await fixture<FlowAnimation>(
-        html`<flow-ui-animation name="bounce" easing="ease-in-out" duration="10">${boxToAnimate}</flow-ui-animation>`
-      );
-      await aTimeout(0);
-
-      expect(animationContainer.play).to.be.false;
-    });
-
-    it('emits the correct event on animation start', async () => {
-      const animationContainer = await fixture<FlowAnimation>(
-        html`<flow-ui-animation name="bounce" easing="ease-in-out" duration="10">${boxToAnimate}</flow-ui-animation>`
-      );
-
-      const startPromise = oneEvent(animationContainer, 'flow-ui-start');
-      animationContainer.play = true;
-      return startPromise;
-    });
-  });
-
-  it('emits the correct event on animation end', async () => {
-    const animationContainer = await fixture<FlowAnimation>(
-      html`<flow-ui-animation name="bounce" easing="ease-in-out" duration="1">${boxToAnimate}</flow-ui-animation>`
-    );
-
-    const endPromise = oneEvent(animationContainer, 'flow-ui-finish');
-    animationContainer.iterations = 1;
-    animationContainer.play = true;
-    return endPromise;
-  });
-
-  it('can be finished by hand', async () => {
-    const animationContainer = await fixture<FlowAnimation>(
-      html`<flow-ui-animation name="bounce" easing="ease-in-out" duration="1000">${boxToAnimate}</flow-ui-animation>`
-    );
-
-    const endPromise = oneEvent(animationContainer, 'flow-ui-finish');
-    animationContainer.iterations = 1;
-    animationContainer.play = true;
-
-    await aTimeout(0);
-
-    animationContainer.finish();
-    return endPromise;
-  });
-
-  it('can be cancelled', async () => {
-    const animationContainer = await fixture<FlowAnimation>(
-      html`<flow-ui-animation name="bounce" easing="ease-in-out" duration="1">${boxToAnimate}</flow-ui-animation>`
-    );
-    let animationHasFinished = false;
-    oneEvent(animationContainer, 'flow-ui-finish').then(() => (animationHasFinished = true));
-    const cancelPromise = oneEvent(animationContainer, 'flow-ui-cancel');
-    animationContainer.play = true;
-
-    await aTimeout(0);
-    animationContainer.cancel();
-
-    await cancelPromise;
-    expect(animationHasFinished).to.be.false;
-  });
-});

package/src/components/animation/animation.ts

@@ -1,229 +0,0 @@
-import type { CSSResultGroup } from 'lit';
-import { html } from 'lit';
-import { customElement, property, queryAsync } from 'lit/decorators.js';
-import FlowRdfElement from '../../internal/flow-ui-rdf-element';
-import { watch } from '../../internal/watch';
-import styles from './animation.styles';
-import { animations } from './animations';
-
-/**
- * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/animation
- * @status stable
- * @since 2.0
- *
- * @event flow-ui-cancel - Emitted when the animation is canceled.
- * @event flow-ui-finish - Emitted when the animation finishes.
- * @event flow-ui-start - Emitted when the animation starts or restarts.
- *
- * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To
- *  animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.
- */
-@customElement('flow-ui-animation')
-export default class FlowAnimation extends FlowRdfElement {
-  static styles: CSSResultGroup = styles;
-
-  private animation?: Animation;
-  private hasStarted = false;
-
-  @queryAsync('slot') defaultSlot: Promise<HTMLSlotElement>;
-
-  /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
-  @property() name = 'none';
-
-  /**
-   * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
-   * the animation finishes or gets canceled.
-   */
-  @property({ type: Boolean, reflect: true }) play = false;
-
-  /** The number of milliseconds to delay the start of the animation. */
-  @property({ type: Number }) delay = 0;
-
-  /**
-   * Determines the direction of playback as well as the behavior when reaching the end of an iteration.
-   * [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
-   */
-  @property() direction: PlaybackDirection = 'normal';
-
-  /** The number of milliseconds each iteration of the animation takes to complete. */
-  @property({ type: Number }) duration = 1000;
-
-  /**
-   * The easing function to use for the animation. This can be a Flo.w RDF UI easing function or a custom easing function
-   * such as `cubic-bezier(0, 1, .76, 1.14)`.
-   */
-  @property() easing = 'linear';
-
-  /** The number of milliseconds to delay after the active period of an animation sequence. */
-  @property({ attribute: 'end-delay', type: Number }) endDelay = 0;
-
-  /** Sets how the animation applies styles to its target before and after its execution. */
-  @property() fill: FillMode = 'auto';
-
-  /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
-  @property({ type: Number }) iterations = Infinity;
-
-  /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
-  @property({ attribute: 'iteration-start', type: Number }) iterationStart = 0;
-
-  /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
-  @property({ attribute: false }) keyframes?: Keyframe[];
-
-  /**
-   * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
-   * to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
-   * value can be changed without causing the animation to restart.
-   */
-  @property({ attribute: 'playback-rate', type: Number }) playbackRate = 1;
-
-  /** Gets and sets the current animation time. */
-  get currentTime(): number {
-    return this.animation?.currentTime ?? 0;
-  }
-
-  set currentTime(time: number) {
-    if (this.animation) {
-      this.animation.currentTime = time;
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.createAnimation();
-    this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
-    this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.destroyAnimation();
-  }
-
-  private handleAnimationFinish() {
-    this.play = false;
-    this.hasStarted = false;
-    this.emit('flow-ui-finish');
-  }
-
-  private handleAnimationCancel() {
-    this.play = false;
-    this.hasStarted = false;
-    this.emit('flow-ui-cancel');
-  }
-
-  private handleSlotChange() {
-    this.destroyAnimation();
-    this.createAnimation();
-  }
-
-  private async createAnimation() {
-    const easing = animations.easings[this.easing] ?? this.easing;
-    const keyframes = this.keyframes ?? (animations as unknown as Partial<Record<string, Keyframe[]>>)[this.name];
-    const slot = await this.defaultSlot;
-    const element = slot.assignedElements()[0] as HTMLElement | undefined;
-
-    if (!element || !keyframes) {
-      return false;
-    }
-
-    this.destroyAnimation();
-    this.animation = element.animate(keyframes, {
-      delay: this.delay,
-      direction: this.direction,
-      duration: this.duration,
-      easing,
-      endDelay: this.endDelay,
-      fill: this.fill,
-      iterationStart: this.iterationStart,
-      iterations: this.iterations
-    });
-    this.animation.playbackRate = this.playbackRate;
-    this.animation.addEventListener('cancel', this.handleAnimationCancel);
-    this.animation.addEventListener('finish', this.handleAnimationFinish);
-
-    if (this.play) {
-      this.hasStarted = true;
-      this.emit('flow-ui-start');
-    } else {
-      this.animation.pause();
-    }
-
-    return true;
-  }
-
-  private destroyAnimation() {
-    if (this.animation) {
-      this.animation.cancel();
-      this.animation.removeEventListener('cancel', this.handleAnimationCancel);
-      this.animation.removeEventListener('finish', this.handleAnimationFinish);
-      this.hasStarted = false;
-    }
-  }
-
-  @watch([
-    'name',
-    'delay',
-    'direction',
-    'duration',
-    'easing',
-    'endDelay',
-    'fill',
-    'iterations',
-    'iterationsStart',
-    'keyframes'
-  ])
-  handleAnimationChange() {
-    if (!this.hasUpdated) {
-      return;
-    }
-
-    this.createAnimation();
-  }
-
-  @watch('play')
-  handlePlayChange() {
-    if (this.animation) {
-      if (this.play && !this.hasStarted) {
-        this.hasStarted = true;
-        this.emit('flow-ui-start');
-      }
-
-      if (this.play) {
-        this.animation.play();
-      } else {
-        this.animation.pause();
-      }
-
-      return true;
-    }
-    return false;
-  }
-
-  @watch('playbackRate')
-  handlePlaybackRateChange() {
-    if (this.animation) {
-      this.animation.playbackRate = this.playbackRate;
-    }
-  }
-
-  /** Clears all keyframe effects caused by this animation and aborts its playback. */
-  cancel() {
-    this.animation?.cancel();
-  }
-
-  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
-  finish() {
-    this.animation?.finish();
-  }
-
-  render() {
-    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'flow-ui-animation': FlowAnimation;
-  }
-}

package/src/components/animation/animations.ts

@@ -1,15 +0,0 @@
-import * as animations from '@shoelace-style/animations';
-
-export { animations };
-
-/** Gets a list of all supported animation names. */
-export function getAnimationNames() {
-  return Object.entries(animations)
-    .filter(([name]) => name !== 'easings')
-    .map(([name]) => name);
-}
-
-/** Gets a list of all supported easing function names. */
-export function getEasingNames() {
-  return Object.entries(animations.easings).map(([name]) => name);
-}

package/src/components/animation/index.ts

@@ -1 +0,0 @@
-export { default as FlowAnimation } from './animation';

package/src/components/avatar/avatar.stories.ts

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
-import './avatar';
-
-const meta: Meta = {
-  title: 'FlowAvatar',
-  component: 'flow-ui-avatar',
-  argTypes: {
-    onClick: { action: 'onClick' },
-  },
-  render: (args, context) => {
-
-    console.log('context', context);
-
-    const mangledArgs: any  = {};
-
-    Object.keys(args).forEach((key) => {
-      const type = context.argTypes[key];
-      if (type.type?.name === 'boolean') {
-        mangledArgs[`?${key}`] = args[key];
-      } else {
-        mangledArgs[key] = args[key];
-      }
-    });
-
-    return html`<flow-ui-avatar></flow-ui-avatar>`
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Primary: Story = {
-  args: {
-    text: 'Primary',
-    variant: 'primary',
-    size: 'medium'
-  }
-};
-

package/src/components/avatar/avatar.styles.ts

@@ -1,68 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: inline-block;
-
-    --size: 3rem;
-  }
-
-  .avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: var(--size);
-    height: var(--size);
-    background-color: var(--flow-ui-color-neutral-400);
-    font-family: var(--flow-ui-font-sans);
-    font-size: calc(var(--size) * 0.5);
-    font-weight: var(--flow-ui-font-weight-normal);
-    color: var(--flow-ui-color-neutral-0);
-    user-select: none;
-    vertical-align: middle;
-  }
-
-  .avatar--circle,
-  .avatar--circle .avatar__image {
-    border-radius: var(--flow-ui-border-radius-circle);
-  }
-
-  .avatar--rounded,
-  .avatar--rounded .avatar__image {
-    border-radius: var(--flow-ui-border-radius-medium);
-  }
-
-  .avatar--square {
-    border-radius: 0;
-  }
-
-  .avatar__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .avatar__initials {
-    line-height: 1;
-    text-transform: uppercase;
-  }
-
-  .avatar__image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    overflow: hidden;
-  }
-`;

package/src/components/avatar/avatar.test.ts

@@ -1,175 +0,0 @@
-import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
-import type FlowAvatar from './avatar';
-
-// The default avatar background just misses AA contrast, but the next step up is way too dark. Since avatars aren't
-// used to display text, we're going to relax this rule.
-const ignoredRules = ['color-contrast'];
-
-describe('<flow-ui-avatar>', () => {
-  let el: FlowAvatar;
-
-  describe('when provided no parameters', () => {
-    before(async () => {
-      el = await fixture<FlowAvatar>(html` <flow-ui-avatar label="Avatar"></flow-ui-avatar> `);
-    });
-
-    it('should pass accessibility tests', async () => {
-      await expect(el).to.be.accessible({ ignoredRules });
-    });
-
-    it('should default to circle styling', () => {
-      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
-      expect(el.getAttribute('shape')).to.eq('circle');
-      expect(part.classList.value.trim()).to.eq('avatar avatar--circle');
-    });
-  });
-
-  describe('when provided an image and label parameter', () => {
-    const image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-    const label = 'Small transparent square';
-    before(async () => {
-      el = await fixture<FlowAvatar>(html`<flow-ui-avatar image="${image}" label="${label}"></flow-ui-avatar>`);
-    });
-
-    it('should pass accessibility tests', async () => {
-      /**
-       * The image element itself is ancillary, because it's parent container contains the
-       * aria-label which dictates what "flow-ui-avatar" is. This also implies that label text will
-       * resolve to "" when not provided and ignored by readers. This is why we use alt="" on
-       * the image element to pass accessibility.
-       * https://html.spec.whatwg.org/multipage/images.html#ancillary-images
-       */
-      await expect(el).to.be.accessible({ ignoredRules });
-    });
-
-    it('renders "image" part, with src and a role of presentation', () => {
-      const part = el.shadowRoot!.querySelector('[part~="image"]')!;
-
-      expect(part.getAttribute('src')).to.eq(image);
-    });
-
-    it('renders the label attribute in the "base" part', () => {
-      const part = el.shadowRoot!.querySelector('[part~="base"]')!;
-
-      expect(part.getAttribute('aria-label')).to.eq(label);
-    });
-  });
-
-  describe('when provided initials parameter', () => {
-    const initials = 'SL';
-    before(async () => {
-      el = await fixture<FlowAvatar>(html`<flow-ui-avatar initials="${initials}" label="Avatar"></flow-ui-avatar>`);
-    });
-
-    it('should pass accessibility tests', async () => {
-      await expect(el).to.be.accessible({ ignoredRules });
-    });
-
-    it('renders "initials" part, with initials as the text node', () => {
-      const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
-
-      expect(part.innerText).to.eq(initials);
-    });
-  });
-
-  describe('when image is present, the initials or icon part should not render', () => {
-    const initials = 'SL';
-    const image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-    const label = 'Small transparent square';
-    before(async () => {
-      el = await fixture<FlowAvatar>(
-        html`<flow-ui-avatar image="${image}" label="${label}" initials="${initials}"></flow-ui-avatar>`
-      );
-    });
-
-    it('should pass accessibility tests', async () => {
-      /**
-       * The image element itself is ancillary, because it's parent container contains the
-       * aria-label which dictates what "flow-ui-avatar" is. This also implies that label text will
-       * resolve to "" when not provided and ignored by readers. This is why we use alt="" on
-       * the image element to pass accessibility.
-       * https://html.spec.whatwg.org/multipage/images.html#ancillary-images
-       */
-      await expect(el).to.be.accessible({ ignoredRules });
-    });
-
-    it('renders "image" part, with src and a role of presentation', () => {
-      const part = el.shadowRoot!.querySelector('[part~="image"]')!;
-
-      expect(part.getAttribute('src')).to.eq(image);
-    });
-
-    it('should not render the initials part', () => {
-      const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
-
-      expect(part).to.not.exist;
-    });
-
-    it('should not render the icon part', () => {
-      const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=icon]')!;
-
-      expect(slot).to.not.exist;
-    });
-  });
-
-  ['square', 'rounded', 'circle'].forEach(shape => {
-    describe(`when passed a shape attribute ${shape}`, () => {
-      before(async () => {
-        el = await fixture<FlowAvatar>(html`<flow-ui-avatar shape="${shape}" label="Shaped avatar"></flow-ui-avatar>`);
-      });
-
-      it('should pass accessibility tests', async () => {
-        await expect(el).to.be.accessible({ ignoredRules });
-      });
-
-      it('appends the appropriate class on the "base" part', () => {
-        const part = el.shadowRoot!.querySelector('[part~="base"]')!;
-
-        expect(el.getAttribute('shape')).to.eq(shape);
-        expect(part.classList.value.trim()).to.eq(`avatar avatar--${shape}`);
-      });
-    });
-  });
-
-  describe('when passed a <span>, on slot "icon"', () => {
-    before(async () => {
-      el = await fixture<FlowAvatar>(html`<flow-ui-avatar label="Avatar"><span slot="icon">random content</span></flow-ui-avatar>`);
-    });
-
-    it('should pass accessibility tests', async () => {
-      await expect(el).to.be.accessible({ ignoredRules });
-    });
-
-    it('should accept as an assigned child in the shadow root', () => {
-      const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=icon]')!;
-      const childNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];
-
-      expect(childNodes.length).to.eq(1);
-
-      const span = childNodes[0];
-      expect(span.innerHTML).to.eq('random content');
-    });
-  });
-
-  it('should not render the image when the image fails to load', async () => {
-    el = await fixture<FlowAvatar>(html`<flow-ui-avatar></flow-ui-avatar>`);
-    el.image = 'bad_image';
-
-    await aTimeout(0);
-
-    await waitUntil(() => el.shadowRoot!.querySelector('img') === null);
-    expect(el.shadowRoot!.querySelector('img')).to.be.null;
-  });
-
-  it('should show a valid image after being passed an invalid image initially', async () => {
-    el = await fixture<FlowAvatar>(html`<flow-ui-avatar></flow-ui-avatar>`);
-
-    await aTimeout(0);
-    await waitUntil(() => el.shadowRoot!.querySelector('img') === null);
-
-    el.image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-    await el.updateComplete;
-
-    expect(el.shadowRoot?.querySelector('img')).to.exist;
-  });
-});