Merge pull request #1 from mezh-hq/development

Documentation updates and basic prop inputs

Author: Akalanka47000

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 renamed to 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 renamed to 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")}