feat: Refactor icon components and update button elements for improved accessibility and consistency

2025-04-24 14:05:55 +05:30 · 2025-04-24 14:05:55 +05:30 · d7f1c5224d
parent e43bfb6e98
commit d7f1c5224d
18 changed files with 125 additions and 172 deletions
--- a/app/src/components/icons/ContextMenuIcons.tsx
+++ b/app/src/components/icons/ContextMenuIcons.tsx
@ -42,6 +42,7 @@ export function FlipXAxisIcon() {
 }

 export function FlipYAxisIcon() {
+  return (
    <svg
      width="12"
      height="12"
@ -79,7 +80,8 @@ export function FlipYAxisIcon() {
        strokeWidth="0.75"
        strokeLinecap="round"
      />
-  </svg>;
+    </svg>
+  );
 }
 export function FlipZAxisIcon() {
  return (
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@ -168,20 +168,6 @@ export function AddIcon() {
  );
 }

-export function RmoveIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
-    </svg>
-  );
-}
-
 export function CloseIcon() {
  return (
    <svg
--- a/app/src/components/layout/Dashboard/MarketPlaceBanner.tsx
+++ b/app/src/components/layout/Dashboard/MarketPlaceBanner.tsx
@ -23,16 +23,16 @@ const MarketPlaceBanner = () => {
          <path
            d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
            stroke="white"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
          />
          <path
            d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
            stroke="white"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
          />
        </svg>
      </div>
--- a/app/src/components/layout/Dashboard/SidePannel.tsx
+++ b/app/src/components/layout/Dashboard/SidePannel.tsx
@ -11,7 +11,7 @@ import {
 import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";

 const SidePannel: React.FC = () => {
-  const userName = localStorage.getItem("userName") || "Anonymous";
+  const userName = localStorage.getItem("userName") ?? "Anonymous";
  return (
    <div className="side-pannel-container">
      <div className="side-pannel-header">
--- a/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
+++ b/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
@ -17,12 +17,12 @@ const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
      <div className="confirmation-modal">
        <p className="message">{message}</p>
        <div className="buttton-wrapper">
-          <div className="confirmation-button" onClick={onConfirm}>
+          <button className="confirmation-button" onClick={onConfirm}>
            OK
-          </div>
-          <div className="confirmation-button" onClick={onCancel}>
+          </button>
+          <button className="confirmation-button" onClick={onCancel}>
            Cancel
-          </div>
+          </button>
        </div>
      </div>
    </div>
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useMemo } from "react";
 import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../../store/useThemeStore";

 // Define Props Interface
 interface ChartComponentProps {
@ -29,7 +28,6 @@ const ChartComponent = ({
  data: propsData,
 }: ChartComponentProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
-  // const { themeColor } = useThemeStore();

  // Memoize Theme Colors to Prevent Unnecessary Recalculations
  // const buttonActionColor = useMemo(
@ -66,7 +64,7 @@ const ChartComponent = ({
  // Memoize Chart Font Style
  const chartFontStyle = useMemo(
    () => ({
-      family: fontFamily || "Arial",
+      family: fontFamily ?? "Arial",
      size: fontSizeValue,
      weight: fontWeightValue,
      color: "#2B3344",
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx
@ -1,4 +1,3 @@
-import { useState } from "react";
 import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
 import Widgets2D from "./Widgets2D";
 import Widgets3D from "./Widgets3D";
@ -6,7 +5,6 @@ import WidgetsFloating from "./WidgetsFloating";
 import { useWidgetSubOption } from "../../../../../store/store";

 const Widgets = () => {
-  const [activeOption, setActiveOption] = useState("2D");
  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();

  const handleToggleClick = (option: string) => {
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
@ -8,42 +8,11 @@ import {
 import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";

 import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
-import ProductivityDashboard from "../../../../../modules//visualization/widgets/floating/cards/ProductivityDashboard";
 import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";

-interface Widget {
-  id: string;
-  name: string;
-}
-
 const WidgetsFloating = () => {
-  // const [widgets, setWidgets] = useState<Widget[]>([
-  //   { id: "1", name: "Working State Widget" },
-  //   { id: "2", name: "Floating Widget 2" },
-  //   { id: "3", name: "Floating Widget 3" },
-  //   { id: "4", name: "Floating Widget 4" },
-  // ]);
-
-  // Function to handle drag start
-  const handleDragStart = (
-    e: React.DragEvent<HTMLDivElement>,
-    widget: Widget
-  ) => {
-    e.dataTransfer.setData("application/json", JSON.stringify(widget));
-  };
-
  return (
    <div className="floatingWidgets-wrapper widgets-wrapper">
-      {/* {widgets.map((widget) => (
-        <div
-          key={widget.id}
-          className="floating"
-          draggable
-          onDragStart={(e) => handleDragStart(e, widget)}
-        >
-          {widget.name}
-        </div>
-      ))} */}
      {/* Floating 1 */}
      <SimpleCard
        header={"Today’s Earnings"}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@ -50,7 +50,6 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
  const actionsContainerRef = useRef<HTMLDivElement>(null);

  const [activeOption, setActiveOption] = useState("default");
-  const [dummyactiveOption, setTypeOption] = useState("default");

  const getAvailableActions = () => {
    if (assetType === "conveyor") {
@ -136,9 +135,9 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
        <div className="actions">
          <div className="header">
            <div className="header-value">Actions</div>
-            <div className="add-button" onClick={() => {}}>
+            <button className="add-button" onClick={() => {}}>
              <AddIcon /> Add
-            </div>
+            </button>
          </div>
          <div
            className="lists-main-container"
@ -195,7 +194,8 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
          {activeOption === "swap" && <SwapAction />} {/* done */}
          {activeOption === "despawn" && <DespawnAction />} {/* done */}
          {activeOption === "travel" && <TravelAction />} {/* done */}
-          {activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
+          {activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
+          {/* done */}
          {activeOption === "process" && <ProcessAction />} {/* done */}
          {activeOption === "store" && <StorageAction />} {/* done */}
        </div>
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
@ -3,7 +3,6 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";

 const DespawnAction: React.FC = () => {
  return (
-    <>
    <InputWithDropDown
      label="Delay"
      value=""
@ -15,7 +14,6 @@ const DespawnAction: React.FC = () => {
      onClick={() => {}}
      onChange={(value) => console.log(value)}
    />
-    </>
  );
 };

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
@ -2,11 +2,7 @@ import React from "react";
 import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";

 const SwapAction: React.FC = () => {
-  return (
-    <>
-      <PreviewSelectionWithUpload />
-    </>
-  );
+  return <PreviewSelectionWithUpload />;
 };

 export default SwapAction;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@ -35,27 +35,27 @@ const Trigger: React.FC = () => {
    <div className="trigger-wrapper">
      <div className="header">
        <div className="title">Trigger</div>
-        <div
+        <button
          className="add-button"
          onClick={addTrigger}
          style={{ cursor: "pointer" }}
        >
          <AddIcon /> Add
-        </div>
+        </button>
      </div>
      <div className="trigger-list">
        {/* Map over triggers and render them */}
        {triggers.map((trigger, index) => (
-          <div key={index} className="trigger-item">
+          <div key={index.toFixed()} className="trigger-item">
            <div className="trigger-name">
              {trigger}
-              <div
+              <button
                className="remove-button"
                onClick={() => removeTrigger(index)}
                style={{ cursor: "pointer" }}
              >
                <RemoveIcon />
-              </div>
+              </button>
            </div>
            <LabledDropdown
              defaultOption={activeOption}
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@ -10,7 +10,7 @@ import {
  ArrowIcon,
  EyeIcon,
  LockIcon,
-  RmoveIcon,
+  RemoveIcon,
 } from "../../icons/ExportCommonIcons";
 import { useThree } from "@react-three/fiber";
 import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
@ -184,7 +184,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                    </div>
                    {remove && (
                      <div className="remove option">
-                        <RmoveIcon />
+                        <RemoveIcon />
                      </div>
                    )}
                    {item.assets && item.assets.length > 0 && (
@ -221,7 +221,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                            </div>
                            {remove && (
                              <div className="remove option">
-                                <RmoveIcon />
+                                <RemoveIcon />
                              </div>
                            )}
                          </div>
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@ -9,17 +9,25 @@ import Simulation from "../simulation/simulation";
 import Collaboration from "../collaboration/collaboration";

 export default function Scene() {
-    const map = useMemo(() => [
+  const map = useMemo(
+    () => [
      { name: "forward", keys: ["ArrowUp", "w", "W"] },
      { name: "backward", keys: ["ArrowDown", "s", "S"] },
      { name: "left", keys: ["ArrowLeft", "a", "A"] },
-        { name: "right", keys: ["ArrowRight", "d", "D"] },],
-        []);
+      { name: "right", keys: ["ArrowRight", "d", "D"] },
+    ],
+    []
+  );

  return (
      <KeyboardControls map={map}>
-            <Canvas eventPrefix="client" gl={{ powerPreference: "high-performance", antialias: true }} onContextMenu={(e) => { e.preventDefault(); }}>
-
+        <Canvas
+          eventPrefix="client"
+          gl={{ powerPreference: "high-performance", antialias: true }}
+          onContextMenu={(e) => {
+            e.preventDefault();
+          }}
+        >
          <Setup />

          <Collaboration />
@ -29,7 +37,6 @@ export default function Scene() {
          <Simulation />

          <Visualization />
-
        </Canvas>
      </KeyboardControls>
  );
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@ -12,15 +12,12 @@ import {
  useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";
 import {
-  useAsset3dWidget,
  useSocketStore,
  useWidgetSubOption,
-  useZones,
 } from "../../store/store";
 import { getZone2dData } from "../../services/visulization/zone/getZoneData";
 import { generateUniqueId } from "../../functions/generateUniqueId";
 import { determinePosition } from "./functions/determinePosition";
-import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
 import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
 import RenderOverlay from "../../components/templates/Overlay";
 import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
@ -68,20 +65,15 @@ const RealTimeVisulization: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const { isPlaying } = usePlayButtonStore();
  const { activeModule } = useModuleStore();
-  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

-  const { rightSelect, setRightSelect } = useRightSelected();
-  const { editWidgetOptions, setEditWidgetOptions } =
-    useEditWidgetOptionsStore();
+  const { setRightSelect } = useRightSelected();
+  const { editWidgetOptions } = useEditWidgetOptionsStore();
  const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
  const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
-
-  // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
-  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
-  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+  const { setFloatingWidget } = useFloatingWidget();
+  const { widgetSubOption } = useWidgetSubOption();
  const { visualizationSocket } = useSocketStore();
  const { setSelectedChartId } = useWidgetStore();

@ -99,11 +91,10 @@ const RealTimeVisulization: React.FC = () => {

  useEffect(() => {
    async function GetZoneData() {
-      const email = localStorage.getItem("email") || "";
+      const email = localStorage.getItem("email") ?? "";
      const organization = email?.split("@")[1]?.split(".")[0];
      try {
        const response = await getZone2dData(organization);
-        // console.log('response: ', response);

        if (!Array.isArray(response)) {
          return;
@ -125,7 +116,9 @@ const RealTimeVisulization: React.FC = () => {
          {}
        );
        setZonesData(formattedData);
-      } catch (error) {}
+      } catch (error) {
+        console.log(error);
+      }
    }

    GetZoneData();
@ -151,12 +144,10 @@ const RealTimeVisulization: React.FC = () => {
    });
  }, [selectedZone]);

-  // useEffect(() => {}, [floatingWidgets]);
-
  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    try {
-      const email = localStorage.getItem("email") || "";
+      const email = localStorage.getItem("email") ?? "";
      const organization = email?.split("@")[1]?.split(".")[0];

      const data = event.dataTransfer.getData("text/plain");
@ -172,8 +163,8 @@ const RealTimeVisulization: React.FC = () => {
      const relativeY = event.clientY - rect.top;

      // Widget dimensions
-      const widgetWidth = droppedData.width || 125;
-      const widgetHeight = droppedData.height || 100;
+      const widgetWidth = droppedData.width ?? 125;
+      const widgetHeight = droppedData.height ?? 100;

      // Center the widget at cursor
      const centerOffsetX = widgetWidth / 2;
@ -275,7 +266,7 @@ const RealTimeVisulization: React.FC = () => {
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
-  }, [setRightClickSelected]);
+  }, [setRightClickSelected, setRightSelect]);

  const [canvasDimensions, setCanvasDimensions] = useState({
    width: 0,
@ -340,6 +331,7 @@ const RealTimeVisulization: React.FC = () => {
              borderRadius:
                isPlaying || activeModule !== "visualization" ? "" : "6px",
            }}
+            role="application"
            onDrop={(event) => handleDrop(event)}
            onDragOver={(event) => event.preventDefault()}
          >
--- a/app/src/modules/visualization/visualization.tsx
+++ b/app/src/modules/visualization/visualization.tsx
@ -3,9 +3,8 @@ import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
 import ZoneCentreTarget from './zone/zoneCameraTarget'
 import ZoneAssets from './zone/zoneAssets'
 import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
-import DrieHtmlTemp from './mqttTemp/drieHtmlTemp'

-const Visualization = () => {
+const Visualization:React.FC = () => {
    return (
        <>

--- a/app/src/styles/base/reset.scss
+++ b/app/src/styles/base/reset.scss
@ -12,3 +12,10 @@ input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button
 input[type="password"]::-webkit-inner-spin-button {  /* Just in case */
  display: none;
 }
+
+button{
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@ -675,7 +675,8 @@
        color: var(--primary-color);
        border-radius: #{$border-radius-small};
        cursor: pointer;
-
+        outline: none;
+        border: none;
        path {
          stroke: var(--primary-color);
        }