seat-editor 1.6.12 → 1.6.13

package/dist/features/view-only/index.d.ts

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

package/dist/features/view-only/{index.jsx → index.js}

@@ -1,5 +1,6 @@
 "use client";
 "use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -158,47 +159,39 @@ const LayerView = (props) => {
             }
         };
     }, []);
-    return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
+    return (_jsx("div", Object.assign({ 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>);
+        } }, props.containerProps, { children: _jsx(TransformWrapper, Object.assign({ 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, children: _jsx(TransformComponent, { wrapperStyle: {
+                    width: "100%",
+                    height: "100%",
+                    overflow: "visible",
+                }, contentStyle: {
+                    width: "100%",
+                    height: "100%",
+                }, children: _jsx("svg", Object.assign({}, 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",
+                    }, children: _jsx(Layers, { mode: "view", components: [
+                            ...extraComponentsEditor,
+                            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
+                        ], onClick: handleSelectComponent, selectedTable: selectedTable, selectedTableColor: selectedTableColor }) })) }) })) })));
 };
 export default LayerView;

package/dist/provider/antd-provider.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(AntdRegistry, { children: _jsx(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: children }) }));
+};

package/dist/provider/redux-provider.d.ts

@@ -1,3 +1,3 @@
 export declare const ReduxProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/provider/{redux-provider.jsx → redux-provider.js}

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

package/dist/provider/store-provider.d.ts

@@ -1,4 +1,4 @@
 export declare const StoreProvider: ({ children, themeColor, }: {
     children: React.ReactNode;
     themeColor?: string;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/provider/{store-provider.jsx → store-provider.js}

@@ -1,10 +1,9 @@
 "use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 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>);
+    return (_jsx(ReduxProvider, { children: _jsx(AntdProvider, { themeColor: themeColor, children: children }) }));
 };

package/package.json

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

package/dist/app/new-board/page.jsx

@@ -1,53 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import SeatEditor from "../../features/package";
-import { constantData } from "../constant";
-export default function NewBoard() {
-    const [initialValue, setInitialValue] = useState([]);
-    const [extraComponents, setExtraComponents] = useState([]);
-    const [viewOnly, setViewOnly] = useState(true);
-    useEffect(() => {
-        setInitialValue(constantData);
-        setExtraComponents([{
-                src: "https://d3l3j4e3k9p181.cloudfront.net/dev/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1751350513582817819_download (10).jpg",
-                id: 1747388267450,
-                x: 0,
-                y: 0,
-                shape: "background",
-                width: 100,
-                height: 100,
-            }]);
-    }, []);
-    return (<>
-      <div className="w-full h-screen flex flex-col relative justify-center">
-        {/* <div className="w-full h-[1000px] bg-white border-r border-gray-200"> */}
-        {/* <LayerView
-          componentProps={initialValue}
-          mappingKey="properties"
-          extraComponentProps={[]}
-          defaultBackground="#ffffff"
-          // dragOnly={true}
-          statusKey="status"
-          
-        /> */}
-        {/* </div> */}
-        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
-          {viewOnly ? "Edit Mode" : "View Mode"}
-        </button>
-        <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly mappingKey="properties" onCurrentStateChange={(setState) => {
-            var _a, _b, _c, _d;
-            if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
-            }
-            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
-            }
-        }} extraComponentProps={extraComponents} defaultBackground="#ffffff" 
-    // dragOnly={true}
-    statusKey="status"/>
-          </div>
-
-      </div>
-    </>);
-}

package/dist/app/page.jsx

@@ -1,13 +0,0 @@
-import Board from "../features/board";
-import SideTool from "../features/side-tool";
-import ControlPanels from "../features/panel";
-const TableEditor = () => {
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <SideTool />
-        <Board />
-        <ControlPanels />
-      </div>
-    </>);
-};
-export default TableEditor;

package/dist/components/button-tools/index.jsx

@@ -1,17 +0,0 @@
-"use client";
-import { Button, Popover } from "antd";
-const ButtonTools = (props) => {
-    const { buttonProps, items, popoverProps } = props;
-    if (items.length === 0) {
-        return (<Popover trigger="hover" {...popoverProps}>
-        <Button {...buttonProps}/>
-      </Popover>);
-    }
-    return (<Popover content={<div>
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-        </div>} trigger="click">
-      <Button {...buttonProps}/>
-    </Popover>);
-};
-export default ButtonTools;

package/dist/components/form-tools/label.jsx

@@ -1,44 +0,0 @@
-"use client";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
-const SectionLabel = () => {
-    return (<div className="py-2">
-      <h1 className="heading-s">Section Labeling</h1>
-      <Form.Item label="Labels in square" name={"labels"}>
-        <Form.List name="labels">
-          {(fields, { add, remove }) => (<>
-              {fields.map((field) => (<div key={field.key}>
-                  <Flex gap={2}>
-                    <Form.Item name={[field.name, "label"]} label="Text">
-                      <Input />
-                    </Form.Item>
-                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-                      <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-                    </Form.Item>
-                  </Flex>
-                  <Flex gap={2}>
-                    <Form.Item name={[field.name, "x"]} label="X">
-                      <InputNumber />
-                    </Form.Item>
-                    <Form.Item name={[field.name, "y"]} label="Y">
-                      <InputNumber />
-                    </Form.Item>
-                    <Form.Item name={[field.name, "fontSize"]} label="Size">
-                      <InputNumber suffix="px"/>
-                    </Form.Item>
-                  </Flex>
-                </div>))}
-              <Flex gap={2}>
-                <Button type="primary" onClick={() => add()} className="btn btn-primary">
-                  Add
-                </Button>
-                <Button type="primary" onClick={() => remove(fields.length - 1)} className="btn btn-primary">
-                  Remove
-                </Button>
-              </Flex>
-            </>)}
-        </Form.List>
-      </Form.Item>
-      <div className="divider-dashed"/>
-    </div>);
-};
-export default SectionLabel;

package/dist/components/form-tools/shape.jsx

@@ -1,66 +0,0 @@
-"use client";
-import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
-const SectionShape = () => {
-    const optionsShape = [
-        {
-            value: "circle",
-            label: "Circle",
-        },
-        {
-            value: "square",
-            label: "Square",
-        },
-        {
-            value: "table-seat-circle",
-            label: "Table Seat Circle",
-        },
-        {
-            label: "Image Table",
-            value: "image-table",
-        },
-    ];
-    return (<div className="py-2">
-      <h1 className="heading-s">Shape</h1>
-      <Flex gap={2} className="w-full">
-        <Form.Item label="Name" name="shape" className="w-full">
-          <Select options={optionsShape} className="w-full"/>
-        </Form.Item>
-      </Flex>
-      <Flex gap={2} className="w-full">
-        <Form.Item label="Width" name="width" className="w-full">
-          <InputNumber suffix="px"/>
-        </Form.Item>
-        <Form.Item label="Height" name="height" className="w-full">
-          <InputNumber suffix="px"/>
-        </Form.Item>
-      </Flex>
-      <Flex gap={2}>
-        <Form.Item label="Position X" name="x" className="w-full">
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label="Position Y" name="y" className="w-full">
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label="Rotation" name="rotation" className="w-full">
-          <InputNumber />
-        </Form.Item>
-      </Flex>
-      <Flex gap={2}>
-        <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-        </Form.Item>
-        <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-        </Form.Item>
-      </Flex>
-      <Flex>
-        <Form.Item label="Stroke Width" name={"strokeWidth"} className="w-full">
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label="opacity" name={"opacity"} className="w-full">
-          <InputNumber step={0.1} max={1} min={0}/>
-        </Form.Item>
-      </Flex>
-    </div>);
-};
-export default SectionShape;