diff --git a/.changeset/flat-wolves-poke.md b/.changeset/flat-wolves-poke.md new file mode 100644 index 0000000000..2b5c201cd1 --- /dev/null +++ b/.changeset/flat-wolves-poke.md @@ -0,0 +1,6 @@ +--- +"gitbook-v2": patch +"gitbook": patch +--- + +Adds Columns layout block to GBO diff --git a/packages/gitbook/e2e/internal.spec.ts b/packages/gitbook/e2e/internal.spec.ts index a6d87fbf82..3efe00bd27 100644 --- a/packages/gitbook/e2e/internal.spec.ts +++ b/packages/gitbook/e2e/internal.spec.ts @@ -666,6 +666,7 @@ const testCases: TestsCase[] = [ name: 'Stepper', url: 'blocks/stepper', }, + { name: 'Columns', url: 'blocks/columns' }, ], }, { diff --git a/packages/gitbook/src/components/DocumentView/Block.tsx b/packages/gitbook/src/components/DocumentView/Block.tsx index 3dba09bf56..ee4f9c7c8e 100644 --- a/packages/gitbook/src/components/DocumentView/Block.tsx +++ b/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(props: BlockProps) { return ; case 'list-item': return ; + case 'columns': + return ; case 'code': return ; case 'hint': @@ -112,10 +115,8 @@ export function Block(props: BlockProps) { 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 ; 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); } diff --git a/packages/gitbook/src/components/DocumentView/Columns/Columns.tsx b/packages/gitbook/src/components/DocumentView/Columns/Columns.tsx new file mode 100644 index 0000000000..4d74a0490d --- /dev/null +++ b/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) { + const { block, style, ancestorBlocks, document, context } = props; + return ( +
+ {block.nodes.map((columnBlock) => { + const width = columnBlock.data.width; + const { className, style } = transformLengthToCSS(width); + return ( + + + + ); + })} +
+ ); +} + +export function Column(props: { + children?: React.ReactNode; + className?: ClassValue; + style?: React.CSSProperties; +}) { + return ( +
+ {props.children} +
+ ); +} + +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', +]; diff --git a/packages/gitbook/src/components/DocumentView/Columns/index.ts b/packages/gitbook/src/components/DocumentView/Columns/index.ts new file mode 100644 index 0000000000..a8b4f25b41 --- /dev/null +++ b/packages/gitbook/src/components/DocumentView/Columns/index.ts @@ -0,0 +1 @@ +export * from './Columns';