Add experimental code

Author: konard

example/components/chakra-boxes.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { Box, Button, Input, VStack } from "@chakra-ui/react";
+
+const ChakraBoxes = () => {
+  const [numBoxes, setNumBoxes] = useState(100); // Default number of boxes
+  const [indentations, setIndentations] = useState(Array.from({ length: numBoxes }, (_, i) => i * 10)); // Initial indentations
+
+  // Function to handle number of boxes change
+  const handleNumBoxesChange = (e) => {
+    const value = parseInt(e.target.value) || 0;
+    setNumBoxes(value);
+    
+    // Update the indentation array when number of boxes changes
+    setIndentations(
+      Array.from({ length: value }, (_, i) => i * 10) // Example: indentation increases by 10px per box
+    );
+  };
+
+  return (
+    <VStack spacing={4} overflowX={'hidden'}>   
+      <Input
+        type="number"
+        value={numBoxes}
+        onChange={handleNumBoxesChange}
+        placeholder="Enter number of boxes"
+        width="200px"
+      />
+
+      {Array.from({ length: numBoxes }).map((_, index) => (
+        <Box
+          key={index}
+          width="200px"
+          height="50px"
+          bg="teal.300"
+          mt={4}
+          ml={`${indentations[index]}px`} // Adjust left margin for indentation
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          Box {index + 1}
+        </Box>
+      ))}
+    </VStack>
+  );
+};
+
+export default ChakraBoxes;

example/components/deep-tree.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface DataNode {
+  readonly content: any;
+  readonly children: DataNode[];
+}
+export type { DataNode };
+
+interface TreeNodeProps {
+  data: DataNode;
+  ListItem?: React.ElementType;
+  List?: React.ElementType;
+  ContentFrame?: React.ElementType;
+}
+
+export function TreeNode({ data, ListItem = 'li', List = 'ul', ContentFrame = 'div' }: TreeNodeProps) {
+  const { content, children } = data;
+  let item;
+  let treeNodesList;
+
+  if (content !== undefined) {
+    item = <ContentFrame>{content}</ContentFrame>;
+  }
+  if (children && children.length > 0) {
+    const treeNodes = children.map((element, index) => (
+      <TreeNode data={element} key={index} ListItem={ListItem} List={List} ContentFrame={ContentFrame} />
+    ));
+    treeNodesList = <List>{treeNodes}</List>;
+  }
+  return (
+    <ListItem>
+      {item}
+      {treeNodesList}
+    </ListItem>
+  );
+}
+
+interface DeepTreeProps {
+  data: DataNode[];
+  ListItem?: React.ElementType;
+  List?: React.ElementType;
+  ContentFrame?: React.ElementType;
+  TreeFrame?: React.ElementType;
+}
+
+export function DeepTree({ data, ListItem = 'li', List = 'ul', ContentFrame = 'div', TreeFrame='div' }: DeepTreeProps) {
+  return (
+    <TreeFrame>
+      <List>
+        {data.map((object, index) => (
+          <TreeNode key={index} data={object} ListItem={ListItem} List={List} ContentFrame={ContentFrame} />
+        ))}
+      </List>
+    </TreeFrame>
+  );
+}
+
+export default DeepTree;

example/components/scroll-sync.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Box, Flex, VStack } from "@chakra-ui/react";
+
+const ScrollSync = () => {
+  const [currentBoxIndex, setCurrentBoxIndex] = useState(0);
+  const containerRef = useRef(null);
+  const horizontalScrollRef = useRef(null);
+
+  const boxes = [
+    { bg: "tomato", height: "300px" },
+    { bg: "blue.300", height: "400px" },
+    { bg: "green.300", height: "350px" },
+    { bg: "yellow.400", height: "500px" },
+  ];
+
+  const handleScroll = () => {
+    const container = containerRef.current;
+    const containerHeight = container.offsetHeight;
+    const scrollPosition = container.scrollTop;
+    const middlePosition = scrollPosition + containerHeight / 2;
+
+    // Check which box is in the middle of the viewport
+    let closestBoxIndex = 0;
+    let closestDistance = Infinity;
+
+    boxes.forEach((box, index) => {
+      const boxElement = document.getElementById(`box-${index}`);
+      const boxTop = boxElement.offsetTop;
+      const boxHeight = boxElement.offsetHeight;
+      const boxMiddle = boxTop + boxHeight / 2;
+
+      const distance = Math.abs(middlePosition - boxMiddle);
+
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestBoxIndex = index;
+      }
+    });
+
+    setCurrentBoxIndex(closestBoxIndex);
+  };
+
+  useEffect(() => {
+    const container = containerRef.current;
+    container.addEventListener("scroll", handleScroll);
+
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  useEffect(() => {
+    // Sync horizontal scroll when the box in the middle changes
+    const horizontalContainer = horizontalScrollRef.current;
+    const boxWidth = 200; // Adjust the width based on your box size
+    horizontalContainer.scrollLeft = currentBoxIndex * boxWidth;
+  }, [currentBoxIndex]);
+
+  return (
+    <Flex direction="column" align="center" height="100vh" overflow="hidden">
+      <Flex ref={horizontalScrollRef} width="100%" overflowX="auto">
+        {boxes.map((box, index) => (
+          <Box key={index} width="200px" height="50px" bg={box.bg} />
+        ))}
+      </Flex>
+
+      <VStack
+        ref={containerRef}
+        spacing={6}
+        height="100%"
+        overflowY="auto"
+        width="100%"
+        p={4}
+      >
+        {boxes.map((box, index) => (
+          <Box
+            key={index}
+            id={`box-${index}`}
+            bg={box.bg}
+            height={box.height}
+            width="100%"
+          >
+            Box {index + 1}
+          </Box>
+        ))}
+      </VStack>
+    </Flex>
+  );
+};
+
+export default ScrollSync;

example/next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.