seat-editor 3.0.0 → 3.0.2

package/dist/features/panel/{index.js → index.jsx}

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Input } from "antd";
@@ -212,16 +211,16 @@ const ControlPanels = (props) => {
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return (_jsx(SelectToolForm, { action: action, responseMapping: responseMapping }));
+                return (<SelectToolForm action={action} responseMapping={responseMapping}/>);
             case "square":
             case "circle":
-                return _jsx(SquareToolForm, {});
+                return <SquareToolForm />;
             case "table-seat-circle":
-                return _jsx(SeatCircle, {});
+                return <SeatCircle />;
             case "image-table":
-                return (_jsx(UploadTool, { name: tool.active, type: "component", action: action, responseMapping: responseMapping }));
+                return (<UploadTool name={tool.active} type="component" action={action} responseMapping={responseMapping}/>);
             case "background":
-                return (_jsx(UploadTool, { name: tool.active, type: "background", action: action, responseMapping: responseMapping }));
+                return (<UploadTool name={tool.active} type="background" action={action} responseMapping={responseMapping}/>);
             default:
                 return null;
         }
@@ -235,6 +234,25 @@ const ControlPanels = (props) => {
         });
     };
     // if(!show) return null
-    return (_jsx("div", { className: clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]"), children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
+    return (<div className={clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]")}>
+      {/* <Drawer
+        open={show}
+        onClose={handleClose}
+        title="Panel"
+        styles={{
+          body: {
+            paddingBottom: 0,
+          },
+        }}
+      > */}
+      <div className="bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300">
+        <Form layout="vertical" form={form} name="table" onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
+          <Form.Item name="id" hidden>
+            <Input />
+          </Form.Item>
+          {renderFormPanel()}
+        </Form>
+      </div>
+    </div>);
 };
 export default ControlPanels;

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

@@ -2,5 +2,5 @@ declare const SelectToolForm: ({ title, action, responseMapping }: {
     title?: string;
     action: any;
     responseMapping: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/{select-tool.js → select-tool.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAppSelector } from "../../hooks/use-redux";
 import SquareToolForm from "./square-circle-tool";
 import SeatCircle from "./table-seat-circle";
@@ -26,33 +25,47 @@ const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
                 .replace(/-/g, " ")
                 .replace(/\b\w/g, (char) => char.toUpperCase());
         };
-        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [variableFormatToString(shape), ":"] }), " ", count] }, shape))) })] }));
+        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 _jsx(SquareToolForm, {});
+                return <SquareToolForm />;
             case "table-seat-circle":
-                return _jsx(SeatCircle, {});
+                return <SeatCircle />;
             case "table-seat-square":
-                return _jsx(SeatSquare, {});
+                return <SeatSquare />;
             case "image-table":
             case "background":
-                return (_jsx(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"
+                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" }));
+                        : "component"}/>);
             case "text":
-                return _jsx(TextTool, {});
+                return <TextTool />;
             default:
                 return null;
         }
     };
     const renderSelectionComponent = () => {
         if (selectedGroup) {
-            return (_jsx(SelectedGroup, {}));
+            return (<SelectedGroup />);
         }
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent(), renderSelectionComponent()] }));
+    return (<div className="flex flex-col gap-2">
+      <SummaryComponents />
+      {renderComponent()}
+      {renderSelectionComponent()}
+    </div>);
 };
 export default SelectToolForm;

package/dist/features/panel/selected-group.d.ts

@@ -1,2 +1,2 @@
-declare const SelectedGroup: () => import("react/jsx-runtime").JSX.Element;
+declare const SelectedGroup: () => import("react").JSX.Element;
 export default SelectedGroup;

package/dist/features/panel/selected-group.jsx

@@ -0,0 +1,47 @@
+"use client";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+const SelectedGroup = () => {
+    return (<>
+      <div className="py-2">
+        <h1 className="heading-s"> Group Selection</h1>
+        <div className="py-2">
+          <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 max={360} min={0}/>
+            </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>
+      </div>
+    </>);
+};
+export default SelectedGroup;

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

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

package/dist/features/panel/{square-circle-tool.js → square-circle-tool.jsx}

@@ -1,8 +1,10 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const SquareToolForm = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
+    return (<>
+      <SectionShape />
+      <SectionLabel />
+    </>);
 };
 export default SquareToolForm;

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

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

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

@@ -0,0 +1,31 @@
+"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/table-seat-square.d.ts

@@ -1,2 +1,2 @@
-declare const SeatSquare: () => import("react/jsx-runtime").JSX.Element;
+declare const SeatSquare: () => import("react").JSX.Element;
 export default SeatSquare;

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

@@ -0,0 +1,46 @@
+"use client";
+import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatSquare = () => {
+    return (<>
+      <div className="py-2">
+        <h1 className="heading-s"> Square table</h1>
+        <Flex className="w-full">
+          <Form.Item name="openSpace" label="Open Space" className="w-full">
+            <InputNumber max={1} min={0} step={0.1}/>
+          </Form.Item>
+        </Flex>
+        <Row gutter={[16, 16]}>
+          <Col span={12}>
+            <Form.Item name={["seatPositions", "top"]} label="Top" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+            <Form.Item name={["seatPositions", "left"]} label="Left" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item name={["seatPositions", "right"]} label="Right" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+            <Form.Item name={["seatPositions", "bottom"]} label="Bottom" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <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 SeatSquare;

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

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

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

@@ -0,0 +1,26 @@
+"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

@@ -10,5 +10,5 @@ interface UploadToolProps {
     };
     defaultValue?: any;
 }
-declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

package/dist/features/panel/{upload-tool.js → upload-tool.jsx}

@@ -8,7 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Upload, Image, Button } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
@@ -125,6 +124,29 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
-    return (_jsxs(_Fragment, { children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, children: "Edit" })] })) : (_jsxs(Dragger, Object.assign({}, propsUpload, { action: "", children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] }))), _jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }));
+    return (<>
+      {defaultSrc ? (<>
+          <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
+            <Image src={defaultSrc}/>
+          </div>
+          <Button type="primary" onClick={handleDelete}>
+            Edit
+          </Button>
+        </>) : (<Dragger {...propsUpload} action={""}>
+          <p className="ant-upload-drag-icon">
+            <InboxOutlined />
+          </p>
+          <p className="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p className="ant-upload-hint">
+            Support for a single or bulk upload. Strictly prohibited from
+            uploading company data or other banned files.
+          </p>
+        </Dragger>)}
+
+      <SectionShape allowChangeShape={type === "component"}/>
+      <SectionLabel />
+    </>);
 };
 export default UploadTool;

package/dist/features/side-tool/index.d.ts

@@ -4,5 +4,5 @@ declare const SideTool: ({ dragOnly, deleteAutorized, }: {
         component: boolean;
         extraComponent: boolean;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SideTool;