Feat: added support for a few style overrrides

Author: Akalanka47000

src/components/core/animated-switcher.tsx

@@ -7,6 +7,7 @@ interface AnimatedSwitcherProps {
   alternateComponent?: React.ReactNode;
   show: boolean;
   className?: string;
+  style?: React.CSSProperties;
   duration?: number;
 }
 
@@ -16,6 +17,7 @@ const AnimatedSwitcher = ({
   alternateComponent,
   show,
   className,
+  style,
   duration
 }: AnimatedSwitcherProps) => {
   return (
@@ -25,6 +27,7 @@ const AnimatedSwitcher = ({
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: duration ?? 0.3 }}
+      style={style}
       exit={{ opacity: 0 }}
     >
       {show ? component : alternateComponent}

src/components/footer.tsx

@@ -1,16 +1,28 @@
 import { useSelector } from "react-redux";
+import { twMerge } from "tailwind-merge";
+import { ISTKProps } from "@/types";
 import { AnimatedSwitcher } from "./core";
 import { tools } from "./toolbar/data";
 
-const Footer = () => {
+const Footer: React.FC<ISTKProps> = (props) => {
   const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
+  const styles = props.styles?.footer;
   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>
+    <div
+      className={twMerge(
+        "w-full fixed bottom-0 h-8 flex justify-center items-center bg-black text-white",
+        styles?.root?.className
+      )}
+      style={styles?.root?.properties}
+    >
+      <span className={twMerge("text-sm", styles?.title?.className)} style={styles?.title?.properties}>
+        React Seat Toolkit{" "}
+      </span>
       <AnimatedSwitcher
         show={!!selectedTool}
         customKey={selectedTool}
-        className="absolute top-[0.4rem] left-5 text-xs"
+        className={twMerge("absolute top-[0.4rem] left-5 text-xs", styles?.meta?.className)}
+        style={styles?.meta?.properties}
         component={<span>{tools[selectedTool]?.description}</span>}
         alternateComponent={null}
         duration={0.2}

src/components/index.tsx

@@ -1,3 +1,4 @@
+import { twMerge } from "tailwind-merge";
 import { useEvents, useInteractions } from "@/hooks";
 import { type ISTKProps, STKMode } from "@/types";
 import { default as Controls } from "./controls";
@@ -13,23 +14,32 @@ const Designer: React.FC<ISTKProps> = (props) => {
   useInteractions();
   return (
     <>
-      <div className="h-full flex flex-col">
+      <div
+        className={twMerge("h-full min-h-[85vh] flex flex-col", props.styles?.root?.className)}
+        style={props?.styles?.root?.properties}
+      >
         <Operations />
-        <div className="h-full flex relative">
-          <Toolbar />
+        <div
+          className={twMerge("h-full flex relative", props.styles?.workspace?.container?.className)}
+          style={props.styles?.workspace?.container?.properties}
+        >
+          <Toolbar {...props} />
           <Workspace {...props} />
           <Controls />
         </div>
       </div>
-      <Footer />
+      <Footer {...props} />
       <Cursor />
     </>
   );
 };
 
 const User: React.FC<ISTKProps> = (props) => {
   return (
-    <div className="h-full min-h-[85vh] flex flex-col relative">
+    <div
+      className={twMerge("h-full min-h-[85vh] flex flex-col relative", props.styles?.root?.className)}
+      style={props?.styles.root?.properties}
+    >
       <Workspace {...props} />
     </div>
   );

src/components/toolbar/index.tsx

@@ -6,14 +6,17 @@ import { ids } from "@/constants";
 import { store } from "@/store";
 import { clearCursor, setCursor, setSelectedPolylineId, showControls } from "@/store/reducers/editor";
 import { clearTool, selectTool } from "@/store/reducers/toolbar";
+import { ISTKProps } from "@/types";
 import { fallible } from "@/utils";
 import { selectFirstShape } from "../controls/shapes";
 import { Tool, tools } from "./data";
 
-const ToolBar = () => {
+const ToolBar: React.FC<ISTKProps> = (props) => {
   const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
   const selectedPolylineId = store.getState().editor.selectedPolylineId;
 
+  const styles = props.styles?.toolbar;
+
   const onEscape = useCallback(
     (event) => {
       if (event.key === "Escape") {
@@ -58,7 +61,11 @@ const ToolBar = () => {
   return (
     <div
       id={ids.toolbar}
-      className="h-full flex flex-col gap-5 border-t pt-5 border-black [&>*:last-child]:[&>*:last-child]:hidden bg-black/5"
+      className={twMerge(
+        "h-full flex flex-col gap-5 border-t pt-5 border-black [&>*:last-child]:[&>*:last-child]:hidden bg-black/5",
+        styles?.root?.className
+      )}
+      style={styles?.root?.properties}
     >
       {Object.entries(tools).map(([key, value]) => {
         const Icon = value.icon;
@@ -67,8 +74,10 @@ const ToolBar = () => {
             key={key}
             className={twMerge(
               "relative hover:bg-white transition-all duration-300 !cursor-pointer",
-              selectedTool === key && "bg-white/80"
+              selectedTool === key && "bg-white/80",
+              styles?.tool?.root?.className
             )}
+            style={styles?.tool?.root?.properties}
             onClick={() => onToolClick(key)}
           >
             <Tooltip>
@@ -77,15 +86,29 @@ const ToolBar = () => {
                   size={20}
                   className={twMerge(
                     "pointer-events-none",
-                    selectedTool === key && "text-blue-600 transition-all duration-300"
+                    selectedTool === key && "text-blue-600 transition-all duration-300",
+                    styles?.tool?.icon?.className
                   )}
+                  style={styles?.tool?.icon?.properties}
                 />
               </TooltipTrigger>
-              <TooltipContent align="start" alignOffset={30} sideOffset={-39} className="flex gap-3 ml-8">
+              <TooltipContent
+                align="start"
+                alignOffset={30}
+                sideOffset={-39}
+                className={twMerge("flex gap-3 ml-8", styles?.tool?.label?.className)}
+                style={styles?.tool?.label?.properties}
+              >
                 {key}
               </TooltipContent>
             </Tooltip>
-            <div className="bg-black h-1 w-1 mx-auto left-[45%] opacity-10 absolute bottom-0 transform translate-y-[0.75rem] rotate-[-25deg]" />
+            <div
+              className={twMerge(
+                "bg-black h-1 w-1 mx-auto left-[45%] opacity-10 absolute bottom-0 transform translate-y-[0.75rem] rotate-[-25deg]",
+                styles?.divider?.className
+              )}
+              style={styles?.divider?.properties}
+            />
           </div>
         );
       })}

src/hooks/events/duplicate.ts renamed to src/hooks/events/duplication.ts

@@ -1,5 +1,5 @@
 import useDeselection from "./deselection";
-import useDuplicate from "./duplicate";
+import useDuplicate from "./duplication";
 import usePolyline from "./polyline";
 import useWorkspaceClick from "./workspace-click";
 

src/hooks/events/index.ts

@@ -1,4 +1,5 @@
 import { IBooth, IImage, IPolyline, ISeat, ISeatCategory, ISection, IShape, IText } from "./elements";
+import { IStyles } from "./styles";
 
 export * from "./elements";
 
@@ -29,4 +30,5 @@ export interface ISTKProps {
   mode: STKMode;
   events?: IEvents;
   data?: ISTKData;
+  styles?: IStyles;
 }

src/types/index.ts

@@ -0,0 +1,26 @@
+interface IStyle {
+  className?: string;
+  properties?: React.CSSProperties;
+}
+
+export interface IStyles {
+  root?: IStyle;
+  workspace?: {
+    container?: IStyle;
+    root?: IStyle;
+  };
+  toolbar?: {
+    root?: IStyle;
+    tool?: {
+      root?: IStyle;
+      icon?: IStyle;
+      label?: IStyle;
+    };
+    divider?: IStyle;
+  };
+  footer: {
+    root?: IStyle;
+    title?: IStyle;
+    meta?: IStyle;
+  };
+}