Feat: added data sync from props

CONTRIBUTING.md

@@ -1,7 +1,3 @@
-## Installation
-
-Run `bun i @mezh-hq/react-seat-toolkit` to incorporate into your project <br/>
-
 ## Getting started
 
 - Run `bun install` to install all dependencies

README.md

@@ -29,8 +29,6 @@ React UI library to design and render seat layouts. The library is still under a
 </p>
 
 
-
-
 ## Features
 
 - **JSON based**: Define your seat layout using JSON data and retrieve it back as JSON after customization ✓
@@ -82,6 +80,71 @@ React UI library to design and render seat layouts. The library is still under a
 
 - **Override styles**: Override the default styles to match your application's theme 🛠️
 
+## Installation
+
+Run `bun i @mezh-hq/react-seat-toolkit` to incorporate into your project <br/>
+
+## Usage
+
+### User mode
+
+```jsx
+import React from 'react';
+import SeatToolkit from '@mezh-hq/react-seat-toolkit';
+
+const App = () => {
+  const data = {
+    seats: [
+      {
+        id: '1',
+        x: 100,
+        y: 100,
+        label: 'A1',
+        color: 'blue',
+      },
+    ],
+  };
+  return (
+    <SeatToolkit
+      mode="user"
+      data={data}
+      events={{
+        onSeatClick: (seat) => {
+          console.log(seat);
+        },
+        onSectionClick: (section) => {
+          console.log(section);
+        },
+      }}
+    />
+  );
+};
+
+export default App;
+```
+
+### Designer mode
+
+```jsx
+import React from 'react';
+import SeatToolkit from '@mezh-hq/react-seat-toolkit';
+
+const App = () => {
+  return (
+    <SeatToolkit
+      mode="designer"
+      events={{
+        onExport: (data) => {
+          console.log(data);
+        },
+      }}
+    />
+  );
+};
+
+export default App;
+```
+
 ## Contributing
 
-Please read [CONTRIBUTING.md](https://github.com/mezh-hq/react-seat-toolkit/blob/main/CONTRIBUTING.md) for details on setting up your development environment and the process for submitting pull requests to us.
+Please read [CONTRIBUTING.md](https://github.com/mezh-hq/react-seat-toolkit/blob/main/CONTRIBUTING.md) for details on setting up your development environment and the process of submitting pull requests to us.

src/components/core/animated-switcher.jsx → src/components/core/animated-switcher.tsx

@@ -1,7 +1,23 @@
 import { motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
-const AnimatedSwitcher = ({ customKey, component, alternateComponent, show, className, duration }) => {
+interface AnimatedSwitcherProps {
+  customKey?: string;
+  component: React.ReactNode;
+  alternateComponent?: React.ReactNode;
+  show: boolean;
+  className?: string;
+  duration?: number;
+}
+
+const AnimatedSwitcher = ({
+  customKey,
+  component,
+  alternateComponent,
+  show,
+  className,
+  duration
+}: AnimatedSwitcherProps) => {
   return (
     <motion.div
       key={customKey ?? (show ? "component" : "alternateComponent")}

src/components/footer.jsx → src/components/footer.tsx

@@ -3,7 +3,7 @@ import { AnimatedSwitcher } from "./core";
 import { tools } from "./toolbar/data";
 
 const Footer = () => {
-  const selectedTool = useSelector((state) => state.toolbar.selectedTool);
+  const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
   return (
     <div className="w-full fixed bottom-0 h-8 flex justify-center items-center bg-black text-white">
       <span className="text-sm">React Seat Toolkit </span>
@@ -12,6 +12,7 @@ const Footer = () => {
         customKey={selectedTool}
         className="absolute top-[0.4rem] left-5 text-xs"
         component={<span>{tools[selectedTool]?.description}</span>}
+        alternateComponent={null}
         duration={0.2}
       />
     </div>

src/components/index.tsx

@@ -0,0 +1,46 @@
+import { STKMode } from "@/constants";
+import { useEvents, useInteractions } from "@/hooks";
+import type { ISTKProps } from "@/types";
+import { default as Controls } from "./controls";
+import { default as Footer } from "./footer";
+import { default as Operations } from "./operations";
+import { default as Toolbar } from "./toolbar";
+import { Cursor, default as Workspace } from "./workspace";
+
+export * from "./core";
+
+const Designer: React.FC<ISTKProps> = (props) => {
+  useEvents();
+  useInteractions();
+  return (
+    <>
+      <div className="h-full flex flex-col">
+        <Operations />
+        <div className="h-full flex relative">
+          <Toolbar />
+          <Workspace {...props} />
+          <Controls />
+        </div>
+      </div>
+      <Footer />
+      <Cursor />
+    </>
+  );
+};
+
+const User: React.FC<ISTKProps> = (props) => {
+  return (
+    <div className="h-full flex flex-col relative">
+      <Workspace {...props} />
+    </div>
+  );
+};
+
+const Core = (props: ISTKProps) => {
+  if (props.mode === STKMode.Designer) {
+    return <Designer {...props} />;
+  }
+  return <User {...props} />;
+};
+
+export default Core;

src/components/workspace/crosshairs.jsx → src/components/workspace/crosshairs.tsx

@@ -7,7 +7,7 @@ export const Crosshairs = ({ render }) => {
   const [y, setY] = useState(0);
   const [enabled, setEnabled] = useState(false);
 
-  const move = (e) => {
+  const move = (e: Event) => {
     const pointer = d3.pointer(e);
     setX(pointer[0]);
     setY(pointer[1]);

src/components/workspace/grid.jsx → src/components/workspace/grid.tsx

@@ -1,15 +1,14 @@
-import GridLines from "react-gridlines";
+import { default as GridLines } from "react-gridlines";
 import { useSelector } from "react-redux";
 import { AnimatedSwitcher } from "../core";
 
 const Grid = () => {
-  const grid = useSelector((state) => state.editor.grid);
+  const grid = useSelector((state: any) => state.editor.grid);
   if (!grid) return null;
   return (
     <AnimatedSwitcher
       show={grid}
       component={<GridLines className="w-full h-full opacity-20" cellWidth={44} strokeWidth={2} />}
-      alternateComponent={null}
       className="absolute top-0 left-0 pointer-events-none"
     />
   );

src/components/workspace/index.jsx → src/components/workspace/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useLayoutEffect } from "react";
 import { useSelector } from "react-redux";
 import { ids } from "@/constants";
 import { store } from "@/store";
-import { initializeElements } from "@/store/reducers/editor";
+import { initializeElements, sync } from "@/store/reducers/editor";
+import type { ISTKProps } from "@/types";
 import { Tool, tools } from "../toolbar/data";
 import { default as Crosshairs } from "./crosshairs";
 import { default as Element, ElementType } from "./elements";
@@ -11,21 +12,25 @@ import { default as Zoom } from "./zoom";
 
 export { default as Cursor } from "./cursor";
 
-export const Workspace = () => {
-  const booths = useSelector((state) => state.editor.booths);
-  const seats = useSelector((state) => state.editor.seats);
-  const text = useSelector((state) => state.editor.text);
-  const shapes = useSelector((state) => state.editor.shapes);
-  const polylines = useSelector((state) => state.editor.polylines);
-  const images = useSelector((state) => state.editor.images);
-  const categories = useSelector((state) => state.editor.categories);
-  const selectedElementIds = useSelector((state) => state.editor.selectedElementIds);
-  const selectedPolylineId = useSelector((state) => state.editor.selectedPolylineId);
-  const selectedTool = useSelector((state) => state.toolbar.selectedTool);
+export const Workspace: React.FC<ISTKProps> = (props) => {
+  const booths = useSelector((state: any) => state.editor.booths);
+  const seats = useSelector((state: any) => state.editor.seats);
+  const text = useSelector((state: any) => state.editor.text);
+  const shapes = useSelector((state: any) => state.editor.shapes);
+  const polylines = useSelector((state: any) => state.editor.polylines);
+  const images = useSelector((state: any) => state.editor.images);
+  const categories = useSelector((state: any) => state.editor.categories);
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
+  const selectedPolylineId = useSelector((state: any) => state.editor.selectedPolylineId);
+  const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
 
   useLayoutEffect(() => {
-    store.dispatch(initializeElements());
-  }, []);
+    if (props.data) {
+      store.dispatch(sync(props.data));
+    } else {
+      store.dispatch(initializeElements());
+    }
+  }, [props.data]);
 
   const elementProps = useCallback(
     (elem) => ({

src/constants/index.ts

@@ -46,3 +46,8 @@ export const seatStatusColors = {
     label: "#ffffff"
   }
 };
+
+export enum STKMode {
+  Designer = "designer",
+  User = "user"
+}

src/index.tsx

@@ -1,34 +1,15 @@
 import { Provider } from "react-redux";
-import { Controls, Cursor, Footer, Operations, Toolbar, TooltipProvider, Workspace } from "@/components";
-import { useEvents, useInteractions } from "@/hooks";
+import { default as Core, TooltipProvider } from "@/components";
 import { store } from "@/store";
+import { type ISTKProps } from "./types";
 
-export const SeatToolkit = () => {
+export const SeatToolkit = (props: ISTKProps) => {
   return (
     <Provider store={store}>
-      <Designer />
-    </Provider>
-  );
-};
-
-const Designer = () => {
-  useEvents();
-  useInteractions();
-  return (
-    <>
       <TooltipProvider>
-        <div className="h-full flex flex-col">
-          <Operations />
-          <div className="h-full flex relative">
-            <Toolbar />
-            <Workspace />
-            <Controls />
-          </div>
-        </div>
-        <Footer />
+        <Core {...props} />
       </TooltipProvider>
-      <Cursor />
-    </>
+    </Provider>
   );
 };
 

src/store/reducers/editor/index.ts

@@ -1,5 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { v4 as uuidv4 } from "uuid";
+import type { ISTKData } from "@/types";
 import booths from "./booths";
 import seats from "./seats";
 import shapes from "./shapes";
@@ -203,6 +204,13 @@ export const slice = createSlice({
     },
     setSelectedPolylineId: (state, action) => {
       state.selectedPolylineId = action.payload;
+    },
+    sync: (state, action) => {
+      const { name, ...data } = action.payload as ISTKData;
+      state.location = name ?? state.location;
+      Object.keys(data).forEach((key) => {
+        state[key] = data[key] ?? state[key];
+      });
     }
   }
 });
@@ -241,7 +249,8 @@ export const {
   addSection,
   updateSection,
   deleteSection,
-  setSelectedPolylineId
+  setSelectedPolylineId,
+  sync
 } = slice.actions;
 
 export default slice.reducer;

src/stories/designer.stories.jsx → src/stories/designer.stories.tsx

@@ -1,3 +1,4 @@
+import { STKMode } from "@/constants";
 import SeatToolkit from "@/index";
 
 export default {
@@ -10,5 +11,5 @@ export default {
 };
 
 export const Default = {
-  render: () => <SeatToolkit />
+  render: () => <SeatToolkit mode={STKMode.Designer} />
 };

src/types/elements/booth.ts

@@ -0,0 +1,5 @@
+export interface IBooth {
+  id: string;
+  x: number;
+  y: number;
+}

src/types/elements/image.ts

@@ -0,0 +1,8 @@
+export interface IImage {
+  id: string;
+  x: number;
+  y: number;
+  href: string;
+  width?: number;
+  height?: number;
+}

src/types/elements/index.ts

@@ -0,0 +1,6 @@
+export * from "./image";
+export * from "./seat";
+export * from "./text";
+export * from "./shape";
+export * from "./booth";
+export * from "./polyline";

src/types/elements/polyline.ts

@@ -0,0 +1,20 @@
+export interface ISection {
+  id: string;
+  name: string;
+  color: string;
+  freeSeating: boolean;
+  capacity?: number;
+}
+
+export interface IPolylinepoint {
+  x: number;
+  y: number;
+}
+
+export interface IPolyline {
+  id: string;
+  points: IPolylinepoint[];
+  color?: string;
+  stroke?: string;
+  section?: string;
+}