@zap-wunschlachen/wl-shared-components 1.0.0

package/.github/workflows/playwright.yml

@@ -0,0 +1,215 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [develop]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    
+    strategy:
+      matrix:
+        browser: [chromium, firefox, webkit]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps ${{ matrix.browser }}
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 7000 --silent" \
+            "npx wait-on http://localhost:7000 && npx playwright test --project=${{ matrix.browser }}"
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-results-${{ matrix.browser }}
+          path: |
+            test-results/
+            playwright-report/
+          retention-days: 7
+
+  accessibility-test:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Run accessibility tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 7000 --silent" \
+            "npx wait-on http://localhost:7000 && npx playwright test --grep 'accessibility|Accessibility' --project=chromium"
+
+      - name: Upload accessibility results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: accessibility-results
+          path: |
+            test-results/
+            playwright-report/
+          retention-days: 7
+
+  visual-regression:
+    timeout-minutes: 45
+    runs-on: ubuntu-latest
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Run visual regression tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 7000 --silent" \
+            "npx wait-on http://localhost:7000 && npx playwright test tests/e2e/visual-regression.spec.ts --project=chromium"
+
+      - name: Upload visual test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: visual-regression-results
+          path: |
+            test-results/
+            playwright-report/
+          retention-days: 7
+
+  mobile-test:
+    timeout-minutes: 45
+    runs-on: ubuntu-latest
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Run mobile tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 7000 --silent" \
+            "npx wait-on http://localhost:7000 && npx playwright test --project='Mobile Chrome' --project='Mobile Safari'"
+
+      - name: Upload mobile test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: mobile-test-results
+          path: |
+            test-results/
+            playwright-report/
+          retention-days: 7
+
+  report:
+    if: always()
+    needs: [test, accessibility-test, visual-regression, mobile-test]
+    runs-on: ubuntu-latest
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: artifacts
+
+      - name: Generate consolidated report
+        run: |
+          echo "# Test Results Summary" > test-summary.md
+          echo "" >> test-summary.md
+          echo "## Browser Tests" >> test-summary.md
+          for browser in chromium firefox webkit; do
+            if [ -d "artifacts/playwright-results-$browser" ]; then
+              echo "- ✅ $browser tests completed" >> test-summary.md
+            else
+              echo "- ❌ $browser tests failed" >> test-summary.md
+            fi
+          done
+          echo "" >> test-summary.md
+          echo "## Accessibility Tests" >> test-summary.md
+          if [ -d "artifacts/accessibility-results" ]; then
+            echo "- ✅ Accessibility tests completed" >> test-summary.md
+          else
+            echo "- ❌ Accessibility tests failed" >> test-summary.md
+          fi
+          echo "" >> test-summary.md
+          echo "## Visual Regression Tests" >> test-summary.md
+          if [ -d "artifacts/visual-regression-results" ]; then
+            echo "- ✅ Visual regression tests completed" >> test-summary.md
+          else
+            echo "- ❌ Visual regression tests failed" >> test-summary.md
+          fi
+          echo "" >> test-summary.md
+          echo "## Mobile Tests" >> test-summary.md
+          if [ -d "artifacts/mobile-test-results" ]; then
+            echo "- ✅ Mobile tests completed" >> test-summary.md
+          else
+            echo "- ❌ Mobile tests failed" >> test-summary.md
+          fi
+
+      - name: Upload consolidated report
+        uses: actions/upload-artifact@v4
+        with:
+          name: consolidated-test-report
+          path: test-summary.md
+          retention-days: 30

package/.github/workflows/static.yml

@@ -0,0 +1,62 @@
+# .github/workflows/deploy-github-pages.yaml
+
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [develop]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        
+      - name: Install dependencies
+        run: npm ci
+        
+      - name: Build Storybook
+        run: npm run build-storybook
+        
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./storybook-static
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/develop' && github.event_name == 'push'
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +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];

package/.storybook/storyWrapper.vue

@@ -0,0 +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>

package/.storybook/withVuetifyTheme.decorator.ts

@@ -0,0 +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 }),
+      },
+    );
+  };
+};

package/App.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="app">
+    <div class="element-container">
+      <div style="width: 100%; display: flex; flex-direction: column; gap: 20px;">
+        <Card :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" />
+        <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" />
+        <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" />
+      </div>
+     </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import Card from '@/components/Appointment/Card/Card.vue';
+import type { AppointmentData } from '@/types';
+
+const value1 = ref<AppointmentData>({
+  id: "1",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "upcoming", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: '',
+    imageSrc: ''
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value2 = ref<AppointmentData>({
+  id: "2",
+  patientName: "Erika Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "cancelled", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: '',
+    imageSrc: ''
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value3 = ref<AppointmentData>({
+  id: "3",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "past", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: '',
+    imageSrc: ''
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+</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

@@ -0,0 +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.

package/heroicons.ts

@@ -0,0 +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;

package/index.html

@@ -0,0 +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>

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@zap-wunschlachen/wl-shared-components",
+  "version": "1.0.0",
+  "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"
+  },
+  "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"
+  }
+}