tharaday 0.5.11 → 0.6.1

package/src/components/Tree/TreeItem.tsx

@@ -0,0 +1,146 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import type { TreeItemProps } from './TreeItem.types';
+import styles from './TreeItem.module.css';
+
+export const TreeItem = ({
+  data,
+  label,
+  defaultExpanded,
+  expandIcon,
+  collapseIcon,
+  isRoot,
+}: TreeItemProps) => {
+  const [isExpanded, setIsExpanded] = useState(isRoot ? true : (defaultExpanded ?? false));
+
+  const isObject = data !== null && typeof data === 'object';
+  const hasChildren =
+    isObject && (Array.isArray(data) ? data.length > 0 : Object.keys(data).length > 0);
+
+  const toggle = () => setIsExpanded(!isExpanded);
+
+  const defaultExpandIcon = (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  );
+
+  const defaultCollapseIcon = (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+
+  const renderContent = () => {
+    if (data === undefined) {
+      return <span className={styles.empty}>undefined</span>;
+    }
+
+    if (data === null) {
+      return <span className={styles.empty}>null</span>;
+    }
+
+    if (typeof data !== 'object') {
+      return <span className={styles.value}>{String(data)}</span>;
+    }
+
+    if (Array.isArray(data)) {
+      if (data.length === 0) {
+        return <span className={styles.empty}>[]</span>;
+      }
+      return (
+        <ul
+          className={clsx(
+            styles.list,
+            styles.collapsibleContent,
+            isExpanded && styles.expanded,
+            isRoot && styles.rootList
+          )}
+        >
+          {data.map((item, index) => (
+            <li key={index} className={styles.item}>
+              <TreeItem
+                data={item}
+                defaultExpanded={defaultExpanded}
+                expandIcon={expandIcon}
+                collapseIcon={collapseIcon}
+              />
+            </li>
+          ))}
+        </ul>
+      );
+    }
+
+    if (Object.keys(data).length === 0) {
+      return <span className={styles.empty}>{}</span>;
+    }
+
+    return (
+      <ul
+        className={clsx(
+          styles.list,
+          styles.collapsibleContent,
+          isExpanded && styles.expanded,
+          isRoot && styles.rootList
+        )}
+      >
+        {Object.entries(data).map(([key, value]) => (
+          <li key={key} className={styles.item}>
+            <TreeItem
+              label={key}
+              data={value}
+              defaultExpanded={defaultExpanded}
+              expandIcon={expandIcon}
+              collapseIcon={collapseIcon}
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  return (
+    <div>
+      {!isRoot && (
+        <div className={styles.itemHeader}>
+          {hasChildren ? (
+            <button
+              type="button"
+              className={styles.toggleButton}
+              onClick={toggle}
+              aria-expanded={isExpanded}
+            >
+              {isExpanded
+                ? (collapseIcon ?? defaultCollapseIcon)
+                : (expandIcon ?? defaultExpandIcon)}
+            </button>
+          ) : (
+            <div className={styles.toggleButton} aria-hidden="true" />
+          )}
+          {label && <span className={styles.key}>{label}:</span>}
+          {!hasChildren && renderContent()}
+        </div>
+      )}
+      {hasChildren && renderContent()}
+      {isRoot && !hasChildren && <div className={styles.itemHeader}>{renderContent()}</div>}
+    </div>
+  );
+};

package/src/components/Tree/TreeItem.types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export interface TreeItemProps {
+  /** The data to be displayed in the tree item */
+  data: unknown;
+  /** Label for the tree item (e.g., object key) */
+  label?: string;
+  /** Whether the tree items should be expanded by default */
+  defaultExpanded?: boolean;
+  /** Custom icon for expanded state */
+  expandIcon?: ReactNode;
+  /** Custom icon for collapsed state */
+  collapseIcon?: ReactNode;
+  /** Whether the tree item is a root element */
+  isRoot?: boolean;
+}

package/src/index.ts

@@ -60,6 +60,10 @@ export { Input } from './components/Input/Input.tsx';
 export type { InputProps } from './components/Input/Input.types.ts';
 export { Loader } from './components/Loader/Loader.tsx';
 export type { LoaderProps, LoaderSize } from './components/Loader/Loader.types.ts';
+export { List } from './components/List/List.tsx';
+export { ListItem } from './components/List/ListItem.tsx';
+export type { ListProps, ListVariant } from './components/List/List.types.ts';
+export type { ListItemProps } from './components/List/ListItem.types.ts';
 export { Modal } from './components/Modal/Modal.tsx';
 export type { ModalProps } from './components/Modal/Modal.types.ts';
 export { Notification } from './components/Notification/Notification.tsx';
@@ -124,6 +128,10 @@ export { Textarea } from './components/Textarea/Textarea.tsx';
 export type { TextareaProps, TextareaSize } from './components/Textarea/Textarea.types.ts';
 export { Tooltip } from './components/Tooltip/Tooltip.tsx';
 export type { TooltipProps, TooltipPosition } from './components/Tooltip/Tooltip.types.ts';
+export { Tree } from './components/Tree/Tree.tsx';
+export { TreeItem } from './components/Tree/TreeItem.tsx';
+export type { TreeProps } from './components/Tree/Tree.types.ts';
+export type { TreeItemProps } from './components/Tree/TreeItem.types.ts';
 
 // layouts
 export { AppLayout } from './layouts/AppLayout/AppLayout.tsx';