@vonaffenfels/contentful-teasermanager 1.0.4

package/.babelrc

@@ -0,0 +1,38 @@
+{
+    "presets": [
+        "next/babel",
+        [
+            "@babel/preset-env",
+            {
+                "modules": false,
+                "targets": {
+                    "browsers": [
+                        "last 2 Chrome versions",
+                        "last 2 Firefox versions",
+                        "last 2 Safari versions",
+                        "last 2 iOS versions",
+                        "last 1 Android version",
+                        "last 1 ChromeAndroid version",
+                        "ie 11"
+                    ]
+                }
+            }
+        ],
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-private-property-in-object",
+            {
+                "loose": true
+            }
+        ],
+        [
+            "@babel/plugin-proposal-class-properties",
+            {
+                "loose": true
+            }
+        ],
+        "@babel/plugin-syntax-dynamic-import"
+    ]
+}

package/.nvmrc

@@ -0,0 +1 @@
+v14.16.1

package/package.json

@@ -0,0 +1,105 @@
+{
+    "name": "@vonaffenfels/contentful-teasermanager",
+    "version": "1.0.4",
+    "scripts": {
+        "prepublish": "yarn run build",
+        "dev": "yarn run start",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "echo \"Don't build this module!\"",
+        "link": "yarn link",
+        "start": "webpack serve --config webpack.config.dev.js"
+    },
+    "peerDependencies": {
+        "@babel/core": "^7.20.12",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "@contentful/app-sdk": "^3.33.0",
+        "@contentful/field-editor-single-line": "^0.14.1",
+        "@contentful/field-editor-test-utils": "^0.11.1",
+        "@contentful/forma-36-fcss": "^0.3.1",
+        "@contentful/forma-36-react-components": "^3.88.3",
+        "@contentful/forma-36-tokens": "^0.10.1",
+        "@svgr/webpack": "^5.5.0",
+        "babel-loader": "^8.2.2",
+        "classnames": "^2.3.2",
+        "clean-webpack-plugin": "^3.0.0",
+        "cloudinary": "^1.25.1",
+        "contentful-management": "^7.17.0",
+        "copy-webpack-plugin": "^8.1.1",
+        "cross-env": "^7.0.3",
+        "css-loader": "^5.2.4",
+        "cssnano": "^5.0.1",
+        "date-fns": "^2.30.0",
+        "dotenv-webpack": "^7.0.2",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.3.1",
+        "mini-css-extract-plugin": "^1.5.0",
+        "postcss": "8.4.14",
+        "postcss-loader": "^5.2.0",
+        "raw-loader": "^4.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-uid": "^2.3.1",
+        "regenerator-runtime": "^0.14.0",
+        "sass": "^1.32.11",
+        "sass-loader": "^11.0.1",
+        "speakingurl": "^14.0.1",
+        "style-loader": "^2.0.0",
+        "tailwindcss": "3.3.2",
+        "url-loader": "^4.1.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "^4.0.0-beta.2"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.12",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "@contentful/app-sdk": "^3.33.0",
+        "@contentful/field-editor-single-line": "^0.14.1",
+        "@contentful/field-editor-test-utils": "^0.11.1",
+        "@contentful/forma-36-fcss": "^0.3.1",
+        "@contentful/forma-36-react-components": "^3.88.3",
+        "@contentful/forma-36-tokens": "^0.10.1",
+        "@svgr/webpack": "^5.5.0",
+        "babel-loader": "^8.2.2",
+        "classnames": "^2.3.2",
+        "clean-webpack-plugin": "^3.0.0",
+        "cloudinary": "^1.25.1",
+        "contentful-management": "^7.17.0",
+        "copy-webpack-plugin": "^8.1.1",
+        "cross-env": "^7.0.3",
+        "css-loader": "^5.2.4",
+        "cssnano": "^5.0.1",
+        "date-fns": "^2.30.0",
+        "dotenv-webpack": "^7.0.2",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.3.1",
+        "mini-css-extract-plugin": "^1.5.0",
+        "postcss": "8.4.14",
+        "postcss-loader": "^5.2.0",
+        "raw-loader": "^4.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-uid": "^2.3.1",
+        "regenerator-runtime": "^0.14.0",
+        "sass": "^1.32.11",
+        "sass-loader": "^11.0.1",
+        "speakingurl": "^14.0.1",
+        "style-loader": "^2.0.0",
+        "tailwindcss": "3.3.2",
+        "url-loader": "^4.1.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "^4.0.0-beta.2"
+    },
+    "dependencies": {
+        "webpack": "5.73.0"
+    },
+    "gitHead": "ba6d3fea2cca04a822de7e3d7dff5949e62a9d46",
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/src/components/Contentful/ConfigScreen.js

@@ -0,0 +1,71 @@
+import React, {Component} from 'react';
+import {
+    Heading, Form, TextField, Workbench, Paragraph,
+} from '@contentful/forma-36-react-components';
+import {css} from 'emotion';
+
+export default class Config extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {parameters: {}};
+
+        // `onConfigure` allows to configure a callback to be
+        // invoked when a user attempts to install the app or update
+        // its configuration.
+        props.sdk.app.onConfigure(() => this.onConfigure());
+    }
+
+    async componentDidMount() {
+        // Get current parameters of the app.
+        // If the app is not installed yet, `parameters` will be `null`.
+        const parameters = await this.props.sdk.app.getParameters();
+
+        this.setState(parameters ? {parameters} : this.state, () => {
+            // Once preparation has finished, call `setReady` to hide
+            // the loading screen and present the app to a user.
+            this.props.sdk.app.setReady();
+        });
+    }
+
+    async onConfigure() {
+        // This method will be called when a user clicks on "Install"
+        // or "Save" in the configuration screen.
+        // for more details see https://www.contentful.com/developers/docs/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
+
+        // Get current the state of EditorInterface and other entities
+        // related to this app installation
+        const currentState = await this.props.sdk.app.getCurrentState();
+
+        return {
+            // Parameters to be persisted as the app configuration.
+            parameters: this.state.parameters,
+            // In case you don't want to submit any update to app
+            // locations, you can just pass the currentState as is
+            targetState: currentState,
+        };
+    }
+
+    onFieldChanged(value, field) {
+        this.setState({
+            parameters: {
+                ...this.state.parameters,
+                [field]: value,
+            },
+        });
+    }
+
+    render() {
+        return (
+            <Workbench className={css({
+                padding: '80px',
+                backgroundColor: "#FFF",
+            })}>
+                <Form>
+                    <Heading>No Configuration necessary</Heading>
+                </Form>
+            </Workbench>
+        );
+    }
+
+}

package/src/components/Contentful/Dialog.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Dialog = ({sdk}) => {
+    return <div>DIALOG</div>
+};
+
+export default Dialog;

package/src/components/Contentful/EntryEditor.js

@@ -0,0 +1,45 @@
+import React, {
+    useEffect, useState,
+} from 'react';
+import {Teasermanager} from "../Teasermanager";
+
+const Entry = ({sdk}) => {
+    const contentField = sdk.parameters.instance.contentField;
+    const [locale, setLocale] = useState(sdk.locales.default);
+    const [portal, setPortal] = useState();
+    const portalField = sdk?.entry?.fields?.portal;
+
+    portalField?.onValueChanged(() => {
+        if (portalField.getValue() !== portal) {
+            setPortal(portalField.getValue());
+        }
+    });
+
+    useEffect(() => {
+        const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
+            setLocale(loc?.focused || sdk.locales.default);
+        });
+
+        return () => {
+            detachHandler();
+        };
+    }, []);
+
+    const onSlotClick = (slotId, currentDate) => {
+        console.log("KIENZ_DEBUG: :31 / onSlotClick", {
+            slotId,
+            currentDate,
+        });
+        sdk.dialogs.selectSingleEntry({contentTypes: ["article"]}).then((entry) => {
+            if (!entry) {
+                return;
+            }
+
+            console.log(`Selected entry ${entry.sys.id} for slot ${slotId} and date ${currentDate}`);
+        });
+    };
+
+    return <Teasermanager entryId={sdk.entry.getSys().id} locale={locale} contentFieldName={contentField} onSlotClick={onSlotClick}/>;
+};
+
+export default Entry;

package/src/components/Contentful/Page.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Teasermanager} from "../Teasermanager";
+
+const Page = ({sdk}) => {
+
+    const onSlotClick = (slotId, currentDate) => {
+        console.log("KIENZ_DEBUG: :7 / onSlotClick", {sdk});
+    }
+
+    return <Teasermanager entryId={"4RvZ6fcUtBIgw2Hw5YILPs"} onSlotClick={onSlotClick} />;
+};
+
+export default Page;

package/src/components/Teasermanager/Timeline.js

@@ -0,0 +1,83 @@
+import {
+    useEffect, useState,
+} from "react";
+import styles from "./Timeline.module.css";
+import format from "date-fns/format";
+import subtract from "date-fns/sub";
+import classNames from "classnames";
+
+export const Timeline = ({
+    currentDate,
+    setCurrentDate,
+}) => {
+    const stepsInRange = (24 * 60) / 15 + 1; // must be uneven so we have a center ;)
+
+    useEffect(() => {
+        const currentDate = new Date();
+        currentDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
+
+        setCurrentDate(currentDate);
+    }, []);
+
+    const leftDate = currentDate && subtract(currentDate, {minutes: stepsInRange / 2 * 15});
+    if (leftDate) {
+        leftDate.setMinutes((Math.round(currentDate.getMinutes() / 15) * 15) % 60);
+    }
+
+    const handleDateChange = (e) => {
+        if (!e.target.value) {
+            return;
+        }
+
+        let newDate = new Date(e.target.value);
+
+        newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+
+        setCurrentDate(newDate);
+    };
+
+    const handleTimeChange = e => {
+        if (!e.target.value) {
+            return;
+        }
+
+        let newDate = new Date(currentDate);
+
+        let [hours, minutes] = e.target.value.split(":");
+
+        newDate.setHours(hours, minutes);
+
+        setCurrentDate(newDate);
+    };
+
+    return <div className="flex w-full">
+        <div className={styles.wrapper}>
+            <div className={styles.date}>
+                {!!currentDate && (
+                    <>
+                        <input type="date" value={format(currentDate, "yyyy-MM-dd")} onChange={handleDateChange} className="mr-4" />
+                        <input type="time" value={format(currentDate, "HH:mm")} onChange={handleTimeChange} />
+                    </>
+                )}
+            </div>
+            <div className={styles.timeline}>
+                {!!leftDate && Array(stepsInRange).fill(0).map((_, index) => {
+                    const dotDate = new Date(leftDate.getTime() + (15 * 60 * 1000 * (index + 1)));
+
+                    return <div
+                        key={index}
+                        className={classNames(styles.timelineDot, {[styles.timelineDotActive]: dotDate.getTime() === currentDate.getTime()})}
+                        onClick={e => {
+                            e.preventDefault();
+                            setCurrentDate(dotDate);
+                            return false;
+                        }}>
+                        <div className={classNames(styles.timelineDotLabel, {[styles.timelineDotLabelPermanent]: dotDate.getHours() % 6 === 0 && dotDate.getMinutes() === 0})}>
+                            {leftDate && format(dotDate, "dd.MM.yyyy HH:mm")}
+                        </div>
+                    </div>;
+                })}
+            </div>
+        </div>
+    </div>;
+};

package/src/components/Teasermanager/Timeline.module.css

@@ -0,0 +1,58 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.timeline {
+    background-color: #e1fff9;
+    height: auto;
+    padding: 6px 0 6px 0;
+    width: 100%;
+    display: flex;
+    font-weight: bold;
+    font-size: 1em;
+    justify-content: space-between;
+}
+
+.timeline-dot {
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #004f73;
+    border-radius: 9999px;
+    cursor: pointer;
+    position: relative;
+}
+
+.timeline-dot:hover .timeline-dot-label {
+    display: block;
+    z-index: 100;
+}
+
+.timeline-dot-active {
+    outline: 2px solid red;
+}
+
+.timeline-dot-label.timeline-dot-label-permanent {
+    display: block;
+    z-index: 10;
+}
+
+.timeline-dot-label {
+    display: none;
+    background: white;
+    position: absolute;
+    top: -20px;
+    left: -100px;
+    width: 200px;
+    text-align: center;
+}
+
+.date {
+    width: 100%;
+    text-align: center;
+    padding: 1em 0 1em 0;
+}

package/src/components/Teasermanager.js

@@ -0,0 +1,81 @@
+import React, {useEffect, useRef, useState} from "react";
+
+import {getContentfulClient} from "../lib/contentfulClient";
+import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
+import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
+import {Timeline} from "./Teasermanager/Timeline";
+import styles from "./Teasermanager.module.css";
+
+export const Teasermanager = ({entryId, onSlotClick = () => console.error("missing onSlotClick"),  contentFieldName = "wysiwyg", locale = "en-US"}) => {
+    const contentfulClient = getContentfulClient();
+    const [entry, setEntry] = useState(null);
+    const wrapperRef = useRef(null);
+    const [currentDate, setCurrentDate] = useState(null);
+
+    const initSlot = (node) => {
+        if (node.dataset.__teasermanager_slot_initialized) {
+            return;
+        }
+
+        node.dataset.__teasermanager_slot_initialized = true;
+
+        const managementNode = document.createElement("div");
+        managementNode.classList.add(styles.management);
+
+        const managementLabelNode = document.createElement("div");
+        managementLabelNode.classList.add(styles.label);
+        managementLabelNode.innerHTML = `Klicken um den Artikel zu wechseln`;
+
+        managementNode.appendChild(managementLabelNode);
+
+        managementNode.addEventListener("click", (e) => {
+            const slotId = node.dataset.teasermanagerSlot;
+            onSlotClick(slotId, currentDate);
+        });
+
+        node.appendChild(managementNode);
+    }
+
+    const updateSlots = (mutationList) => {
+        const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
+        slots.forEach(initSlot);
+    }
+
+    useEffect(() => {
+        if (!entryId && entry) {
+            setEntry(null);
+            return;
+        }
+
+        contentfulClient.getEntry(entryId).then((loadedEntry, b) => {
+            setEntry(loadedEntry);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (!wrapperRef.current) {
+            return;
+        }
+
+        const observer = new MutationObserver(updateSlots);
+        observer.observe(wrapperRef.current, {attributes: false, childList: true, subtree: true});
+
+        return () => {
+            observer.disconnect();
+        }
+    }, [wrapperRef, currentDate]);
+
+    return <div className="w-full flex flex-col">
+        <div className="w-full">
+            <Timeline currentDate={currentDate} setCurrentDate={setCurrentDate} />
+        </div>
+        <div className={styles.wrapper} ref={wrapperRef}>
+            {!!entry?.fields?.[contentFieldName]?.[locale] &&
+                <Renderer
+                    value={entry?.fields?.[contentFieldName]?.[locale]}
+                    storybookComponentLoader={componentLoader}/>}
+        </div>
+
+    </div>
+
+}

package/src/components/Teasermanager.module.css

@@ -0,0 +1,38 @@
+.wrapper *[data-teasermanager-slot] {
+    position: relative;
+}
+
+.management {
+    font-family: Arial, Helvetica, sans-serif;
+
+    background-color: rgba(255, 255, 255, 0.4);
+    border: 1px dashed black;
+    color: black;
+    text-align: center;
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    padding: 2em;
+}
+
+.management:hover  {
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.label {
+    visibility: hidden;
+    font-weight: bold;
+}
+
+.management:hover .label {
+    visibility: visible;
+}
+

package/src/dev.js

@@ -0,0 +1,4 @@
+import './scss/dev.scss';
+import {BaseContentfulApp} from "./index"
+
+BaseContentfulApp();

package/src/hooks/useOnScreen.js

@@ -0,0 +1,24 @@
+import React, {
+    useState, useEffect, useRef,
+} from "react";
+
+export default function useOnScreen(ref) {
+    const [isIntersecting, setIntersecting] = useState(false);
+    const observerRef = useRef();
+
+    useEffect(() => {
+        if (!observerRef.current && ref.current) {
+            observerRef.current = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
+
+            observerRef.current.observe(ref.current);
+
+            return () => {
+                if (observerRef.current) {
+                    observerRef.current.disconnect();
+                }
+            };
+        }
+    }, []);
+
+    return isIntersecting;
+}

package/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Slate Block Editor Contentful App</title>
+    <script src="https://media-library.cloudinary.com/global/all.js"></script>
+</head>
+<body>
+<div id="root">
+</div>
+</body>
+</html>

package/src/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {
+    init,
+    locations,
+} from '@contentful/app-sdk';
+import '@contentful/forma-36-react-components/dist/styles.css';
+import '@contentful/forma-36-fcss/dist/styles.css';
+import '@contentful/forma-36-tokens/dist/css/index.css';
+import '@vonaffenfels/slate-editor/dist/index.css';
+import './scss/index.scss';
+
+import EntryEditor from './components/Contentful/EntryEditor';
+import Config from './components/Contentful/ConfigScreen';
+import Dialog from "./components/Contentful/Dialog";
+import Page from "./components/Contentful/Page";
+import {initContentfulClient} from "./lib/contentfulClient";
+
+export const BaseContentfulApp = () => {
+    init((sdk) => {
+        const rootContainer = document.getElementById('root');
+
+        initContentfulClient(sdk);
+
+        const ComponentLocationSettings = [
+            {
+                location: locations.LOCATION_APP_CONFIG,
+                component: <Config sdk={sdk}/>,
+            },
+            {
+                location: locations.LOCATION_ENTRY_EDITOR,
+                component: <EntryEditor sdk={sdk}/>,
+            },
+            {
+                location: locations.LOCATION_DIALOG,
+                component: <Dialog sdk={sdk}/>,
+            },
+            {
+                location: locations.LOCATION_PAGE,
+                component: <Page sdk={sdk}/>,
+            },
+        ];
+
+        ComponentLocationSettings.forEach((componentLocationSetting) => {
+            if (sdk.location.is(componentLocationSetting.location)) {
+                const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
+                root.render(componentLocationSetting.component);
+            }
+        });
+    });
+};

package/src/lib/contentfulClient.js

@@ -0,0 +1,14 @@
+let __contentfulClient;
+
+export const getContentfulClient = () => {
+    if (!__contentfulClient) {
+        throw new Error(`Contentful client not initialized run initContentfulClient(sdk) first`);
+    }
+
+    return __contentfulClient;
+}
+
+export const initContentfulClient = (sdk) => {
+    __contentfulClient = sdk.space;
+}
+

package/src/scss/index.scss

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, div {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    font: inherit;
+}

package/tailwind.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    content: [
+        './src/**/*.js',
+        '../../@base/slate-editor/src/dev/testComponents/**/*.js',
+    ],
+};

package/webpack.config.dev.js

@@ -0,0 +1,26 @@
+const path = require('path');
+let config = require("./webpack.config")({
+    componentImportRoot: "@vonaffenfels/slate-editor/src/dev/testComponents",
+    relativePathToComponents: path.resolve(__dirname + "../../../@base/slate-editor/src/dev/testComponents"),
+});
+
+
+config.entry = {index: ["regenerator-runtime/runtime.js", './src/dev.js']};
+
+config.mode = "development";
+config.watch = true;
+config.watchOptions = {ignored: ['dist/**', 'node_modules/**']};
+config.cache = {type: "memory"};
+
+config.output.publicPath = "/dist/";
+config.devtool = 'inline-source-map';
+
+config.devServer = {
+    static: path.join(__dirname, 'dist'),
+    compress: true,
+    historyApiFallback: true,
+    port: process.env.PORT || 5842,
+    devMiddleware: {writeToDisk: true},
+};
+
+module.exports = config;

package/webpack.config.js

@@ -0,0 +1,146 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require("webpack");
+const {readFileSync} = require("fs");
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+
+module.exports = ({
+    babelConfig = JSON.parse(readFileSync("../../.babelrc").toString()),
+    componentImportRoot = "@vonaffenfels/slate-editor/src/dev/testComponents",
+    relativePathToComponents = path.resolve(__dirname + "../../../@base/slate-editor/src/dev/testComponents"),
+    postCssConfig = {
+        plugins: {
+            'postcss-import': {},
+            tailwindcss: {},
+            autoprefixer: {},
+        },
+    },
+    transpilePaths = [],
+}) => {
+    return {
+        mode: 'production',
+        entry: {index: ["regenerator-runtime/runtime.js", './src/index.js']},
+        module: {
+            rules: [
+                {
+                    test: /componentLoader.js/i,
+                    use: [
+                        {
+                            loader: "@vonaffenfels/slate-editor/componentLoader.js",
+                            options: {
+                                componentRoot: relativePathToComponents,
+                                componentImportRoot: componentImportRoot,
+                            },
+                        },
+                        {
+                            loader: 'babel-loader',
+                            options: babelConfig,
+                        },
+                    ],
+                },
+                {
+                    test: /\.js$/,
+                    include: [
+                        path.resolve(__dirname, 'src'),
+                        relativePathToComponents,
+                        ...transpilePaths,
+                    ],
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                            options: babelConfig,
+                        },
+                    ],
+                },
+                {
+                    test: /\.s[ac]ss$/i,
+                    include: path.resolve(__dirname, 'src', 'scss'),
+                    use: [
+                        "style-loader",
+                        {loader: 'css-loader', options: {importLoaders: 1}},
+                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
+                        "sass-loader",
+                    ],
+                },
+                {
+                    test: /module\.css$/i,
+                    use: [
+                        'style-loader',
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                modules: {exportLocalsConvention: "camelCase"},
+                            },
+                        },
+                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
+                    ],
+                },
+                {
+                    test: /\.css$/i,
+                    exclude: [/module\.css$/i],
+                    use: [
+                        'style-loader',
+                        {
+                            loader: 'css-loader',
+                            options: {importLoaders: 1},
+                        },
+                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
+                    ],
+                },
+                {
+                    test: /\.svg$/,
+                    resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
+                    use: [
+                        {
+                            loader: '@svgr/webpack',
+                            options: {
+                                dimensions: false,
+                                svgo: false,
+                            },
+                        },
+                        'url-loader',
+                    ],
+                },
+                {
+                    test: /\.(woff(2)?|ttf|eot|png)(\?v=\d+\.\d+\.\d+)?$/,
+                    use: [
+                        {
+                            loader: 'file-loader',
+                            options: {
+                                name: '[name].[ext]',
+                                outputPath: 'fonts/',
+                            },
+                        },
+                    ],
+                },
+                {
+                    test: /\.(graphql|gql)$/,
+                    loader: 'raw-loader',
+                },
+            ],
+        },
+        plugins: [
+            new CleanWebpackPlugin(),
+            new HtmlWebpackPlugin({template: path.join(__dirname, 'src', 'index.html')}),
+            new MiniCssExtractPlugin({}),
+            new webpack.DefinePlugin({'process.env': JSON.stringify(process.env)}),
+        ],
+        resolve: {
+            extensions: ['.json', '.js', '.jsx'],
+            fallback: {
+                stream: false,
+                path: false,
+                timers: false,
+            },
+        },
+        output: {
+            filename: '[name].js',
+            libraryTarget: "umd",
+            publicPath: "/",
+            globalObject: "this",
+            path: path.resolve(__dirname, 'dist'),
+        },
+    };
+};