Merge pull request #327 from kit-data-manager/dependency-updates

maximiliani · web-flow · commit 9785d4afb70b · 2025-06-05T09:14:10.000+02:00
updated dependencies
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,17 +1,17 @@
 {
   "name": "pid-component-monorepo",
   "private": true,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "workspaces": [
     "packages/*"
   ],
   "devDependencies": {
-    "@types/node": "^22.13.4",
-    "lerna": "^8.1.9",
-    "typescript": "^5.7.3"
+    "@types/node": "^22.15.29",
+    "lerna": "^8.2.2",
+    "typescript": "^5.8.3"
   },
   "dependencies": {
-    "vite": "^6.1.0"
+    "vite": "6.3.4"
   },
   "scripts": {
     "build": "lerna run build"
@@ -78,4 +78,4 @@
     "type": "git",
     "url": "https://github.com/kit-data-manager/pid-component"
   }
-}
+}
diff --git a/packages/react-library/package.json b/packages/react-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kit-data-manager/react-pid-component",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React wrapper for the package @kit-data-manager/pid-component",
   "author": {
     "name": "Christopher Raquet",
@@ -33,11 +33,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@stencil/react-output-target": "^0.8.2",
+    "@stencil/react-output-target": "^1.0.4",
     "@kit-data-manager/pid-component": "*"
   },
   "devDependencies": {
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.3"
   },
   "keywords": [
     "react",
@@ -89,4 +89,4 @@
       "email": "thomas.jejkal@kit.edu"
     }
   ]
-}
+}
diff --git a/packages/stencil-library/.storybook/main.ts b/packages/stencil-library/.storybook/main.ts
@@ -1,17 +1,25 @@
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+
+const require = createRequire(import.meta.url);
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials'
+  addons: [getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-docs')],
+  staticDirs: [
+    { from: '../dist', to: '/assets' },
+    { from: '../loader', to: '/assets' },
   ],
-  staticDirs: [{ from: '../dist', to: '/assets' }, { from: '../loader', to: '/assets' }],
-  framework: '@storybook/web-components-vite',
+  framework: getAbsolutePath('@storybook/web-components-vite'),
   docs: {
     source: {
       type: 'code',
-    }
+    },
   },
   core: {
     disableTelemetry: true,
   },
 };
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
diff --git a/packages/stencil-library/package.json b/packages/stencil-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kit-data-manager/pid-component",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "Apache-2.0",
   "description": "The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.",
   "author": {
@@ -108,36 +108,34 @@
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,mdx}\""
   },
   "dependencies": {
-    "@stencil/core": "^4.22.2",
+    "@stencil/core": "^4.33.1",
     "@tempfix/idb": "^8.0.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.13.0",
-    "@stencil/react-output-target": "^0.8.2",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/web-components": "^8.3.6",
-    "@storybook/web-components-vite": "^8.3.6",
+    "@eslint/js": "^9.28.0",
+    "@stencil/react-output-target": "^1.0.4",
+    "@storybook/addon-docs": "^9.0.4",
+    "@storybook/addon-links": "^9.0.4",
+    "@storybook/web-components-vite": "^9.0.4",
     "@types/eslint__js": "^8.42.3",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/node": "^22.8.1",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
-    "eslint": "^9.13.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-storybook": "^0.11.3",
-    "globals": "^15.11.0",
-    "lit": "^3.2.1",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "puppeteer": "^24.2.1",
-    "stencil-tailwind-plugin": "^1.8.0",
-    "storybook": "^8.3.6",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
+    "@typescript-eslint/parser": "^8.33.1",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-storybook": "^9.0.4",
+    "globals": "^16.2.0",
+    "lit": "^3.3.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.12",
+    "puppeteer": "^24.10.0",
+    "stencil-tailwind-plugin": "^2.0.5",
+    "storybook": "^9.0.4",
+    "tailwindcss": "^4.1.8",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.1",
+    "vite": "^6.3.5",
     "workbox-build": "^7.1.1"
   },
   "maintainers": [
@@ -147,5 +145,8 @@
       "email": "maximilian.inckmann@kit.edu"
     }
   ],
-  "homepage": "https://kit-data-manager.github.io/pid-component"
-}
+  "homepage": "https://kit-data-manager.github.io/pid-component",
+  "overrides": {
+    "storybook": "$storybook"
+  }
+}
diff --git a/packages/stencil-library/src/components/color-highlight/color-highlight.stories.ts b/packages/stencil-library/src/components/color-highlight/color-highlight.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
 const meta: Meta = {
diff --git a/packages/stencil-library/src/components/copy-button/copy-button.stories.ts b/packages/stencil-library/src/components/copy-button/copy-button.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
   title: 'copy-button',
diff --git a/packages/stencil-library/src/components/pid-component/pid-component.css b/packages/stencil-library/src/components/pid-component/pid-component.css
@@ -1,3 +1,4 @@
+/* Hide default details marker - can't be done with Tailwind */
 details summary::-webkit-details-marker {
   display: none;
 }
diff --git a/packages/stencil-library/src/components/pid-component/pid-component.mdx b/packages/stencil-library/src/components/pid-component/pid-component.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import * as PIDComponentStories from './pid-component.stories';
 
diff --git a/packages/stencil-library/src/components/pid-component/pid-component.stories.ts b/packages/stencil-library/src/components/pid-component/pid-component.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
 const meta: Meta = {
diff --git a/packages/stencil-library/src/components/pid-component/readme.md b/packages/stencil-library/src/components/pid-component/readme.md
@@ -6,18 +6,29 @@
 ## Properties
 
 | Property                      | Attribute                        | Description                                                                                                                                                                                                                                                                                                                                            | Type      | Default               |
-| ----------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | --------------------- |
+|-------------------------------|----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|-----------------------|
 | `amountOfItems`               | `amount-of-items`                | The number of items to show in the table per page. Defaults to 10. (optional)                                                                                                                                                                                                                                                                          | `number`  | `10`                  |
 | `currentLevelOfSubcomponents` | `current-level-of-subcomponents` | The current level of subcomponents. Defaults to 0. (optional)                                                                                                                                                                                                                                                                                          | `number`  | `0`                   |
 | `defaultTTL`                  | `default-t-t-l`                  | Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)                                                                                                                                                                                                                    | `number`  | `24 * 60 * 60 * 1000` |
 | `emphasizeComponent`          | `emphasize-component`            | Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)                                                                                               | `boolean` | `true`                |
+| `height`                      | `height`                         | Initial height of the component (e.g. '300px', '50vh'). If not set, defaults to 300px.                                                                                                                                                                                                                                                                 | `string`  | `undefined`           |
 | `hideSubcomponents`           | `hide-subcomponents`             | Determines whether subcomponents should generally be shown or not. If set to true, the component won't show any subcomponents. If not set, the component will show subcomponents if the current level of subcomponents is not the total level of subcomponents or greater. (optional)                                                                  | `boolean` | `undefined`           |
 | `levelOfSubcomponents`        | `level-of-subcomponents`         | The total number of levels of subcomponents to show. Defaults to 1. (optional)                                                                                                                                                                                                                                                                         | `number`  | `1`                   |
 | `openByDefault`               | `open-by-default`                | Determines whether the component is open or not by default. (optional)                                                                                                                                                                                                                                                                                 | `boolean` | `undefined`           |
 | `settings`                    | `settings`                       | A stringified JSON object containing settings for this component. The resulting object is passed to every subcomponent, so that every component has the same settings. Values and the according type are defined by the components themselves. (optional)  Schema: ```typescript {  type: string,  values: {   name: string,   value: any  }[] }[] ``` | `string`  | `'[]'`                |
 | `showTopLevelCopy`            | `show-top-level-copy`            | Determines whether on the top level the copy button is shown. If set to true, the copy button is shown also on the top level. It not set, the copy button is only shown for sub-components. (optional)                                                                                                                                                 | `boolean` | `true`                |
 | `value`                       | `value`                          | The value to parse, evaluate and render.                                                                                                                                                                                                                                                                                                               | `string`  | `undefined`           |
+| `width`                       | `width`                          | Initial width of the component (e.g. '500px', '50%'). If not set, defaults to 500px on large screens, 400px on medium screens, and 300px on small screens.                                                                                                                                                                                             | `string`  | `undefined`           |
 
+## Methods
+
+### `updateComponentSizing() => Promise<void>`
+
+Updates the component sizing and styling based on the expanded state
+
+#### Returns
+
+Type: `Promise<void>`
 
 ## Dependencies
 
diff --git a/packages/stencil-library/src/utils/FoldableAction.ts b/packages/stencil-library/src/utils/FoldableAction.ts
@@ -81,4 +81,13 @@ export class FoldableAction {
   get style(): 'primary' | 'secondary' | 'danger' {
     return this._style;
   }
+
+  /**
+   * Checks equality with another FoldableAction by comparing all attributes.
+   * @param other The other FoldableAction to compare.
+   * @returns {boolean} True if all attributes are equal, false otherwise.
+   */
+  equals(other: FoldableAction): boolean {
+    return this._priority === other._priority && this._title === other._title && this._link === other._link && this._style === other._style;
+  }
 }
diff --git a/packages/stencil-library/src/utils/FoldableItem.ts b/packages/stencil-library/src/utils/FoldableItem.ts
@@ -159,4 +159,19 @@ export class FoldableItem {
   isValidValue(): boolean {
     return this._valueRegex.test(this._value);
   }
+
+  /**
+   * Checks equality with another FoldableItem by comparing all attributes.
+   * @param other The other FoldableItem to compare.
+   * @returns {boolean} True if all attributes are equal, false otherwise.
+   */
+  equals(other: FoldableItem): boolean {
+    return (
+      this._keyTitle === other._keyTitle &&
+      this._value === other._value &&
+      this._keyTooltip === other._keyTooltip &&
+      this._keyLink === other._keyLink &&
+      this._renderDynamically === other._renderDynamically
+    );
+  }
 }
diff --git a/packages/stencil-library/src/utils/IndexedDBUtil.ts b/packages/stencil-library/src/utils/IndexedDBUtil.ts
@@ -73,10 +73,13 @@ export class Database {
     const context = document.documentURI;
     const db = await this.dbPromise;
 
+    // Ensure the value is a valid IndexedDB key (string, number, Date, or array of those)
+    const entityKey = this.normalizeKey(renderer.value);
+
     // Add the entity to the entities object store
     await db
       .add('entities', {
-        value: renderer.value,
+        value: entityKey,
         rendererKey: renderer.getSettingsKey(),
         context: context,
         lastAccess: new Date(),
@@ -135,6 +138,8 @@ export class Database {
       }[];
     }[],
   ): Promise<GenericIdentifierType> {
+    // Ensure the value is a valid IndexedDB key (string, number, Date, or array of those)
+    const entityKey = this.normalizeKey(value);
     // Try to get the entity from the database
     try {
       const db = await this.dbPromise;
@@ -146,7 +151,7 @@ export class Database {
             lastAccess: Date;
             lastData: any;
           }
-        | undefined = await db.get('entities', value);
+        | undefined = await db.get('entities', entityKey);
 
       if (entity !== undefined) {
         // If the entity was found, check if the TTL has expired
@@ -188,8 +193,11 @@ export class Database {
   async deleteEntity(value: string) {
     const db = await this.dbPromise;
 
+    // Ensure the value is a valid IndexedDB key (string, number, Date, or array of those)
+    const entityKey = this.normalizeKey(value);
+
     // Delete the entity
-    await db.delete('entities', value);
+    await db.delete('entities', entityKey);
 
     // Delete all relations for the entity
     const tx = db.transaction('relations', 'readwrite');
@@ -205,6 +213,19 @@ export class Database {
     await tx.done;
   }
 
+  private normalizeKey(value: string) {
+    let entityKey = value;
+    if (typeof entityKey !== 'string' && typeof entityKey !== 'number') {
+      try {
+        entityKey = JSON.stringify(entityKey);
+      } catch {
+        entityKey = String(entityKey);
+      }
+      console.warn('Converted entity value to string for IndexedDB key (delete):', entityKey);
+    }
+    return entityKey;
+  }
+
   /**
    * Clears all entities from the database.
    * @returns {Promise<void>} A promise that resolves when all entities have been deleted.
diff --git a/packages/stencil-library/stencil.config.ts b/packages/stencil-library/stencil.config.ts
@@ -4,6 +4,7 @@ import { reactOutputTarget } from '@stencil/react-output-target';
 
 export const config: Config = {
   namespace: 'pid-component',
+  jsxFragmentFactory: 'Fragment',
   outputTargets: [
     {
       type: 'dist-hydrate-script',
diff --git a/packages/stencil-library/tailwind.config.ts b/packages/stencil-library/tailwind.config.ts
@@ -1,10 +1,14 @@
 import type { Config } from 'tailwindcss';
 
 export default {
-  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}', './src/components/**/*.{ts,tsx}', './src/rendererModules/**/*.{ts,tsx}'],
   darkMode: ['class', '[data-mode="dark"]'],
   theme: {
-    extend: {},
+    extend: {
+      resize: {
+        both: 'both',
+      },
+    },
   },
   plugins: [],
 } satisfies Config;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Meta, StoryObj } from '@storybook/web-components';`
	`1`	`+import { Meta, StoryObj } from '@storybook/web-components-vite';`
`2`	`2`	`import { html } from 'lit';`
`3`	`3`
`4`	`4`	`const meta: Meta = {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+/* Hide default details marker - can't be done with Tailwind */`
`1`	`2`	`details summary::-webkit-details-marker {`
`2`	`3`	`display: none;`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Canvas, Controls, Meta } from '@storybook/blocks';`
	`1`	`+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';`
`2`	`2`
`3`	`3`	`import * as PIDComponentStories from './pid-component.stories';`
`4`	`4`