Feat: added more style overrides

commitlint.config.js

@@ -12,10 +12,12 @@ module.exports = {
         "Prerelease",
         "Chore",
         "Build",
+        "Debug",
         "Perf",
         "Refactor",
         "Revert",
         "CI",
+        "Style",
         "Test",
         "Docs",
         "WIP"

lefthook.yml

@@ -13,4 +13,4 @@ commit-msg:
     commitlint:
       skip:
         - rebase
-      run: npx commitlint --edit --color
+      run: bunx --bun commitlint --edit --color

src/components/controls/select/general.jsx → src/components/controls/select/general.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/core";
 import { d3Extended } from "@/utils";
 
 const GeneralSelectControls = () => {
-  const selectedElementIds = useSelector((state) => state.editor.selectedElementIds);
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
 
   return (
     <div className="flex flex-col gap-4 py-1 mt-1">

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

@@ -9,7 +9,7 @@ import { default as ShapeSelectControls } from "./shape";
 import { default as TextSelectControls } from "./text";
 
 const SelectControls = () => {
-  const selectedElementIds = useSelector((state) => state.editor.selectedElementIds);
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
 
   const ControlComponent = useMemo(() => {
     const firstElementType = document.getElementById(selectedElementIds[0])?.getAttribute?.(dataAttributes.elementType);

src/components/controls/select/text.jsx → src/components/controls/select/text.tsx

@@ -3,7 +3,7 @@ import { d3Extended, rgbToHex } from "@/utils";
 import { default as ControlInput } from "../control-input";
 
 const TextSelectControls = () => {
-  const selectedElementIds = useSelector((state) => state.editor.selectedElementIds);
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
 
   const firstElement = document.getElementById(selectedElementIds[0]);
 

src/components/core/button.tsx

@@ -48,6 +48,7 @@ interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
   wrapperClassName?: string;
   target?: string;
   ariaLabel?: string;
+  variant?: "primary" | "secondary";
 }
 
 const Button = ({ to, wrapperClassName, target, ariaLabel, ...props }: ButtonProps) => {

src/components/core/icon-button.tsx

@@ -2,7 +2,12 @@ import { twMerge } from "tailwind-merge";
 import { default as Button } from "./button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
-const IconButton = ({ label, icon, className, ...props }) => {
+interface IconButtonProps extends React.ComponentProps<typeof Button> {
+  label?: string;
+  icon: React.ReactNode;
+}
+
+const IconButton: React.FC<IconButtonProps> = ({ label, icon, className, ...props }) => {
   const button = (
     <Button
       className={twMerge("px-2", props.disabled && "opacity-80 pointer-events-none", className)}

src/components/footer.tsx

@@ -4,8 +4,9 @@ import { ISTKProps } from "@/types";
 import { AnimatedSwitcher } from "./core";
 import { tools } from "./toolbar/data";
 
-const Footer: React.FC<ISTKProps> = (props) => {
+const Footer: React.FC<ISTKProps> = ({ options: { showFooter = true } = {}, ...props }) => {
   const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
+  if (!showFooter) return null;
   const styles = props.styles?.footer;
   return (
     <div

src/components/index.tsx

@@ -18,7 +18,7 @@ const Designer: React.FC<ISTKProps> = (props) => {
         className={twMerge("h-full min-h-[85vh] flex flex-col", props.styles?.root?.className)}
         style={props?.styles?.root?.properties}
       >
-        <Operations />
+        <Operations {...props} />
         <div
           className={twMerge("h-full flex relative", props.styles?.workspace?.container?.className)}
           style={props.styles?.workspace?.container?.properties}

src/components/operations/grid-switch.jsx → src/components/operations/grid-switch.tsx

@@ -5,7 +5,7 @@ import { toggleGrid } from "@/store/reducers/editor";
 import { TwinSwitch } from "../core";
 
 const GridSwitch = ({ className }) => {
-  const grid = useSelector((state) => state.editor.grid);
+  const grid = useSelector((state: any) => state.editor.grid);
   return (
     <TwinSwitch
       values={["Whitespace", "Grid"]}

src/components/operations/index.tsx

@@ -0,0 +1,122 @@
+import { Braces, Cog, Eye } from "lucide-react";
+import { useSelector } from "react-redux";
+import { twMerge } from "tailwind-merge";
+import { ids } from "@/constants";
+import { useBreakpoint } from "@/hooks";
+import { store } from "@/store";
+import { locationPlaceholder, setLocation, toggleControls } from "@/store/reducers/editor";
+import { ISTKProps } from "@/types";
+import { stateToJSON } from "@/utils";
+import { Body, Button, IconButton } from "../core";
+import { default as GridSwitch } from "./grid-switch";
+
+const onCogClick = () => store.dispatch(toggleControls());
+
+const Operations: React.FC<ISTKProps> = ({
+  options: { showGridSwitch = true, exportButtonText = "Export JSON", operationTriggerIcon } = {},
+  events,
+  ...props
+}) => {
+  const { md } = useBreakpoint();
+
+  const location = useSelector((state: any) => state.editor.location);
+
+  const styles = props.styles?.operations;
+
+  const coreStyles = props.styles?.core;
+
+  const OperationTriggerIcon = operationTriggerIcon ?? Cog;
+
+  const onLocationChange = (e) => {
+    const location = e.target.innerText;
+    if (!location) {
+      document.getElementById("stk-location-name").innerText = locationPlaceholder;
+      return store.dispatch(setLocation(locationPlaceholder));
+    }
+    store.dispatch(setLocation(location));
+  };
+
+  const onExportJson = () => {
+    const json = stateToJSON();
+    if (events?.onExport) {
+      events?.onExport(json);
+    } else {
+      console.log(json);
+      navigator.clipboard.writeText(JSON.stringify(json));
+    }
+  };
+
+  return (
+    <div
+      id={ids.operationBar}
+      className={twMerge(
+        "w-full flex justify-between items-center gap-6 bg-black/5 pl-5 md:pl-[3.25rem] pr-5 p-2",
+        styles?.root?.className
+      )}
+      style={styles?.root?.properties}
+    >
+      <Body
+        id={ids.location}
+        contentEditable="true"
+        suppressContentEditableWarning={true}
+        className={twMerge(
+          "text-xl font-bold outline-none",
+          location === locationPlaceholder && "opacity-60",
+          styles?.input?.className
+        )}
+        style={styles?.input?.properties}
+        onInput={onLocationChange}
+      >
+        {locationPlaceholder}
+      </Body>
+      <div className="flex justify-between items-center gap-5">
+        {showGridSwitch && <GridSwitch className="mr-2" />}
+        {md ? (
+          <>
+            <Button
+              className={twMerge("py-[0.35rem]", coreStyles?.button?.className)}
+              style={coreStyles?.button?.properties}
+            >
+              Preview
+            </Button>
+            <Button
+              className={twMerge("py-[0.35rem]", coreStyles?.button?.className)}
+              style={coreStyles?.button?.properties}
+              onClick={onExportJson}
+            >
+              {exportButtonText}
+            </Button>
+          </>
+        ) : (
+          <>
+            <IconButton
+              icon={<Eye />}
+              label="Preview"
+              className={coreStyles?.button?.className}
+              style={coreStyles?.button?.properties}
+            />
+            <IconButton
+              icon={<Braces />}
+              label={exportButtonText}
+              onClick={onExportJson}
+              className={coreStyles?.button?.className}
+              style={coreStyles?.button?.properties}
+            />
+          </>
+        )}
+        <OperationTriggerIcon
+          id={ids.operationTrigger}
+          size={35}
+          className={twMerge(
+            "cursor-pointer transform hover:rotate-90 transition-all duration-300",
+            styles?.trigger?.className
+          )}
+          style={styles?.trigger?.properties}
+          onClick={onCogClick}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Operations;

src/components/workspace/elements/booth.tsx

@@ -1,8 +1,11 @@
 import { forwardRef } from "react";
+import { IBooth } from "@/types";
 
 export const boothSize = 39;
 
-const Booth: React.FC<any> = forwardRef(({ id, x, y, ...props }, ref: any) => {
+export interface IBoothProps extends IBooth {}
+
+const Booth: React.FC<IBoothProps> = forwardRef(({ id, x, y, ...props }, ref: any) => {
   return <rect ref={ref} id={id} x={x} y={y} width={boothSize} height={boothSize} rx={5} ry={5} {...props} />;
 });
 

src/components/workspace/elements/image.tsx

@@ -1,7 +1,12 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
+import { IImage } from "@/types";
 
-const Image: React.FC<any> = forwardRef(({ x, y, id, href, width, height, ...props }, ref: any) => {
+export interface IImageProps extends IImage {
+  className?: string;
+}
+
+const Image: React.FC<IImageProps> = forwardRef(({ x, y, id, href, width, height, ...props }, ref: any) => {
   return (
     <image
       ref={ref}

src/components/workspace/elements/index.tsx

@@ -19,13 +19,13 @@ import {
 
 export * from "./utils";
 
-export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelected = false, options, ...props }) => {
+export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelected = false, consumer, ...props }) => {
   const ref = useRef<HTMLElement>();
 
-  const Element = elements[type];
+  const Element = elements[type] as any;
 
   useEffect(() => {
-    if (!ref.current || options.mode !== STKMode.Designer) return;
+    if (!ref.current || consumer.mode !== STKMode.Designer) return;
     const node = d3.select(ref.current);
     if (type === ElementType.Seat) {
       handleSeatDrag(node);
@@ -38,7 +38,7 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
     } else {
       handleDrag(node);
     }
-  }, [ref, options.mode]);
+  }, [ref, consumer.mode]);
 
   const onClick = (e: any) => {
     const selectedTool = store.getState().toolbar.selectedTool;
@@ -77,7 +77,7 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
         !props.color && type !== ElementType.Text && "text-white"
       )}
       onClick={onClick}
-      options={options}
+      consumer={consumer}
       {...{ [dataAttributes.elementType]: type }}
     />
   );

src/components/workspace/elements/polyline.tsx

@@ -1,8 +1,13 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
+import { IPolyline } from "@/types";
 
-const Polyline: React.FC<any> = forwardRef(({ id, points, color, stroke, section, ...props }, ref: any) => {
+export interface IPolylineProps extends IPolyline {
+  className?: string;
+}
+
+const Polyline: React.FC<IPolylineProps> = forwardRef(({ id, points, color, stroke, section, ...props }, ref: any) => {
   return (
     <polyline
       ref={ref}