Add vscode-style structure lines for the cities demo (#94)

Author: percy507

packages/showcase/pages/cities.tsx

@@ -11,6 +11,7 @@ import Link from "next/link";
 type Data = { id: string; name: string; children?: Data[] };
 
 const data = sortData(cities);
+const INDENT_STEP = 15;
 
 export default function Cities() {
   const [tree, setTree] = useState<TreeApi<Data> | null | undefined>(null);
@@ -45,7 +46,7 @@ export default function Cities() {
                 rowClassName={styles.row}
                 padding={15}
                 rowHeight={30}
-                indent={15}
+                indent={INDENT_STEP}
                 overscanCount={8}
                 onSelect={(selected) => setSelectedCount(selected.length)}
                 onActivate={(node) => setActive(node.data)}
@@ -168,13 +169,20 @@ export default function Cities() {
 
 function Node({ node, style, dragHandle }: NodeRendererProps<Data>) {
   const Icon = node.isInternal ? BsMapFill : BsGeoFill;
+  const indentSize = Number.parseFloat(`${style.paddingLeft || 0}`);
+  
   return (
     <div
       ref={dragHandle}
       style={style}
       className={clsx(styles.node, node.state)}
       onClick={() => node.isInternal && node.toggle()}
     >
+      <div className={styles.indentLines}>
+        {new Array(indentSize / INDENT_STEP).fill(0).map((_, index) => {
+          return <div key={index}></div>;
+        })}
+      </div>
       <FolderArrow node={node} />
       <Icon className={styles.icon} />{" "}
       <span className={styles.text}>

packages/showcase/styles/cities.module.css

@@ -113,6 +113,7 @@
 }
 
 .node {
+    position: relative;
     border-radius: 8px;
     display: flex;
     align-items: center;
@@ -125,7 +126,7 @@
 }
 
 .node:global(.isSelected) {
-    background: rgb(20, 127, 250);
+    background: rgb(20, 127, 250, 0.5);
     color: white;
     border-radius: 0;
 }
@@ -142,6 +143,28 @@
     border-radius: 8px;
 }
 
+.tree:hover .indentLines {
+    display: flex;
+}
+
+.indentLines {
+    --indent-size: 15px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    display: none;
+    align-items: flex-start;
+    height: 100%;
+}
+
+.indentLines > div {
+    height: 100%;
+    padding-left: 10px;
+    border-right: 1px solid #ccc;
+    margin-right: calc(var(--indent-size) - 10px - 1px);
+}
 
 .row:focus-visible {
     outline: none;