seat-editor 2.0.0 → 2.1.1

package/dist/features/navbar/index.d.ts

@@ -1,2 +0,0 @@
-declare const Navbar: () => import("react").JSX.Element;
-export default Navbar;

package/dist/features/navbar/index.jsx

@@ -1,5 +0,0 @@
-"use client";
-const Navbar = () => {
-    return <div>Navbar</div>;
-};
-export default Navbar;

package/dist/features/package/index.d.ts

@@ -1,31 +0,0 @@
-export interface TableEditorProps {
-    componentProps: any[];
-    extraComponentProps: any[];
-    onCurrentStateChange: (state: any) => void;
-    onSelectComponent?: (component: any) => void;
-    mappingKey?: string;
-    selectedTableColor?: string;
-    colorMatchKey?: [
-        {
-            color: string;
-            key: string;
-        }
-    ];
-    statusKey: string;
-    defaultBackground?: string;
-    action?: (file: File, type: string, defaultValue: any) => Promise<any>;
-    responseMapping?: {
-        status: string;
-        message: string;
-        data: string;
-        src: string;
-    };
-    dragOnly?: boolean;
-    viewOnly?: boolean;
-    deleteAutorized?: {
-        component: boolean;
-        extraComponent: boolean;
-    };
-}
-declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
-export default TableEditor;

package/dist/features/package/index.jsx

@@ -1,114 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import Board from "../board-v3";
-import SideTool from "../side-tool";
-import ControlPanels from "../panel";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { isEqual } from "lodash";
-import LayerView from "../view";
-const TableEditor = (props) => {
-    const [initialValue, setInitialValue] = useState(null);
-    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized } = props;
-    const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
-    const dispatch = useAppDispatch();
-    useEffect(() => {
-        if (!viewOnly) {
-            dispatch({
-                type: "panel/setSelectedComponent",
-                payload: null,
-            });
-        }
-    }, [viewOnly]);
-    const onUpdateCurrentState = () => {
-        let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
-            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => { var _a; return c.id === ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id); });
-                if (!findComponent)
-                    return undefined;
-                if (findComponent) {
-                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
-                }
-            }
-            else {
-                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => c.id === (item === null || item === void 0 ? void 0 : item.id));
-                if (!findComponent)
-                    return undefined;
-                if (findComponent) {
-                    return Object.assign(Object.assign({}, item), findComponent);
-                }
-            }
-        });
-        const hasUndefined = matchInitialValueWithComponents === null || matchInitialValueWithComponents === void 0 ? void 0 : matchInitialValueWithComponents.some((item) => item === undefined);
-        if (!hasUndefined && !viewOnly) {
-            onCurrentStateChange({
-                components: matchInitialValueWithComponents,
-                extraComponents,
-                background: backgroundColor,
-            });
-        }
-    };
-    useEffect(() => {
-        if (!isEqual(components, convertComponentProps()) ||
-            !isEqual(extraComponents, extraComponentProps) || !isEqual(backgroundColor, props === null || props === void 0 ? void 0 : props.defaultBackground)) {
-            onCurrentStateChange && onUpdateCurrentState();
-        }
-    }, [components, extraComponents, backgroundColor]);
-    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 === null || item === void 0 ? void 0 : item[mappingKey]);
-            }
-            return item;
-        });
-        return mappingData;
-    };
-    useEffect(() => {
-        if (!isEqual(components, convertComponentProps()) && componentProps) {
-            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;
-            });
-            if (mappingKey) {
-                setInitialValue(componentProps);
-            }
-            dispatch({
-                type: "board/setNewComponents",
-                payload: mappingData,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-        if (!isEqual(extraComponents, extraComponentProps) && extraComponentProps) {
-            dispatch({
-                type: "board/setNewExtraComponents",
-                payload: extraComponentProps,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-        if (props === null || props === void 0 ? void 0 : props.defaultBackground) {
-            dispatch({
-                type: "board/setBackgroundColor",
-                payload: props === null || props === void 0 ? void 0 : props.defaultBackground,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-    }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <div className="w-full h-full flex relative" style={{
-            display: !viewOnly ? "none" : "flex",
-        }}>
-          <LayerView statusKey="status"/>
-        </div>
-        <div className="w-full h-full flex relative" style={{
-            display: viewOnly ? "none" : "flex",
-        }}>
-          <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
-          <Board onSelectComponent={props.onSelectComponent} viewOnly={viewOnly}/>
-          <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
-        </div>
-      </div>
-    </>);
-};
-export default TableEditor;

package/dist/features/panel/index.d.ts

@@ -1,11 +0,0 @@
-interface ControlPanelsProps {
-    action?: (file: File, type: string, defaultValue: any) => Promise<any>;
-    responseMapping?: {
-        status: string;
-        message: string;
-        data: string;
-        src: string;
-    };
-}
-declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
-export default ControlPanels;

package/dist/features/panel/index.jsx

@@ -1,138 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useEffect, useRef, useState } from "react";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { Form, Drawer, Input } from "antd";
-import SelectToolForm from "./select-tool";
-import SquareToolForm from "./square-circle-tool";
-import SeatCircle from "./table-seat-circle";
-import UploadTool from "./upload-tool";
-import { debounce } from "lodash";
-const ControlPanels = (props) => {
-    const { action, responseMapping } = props;
-    const dispatch = useAppDispatch();
-    const theme = useAppSelector((state) => state.theme);
-    const tool = useAppSelector((state) => state.tool);
-    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
-    const { show } = useAppSelector((state) => state.panel);
-    const [open, setOpen] = useState(false);
-    const [form] = Form.useForm();
-    let values = Form.useWatch([], form);
-    useEffect(() => {
-        form.resetFields();
-        if (selectedComponent) {
-            const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
-            const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width) === (values === null || values === void 0 ? void 0 : values.width) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x) === (values === null || values === void 0 ? void 0 : values.x) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y) === (values === null || values === void 0 ? void 0 : values.y);
-            if (show && (isDifferentId || isSameIdAndSameDimensions)) {
-                setOpen(true);
-            }
-            form.setFieldsValue(selectedComponent);
-        }
-        else {
-            setOpen(false);
-        }
-    }, [selectedComponent]);
-    useEffect(() => {
-        if (tool.active === "background" || tool.active === "image-table") {
-            setOpen(true);
-        }
-    }, [tool]);
-    const createShape = (shape, ...props) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle"
-                ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA"
-                : undefined, text: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : "Text" : undefined, fontColor: shape === "text" ? (_m = (_l = props === null || props === void 0 ? void 0 : props[0]) === null || _l === void 0 ? void 0 : _l.fontColor) !== null && _m !== void 0 ? _m : "#DADADA" : undefined }));
-    };
-    const debouncedSyncComponents = useRef(debounce((data) => {
-        dispatch({
-            type: "board/updateComponent",
-            payload: data,
-        });
-    }, 300));
-    const debouncedSyncSelectedComponents = useRef(debounce((data) => {
-        dispatch({
-            type: "panel/updateSelectedComponent",
-            payload: data,
-        });
-    }, 300));
-    const debouncedSyncForm = useRef(debounce(() => {
-        dispatch({ type: "board/setFlagChange", payload: true });
-    }, 300));
-    const handleChangeComponent = (values, allValues) => {
-        const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        const newValues = createShape(shape, restProps);
-        debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
-        // dispatch({
-        //   type: "board/updateComponent",
-        //   payload: {
-        //     ...(selectedComponent || {}),
-        //     ...newValues,
-        //   },
-        // });
-        if (shape !== (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
-            debouncedSyncSelectedComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
-            // dispatch({
-            //   type: "panel/updateSelectedComponent",
-            //   payload: {
-            //     ...(selectedComponent || {}),
-            //     ...newValues,
-            //   },
-            // });
-        }
-        debouncedSyncForm.current();
-    };
-    const renderFormPanel = () => {
-        switch (tool.active) {
-            case "select":
-                return (<SelectToolForm action={action} responseMapping={responseMapping}/>);
-            case "square":
-            case "circle":
-                return <SquareToolForm />;
-            case "table-seat-circle":
-                return <SeatCircle />;
-            case "image-table":
-                return (<UploadTool name={tool.active} type="component" action={action} responseMapping={responseMapping}/>);
-            case "background":
-                return (<UploadTool name={tool.active} type="background" action={action} responseMapping={responseMapping}/>);
-            default:
-                return null;
-        }
-    };
-    const handleClose = () => {
-        setOpen(false);
-        dispatch({
-            type: "panel/setShow",
-            payload: false,
-        });
-    };
-    // if(!show) return null
-    return (<Drawer open={show} onClose={handleClose} title="Panel" styles={{
-            body: {
-                paddingBottom: 0,
-            },
-        }}>
-      <div className="bg-white h-full max-h-screen w-full p-2">
-        <Form layout="vertical" form={form} name="table" onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
-          <Form.Item name="id" hidden>
-            <Input />
-          </Form.Item>
-          {renderFormPanel()}
-        </Form>
-      </div>
-    </Drawer>);
-};
-export default ControlPanels;

package/dist/features/panel/panel-slice.d.ts

@@ -1,16 +0,0 @@
-import { PayloadAction } from "@reduxjs/toolkit";
-export interface PanelState {
-    selectedComponent: any;
-    history: any[];
-    active: string;
-    show: boolean;
-}
-export declare const panelSlice: import("@reduxjs/toolkit").Slice<PanelState, {
-    setSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
-    setUnSelectedComponent: (state: import("immer").WritableDraft<PanelState>) => void;
-    updateSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
-    setShow: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<boolean>) => void;
-}, "panel", "panel", import("@reduxjs/toolkit").SliceSelectors<PanelState>>;
-export declare const setSelectedComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "panel/setSelectedComponent">, setUnSelectedComponent: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"panel/setUnSelectedComponent">, setShow: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "panel/setShow">;
-declare const _default: import("redux").Reducer<PanelState>;
-export default _default;

package/dist/features/panel/panel-slice.js

@@ -1,31 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-const initialState = {
-    selectedComponent: null,
-    history: [],
-    active: "",
-    show: false,
-};
-export const panelSlice = createSlice({
-    name: "panel",
-    initialState,
-    reducers: {
-        setSelectedComponent: (state, action) => {
-            state.selectedComponent = action.payload;
-        },
-        setUnSelectedComponent: (state) => {
-            state.selectedComponent = null;
-        },
-        updateSelectedComponent: (state, action) => {
-            state.selectedComponent = Object.assign({}, action.payload);
-            state.history.push(state.selectedComponent);
-            if (state.history.length > 20) {
-                state.history.shift();
-            }
-        },
-        setShow: (state, action) => {
-            state.show = action.payload;
-        }
-    },
-});
-export const { setSelectedComponent, setUnSelectedComponent, setShow } = panelSlice.actions;
-export default panelSlice.reducer;

package/dist/features/panel/select-tool.d.ts

@@ -1,6 +0,0 @@
-declare const SelectToolForm: ({ title, action, responseMapping }: {
-    title?: string;
-    action: any;
-    responseMapping: any;
-}) => import("react").JSX.Element;
-export default SelectToolForm;

package/dist/features/panel/select-tool.jsx

@@ -1,60 +0,0 @@
-"use client";
-import { useAppSelector } from "../../hooks/use-redux";
-import SquareToolForm from "./square-circle-tool";
-import SeatCircle from "./table-seat-circle";
-import UploadTool from "./upload-tool";
-import TextTool from "./text-tool";
-const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
-    const components = useAppSelector((state) => state.board.components);
-    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
-    const extraComponents = useAppSelector((state) => state.board.extraComponents);
-    const SummaryComponents = () => {
-        const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
-            acc[item.shape] = (acc[item.shape] || 0) + 1;
-            return acc;
-        }, {});
-        const extraCountByShape = extraComponents === null || extraComponents === void 0 ? void 0 : extraComponents.reduce((acc, item) => {
-            acc[item.shape] = (acc[item.shape] || 0) + 1;
-            return acc;
-        }, {});
-        const variableFormatToString = (variable) => {
-            return variable
-                .replace(/-/g, " ")
-                .replace(/\b\w/g, (char) => char.toUpperCase());
-        };
-        return (<div className="flex flex-col">
-        <h1 className="heading-s">{title}</h1>
-        <div className="flex flex-col gap-2 mt-5">
-          {Object.entries(countByShape).map(([shape, count]) => (<div key={shape}>
-              <span className="font-bold">
-                {variableFormatToString(shape)}:
-              </span>{" "}
-              {count}
-            </div>))}
-        </div>
-      </div>);
-    };
-    const renderComponent = () => {
-        switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
-            case "square":
-            case "circle":
-                return <SquareToolForm />;
-            case "table-seat-circle":
-                return <SeatCircle />;
-            case "image-table":
-            case "background":
-                return (<UploadTool action={action} responseMapping={responseMapping} name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape} defaultValue={selectedComponent} type={(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
-                        ? "background"
-                        : "component"}/>);
-            case "text":
-                return <TextTool />;
-            default:
-                return null;
-        }
-    };
-    return (<div className="flex flex-col gap-2">
-      <SummaryComponents />
-      {renderComponent()}
-    </div>);
-};
-export default SelectToolForm;

package/dist/features/panel/square-circle-tool.d.ts

@@ -1,2 +0,0 @@
-declare const SquareToolForm: () => import("react").JSX.Element;
-export default SquareToolForm;

package/dist/features/panel/square-circle-tool.jsx

@@ -1,10 +0,0 @@
-"use client";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const SquareToolForm = () => {
-    return (<>
-      <SectionShape />
-      <SectionLabel />
-    </>);
-};
-export default SquareToolForm;

package/dist/features/panel/table-seat-circle.d.ts

@@ -1,2 +0,0 @@
-declare const SeatCircle: () => import("react").JSX.Element;
-export default SeatCircle;

package/dist/features/panel/table-seat-circle.jsx

@@ -1,31 +0,0 @@
-"use client";
-import { ColorPicker, Flex, Form, InputNumber } from "antd";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const SeatCircle = () => {
-    return (<>
-      <div className="py-2">
-        <h1 className="heading-s"> Round table</h1>
-        <Flex>
-          <Form.Item name="seatCount" label="Seat Count" className="w-full">
-            <InputNumber />
-          </Form.Item>
-          <Form.Item name="openSpace" label="Open Space" className="w-full">
-            <InputNumber max={1} min={0} step={0.1}/>
-          </Form.Item>
-          
-        </Flex>
-        <Flex gap={2}>
-          <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
-          <Form.Item label="Table Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
-        </Flex>
-        <SectionShape />
-        <SectionLabel />
-      </div>
-    </>);
-};
-export default SeatCircle;

package/dist/features/panel/text-tool.d.ts

@@ -1,2 +0,0 @@
-declare const TextTool: () => import("react").JSX.Element;
-export default TextTool;

package/dist/features/panel/text-tool.jsx

@@ -1,26 +0,0 @@
-"use client";
-import { ColorPicker, Form, Input, InputNumber } from "antd";
-const TextTool = () => {
-    return (<div className="py-2">
-        <Form.Item label="Name" name="shape" className="w-full hidden">
-          <Input defaultValue={"text"}/>
-        </Form.Item>
-      
-      <Form.Item name="text" label="Text">
-        <Input />
-      </Form.Item>
-      <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-        <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-      </Form.Item>
-      <Form.Item name={"x"} label="X">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"y"} label="Y">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"fontSize"} label="Size">
-        <InputNumber suffix="px"/>
-      </Form.Item>
-    </div>);
-};
-export default TextTool;

package/dist/features/panel/upload-tool.d.ts

@@ -1,14 +0,0 @@
-interface UploadToolProps {
-    name: string;
-    type?: "component" | "background";
-    action?: (file: File, type: string, defaultValue: any) => Promise<any>;
-    responseMapping?: {
-        status: string;
-        message: string;
-        data: string;
-        src: string;
-    };
-    defaultValue?: any;
-}
-declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react").JSX.Element;
-export default UploadTool;