@descope-ui/descope-apps-list 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# 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-avatar` updated to version `0.0.19`
+* `@descope-ui/descope-text` updated to version `0.0.19`
+# Changelog

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

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  direction: ['ltr', 'rtl'],
+  numberOfItems: ['0'],
+  size: ['xs', 'sm', 'md', 'lg'],
+  variant: ['list', 'tiles'],
+};
+
+const storyName = 'descope-apps-list';
+const componentName = 'descope-apps-list';
+
+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);
+
+        expect(await componentParent.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@descope-ui/descope-apps-list",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/AppsListClass.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-avatar": "0.0.19",
+    "@descope-ui/descope-text": "0.0.19"
+  },
+  "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-apps-list",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-apps-list/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/AppsListClass.js

@@ -0,0 +1,89 @@
+import { compose } from '@descope-ui/common/utils';
+import { getComponentName, limitAbbreviation } from '@descope-ui/common/components-helpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  createDynamicDataMixin,
+} from '@descope-ui/common/components-mixins';
+import { TextClass } from '@descope-ui/descope-text/class';
+
+export const componentName = getComponentName('apps-list');
+
+const itemRenderer = ({ name, icon, url }, _, ref) => `
+  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
+    <descope-list-item>
+    <descope-avatar
+      ${icon ? `img="${icon}"` : ''}
+      ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
+      size=${ref.size}
+    ></descope-avatar>
+    <descope-text
+      variant="body1"
+      mode="primary"
+    >${name}</descope-text>
+    </descope-list-item>
+  </a>
+`;
+
+const customMixin = (superclass) =>
+  class AppsListMixinClass extends superclass {
+    get size() {
+      return this.getAttribute('size') || 'sm';
+    }
+  };
+
+export const AppsListClass = compose(
+  createStyleMixin({
+    mappings: {
+      maxHeight: { selector: () => ':host' },
+      minHeight: { selector: () => ':host' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      itemsFontWeight: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontWeight,
+      },
+      itemsFontSize: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontSize,
+      },
+      itemsTextAlign: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.textAlign,
+      },
+    },
+  }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: ['empty-state'],
+    wrappedEleName: 'descope-list',
+    excludeAttrsSync: ['tabindex', 'class', 'empty'],
+    componentName,
+    style: () => `
+      :host {
+        width: 100%;
+        display: inline-flex;
+      }
+
+      descope-text::part(text-wrapper) {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      descope-text {
+        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+      }
+    `,
+  })
+);

package/src/component/index.js

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

package/src/theme.js

@@ -0,0 +1,36 @@
+import { AppsListClass } from './component/AppsListClass';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import globals from '@descope-ui/theme-globals';
+
+export const vars = AppsListClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+const defaultHeight = '400px';
+
+const appsList = {
+  [vars.itemsFontWeight]: 'normal',
+  [vars.itemsTextAlign]: 'start',
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.maxHeight]: defaultHeight,
+
+  _empty: {
+    [vars.minHeight]: defaultHeight,
+  },
+
+  size: {
+    xs: {
+      [vars.itemsFontSize]: '14px',
+    },
+    sm: {
+      [vars.itemsFontSize]: '14px',
+    },
+    md: {
+      [vars.itemsFontSize]: '16px',
+    },
+    lg: {
+      [vars.itemsFontSize]: '20px',
+    },
+  },
+};
+
+export default appsList;

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

@@ -0,0 +1,57 @@
+import { componentName } from '../src/component';
+import { directionControl, sizeControl } from '@descope-ui/common/sb-controls';
+import avatarImage from './avatar.jpeg';
+
+const Template = ({
+  direction,
+  emptyState,
+  size,
+  variant,
+}) => `
+  <descope-apps-list
+    st-host-direction="${direction || ''}"
+    size=${size || ''}
+    variant="${variant}"
+  >
+  <div slot="empty-state">${emptyState}</div>
+  </descope-apps-list>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-apps-list',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        document.querySelector('descope-apps-list').data = Array.from(
+          { length: args.numberOfItems },
+          (_, i) => ({
+            name: `${args.itemSampleText} ${i + 1}`,
+            icon: i % 2 > 0 ? avatarImage : '',
+            url: 'https://www.google.com',
+          })
+        );
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...directionControl,
+    ...sizeControl,
+    variant: {
+      name: 'Variant',
+      options: ['list', 'tiles'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'sm',
+  variant: 'list',
+  numberOfItems: 10,
+  itemSampleText: 'Sample application display name',
+  emptyState: 'No items in the list...',
+};