@react-fabric/data 1.0.0-beta.9 → 1.0.2

package/src/hooks/usePagination.tsx

@@ -21,13 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  useTransition,
-} from "react";
+import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
 
 export interface PaginationOptions {
   /**
@@ -52,25 +46,33 @@ const TOTAL_PILLS = 12;
 const TOTAL_SIBLINGS = 2;
 const TOTAL_MID_SIBLINGS = 3;
 
-const makeRange = (start: number, end: number) => {
+function makeRange(start: number, end: number) {
   const length = end - start;
   return Array.from({ length }, (_: AnyObject, idx: number) => idx + start);
-};
+}
 
-export const usePagination = ({
-  totalRecords,
-  currentPage = 0,
-  perPage = 25,
-  onChange,
-}: PaginationOptions) => {
+/**
+ * Custom hook to manage pagination state and logic.
+ * It calculates the total number of pages, generates page ranges,
+ * and provides a way to change the current page.
+ * It also handles the transition of page changes to optimize performance.
+ *
+ * @example
+ * ```jsx
+ * const { page, totalPages, headLabel, ranges, onPageChange } = usePagination({
+ *   totalRecords: 100,
+ *   currentPage: 0,
+ *   perPage: 10,
+ *   onChange: (newPage) => console.log("Page changed to:", newPage),
+ * });
+ * ```
+ */
+export function usePagination({ totalRecords, currentPage = 0, perPage = 25, onChange }: PaginationOptions) {
   const [page, setPage] = useState(0);
   const [, startTransition] = useTransition();
 
   /** ***************** calculate total pages *******************/
-  const totalPages = useMemo(
-    () => Math.max(1, Math.ceil(totalRecords / perPage)),
-    [totalRecords, perPage],
-  );
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(totalRecords / perPage)), [totalRecords, perPage]);
 
   /** ***************** calculate ranges *******************/
   const ranges = useMemo(() => {
@@ -79,24 +81,15 @@ export const usePagination = ({
     }
 
     const leftSiblingIndex = Math.max(page - TOTAL_MID_SIBLINGS, 0);
-    const rightSiblingIndex = Math.min(
-      page + TOTAL_MID_SIBLINGS,
-      totalPages - 1,
-    );
+    const rightSiblingIndex = Math.min(page + TOTAL_MID_SIBLINGS, totalPages - 1);
     const shouldShowLeftDots = leftSiblingIndex >= TOTAL_SIBLINGS;
     const shouldShowRightDots = rightSiblingIndex < totalPages - TOTAL_SIBLINGS;
 
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      return [
-        makeRange(0, TOTAL_SIBLINGS * 3),
-        makeRange(totalPages - TOTAL_SIBLINGS, totalPages),
-      ];
+      return [makeRange(0, TOTAL_SIBLINGS * 3), makeRange(totalPages - TOTAL_SIBLINGS, totalPages)];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
-      return [
-        makeRange(0, TOTAL_SIBLINGS),
-        makeRange(totalPages - TOTAL_SIBLINGS * 3, totalPages),
-      ];
+      return [makeRange(0, TOTAL_SIBLINGS), makeRange(totalPages - TOTAL_SIBLINGS * 3, totalPages)];
     }
     if (shouldShowLeftDots && shouldShowRightDots) {
       return [
@@ -111,9 +104,13 @@ export const usePagination = ({
 
   /** ***************** set page *******************/
   useEffect(() => {
-    setPage(Math.min(currentPage, totalPages - 1));
-    onChange?.(Math.min(currentPage, totalPages - 1));
-  }, [currentPage, totalPages]);
+    if (totalRecords > -1) {
+      const actual = Math.min(currentPage, totalPages - 1);
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
+      setPage(actual);
+      if (actual !== currentPage) onChange?.(actual);
+    }
+  }, [currentPage, totalRecords, totalPages, onChange]);
 
   const headLabel = useMemo(
     () => (
@@ -126,10 +123,13 @@ export const usePagination = ({
     [page, perPage, totalRecords],
   );
 
-  const onPageChange = useCallback((page: number) => {
-    setPage(page);
-    startTransition(() => onChange?.(page));
-  }, []);
+  const onPageChange = useCallback(
+    (page: number) => {
+      setPage(page);
+      startTransition(() => onChange?.(page));
+    },
+    [onChange],
+  );
 
   return { page, totalPages, headLabel, ranges, onPageChange };
-};
+}

package/src/hooks/useSelectableList.ts

@@ -27,7 +27,7 @@ export interface SelectableProps {
   /**
    * list items
    */
-  items: Array<{ label: string } & KeyValue>;
+  items: Array<{ label: string; id: string } & KeyValue>;
   /**
    * selected item ids
    */
@@ -46,49 +46,61 @@ export interface SelectableProps {
   onClick?: (id: string, isNegative: boolean) => void;
 }
 
-export const useSelectableList = ({
-  items,
-  selected,
-  nonselected,
-  onChange,
-  onClick,
-}: SelectableProps) => {
+/**
+ * Custom hook to manage selection of items in a list.
+ * It allows toggling selection state of items, handling both selected and non-selected states.
+ * The hook maintains a selection state and provides a function to toggle the selection of items.
+ * It also supports callbacks for when the selection changes or when an item is clicked.
+ *
+ * @example
+ * ```jsx
+ * const { selection, toggleSelection } = useSelectableList({
+ *   items: [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }],
+ *   selected: ['1'],
+ *   nonselected: ['2'],
+ *   onChange: (selectedIds, nonSelectedIds) => {
+ *     console.log('Selected:', selectedIds);
+ *     console.log('Non-selected:', nonSelectedIds);
+ *   },
+ *   onClick: (id, isNegative) => {
+ *     console.log(`Item ${id} clicked, isNegative: ${isNegative}`);
+ *   },
+ * });
+ * ```
+ */
+export function useSelectableList({ items, selected, nonselected, onChange, onClick }: SelectableProps) {
   const selectionRef = useRef<KeyValue<number>>({});
-  const [selection, setSelection] = useState<KeyValue<number>>({});
+  const [selection, setSelection] = useState<KeyValue<number>>(() => ({}));
   const [, startTransition] = useTransition();
   useEffect(() => {
     selectionRef.current = items.reduce(
       (ret, { id }) => ({
         ...ret,
-        [id]: selected?.includes?.(id)
-          ? 1
-          : nonselected?.includes?.(id)
-            ? -1
-            : 0,
+        [id]: selected?.includes?.(id) ? 1 : nonselected?.includes?.(id) ? -1 : 0,
       }),
       {},
     );
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setSelection({ ...selectionRef.current });
   }, [items, selected, nonselected]);
 
-  const toggleSelection = useCallback((id: string, isNegative = false) => {
-    const check = isNegative ? -1 : 1;
-    if (selectionRef.current[id] !== check) selectionRef.current[id] = check;
-    else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
-    const change: string[][] = [[], []];
-    Object.entries(selectionRef.current).forEach(([id, select]) =>
-      select === 1
-        ? change[0].push(id)
-        : select === -1
-          ? change[1].push(id)
-          : undefined,
-    );
-    setSelection({ ...selectionRef.current });
-    startTransition(() => {
-      onClick?.(id, isNegative);
-      onChange?.(change[0], change[1]);
-    });
-  }, []);
+  const toggleSelection = useCallback(
+    (id: string, isNegative = false) => {
+      const check = isNegative ? -1 : 1;
+      if (selectionRef.current[id] !== check) selectionRef.current[id] = check;
+      else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
+      const change: string[][] = [[], []];
+      Object.entries(selectionRef.current).forEach(([id, select]) =>
+        select === 1 ? change[0].push(id) : select === -1 ? change[1].push(id) : undefined,
+      );
+      setSelection({ ...selectionRef.current });
+      startTransition(() => {
+        onClick?.(id, isNegative);
+        onChange?.(change[0], change[1]);
+      });
+    },
+    [onChange, onClick],
+  );
 
   return { selection, toggleSelection };
-};
+}

package/src/i18n/{ar.json → ar/data.json}

@@ -32,5 +32,10 @@
     "uncheckAll": "الغاءالكل",
     "addFilter": "أضف عامل تصفية",
     "addFilterNot": "إضافة لا تصفية"
+  },
+  "data": {
+    "tree": {
+      "noItems": "لا توجد عناصر شجرة متوفرة"
+    }
   }
 }

package/src/i18n/{en.json → en/data.json}

@@ -32,5 +32,10 @@
     "uncheckAll": "Uncheck All",
     "addFilter": "Add Filter",
     "addFilterNot": "Add not Filter"
+  },
+  "data": {
+    "tree": {
+      "noItems": "No tree items available"
+    }
   }
 }

package/src/i18n/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/data.json";
+import en from "./en/data.json";
 
 addTranslationBundle("data", { en, ar });

package/src/index.ts

@@ -1,32 +1,38 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
+export const DATA_PACKAGE = "@react-fabric/data";
+export const DATA_VERSION = "1.0.0";
+
 import "./i18n";
 
 export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
+export { HtmlTable } from "./table/HtmlTable";
 export { Table } from "./table/Table";
 export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";

package/src/json/JsonViewer.tsx

@@ -21,27 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  ActionLabel,
-  Button,
-  Copy,
-  CoreIcons,
-  EmptyContent,
-  Icon,
-  Meter,
-  Text,
-} from "@react-fabric/core";
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+
+import { Button, Copy, EmptyContent, Icon, Meter, Text } from "@react-fabric/core";
 import { type CssProp } from "@react-fabric/core/dist/types/types";
-import {
-  Format,
-  isArray,
-  isBoolean,
-  isEmpty,
-  isNil,
-  isObject,
-  isTrue,
-} from "@react-fabric/utilities";
-import classNames from "classnames";
+import { cn, Format, isArray, isBoolean, isEmpty, isNil, isObject, isTrue } from "@react-fabric/utilities";
 import { Fragment, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -99,21 +87,18 @@ export interface JsonViewProps<T> extends CssProp {
   /**
    * render function for custom value display
    */
-  formatter?: (
-    path?: string,
-    value?: AnyObject,
-  ) => string | JSX.Element | undefined;
+  formatter?: (path?: string, value?: AnyObject) => string | React.ReactElement | undefined;
 }
 
-const reduceObject = (json: AnyObject, keys: string[] = [], prefix = "") => {
-  const ret: AnyObject[] = [];
+function reduceObject(json: KeyValue, keys: string[] = [], prefix = "") {
+  const ret: KeyValue[] = [];
   Object.entries(json).forEach(([key, value]) => {
     if (isArray(value) && isObject(value[0])) {
       ret.push(...reduceObject(value, [...keys, key], key));
     } else {
       const obj: KeyValue = {
         field: prefix ? `${prefix}.${key}` : key,
-        value,
+        value: value as never,
         path: [...keys, key].join("."),
       };
 
@@ -126,9 +111,9 @@ const reduceObject = (json: AnyObject, keys: string[] = [], prefix = "") => {
   });
 
   return ret.flat(99);
-};
+}
 
-const JsonEntry = ({
+function JsonEntry({
   value,
   path,
   field,
@@ -143,14 +128,14 @@ const JsonEntry = ({
   inline,
   labelWidth = "30%",
   level = 0,
-}: KeyValue) => {
+}: KeyValue) {
   const { t } = useTranslation("data");
 
   const [expanded, setExpanded] = useState(true);
 
   const canExpand = useMemo(() => !!children, [children]);
 
-  const actualValue = useMemo(() => value?._label_ ?? value ?? "", [value]);
+  const actualValue = useMemo<string>(() => value?._label_ ?? value ?? "", [value]);
 
   const display = useMemo(() => {
     if (children) return null;
@@ -169,85 +154,67 @@ const JsonEntry = ({
     if (propertyScheme?.date?.includes(path)) {
       // return <DateDisplay date={value} />;
     }
-    if (propertyScheme?.time?.includes(path))
-      ret = Format.date(actualValue, "pp");
-    if (propertyScheme?.number?.phone(path)) ret = Format.phone(actualValue);
+    if (propertyScheme?.time?.includes(path)) ret = Format.date(actualValue, "pp");
+    if (propertyScheme?.number?.phone(path)) ret = Format.phone(actualValue) ?? "";
     if (propertyScheme?.bytes?.includes(path)) ret = Format.bytes(actualValue);
-    if (propertyScheme?.percent?.includes(path))
-      ret = Format.percent(actualValue);
-    if (propertyScheme?.number?.includes(path))
-      ret = Format.number(actualValue);
-    if (propertyScheme?.boolean?.includes(path) || isBoolean(actualValue))
-      ret = actualValue ? t("json.true") : t("json.false");
+    if (propertyScheme?.percent?.includes(path)) ret = Format.percent(actualValue);
+    if (propertyScheme?.number?.includes(path)) ret = Format.number(actualValue);
+    if (propertyScheme?.boolean?.includes(path) || isBoolean(actualValue)) ret = actualValue ? t("json.true") : t("json.false");
     if (ret?.length > 128) {
-      ret = <Text clamp={3}>{ret}</Text>;
+      ret = (<Text clamp={3}>{ret}</Text>) as never;
+    } else {
+      ret = (<div className="break-words">{ret}</div>) as never;
     }
 
     return (
       <Fragment>
         {ret}
-        {isObject(value) && value._score_ > 0 && (
-          <Meter className="text-xs" value={value._score_} />
-        )}
+        {isObject(value) && value._score_ > 0 && <Meter className="text-xs" value={value._score_} />}
       </Fragment>
     );
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [value, path, formatter, propertyScheme, actualValue]);
 
-  const pathWithoutOrdinal = useMemo(
-    () => path.replace(/\.\d*\./, "."),
-    [path],
-  );
+  const pathWithoutOrdinal = useMemo(() => path.replace(/\.\d*\./, "."), [path]);
 
   const canCopy = useMemo(
-    () =>
-      !isEmpty(value) &&
-      (isTrue(copy) ||
-        copy?.includes?.(path) ||
-        copy?.includes?.(pathWithoutOrdinal)),
+    () => !isEmpty(value) && (isTrue(copy) || copy?.includes?.(path) || copy?.includes?.(pathWithoutOrdinal)),
     [copy, value, path, pathWithoutOrdinal],
   );
   const canFilter = useMemo(
-    () =>
-      isTrue(filters) ||
-      filters?.includes?.(path) ||
-      filters?.includes?.(pathWithoutOrdinal),
+    () => isTrue(filters) || filters?.includes?.(path) || filters?.includes?.(pathWithoutOrdinal),
     [filters, path, pathWithoutOrdinal],
   );
 
   const labelDisplay = useMemo(
     () => (
-      <ActionLabel
-        className="text-dimmed text-sm px-2 flex-1 truncate"
-        actions={
-          !canExpand && canFilter
-            ? [
-                <Button
-                  key="negative"
-                  color="danger"
-                  size="sm"
-                  variant="link"
-                  icon={CoreIcons.funnelMinus}
-                  aria-label="Filter Negative"
-                  onClick={() =>
-                    onFilter?.(pathWithoutOrdinal, actualValue, true)
-                  }
-                />,
-                <Button
-                  key="positive"
-                  color="primary"
-                  size="sm"
-                  variant="link"
-                  icon={CoreIcons.funnelPlus}
-                  aria-label="Filter"
-                  onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
-                />,
-              ]
-            : []
-        }
-      >
+      <div className={cn("text-dimmed text-sm px-2 flex-1 group", inline ? "truncate" : "break-words")}>
+        {!canExpand && canFilter && (
+          <div className="hidden pe-1 group-hover:inline-block align-middle">
+            <Button
+              key="positive"
+              color="primary"
+              size="xs"
+              variant="link"
+              icon="icon-[mdi--filter-plus]"
+              aria-label="Filter"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
+            />
+            <Button
+              key="negative"
+              color="danger"
+              size="xs"
+              variant="link"
+              icon="icon-[mdi--filter-minus]"
+              aria-label="Filter Negative"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue, true)}
+            />
+          </div>
+        )}
         {labeler?.(path) ?? field}
-      </ActionLabel>
+      </div>
     ),
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
     [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter],
   );
 
@@ -255,63 +222,44 @@ const JsonEntry = ({
     <Fragment>
       {showPropertyTree && (
         <div
-          className={classNames(
-            "py-2",
-            inline && "flex flex-nowrap items-center",
-          )}
+          className={cn("py-2", inline && "flex flex-nowrap items-center")}
           style={{
             paddingInlineStart: level * 8,
           }}
         >
           <div
             role="none"
-            className={classNames(
-              "flex overflow-hidden items-center",
-              inline && "flex-content",
-            )}
+            className={cn("flex overflow-hidden items-center", inline && "flex-content")}
             style={{
               flexBasis: labelWidth,
             }}
             onClick={() => canExpand && setExpanded(!expanded)}
           >
-            {canExpand && (
-              <Icon
-                rtlFlip
-                icon={expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight}
-              />
-            )}
+            {canExpand && <Icon rtlFlip icon={expanded ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"} />}
             {labelDisplay}
           </div>
           {display && (
-            <div className={classNames("px-2", inline && "flex-1")}>
+            <div className={cn("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1")}>
               {canCopy && <Copy size="xs" text={actualValue} />}
-              {display}
+              <div className="flex-1">{display}</div>
             </div>
           )}
         </div>
       )}
       {!showPropertyTree && !children && (
-        <div
-          className={classNames(
-            "py-2",
-            inline && "flex flex-nowrap items-center",
-          )}
-        >
+        <div className={cn("py-2", inline && "flex flex-nowrap items-center")}>
           <div
             role="none"
-            className={classNames(
-              "flex overflow-hidden items-center",
-              inline && "flex-content",
-            )}
+            className={cn("flex overflow-hidden items-center", inline && "flex-content")}
             style={{
               flexBasis: labelWidth,
             }}
           >
             {labelDisplay}
           </div>
-          <div className={classNames("px-2", inline && "flex-1")}>
+          <div className={cn("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1")}>
             {canCopy && <Copy size="xs" text={value} />}
-            {display}
+            <div className="flex-1">{display}</div>
           </div>
         </div>
       )}
@@ -334,9 +282,30 @@ const JsonEntry = ({
         ))}
     </Fragment>
   );
-};
+}
 
-export const JsonViewer = <T extends KeyValue = KeyValue>({
+/**
+ * JsonViewer component to display JSON data in a structured format.
+ * It supports inline display, property filtering, and custom formatting.
+ * The component can handle nested objects and arrays, displaying them in a tree-like structure.
+ * It also provides options for copying values and filtering properties.
+ *
+ * @example
+ * ```jsx
+ * <JsonViewer
+ *   json={{ name: "John", age: 30, address: { city: "New York", zip: "10001" } }}
+ *   copy={true}
+ *   filters={true}
+ *   propertyScheme={{ date: ["createdAt"], phone: ["contact"] }}
+ *   inline={true}
+ *   labelWidth="25%"
+ *   formatter={(path, value) => (path === "age" ? `${value} years` : value)}
+ *   labeler={(path) => path.replace(/_/g, " ").toUpperCase()}
+ *   onFilter={(path, value, negate) => console.log(`Filter ${negate ? "negate" : ""} on ${path}:`, value)}
+ * />
+ * ```
+ */
+export function JsonViewer<T extends KeyValue = KeyValue>({
   className,
   json,
   copy,
@@ -350,13 +319,13 @@ export const JsonViewer = <T extends KeyValue = KeyValue>({
   emptyMessage,
   showPropertyTree = true,
   ...rest
-}: JsonViewProps<T>) => {
+}: JsonViewProps<T>) {
   const { t } = useTranslation("data");
 
   const list = useMemo(() => reduceObject(json), [json]);
 
   return (
-    <div {...rest} className={classNames(className, "p-4 bg-alternate")}>
+    <div {...rest} className={cn(className, "bg-alternate")}>
       {!isEmpty(json) ? (
         list.map((item) => (
           <JsonEntry
@@ -378,4 +347,4 @@ export const JsonViewer = <T extends KeyValue = KeyValue>({
       )}
     </div>
   );
-};
+}