@zap-wunschlachen/wl-shared-components 1.0.38 → 1.0.39

package/.storybook/preview.ts

@@ -1,37 +1,37 @@
-import { withVuetifyTheme } from './withVuetifyTheme.decorator';
-import { setup } from '@storybook/vue3';
-import vuetify from '../src/plugins/vuetify';
-import { createInternalI18n } from '../src/i18n/i18n';
-
-import '../src/assets/css/base.css'; // Import global CSS
-import '../src/assets/css/variables.css'; // Import global CSS
-
-// Setup Vuetify
-setup((app) => {
-  app.use(vuetify);
-  app.use(createInternalI18n());
-});
-
-// Global Types for Theme
-export const globalTypes = {
-  theme: {
-    docs: {
-      source: {
-        type: 'dynamic',
-      },
-    },
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light', left: '🌞' },
-        { value: 'dark', title: 'Dark', left: '🌛' },
-      ],
-      dynamicTitle: true,
-    },
-  },
-};
-
-// Combine with Existing Decorators
-export const decorators = [withVuetifyTheme];
+import { withVuetifyTheme } from './withVuetifyTheme.decorator';
+import { setup } from '@storybook/vue3';
+import vuetify from '../src/plugins/vuetify';
+import { createInternalI18n } from '../src/i18n/i18n';
+
+import '../src/assets/css/base.css'; // Import global CSS
+import '../src/assets/css/variables.css'; // Import global CSS
+
+// Setup Vuetify
+setup((app) => {
+  app.use(vuetify);
+  app.use(createInternalI18n());
+});
+
+// Global Types for Theme
+export const globalTypes = {
+  theme: {
+    docs: {
+      source: {
+        type: 'dynamic',
+      },
+    },
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light', left: '🌞' },
+        { value: 'dark', title: 'Dark', left: '🌛' },
+      ],
+      dynamicTitle: true,
+    },
+  },
+};
+
+// Combine with Existing Decorators
+export const decorators = [withVuetifyTheme];

package/.storybook/storyWrapper.vue

@@ -1,18 +1,18 @@
-<template>
-  <v-app :theme="themeName">
-    <v-main style="background: var(--Soft-Concrete-0)" class="pa-2">
-      <slot name="story"></slot>
-    </v-main>
-  </v-app>
-</template>
-
-<script>
-export default {
-  props: {
-    themeName: {
-      type: String,
-      default: 'light',
-    },
-  },
-};
-</script>
+<template>
+  <v-app :theme="themeName">
+    <v-main style="background: var(--Soft-Concrete-0)" class="pa-2">
+      <slot name="story"></slot>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  props: {
+    themeName: {
+      type: String,
+      default: 'light',
+    },
+  },
+};
+</script>

package/.storybook/withVuetifyTheme.decorator.ts

@@ -1,21 +1,21 @@
-import { h } from 'vue';
-import StoryWrapper from './storyWrapper.vue';
-
-export const DEFAULT_THEME = 'light';
-
-export const withVuetifyTheme = (storyFn, context) => {
-  // Pull our global theme variable, fallback to DEFAULT_THEME
-  const themeName = context.globals.theme || DEFAULT_THEME;
-  const story = storyFn();
-
-  return () => {
-    return h(
-      StoryWrapper,
-      // give themeName to StoryWrapper as a prop
-      { themeName },
-      {
-        story: () => h(story, { ...context.args }),
-      },
-    );
-  };
-};
+import { h } from 'vue';
+import StoryWrapper from './storyWrapper.vue';
+
+export const DEFAULT_THEME = 'light';
+
+export const withVuetifyTheme = (storyFn, context) => {
+  // Pull our global theme variable, fallback to DEFAULT_THEME
+  const themeName = context.globals.theme || DEFAULT_THEME;
+  const story = storyFn();
+
+  return () => {
+    return h(
+      StoryWrapper,
+      // give themeName to StoryWrapper as a prop
+      { themeName },
+      {
+        story: () => h(story, { ...context.args }),
+      },
+    );
+  };
+};

package/App.vue

@@ -1,33 +1,33 @@
-<template>
-  <div class="app">
-    <div class="element-container">
-      <StagingBanner show/>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import StagingBanner from "@/components/StagingBanner/StagingBanner.vue";
-import { siteColors } from "@/utils/index";
-</script>
-
-<style scoped>
-.app {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-  height: 100vh;
-  background-color: light-blue;
-}
-
-.element-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 70%;
-  height: 100%;
-}
-</style>
+<template>
+  <div class="app">
+    <div class="element-container">
+      <StagingBanner show/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import StagingBanner from "@/components/StagingBanner/StagingBanner.vue";
+import { siteColors } from "@/utils/index";
+</script>
+
+<style scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: light-blue;
+}
+
+.element-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  height: 100%;
+}
+</style>

package/README.md

@@ -1,56 +1,56 @@
-# WL Shared UI Components
-
-This library provides a set of UI components used across all applications within the WL ecosystem.
-
-## Adding @wunschlachen/wl-shared-components to a Nuxt Project
-
-### Step 1: Install the Library
-
-To add WL components, use Node's package manager:
-
-```
-npm install @wunschlachen/wl-shared-components
-```
-
-
-### Step 2: Create a Vuetify Plugin File
-
-Create a new file named `wlSharedComponents.js` inside your `plugins` folder, and add the following code to define the Vuetify plugin:
-
-```javascript
-// plugins/wlSharedComponents.js
-import { defineNuxtPlugin } from "#app";
-import vuetify from "@wunschlachen/wl-shared-components/src/plugins/vuetify";
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(vuetify);
-});
-```
-
-### Step 3: Update Nuxt Configuration
-In your nuxt.config.js, add the following configurations:
-
-Add vuetify and @wunschlachen/wl-shared-components to the build.transpile section.
-Register the Vuetify plugin by adding it to the plugins array.
-```
-export default defineNuxtConfig({
-  build: {
-    transpile: ["vuetify", "@wunschlachen/wl-shared-components"],
-  },
-});
-```
-
-## Development
-Running Storybook
-To begin development and launch Storybook, execute:
-
-```
-npm install
-npm run storybook
-```
-
-## Contributing
-
-Pull requests are welcome! For major changes, please open an issue first to discuss proposed changes.
-
-Ensure that any necessary tests are updated to maintain project integrity.
+# WL Shared UI Components
+
+This library provides a set of UI components used across all applications within the WL ecosystem.
+
+## Adding @wunschlachen/wl-shared-components to a Nuxt Project
+
+### Step 1: Install the Library
+
+To add WL components, use Node's package manager:
+
+```
+npm install @wunschlachen/wl-shared-components
+```
+
+
+### Step 2: Create a Vuetify Plugin File
+
+Create a new file named `wlSharedComponents.js` inside your `plugins` folder, and add the following code to define the Vuetify plugin:
+
+```javascript
+// plugins/wlSharedComponents.js
+import { defineNuxtPlugin } from "#app";
+import vuetify from "@wunschlachen/wl-shared-components/src/plugins/vuetify";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(vuetify);
+});
+```
+
+### Step 3: Update Nuxt Configuration
+In your nuxt.config.js, add the following configurations:
+
+Add vuetify and @wunschlachen/wl-shared-components to the build.transpile section.
+Register the Vuetify plugin by adding it to the plugins array.
+```
+export default defineNuxtConfig({
+  build: {
+    transpile: ["vuetify", "@wunschlachen/wl-shared-components"],
+  },
+});
+```
+
+## Development
+Running Storybook
+To begin development and launch Storybook, execute:
+
+```
+npm install
+npm run storybook
+```
+
+## Contributing
+
+Pull requests are welcome! For major changes, please open an issue first to discuss proposed changes.
+
+Ensure that any necessary tests are updated to maintain project integrity.

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,67 +1,67 @@
-{
-  "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.38",
-  "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"
-  },
-  "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"
-  },
-  "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.39",
+  "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"
+  },
+  "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"
+  },
+  "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"
+  }
+}