WIP

src/components/TreePicker/TreePicker.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Pending Review/TreePicker" />
+
+ok

src/components/TreePicker/TreePicker.stories.tsx

@@ -1,30 +1,75 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import axios from 'axios';
 
 import TreePicker, { TreePickerNode } from './index';
 
 const meta = {
   title: 'Pending Review/TreePicker',
   component: TreePicker,
-  tags: ['autodocs'],
+  // tags: ['autodocs'],
 } satisfies Meta<typeof TreePicker>;
 
 export default meta;
 
+const nodeMeta = {
+  title: 'Pending Review/TreePickerNode',
+  component: TreePickerNode,
+  // tags: ['autodocs'],
+} satisfies Meta<typeof TreePickerNode>;
+type NodeStory = StoryObj<typeof nodeMeta>;
+
+export const NodeExample: NodeStory = {
+  args: {},
+  render: ({ node }) => (
+    <>
+      <TreePickerNode.Content>{node.label}</TreePickerNode.Content>
+      <TreePickerNode.Add onAdd={() => console.log()} />
+      {node.type === 'comment' ? null : (
+        <TreePickerNode.Expand
+          resolveNodes={async () => {
+            if (node.type === 'user') {
+              const res = await axios.get(`https://dummyjson.com/users/${node.id}/posts?limit=5`);
+              return res.data.posts.map((entry) => ({
+                ...entry,
+                label: entry.title,
+                type: 'post',
+              }));
+            }
+            const res = await axios.get(`https://dummyjson.com/posts/${node.id}/comments?limit=5`);
+
+            return res.data.comments.map((entry) => ({
+              ...entry,
+              label: entry.body,
+              type: 'comment',
+            }));
+          }}
+        />
+      )}
+    </>
+  ),
+};
+
 type Story = StoryObj<typeof meta>;
 
 const DefaultExample = () => {
   return (
-    <TreePicker
-      renderNode={(node) => (
-        <TreePickerNode node={node}>
-          <TreePickerNode.Content>{node.label}</TreePickerNode.Content>
-          <TreePickerNode.Add onAdd={() => console.log()} />
-        </TreePickerNode>
-      )}
-    >
-      <TreePicker.Tree resolveRootNodes={() => [{ id: 'a', label: 'a' }]} />
-    </TreePicker>
+    <div style={{ width: 500 }}>
+      <TreePicker renderNode={(node) => <NodeExample node={node} />}>
+        <TreePicker.Nav />
+        <TreePicker.Header>Name</TreePicker.Header>
+        <TreePicker.Tree
+          resolveRootNodes={async () => {
+            const res = await axios.get('https://dummyjson.com/users?limit=5');
+            return res.data.users.map((entry) => ({
+              ...entry,
+              label: entry.firstName + ' ' + entry.lastName,
+              type: 'user',
+            }));
+          }}
+        />
+      </TreePicker>
+    </div>
   );
 };
 

src/components/TreePicker/TreePickerNode.jsx

@@ -4,6 +4,9 @@ import cx from 'classnames';
 import _ from 'lodash';
 import useIsUnmounted from '../../hooks/useIsUnmounted';
 import useCallbackRef from '../../hooks/useCallbackRef';
+import PlusIcon from '../../styles/icons/plus.svg';
+import FolderOpenIcon from '../../styles/icons/folder-open.svg';
+import FolderIcon from '../../styles/icons/folder.svg';
 import Button from '../Button';
 import Skeleton from '../Skeleton';
 import {
@@ -104,6 +107,11 @@ const getReverseIcon = (current) =>
     folder: 'folder-open',
   }[current]);
 
+const IconComponents = {
+  'folder-open': FolderOpenIcon,
+  folder: FolderIcon,
+};
+
 const getHasSearch = (state) => !!state.search;
 
 const TreePickerNodeExpand = ({
@@ -125,7 +133,9 @@ const TreePickerNodeExpand = ({
   const getTreeState = useTreePickerGetState();
   const hasSearch = useTreePickerSlice(getHasSearch);
 
-  const icon = expanded ? 'folder-open' : 'folder';
+  const iconName = expanded ? 'folder-open' : 'folder';
+  const ExpandIcon = IconComponents[isHover ? getReverseIcon(iconName) : iconName];
+
   const propExpand = inline ? inlineExpand : fullExpand;
   const defaultExpand = hasSearch ? inlineExpand : fullExpand;
   const shouldDefaultExpand = _.isNil(inline);
@@ -174,8 +184,7 @@ const TreePickerNodeExpand = ({
     <Button
       variant="borderless"
       aria-label="Expand"
-      icon={'expand'}
-      // icon={<SvgIcon className="tree-picker-node-svg" value={isHover ? getReverseIcon(icon) : icon} />}
+      icon={<ExpandIcon className="tree-picker-node-svg" />}
       {...rest}
       disabled={disabled}
       isLoading={isLoading}
@@ -233,8 +242,7 @@ const TreePickerNodeAdd = ({ className, onAdd, onClick, disabled = false, ...res
   return (
     <Button
       aria-label="Add"
-      // icon={<SvgSymbol href="svg-symbols.svg#plus" className="tree-picker-node-svg" />}
-      icon={'plus'}
+      icon={<PlusIcon className="tree-picker-node-svg" />}
       color="primary"
       variant="inverse"
       {...rest}