@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/docs/assets.md

@@ -1,62 +1,62 @@
-# Shared Assets
-
-This library exports shared assets (images, etc.) that can be used across all consuming projects.
-
-## Available Assets
-
-| Export | Path | Description |
-|--------|------|-------------|
-| `avatarPlaceholder` | `src/assets/images/avatar-placeholder.jpg` | Default avatar image for dentists/users |
-
-## Usage
-
-Import the asset directly from the library:
-
-```typescript
-import { avatarPlaceholder } from "@zap-wunschlachen/wl-shared-components/src";
-```
-
-Use in templates:
-
-```vue
-<template>
-  <img :src="avatarPlaceholder" alt="Avatar" />
-</template>
-
-<script setup lang="ts">
-import { avatarPlaceholder } from "@zap-wunschlachen/wl-shared-components/src";
-</script>
-```
-
-Use in composables/utilities:
-
-```typescript
-import { avatarPlaceholder } from "@zap-wunschlachen/wl-shared-components/src";
-
-export const getImageUrl = (imageName?: string) => {
-  if (imageName) {
-    return `${baseUrl}/assets/${imageName}`;
-  }
-  return avatarPlaceholder;
-};
-```
-
-## How It Works
-
-1. Assets are stored in `src/assets/images/`
-2. TypeScript declarations in `src/shims-vue.d.ts` allow importing image files
-3. Assets are imported and re-exported from `src/index.ts`
-4. Vite handles the assets during build - in development they're served as URLs, in production they're processed and hashed
-
-## Adding New Assets
-
-1. Place the image in `src/assets/images/`
-2. Import it in `src/index.ts`:
-   ```typescript
-   import myNewImage from './assets/images/my-new-image.png';
-   ```
-3. Export it:
-   ```typescript
-   export { avatarPlaceholder, myNewImage };
-   ```
-4. Bump the package version and publish
+# Shared Assets
+
+This library exports shared assets (images, etc.) that can be used across all consuming projects.
+
+## Available Assets
+
+| Export | Path | Description |
+|--------|------|-------------|
+| `avatarPlaceholder` | `src/assets/images/avatar-placeholder.jpg` | Default avatar image for dentists/users |
+
+## Usage
+
+Import the asset directly from the library:
+
+```typescript
+import { avatarPlaceholder } from "@zap-wunschlachen/wl-shared-components/src";
+```
+
+Use in templates:
+
+```vue
+<template>
+  <img :src="avatarPlaceholder" alt="Avatar" />
+</template>
+
+<script setup lang="ts">
+import { avatarPlaceholder } from "@zap-wunschlachen/wl-shared-components/src";
+</script>
+```
+
+Use in composables/utilities:
+
+```typescript
+import { avatarPlaceholder } from "@zap-wunschlachen/wl-shared-components/src";
+
+export const getImageUrl = (imageName?: string) => {
+  if (imageName) {
+    return `${baseUrl}/assets/${imageName}`;
+  }
+  return avatarPlaceholder;
+};
+```
+
+## How It Works
+
+1. Assets are stored in `src/assets/images/`
+2. TypeScript declarations in `src/shims-vue.d.ts` allow importing image files
+3. Assets are imported and re-exported from `src/index.ts`
+4. Vite handles the assets during build - in development they're served as URLs, in production they're processed and hashed
+
+## Adding New Assets
+
+1. Place the image in `src/assets/images/`
+2. Import it in `src/index.ts`:
+   ```typescript
+   import myNewImage from './assets/images/my-new-image.png';
+   ```
+3. Export it:
+   ```typescript
+   export { avatarPlaceholder, myNewImage };
+   ```
+4. Bump the package version and publish

package/heroicons.ts

@@ -1,75 +1,75 @@
-import { h } from 'vue';
-import * as HeroIcons from '@heroicons/vue/24/outline'; // Heroicons solid icons
-import type { IconSet, IconProps } from 'vuetify';
-
-// Import multiple custom SVG components
-import Outline from './src/components/Icons/checkbox.vue';
-import OutlineChecked from './src/components/Icons/outlineChecked.vue';
-import Circle from './src/components/Icons/Circle.vue';
-import Calender from './src/components/Icons/Calendar.vue';
-import CalendarNotification from './src/components/Icons/CalendarNotification.vue';
-import Chair from './src/components/Icons/Chair.vue';
-import ChairNotification from './src/components/Icons/ChairNotification.vue';
-import Group3 from './src/components/Icons/Group3.vue';
-import RingNotification from './src/components/Icons/RingNotification.vue';
-import SolidArrowRight from './src/components/Icons/SolidArrowRight.vue';
-import FilledCircle from './src/components/Icons/FilledCircle.vue';
-import FavIcon from './src/components/Icons/FavIcon.vue';
-
-// Register custom SVG icons in an object
-const customIcons: Record<string, typeof Outline> = {
-  Outline,
-  OutlineChecked,
-  Circle,
-  Calender,
-  CalendarNotification,
-  Chair,
-  ChairNotification,
-  Group3,
-  RingNotification,
-  SolidArrowRight,
-  FilledCircle,
-  FavIcon,
-};
-
-const heroicons: IconSet = {
-  component: (props: IconProps) => {
-    let { icon, ...rest } = props;
-
-    if (typeof icon === 'string') {
-      // Convert icon name to PascalCase for custom icons
-      const PascalCaseIconName = icon
-        .split('-')
-        .map((chunk) => chunk.charAt(0).toUpperCase() + chunk.slice(1))
-        .join('');
-
-      const CustomIconComponent =
-        customIcons[PascalCaseIconName as keyof typeof customIcons];
-
-      if (CustomIconComponent) {
-        // Render the custom icon if found
-        return h(CustomIconComponent, rest);
-      }
-
-      // Otherwise, check for Heroicons
-      if (icon.startsWith('heroicons-')) {
-        icon = icon.replace('heroicons-', '');
-      }
-
-      const HeroIconComponent = (HeroIcons as any)[`${PascalCaseIconName}Icon`];
-
-      if (HeroIconComponent) {
-        // Render Heroicon if found
-        return h(HeroIconComponent, rest);
-      }
-
-      console.warn(`Icon "${icon}" not found.`);
-    } else {
-      console.warn('Icon value is not a string:', icon);
-    }
-
-    return null;
-  },
-};
-
-export default heroicons;
+import { h } from 'vue';
+import * as HeroIcons from '@heroicons/vue/24/outline'; // Heroicons solid icons
+import type { IconSet, IconProps } from 'vuetify';
+
+// Import multiple custom SVG components
+import Outline from './src/components/Icons/checkbox.vue';
+import OutlineChecked from './src/components/Icons/outlineChecked.vue';
+import Circle from './src/components/Icons/Circle.vue';
+import Calender from './src/components/Icons/Calendar.vue';
+import CalendarNotification from './src/components/Icons/CalendarNotification.vue';
+import Chair from './src/components/Icons/Chair.vue';
+import ChairNotification from './src/components/Icons/ChairNotification.vue';
+import Group3 from './src/components/Icons/Group3.vue';
+import RingNotification from './src/components/Icons/RingNotification.vue';
+import SolidArrowRight from './src/components/Icons/SolidArrowRight.vue';
+import FilledCircle from './src/components/Icons/FilledCircle.vue';
+import FavIcon from './src/components/Icons/FavIcon.vue';
+
+// Register custom SVG icons in an object
+const customIcons: Record<string, typeof Outline> = {
+  Outline,
+  OutlineChecked,
+  Circle,
+  Calender,
+  CalendarNotification,
+  Chair,
+  ChairNotification,
+  Group3,
+  RingNotification,
+  SolidArrowRight,
+  FilledCircle,
+  FavIcon,
+};
+
+const heroicons: IconSet = {
+  component: (props: IconProps) => {
+    let { icon, ...rest } = props;
+
+    if (typeof icon === 'string') {
+      // Convert icon name to PascalCase for custom icons
+      const PascalCaseIconName = icon
+        .split('-')
+        .map((chunk) => chunk.charAt(0).toUpperCase() + chunk.slice(1))
+        .join('');
+
+      const CustomIconComponent =
+        customIcons[PascalCaseIconName as keyof typeof customIcons];
+
+      if (CustomIconComponent) {
+        // Render the custom icon if found
+        return h(CustomIconComponent, rest);
+      }
+
+      // Otherwise, check for Heroicons
+      if (icon.startsWith('heroicons-')) {
+        icon = icon.replace('heroicons-', '');
+      }
+
+      const HeroIconComponent = (HeroIcons as any)[`${PascalCaseIconName}Icon`];
+
+      if (HeroIconComponent) {
+        // Render Heroicon if found
+        return h(HeroIconComponent, rest);
+      }
+
+      console.warn(`Icon "${icon}" not found.`);
+    } else {
+      console.warn('Icon value is not a string:', icon);
+    }
+
+    return null;
+  },
+};
+
+export default heroicons;

package/index.html

@@ -1,19 +1,19 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Vite App</title>
-
-    <!-- Add the link to the Google Font or custom font here -->
-    <link
-      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="app"></div>
-
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Vite App</title>
+
+    <!-- Add the link to the Google Font or custom font here -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,71 +1,71 @@
-{
-  "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.76",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "dev host": "vite --host",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 7000",
-    "build-storybook": "storybook build",
-    "test": "vitest",
-    "test:ui-vitest": "vitest --ui",
-    "test:unit": "vitest run",
-    "test:unit:watch": "vitest watch",
-    "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test",
-    "test:e2e:headed": "playwright test --headed",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:report": "playwright show-report",
-    "test:e2e:update-snapshots": "playwright test tests/e2e/visual-regression.spec.ts --update-snapshots",
-    "check-translations:local": "npx tsx scripts/check-translations.ts --diff",
-    "check-translations:staging": "npx tsx scripts/check-translations.ts -- --url=https://staging.wunschlachen.app --diff",
-    "check-translations:live": "npx tsx scripts/check-translations.ts -- --url=https://wunschlachen.app --diff"
-  },
-  "devDependencies": {
-    "@axe-core/playwright": "^4.10.2",
-    "@chromatic-com/storybook": "^1.9.0",
-    "@playwright/test": "^1.55.0",
-    "@storybook/addon-actions": "^8.3.5",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/vue3": "^8.3.5",
-    "@storybook/vue3-vite": "^8.3.5",
-    "@testing-library/user-event": "^14.6.1",
-    "@testing-library/vue": "^8.1.0",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "@vue/test-utils": "^2.4.6",
-    "concurrently": "^9.2.1",
-    "happy-dom": "^18.0.1",
-    "http-server": "^14.1.1",
-    "playwright": "^1.55.0",
-    "prettier": "^3.3.1",
-    "storybook": "^8.3.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0",
-    "vitest": "^3.2.4",
-    "vue": "^3.5.11",
-    "wait-on": "^8.0.4",
-    "tsx": "^4.21.0"
-  },
-  "dependencies": {
-    "@heroicons/vue": "^2.1.5",
-    "@mdi/font": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "date-fns": "^4.1.0",
-    "flag-icons": "^7.5.0",
-    "v-phone-input": "^5.1.0",
-    "vue-i18n": "^11.1.11",
-    "wavesurfer.js": "^7.9.9"
-  },
-  "peerDependencies": {
-    "vuetify": "^3.7.15"
-  }
-}
+{
+  "name": "@zap-wunschlachen/wl-shared-components",
+  "version": "1.0.78",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev host": "vite --host",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 7000",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:ui-vitest": "vitest --ui",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:report": "playwright show-report",
+    "test:e2e:update-snapshots": "playwright test tests/e2e/visual-regression.spec.ts --update-snapshots",
+    "check-translations:local": "npx tsx scripts/check-translations.ts --diff",
+    "check-translations:staging": "npx tsx scripts/check-translations.ts -- --url=https://staging.wunschlachen.app --diff",
+    "check-translations:live": "npx tsx scripts/check-translations.ts -- --url=https://wunschlachen.app --diff"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
+    "@chromatic-com/storybook": "^1.9.0",
+    "@playwright/test": "^1.55.0",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-docs": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@storybook/vue3": "^8.3.5",
+    "@storybook/vue3-vite": "^8.3.5",
+    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "concurrently": "^9.2.1",
+    "happy-dom": "^18.0.1",
+    "http-server": "^14.1.1",
+    "playwright": "^1.55.0",
+    "prettier": "^3.3.1",
+    "storybook": "^8.3.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.11",
+    "wait-on": "^8.0.4",
+    "tsx": "^4.21.0"
+  },
+  "dependencies": {
+    "@heroicons/vue": "^2.1.5",
+    "@mdi/font": "^7.4.47",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "date-fns": "^4.1.0",
+    "flag-icons": "^7.5.0",
+    "v-phone-input": "^5.1.0",
+    "vue-i18n": "^11.1.11",
+    "wavesurfer.js": "^7.9.9"
+  },
+  "peerDependencies": {
+    "vuetify": "^3.7.15"
+  }
+}

package/playwright.config.ts

@@ -1,48 +1,48 @@
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './tests/e2e',
-  fullyParallel: false,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: [
-    ['list'],
-    ['html', { outputFolder: 'playwright-report', open: 'never' }],
-  ],
-  timeout: 60000,
-  use: {
-    baseURL: 'http://localhost:7000',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-    actionTimeout: 15000,
-    navigationTimeout: 30000,
-  },
-  expect: {
-    timeout: 15000,
-
-    toHaveScreenshot: {
-      pathTemplate: '{testDir}/snapshots/{testFileName}/{platform}/{projectName}/{arg}{ext}',
-      threshold: 0.01,
-      maxDiffPixelRatio: 0.10,
-    }
-  },
-
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
-    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
-    { name: 'Mobile Chrome', use: { ...devices['Pixel 9'] } },
-    { name: 'Mobile Safari', use: { ...devices['iPhone 16'] } },
-  ],
-
-  webServer: {
-    command: 'npm run storybook',
-    url: 'http://localhost:7000',
-    reuseExistingServer: true,
-    timeout: 120 * 1000,
-  },
-});
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }],
+  ],
+  timeout: 60000,
+  use: {
+    baseURL: 'http://localhost:7000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    actionTimeout: 15000,
+    navigationTimeout: 30000,
+  },
+  expect: {
+    timeout: 15000,
+
+    toHaveScreenshot: {
+      pathTemplate: '{testDir}/snapshots/{testFileName}/{platform}/{projectName}/{arg}{ext}',
+      threshold: 0.01,
+      maxDiffPixelRatio: 0.10,
+    }
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'Mobile Chrome', use: { ...devices['Pixel 9'] } },
+    { name: 'Mobile Safari', use: { ...devices['iPhone 16'] } },
+  ],
+
+  webServer: {
+    command: 'npm run storybook',
+    url: 'http://localhost:7000',
+    reuseExistingServer: true,
+    timeout: 120 * 1000,
+  },
+});