code cleanup and add stepper to advanced tutorial

Author: Blargian

docs/quick-start.mdx

@@ -251,18 +251,18 @@ technologies that integrate with ClickHouse.
 
         Query id: 8ca9b2f9-65a2-4982-954a-890de710a336
 
-        ┌─name──────┬─type────────────────────┬─default_type─┬─default_expression─┬─comment─┬─codec_expression─┬─ttl_expression─┐
-        │ id        │ Nullable(Int64)         │              │                    │         │                  │                │
-        │ type      │ Nullable(String)        │              │                    │         │                  │                │
-        │ author    │ Nullable(String)        │              │                    │         │                  │                │
-        │ timestamp │ Nullable(DateTime64(9)) │              │                    │         │                  │                │
-        │ comment   │ Nullable(String)        │              │                    │         │                  │                │
-        │ children  │ Array(Nullable(Int64))  │              │                    │         │                  │                │
-        └───────────┴─────────────────────────┴──────────────┴────────────────────┴─────────┴──────────────────┴────────────────┘
+        ┌─name──────┬─type────────────────────┐
+        │ id        │ Nullable(Int64)         │
+        │ type      │ Nullable(String)        │
+        │ author    │ Nullable(String)        │
+        │ timestamp │ Nullable(DateTime64(9)) │
+        │ comment   │ Nullable(String)        │
+        │ children  │ Array(Nullable(Int64))  │
+        └───────────┴─────────────────────────┘
         ```
 
         Notice ClickHouse infers the names and data types of your columns by analyzing a
-        large batch of rows. If ClickHouse can not determine the storage type from the
+        large batch of rows. If ClickHouse can not determine the file format from the
         filename, you can specify it as the second argument:
 
         ```sql

docs/tutorial.md

@@ -17,6 +17,8 @@ Learn how to ingest and query data in ClickHouse using a New York City taxi exam
 
 You need access to a running ClickHouse service to complete this tutorial. For instructions, see the [Quick Start](./quick-start.mdx) guide.
 
+<VerticalStepper>
+
 ## Create a new table {#create-a-new-table}
 
 The New York City taxi dataset contains details about millions of taxi rides, with columns including tip amount, tolls, payment type, and more. Create a table to store this data.
@@ -508,6 +510,7 @@ Write some queries that join the `taxi_zone_dictionary` with your `trips` table.
         Generally, we avoid using `SELECT *` often in ClickHouse. You should only retrieve the columns you actually need. However, this query is slower for the purposes of the example.
         :::
 
+</VerticalStepper>
 
 ## Next steps {#next-steps}
 
@@ -517,3 +520,4 @@ Learn more about ClickHouse with the following documentation:
 - [Integrate an external data source](/integrations/index.mdx): Review data source integration options, including files, Kafka, PostgreSQL, data pipelines, and many others.
 - [Visualize data in ClickHouse](./integrations/data-visualization/index.md): Connect your favorite UI/BI tool to ClickHouse.
 - [SQL Reference](./sql-reference/index.md): Browse the SQL functions available in ClickHouse for transforming, processing and analyzing data.
+

plugins/remark-custom-blocks.js

@@ -20,7 +20,7 @@ const plugin = (options) => {
 
         // Target JSX elements in the AST
         visit(tree, 'mdxJsxFlowElement', (node, index, parent) => {
-            // Look specifically for the <VerticlStepper> tag used in the markdown file
+            // Look specifically for the <VerticalStepper> tag used in the markdown file
             if (node.name === 'VerticalStepper') {
                 try {
                     // --- 1. Parse <VerticalStepper> Attributes ---

src/components/Stepper/Stepper.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { VerticalStepper as OriginalVerticalStepper } from '@clickhouse/click-ui/bundled';
 
 // --- Step Component ---
@@ -8,7 +8,6 @@ interface StepProps {
     label?: React.ReactNode;
     forceExpanded?: string; // From parent 'expanded' state
     isFirstStep?: boolean; // Prop calculated by parent
-    isActiveStep?: boolean; // Prop calculated by parent (based on state/scroll)
     [key: string]: any;
 }
 
@@ -18,21 +17,18 @@ const Step = ({
                   label,
                   forceExpanded,
                   isFirstStep = false,
-                  isActiveStep = false,
                   ...restProps
               }: StepProps) => {
 
     // Determine 'active' status based on props passed from parent
-    const shouldBeActive = isFirstStep || isActiveStep || forceExpanded === 'true';
+    const shouldBeActive = isFirstStep || forceExpanded === 'true';
     const status: 'active' | 'complete' | 'incomplete' = shouldBeActive ? 'active' : 'incomplete';
 
     // Let underlying component handle expansion based on status='active'
-    // We pass collapsed=true, relying on status='active' to override it.
     const collapsed = true;
 
-    // Swap out the Click-UI Stepper label (shown next to the numbered circle) for the
-    // H2 header so that Docusaurus doesn't fail on broken anchor checks
-    useEffect(() => {
+    // Swap out the Click-UI Stepper label for the H2 header
+    React.useEffect(() => {
         try {
             const button = document.querySelectorAll(`button[id^=${id}]`)[0];
             const divChildren = Array.from(button.children).filter(el => el.tagName === 'DIV');
@@ -45,13 +41,12 @@ const Step = ({
         } catch (e) {
             console.log('Error occurred in Stepper.tsx while swapping H2 for Click-UI label')
         }
-    }, []);
+    }, [id]);
 
     // Filter out props specific to this wrapper logic
     const {
         forceExpanded: _,
         isFirstStep: __,
-        isActiveStep: ___,
         ...domSafeProps // Pass the rest to the underlying component
     } = restProps;
 
@@ -79,15 +74,12 @@ interface StepperProps {
 
 // Using VerticalStepper name based on MDXComponents.js
 const VStepper = ({
-                             children,
-                             type = 'numbered',
-                             className,
-                             expanded, // 'true' if allExpanded was set
-                             ...props
-                         }: StepperProps) => {
-
-    // State for tracking active steps via scroll/click
-    const [activeStepIds, setActiveStepIds] = useState<Set<string>>(new Set());
+                      children,
+                      type = 'numbered',
+                      className,
+                      expanded, // 'true' if allExpanded was set
+                      ...props
+                  }: StepperProps) => {
 
     // Determine if all steps should be expanded from the start
     const isExpandedMode = expanded === 'true';
@@ -96,69 +88,22 @@ const VStepper = ({
     const childSteps = React.Children.toArray(children)
         .filter(child => React.isValidElement(child));
 
-    // Extract step-X IDs (used for state tracking and keys)
+    // Extract step-X IDs (used for keys)
     const stepIds = childSteps.map((child, index) => {
         const childElement = child as React.ReactElement;
         return childElement.props.id || `step-${index + 1}`;
     });
 
-    // --- Scroll Listener Effect ---
-    // This is currently not used, but we may want to include it at a later stage
-    useEffect(() => {
-        if (isExpandedMode) return;
-
-        const handleScroll = () => {
-            const headers = document.querySelectorAll('button[id^="step-"]');
-            if (headers.length === 0) {
-                console.log('No step headers found using CORRECT selectors');
-                return;
-            }
-
-            headers.forEach((header, index) => {
-                if (index >= stepIds.length) return;
-                const rect = header.getBoundingClientRect();
-                const isVisible = rect.top < window.innerHeight * 0.7 && rect.bottom > 0;
-                if (isVisible) {
-                    const stepId = stepIds[index];
-                    setActiveStepIds(prev => {
-                        if (prev.has(stepId)) return prev;
-                        // console.log(`Activating step ${stepId} from scroll`);
-                        return new Set([...prev, stepId]);
-                    });
-                }
-            });
-        };
-
-        const timeoutId = setTimeout(handleScroll, 500);
-        window.addEventListener('scroll', handleScroll);
-        const intervals = [1000, 2000, 3000].map(delay => setTimeout(handleScroll, delay));
-
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-            clearTimeout(timeoutId);
-            intervals.forEach(id => clearTimeout(id));
-        };
-    }, [isExpandedMode, stepIds]);
-
-    // Click handler (used within onClick prop below)
-    const handleStepClick = (stepId: string) => {
-        if (isExpandedMode) return;
-        // console.log(`Clicked on step ${stepId}`);
-        setActiveStepIds(prev => new Set([...prev, stepId]));
-    };
-
     // Prepare children, passing down calculated state
     const enhancedChildren = childSteps.map((child, index) => {
         const childElement = child as React.ReactElement;
         const stepId = childElement.props.id || `step-${index + 1}`;
-        const isActiveStep = activeStepIds.has(stepId); // Is this step activated by scroll/click?
         const isFirstStep = index === 0; // Is this the first step?
 
         return React.cloneElement(childElement, {
             key: stepId,
             id: stepId,
             isFirstStep, // Pass down flag for first step logic
-            isActiveStep, // Pass down flag for active state logic
             forceExpanded: isExpandedMode ? 'true' : undefined // Pass down expanded mode
         });
     });
@@ -171,19 +116,6 @@ const VStepper = ({
             type={type}
             className={className}
             {...domProps}
-            onClick={(e) => {
-                if (isExpandedMode) return;
-                const target = e.target as HTMLElement;
-                const header = target.closest('button[id^="step-"]');
-                if (header) {
-                    const allHeaders = document.querySelectorAll('button[id^="step-"]');
-                    const index = Array.from(allHeaders).indexOf(header as Element);
-                    if (index !== -1 && index < stepIds.length) {
-                        const stepId = stepIds[index];
-                        handleStepClick(stepId);
-                    }
-                }
-            }}
         >
             {enhancedChildren}
         </OriginalVerticalStepper>