Merge branch 'main' into implement-design-tokens-for-button-component

.github/workflows/release.yml

@@ -5,6 +5,10 @@ on:
     branches:
       - main
 
+permissions:
+  contents: write
+  id-token: write
+
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
@@ -43,3 +47,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true

.github/workflows/tests.yml

@@ -34,6 +34,9 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
+      - name: Build packages
+        run: npx turbo run build
+
       - name: Check formatting
         run: pnpx turbo run format:check
 

.github/workflows/update-tokens.yml

@@ -0,0 +1,45 @@
+name: Update tokens
+
+on: workflow_dispatch
+
+env:
+  FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
+  PRIMITIVE_TOKENS_FILE_KEY: ${{ secrets.TOKENS__PRIMITIVE_TOKENS_FILE_KEY }}
+  ADMIN_TOKENS_FILE_KEY: ${{ secrets.TOKENS__ADMIN_TOKENS_FILE_KEY }}
+
+jobs:
+  update:
+    name: Update icons
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
+
+      - name: Update tokens
+        run: pnpm --filter @shopware-ag/meteor-tokens run start
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v6
+        with:
+          commit-message: Update tokens
+          committer: Dennis Mader <${{ secrets.ICON_KIT__COMMITTER }}>
+          author: Dennis Mader <${{ secrets.ICON_KIT__COMMITTER }}>
+          branch: update-tokens
+          delete-branch: true
+          branch-suffix: timestamp
+          title: Update icons
+          assignees: Weltraumakustik

README.md

@@ -4,7 +4,7 @@ Meteor is Shopware’s open-source design system that drives our commerce soluti
 Extend and customise every aspect of Shopware – create elegant, delightful, and
 accessible experiences. There are no limits to your imagination.
 
-## How to navigate through this project 
+## How to navigate through this project
 
 This repository contains all project related to the Meteor Design System used and maintained by shopware and it's contributors.
 

package.json

@@ -1,15 +1,16 @@
 {
   "name": "meteor",
   "version": "0.0.0",
+  "author": "shopware AG",
   "private": true,
   "description": "The monorepo that contains all Meteor related projects",
-  "scripts": {},
   "keywords": [],
   "license": "MIT",
-  "devDependencies": {
-    "turbo": "^1.12.2"
-  },
+  "scripts": {},
   "dependencies": {
     "@changesets/cli": "^2.27.1"
+  },
+  "devDependencies": {
+    "turbo": "^1.12.2"
   }
 }

packages/admin-sdk-example-app/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
+  globals: {
+    EntitySchema: true,
+  },
+  extends: [
+    // add more generic rulesets here, such as:
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/recommended'
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+  }
+}

packages/admin-sdk-example-app/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.turbo
+.env
+chrome/
+.idea/
+.DS_Store

packages/admin-sdk-example-app/CHANGELOG.md

@@ -0,0 +1,18 @@
+# meteor-admin-sdk-example-app
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [4048af6]
+  - @shopware-ag/meteor-admin-sdk@5.0.1
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [e90e2c4]
+- Updated dependencies [957e419]
+- Updated dependencies [6e65a4b]
+- Updated dependencies [30d0128]
+  - @shopware-ag/meteor-admin-sdk@5.0.0

packages/admin-sdk-example-app/MeteorAdminSDKExampleApp/manifest.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/trunk/src/Core/Framework/App/Manifest/Schema/manifest-1.0.xsd">
+    <meta>
+        <name>MeteorAdminSDKExampleApp</name>
+        <label>Meteor Admin SDK Example App</label>
+        <description>This is an example app to show you a boilerplate structure for your admin extensions.</description>
+        <author>Shopware AG</author>
+        <copyright>(c) by Shopware AG</copyright>
+        <version>1.0.0</version>
+        <license>MIT</license>
+    </meta>
+
+    <setup>
+        <registrationUrl>http://localhost:8888/authorize</registrationUrl>
+        <secret>testSecret</secret>
+    </setup>
+
+    <admin>
+        <base-app-url>http://localhost:8888/index.html</base-app-url>
+    </admin>
+
+    <permissions>
+        <read>product_manufacturer</read>
+        <update>product_manufacturer</update>
+        <create>product_manufacturer</create>
+        <delete>product_manufacturer</delete>
+        <read>product</read>
+        <update>product</update>
+        <create>product</create>
+        <delete>product</delete>
+        <read>product_manufacturer_translation</read>
+        <update>product_manufacturer_translation</update>
+        <create>product_manufacturer_translation</create>
+        <delete>product_manufacturer_translation</delete>
+        <read>cms_slot</read>
+        <update>cms_slot</update>
+        <create>cms_slot</create>
+        <delete>cms_slot</delete>
+    </permissions>
+</manifest>

packages/admin-sdk-example-app/README.md

@@ -0,0 +1,18 @@
+# Meteor Admin SDK Example App
+
+This package contains an example app and server. It uses the [Meteor Admin SDK](https://github.com/shopware/meteor/tree/main/packages/admin-sdk) to extend the administration.
+
+## Server setup
+
+1. Check out the [meteor monorepo](https://github.com/shopware/meteor).
+2. Change your working directory to the mono repo root.
+3. Run `pnpm install` to install all dependencies.
+4. Build all packages with turbo, using `npx turbo run build`. This can take a minute or two depending on your hardware.
+5. Start the development server with `pnpm --filter meteor-admin-sdk-example-app run dev`.
+
+## App installation
+
+1. Copy the folder `MeteorAdminSDKExampleApp` to the `custom/apps` folder inside your Shopware installation
+2. Install the App in Shopware: `bin/console app:install MeteorAdminSDKExampleApp`
+
+Now you should see the app installed when opening the Shopware Admin and looking in "Extensions" -> "My Extensions".

packages/admin-sdk-example-app/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "meteor-admin-sdk-example-app",
+  "version": "1.0.2",
+  "description": "",
+  "license": "ISC",
+  "author": "shopware AG",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]:shopware/meteor.git"
+  },
+  "scripts": {
+    "dev": "ts-node src/server.ts",
+    "lint:all": "npm run lint:eslint && vue-tsc --noEmit",
+    "lint:types": "vue-tsc --noEmit",
+    "lint:eslint": "eslint --ext .js,.ts,.vue src"
+  },
+  "dependencies": {
+    "@shopware-ag/entity-schema-types": "^5.8.6",
+    "@shopware-ag/meteor-admin-sdk": "workspace:*",
+    "@shopware-ag/meteor-component-library": "workspace:*",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "express": "^4.18.2",
+    "shopware-app-server-sdk": "^0.0.15",
+    "vite": "^5.1.4",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.9.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^18.19.19",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.22.0",
+    "nodemon": "^2.0.22",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
+  }
+}

packages/admin-sdk-example-app/src/frontend/cms/ex-dailymotion/ex-dailymotion-config.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h2>
+      Config!
+    </h2>
+
+    Video-Code: <input
+      v-model="dailyUrl"
+      type="text"
+    ><br>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref, computed } from 'vue';
+import { data } from '@shopware-ag/meteor-admin-sdk';
+import EX_DAILYMOTION_CONSTANTS from './ex-dailymotion-constants';
+
+const dailyUrlValue = ref('');
+const dailyUrlSource = ref('static');
+
+const dataSelectors = [
+  'config.dailyUrl.value',
+  'config.dailyUrl.source',
+];
+
+const dataId = computed(() => {
+  const params = new URLSearchParams(window.location.search);
+  const elementId = params.get('elementId');
+
+  if (!elementId) {
+    return EX_DAILYMOTION_CONSTANTS.PUBLISHING_KEY;
+  }
+
+  return EX_DAILYMOTION_CONSTANTS.PUBLISHING_KEY + '__' + elementId;
+});
+
+const dailyUrl = computed({
+  get(): string {
+      return dailyUrlValue.value || '';
+  },
+
+  set(value: string): void {
+      dailyUrlValue.value = value;
+
+      data.update({
+          id: dataId.value,
+          data: {
+            config: {
+              dailyUrl: {
+                value: dailyUrlValue.value,
+                source: dailyUrlSource.value,
+              }
+            }
+          },
+      });
+  }
+});
+
+onBeforeMount(async () => {
+  const value = await data.get({
+    id: dataId.value,
+    selectors: dataSelectors,
+  }) as {
+    'config.dailyUrl.value': string,
+    'config.dailyUrl.source': string,
+  };
+
+  if (value) {
+    dailyUrlValue.value = value['config.dailyUrl.value'];
+    dailyUrlSource.value = value['config.dailyUrl.source'];
+  }
+});
+</script>

packages/admin-sdk-example-app/src/frontend/cms/ex-dailymotion/ex-dailymotion-constants.ts

@@ -0,0 +1,5 @@
+const CMS_DAILYMOTION_ELEMENT_NAME = 'ex-dailymotion';
+export default {
+    CMS_DAILYMOTION_ELEMENT_NAME,
+    PUBLISHING_KEY: `${CMS_DAILYMOTION_ELEMENT_NAME}__config-element`,
+};