WIP install storypbook

.gitignore

@@ -33,3 +33,5 @@ sass-lint.html
 .phpunit.cache
 coverage
 .phpunit.result.cache
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,43 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    "../Build/Sources/**/*.mdx",
+    "../Build/Sources/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+    webpackFinal: async (config, { configType }) => {
+        // `configType` hat den Wert 'DEVELOPMENT' oder 'PRODUCTION'
+        // Du kannst verschiedene Konfigurationen für production und development Mode haben.
+
+        // JSX- und Babel-Konfiguration:
+        config.module.rules.push({
+            test: /\.(js|jsx)$/,
+            exclude: /node_modules/,
+            use: [{
+                loader: 'babel-loader',
+                options: {
+                    presets: ['@babel/preset-env', '@babel/preset-react']
+                }
+            }]
+        });
+
+        // Rückgabe der finalen Konfiguration
+        return config;
+    },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,15 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

Build/Sources/components/accordions/AuthorsListAccordion.jsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { SingleAuthorComponent } from "../SingleComponents/SingleAuthorComponent";
 

Build/Sources/components/accordions/AuthorsListAccordion.stories.jsx

@@ -0,0 +1,37 @@
+import { AuthorsListAccordion } from './AuthorsListAccordion';
+import React from 'react';
+
+import {ValidationErrorsContext} from "../../App";
+
+export default {
+    title: 'Accordions/AuthorsListAccordion',
+    component: AuthorsListAccordion,
+    args: {
+        authors: [
+            {
+                id: 1,
+                name: 'John Doe',
+                email: ''
+            },
+            // Füge hier weitere Autoren hinzu, falls notwendig
+        ],
+        addAuthorsHandler: () => console.log("Add author handler called"), // Dummy-Handler, ersetze dies durch deine tatsächliche Funktion
+    },
+    parameters: {
+        label: 'centered'
+    },
+    tags: ['autodocs'],
+};
+
+const WithMyContext = ({ contextValue, children }) => (
+    <ValidationErrorsContext.Provider value={contextValue}>
+        {children}
+    </ValidationErrorsContext.Provider>
+);
+
+export const Primary = (args) => (
+    <WithMyContext contextValue={{ setValidationErrors: () => console.log("Fehler setzen") }}>
+        <AuthorsListAccordion {...args} />
+    </WithMyContext>
+);
+

Build/Sources/components/forms/ButtonComponent.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const ButtonComponent = ({label}) => {
+    return (
+        <button
+            className="btn btn-primary"
+        >
+            {label}
+        </button>
+    );
+}

Build/Sources/components/forms/ButtonComponent.stories.jsx

@@ -0,0 +1,17 @@
+import { ButtonComponent } from './ButtonComponent';
+
+export default {
+    title: 'Example/Button',
+    component: ButtonComponent,
+    parameters: {
+        label: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export const Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};

package.json

@@ -1,79 +1,94 @@
 {
-    "name": "extension_builder_12_react",
-    "version": "1.0.0",
-    "description": "Extension-Builder",
-    "main": "public/index.php",
-    "scripts": {
-        "sass-lint": "sass-lint -c sass-lint.yml -q '**/*.scss' --verbose",
-        "css-watch": "node-sass --watch --output-style compressed --include-path scss  ./Resources/Public/Scss/extensionbuilder.scss ./Resources/Public/Css/extensionbuilder.css",
-        "css-build": "node-sass --output-style compressed --include-path scss ./Resources/Public/Scss/extensionbuilder.scss ./Resources/Public/Css/extensionbuilder.css",
-        "dev":   "webpack --config webpack/webpack.dev.config.js",
-        "build": "webpack --config webpack/webpack.prod.config.js",
-        "watch": "webpack --config webpack/webpack.dev.config.js --watch",
-        "test": "npx jest --watch",
-        "eject": "react-scripts eject"
-    },
-    "author": "Philipp Kuhlmay",
-    "license": "",
-    "devDependencies": {
-        "@babel/core": "^7.22.8",
-        "@babel/preset-env": "^7.22.7",
-        "@babel/preset-react": "^7.22.5",
-        "@fortawesome/fontawesome-svg-core": "^6.4.0",
-        "@fortawesome/free-brands-svg-icons": "^6.4.0",
-        "@fortawesome/free-solid-svg-icons": "^6.4.0",
-        "@fortawesome/react-fontawesome": "^0.2.0",
-        "@testing-library/jest-dom": "^5.17.0",
-        "@testing-library/react": "^14.0.0",
-        "@testing-library/user-event": "^14.0.0",
-        "ajv": "^8.12.0",
-        "autoprefixer": "^10.4.14",
-        "axios": "^1.4.0",
-        "babel-loader": "^9.1.2",
-        "classnames": "^2.3.2",
-        "css-loader": "^6.8.1",
-        "dart-sass": "^1.25.0",
-        "gulp-cli": "^2.3.0",
-        "merge": "^2.1.1",
-        "mini-css-extract-plugin": "^2.7.6",
-        "minimist": "^1.2.8",
-        "postcss-loader": "^7.3.0",
-        "react": "^18.2.0",
-        "react-app-rewired": "^2.2.1",
-        "react-dom": "^18.2.0",
-        "react-draggable": "^4.4.5",
-        "react-scripts": "5.0.1",
-        "react-transition-group": "^4.4.5",
-        "reactflow": "^11.7.0",
-        "sass-lint": "^1.13.1",
-        "sass-loader": "*",
-        "shelljs": "^0.8.5",
-        "style-loader": "^3.3.3",
-        "terser-webpack-plugin": "^5.3.9",
-        "tw-elements": "^1.0.0-beta2",
-        "web-vitals": "^3.0.0",
-        "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4",
-        "webpack-merge": "^5.10.0",
-        "webpack-remove-empty-scripts": "^1.0.3"
-    },
-    "sasslintConfig": "sass-lint.yml",
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "dependencies": {
-        "bootstrap": "^5.3.2",
-        "classnames": "^2.3.2",
-        "react-bootstrap": "^2.9.1",
-        "uuid": "^9.0.0"
-    }
+  "name": "extension_builder_12_react",
+  "version": "1.0.0",
+  "description": "Extension-Builder",
+  "main": "public/index.php",
+  "scripts": {
+    "sass-lint": "sass-lint -c sass-lint.yml -q '**/*.scss' --verbose",
+    "css-watch": "node-sass --watch --output-style compressed --include-path scss  ./Resources/Public/Scss/extensionbuilder.scss ./Resources/Public/Css/extensionbuilder.css",
+    "css-build": "node-sass --output-style compressed --include-path scss ./Resources/Public/Scss/extensionbuilder.scss ./Resources/Public/Css/extensionbuilder.css",
+    "dev": "webpack --config webpack/webpack.dev.config.js",
+    "build": "webpack --config webpack/webpack.prod.config.js",
+    "watch": "webpack --config webpack/webpack.dev.config.js --watch",
+    "test": "npx jest --watch",
+    "eject": "react-scripts eject",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "Philipp Kuhlmay",
+  "license": "",
+  "devDependencies": {
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
+    "@babel/preset-react": "^7.22.5",
+    "@chromatic-com/storybook": "^1.3.1",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/blocks": "^8.0.6",
+    "@storybook/preset-create-react-app": "^8.0.6",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-webpack5": "^8.0.6",
+    "@storybook/test": "^8.0.6",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "ajv": "^8.12.0",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.4.0",
+    "babel-loader": "^9.1.2",
+    "classnames": "^2.3.2",
+    "css-loader": "^6.8.1",
+    "dart-sass": "^1.25.0",
+    "gulp-cli": "^2.3.0",
+    "merge": "^2.1.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "minimist": "^1.2.8",
+    "postcss-loader": "^7.3.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.5",
+    "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
+    "reactflow": "^11.7.0",
+    "sass": "^1.72.0",
+    "sass-lint": "^1.13.1",
+    "sass-loader": "*",
+    "shelljs": "^0.8.5",
+    "storybook": "^8.0.6",
+    "style-loader": "^3.3.3",
+    "terser-webpack-plugin": "^5.3.9",
+    "tw-elements": "^1.0.0-beta2",
+    "web-vitals": "^3.0.0",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.10.0",
+    "webpack-remove-empty-scripts": "^1.0.3"
+  },
+  "sasslintConfig": "sass-lint.yml",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "classnames": "^2.3.2",
+    "react-bootstrap": "^2.9.1",
+    "uuid": "^9.0.0"
+  }
 }