Feat: added more style overrides

Author: Akalanka47000

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 renamed to 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 renamed to 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 renamed to 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/core/toast/toaster.jsx renamed to src/components/core/toast/toaster.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/footer.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}