seat-editor 1.2.2 → 1.2.4

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

@@ -1,45 +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" }) => {
-    const components = useAppSelector((state) => state.board.components);
-    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
-    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;
-        }, {});
-        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">{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 name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.name}/>;
-            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,22 +0,0 @@
-"use client";
-import { ColorPicker, Form, Input, InputNumber } from "antd";
-const TextTool = () => {
-    return (<div className="py-2">
-      <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,6 +0,0 @@
-interface UploadToolProps {
-    name: string;
-    type?: "component" | "background";
-}
-declare const UploadTool: ({ name, type }: UploadToolProps) => import("react").JSX.Element;
-export default UploadTool;

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

@@ -1,80 +0,0 @@
-"use client";
-import { Upload, message, } from "antd";
-import { InboxOutlined } from "@ant-design/icons";
-import { useAppDispatch } from "../../hooks/use-redux";
-import { useState } from "react";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const { Dragger } = Upload;
-const UploadTool = ({ name, type }) => {
-    var _a, _b;
-    const [imageUrl, setImageUrl] = useState(null);
-    const dispatch = useAppDispatch();
-    const widthWorkspace = ((_a = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-    const heightWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
-    const props = {
-        name: "file",
-        multiple: false,
-        maxCount: 1,
-        showUploadList: false,
-        onChange(info) {
-            const { status } = info.file;
-            if (status !== "uploading" && info.file.originFileObj) {
-                const file = info.file.originFileObj;
-                if (file) {
-                    const img = new window.Image();
-                    img.onload = () => {
-                        const scaleX = widthWorkspace / img.width;
-                        const scaleY = heightWorkspace / img.height;
-                        // Ambil skala terkecil supaya semua image masuk workspace
-                        const scale = Math.min(1, scaleX, scaleY); // maksimum 1 (jangan perbesar)
-                        // Terapkan skala ke dimensi gambar
-                        const width = img.width * scale;
-                        const height = img.height * scale;
-                        dispatch({
-                            type: type === "component" ? "board/addComponent" : "board/setExtraComponent",
-                            payload: {
-                                id: new Date().getTime(),
-                                x: 0,
-                                y: 0,
-                                width,
-                                height,
-                                rotation: 0,
-                                shape: name,
-                                src: img.src,
-                            },
-                        });
-                    };
-                    img.src = URL.createObjectURL(file);
-                    setImageUrl(img.src);
-                }
-            }
-            if (status === "done") {
-                message.success(`${info.file.name} file uploaded successfully.`);
-            }
-            else if (status === "error") {
-                message.error(`${info.file.name} file upload failed.`);
-            }
-        },
-        onDrop(e) {
-            console.log("Dropped files", e.dataTransfer.files);
-        },
-    };
-    return (<>
-      <Dragger {...props}>
-        <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 />
-      <SectionLabel />
-    </>);
-};
-export default UploadTool;

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

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

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

@@ -1,211 +0,0 @@
-"use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, } 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 = () => {
-    const [color, setColor] = useState("#000000");
-    const dispatch = useAppDispatch();
-    const { active } = useAppSelector((state) => state.tool);
-    const { selectedComponent } = useAppSelector((state) => state.panel);
-    const { components } = useAppSelector((state) => state.board);
-    const [preview, setPreview] = useState(false);
-    const tools = [
-        {
-            id: "select",
-            name: "Select Tool",
-            icon: <MousePointer />,
-        },
-    ];
-    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,
-        });
-    };
-    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
-        });
-    };
-    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 = () => {
-        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, 'right');
-        dispatch({
-            type: "board/setNewComponents",
-            payload: newArr
-        });
-    };
-    return (<div className="h-screen 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={[]}/>))}
-      <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</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/side-tool/side-tool-slice.d.ts

@@ -1,12 +0,0 @@
-import { PayloadAction } from "@reduxjs/toolkit";
-export interface ToolState {
-    active: "circle" | "square" | "diamond" | string;
-    isPreview: boolean;
-}
-export declare const sideToolSlice: import("@reduxjs/toolkit").Slice<ToolState, {
-    setActiveTool: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<string>) => void;
-    setTooglePreview: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<boolean>) => void;
-}, "tool", "tool", import("@reduxjs/toolkit").SliceSelectors<ToolState>>;
-export declare const setActiveTool: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string, "tool/setActiveTool">;
-declare const _default: import("redux").Reducer<ToolState>;
-export default _default;

package/dist/features/side-tool/side-tool-slice.js

@@ -1,20 +0,0 @@
-"use client";
-import { createSlice } from "@reduxjs/toolkit";
-const initialState = {
-    active: "",
-    isPreview: false
-};
-export const sideToolSlice = createSlice({
-    name: "tool",
-    initialState,
-    reducers: {
-        setActiveTool: (state, action) => {
-            state.active = action.payload;
-        },
-        setTooglePreview: (state, action) => {
-            state.isPreview = action.payload;
-        },
-    },
-});
-export const { setActiveTool } = sideToolSlice.actions;
-export default sideToolSlice.reducer;

package/dist/hooks/use-redux.d.ts

@@ -1,4 +0,0 @@
-import { TypedUseSelectorHook } from "react-redux";
-import type { RootState, AppDispatch } from "../libs/store";
-export declare const useAppDispatch: () => AppDispatch;
-export declare const useAppSelector: TypedUseSelectorHook<RootState>;

package/dist/hooks/use-redux.js

@@ -1,3 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-export const useAppDispatch = useDispatch;
-export const useAppSelector = useSelector;

package/dist/index.js

@@ -1,7 +0,0 @@
-import { StoreProvider } from "./provider/store-provider";
-import Board from "./features/board";
-import SideTool from "./features/side-tool";
-import ControlPanels from "./features/panel";
-import LayerView from "./features/view";
-import TableEditor from "./features/package";
-export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, TableEditor };

package/dist/libs/middleware.d.ts

@@ -1,2 +0,0 @@
-import { Middleware } from "@reduxjs/toolkit";
-export declare const middleware: Middleware[];

package/dist/libs/middleware.js

@@ -1,5 +0,0 @@
-"use client";
-export const middleware = [
-// Add your middleware here
-// Example: thunk,
-];

package/dist/libs/rootReducer.d.ts

@@ -1,10 +0,0 @@
-export declare const rootReducer: import("redux").Reducer<{
-    board: import("../features/board/board-slice").InitialState;
-    tool: import("../features/side-tool/side-tool-slice").ToolState;
-    panel: import("../features/panel/panel-slice").PanelState;
-}, import("redux").UnknownAction, Partial<{
-    board: import("../features/board/board-slice").InitialState;
-    tool: import("../features/side-tool/side-tool-slice").ToolState;
-    panel: import("../features/panel/panel-slice").PanelState;
-}>>;
-export type RootState = ReturnType<typeof rootReducer>;

package/dist/libs/rootReducer.js

@@ -1,12 +0,0 @@
-"use client";
-import { combineReducers } from "redux";
-import boardSlice from "../features/board/board-slice";
-import sideTool from "../features/side-tool/side-tool-slice";
-import panelSlice from "../features/panel/panel-slice";
-export const rootReducer = combineReducers({
-    // Add your reducers here
-    board: boardSlice,
-    tool: sideTool,
-    panel: panelSlice,
-    // Example: user: userReducer,
-});

package/dist/libs/store.d.ts

@@ -1,16 +0,0 @@
-import { Action, ThunkAction } from "@reduxjs/toolkit";
-export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
-    board: import("../features/board/board-slice").InitialState;
-    tool: import("../features/side-tool/side-tool-slice").ToolState;
-    panel: import("../features/panel/panel-slice").PanelState;
-}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
-    dispatch: import("redux-thunk").ThunkDispatch<{
-        board: import("../features/board/board-slice").InitialState;
-        tool: import("../features/side-tool/side-tool-slice").ToolState;
-        panel: import("../features/panel/panel-slice").PanelState;
-    }, undefined, import("redux").UnknownAction>;
-}>, import("redux").StoreEnhancer]>>;
-export type AppDispatch = typeof store.dispatch;
-export type RootState = ReturnType<typeof store.getState>;
-export type AppThunk = ThunkAction<void, RootState, unknown, Action<string>>;
-export type AppStore = typeof store;

package/dist/libs/store.js

@@ -1,20 +0,0 @@
-"use client";
-import { configureStore } from "@reduxjs/toolkit";
-import { rootReducer } from "./rootReducer";
-import { logger } from "redux-logger";
-import { middleware } from "./middleware";
-import { FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from "redux-persist";
-if (process.env.NODE_ENV === "development") {
-    console.log("Development mode enabled");
-    middleware.push(logger);
-}
-// const rootPersistReducer = persistReducer<RootState>(rootPersistConfig, rootReducer);
-export const store = configureStore({
-    reducer: rootReducer,
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware({
-        serializableCheck: {
-            ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
-        },
-    }).concat(middleware),
-    devTools: process.env.NODE_ENV !== "production",
-});

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

@@ -1,3 +0,0 @@
-export declare const AntdProvider: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/provider/antd-provider.jsx

@@ -1,30 +0,0 @@
-"use client";
-import { ConfigProvider } from "antd";
-import { AntdRegistry } from "@ant-design/nextjs-registry";
-import { useAppSelector } from "../hooks/use-redux";
-export const AntdProvider = ({ children, }) => {
-    const theme = useAppSelector((state) => state.theme);
-    return (<AntdRegistry>
-      <ConfigProvider theme={{
-            //   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,
-                },
-            },
-        }}>
-        {children}
-      </ConfigProvider>
-    </AntdRegistry>);
-};

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

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

package/dist/provider/redux-provider.jsx

@@ -1,6 +0,0 @@
-"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.d.ts

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

package/dist/provider/store-provider.jsx

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