Merge branch 'main' into steeve/rnd-5337-show-placeholder-gitbook-ad-when-previewing-published

Author: spastorelli

bun.lockb

@@ -395,6 +395,10 @@ const testCases: TestsCase[] = [
                     await page.click('[data-testid="annotation-button"]');
                 },
             },
+            {
+                name: 'Stepper',
+                url: 'blocks/stepper',
+            },
         ],
     },
     {

packages/gitbook/e2e/pages.spec.ts

@@ -16,7 +16,7 @@
         "clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static"
     },
     "dependencies": {
-        "@gitbook/api": "^0.66.0",
+        "@gitbook/api": "^0.69.0",
         "@gitbook/cache-do": "workspace:*",
         "@gitbook/emoji-codepoints": "workspace:*",
         "@gitbook/icons": "workspace:*",

packages/gitbook/package.json

@@ -32,6 +32,8 @@ import { BlockMath } from './Math';
 import { OpenAPI } from './OpenAPI';
 import { Paragraph } from './Paragraph';
 import { Quote } from './Quote';
+import { Stepper } from './Stepper';
+import { StepperStep } from './StepperStep';
 import { Table } from './Table';
 import { Tabs } from './Tabs';
 
@@ -104,6 +106,12 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
                 return <IntegrationBlock {...props} {...contextProps} block={block} />;
             case 'synced-block':
                 return <BlockSyncedBlock {...props} {...contextProps} block={block} />;
+            case 'reusable-content':
+                return null;
+            case 'stepper':
+                return <Stepper {...props} {...contextProps} block={block} />;
+            case 'stepper-step':
+                return <StepperStep {...props} {...contextProps} block={block} />;
             default:
                 return nullIfNever(block);
         }
@@ -136,7 +144,6 @@ function BlockPlaceholder(props: { block: DocumentBlock; style: ClassValue }) {
         case 'code':
         case 'hint':
         case 'tabs':
-        case 'synced-block':
             return <SkeletonParagraph id={id} style={style} />;
         case 'expandable':
         case 'table':
@@ -145,6 +152,9 @@ function BlockPlaceholder(props: { block: DocumentBlock; style: ClassValue }) {
         case 'divider':
         case 'content-ref':
         case 'integration':
+        case 'stepper':
+        case 'synced-block':
+        case 'reusable-content':
             return <SkeletonCard id={id} style={style} />;
         case 'embed':
         case 'images':
@@ -153,6 +163,7 @@ function BlockPlaceholder(props: { block: DocumentBlock; style: ClassValue }) {
         case 'image':
         case 'code-line':
         case 'tabs-item':
+        case 'stepper-step':
             throw new Error('Blocks should be directly rendered by parent');
         default:
             return nullIfNever(block);

packages/gitbook/src/components/DocumentView/Block.tsx

@@ -0,0 +1,12 @@
+import { DocumentBlockStepper } from '@gitbook/api';
+
+import { BlockProps } from './Block';
+import { Blocks } from './Blocks';
+
+export function Stepper(props: BlockProps<DocumentBlockStepper>) {
+    const { block, style, ancestorBlocks, ...contextProps } = props;
+
+    return (
+        <Blocks {...contextProps} nodes={block.nodes} ancestorBlocks={[...ancestorBlocks, block]} />
+    );
+}

packages/gitbook/src/components/DocumentView/Stepper.tsx

@@ -0,0 +1,53 @@
+import { DocumentBlockStepperStep } from '@gitbook/api';
+import { assert } from 'ts-essentials';
+
+import { tcls } from '@/lib/tailwind';
+
+import { BlockProps } from './Block';
+import { Blocks } from './Blocks';
+
+export function StepperStep(props: BlockProps<DocumentBlockStepperStep>) {
+    const { block, style, ancestorBlocks, ...contextProps } = props;
+
+    const ancestor = ancestorBlocks[ancestorBlocks.length - 1];
+    assert(ancestor.type === 'stepper', 'Ancestor block must be a stepper');
+
+    const index = ancestor.nodes.indexOf(block);
+
+    const firstChild = block.nodes[0];
+    const marginAdjustClassName = (() => {
+        if (!firstChild) {
+            return '';
+        }
+        switch (firstChild.type) {
+            case 'heading-1':
+                return '-mt-9';
+            case 'heading-2':
+                return '-mt-[calc(1.25rem+1px)]';
+            default:
+                return '';
+        }
+    })();
+
+    return (
+        <div className="flex flex-row gap-4 md:gap-8 max-w-3xl w-full mx-auto">
+            <div className="relative select-none">
+                <div
+                    className={tcls(
+                        'flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-50 dark:bg-primary-900 tabular-nums',
+                        'font-medium text-primary-800 dark:text-primary-200',
+                    )}
+                >
+                    {index + 1}
+                </div>
+                <div className="absolute bottom-2 left-[0.875rem] top-9 w-px bg-primary-50 dark:bg-primary-900" />
+            </div>
+            <Blocks
+                {...contextProps}
+                nodes={block.nodes}
+                ancestorBlocks={[...ancestorBlocks, block]}
+                style={['flex-1 pb-6 [&>*+*]:mt-5', marginAdjustClassName]}
+            />
+        </div>
+    );
+}

packages/gitbook/src/components/DocumentView/StepperStep.tsx

@@ -255,9 +255,9 @@ export async function resolveContentRef(
             };
         }
 
-        case 'synced-block': {
+        case 'reusable-content':
+        case 'synced-block':
             return null;
-        }
 
         default:
             assertNever(contentRef);