@descope-ui/descope-recovery-codes 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-06-29)
+
+### 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.15`
+* `@descope-ui/theme-globals` updated to version `0.0.15`
+* `@descope-ui/descope-text` updated to version `0.0.15`
+# Changelog

package/e2e/descope-recovery-codes.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+import createRecoveryCodesTestDriver from '../testDriver/recoveryCodesTestDriver';
+
+const componentAttributes = {
+  variant: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+  mode: ['primary', 'secondary', 'success', 'error'],
+  'text-align': ['left', 'center', 'right'],
+  'full-width': ['false', 'true'],
+  itemsSource: ['attr', 'prop'],
+};
+
+const storyName = 'descope-recovery-codes';
+const componentName = 'descope-recovery-codes';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { [attr]: value }));
+      const component = page.locator(componentName);
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test(`direction: rtl`, async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, { direction: 'rtl', text: '-Hello World' }),
+    );
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});
+
+test.describe('logic', () => {
+  test('copy to clipboard', async ({ page, browserName }) => {
+    test.skip(browserName !== 'chromium', 'test can run only in chromium');
+
+    await page.goto(getStoryUrl(storyName, { 'copy-to-clipboard': true }), {
+      waitUntil: 'networkidle',
+    });
+
+    const component = createRecoveryCodesTestDriver(page.locator(componentName));
+
+    // clear clipboard
+    await page.evaluate("navigator.clipboard.writeText('')");
+    expect(await component.screenshot()).toMatchSnapshot('before_clipboard.png');
+
+    await component.copyToClipboard();
+
+    const clipboardValue = await page.evaluate('navigator.clipboard.readText()');
+
+    expect(clipboardValue).toBe(`11111-11111\n11111-21111\n11111-31111\n11111-41111\n11111-51111\n11111-61111\n11111-71111\n11111-81111\n11111-91111`);
+    expect(await component.screenshot()).toMatchSnapshot('after_clipboard.png');
+  });
+});
+
+test.describe('presets', () => {
+  loopPresets({
+    'full width LTR': { 'full-width': 'true', direction: 'ltr', 'text-align': 'left' },
+    'full width RTL': { 'full-width': 'true', direction: 'rtl', 'text-align': 'right' },
+  }, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      await page.waitForSelector(componentName);
+      const component = page.locator(componentName);
+      expect(
+        await component.screenshot({ animations: 'disabled', timeout: 3000, caret: 'hide' })
+      ).toMatchSnapshot();
+    });
+  });
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@descope-ui/descope-recovery-codes",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/RecoveryCodesClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-drivers": "0.0.1"
+  },
+  "dependencies": {
+    "@vaadin/icon": "24.3.4",
+    "@vaadin/icons": "24.3.4",
+    "@descope-ui/common": "0.0.15",
+    "@descope-ui/theme-globals": "0.0.15",
+    "@descope-ui/descope-text": "0.0.15"
+  },
+  "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-recovery-codes",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-recovery-codes/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/RecoveryCodesClass.js

@@ -0,0 +1,145 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createDynamicDataMixin,
+} from '@descope-ui/common/components-mixins';
+import { compose } from '@descope-ui/common/utils';
+import {
+  forwardAttrs,
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { sortData } from './helpers';
+import { TextClass } from '@descope-ui/descope-text/class';
+
+export const componentName = getComponentName('recovery-codes');
+
+const itemRenderer = ({ value }, _, ref) => {
+  return `
+    <descope-text variant="${ref.variant}" mode="${ref.mode}">
+      <span>${value}</span>
+    </descope-text>
+  `;
+};
+
+class RawRecoveryCodes extends createBaseClass({
+  componentName,
+  baseSelector: ':host > div',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <div class="list"></div>
+        <descope-text class="icon-wrapper">
+          <vaadin-icon class="icon" icon="vaadin:copy-o" title="Copy"></vaadin-icon>
+        </descope-text>
+      </div>
+    `;
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      .wrapper {
+        display: flex;
+        justify-content: space-between;
+      }
+      .list {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+      }
+      descope-text span {
+        display: inline-flex;
+        align-items: center;
+        width: fit-content;
+      }
+      descope-text span::before {
+        content: '\\02022';
+        transform: translateY(-0.06em);
+      }
+      vaadin-icon {
+        cursor: pointer;
+      }
+      .copied {
+        cursor: initial;
+      }
+      .icon-wrapper {
+        align-self: flex-start;
+      }
+    `,
+      this,
+    );
+  }
+
+  get variant() {
+    return this.getAttribute('variant');
+  }
+
+  get mode() {
+    return this.getAttribute('mode');
+  }
+
+  init() {
+    super.init();
+
+    this.list = this.shadowRoot.querySelector('.list');
+    this.icon = this.shadowRoot.querySelector('.icon')
+    this.iconWrapper = this.shadowRoot.querySelector('.icon-wrapper')
+
+    this.icon.addEventListener('click', this.onCopy.bind(this));
+
+    forwardAttrs(this, this.iconWrapper, { includeAttrs: ['variant', 'mode'] });
+  }
+
+  onCopy() {
+    navigator.clipboard.writeText(
+      String(this.data.map((rc) => rc.value).join('\n')),
+    );
+
+    this.icon.setAttribute('icon', 'vaadin:check-circle-o');
+    this.icon.setAttribute('title', 'Copied');
+    this.icon.classList.add('copied');
+
+    setTimeout(() => {
+      this.icon.setAttribute('icon', 'vaadin:copy-o');
+      this.icon.setAttribute('title', 'Copy');
+      this.icon.classList.remove('copied');
+    }, 5000);
+  }
+}
+
+export const RecoveryCodesClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostMinWidth: { selector: () => ':host', property: 'min-width' },
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => TextClass.componentName,
+          property: TextClass.cssVarList.hostDirection
+        },
+      ],
+      textAlign: { selector: () => '.list', property: 'align-items' },
+      iconColor: { selector: () => 'vaadin-icon', property: 'color' },
+      iconSize: { selector: () => 'vaadin-icon', property: 'font-size' },
+      iconGap: { selector: () => '.wrapper', property: 'gap' },
+      bulletGap: { selector: () => 'descope-text span', property: 'gap' }
+    },
+  }),
+  createDynamicDataMixin({
+    itemRenderer,
+    rerenderAttrsList: ['variant', 'mode'],
+    targetSelector: '.list',
+    sortFn: sortData
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawRecoveryCodes);

package/src/component/helpers.js

@@ -0,0 +1 @@
+export const sortData = (a, b) => a.value.localeCompare(b.value)

package/src/component/index.js

@@ -0,0 +1,9 @@
+import '@descope-ui/descope-text';
+import '@vaadin/icons';
+import '@vaadin/icon';
+
+import { componentName, RecoveryCodesClass } from './RecoveryCodesClass';
+
+customElements.define(componentName, RecoveryCodesClass);
+
+export { RecoveryCodesClass, componentName };

package/src/theme.js

@@ -0,0 +1,30 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs, useVar } from '@descope-ui/common/theme-helpers';
+import { TextClass } from '@descope-ui/descope-text/class';
+import { RecoveryCodesClass } from './component/RecoveryCodesClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = RecoveryCodesClass.cssVarList;
+const textVars = TextClass.cssVarList;
+
+const recoveryCodes = {
+  [vars.hostMinWidth]: '190px',
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.iconColor]: useVar(textVars.textColor),
+  [vars.iconSize]: useVar(textVars.fontSize),
+  [vars.iconGap]: '8px',
+  [vars.bulletGap]: '0.35em',
+
+  textAlign: {
+    right: { [vars.textAlign]: 'flex-end' },
+    left: { [vars.textAlign]: 'flex-start' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default recoveryCodes;
+export { vars };

package/stories/descope-recovery-codes.stories.js

@@ -0,0 +1,92 @@
+import { componentName } from '../src/component';
+import {
+  textAlignControl,
+  modeControl,
+  fullWidthControl,
+  typographyVariantControl,
+  directionControl,
+} from '@descope-ui/common/sb-controls';
+
+const serializedData = [
+  { value: '11111-11111' },
+  { value: '11111-21111' },
+  { value: '11111-31111' },
+  { value: '11111-41111' },
+  { value: '11111-51111' },
+  { value: '11111-61111' },
+  { value: '11111-71111' },
+  { value: '11111-81111' },
+  { value: '11111-91111' },
+];
+
+const Template = ({
+  itemsSource,
+  variant,
+  mode,
+  'text-align': textAlign,
+  'full-width': fullWidth,
+  direction,
+}) => `
+    <descope-recovery-codes
+      data='${(itemsSource === 'attr' && serializedData) || ''}'
+      mode="${mode || ''}"
+      variant="${variant || ''}"
+      full-width="${fullWidth || false}"
+      text-align="${textAlign}"
+      st-host-direction="${direction ?? ''}"
+    ></descope-recovery-codes>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-recovery-codes',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const ele = document.querySelector('descope-recovery-codes');
+        if (!ele) return;
+
+        if (args.itemsSource === 'prop') {
+          ele.data = args.data;
+        }
+
+        if (args.itemsSource === 'attr') {
+          ele.setAttribute('data', JSON.stringify(args.data));
+        }
+      });
+
+      return story();
+    },
+  ],
+  argTypes: {
+    ...modeControl,
+    ...textAlignControl,
+    ...fullWidthControl,
+    ...typographyVariantControl,
+    ...directionControl,
+    itemsSource: {
+      name: 'Where to take the items from',
+      control: {
+        type: 'select',
+        labels: {
+          attr: '"data" attribute',
+          prop: '"data" property',
+        },
+      },
+      options: ['attr', 'prop'],
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  variant: 'body2',
+  mode: 'primary',
+  data: serializedData,
+  itemsSource: 'attr'
+};

package/testDriver/recoveryCodesTestDriver.ts

@@ -0,0 +1,14 @@
+import { Locator } from '@playwright/test';
+import { createComponentTestDriver } from 'test-drivers';
+
+const createRecoveryCodesTestDriver = (locator: Locator) => {
+  return {
+    ...createComponentTestDriver(locator),
+
+    async copyToClipboard() {
+      return locator.locator('vaadin-icon').click();
+    },
+  };
+};
+
+export default createRecoveryCodesTestDriver;