@structuralists/scaffolding 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structuralists/scaffolding",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "main": "./index.ts",
   "types": "./index.ts",
   "exports": {

package/src/components/Json/JsonTable/JsonLeafNode.tsx

@@ -2,6 +2,11 @@ import { Text } from '../../Content/Text';
 
 export type JsonLeafNodeProps = {
   value: unknown;
+  /** When true, render `null` / `undefined` via Text with the monospace font.
+   *  JsonTable sets this on recursive calls so leaves inside a table inherit
+   *  the same font as the surrounding monospace cells (Text otherwise sets
+   *  its own font-family and would break the inheritance). */
+  isMono?: boolean;
 };
 
 /**
@@ -13,14 +18,15 @@ export type JsonLeafNodeProps = {
  * placeholder until JsonTable grows specialized renderers for them.
  */
 export const JsonLeafNode = (props: JsonLeafNodeProps) => {
-  const { value } = props;
+  const { value, isMono } = props;
+  const size = isMono ? 'small' : undefined;
 
   if (value === null) {
-    return <Text isMuted>null</Text>;
+    return <Text isMuted isMono={isMono} size={size}>null</Text>;
   }
 
   if (value === undefined) {
-    return <Text isMuted>undefined</Text>;
+    return <Text isMuted isMono={isMono} size={size}>undefined</Text>;
   }
 
   if (typeof value === 'boolean') {

package/src/components/Json/JsonTable/index.tsx

@@ -1,33 +1,49 @@
-import { QuickTable, QuickTableRow, QuickTableCell } from '../../Tables/QuickTable';
+import {
+  QuickTable,
+  QuickTableRow,
+  QuickTableCell,
+  QuickTableHeaderRow,
+  QuickTableHeaderCell,
+} from '../../Tables/QuickTable';
 import { JsonLeafNode } from './JsonLeafNode';
 import { isPlainObject } from './utils';
 import type { JsonTableProps } from './types';
+import styles from './styles.module.css';
 
 export const JsonTable = (props: JsonTableProps) => {
-  const { value, title } = props;
+  const { value, title, isNested } = props;
 
   if (isPlainObject(value)) {
     const entries = Object.entries(value);
 
-    return (
-      <QuickTable title={title} hasColumnDividers>
+    const headerRow = title ? (
+      <QuickTableHeaderRow>
+        <QuickTableHeaderCell colSpan={2}>{title}</QuickTableHeaderCell>
+      </QuickTableHeaderRow>
+    ) : undefined;
+
+    const table = (
+      <QuickTable headerRow={headerRow} hasColumnDividers hasOuterBorder={!isNested}>
         {entries.map((entry) => {
           const [key, child] = entry;
+          const childIsObject = isPlainObject(child);
 
           return (
             <QuickTableRow key={key}>
               <QuickTableCell width={1}>{key}</QuickTableCell>
-              <QuickTableCell>
-                <JsonTable value={child} title={key} />
+              <QuickTableCell hasPadding={!childIsObject}>
+                <JsonTable value={child} title={key} isNested />
               </QuickTableCell>
             </QuickTableRow>
           );
         })}
       </QuickTable>
     );
+
+    return isNested ? table : <div className={styles.root}>{table}</div>;
   }
 
-  return <JsonLeafNode value={value} />;
+  return <JsonLeafNode value={value} isMono={isNested} />;
 };
 
 export type { JsonTableProps };

package/src/components/Json/JsonTable/styles.module.css

@@ -0,0 +1,7 @@
+.root {
+  font-family: var(--ui-font-mono);
+}
+
+.root thead tr {
+  border-bottom-color: var(--ui-border-subtle);
+}

package/src/components/Json/JsonTable/types.ts

@@ -6,8 +6,17 @@ export type JsonTableProps = {
   /** Any value. JsonTable inspects shape and dispatches to a specialized
    *  renderer; primitives and unknown shapes fall back to JsonLeafNode. */
   value: JsonValue;
-  /** Optional caption rendered above the QuickTable when value is a plain
-   *  object. JsonTable also passes the parent key down as `title` on each
-   *  recursive call, so nested object-valued cells render a labeled table. */
+  /** Optional title rendered as a header row inside the table border when
+   *  value is a plain object. JsonTable also passes the parent key down as
+   *  `title` on each recursive call, so nested object-valued cells render a
+   *  labeled table. */
   title?: ReactNode;
+  /** @internal Set by JsonTable on every recursive call (i.e. when rendering
+   *  a child entry of a parent table). Two effects: (1) on a nested object,
+   *  suppresses the outer border so the inner table sits flush inside its
+   *  parent cell — whose padding is also dropped at the parent level; (2) on
+   *  a primitive leaf, signals JsonLeafNode to render `null` / `undefined`
+   *  via Text with the monospace font so they inherit the surrounding font
+   *  set by the JsonTable root. Not intended for external callers. */
+  isNested?: boolean;
 };

package/src/components/Tables/QuickTable/index.tsx

@@ -25,10 +25,13 @@ const widthStyle = (
 };
 
 export const QuickTableCell = (props: QuickTableCellProps) => {
-  const { children, width, align } = props;
+  const { children, width, align, hasPadding = true } = props;
 
   return (
-    <td className={cx(styles.cell, alignClass(align))} style={widthStyle(width)}>
+    <td
+      className={cx(styles.cell, alignClass(align), !hasPadding && styles.cellFlush)}
+      style={widthStyle(width)}
+    >
       {children}
     </td>
   );
@@ -43,10 +46,14 @@ export const QuickTableRow = (props: QuickTableRowProps) => {
 brandQuickTableType(QuickTableRow, 'QuickTableRow');
 
 export const QuickTableHeaderCell = (props: QuickTableHeaderCellProps) => {
-  const { children, width, align } = props;
+  const { children, width, align, colSpan } = props;
 
   return (
-    <th className={cx(styles.headerCell, alignClass(align))} style={widthStyle(width)}>
+    <th
+      className={cx(styles.headerCell, alignClass(align))}
+      style={widthStyle(width)}
+      colSpan={colSpan}
+    >
       {children}
     </th>
   );
@@ -61,14 +68,21 @@ export const QuickTableHeaderRow = (props: QuickTableHeaderRowProps) => {
 brandQuickTableType(QuickTableHeaderRow, 'QuickTableHeaderRow');
 
 export const QuickTable = (props: QuickTableProps) => {
-  const { children, headerCells, headerRow, title, hasColumnDividers } = props;
+  const { children, headerCells, headerRow, title, hasColumnDividers, hasOuterBorder = true } =
+    props;
 
   const header =
     headerRow ??
     (headerCells ? <QuickTableHeaderRow>{headerCells}</QuickTableHeaderRow> : undefined);
 
   return (
-    <table className={cx(styles.table, hasColumnDividers && styles.tableWithColumnDividers)}>
+    <table
+      className={cx(
+        styles.table,
+        hasColumnDividers && styles.tableWithColumnDividers,
+        !hasOuterBorder && styles.tableFlush,
+      )}
+    >
       {title ? <caption className={styles.caption}>{title}</caption> : null}
       {header ? <thead>{header}</thead> : null}
       <tbody>{wrapList(children, QuickTableRow)}</tbody>

package/src/components/Tables/QuickTable/styles.module.css

@@ -63,3 +63,11 @@
 .tableWithColumnDividers .headerCell + .headerCell {
   border-left: 1px solid var(--ui-border-subtle);
 }
+
+.cellFlush {
+  padding: 0;
+}
+
+.tableFlush {
+  border: 0;
+}

package/src/components/Tables/QuickTable/types.ts

@@ -17,6 +17,9 @@ export type QuickTableProps = {
   title?: ReactNode;
   /** Draw vertical divider lines between columns. Default: false. */
   hasColumnDividers?: boolean;
+  /** Draw the outer border around the table. Default: true. Set false when
+   *  the table sits flush inside a parent cell that already provides a frame. */
+  hasOuterBorder?: boolean;
 };
 
 export type QuickTableRowProps = {
@@ -27,6 +30,10 @@ export type QuickTableCellProps = {
   children: ReactNode;
   width?: string | number;
   align?: QuickTableCellAlign;
+  /** Apply the cell's inner padding. Default: true. Set false when the cell's
+   *  content is itself a bordered block (e.g. a nested table) that should sit
+   *  flush with the cell edges. */
+  hasPadding?: boolean;
 };
 
 export type QuickTableHeaderRowProps = {
@@ -37,4 +44,5 @@ export type QuickTableHeaderCellProps = {
   children: ReactNode;
   width?: string | number;
   align?: QuickTableCellAlign;
+  colSpan?: number;
 };