@descope/web-components-ui 3.5.0 → 3.6.0

package/stories/descope-date-field.stories.js

@@ -0,0 +1,169 @@
+import { componentName } from '../src/components/descope-date-field';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  inputLabelTypeControl,
+  errorRangeUnderflowControl,
+  errorRangeOverflowControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+  defaultPatternMismatchControl,
+} from './commonControls';
+import {
+  toggleDefaultErrorMessageValueMissingDecorator,
+  toggleDefaultErrorMessagePatternMismatchDecorator,
+} from './helpers';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  required,
+  disabled,
+  readonly,
+  format,
+  preview,
+  'disable-calendar': disableCalendar,
+  'years-range': yearsRange,
+  'initial-value': initialValue,
+  'initial-month': initialMonth,
+  'initial-year': initialYear,
+  'full-width': fullWidth,
+  'label-type': labelType,
+  'data-errormessage-value-missing': customErrorMessage,
+  'data-errormessage-pattern-mismatch': customErrorMessagePatternMismatch,
+  'data-errormessage-range-underflow': customErrorRangeUnderflowMessage,
+  'data-errormessage-range-overflow': customErrorRangeOverflowMessage,
+  'calendar-months': dataMonths,
+  'calendar-weekdays': dataWeekdays,
+  'calendar-label-today': dataLabelToday,
+  'calendar-label-submit': dataLabelCalendarSubmit,
+  'calendar-label-cancel': dataLabelCalendarCancel,
+  'utc-time': utcTime,
+  errorMsgIcon,
+}) => `
+      <descope-date-field
+        size="${size}"
+        bordered="${bordered}"
+        label="${label || ''}"
+        label-type="${labelType || ''}"
+        disabled="${disabled || false}"
+        placeholder="${placeholder || ''}"
+        readonly="${readonly || false}"
+        required="${required || false}"
+        full-width="${fullWidth || false}"
+        st-host-direction="${direction ?? ''}"
+        format="${format || ''}"
+        initial-value="${initialValue || ''}"
+        initial-month="${initialMonth || ''}"
+        initial-year="${initialYear || ''}"
+        preview="${preview || ''}"
+        years-range="${yearsRange || ''}"
+        disable-calendar="${disableCalendar || false}"
+        calendar-months="${dataMonths || ''}"
+        calendar-weekdays="${dataWeekdays || ''}"
+        calendar-label-today="${dataLabelToday || ''}"
+        calendar-label-submit="${dataLabelCalendarSubmit || ''}"
+        calendar-label-cancel="${dataLabelCalendarCancel || ''}"
+        data-errormessage-value-missing="${customErrorMessage || ''}"
+        data-errormessage-pattern-range-underflow="${customErrorRangeUnderflowMessage || ''}"
+        data-errormessage-pattern-range-overflow="${customErrorRangeOverflowMessage || ''}"
+        utc-time="${utcTime || false}"
+        ${errorMsgIcon ? errorMessageIconAttrs : ''}
+      ></descope-date-field>
+      <button id="validate">Validate</button>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-date-field',
+  decorators: [
+    (story) => {
+      setTimeout(() => {
+        const button = document.querySelector('#validate');
+        const ele = document.querySelector('descope-date-field');
+        button.onclick = () => {
+          ele.reportValidity();
+        };
+      });
+      return story();
+    },
+    toggleDefaultErrorMessageValueMissingDecorator,
+    toggleDefaultErrorMessagePatternMismatchDecorator,
+  ],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...errorRangeUnderflowControl,
+    ...errorRangeOverflowControl,
+    ...directionControl,
+    ...defaultValueMissingControl,
+    ...defaultPatternMismatchControl,
+    format: {
+      name: 'Date Format',
+      options: ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'],
+      control: { type: 'select' },
+    },
+    'initial-value': {
+      name: 'Initial Value',
+      control: { type: 'text' },
+    },
+    'initial-year': {
+      name: 'Initial Year',
+      control: { type: 'number' },
+    },
+    'initial-month': {
+      name: 'Initial Month',
+      control: { type: 'number' },
+    },
+    preview: {
+      name: 'Preview Date',
+      control: { type: 'text' },
+    },
+    'years-range': {
+      name: 'Years Range',
+      control: { type: 'text' },
+    },
+    'calendar-months': {
+      name: 'Custom Months',
+      control: { type: 'text' },
+    },
+    'calendar-weekdays': {
+      name: 'Custom Weekdays',
+      control: { type: 'text' },
+    },
+    'disable-calendar': {
+      control: { type: 'boolean' },
+    },
+    'utc-time': {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  bordered: true,
+  size: 'md',
+  'data-errormessage-value-missing': 'Please fill out this field.',
+  'initial-value': '',
+};

package/stories/descope-divider.stories.js

@@ -0,0 +1,43 @@
+import { componentName } from '../src/components/descope-divider';
+import { directionControl, modeControl, typographyVariantControl } from './commonControls';
+
+const Template = ({ variant, uppercase, mode, text, vertical, italic, direction }) => `
+  <descope-divider
+    variant="${variant || ''}"
+    mode="${mode || ''}"
+    uppercase="${uppercase || ''}"
+    vertical="${vertical || ''}"
+    italic="${italic || ''}"
+    st-host-direction="${direction ?? ''}"
+  >${text || ''}</descope-divider
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-divider',
+  argTypes: {
+    ...modeControl,
+    ...typographyVariantControl,
+    ...directionControl,
+    uppercase: {
+      name: 'Uppercase',
+      control: { type: 'boolean' },
+    },
+    vertical: {
+      name: 'Vertical',
+      control: { type: 'boolean' },
+    },
+    italic: {
+      name: 'Italic',
+      control: { type: 'boolean' },
+    },
+    text: {
+      name: 'Text',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};

package/stories/descope-email-field.stories.js

@@ -0,0 +1,109 @@
+import { componentName } from '../src/components/descope-email-field';
+import {
+  toggleDefaultErrorMessagePatternMismatchDecorator,
+  toggleDefaultErrorMessageValueMissingDecorator,
+  withForm,
+} from './helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  errorPatternMismatchControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+  defaultPatternMismatchControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  disabled,
+  required,
+  'full-width': fullWidth,
+  readonly,
+  'external-input': externalInput,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
+  'label-type': labelType,
+  errorMsgIcon,
+}) => `
+    <descope-email-field
+      size="${size}"
+      bordered="${bordered}"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      disabled="${disabled || false}"
+      required="${required || false}"
+      readonly="${readonly || false}"
+      full-width="${fullWidth || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
+      st-host-direction="${direction ?? ''}"
+      label-type="${labelType || ''}"
+      external-input="${externalInput || false}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-email-field>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-email-field',
+  decorators: [
+    (story, { args }) => {
+      args.validateOnBlur &&
+        setTimeout(() => {
+          document.querySelector('descope-email-field').addEventListener('blur', (e) => {
+            e.target.setAttribute('invalid', 'true');
+          });
+        });
+
+      return story();
+    },
+    toggleDefaultErrorMessageValueMissingDecorator,
+    toggleDefaultErrorMessagePatternMismatchDecorator,
+    withForm,
+  ],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...errorPatternMismatchControl,
+    ...errorPatternMismatchControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    ...defaultPatternMismatchControl,
+    'external-input': {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  validateOnBlur: false,
+  'data-errormessage-value-missing': 'Please fill out this field.',
+  'data-errormessage-pattern-mismatch': 'Please match the requested format.',
+};

package/stories/descope-grid.stories.js

@@ -0,0 +1,218 @@
+import { componentName } from '../src/components/descope-grid';
+import {
+  borderedControl,
+  sizeControl,
+  overrideRenderItemControl,
+  directionControl,
+} from './commonControls';
+
+const userStatuses = ['active', 'disabled', 'invited'];
+
+const xml = `
+<Response xmlns="urn:oasis:names:tc:SAML:2.0:protocol" ID="111" InResponseTo="b6aa8" Destination="https://api.descope.org/v1/auth/saml/acs?projectId=123&amp;tenantId=456" Version="2.0" IssueInstant="2024-09-03T08:19:40.649Z">
+  <Assertion xmlns="urn:oasis:names:tc:SAML:2.0:assertion" Version="2.0" ID="222" IssueInstant="2024-09-03T08:19:40.649Z">
+    <AttributeStatement xmlns="urn:oasis:names:tc:SAML:2.0:assertion">
+      <Attribute xmlns="urn:oasis:names:tc:SAML:2.0:assertion" FriendlyName="" Name="email" NameFormat="">
+        <AttributeValue xmlns="urn:oasis:names:tc:SAML:2.0:assertion" xsi:type="">xxx@descope.com</AttributeValue>
+      </Attribute>
+      <Attribute xmlns="urn:oasis:names:tc:SAML:2.0:assertion" FriendlyName="" Name="Groups" NameFormat="">
+        <AttributeValue xmlns="urn:oasis:names:tc:SAML:2.0:assertion" xsi:type="">aws-sandbox</AttributeValue>
+        <AttributeValue xmlns="urn:oasis:names:tc:SAML:2.0:assertion" xsi:type="">dev</AttributeValue>
+      </Attribute>
+    </AttributeStatement>
+  </Assertion>
+</Response>
+`;
+
+const mockUserData = (n) =>
+  Array(n)
+    .fill()
+    .map((_, idx) => ({
+      loginId: `login${idx}@company.com`,
+      email: `email${idx}@company.com`,
+      phone: `+1-${idx}-12345`,
+      displayName: `Joe #${idx}`,
+      userTenants: [
+        {
+          tenantId: `${idx}`,
+          roleNames: ['TestRole'],
+        },
+      ],
+      customAttributes: {
+        attribute1: `${idx}A`,
+        attribute2: `${idx}B`,
+      },
+      xml,
+      picture: `https://dummyimage.com/50x50/000/fff`,
+      verifiedEmail: true,
+      verifiedPhone: true,
+      test: false,
+      status: userStatuses[idx % 3],
+    }));
+
+const altRenderColumn = ({ path, header, type, attrs = {} }) => {
+  const colAttrs = Object.entries(attrs)
+    .map((pair) => `${pair[0]}="${pair[1] || ''}"`)
+    .join(' ');
+
+  return `<descope-grid-${type}-column path="${path}" header="${header} (custom)" ${colAttrs}></descope-grid-${type}-column>`;
+};
+
+const columnsData = [
+  {
+    path: '',
+    header: '',
+    type: 'selection',
+    attrs: { frozen: 'true', 'auto-width': '' },
+  },
+  {
+    path: 'loginId',
+    header: 'Login ID',
+    type: 'text',
+    attrs: { resizable: '', 'auto-width': '' },
+  },
+  {
+    path: 'status',
+    header: 'Status',
+    type: 'custom',
+    attrs: { resizable: '', 'auto-width': '', status: 'Active,Inactive' },
+  },
+  {
+    path: 'displayName',
+    header: 'Name',
+    type: 'text',
+    attrs: { resizable: '', 'auto-width': '' },
+  },
+  {
+    path: 'email',
+    header: 'Email',
+    type: 'text',
+    attrs: { resizable: '', 'auto-width': '' },
+  },
+  {
+    path: 'phone',
+    header: 'Phone',
+    type: 'text',
+    attrs: { resizable: '', 'auto-width': '' },
+  },
+  {
+    path: '',
+    header: '',
+    type: 'item-details',
+    attrs: { 'frozen-to-end': 'true', 'auto-width': '' },
+  },
+];
+
+const Template = ({ data, bordered, size, columnsSyncProp, containerHeight, direction }) => {
+  let serializedData;
+
+  try {
+    serializedData = JSON.stringify(data);
+  } catch (e) {
+    // do nothing
+  }
+
+  const columnsTemplate = `
+    <descope-grid-selection-column frozen auto-width></descope-grid-selection-column>
+    <descope-grid-text-column path="loginId" header="Login ID" resizable auto-width></descope-grid-text-column>
+    <descope-grid-custom-column sortable="true" path="status" header="Status" resizable>
+      <descope-badge mode="default" data-pattern="invited" bordered="true" size="xs" st-text-transform="capitalize"></descope-badge>
+      <descope-badge mode="primary" data-pattern="active" bordered="true" size="xs" st-text-transform="capitalize"></descope-badge>
+      <descope-badge mode="error" data-pattern="disabled" bordered="true" size="xs" st-text-transform="capitalize"></descope-badge>
+    </descope-grid-custom-column>
+    <descope-grid-text-column sortable="true" path="displayName" header="Name" resizable auto-width></descope-grid-text-column>
+    <descope-grid-text-column sortable="true" path="email" header="Email" resizable auto-width></descope-grid-text-column>
+    <descope-grid-text-column sortable="true" path="phone" header="Phone" resizable auto-width></descope-grid-text-column>
+    <descope-grid-item-details-column auto-width frozen-to-end></descope-grid-item-details-column>
+  `;
+
+  return `
+    <style nonce=${window.DESCOPE_NONCE}>
+      .wrapper {
+        height: ${containerHeight};
+      }
+    </style>
+    <div class="wrapper">
+      <descope-grid
+        st-host-direction="${direction ?? ''}"
+        bordered="${bordered}"
+        size="${size}"
+        columns='${columnsSyncProp === 'attribute' ? JSON.stringify(columnsData) : ''}'
+        column-reordering-allowed
+        identifier="loginId"
+      >
+        ${columnsSyncProp === 'template' ? columnsTemplate : ''}
+      </descope-grid>
+    </div>
+  `;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-grid',
+  decorators: [
+    (story, { args }) => {
+      const observer = new MutationObserver(() => {
+        const ele = document.querySelector('descope-grid');
+        if (!ele) return;
+
+        observer.disconnect();
+
+        if (args.overrideRenderItem) {
+          ele.renderColumn = altRenderColumn;
+        }
+
+        if (args.itemsSyncProp === 'propSync') {
+          ele.data = args.data;
+        } else {
+          setTimeout(() => {
+            ele.data = args.data;
+          }, 500);
+        }
+
+        if (args.columnsSyncProp === 'propSync') {
+          ele.columns = columnsData;
+        } else if (args.columnsSyncProp === 'propAsync') {
+          setTimeout(() => {
+            ele.columns = columnsData;
+          }, 500);
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+
+      return story();
+    },
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...borderedControl,
+    ...overrideRenderItemControl,
+    ...directionControl,
+    columnsSyncProp: {
+      name: 'Columns Source',
+      options: ['none', 'attribute', 'template', 'propSync', 'propAsync'],
+      control: { type: 'select' },
+    },
+    itemsSyncProp: {
+      name: 'Items Source',
+      options: ['propSync', 'propAsync'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  itemsSyncProp: 'propSync',
+  columnsSyncProp: 'template',
+  overrideRenderItem: false,
+  containerHeight: '400px',
+  bordered: true,
+  data: mockUserData(25),
+};

package/stories/descope-hcaptcha.stories.js

@@ -0,0 +1,29 @@
+import { componentName } from '../src/components/descope-hcaptcha';
+import { sizeControl, directionControl } from './commonControls';
+
+const Template = ({ size, direction }) => `
+  <descope-hcaptcha
+    size="${size}"
+    st-host-direction="${direction ?? ''}"
+  >
+  </descope-hcaptcha>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-hcaptcha',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...sizeControl,
+    ...directionControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+};