RND-6843: columns block (#3257)

Co-authored-by: Steven Hall <steven@gitbook.io>

Author: BrettJephson

.changeset/flat-wolves-poke.md

@@ -0,0 +1,6 @@
+---
+"gitbook-v2": patch
+"gitbook": patch
+---
+
+Adds Columns layout block to GBO

packages/gitbook/e2e/internal.spec.ts

@@ -666,6 +666,7 @@ const testCases: TestsCase[] = [
                 name: 'Stepper',
                 url: 'blocks/stepper',
             },
+            { name: 'Columns', url: 'blocks/columns' },
         ],
     },
     {

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

@@ -12,6 +12,7 @@ import type { ClassValue } from '@/lib/tailwind';
 
 import { BlockContentRef } from './BlockContentRef';
 import { CodeBlock } from './CodeBlock';
+import { Columns } from './Columns';
 import { Divider } from './Divider';
 import type { DocumentContextProps } from './DocumentView';
 import { Drawing } from './Drawing';
@@ -68,6 +69,8 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
                 return <List {...props} block={block} />;
             case 'list-item':
                 return <ListItem {...props} block={block} />;
+            case 'columns':
+                return <Columns {...props} block={block} />;
             case 'code':
                 return <CodeBlock {...props} block={block} />;
             case 'hint':
@@ -112,10 +115,8 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
             case 'image':
             case 'code-line':
             case 'tabs-item':
-                throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
-            case 'columns':
             case 'column':
-                return null;
+                throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
             default:
                 return nullIfNever(block);
         }
@@ -171,6 +172,7 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'integration':
         case 'stepper':
         case 'reusable-content':
+        case 'columns':
             return <SkeletonCard id={id} style={style} />;
         case 'embed':
         case 'images':
@@ -179,10 +181,8 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'image':
         case 'code-line':
         case 'tabs-item':
-            throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
-        case 'columns':
         case 'column':
-            return null;
+            throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
         default:
             return nullIfNever(block);
     }

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

@@ -0,0 +1,80 @@
+import { type ClassValue, tcls } from '@/lib/tailwind';
+import type { DocumentBlockColumns, Length } from '@gitbook/api';
+import type { BlockProps } from '../Block';
+import { Blocks } from '../Blocks';
+
+export function Columns(props: BlockProps<DocumentBlockColumns>) {
+    const { block, style, ancestorBlocks, document, context } = props;
+    return (
+        <div className={tcls('flex flex-col gap-x-8 md:flex-row', style)}>
+            {block.nodes.map((columnBlock) => {
+                const width = columnBlock.data.width;
+                const { className, style } = transformLengthToCSS(width);
+                return (
+                    <Column key={columnBlock.key} className={className} style={style}>
+                        <Blocks
+                            key={columnBlock.key}
+                            nodes={columnBlock.nodes}
+                            document={document}
+                            ancestorBlocks={[...ancestorBlocks, block, columnBlock]}
+                            context={context}
+                            blockStyle="flip-heading-hash"
+                            style="w-full space-y-4"
+                        />
+                    </Column>
+                );
+            })}
+        </div>
+    );
+}
+
+export function Column(props: {
+    children?: React.ReactNode;
+    className?: ClassValue;
+    style?: React.CSSProperties;
+}) {
+    return (
+        <div className={tcls('flex-col', props.className)} style={props.style}>
+            {props.children}
+        </div>
+    );
+}
+
+function transformLengthToCSS(length: Length | undefined) {
+    if (!length) {
+        return { className: ['md:w-full'] }; // default to full width if no length is specified
+    }
+
+    if (typeof length === 'number') {
+        return { style: undefined }; // not implemented yet with non-percentage lengths
+    }
+
+    if (length.unit === '%') {
+        return {
+            className: [
+                'md:flex-shrink-0',
+                COLUMN_WIDTHS[Math.round(length.value * 0.01 * (COLUMN_WIDTHS.length - 1))],
+            ],
+        };
+    }
+
+    return { style: undefined }; // not implemented yet with non-percentage lengths
+}
+
+// Tailwind CSS classes for column widths.
+// The index of the array corresponds to the percentage width of the column.
+const COLUMN_WIDTHS = [
+    'md:w-0',
+    'md:w-1/12',
+    'md:w-2/12',
+    'md:w-3/12',
+    'md:w-4/12',
+    'md:w-5/12',
+    'md:w-6/12',
+    'md:w-7/12',
+    'md:w-8/12',
+    'md:w-9/12',
+    'md:w-10/12',
+    'md:w-11/12',
+    'md:w-full',
+];

packages/gitbook/src/components/DocumentView/Columns/index.ts

@@ -0,0 +1 @@
+export * from './Columns';