Merge pull request #1 from mezh-hq/development

Documentation updates and basic prop inputs

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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezh-hq/react-seat-toolkit",
-  "version": "0.0.1",
+  "version": "0.1.0-blizzard.1",
   "description": "React UI library to design and render seat layouts",
   "main": "dist/index.js",
   "private": false,
@@ -23,7 +23,9 @@
   "keywords": [
     "Designer",
     "Seats",
-    "Layout"
+    "Layout",
+    "Hall arrangement",
+    "Editor"
   ],
   "author": "Akalanka Perera, Miyuru Gunarathna",
   "license": "MIT",

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

@@ -17,9 +17,9 @@ const transition = "transition-all duration-500";
 const width = "w-[22rem]";
 
 const Controls = () => {
-  const open = useSelector((state) => state.editor.showControls);
-  const selectedTool = useSelector((state) => state.toolbar.selectedTool);
-  const selectedElementIds = useSelector((state) => state.editor.selectedElementIds);
+  const open = useSelector((state: any) => state.editor.showControls);
+  const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
 
   const ControlComponent = useMemo(() => {
     if (selectedTool === Tool.Select) {

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/toolbar/index.jsx → src/components/toolbar/index.tsx

@@ -11,7 +11,7 @@ import { selectFirstShape } from "../controls/shapes";
 import { Tool, tools } from "./data";
 
 const ToolBar = () => {
-  const selectedTool = useSelector((state) => state.toolbar.selectedTool);
+  const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
   const selectedPolylineId = store.getState().editor.selectedPolylineId;
 
   const onEscape = useCallback(

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/cursor.jsx → src/components/workspace/cursor.tsx

@@ -13,7 +13,7 @@ export const Cursor = () => {
   const [cursorX, setCursorX] = useState(0);
   const [cursorY, setCursorY] = useState(0);
 
-  const Cursor = useSelector((state) => state.editor.cursor);
+  const Cursor = useSelector((state: any) => state.editor.cursor);
 
   const move = (e) => {
     const pointer = d3.pointer(e);

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

@@ -2,7 +2,7 @@ import { memo, useEffect, useMemo, useRef } from "react";
 import * as d3 from "d3";
 import { isEqual } from "lodash";
 import { twMerge } from "tailwind-merge";
-import { dataAttributes } from "@/constants";
+import { STKMode, dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { clearAndSelectElements, deselectElement, selectElement } from "@/store/reducers/editor";
 import { d3Extended } from "@/utils";
@@ -19,25 +19,26 @@ import {
 
 export * from "./utils";
 
-export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelected = false, ...props }) => {
-  const ref = useRef();
+export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelected = false, options, ...props }) => {
+  const ref = useRef<HTMLElement>();
 
   const node = ref.current && d3.select(ref.current);
 
-  const centerCoords = isSelected && node && d3Extended.getNodeCenter(node);
+  const centerCoords = isSelected && options.mode === STKMode.Designer && node && d3Extended.getNodeCenter(node);
 
   const Element = elements[type];
 
   const controlRadius = useMemo(() => {
+    if (!node) return 0;
     switch (type) {
       case ElementType.Seat:
-        return node?.attr("r") * 6;
+        return +node.attr("r") * 6;
     }
-    return node?.attr("width") * 1.5;
+    return +node.attr("width") * 1.5;
   }, [node]);
 
   useEffect(() => {
-    if (!ref.current) return;
+    if (!ref.current || options.mode !== STKMode.Designer) return;
     const node = d3.select(ref.current);
     if (type === ElementType.Seat) {
       handleSeatDrag(node);
@@ -50,11 +51,11 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
     } else {
       handleDrag(node);
     }
-  }, [ref]);
+  }, [ref, options.mode]);
 
-  const onClick = (e) => {
+  const onClick = (e: any) => {
     const selectedTool = store.getState().toolbar.selectedTool;
-    if (selectedTool === Tool.Select) {
+    if (selectedTool === Tool.Select && ref.current) {
       const ctrlPressed = e.ctrlKey || e.metaKey;
       if (isSelected) {
         if (ctrlPressed) {
@@ -101,6 +102,7 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
           !props.color && type !== ElementType.Text && "text-white"
         )}
         onClick={onClick}
+        options={options}
         {...{ [dataAttributes.elementType]: type }}
       />
     </>