diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a4f4357..d48e721 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,7 +1,3 @@ -## Installation - -Run `bun i @mezh-hq/react-seat-toolkit` to incorporate into your project
- ## Getting started - Run `bun install` to install all dependencies diff --git a/README.md b/README.md index 0d4f96f..0ac3084 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,6 @@ React UI library to design and render seat layouts. The library is still under a

- - ## 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
+ +## 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 ( + { + 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 ( + { + 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. diff --git a/package.json b/package.json index 0bfbf64..b02ebd6 100644 --- a/package.json +++ b/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", diff --git a/src/components/controls/index.jsx b/src/components/controls/index.tsx similarity index 90% rename from src/components/controls/index.jsx rename to src/components/controls/index.tsx index 76ce3b2..2f0bee8 100644 --- a/src/components/controls/index.jsx +++ b/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) { diff --git a/src/components/core/animated-switcher.jsx b/src/components/core/animated-switcher.tsx similarity index 59% rename from src/components/core/animated-switcher.jsx rename to src/components/core/animated-switcher.tsx index 9f17a7a..f0066b5 100644 --- a/src/components/core/animated-switcher.jsx +++ b/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 ( { - const selectedTool = useSelector((state) => state.toolbar.selectedTool); + const selectedTool = useSelector((state: any) => state.toolbar.selectedTool); return (
React Seat Toolkit @@ -12,6 +12,7 @@ const Footer = () => { customKey={selectedTool} className="absolute top-[0.4rem] left-5 text-xs" component={{tools[selectedTool]?.description}} + alternateComponent={null} duration={0.2} />
diff --git a/src/components/index.jsx b/src/components/index.jsx deleted file mode 100644 index 87e6411..0000000 --- a/src/components/index.jsx +++ /dev/null @@ -1,6 +0,0 @@ -export * from "./core"; -export * from "./workspace"; -export { default as Controls } from "./controls"; -export { default as Footer } from "./footer"; -export { default as Operations } from "./operations"; -export { default as Toolbar } from "./toolbar"; diff --git a/src/components/index.tsx b/src/components/index.tsx new file mode 100644 index 0000000..bd83353 --- /dev/null +++ b/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 = (props) => { + useEvents(); + useInteractions(); + return ( + <> +
+ +
+ + + +
+
+