@descope-ui/descope-list 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-07-21)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `@descope-ui/descope-avatar` updated to version `0.0.19`
+* `@descope-ui/common` updated to version `0.0.18`
+* `@descope-ui/theme-globals` updated to version `0.0.19`
+* `@descope-ui/descope-list-item` updated to version `0.0.1`
+# Changelog

package/e2e/descope-list.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  direction: ['ltr', 'rtl'],
+  numberOfItems: ['0'],
+  variant: ['list', 'tiles'],
+};
+
+const storyName = 'descope-list';
+const componentName = 'descope-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,32 @@
+{
+  "name": "@descope-ui/descope-list",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/ListClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "@descope-ui/descope-avatar": "0.0.19"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.18",
+    "@descope-ui/theme-globals": "0.0.19",
+    "@descope-ui/descope-list-item": "0.0.1"
+  },
+  "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-list",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-list/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/ListClass.js

@@ -0,0 +1,163 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { compose } from '@descope-ui/common/utils';
+import {
+  getComponentName,
+  observeChildren,
+} from '@descope-ui/common/components-helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
+import { ListItemClass } from '@descope-ui/descope-list-item/class';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+
+export const componentName = getComponentName('list');
+
+class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper' }) {
+  static get observedAttributes() {
+    return ['variant', 'readonly'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="wrapper">
+    <slot></slot>
+    <slot name="empty-state">
+      No item...
+    </slot>
+    </div>
+	`;
+
+    injectStyle(
+      `
+    .wrapper {
+        overflow: auto;
+        display: grid;
+        max-height: 100%;
+        width: 100%;
+      }
+
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+      slot[name="empty-state"] {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+      }
+
+      :host slot[name="empty-state"] {
+        display: none;
+      }
+      :host([empty]) slot[name="empty-state"] {
+        display: flex;
+      }
+      ::slotted(:not([slot])) {
+        width: 100%;
+      }
+        `,
+      this
+    );
+  }
+
+  get items() {
+    return this.shadowRoot.querySelector('slot').assignedElements();
+  }
+
+  #handleEmptyState() {
+    if (this.items.length === 0) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'list';
+  }
+
+  #handleItemsVariant() {
+    this.items.forEach((item) => {
+      let listItem = item;
+      if (listItem.localName !== ListItemClass.componentName) {
+        listItem = item.querySelector(ListItemClass.componentName);
+      }
+
+      const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
+      listItem.setAttribute('variant', listItemVariant);
+    });
+  }
+
+  init() {
+    super.init?.();
+
+    // we want new items to get the size
+    observeChildren(this, () => {
+      this.#handleEmptyState();
+      this.#handleItemsVariant();
+      this.#handleReadOnly();
+    });
+  }
+
+  get isReadOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  #handleReadOnly() {
+    this.items.forEach((item) => {
+      if (this.isReadOnly) item.setAttribute('inert', '');
+      else item.removeAttribute('inert');
+    });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (newValue === oldValue) return;
+
+    if (name === 'variant') {
+      this.#handleItemsVariant();
+    } else if (name === 'readonly') {
+      this.#handleReadOnly();
+    }
+  }
+}
+
+export const ListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      maxHeight: { selector: () => ':host' },
+      minHeight: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontFamily: {},
+      gap: {},
+
+      backgroundColor: {},
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      boxShadow: {},
+      gridTemplateColumns: {},
+      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
+      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
+      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
+      emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
+      emptyStateTextFontFamily: {
+        selector: () => 'slot[name="empty-state"]',
+        property: 'font-family',
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawList);

package/src/component/index.js

@@ -0,0 +1,7 @@
+import '@descope-ui/descope-list-item';
+
+import { componentName, ListClass } from './ListClass';
+
+customElements.define(componentName, ListClass);
+
+export { ListClass, componentName };

package/src/theme.js

@@ -0,0 +1,60 @@
+import globals from '@descope-ui/theme-globals';
+import {
+  getThemeRefs,
+  createHelperVars,
+  useVar,
+} from '@descope-ui/common/theme-helpers';
+import { ListClass, componentName } from './component/ListClass';
+
+const globalRefs = getThemeRefs(globals);
+
+const compVars = ListClass.cssVarList;
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  { shadowColor: '#00000020' },
+  componentName
+);
+
+const { shadowColor } = helperRefs;
+
+const list = {
+  ...helperTheme,
+
+  [compVars.hostWidth]: '100%',
+  [compVars.backgroundColor]: globalRefs.colors.surface.main,
+  [compVars.fontFamily]: globalRefs.fonts.font1.family,
+  [compVars.borderColor]: globalRefs.colors.surface.light,
+  [compVars.borderStyle]: 'solid',
+  [compVars.borderWidth]: globalRefs.border.xs,
+  [compVars.borderRadius]: globalRefs.radius.sm,
+  [compVars.gap]: globalRefs.spacing.md,
+  [compVars.verticalPadding]: globalRefs.spacing.lg,
+  [compVars.horizontalPadding]: globalRefs.spacing.lg,
+  [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+  [compVars.maxHeight]: '100%',
+  [compVars.hostDirection]: globalRefs.direction,
+  [compVars.minItemsWidth]: '150px',
+
+  _empty: {
+    [compVars.minHeight]: '150px',
+    [compVars.emptyStateTextColor]: globalRefs.colors.surface.dark,
+    [compVars.emptyStateTextFontFamily]: globalRefs.fonts.font1.family,
+  },
+
+  variant: {
+    tiles: {
+      [compVars.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar(
+        compVars.minItemsWidth
+      )}, 100%), 1fr))`,
+      [compVars.maxItemsWidth]: '200px',
+      [compVars.itemsHorizontalAlign]: 'center',
+    },
+  },
+};
+
+export default list;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/stories/descope-list.stories.js

@@ -0,0 +1,55 @@
+import { componentName } from '../src/component';
+import { directionControl } from '@descope-ui/common/sb-controls';
+import imgUrl from './avatar.jpeg?no-inline';
+import '@descope-ui/descope-avatar';
+
+const Template = ({
+  direction,
+  numberOfItems,
+  itemSampleText,
+  emptyState,
+  variant,
+}) => `
+  <descope-list
+    st-host-direction="${direction || ''}"
+    variant="${variant}"
+  >
+${Array.from(
+  { length: numberOfItems || 0 },
+  (_, i) => `
+  <descope-list-item>
+    <descope-avatar
+      size=sm
+      display-name="John Doe"
+      img="${i % 2 > 0 ? imgUrl : ''}"
+      alt="avatar"
+    ></descope-avatar>
+    <descope-text variant="body1" mode="primary">${itemSampleText} ${i + 1}</descope-text>
+  </descope-list-item>
+  `,
+).join('')}
+  <div slot="empty-state">${emptyState}</div>
+  </descope-list>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-list',
+  argTypes: {
+    ...directionControl,
+    variant: {
+      name: 'Variant',
+      options: ['list', 'tiles'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  numberOfItems: 10,
+  itemSampleText: 'Item',
+  emptyState: 'No items in the list...',
+  variant: 'list',
+};