sync component library

packages/component-library/.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

packages/component-library/.eslintignore

@@ -0,0 +1,6 @@
+vue.config.js
+jest.config.js
+rollup.config.js
+node_modules/
+.eslintrc.cjs
+dist/

packages/component-library/.eslintrc.cjs

@@ -0,0 +1,34 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    'plugin:storybook/recommended',
+    'plugin:vitest-globals/recommended',
+    'plugin:vitest/all',
+    'prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  plugins: ['vitest'],
+  env: {
+    node: true,
+    "vitest-globals/env": true
+  },
+  rules: {
+    "vitest/consistent-test-filename": ["error",{
+      pattern: ".*\\.spec\\.ts$",
+    }],
+    "vitest/no-hooks": "off",
+    "vitest/require-hook": "off",
+    "vitest/prefer-expect-assertions": "off",
+    "vitest/max-expects": "off",
+    "vitest/prefer-strict-equal": "error",
+    "vitest/no-focused-tests": "error",
+  }
+}

packages/component-library/.gitignore

@@ -0,0 +1,35 @@
+.DS_Store
+node_modules
+/dist
+.yalc/
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Cache files
+playwright-cache
+
+# Editor directories and files
+yalc.lock
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+storybook-static
+test-results/
+playwright-report/
+__snapshots__/__diff_output__/
+__snapshots__/__received__/
+coverage

packages/component-library/.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+.eslintrc.cjs
+dist/

packages/component-library/.prettierrc

@@ -0,0 +1 @@
+{}

packages/component-library/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

packages/component-library/.storybook/manager-head.html

@@ -0,0 +1,26 @@
+<style>
+  /*
+   * Hide all interaction tests in the menu
+   * in development
+   */
+  body:not(.show-interaction-tests) [id$="interaction-tests"],
+  body:not(.show-interaction-tests) [data-parent-id^="interaction-tests"] {
+    display: none !important;
+  }
+
+  body.dark * {
+    color-scheme: dark;
+  }
+
+  body.light * {
+    color-scheme: light;
+  }
+</style>
+
+<script>
+  setTimeout(() => {
+    if (window.CONFIG_TYPE === "DEVELOPMENT") {
+      document.body.classList.add("show-interaction-tests");
+    }
+  }, 150);
+</script>

packages/component-library/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import { darkTheme, lightTheme } from "./shopwareTheme";
+
+addons.setConfig({
+  theme: darkTheme,
+});

packages/component-library/.storybook/preview.ts

@@ -0,0 +1,43 @@
+import type { Preview } from "@storybook/vue3";
+import "~/src/components/assets/scss/all.scss";
+import { darkTheme, lightTheme } from "./shopwareTheme";
+import { setup } from "@storybook/vue3";
+import { createI18n } from "vue-i18n";
+import DeviceHelperPlugin from "./../src/plugin/device-helper.plugin";
+
+const i18n = createI18n({
+  // something vue-i18n options here ...
+  globalInjection: true,
+  locale: "en",
+  fallbackLocale: "en",
+  messages: {
+    en: {},
+    de: {},
+  },
+  allowComposition: true,
+});
+
+setup((app) => {
+  app.use(i18n);
+  app.use(DeviceHelperPlugin);
+});
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+      expanded: true,
+      sort: "requiredFirst",
+    },
+    darkMode: {
+      dark: { ...darkTheme },
+      light: { ...lightTheme },
+    },
+  },
+};
+
+export default preview;

packages/component-library/.storybook/shopwareTheme.js

@@ -0,0 +1,84 @@
+import { create } from "@storybook/theming";
+import { color, typography, background } from "@storybook/theming";
+
+export const darkTheme = create({
+  base: "dark",
+
+  // Brand specifc stuff
+  brandTitle: "Shopware",
+  brandUrl: "https://docs.shopware.com",
+  brandImage:
+    "https://shopware.github.io/meteor-component-library/shopware_docs_horizontal_white.svg",
+  brandTarget: "_self",
+
+  // Storybook-specific color palette
+  colorPrimary: "#BABABA", // coral
+  colorSecondary: "#5DBBFF", // ocean
+
+  // UI
+  appBg: "#2f2f2f",
+  appContentBg: "#29333d",
+  appBorderColor: "rgba(255,255,255,.1)",
+  appBorderRadius: 4,
+
+  // Fonts
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
+
+  // Text colors
+  textColor: color.lightest,
+  textInverseColor: "#29333d",
+  textMutedColor: "#8599ad",
+
+  // Toolbar default and active colors
+  barTextColor: "#999999",
+  barSelectedColor: "#5DBBFF",
+  barBg: "#29333d",
+
+  // Form colors
+  inputBg: "#3f3f3f",
+  inputBorder: "rgba(0,0,0,.3)",
+  inputTextColor: color.lightest,
+  inputBorderRadius: 4,
+});
+
+export const lightTheme = create({
+  base: "light",
+
+  // Brand specifc stuff
+  brandTitle: "Shopware",
+  brandUrl: "https://docs.shopware.com",
+  brandImage:
+    "https://shopware.github.io/meteor-component-library/shopware_docs_horizontal_dark.svg",
+  brandTarget: "_self",
+
+  // Storybook-specific color palette
+  colorPrimary: "#BABABA", // coral
+  colorSecondary: "#5DBBFF", // ocean
+
+  // UI
+  appBg: "#f9fafb",
+  appContentBg: color.lightest,
+  appBorderColor: color.border,
+  appBorderRadius: 4,
+
+  // Fonts
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
+
+  // Text colors
+  textColor: "#29333d",
+  textInverseColor: color.lightest,
+  textMutedColor: "#52667a",
+
+  // Toolbar default and active colors
+  barTextColor: "#8599ad",
+  barSelectedColor: "#5DBBFF",
+  barBg: color.lightest,
+
+  // Form colors
+  inputBg: color.lightest,
+  inputBorder: color.border,
+  inputTextColor: "#29333d",
+  inputBorderRadius: 4,
+});

packages/component-library/.storybook/test-runner.ts

@@ -0,0 +1,44 @@
+const { toMatchImageSnapshot } = require("jest-image-snapshot");
+
+const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
+const customReceivedDir = `${process.cwd()}/__snapshots__/__received__`;
+
+module.exports = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async preRender(page, context) {
+    await page.setViewportSize({ width: 850, height: 650 });
+
+    // use bigger viewport for data-table
+    if (context.id.startsWith("interaction-tests-table-and-list")) {
+      await page.setViewportSize({ width: 1600, height: 900 });
+    }
+  },
+  async postRender(page, context) {
+    // Render screenshots only for interaction tests with Visual Test name
+    if (!context.id.startsWith("interaction-tests") || !context.name.startsWith("Visual Test")) {
+      return;
+    }
+
+    // wait 300ms before screenshot to make sure any pending animation is finished
+    await (() => new Promise((resolve) => setTimeout(resolve, 300)))();
+
+    const image = await page.screenshot({
+      animations: "disabled",
+    });
+
+    // @ts-expect-error
+    expect(image).toMatchImageSnapshot({
+      comparisonMethod: "ssim",
+      customDiffConfig: { ssim: "fast" },
+      failureThreshold: 0.01,
+      failureThresholdType: "percent",
+      customSnapshotsDir,
+      blur: 0.001,
+      customSnapshotIdentifier: context.id + "-snap",
+      storeReceivedOnFailure: true,
+      customReceivedDir: customReceivedDir,
+    });
+  },
+};

packages/component-library/CHANGELOG.md

@@ -0,0 +1,53 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [3.0.0] - 16.02.2024
+
+- Updated Vue version from 2 to 3
+- Updated Storybook build from Webpack to Vite
+- Changed Jest to Vitest
+
+## [2.2.0] - 17.10.2023
+
+- Added SwPagination and DeviceHelperPlugin to public API
+- Fix sw-tab emitting 'new-item-active' event
+
+## [2.1.2] - 06.09.2023
+
+- Fix indeterminate state of `sw-checkbox`
+
+## [2.1.1] - 26.04.2023
+
+- Fixed broken `sw-text-field` inheritance option
+- Fixed missing bannerIndex property in `sw-banner`
+- Fixed `sw-select` single select behaviour
+
+## [2.1.0] - 21.03.2023
+
+- Fixed wrong timezone handling in datepicker
+
+## [2.0.1] - 25.01.2022
+
+- Fixed wrong bundling of UUID utils which don't work in browser
+
+## [2.0.0] - 09.01.2022
+
+### BREAKING CHANGES
+
+- Changed default font from Source-Sans-Pro to Inter
+
+## [1.0.2] - 30.12.2022
+
+### Changed
+
+- Changed `visibleValues` computed property in `sw-select` to correctly display selected value for single select component.
+
+### BREAKING CHANGES
+
+- Updated Vue version to 2.7
+
+### Changed
+
+- Updated Webpack in Storybook to version 5
+- Changed drop-shadow to box-shadow in "sw-card" to improve performance in Safari