add Horizontaly view

README.md

@@ -81,11 +81,13 @@ Accepts the following props:
 - **lineStyle:** _\(default solid\)_ The line style as a [css line-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values)
 - **lineBorderRadius:** _\(default 5px\)_ The border radius of the Path as a [css border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
 - **nodePadding:** _\(default 5px\)_ The left and right padding of every `<TreeNode>` as a [css length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)
+- **isHorizontal:** _\(default false\)_ View Mode: Vertical or Horizontal
 
 ### `TreeNode` - A node in the tree
 
 - **label:** _**\(required\)**_ Any react `Node`
 - **children:** _**\(required\)**_ Any number of `<TreeNode>`
+- **isHorizontal:** _\(default false\)_ View Mode: Vertical or Horizontal
 
 ## Motivation
 

src/components/Tree.tsx

@@ -35,6 +35,7 @@ export interface TreeProps {
    */
   nodePadding?: string;
   children: TreeNodeProps['children'];
+  isHorizontal?: boolean;
 }
 
 /**
@@ -49,6 +50,7 @@ function Tree({
   nodePadding = '5px',
   lineStyle = 'solid',
   lineBorderRadius = '5px',
+  isHorizontal = false,
 }: TreeProps) {
   return (
     <ul
@@ -72,7 +74,9 @@ function Tree({
         --tree-node-padding: var(--node-padding, 5px);
       `}
     >
-      <TreeNode label={label}>{children}</TreeNode>
+      <TreeNode label={label} isHorizontal={isHorizontal}>
+        {children}
+      </TreeNode>
     </ul>
   );
 }

src/components/TreeNode.tsx

@@ -9,6 +9,7 @@ export interface TreeNodeProps {
   label: React.ReactNode;
   className?: string;
   children?: ReactNode;
+  isHorizontal?: boolean;
 }
 
 const verticalLine = css`
@@ -19,7 +20,7 @@ const verticalLine = css`
   box-sizing: border-box;
 `;
 
-const childrenContainer = css`
+const childrenContainerVertical = css`
   display: flex;
   padding-inline-start: 0;
   margin: 0;
@@ -35,7 +36,7 @@ const childrenContainer = css`
   }
 `;
 
-const node = css`
+const nodeVertical = css`
   flex: auto;
   text-align: center;
   list-style-type: none;
@@ -44,7 +45,7 @@ const node = css`
     var(--tree-node-padding);
 `;
 
-const nodeLines = css`
+const nodeLinesVertical = css`
   ::before,
   ::after {
     ${verticalLine};
@@ -88,12 +89,128 @@ const nodeLines = css`
   }
 `;
 
-function TreeNode({ children, label, className }: TreeNodeProps) {
+const horizontalLine = css`
+  content: '';
+  position: absolute;
+  left: 0;
+  width: var(--tree-line-height);
+  box-sizing: border-box;
+  height: 100%;
+`;
+
+const childrenContainerHorizontal = css`
+  display: flex;
+  padding-inline-start: 0;
+  margin: 0;
+  padding-left: var(--tree-line-height);
+  position: relative;
+  flex-direction: column;
+
+  ::before {
+    ${horizontalLine};
+    top: calc(50% - var(--tree-line-width) / 2);
+    height: 0;
+    border-top: var(--tree-line-width) var(--tree-node-line-style)
+      var(--tree-line-color);
+  }
+`;
+
+const nodeHorizontal = css`
+  flex: auto;
+  text-align: center;
+  list-style-type: none;
+  display: flex;
+  position: relative;
+  padding: var(--tree-node-padding) 0 var(--tree-node-padding)
+    var(--tree-line-height);
+`;
+
+const nodeLinesHorizontal = css`
+  ::before,
+  ::after {
+    ${horizontalLine};
+    right: 50%;
+    border-top: 0;
+    top: 0;
+  }
+  ::after {
+    left: 0;
+    border-left: var(--tree-line-width) var(--tree-node-line-style)
+      var(--tree-line-color);
+  }
+
+  :before {
+    height: 50%;
+    border-top: var(--tree-line-width) var(--tree-node-line-style);
+    top: 50%;
+  }
+
+  :only-of-type {
+    padding: 0;
+    ::after,
+    :before {
+      display: none;
+    }
+  }
+
+  :first-of-type {
+    ::before {
+      border: 0 none;
+      height: 50%;
+    }
+    ::after {
+      border-radius: var(--tree-line-border-radius) 0 0 0;
+      top: 50%;
+      height: 50%;
+      border-top: var(--tree-line-width) var(--tree-node-line-style)
+        var(--tree-line-color);
+    }
+  }
+
+  :last-of-type {
+    ::before {
+      border-left: var(--tree-line-width) var(--tree-node-line-style)
+        var(--tree-line-color);
+      border-radius: 0 0 0 var(--tree-line-border-radius);
+      border-bottom: var(--tree-line-width) var(--tree-node-line-style)
+        var(--tree-line-color);
+      border-top: 0;
+      bottom: 50%;
+      height: 50%;
+      top: 0;
+    }
+    ::after {
+      border: 0 none;
+      height: 50%;
+    }
+  }
+`;
+
+function TreeNode({
+  children,
+  label,
+  className,
+  isHorizontal = false,
+}: TreeNodeProps) {
   return (
-    <li className={cx(node, nodeLines, className)}>
-      {label}
+    <li
+      className={
+        isHorizontal
+          ? cx(nodeHorizontal, nodeLinesHorizontal, className)
+          : cx(nodeVertical, nodeLinesVertical, className)
+      }
+    >
+      <span style={isHorizontal ? { alignSelf: 'center' } : {}}>{label}</span>
       {React.Children.count(children) > 0 && (
-        <ul className={childrenContainer}>{children}</ul>
+        <ul
+          className={
+            isHorizontal
+              ? childrenContainerHorizontal
+              : childrenContainerVertical
+          }
+        >
+          {children}
+        </ul>
       )}
     </li>
   );

src/stories/Tree.stories.tsx

@@ -14,14 +14,14 @@ export default {
 } as Meta;
 
 export const Basic: Story<TreeProps> = (args) => (
-  <Tree {...args} children={getNodes()} />
+  <Tree {...args} children={getNodes()} isHorizontal={true} />
 );
 Basic.args = {
   label: 'Root',
 };
 
 export const Styled: Story<TreeProps> = (args) => (
-  <Tree {...args} children={getNodes()} />
+  <Tree {...args} children={getNodes()} isHorizontal={true} />
 );
 
 Styled.args = {
@@ -38,6 +38,7 @@ export const StyledNodes: Story<TreeProps> = ({ label, ...args }) => (
     label={<StyledNode>{label}</StyledNode>}
     {...args}
     children={getNodes(StyledNode)}
+    isHorizontal={true}
   />
 );
 
@@ -62,18 +63,24 @@ function StyledNode({ children }: React.PropsWithChildren<{}>) {
 
 function getNodes(Label: React.ElementType = 'div') {
   return [
-    <TreeNode label={<Label>Child 1</Label>}>
-      <TreeNode label={<Label>Grand Child</Label>} />
+    <TreeNode label={<Label>Child 1</Label>} isHorizontal={true}>
+      <TreeNode label={<Label>Grand Child</Label>} isHorizontal={true} />
     </TreeNode>,
-    <TreeNode label={<Label>Child 2</Label>}>
-      <TreeNode label={<Label>Grand Child</Label>}>
-        <TreeNode label={<Label>Great Grand Child 1</Label>} />
-        <TreeNode label={<Label>Great Grand Child 2</Label>} />
+    <TreeNode label={<Label>Child 2</Label>} isHorizontal={true}>
+      <TreeNode label={<Label>Grand Child</Label>} isHorizontal={true}>
+        <TreeNode
+          label={<Label>Great Grand Child 1</Label>}
+          isHorizontal={true}
+        />
+        <TreeNode
+          label={<Label>Great Grand Child 2</Label>}
+          isHorizontal={true}
+        />
       </TreeNode>
     </TreeNode>,
-    <TreeNode label={<Label>Child 3</Label>}>
-      <TreeNode label={<Label>Grand Child 1</Label>} />
-      <TreeNode label={<Label>Grand Child 2</Label>} />
+    <TreeNode label={<Label>Child 3</Label>} isHorizontal={true}>
+      <TreeNode label={<Label>Grand Child 1</Label>} isHorizontal={true} />
+      <TreeNode label={<Label>Grand Child 2</Label>} isHorizontal={true} />
     </TreeNode>,
   ];
 }