@descope-ui/descope-outbound-apps 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-07-21)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.18`
+* `@descope-ui/theme-globals` updated to version `0.0.19`
+* `@descope-ui/descope-list` updated to version `0.0.1`
+* `@descope-ui/descope-list-item` updated to version `0.0.1`
+* `@descope-ui/descope-text` updated to version `0.0.19`
+* `@descope-ui/descope-avatar` updated to version `0.0.19`
+* `@descope-ui/descope-icon` updated to version `0.0.17`
+* `@descope-ui/descope-button` updated to version `0.0.18`
+# Changelog

package/e2e/descope-outbound-apps.spec.ts

@@ -0,0 +1,82 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  direction: ['ltr', 'rtl'],
+  numberOfItems: ['1', '5', '10'],
+  size: ['xs', 'sm', 'md', 'lg'],
+  'connect-button-label': ['', 'My Connect'],
+  'disconnect-button-label': ['', 'My Disconnect']
+};
+
+const storyName = 'descope-outbound-apps';
+const componentName = 'descope-outbound-apps';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { [attr]: value }), { waitUntil: 'networkidle' });
+      });
+
+      test('style', async ({ page }) => {
+        const componentParent = page.locator(componentName);
+        await page.waitForTimeout(2000);
+
+        expect(await componentParent.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+});
+
+const setupEventListener = (eventName: string) => {
+  return `
+    window.eventDetails = [];
+    document.addEventListener('${eventName}', (event) => {
+      window.eventDetails.push(event.detail);
+    });
+  `;
+};
+
+test.describe('logic', () => {
+  test('dispatch connect action with appId', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName), {
+      waitUntil: 'networkidle',
+    });
+
+    await page.addInitScript(setupEventListener('connect-clicked'));
+
+    await page.reload({ waitUntil: 'networkidle' });
+
+    await page.getByText('Connect').first().click();
+    await page.waitForTimeout(500);
+
+    const eventDetail = await page.evaluate(() => (window as any).eventDetails[0]);
+
+    expect(eventDetail).toBeDefined();
+    expect(eventDetail).toHaveProperty('action', 'connect');
+    expect(eventDetail).toHaveProperty('id', 'appId_1');
+  });
+
+  test('dispatch disconnect action with appId', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName), {
+      waitUntil: 'networkidle',
+    });
+
+    await page.addInitScript(setupEventListener('disconnect-clicked'));
+
+    await page.reload({ waitUntil: 'networkidle' });
+
+    await page.getByText('Disconnect').first().click();
+    await page.waitForTimeout(500);
+
+    await page.getByText('Disconnect').first().click();
+    await page.waitForTimeout(500);
+
+    const eventDetail = await page.evaluate(() => (window as any).eventDetails[0]);
+
+    expect(eventDetail).toBeDefined();
+    expect(eventDetail).toHaveProperty('action', 'disconnect');
+    expect(eventDetail).toHaveProperty('id', 'appId_2');
+  });
+});

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@descope-ui/descope-outbound-apps",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/OutboundAppsClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.18",
+    "@descope-ui/theme-globals": "0.0.19",
+    "@descope-ui/descope-list": "0.0.1",
+    "@descope-ui/descope-list-item": "0.0.1",
+    "@descope-ui/descope-text": "0.0.19",
+    "@descope-ui/descope-avatar": "0.0.19",
+    "@descope-ui/descope-icon": "0.0.17",
+    "@descope-ui/descope-button": "0.0.18"
+  },
+  "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-outbound-apps",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-outbound-apps/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/OutboundAppsClass.js

@@ -0,0 +1,213 @@
+import { compose } from '@descope-ui/common/utils';
+import { limitAbbreviation, getComponentName, injectStyle } from '@descope-ui/common/components-helpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createDynamicDataMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { IconClass } from '@descope-ui/descope-icon/class';
+import { TextClass } from '@descope-ui/descope-text/class';
+import { AvatarClass } from '@descope-ui/descope-avatar/class';
+import { ListClass } from '@descope-ui/descope-list/class';
+import { ListItemClass } from '@descope-ui/descope-list-item/class';
+
+export const componentName = getComponentName('outbound-apps');
+
+export const observedAttributes = ['connect-button-label', 'disconnect-button-label', 'data'];
+
+const itemRenderer = (
+  { name, description, logo, appId, isConnected },
+  _,
+  ref,
+) => {
+  const action = isConnected ? 'disconnect' : 'connect';
+  return `
+  <descope-list-item>
+    <descope-avatar
+      ${logo ? `img="${logo}"` : ''}
+      ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
+      size=${ref.size}
+      class="app-logo"
+    ></descope-avatar>
+    <div class="content">
+      <div class="app-title">
+        <descope-text
+          variant="subtitle1"
+          mode="primary"
+        >${name}</descope-text>
+      </div>
+      ${
+        description
+          ? `
+        <div class="app-description">
+          <descope-text
+            variant="body2"
+            mode="primary"
+          >${description}</descope-text>
+        </div>
+      `
+          : ''
+      }
+    </div>
+    <div class="controls">
+      <descope-button variant="link" mode="primary" size=${ref.size} data-action="${action}" data-outbound-app-id="${appId}" data-id="${action}">
+        ${isConnected ? ref.disconnectButtonLabel : ref.connectButtonLabel }
+      </descope-button>
+    </div>
+  </descope-list-item>
+`
+};
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: 'descope-list',
+});
+
+class RawOutboundAppsClass extends BaseClass {
+  static get observedAttributes() {
+    return observedAttributes;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <descope-list></descope-list>
+    `;
+
+    this.appsList = this.shadowRoot.querySelector('descope-list');
+
+    injectStyle(
+      `
+      :host {
+        width: 100%;
+      }
+      .controls {
+        display: flex;
+        min-width: 8em;
+        justify-content: end;
+      }
+      .content {
+        flex-grow: 1;
+      }
+      descope-list {
+        display: block;
+      }
+      `,
+      this
+    );
+  }
+
+  init() {
+    super.init?.();
+
+    this.appsList.itemRenderer = itemRenderer;
+
+    this.appsList.addEventListener('click', this.onAppsListClick.bind(this));
+  }
+
+  onAppsListClick(e) {
+    const id = e.srcElement.getAttribute('data-outbound-app-id');
+    const action = e.srcElement.getAttribute('data-action');
+    if (id && action) {
+      this.dispatchEvent(new CustomEvent(`${action}-clicked`, { bubbles: true, detail: { id, action } }));
+    }
+  }
+
+  get size() {
+    return this.getAttribute('size') || 'sm';
+  }
+
+  get connectButtonLabel() {
+    return this.getAttribute('connect-button-label') || 'Connect';
+  }
+
+  get disconnectButtonLabel() {
+    return this.getAttribute('disconnect-button-label') || 'Disconnect';
+  }
+}
+
+const { host } = {
+  host: { selector: () => ':host' },
+};
+
+export const OutboundAppsClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      minHeight: { selector: () => ':host' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        {
+          selector: 'descope-list',
+          property: 'direction'
+        },
+        {
+          selector: 'descope-list-item',
+          property: 'direction'
+        },
+      ],
+      iconColor: { selector: () => ' descope-icon', property: IconClass.cssVarList.fill },
+      errorIconColor: { selector: () => ' descope-icon.error-icon', property: IconClass.cssVarList.fill },
+      fontSize: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontSize,
+      },
+      appLogoBackgroundColor: {
+        selector: AvatarClass.componentName,
+        property: AvatarClass.cssVarList.avatarBackgroundColor,
+      },
+      appLogoGap: {
+        selector: () => ' .app-logo',
+        property: 'margin-inline-end'
+      },
+      itemsTextAlign: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.textAlign,
+      },
+      itemCursor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.cursor
+      },
+      itemOutline: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.outline
+      },
+      itemBorderColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderColor
+      },
+      itemBackgroundColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.backgroundColor
+      },
+      listBorderWidth: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.borderWidth
+      },
+      listBoxShadow: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.boxShadow
+      },
+      listPadding: [
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.verticalPadding
+        },
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.horizontalPadding
+        }
+      ]
+    },
+  }),
+  draggableMixin,
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: [
+    'size',
+    'connect-button-label',
+    'disconnect-button-label'
+  ]}),
+  componentNameValidationMixin,
+)(RawOutboundAppsClass);

package/src/component/index.js

@@ -0,0 +1,10 @@
+import '@descope-ui/descope-list';
+import '@descope-ui/descope-list-item';
+import '@descope-ui/descope-text';
+import '@descope-ui/descope-avatar';
+import '@descope-ui/descope-button';
+import { componentName, OutboundAppsClass } from './OutboundAppsClass';
+
+customElements.define(componentName, OutboundAppsClass);
+
+export { OutboundAppsClass, componentName };

package/src/theme.js

@@ -0,0 +1,38 @@
+import { OutboundAppsClass } from './component/OutboundAppsClass';
+import globals from '@descope-ui/theme-globals';
+
+export const vars = OutboundAppsClass.cssVarList;
+
+const outboundApps = {
+  [vars.iconColor]: globals.colors.primary.main,
+  [vars.errorIconColor]: globals.colors.error.main,
+
+  [vars.appLogoBackgroundColor]: 'none',
+  [vars.appLogoGap]: globals.spacing.md,
+
+  // list-item overrides
+  [vars.itemCursor]: 'default',
+  [vars.itemOutline]: 'none',
+  [vars.itemBorderColor]: 'transparent',
+
+  [vars.listPadding]: '0',
+  [vars.listBorderWidth]: '0',
+  [vars.listBoxShadow]: 'none',
+
+  size: {
+    xs: {
+      [vars.fontSize]: '0.6em',
+    },
+    sm: {
+      [vars.fontSize]: '0.8em',
+    },
+    md: {
+      [vars.fontSize]: '1em',
+    },
+    lg: {
+      [vars.fontSize]: '1.5em',
+    },
+  },
+};
+
+export default outboundApps;

package/stories/descope-outbound-apps.stories.js

@@ -0,0 +1,65 @@
+import { componentName } from '../src/component';
+import { directionControl, sizeControl } from '@descope-ui/common/sb-controls';
+import appIcon from './google.svg';
+
+const Template = ({ direction, size, 'connect-button-label': connectButtonLabel, 'disconnect-button-label': disconnectButtonLabel }) => `
+  <descope-outbound-apps
+    st-host-direction="${direction || ''}"
+    size=${size || ''}
+    connect-button-label="${connectButtonLabel || ''}"
+    disconnect-button-label="${disconnectButtonLabel || ''}"
+  >
+  </descope-outbound-apps>
+  <div class="test-output"></div>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-outbound-apps',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const comp = document.querySelector('descope-outbound-apps');
+
+        comp.data = Array.from(
+          { length: Number(args.numberOfItems) },
+          (_, i) => ({
+            appId: `appId_${i + 1}`,
+            name: `App ${i + 1}`,
+            logo: appIcon,
+            description: 'App description',
+            isConnected: !!(i % 2),
+          }),
+        );
+      });
+      return story();
+    },
+    (story) => {
+      setTimeout(() => {
+        const component = document.querySelector('descope-outbound-apps');
+        component.addEventListener('outbound-app-action', (e) =>
+          console.log('outbound-app-action', e.detail),
+        );
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...directionControl,
+    ...sizeControl,
+    'connect-button-label': {
+      control: { type: 'text' },
+    },
+    'disconnect-button-label': {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'sm',
+  numberOfItems: '5',
+  emptyState: 'No items in the list...',
+};

package/stories/google.svg

@@ -0,0 +1,25 @@
+<svg
+		width="1.5em"
+		height="1.5em"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+		data-icon="google"
+	>
+		<path
+			d="m19.6 10.2274c0-.70912-.0636-1.39092-.1818-2.04552h-9.4182v3.86822h5.3818c-.2318 1.25-.9363 2.3091-1.9954 3.0182v2.5091h3.2318c1.8909-1.7409 2.9818-4.3046 2.9818-7.35z"
+			fill="#4285f4"
+		/>
+		<path
+			d="m10 19.9999c2.7 0 4.9636-.8955 6.6181-2.4227l-3.2318-2.5091c-.8954.6-2.0409.9545-3.3863.9545-2.6046 0-4.8091-1.7591-5.5955-4.1227h-3.3409v2.5909c1.6455 3.2682 5.0273 5.5091 8.9364 5.5091z"
+			fill="#34a853"
+		/>
+		<path
+			d="m4.4045 11.8999c-.2-.6-.3136-1.2409-.3136-1.89997 0-.6591.1136-1.3.3136-1.9v-2.5909h-3.3409c-.6772 1.35-1.0636 2.8773-1.0636 4.4909 0 1.61357.3864 3.14087 1.0636 4.49087z"
+			fill="#fbbc04"
+		/>
+		<path
+			d="m10 3.9773c1.4681 0 2.7863.5045 3.8227 1.4954l2.8682-2.8682c-1.7318-1.6136-3.9955-2.6045-6.6909-2.6045-3.9091 0-7.2909 2.2409-8.9364 5.5091l3.3409 2.5909c.7864-2.3636 2.9909-4.1227 5.5955-4.1227z"
+			fill="#e94235"
+		/>
+    <script>alert(1)</script>
+	</svg>