torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/Stepper.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  createContext,
-  useContext,
-} from "react";
+import React, { forwardRef, HTMLAttributes, ReactNode, createContext, useContext } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
@@ -41,25 +35,14 @@ const stepperStyles = cva(["flex gap-0"], {
   },
 });
 
-interface StepperProps
-  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperStyles> {
+interface StepperProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperStyles> {
   theme?: Themes;
   activeStep?: number;
   size?: "S" | "M" | "L";
 }
 
 const Stepper = forwardRef<HTMLDivElement, StepperProps>(
-  (
-    {
-      className,
-      orientation = "horizontal",
-      theme,
-      activeStep = 0,
-      size = "M",
-      ...props
-    },
-    ref,
-  ) => (
+  ({ className, orientation = "horizontal", theme, activeStep = 0, size = "M", ...props }, ref) => (
     <StepperContext.Provider
       value={{
         activeStep,
@@ -89,18 +72,7 @@ interface StepProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const Step = forwardRef<HTMLDivElement, StepProps>(
-  (
-    {
-      className,
-      index = 0,
-      isCompleted,
-      isActive,
-      isError,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ className, index = 0, isCompleted, isActive, isError, children, ...props }, ref) => {
     const { activeStep, orientation } = useStepperContext();
 
     const computedActive = isActive ?? index === activeStep;
@@ -116,16 +88,14 @@ const Step = forwardRef<HTMLDivElement, StepProps>(
         data-orientation={orientation}
         className={cn(
           "flex group/step",
-          orientation === "horizontal"
-            ? "shrink-0 flex-col items-center gap-2"
-            : "flex-row gap-3",
+          orientation === "horizontal" ? "shrink-0 flex-col items-center gap-2" : "flex-row gap-3",
           className,
         )}
         {...props}
       >
         {React.Children.map(children, (child) => {
           if (!React.isValidElement(child)) return child;
-          return React.cloneElement(child as React.ReactElement<any>, {
+          return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
             _active: computedActive,
             _completed: computedCompleted,
             _error: computedError,
@@ -213,13 +183,7 @@ const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps>(
   ) => {
     const { size } = useStepperContext();
 
-    const state = _error
-      ? "error"
-      : _completed
-        ? "completed"
-        : _active
-          ? "active"
-          : "pending";
+    const state = _error ? "error" : _completed ? "completed" : _active ? "active" : "pending";
 
     const renderContent = () => {
       if (_error && errorIcon) return errorIcon;
@@ -232,11 +196,7 @@ const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps>(
     };
 
     return (
-      <div
-        ref={ref}
-        className={cn(stepIndicatorStyles({ state, size }), className)}
-        {...props}
-      >
+      <div ref={ref} className={cn(stepIndicatorStyles({ state, size }), className)} {...props}>
         {renderContent()}
       </div>
     );
@@ -277,10 +237,8 @@ interface StepConnectorProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const StepConnector = forwardRef<HTMLDivElement, StepConnectorProps>(
-  (
-    { className, _completed, _active: _a, _error: _e, _index: _i, ...props },
-    ref,
-  ) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
+  ({ className, _completed, _active: _a, _error: _e, _index: _i, ...props }, ref) => {
     const { orientation } = useStepperContext();
 
     return (
@@ -310,6 +268,7 @@ interface StepLabelProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const StepLabel = forwardRef<HTMLDivElement, StepLabelProps>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
   ({ className, _active, _completed, _error, _index: _i, ...props }, ref) => (
     <div
       ref={ref}
@@ -340,10 +299,8 @@ interface StepDescriptionProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const StepDescription = forwardRef<HTMLDivElement, StepDescriptionProps>(
-  (
-    { className, _active, _completed: _c, _error: _e, _index: _i, ...props },
-    ref,
-  ) => (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
+  ({ className, _active, _completed: _c, _error: _e, _index: _i, ...props }, ref) => (
     <div
       ref={ref}
       className={cn(

package/apps/lib/components/Switch.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client";
 import { cn } from "../utils/cn";
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 import React from "react";
 
 const Switch = React.forwardRef<
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex w-[48px] h-[27px] shrink-0 cursor-pointer items-center rounded-[20px] border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-presentation-switcher-active data-[state=unchecked]:bg-background-presentation-switcher-disabled",
-      className
+      className,
     )}
     {...props}
     ref={ref}
@@ -19,16 +19,14 @@ const Switch = React.forwardRef<
       className={cn(
         "pointer-events-none block w-[24px] h-[24px] rounded-full bg-background-presentation-switcher-knob shadow-lg ring-0 transition-transform",
         "data-[state=checked]:translate-x-[21px] data-[state=unchecked]:translate-x-0",
-        "rtl:data-[state=checked]:-translate-x-[21px] rtl:data-[state=unchecked]:translate-x-0"
+        "rtl:data-[state=checked]:-translate-x-[21px] rtl:data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export { Switch }
-
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
+export { Switch };
 
 /* interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   active: boolean;
@@ -81,4 +79,4 @@ function Switchers({
       )}
     </section>
   );
-} */
+} */

package/apps/lib/components/TabFormItem.tsx

@@ -12,7 +12,6 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   as?: React.ElementType;
 }
 
-
 const TabFormItem: React.FC<Props> = ({
   componentType,
   active,
@@ -23,17 +22,13 @@ const TabFormItem: React.FC<Props> = ({
   as: Tag = "button",
   ...props
 }) => {
-
   const Component = asChild ? Slot : Tag;
 
   return (
     <Component
       data-theme={theme}
       {...props}
-      className={cn(
-        formBarItemStyles({ componentType, active, buttonType }),
-        className
-      )}
+      className={cn(formBarItemStyles({ componentType, active, buttonType }), className)}
     >
       {props.children}
     </Component>
@@ -42,9 +37,6 @@ const TabFormItem: React.FC<Props> = ({
 
 export default TabFormItem;
 
-
-
-
 export const formBarItemStyles = cva(
   [
     "flex",
@@ -156,7 +148,6 @@ export const formBarItemStyles = cva(
           "text-content-presentation-tab-action-selected hover:text-content-presentation-tab-action-selected",
         ],
       },
-
     ],
-  }
-);
+  },
+);

package/apps/lib/components/TabSwitch.tsx

@@ -59,21 +59,9 @@ const optionStyles = cva(
   {
     variants: {
       size: {
-        S: [
-          "h-5 px-2 text-[12px]",
-          "[&_svg]:h-3 [&_svg]:w-3",
-          "[&_i]:text-[12px]",
-        ],
-        M: [
-          "h-6 px-3 text-[14px]",
-          "[&_svg]:h-[14px] [&_svg]:w-[14px]",
-          "[&_i]:text-[14px]",
-        ],
-        L: [
-          "h-8 px-4 text-[16px]",
-          "[&_svg]:h-4 [&_svg]:w-4",
-          "[&_i]:text-[16px]",
-        ],
+        S: ["h-5 px-2 text-[12px]", "[&_svg]:h-3 [&_svg]:w-3", "[&_i]:text-[12px]"],
+        M: ["h-6 px-3 text-[14px]", "[&_svg]:h-[14px] [&_svg]:w-[14px]", "[&_i]:text-[14px]"],
+        L: ["h-8 px-4 text-[16px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
       },
       active: {
         // Active option = a solid raised WHITE pill with dark text, in every
@@ -102,9 +90,7 @@ const optionStyles = cva(
 );
 
 interface Props<T extends string = string>
-  extends
-    Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
-    VariantProps<typeof trackStyles> {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof trackStyles> {
   options: TabSwitchOption<T>[];
   /** Controlled selected value. */
   value: T;
@@ -114,16 +100,7 @@ interface Props<T extends string = string>
 }
 
 function TabSwitchInner<T extends string = string>(
-  {
-    options,
-    value,
-    onValueChange,
-    size,
-    theme,
-    disabled,
-    className,
-    ...props
-  }: Props<T>,
+  { options, value, onValueChange, size, theme, disabled, className, ...props }: Props<T>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
@@ -157,9 +134,7 @@ function TabSwitchInner<T extends string = string>(
               className={cn(optionStyles({ size, active }))}
             >
               {option.icon && (
-                <span className="flex items-center justify-center">
-                  {option.icon}
-                </span>
+                <span className="flex items-center justify-center">{option.icon}</span>
               )}
               {option.label}
             </button>
@@ -171,9 +146,7 @@ function TabSwitchInner<T extends string = string>(
 }
 
 // forwardRef loses the generic, so we cast to preserve `<TabSwitch<T> />` typing.
-export const TabSwitch = forwardRef(TabSwitchInner) as <
-  T extends string = string,
->(
+export const TabSwitch = forwardRef(TabSwitchInner) as <T extends string = string>(
   props: Props<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
 ) => ReturnType<typeof TabSwitchInner>;
 

package/apps/lib/components/Table.tsx

@@ -18,10 +18,7 @@ const Table = React.forwardRef<
   <table
     data-theme={theme}
     ref={ref}
-    className={cn(
-      "overflow-hidden w-auto [border-collapse:separate] border-spacing-0",
-      className,
-    )}
+    className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
     {...props}
   >
     {props.children}
@@ -54,9 +51,7 @@ TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn(className)} {...props} />
-));
+>(({ className, ...props }, ref) => <tfoot ref={ref} className={cn(className)} {...props} />);
 TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
@@ -103,68 +98,61 @@ TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement> &
-  TableHeadVariantsProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    sortType?: "asc" | "desc" | undefined;
-    onSort?: () => void;
-    isDummy?: boolean;
-  }
->(
-  (
-    { className, size = "M", disabled, sortType, onSort, isDummy, ...props },
-    forwardedRef,
-  ) => {
-    const headRef = useRef<any>(null);
-    const { width, handleStartResize } = useResize(headRef);
+    TableHeadVariantsProps &
+    React.ButtonHTMLAttributes<HTMLButtonElement> & {
+      sortType?: "asc" | "desc" | undefined;
+      onSort?: () => void;
+      isDummy?: boolean;
+    }
+>(({ className, size = "M", disabled, sortType, onSort, isDummy, ...props }, forwardedRef) => {
+  const headRef = useRef<HTMLTableCellElement>(null);
+  const { width, handleStartResize } = useResize(headRef as React.RefObject<HTMLElement>);
 
-    // Combine refs using useEffect
-    React.useEffect(() => {
-      if (!forwardedRef) return;
-      if (typeof forwardedRef === "function") forwardedRef(headRef.current);
-      else forwardedRef.current = headRef.current;
-    }, [forwardedRef]);
+  // Combine refs using useEffect
+  React.useEffect(() => {
+    if (!forwardedRef) return;
+    if (typeof forwardedRef === "function") forwardedRef(headRef.current);
+    else forwardedRef.current = headRef.current;
+  }, [forwardedRef]);
 
-    return (
-      <th
-        ref={headRef}
+  return (
+    <th
+      ref={headRef}
+      className={cn(
+        "relative py-[6px] px-[4px] border-b-[2px]  border-border-presentation-table-header",
+      )}
+    >
+      <div
+        {...props}
         className={cn(
-          "relative py-[6px] px-[4px] border-b-[2px]  border-border-presentation-table-header",
+          tableHeadVariants({ size, disabled, isDummy }),
+          { "min-w-[100px]": !isDummy },
+          className,
         )}
       >
         <div
-          {...props}
-          className={cn(
-            tableHeadVariants({ size, disabled, isDummy }),
-            { "min-w-[100px]": !isDummy },
-            className,
-          )}
+          style={{ width: `${width}px` }}
+          className={cn("flex items-center justify-between flex-1", {
+            "justify-center": isDummy,
+          })}
         >
-          <div
-            style={{ width: `${width}px` }}
-            className={cn("flex items-center justify-between flex-1", {
-              "justify-center": isDummy,
-            })}
-          >
-            {props.children}
-            {isDummy || !onSort ? null : (
-              <SortButton onSort={onSort} sortType={sortType} />
-            )}
-          </div>
+          {props.children}
+          {isDummy || !onSort ? null : <SortButton onSort={onSort} sortType={sortType} />}
         </div>
-        <button
-          disabled={isDummy}
-          className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary"
-        >
-          <ResizeIcon
-            className={cn({ "!opacity-0 cursor-default": isDummy })}
-            onMouseDown={handleStartResize}
-            onTouchStart={handleStartResize}
-          />
-        </button>
-      </th>
-    );
-  },
-);
+      </div>
+      <button
+        disabled={isDummy}
+        className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary"
+      >
+        <ResizeIcon
+          className={cn({ "!opacity-0 cursor-default": isDummy })}
+          onMouseDown={handleStartResize}
+          onTouchStart={handleStartResize}
+        />
+      </button>
+    </th>
+  );
+});
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
@@ -209,6 +197,7 @@ const TableCheckbox = React.forwardRef<
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     id: string;
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- id destructured to exclude it from the props spread onto Checkbox
 >(({ className, id, ...props }, ref) => {
   return (
     <div className={cn(["flex items-center justify-center"], className)}>
@@ -222,11 +211,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 
@@ -308,7 +293,13 @@ export {
   TableFooterButton,
 };
 
-const ResizeIcon = (props: any) => {
+interface ResizeIconProps {
+  className?: string;
+  onMouseDown?: React.MouseEventHandler<SVGElement>;
+  onTouchStart?: React.TouchEventHandler<SVGElement>;
+}
+
+const ResizeIcon = (props: ResizeIconProps) => {
   return (
     <svg
       {...props}
@@ -343,10 +334,7 @@ const SortButton = ({
   sortType?: "asc" | "desc" | undefined;
 }) => {
   return (
-    <button
-      className={cn("cursor-pointer text-[16px] z-10")}
-      onPointerDown={onSort}
-    >
+    <button className={cn("cursor-pointer text-[16px] z-10")} onPointerDown={onSort}>
       {sortType === "asc" ? (
         <i className="ri-arrow-up-line text-border-presentation-state-focus" />
       ) : sortType === "desc" ? (
@@ -389,10 +377,7 @@ const tableHeadVariants = cva(
         ],
       },
       isDummy: {
-        true: [
-          "hover:bg-transparent",
-          "hover:text-content-presentation-global-primary",
-        ],
+        true: ["hover:bg-transparent", "hover:text-content-presentation-global-primary"],
       },
       defaultVariants: {
         size: "M",

package/apps/lib/components/{ChartBlockTool.ts → TextEditor/ChartBlockTool.ts}

@@ -133,16 +133,12 @@ export default class ChartBlockTool {
       }
 
       // Click on the block → expand editing panel
-      this.wrapper.addEventListener("click", (e) => {
+      this.wrapper.addEventListener("click", () => {
         if (
           this.editorPanel &&
-          this.editorPanel.classList.contains(
-            "cdx-chart-block__editor-panel--hidden",
-          )
+          this.editorPanel.classList.contains("cdx-chart-block__editor-panel--hidden")
         ) {
-          this.editorPanel.classList.remove(
-            "cdx-chart-block__editor-panel--hidden",
-          );
+          this.editorPanel.classList.remove("cdx-chart-block__editor-panel--hidden");
           // Re-create chart since canvas may have been resized
           this.createChart();
         }
@@ -150,14 +146,8 @@ export default class ChartBlockTool {
 
       // Click outside → collapse
       this.boundOnClickOutside = (e: MouseEvent) => {
-        if (
-          this.wrapper &&
-          this.editorPanel &&
-          !this.wrapper.contains(e.target as Node)
-        ) {
-          this.editorPanel.classList.add(
-            "cdx-chart-block__editor-panel--hidden",
-          );
+        if (this.wrapper && this.editorPanel && !this.wrapper.contains(e.target as Node)) {
+          this.editorPanel.classList.add("cdx-chart-block__editor-panel--hidden");
           // Re-create chart to fit new size
           this.createChart();
         }
@@ -407,8 +397,7 @@ export default class ChartBlockTool {
         dataInput.className = "cdx-chart-block__data-input";
         dataInput.value = String(dataset.data[colIdx] ?? 0);
         dataInput.addEventListener("input", () => {
-          this.data.datasets[rowIdx].data[colIdx] =
-            parseFloat(dataInput.value) || 0;
+          this.data.datasets[rowIdx].data[colIdx] = parseFloat(dataInput.value) || 0;
           this.scheduleChartUpdate();
         });
         td.appendChild(dataInput);
@@ -425,14 +414,8 @@ export default class ChartBlockTool {
       colorPicker.value = this.rgbaToHex(dataset.backgroundColor);
       colorPicker.title = "Dataset color";
       colorPicker.addEventListener("input", () => {
-        this.data.datasets[rowIdx].backgroundColor = this.hexToRgba(
-          colorPicker.value,
-          0.5,
-        );
-        this.data.datasets[rowIdx].borderColor = this.hexToRgba(
-          colorPicker.value,
-          1,
-        );
+        this.data.datasets[rowIdx].backgroundColor = this.hexToRgba(colorPicker.value, 0.5);
+        this.data.datasets[rowIdx].borderColor = this.hexToRgba(colorPicker.value, 1);
         this.scheduleChartUpdate();
       });
       controlsCell.appendChild(colorPicker);
@@ -470,9 +453,7 @@ export default class ChartBlockTool {
     const gridColor = dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
     const legendColor = dark ? "#ccc" : "#666";
 
-    const isPieType = ["pie", "doughnut", "polarArea"].includes(
-      this.data.chartType,
-    );
+    const isPieType = ["pie", "doughnut", "polarArea"].includes(this.data.chartType);
 
     // For pie/doughnut/polar, use per-segment colors from all datasets flattened
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -482,12 +463,8 @@ export default class ChartBlockTool {
           label: ds.label,
           data: [...ds.data],
           borderWidth: 2,
-          backgroundColor: ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg,
-          ),
-          borderColor: ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border,
-          ),
+          backgroundColor: ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg),
+          borderColor: ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border),
         };
       }
       return {
@@ -557,9 +534,7 @@ export default class ChartBlockTool {
       this.updateTimeout = null;
       if (!this.chart) return;
 
-      const isPieType = ["pie", "doughnut", "polarArea"].includes(
-        this.data.chartType,
-      );
+      const isPieType = ["pie", "doughnut", "polarArea"].includes(this.data.chartType);
 
       this.chart.data.labels = [...this.data.labels];
       this.chart.data.datasets = this.data.datasets.map((ds) => {
@@ -571,12 +546,8 @@ export default class ChartBlockTool {
         };
 
         if (isPieType) {
-          base.backgroundColor = ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg,
-          );
-          base.borderColor = ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border,
-          );
+          base.backgroundColor = ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg);
+          base.borderColor = ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border);
         } else {
           base.backgroundColor = ds.backgroundColor;
           base.borderColor = ds.borderColor;
@@ -637,9 +608,7 @@ export default class ChartBlockTool {
 
   private updateTypeSelector(): void {
     if (!this.wrapper) return;
-    const buttons = this.wrapper.querySelectorAll<HTMLButtonElement>(
-      ".cdx-chart-block__type-btn",
-    );
+    const buttons = this.wrapper.querySelectorAll<HTMLButtonElement>(".cdx-chart-block__type-btn");
     buttons.forEach((btn) => {
       btn.classList.toggle(
         "cdx-chart-block__type-btn--active",
@@ -651,17 +620,13 @@ export default class ChartBlockTool {
   private normalizeData(data: Partial<ChartBlockData>): ChartBlockData {
     const chartType =
       data.chartType &&
-      ["bar", "line", "pie", "doughnut", "radar", "polarArea"].includes(
-        data.chartType,
-      )
+      ["bar", "line", "pie", "doughnut", "radar", "polarArea"].includes(data.chartType)
         ? data.chartType
         : DEFAULT_DATA.chartType;
 
     const title = data.title ?? DEFAULT_DATA.title;
     const labels =
-      Array.isArray(data.labels) && data.labels.length > 0
-        ? data.labels
-        : [...DEFAULT_DATA.labels];
+      Array.isArray(data.labels) && data.labels.length > 0 ? data.labels : [...DEFAULT_DATA.labels];
 
     const datasets =
       Array.isArray(data.datasets) && data.datasets.length > 0