Add storybook with example

.eslintrc.js

@@ -5,7 +5,8 @@ module.exports = {
     },
     "extends": [
         "standard-with-typescript",
-        "plugin:react/recommended"
+        "plugin:react/recommended",
+        "plugin:storybook/recommended"
     ],
     "overrides": [
         {

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../assets/js/**/*.mdx", "../assets/js/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

assets/js/app/store/index.ts

@@ -32,9 +32,9 @@ export const injectSliceWithState = (newSlice: AnySliceLike): CombinedSliceReduc
   return rootReducer
 }
 
+export type AppStore = typeof store
 export type AppDispatch = typeof store.dispatch
 export type RootState = ReturnType<typeof rootReducer>
 
-export type AppStore = typeof store
 export const useAppDispatch: () => AppDispatch = useDispatch
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

assets/js/components/example/example.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { Example as ExampleComponent } from './example';
+
+export default {
+  title: 'Pimcore workbench/Example',
+  component: ExampleComponent,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} as Meta;
+
+export const _default = {}

assets/js/components/example/example.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 
 interface ExampleProps {
   value: string
+  prefix?: string
 }
 
-export const Example = ({ value }: ExampleProps): React.JSX.Element => {
+export const Example = ({ value, prefix }: ExampleProps): React.JSX.Element => {
   return (
     <div>
-      <h1>Hello, {value}!</h1>
+      <h1>Hello, {prefix} {value}!</h1>
     </div>
   )
 }

assets/js/modules/app/utils/app-runner.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from '../components/app'