[Studio] Add Studio UI frontend

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,4 @@
+## Changes in this pull request
+Resolves #
+
+## Additional info

.github/workflows/studio-frontend-build.yaml

@@ -0,0 +1,156 @@
+name: "Studio Frontend Build"
+
+on:
+  push:
+    branches:
+      - "[0-9]+.[0-9]+"
+      - "[0-9]+.x"
+      - "feature-*"
+      - "nightly"
+      - "studio"
+    paths:
+      - "assets/studio/**"
+  pull_request_target:
+    branches:
+      - "[0-9]+.[0-9]+"
+      - "[0-9]+.x"
+      - "*_actions"
+      - "feature-*"
+      - "nightly"
+    paths:
+      - "assets/studio/**"
+  workflow_dispatch:
+
+env:
+ BRANCH_NAME: ${{ github.head_ref || github.ref_name }} 
+
+permissions:
+  contents: read
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ env.BRANCH_NAME }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Cache npm dependencies
+        uses: actions/cache@v4
+        with:
+          path: ./assets/studio/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
+        working-directory: ./assets/studio
+        run: npm ci
+
+  lint:
+    needs: install
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ env.BRANCH_NAME }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Cache npm dependencies
+        uses: actions/cache@v4
+        with:
+          path: ./assets/studio/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Run code linting
+        working-directory: ./assets/studio
+        run: npm run lint-fix
+
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+            commit_message: Apply eslint-fixer changes
+
+  check-types:
+    needs: install
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ env.BRANCH_NAME }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Cache npm dependencies
+        uses: actions/cache@v4
+        with:
+          path: ./assets/studio/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Run code linting
+        working-directory: ./assets/studio
+        run: npm run check-types
+
+  build:
+    needs: 
+      - lint
+      - check-types
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ env.BRANCH_NAME }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Cache npm dependencies
+        uses: actions/cache@v4
+        with:
+          path: ./assets/studio/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Run production build
+        working-directory: ./assets/studio
+        run: npm run build
+
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          file_pattern: './src/Resources/public/studio/'
+          commit_message: Automatic frontend build

.gitignore

@@ -33,4 +33,7 @@ Thumbs.db
 /.env
 /.htaccess
 /auth.json
-/config.json
+/config.json
+
+# studio related
+/assets/studio/node_modules

assets/studio/.eslintrc.js

@@ -0,0 +1,91 @@
+module.exports = {
+    "ignorePatterns": ['*.gen.ts'],
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "standard-with-typescript",
+        "plugin:react/recommended",
+        "plugin:storybook/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        },
+
+        {
+            "files": ["*.spec.ts", "*.spec.tsx", "*.test.ts", "*.test.tsx"],
+            "env": {
+              "jest": true
+            }
+        }
+    ],
+    "plugins": [
+        "react",
+        "header"
+    ],
+    "rules": {
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/unbound-method": "off",
+        'react/jsx-boolean-value': 'error',
+        'react/jsx-closing-bracket-location': 'error',
+        'react/jsx-curly-spacing': [ 'error', 'always' ],
+        'react/jsx-equals-spacing': 'error',
+        'react/jsx-first-prop-new-line': 'error',
+        'react/jsx-indent-props': [ 'error', 2 ],
+        'react/jsx-indent': [ 'error', 2 ],
+        'react/jsx-key': 'error',
+        'react/jsx-max-props-per-line': [ 'error', { 'maximum': 1 }],
+        'react/jsx-no-literals': 'off',
+        'react/jsx-no-target-blank': 'error',
+        'react/jsx-pascal-case': 'error',
+        'react/jsx-sort-props': 'error',
+        'react/jsx-tag-spacing': 'error',
+        'react/jsx-no-constructed-context-values': 'error',
+        'react/jsx-wrap-multilines': [
+            'error', 
+            {
+                "declaration": "parens-new-line",
+                "assignment": "parens-new-line",
+                "return": "parens-new-line",
+                "arrow": "parens-new-line",
+                "condition": "parens-new-line",
+                "logical": "parens-new-line",
+                "prop": "ignore"
+            }
+        ],
+        'header/header': [2, 'block', [
+            '*',
+            ' * This source file is available under the terms of the',
+            ' * Pimcore Open Core License (POCL)',
+            ' * Full copyright and license information is available in',
+            ' * LICENSE.md which is distributed with this source code.',
+            ' *',
+            ' *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)',
+            ' *  @license    Pimcore Open Core License (POCL)',
+            ' '
+        ], 2]
+    }
+}

assets/studio/build/api/openapi-config.ts

@@ -0,0 +1,37 @@
+/**
+ * Pimcore
+ *
+ * This source file is available under two different licenses:
+ * - Pimcore Open Core License (POCL)
+ * - Pimcore Commercial License (PCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+ *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+ */
+
+import { type ConfigFile } from '@rtk-query/codegen-openapi'
+import { EndpointMatcherFunction } from '@rtk-query/codegen-openapi/lib/types';
+
+const pathMatcher = (pattern: RegExp): EndpointMatcherFunction => {
+  return (name, definition) => {
+    return pattern.test(definition.path);
+  }
+}
+
+const config: ConfigFile = {
+  schemaFile: './docs.jsonopenapi.json',
+  apiFile: '@pimcore/studio-ui-bundle/api',
+  apiImport: 'api',
+  outputFiles: {
+    '../../js/src/modules/data-importer/data-importer-api-slice.gen.ts': {
+      filterEndpoints: pathMatcher(/bundle\/data-importer\/(config|connection)/i)
+    },
+  },
+  exportName: 'api',
+  hooks: true,
+  tag: true
+}
+
+export default config

assets/studio/js/src/config/service-ids.ts

@@ -0,0 +1,17 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+/**
+ * Service IDs for the Data Importer Bundle
+ * Centralized location for all dependency injection service identifiers
+ */
+export const bundleServiceIds = {
+  'DataImporter/DynamicTypes/Adapter/DataImporterDataObject': 'DataImporter/DynamicTypes/Adapter/DataImporterDataObject'
+} as const

assets/studio/js/src/main.ts

@@ -0,0 +1,10 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+// eslint-disable-next-line header/header