diff --git a/.gitignore b/.gitignore
index d9a6568fb..6a3693b3a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,7 +29,9 @@ Thumbs.db
/var
/vendor
+# Frontend related files
assets/node_modules
+assets/dist/build
# code style fixer
.php_cs
diff --git a/assets/.storybook/main.ts b/assets/.storybook/main.ts
index f1b3e5b12..e0520aed1 100644
--- a/assets/.storybook/main.ts
+++ b/assets/.storybook/main.ts
@@ -11,11 +11,15 @@
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/
+import type { Options } from '@swc/core';
import type { StorybookConfig } from "@storybook/react-webpack5";
import path from "path";
const config: StorybookConfig = {
stories: ["../js/**/*.mdx", "../js/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+ typescript: {
+
+ },
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
@@ -38,7 +42,7 @@ const config: StorybookConfig = {
webpackFinal: async (config) => {
config.resolve!.alias = {
...config.resolve!.alias,
- "@Pimcore": path.resolve(__dirname, "../js/src"),
+ "@Pimcore": path.resolve(__dirname, "../js/src/core"),
};
// disable whatever is already set to load SVGs
@@ -65,6 +69,22 @@ const config: StorybookConfig = {
});
return config;
+ },
+
+ // Enable typescript decorators for storybook
+ swc: (config: Options): Options => {
+ return {
+ ...config,
+ jsc: {
+ ...config.jsc,
+ parser: {
+ syntax: "typescript",
+ tsx: true,
+ dynamicImport: true,
+ decorators: true,
+ },
+ },
+ };
}
};
diff --git a/assets/.storybook/preview.tsx b/assets/.storybook/preview.tsx
index 21fd04e9e..0d4834a49 100644
--- a/assets/.storybook/preview.tsx
+++ b/assets/.storybook/preview.tsx
@@ -11,12 +11,23 @@
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/
-import React from "react";
-import '../js/src/bootstrap';
+import React, { useEffect, useState } from "react";
+import '../js/src/core/bootstrap';
import type { Preview } from "@storybook/react";
import "../css/globals.css";
-import { GlobalProvider } from "../js/src/modules/app/global-provider";
+import { GlobalProvider } from "../js/src/core/modules/app/global-provider";
import { App } from 'antd'
+import { Pimcore } from '../js/src/core/app/public-api'
+import { moduleSystem } from "../js/src/core/app/module-system/module-system";
+
+declare global {
+ interface Window {
+ Pimcore: typeof Pimcore
+ }
+}
+
+window.Pimcore = Pimcore;
+moduleSystem.initModules();
const preview: Preview = {
parameters: {
@@ -29,13 +40,15 @@ const preview: Preview = {
},
decorators: [
- (Story) => (
-
-
-
-
-
- ),
+ (Story) => {
+ return (
+
+
+
+
+