@descope-ui/descope-timer 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-03-11)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.9`
+* `@descope-ui/theme-globals` updated to version `0.0.9`
+* `@descope-ui/descope-icon` updated to version `0.0.4`
+# Changelog

package/e2e/descope-timer.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+import { createTimerTestDriver } from 'test-drivers';
+
+const componentAttributes = {
+  size: ['xs', 'sm', 'md', 'lg'],
+  'hide-icon': ['true', 'false'],
+  'full-width': ['true', 'false'],
+};
+
+const storyName = 'descope-timer';
+const componentName = 'descope-timer';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+        waitUntil: 'load',
+      });
+
+      const component = createTimerTestDriver(page.locator(componentName));
+      await component.pause();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  ['left', 'center', 'right'].forEach((alignment) => {
+    test(`text-align: ${alignment}`, async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, {
+          'text-align': alignment,
+          'full-width': 'true',
+        }),
+        { waitUntil: 'load' },
+      );
+
+      const component = createTimerTestDriver(page.locator(componentName));
+      await component.pause();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+});
+
+test.describe('logic', () => {
+  test(`reset time when finished`, async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { seconds: 10 }), {
+      waitUntil: 'load',
+    });
+
+    const component = createTimerTestDriver(page.locator(componentName));
+    await component.stop();
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  ['', '-1', '0', '1', '10', '100', '10000', '100000', '100000000'].forEach(
+    (seconds) => {
+      test(`time format: ${seconds || 'empty'} seconds`, async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { seconds }), {
+          waitUntil: 'load',
+        });
+
+        const component = createTimerTestDriver(page.locator(componentName));
+        await component.pause();
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+    },
+  );
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@descope-ui/descope-timer",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/TimerClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-drivers": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.9",
+    "@descope-ui/theme-globals": "0.0.9",
+    "@descope-ui/descope-icon": "0.0.4"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-timer",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-timer/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/TimerClass.js

@@ -0,0 +1,180 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { compose } from '@descope-ui/common/utils';
+import {
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import clockIcon from './clock.svg';
+import { IconClass } from '@descope-ui/descope-icon/class';
+import { formatTime } from './helpers';
+
+export const componentName = getComponentName('timer');
+
+const observedAttributes = ['seconds', 'hide-icon'];
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: ':host > .wrapper',
+});
+
+const DEFAULT_INTERVAL = 1000;
+
+class RawTimer extends BaseClass {
+  #timeRemains = 0;
+
+  #intervalId;
+
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseClass.observedAttributes || []);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <descope-icon src=${clockIcon} class="icon"></descope-icon>
+        <div class="timer"></div>
+      </div>
+		`;
+
+    injectStyle(
+      `
+      :host {
+        display: inline-flex;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+      .wrapper {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        width: 100%;
+      }
+      .hidden {
+        display: none;
+      }
+    `,
+      this,
+    );
+
+    this.icon = this.shadowRoot.querySelector('.icon');
+    this.timer = this.shadowRoot.querySelector('.timer');
+  }
+
+  get seconds() {
+    const val = this.getAttribute('seconds');
+    const secs = parseInt(val || 0, 10) * 1000;
+    return Math.max(0, secs);
+  }
+
+  init() {
+    super.init?.();
+
+    this.#timeRemains = this.seconds;
+  }
+
+  start() {
+    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));
+
+    this.startInterval();
+  }
+
+  startInterval() {    
+    const intervalCycle = () => {
+      this.#updateDisplay(this.#timeRemains);
+
+      if (!this.#timeRemains) {
+        this.stop();
+      } else {
+        this.#decreaseInterval();
+      }
+    }
+
+    intervalCycle();
+
+    if (this.#timeRemains) {
+      this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);
+    }
+  }
+
+  #decreaseInterval() {
+    this.#timeRemains = Math.max(this.#timeRemains - DEFAULT_INTERVAL, 0);
+  }
+
+  reset() {
+    this.#timeRemains = this.seconds;
+    this.start();
+  }
+
+  stop() {
+    this.pause();
+    this.#timeRemains = 0;
+    this.#updateDisplay(this.#timeRemains);
+    this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));
+  }
+
+  pause() {
+    clearInterval(this.#intervalId);
+  }
+
+  resume() {
+    this.startInterval();
+  }
+
+  #updateDisplay(val) {
+    this.timer.textContent = formatTime(val);
+  }
+
+  #toggleIcon(val) {
+    this.icon.classList.toggle('hidden', val === 'true');
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (newValue !== oldValue) {
+      if (attrName === 'seconds') {
+        this.reset();
+      }
+      if (attrName === 'hide-icon') {
+        this.#toggleIcon(newValue);
+      }
+    }
+  }
+}
+
+const { host, icon, timer } = {
+  host: { selector: () => ':host' },
+  icon: { selector: '.icon' },
+  timer: { selector: '.timer' },
+};
+
+export const TimerClass = compose(
+  createStyleMixin({
+    mappings: {
+      backgroundColor: {},
+      fontSize: [{}, { ...icon }],
+      iconSize: [
+        { ...icon, property: 'width' },
+        { ...icon, property: 'height' },
+      ],
+      fontFamily: {},
+      fontWeight: { ...timer },
+      lineHeight: { property: 'min-height' },
+      textColor: { ...timer, property: 'color' },
+      gap: {},
+      textAlign: { property: 'justify-content' },
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      iconColor: { ...icon, property: IconClass.cssVarList.fill },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawTimer);

package/src/component/clock.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 0C2.7 0 0 2.7 0 6C0 9.3 2.7 12 6 12C9.3 12 12 9.3 12 6C12 2.7 9.3 0 6 0ZM6 10.5C3.525 10.5 1.5 8.475 1.5 6C1.5 3.525 3.525 1.5 6 1.5C8.475 1.5 10.5 3.525 10.5 6C10.5 8.475 8.475 10.5 6 10.5Z" fill="#181A1C"/>
+  <path d="M6 2.25H5.25V6.75H9V6H6V2.25Z" fill="#181A1C"/>
+</svg>

package/src/component/helpers.js

@@ -0,0 +1,16 @@
+const fmt = (val, pad = 2) => String(val).padStart(pad, '0');
+
+export const formatTime = (ms = 0) => {
+  const totalSeconds = Math.floor(ms / 1000);
+
+  const secondsInMinute = 60;
+  const secondsInHour = secondsInMinute * 60;
+
+  const hours = Math.floor(totalSeconds / secondsInHour);
+  const minutes = Math.floor((totalSeconds % secondsInHour) / secondsInMinute);
+  const seconds = totalSeconds % secondsInMinute;
+
+  const timeParts = [...(hours ? [fmt(hours)] : []), fmt(minutes), fmt(seconds)];
+
+  return timeParts.join(':');
+};

package/src/component/index.js

@@ -0,0 +1,6 @@
+import { componentName, TimerClass } from './TimerClass';
+import '@descope-ui/descope-icon';
+
+customElements.define(componentName, TimerClass);
+
+export { TimerClass, componentName };

package/src/theme.js

@@ -0,0 +1,38 @@
+import globals from '@descope-ui/theme-globals';
+import { TimerClass } from './component/TimerClass';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+
+const globalRefs = getThemeRefs(globals);
+const vars = TimerClass.cssVarList;
+
+const timer = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.gap]: '0.25em',
+  [vars.fontFamily]: globalRefs.fonts.font1.family,
+  [vars.lineHeight]: '2em',
+  [vars.fontWeight]: globalRefs.fonts.font1.fontWeight,
+  [vars.textColor]: globalRefs.colors.surface.contrast,
+  [vars.iconColor]: globalRefs.colors.surface.contrast,
+  [vars.iconSize]: '1em',
+
+  size: {
+    xs: { [vars.fontSize]: '12px' },
+    sm: { [vars.fontSize]: '14px' },
+    md: { [vars.fontSize]: '16px' },
+    lg: { [vars.fontSize]: '18px' },
+  },
+
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default timer;
+
+export { vars };

package/stories/descope-timer.stories.js

@@ -0,0 +1,72 @@
+import { componentName } from '../src/component';
+import {
+  directionControl,
+  fullWidthControl,
+  sizeControl,
+  textAlignControl,
+} from '@descope-ui/common/sb-controls';
+
+const Template = ({
+  seconds,
+  size,
+  direction,
+  'hide-icon': hideIcon,
+  'full-width': fullWidth,
+  'text-align': textAlign,
+}) => `
+  <descope-timer
+    seconds="${seconds}"
+    size="${size}"
+    hide-icon="${hideIcon || false}"
+    full-width="${fullWidth}"
+    text-align="${textAlign}"
+    st-host-direction="${direction ?? ''}"
+  ></descope-timer>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-timer',
+  decorators: [
+    (story) => {
+      setTimeout(() => {
+        const component = document.querySelector('descope-timer');
+        component.addEventListener('timer-started', (e) =>
+          console.log('timer started', e.detail),
+        );
+        component.addEventListener('timer-ended', (e) =>
+          console.log('timer ended', e.detail),
+        );
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...directionControl,
+    ...fullWidthControl,
+    ...textAlignControl,
+    ...directionControl,
+    seconds: {
+      name: 'Seconds',
+      control: {
+        type: 'number',
+      },
+    },
+    'hide-icon': {
+      name: 'Hide Icon',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'sm',
+  direction: '',
+  seconds: 5,
+  'text-align': 'center',
+};