@dpa-id-components/dpa-shared-components 22.3.1 → 23.0.0

package/README.md

@@ -1,6 +1,6 @@
 # DPA shared components library
 
-Collection of common Vue.js components for use in dpa projects distributed in ES module format.
+Collection of common Vue.js components for use in dpa projects.
 
 - [Changelog](./CHANGELOG.md)
 - [Contributing guidelines](./CONTRIBUTING.md)
@@ -17,7 +17,7 @@ Collection of common Vue.js components for use in dpa projects distributed in ES
 ## Requirements
 
 - Node.js (see `engines.node` in package.json for compatible versions)
-- The packages `@tailwindcss/typography eslint prettier tailwindcss vue vue-router` (see `peerDependencies` in package.json for compatible versions)
+- The packages `@eslint/js @tailwindcss/typography eslint prettier tailwindcss vue vue-router` (see `peerDependencies` in package.json for compatible versions)
 
 ## Getting started
 
@@ -31,7 +31,7 @@ Collection of common Vue.js components for use in dpa projects distributed in ES
 
    ```sh
    pnpm install @tailwindcss/typography tailwindcss vue vue-router
-   pnpm install --dev eslint prettier
+   pnpm install --dev @eslint/js eslint prettier
    ```
 
    - Tailwind and its plugins are needed because the shared Tailwind preset uses them.
@@ -42,47 +42,25 @@ Collection of common Vue.js components for use in dpa projects distributed in ES
 
 ### Integrate shared Tailwind preset
 
-Integrate the shared Tailwing preset based on whether you use the bundled code distribution (i.e. you import components from `@dpa-id-components/dpa-shared-components`) or source code distribution (i.e. you import components from `@dpa-id-components/dpa-shared-components/src/*`).
-
-#### Bundled code distribution
-
-Reference the shared components stylesheet and the Tailwind preset from your CSS entrypoint (e.g. something like a `main.css` file).
-
-```css
-@import "@dpa-id-components/dpa-shared-components/style";
-@import "@dpa-id-components/dpa-shared-components/tailwindPreset";
-
-@source "../../node_modules/@dpa-id-components/dpa-shared-components/**/*.js";
-/* Make sure to adjust the `..` segments to match where the `node_modules` directory is. Tailwind won't produce an error if the path is wrong. */
-
-/* … */
-```
-
-**Note**: The order of these import statements matters.
-
-#### Source code distribution
-
 Reference the Tailwind preset from your CSS entrypoint (e.g. something like a `main.css` file).
 
 ```css
 @import "@dpa-id-components/dpa-shared-components/tailwindPreset";
 
-@source "../../node_modules/@dpa-id-components/dpa-shared-components";
+@source "../../node_modules/@dpa-id-components/dpa-shared-components/src";
 /* Make sure to adjust the `..` segments to match where the `node_modules` directory is. Tailwind won't produce an error if the path is wrong. */
 
 /* … */
 ```
 
-**Note**: Double-check the `@source` file path as Tailwind will **not** produce an error on incorrect paths.
-
 ### Set up code quality linting
 
-A shared ESLint configuration is provided at `@dpa-id-components/dpa-shared-components/eslintConfig`. Use it as a base configuration for code quality linting via ESLint.
+A shared ESLint configuration is provided at `@dpa-id-components/dpa-shared-components/config/eslint.config.js`. Use it as a base configuration for code quality linting via ESLint.
 
 **Example ESLint configuration**:
 
 ```js
-import sharedConfig from "@dpa-id-components/dpa-shared-components/eslintConfig";
+import sharedConfig from "@dpa-id-components/dpa-shared-components/config/eslint.config.js";
 import { globalIgnores } from "eslint/config";
 
 export default [
@@ -120,12 +98,12 @@ export default [
 
 ### Set up code formatting
 
-A shared Prettier configuration is provided at `@dpa-id-components/dpa-shared-components/prettierConfig`. Use it as a base configuration for code formatting via Prettier.
+A shared Prettier configuration is provided at `@dpa-id-components/dpa-shared-components/config/prettier.config.js`. Use it as a base configuration for code formatting via Prettier.
 
 **Example Prettier configuration**:
 
 ```js
-import sharedConfig from "@dpa-id-components/dpa-shared-components/prettierConfig";
+import sharedConfig from "@dpa-id-components/dpa-shared-components/config/prettier.config.js";
 
 /**
  * @see https://prettier.io/docs/configuration
@@ -140,34 +118,8 @@ You might also want to add a Prettier ignore file (e.g. for ignoring Markdown fi
 
 ## Usage
 
-To use a component, import it from the `@dpa-id-components/dpa-shared-components` module specifier:
-
-```js
-import { UiButton } from "@dpa-id-components/dpa-shared-components";
-```
-
-You can also import components from their source code directly like this:
+To use a component, import its source file directly:
 
 ```js
 import UiButton from "@dpa-id-components/dpa-shared-components/src/components/UiButton/UiButton.vue";
 ```
-
-If you do this, you **must** avoid importing any components from `@dpa-id-components/dpa-shared-components`.
-
-To this end, you should add the following ESLint rule:
-
-```js
-{
-  rules: {
-    // Disallow importing from the bundled distribution of shared components since the source distribution is being used.
-    "no-restricted-imports": [
-      "error",
-      {
-        name: "@dpa-id-components/dpa-shared-components",
-        message:
-          "When using the shared components source code distribution, all modules must be imported from the source code distribution.",
-      },
-    ],
-  },
-},
-```

package/package.json

@@ -1,36 +1,21 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.3.1",
-  "description": "Shared Vue components library for dpa projects",
+  "version": "23.0.0",
+  "license": "ISC",
+  "author": "dpa Deutsche Presse-Agentur GmbH",
+  "description": "Shared Vue component library for dpa projects",
+  "type": "module",
   "files": [
+    "config",
     "src",
-    "!src/index.ts",
-    "!src/components/index.ts",
-    "!src/compositions/index.ts",
-    "!src/directives/index.ts",
-    "!src/utils/index.ts",
     "!src/**/*.spec.ts",
     "!src/**/*.stories.ts",
-    "!src/**/*.stories.vue",
-    "dist"
+    "!src/**/*.stories.vue"
   ],
-  "type": "module",
-  "main": "./dist/dpa-shared-components.js",
-  "style": "./dist/style.css",
-  "types": "./dist/dpa-shared-components.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/dpa-shared-components.d.ts",
-      "default": "./dist/dpa-shared-components.js"
-    },
-    "./src/*": "./src/*",
-    "./style": "./dist/style.css",
-    "./tailwindPreset": "./dist/tailwindPreset.css",
-    "./eslintConfig": "./dist/eslint.base.config.js",
-    "./prettierConfig": "./dist/prettier.config.js"
+    "./config/*": "./config/*",
+    "./src/*": "./src/*"
   },
-  "author": "",
-  "license": "ISC",
   "publishConfig": {
     "access": "public"
   },
@@ -40,44 +25,42 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "24.19.0"
+      "version": "24.20.0"
     },
     "packageManager": {
       "name": "pnpm",
-      "version": "11.22.0",
+      "version": "11.25.0",
       "onFail": "download"
     }
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
-    "@storybook/addon-docs": "10.4.6",
-    "@storybook/vue3-vite": "10.4.6",
+    "@storybook/addon-docs": "10.6.0",
+    "@storybook/vue3-vite": "10.6.0",
     "@tailwindcss/typography": "0.5.20",
     "@tailwindcss/vite": "4.3.3",
     "@tsconfig/node24": "24.0.5",
     "@types/jsdom": "30.0.0",
     "@types/node": "25.9.5",
     "@vitejs/plugin-vue": "6.0.8",
-    "@vue/test-utils": "2.4.11",
+    "@vue/test-utils": "2.5.0",
     "@vue/tsconfig": "0.9.1",
     "ajv": "8.20.0",
     "commit-and-tag-version": "13.1.2",
-    "eslint": "10.9.0",
-    "eslint-plugin-storybook": "10.4.6",
+    "eslint": "10.9.1",
+    "eslint-plugin-storybook": "10.6.0",
     "husky": "9.1.7",
     "jsdom": "30.0.1",
     "npm-run-all2": "9.0.3",
     "prettier": "3.9.6",
     "rimraf": "6.1.3",
-    "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.4.6",
+    "storybook": "10.6.0",
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
-    "unplugin-dts": "1.0.3",
     "vite": "8.2.2",
-    "vitest": "4.1.11",
-    "vue": "3.5.41",
-    "vue-router": "5.2.0",
+    "vitest": "5.0.0",
+    "vue": "3.5.42",
+    "vue-router": "5.3.1",
     "vue-tsc": "3.3.11"
   },
   "dependencies": {
@@ -109,11 +92,8 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "clean:lib": "rimraf dist",
     "clean:storybook": "rimraf storybook-static",
-    "build": "run-s clean:lib build:lib",
-    "build-storybook": "run-s clean:storybook build:storybook",
-    "build:lib": "vite build",
+    "build": "run-s clean:storybook build:storybook",
     "build:storybook": "storybook build",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest",

package/src/components/UiIcon/UiIcon.vue

@@ -20,7 +20,7 @@ export const ICON_SIZES = {
 </script>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, watchEffect } from "vue";
+import { computed, defineAsyncComponent } from "vue";
 
 import { type Size } from "../../types/index.ts";
 
@@ -39,7 +39,7 @@ const {
 
 const iconComponent = computed(() =>
   defineAsyncComponent({
-    loader: icons[name] ?? icons.close,
+    loader: icons[name],
     // Render a substitute element while loading for classes to attach to.
     loadingComponent: UiIconLoading,
     // Immediately render the loadingComponent so that it can receive classes.
@@ -50,10 +50,4 @@ const iconComponent = computed(() =>
 const sizeClass = computed(() => {
   return sizeClasses || ICON_SIZES[size];
 });
-
-watchEffect(() => {
-  if (!icons[name]) {
-    throw new Error(`UiIcon: No icon named “${name}” exists.`);
-  }
-});
 </script>