@descope-ui/descope-image 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-05-28)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-assets` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.12`
+* `@descope-ui/theme-globals` updated to version `0.0.12`
+# Changelog

package/e2e/descope-image.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const storyName = 'descope-image';
+const componentName = 'descope-image';
+
+const componentAttributes = {
+  'st-width': ['', '50px', '200px'],
+  'st-height': ['', '50px', '200px'],
+};
+
+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 component = page.locator(componentName);
+
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+
+  test('render image for dark theme', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {}, { theme: 'dark' }), {
+      waitUntil: 'networkidle',
+    });
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});
+
+test.describe('presets', () => {
+  loopPresets(
+    {
+      'portrait image': {
+        'st-width': '50px',
+        'st-height': '200px',
+      },
+      'landscape image': {
+        'st-width': '200px',
+        'st-height': '50px',
+      },
+    },
+    (preset, name) => {
+      test(name, async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, preset), {
+          waitUntil: 'networkidle',
+        });
+        const component = page.locator(componentName);
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+    },
+  );
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@descope-ui/descope-image",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/ImageClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-assets": "0.0.1"
+  },
+  "dependencies": {
+    "dompurify": "^3.1.6",
+    "@descope-ui/common": "0.0.12",
+    "@descope-ui/theme-globals": "0.0.12"
+  },
+  "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-image",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-image/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/ImageClass.js

@@ -0,0 +1,140 @@
+/* eslint-disable no-use-before-define */
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { compose } from '@descope-ui/common/utils';
+import { getComponentName } from '@descope-ui/common/components-helpers';
+import { createImage } from './helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
+
+export const componentName = getComponentName('image');
+
+const srcAttrs = ['src', 'src-dark'];
+
+class RawImage extends createBaseClass({
+  componentName,
+  baseSelector: 'slot',
+}) {
+  static get observedAttributes() {
+    return srcAttrs;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
+			:host {
+				display: inline-flex;
+			}
+      :host > slot {
+        width: 100%;
+        height: 100%;
+				box-sizing: border-box;
+				display: flex;
+				overflow: hidden;
+			}
+
+      ::slotted(*) {
+        width: 100%;
+			}
+
+      .hidden {
+        display: none;
+      }
+      `,
+      this,
+    );
+  }
+
+  init() {
+    super.init?.();
+    this.toggleVisibility(this.src);
+  }
+
+  onThemeChange() {
+    this.renderImage();
+  }
+
+  toggleVisibility(isVisible) {
+    if (isVisible) {
+      this.classList.remove('hidden');
+    } else {
+      this.classList.add('hidden');
+    }
+  }
+
+  get legacySrc() {
+    return this.getAttribute('src');
+  }
+
+  get themeSrc() {
+    return this.getAttribute(`src-${this.currentThemeName}`);
+  }
+
+  get src() {
+    return this.themeSrc || this.legacySrc;
+  }
+
+  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
+  // with the value from the `st-fill` attribute
+  // eslint-disable-next-line class-methods-use-this
+  updateFillColor(node) {
+    // set fill to root node and all its relevant selectors
+    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+
+    elementsToReplace.forEach((ele) => {
+      ele.setAttribute(
+        'fill',
+        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`,
+      );
+    });
+  }
+
+  renderImage() {
+    this.toggleVisibility(this.src);
+
+    createImage(this.src).then((res) => {
+      this.innerHTML = '';
+      if (res) {
+        this.updateFillColor(res);
+        this.appendChild(res);
+      }
+    });
+  }
+
+  // render only when src attribute matches current theme
+  shouldRender(src) {
+    const srcVal = this.getAttribute(src);
+    return this.src === srcVal;
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue === newValue) return;
+
+    if (this.shouldRender(attrName)) {
+      this.renderImage();
+    }
+  }
+}
+
+export const ImageClass = compose(
+  createStyleMixin({
+    mappings: {
+      fill: {},
+      height: { selector: () => ':host' },
+      width: { selector: () => ':host' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawImage);

package/src/component/helpers.js

@@ -0,0 +1,55 @@
+import DOMPurify from 'dompurify';
+
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
+
+const base64Prefix = 'data:image/svg+xml;base64,';
+
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
+
+const createImgEle = (src) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  return ele;
+};
+
+const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+  });
+
+  const parser = new DOMParser();
+  const ele = parser
+    .parseFromString(clean, 'image/svg+xml')
+    .querySelector('svg');
+  return ele;
+};
+
+export const createImage = async (src) => {
+  try {
+    let ele;
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      // handle binary
+      ele = createImgEle(src);
+    }
+
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
+
+    return ele;
+  } catch {
+    return null;
+  }
+};

package/src/component/index.js

@@ -0,0 +1,5 @@
+import { componentName, ImageClass } from './ImageClass';
+
+customElements.define(componentName, ImageClass);
+
+export { ImageClass, componentName };

package/src/theme.js

@@ -0,0 +1,7 @@
+import { ImageClass } from './component/ImageClass';
+
+export const vars = ImageClass.cssVarList;
+
+const image = {};
+
+export default image;

package/stories/apple.svg

@@ -0,0 +1,10 @@
+	<svg
+		width="1.5em"
+		height="1.5em"
+		viewBox="0 0 800 1000"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="#000000"
+		data-icon="apple"
+	>
+		<path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
+	</svg>

package/stories/descope-image.stories.js

@@ -0,0 +1,63 @@
+import { componentName } from '../src/component';
+import {
+  customHeightControl,
+  customWidthControl,
+  fillControl,
+} from '@descope-ui/common/sb-controls';
+
+import demoImageLight from './demo.jpg';
+import demoImageDark from './game.png';
+import fromUrlLight from './google.svg?no-inline';
+import fromUrlDark from './apple.svg?no-inline';
+
+const images = {
+  fromUrlLight,
+  fromUrlDark,
+  demoImageLight,
+  demoImageDark,
+};
+
+const Template = ({
+  src,
+  srcDark,
+  fill,
+  'st-width': customWidth,
+  'st-height': customHeight,
+}) => {
+  return `
+    <descope-image
+      src="${images[src]}"
+      src-dark="${images[srcDark]}"
+      ${fill ? `st-fill="${fill}"` : ''}
+      st-height="${customHeight || ''}"
+      st-width="${customWidth || ''}"      
+      ></descope-image>
+  `;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-image',
+  argTypes: {
+    ...fillControl,
+    src: {
+      options: Object.keys(images),
+      control: { type: 'select' },
+    },
+    'src-dark': {
+      options: Object.keys(images),
+      control: { type: 'select' },
+    },
+    'st-height': customHeightControl['st-host-height'],
+    'st-width': customWidthControl['st-host-width'],
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  src: 'demoImageLight',
+  srcDark: 'demoImageDark',
+  'st-width': '',
+  'st-height': '',
+};

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>