seat-editor 1.4.20 → 1.4.21

package/dist/features/side-tool/index.jsx

@@ -0,0 +1,261 @@
+"use client";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers } from "lucide-react";
+import ButtonTools from "../../components/button-tools";
+import { Divider, ColorPicker, Button, } from "antd";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { useState } from "react";
+const SideTool = ({ dragOnly }) => {
+    const [color, setColor] = useState("#000000");
+    const dispatch = useAppDispatch();
+    const { active } = useAppSelector((state) => state.tool);
+    const { selectedComponent } = useAppSelector((state) => state.panel);
+    const { components, extraComponents } = useAppSelector((state) => state.board);
+    const [preview, setPreview] = useState(false);
+    const tools = [
+        {
+            id: "select",
+            name: "Select Tool",
+            icon: <MousePointer />,
+        },
+        {
+            id: "grab",
+            name: "Grab Tool",
+            icon: <Hand />,
+        }
+    ];
+    const actionsTools = [
+        // {
+        //   id: "table-split",
+        //   name: "Table Split",
+        //   icon: <TableCellsSplit />,
+        // },
+        {
+            id: "square",
+            name: "Square",
+            icon: <SquareMousePointer />,
+        },
+        {
+            id: "circle",
+            name: "Circle",
+            icon: <Circle />,
+        },
+        {
+            id: "table-seat-circle",
+            name: "Table Seat Circle",
+            icon: <Ratio />,
+        },
+        {
+            id: "image-table",
+            name: "Image Table",
+            icon: <Upload />,
+        },
+        // {
+        //   id: "table-seat-square",
+        //   name: "Table Seat Square",
+        //   icon: <Dock />,
+        // },
+        // {
+        //   id: "diamond",
+        //   name: "Diamond",
+        //   icon: <Diamond />,
+        // },
+    ];
+    const controlTools = [
+        {
+            id: "background",
+            name: "Background",
+            icon: <Image />,
+        },
+        {
+            id: "text",
+            name: "Text",
+            icon: <Type />,
+        },
+        // {
+        //   id: "background-color",
+        //   name: "Background Color",
+        //   icon: <PaintBucket/>
+        // }
+    ];
+    const hanldeSelectTool = (id) => {
+        if (id === "background" || id === "text" || id === "image-table") {
+            dispatch({
+                type: "panel/setShow",
+                payload: true,
+            });
+        }
+        dispatch({
+            type: "tool/setActiveTool",
+            payload: id,
+        });
+    };
+    const handleChangeColorBackground = (color) => {
+        setColor(color.toHexString());
+        dispatch({
+            type: "board/setBackgroundColor",
+            payload: color.toHexString(),
+        });
+    };
+    const handleOpenModalPreview = () => {
+        dispatch({
+            type: "tool/setTooglePreview",
+            payload: true,
+        });
+    };
+    const handleRemoveComponent = () => {
+        dispatch({
+            type: "board/removeComponent",
+            payload: selectedComponent,
+        });
+        dispatch({
+            type: "board/removeExtraComponent",
+            payload: selectedComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleDuplicateComponent = () => {
+        const newComponent = Object.assign(Object.assign({}, selectedComponent), { x: selectedComponent.x + 20, y: selectedComponent.y + 20, id: Date.now() });
+        dispatch({
+            type: "board/addComponent",
+            payload: newComponent,
+        });
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: newComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    function swapOneStepById(arr, id, direction) {
+        const index = arr.findIndex((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
+        if (index === -1)
+            return arr; // id tidak ditemukan
+        const newArr = [...arr];
+        if (direction === "left" && index > 0) {
+            [newArr[index - 1], newArr[index]] = [newArr[index], newArr[index - 1]];
+        }
+        if (direction === "right" && index < arr.length - 1) {
+            [newArr[index + 1], newArr[index]] = [newArr[index], newArr[index + 1]];
+        }
+        return newArr;
+    }
+    const handleOverride = () => {
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background") {
+            const setNewExtraComponents = swapOneStepById(extraComponents, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "right");
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: setNewExtraComponents,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+            return;
+        }
+        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "right");
+        dispatch({
+            type: "board/setNewComponents",
+            payload: newArr,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleOverrideLeft = () => {
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background") {
+            const setNewExtraComponents = swapOneStepById(extraComponents, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "left");
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: setNewExtraComponents,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+            return;
+        }
+        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "left");
+        dispatch({
+            type: "board/setNewComponents",
+            payload: newArr,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    return (<div className="h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4">
+      {tools === null || tools === void 0 ? void 0 : tools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
+                icon: tool.icon,
+                type: "text",
+                name: tool.name,
+                onClick: () => hanldeSelectTool(tool.id),
+                style: active === tool.id ? { color: "red" } : {},
+            }} popoverProps={{
+                content: <div>{tool.name}</div>,
+                trigger: "hover",
+                placement: "right",
+            }} items={[]}/>))}
+      {!dragOnly && (<>
+          <ButtonTools buttonProps={{
+                icon: <CopyPlus />,
+                type: "text",
+                name: "duplicate",
+                onClick: () => handleDuplicateComponent(),
+            }} items={[]} popoverProps={{
+                content: <div>Duplicate</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+          <ButtonTools buttonProps={{
+                onClick: () => handleRemoveComponent(),
+                icon: <Trash />,
+                type: "text",
+                name: "trash",
+            }} items={[]} popoverProps={{
+                content: <div>Trash</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+          <ButtonTools buttonProps={{
+                onClick: () => handleOverride(),
+                icon: <Layers2 />,
+                type: "text",
+                name: "override",
+            }} items={[]} popoverProps={{
+                content: <div>Override Right</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+          <ButtonTools buttonProps={{
+                onClick: () => handleOverrideLeft(),
+                icon: <Layers />,
+                type: "text",
+                name: "override",
+            }} items={[]} popoverProps={{
+                content: <div>Override Left</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+
+          <Divider />
+          {actionsTools === null || actionsTools === void 0 ? void 0 : actionsTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
+                    icon: tool.icon,
+                    type: "text",
+                    name: tool.name,
+                    onClick: () => hanldeSelectTool(tool.id),
+                    style: active === tool.id ? { color: "red" } : {},
+                }} popoverProps={{
+                    content: <div>{tool.name}</div>,
+                    trigger: "hover",
+                    placement: "right",
+                }} items={[]}/>))}
+    
+          <Divider />
+        </>)}
+      {controlTools === null || controlTools === void 0 ? void 0 : controlTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
+                icon: tool.icon,
+                type: "text",
+                name: tool.name,
+                onClick: () => hanldeSelectTool(tool.id),
+                style: active === tool.id ? { color: "red" } : {},
+            }} popoverProps={{
+                content: <div>{tool.name}</div>,
+                trigger: "hover",
+                placement: "right",
+            }} items={[]}/>))}
+      <ColorPicker value={color} onChange={handleChangeColorBackground}>
+        <Button icon={<PaintBucket />} type="text" name="Background Color" onClick={() => hanldeSelectTool("background-color")} style={active === "background-color" ? { color: "red" } : {}}/>
+      </ColorPicker>
+      <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
+    </div>);
+};
+export default SideTool;

package/dist/features/view/index.js

@@ -17,31 +17,27 @@ const LayerView = (props) => {
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const dispatch = useAppDispatch();
     const convertComponentProps = () => {
-        let mappingData = componentProps.map((item) => {
-            if (mappingKey && item[mappingKey]) {
+        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
                 return Object.assign({}, item[mappingKey]);
             }
             return item;
         });
-        console.log("mappingData view", mappingData);
         return mappingData;
     };
     useEffect(() => {
-        // if (!isEqual(componentsEditor, convertComponentProps())) {
-        //   let mappingData = componentProps.map((item) => {
-        //     if (mappingKey && item[props.mappingKey]) {
-        //       return {
-        //         ...item[props.mappingKey],
-        //       };
-        //     }
-        //     return item;
-        //   });
-        //   console.log("mappingData useEffect view", mappingData);
-        //   dispatch({
-        //     type: "board/setNewComponents",
-        //     payload: mappingData,
-        //   });
-        // }
+        if (!isEqual(componentsEditor, convertComponentProps())) {
+            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+                if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
+                    return Object.assign({}, item[props.mappingKey]);
+                }
+                return item;
+            });
+            dispatch({
+                type: "board/setNewComponents",
+                payload: mappingData,
+            });
+        }
         if (!isEqual(extraComponentsEditor, extraComponentProps)) {
             dispatch({
                 type: "board/setNewExtraComponents",

package/dist/features/view/index.jsx

@@ -0,0 +1,220 @@
+"use client";
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import Layers from "../../components/layer";
+import { isEqual } from "lodash";
+const LayerView = (props) => {
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const [scale, setScale] = useState(1);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const dispatch = useAppDispatch();
+    const convertComponentProps = () => {
+        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return Object.assign({}, item[mappingKey]);
+            }
+            return item;
+        });
+        return mappingData;
+    };
+    useEffect(() => {
+        if (!isEqual(componentsEditor, convertComponentProps())) {
+            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+                if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
+                    return Object.assign({}, item[props.mappingKey]);
+                }
+                return item;
+            });
+            dispatch({
+                type: "board/setNewComponents",
+                payload: mappingData,
+            });
+        }
+        if (!isEqual(extraComponentsEditor, extraComponentProps)) {
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: extraComponentProps,
+            });
+        }
+        if (defaultBackground) {
+            dispatch({
+                type: "board/setBackgroundColor",
+                payload: defaultBackground,
+            });
+        }
+    }, [componentProps, extraComponentProps, defaultBackground]);
+    useEffect(() => {
+        onCurrentStateChange &&
+            onCurrentStateChange({
+                components: componentsEditor,
+                extraComponents: extraComponentsEditor,
+            });
+    }, [componentsEditor, extraComponentsEditor]);
+    const handleSelectComponent = (items) => {
+        const find = componentsEditor.find((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
+            }
+            return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
+        });
+        onSelectComponent && onSelectComponent(find);
+        setSelectedTable(find);
+    };
+    const boundingBox = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
+            return { minX: 0, minY: 0, width: 500, height: 500 };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
+            var _a, _b, _c, _d;
+            let values = mappingKey ? _[mappingKey] : _;
+            if (!values)
+                return;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
+            var _a, _b;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 && ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
+            minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
+            minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
+            maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
+            maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
+        }
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1) {
+            minX = minX - minX * 0.5;
+            minY = minY - minY * 0.5;
+        }
+        return {
+            minX,
+            minY,
+            width: maxX,
+            height: maxY,
+        };
+    }, [componentsEditor, extraComponentsEditor]);
+    const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
+        return elementEditor.map((editorItem, i) => {
+            var _a, _b, _c, _d;
+            const isUsingMapping = mappingKey &&
+                typeof editorItem[mappingKey] === "object" &&
+                editorItem[mappingKey] !== null;
+            const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
+            if (colorMatchKey) {
+                if (isUsingMapping) {
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
+                }
+                else {
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
+                }
+            }
+            return finalProps;
+        });
+    };
+    const [fingerCount, setFingerCount] = useState(0);
+    useEffect(() => {
+        const container = document.getElementById("workspace");
+        const handleTouchStart = (e) => {
+            const count = e.touches.length;
+            setFingerCount(count);
+        };
+        const handleTouchEnd = () => {
+            setFingerCount(0);
+        };
+        if (container) {
+            container.addEventListener("touchstart", handleTouchStart);
+            container.addEventListener("touchend", handleTouchEnd);
+        }
+        return () => {
+            if (container) {
+                container.removeEventListener("touchstart", handleTouchStart);
+                container.removeEventListener("touchend", handleTouchEnd);
+            }
+        };
+    }, []);
+    return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
+            height: "100vh",
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+            touchAction: "pan-y",
+        }} {...props.containerProps}>
+      <TransformWrapper ref={transformRef} {...props.transformProps} disabled={fingerCount === 1 && scale === 1} disablePadding={true} 
+    // panning={{
+    //   disabled: false,
+    //   velocityDisabled: true,
+    // }}
+    // limitToBounds={false}
+    // doubleClick={{ disabled: true }}
+    // pinch={{ disabled: false }}
+    // wheel={{ disabled: true }}
+    // disabled={true}
+    // disablePadding={true}
+    centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} 
+    // pinch={{ step: 1 }}
+    smooth={true}>
+        <TransformComponent wrapperStyle={{
+            width: "100%",
+            height: "100%",
+            overflow: "visible",
+        }} contentStyle={{
+            width: "100%",
+            height: "100%",
+        }}>
+          <svg {...props.svgProps} id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className="h-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+            background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
+            display: "block",
+            pointerEvents: "auto",
+            // touchAction: "pan-y",
+        }}>
+            <Layers mode="view" components={[
+            ...extraComponentsEditor,
+            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
+        ]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
+          </svg>
+        </TransformComponent>
+      </TransformWrapper>
+    </div>);
+};
+export default LayerView;

package/dist/provider/antd-provider.jsx

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect } from "react";
+import { ConfigProvider } from "antd";
+import { AntdRegistry } from "@ant-design/nextjs-registry";
+import { useAppSelector, useAppDispatch } from "../hooks/use-redux";
+export const AntdProvider = ({ children, themeColor }) => {
+    const dispatch = useAppDispatch();
+    const theme = useAppSelector((state) => state.theme);
+    useEffect(() => {
+        if (themeColor !== theme.primaryColor) {
+            dispatch({
+                type: "theme/setPrimaryColor",
+                payload: themeColor
+            });
+        }
+    }, [themeColor]);
+    return (<AntdRegistry>
+      <ConfigProvider theme={{
+            token: {
+                colorPrimary: themeColor,
+            },
+            //   token: {
+            //     colorPrimary: theme.theme["--primary-color"],
+            //     colorPrimaryBorderHover: theme.theme["--primary-color"],
+            //     fontFamily: "var(--font-inter), sans-serif",
+            //     colorError: theme.theme["--danger"],
+            //     controlOutlineWidth: 4,
+            //     controlOutline: theme.theme["--surface-color"],
+            //     colorBgContainerDisabled: "var(--netral-03)",
+            //     colorTextPlaceholder: "var(--netral-06)",
+            //   },
+            components: {
+                Form: {
+                    labelFontSize: 14,
+                    fontWeightStrong: 500,
+                    itemMarginBottom: 12,
+                },
+                Button: {
+                    colorPrimary: themeColor
+                }
+            },
+        }}>
+        {children}
+      </ConfigProvider>
+    </AntdRegistry>);
+};

package/dist/provider/redux-provider.jsx

@@ -0,0 +1,6 @@
+"use client";
+import { store } from "../libs/store";
+import { Provider } from "react-redux";
+export const ReduxProvider = ({ children }) => {
+    return <Provider store={store}>{children}</Provider>;
+};

package/dist/provider/store-provider.jsx

@@ -0,0 +1,10 @@
+"use client";
+import { ReduxProvider } from "./redux-provider";
+import { AntdProvider } from "./antd-provider";
+import { injectSeatEditorCSS } from "../utils/injectCss";
+export const StoreProvider = ({ children, themeColor = "red", }) => {
+    injectSeatEditorCSS();
+    return (<ReduxProvider>
+      <AntdProvider themeColor={themeColor}>{children}</AntdProvider>
+    </ReduxProvider>);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",