docusaurus-plugin-generate-schema-docs 1.2.0 → 1.3.0

package/components/SchemaRows.css

@@ -1,28 +1,250 @@
 .required-row {
-    background-color: rgba(255, 0, 0, 0.05);
+  background-color: rgba(var(--ifm-color-danger-rgb), 0.05);
 }
 
 .constraint-code {
-    white-space: pre-wrap;
-    margin-right: 4px;
-    display: inline-block;
-    margin-bottom: 4px;
+  white-space: pre-wrap;
+  margin-right: 4px;
+  display: inline-block;
+  margin-bottom: 4px;
 }
 
 .constraint-code.required {
-    font-weight: bold;
-    color: #c7254e;
-    /* A reddish color */
-    background-color: #f9f2f4;
-    padding: 2px 4px;
-    border-radius: 4px;
+  font-weight: bold;
+  color: var(--ifm-color-danger-dark);
+  background-color: var(--ifm-color-danger-lightest);
+  padding: 2px 4px;
+  border-radius: 4px;
 }
 
 .nested-table-container {
-    padding-left: 20px;
-    border-left: 4px solid #eee;
+  padding-left: 1.25rem;
+  border-left: 0.25rem solid var(--ifm-table-border-color);
 }
 
 .schema-json-viewer {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
+}
+
+/* --- Property Name and Container Symbol Styles --- */
+
+.property-name {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.container-symbol {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.9em;
+  color: var(--ifm-color-emphasis-600);
+  font-weight: bold;
+  margin-left: -0.55em;
+}
+
+/* --- Organigram Connector Line Styles --- */
+
+/*
+ * Strategy:
+ * - ::before = vertical line from parent (top to bottom, or top to 50% for last items)
+ * - ::after = horizontal connector (from vertical line to property name)
+ * - background-image = parent-to-child lines (from 50% down) + continuing ancestor lines
+ */
+
+/* Base positioning */
+td[class*='level-'],
+td.has-children {
+  position: relative;
+}
+
+/*
+ * VERTICAL LINE (::before)
+ * Connects this row to its parent and siblings.
+ * Runs from top to bottom (or to 50% for last items in group).
+ */
+td[class*='level-']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-left: 1px solid var(--ifm-table-border-color);
+}
+
+/* Last items: stop vertical line at middle */
+td.is-last[class*='level-']::before {
+  bottom: 50%;
+}
+
+/*
+ * HORIZONTAL CONNECTOR (::after)
+ * Connects vertical line to the property name.
+ */
+td[class*='level-']::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  height: 0;
+  width: 0.75rem;
+  border-bottom: 1px solid var(--ifm-table-border-color);
+}
+
+/* --- Level-based positioning --- */
+
+td.level-1::before,
+td.level-1::after {
+  left: 0.5rem;
+}
+
+td.level-2::before,
+td.level-2::after {
+  left: 1.75rem;
+}
+
+td.level-3::before,
+td.level-3::after {
+  left: 3rem;
+}
+
+td.level-4::before,
+td.level-4::after {
+  left: 4.25rem;
+}
+
+td.level-5::before,
+td.level-5::after {
+  left: 5.5rem;
+}
+
+td.level-6::before,
+td.level-6::after {
+  left: 6.75rem;
+}
+
+/*
+ * Note: Parent-to-child lines and continuing ancestor lines are now
+ * handled via inline styles in PropertyRow.js using background gradients.
+ * This allows dynamic combination of multiple line levels.
+ */
+
+/* --- Choice Row Styles --- */
+
+.choice-row {
+  background-color: var(--ifm-table-stripe-background);
+}
+
+.choice-row:hover {
+  background-color: var(--ifm-hover-overlay);
+}
+
+.choice-row-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.choice-row-header input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.choice-row-description {
+  margin-left: 28px;
+  font-size: 0.9em;
+  color: var(--ifm-color-secondary-darkest);
+}
+.choice-row-header-description {
+  font-size: 0.9em;
+  color: var(--ifm-color-secondary-darkest);
+}
+
+.choice-row-header-headline {
+  margin-bottom: 0px;
+}
+
+.choice-row-toggle {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.75rem;
+  border: 1px solid var(--ifm-color-emphasis-400);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.choice-row-toggle.radio {
+  border-radius: 50%;
+}
+
+.choice-row-toggle.checkbox {
+  border-radius: 0.25rem;
+}
+
+.choice-row-toggle.checkbox::after {
+  content: '';
+  position: absolute;
+  display: none;
+}
+
+.choice-row-header input:checked + .choice-row-toggle.radio {
+  border-color: var(--ifm-color-primary-dark);
+}
+
+.choice-row-toggle.radio::after {
+  content: '';
+  position: absolute;
+  display: none;
+  border-radius: 50%;
+  background-color: var(--ifm-color-primary);
+  width: 0.5em;
+  height: 0.5em;
+  left: 22%;
+  top: 22%;
+}
+
+.choice-row-header input:checked + .choice-row-toggle.radio::after {
+  display: block;
+}
+
+.choice-row-header input:checked + .choice-row-toggle.checkbox {
+  border-color: var(--ifm-color-primary-dark);
+}
+
+.choice-row-header input:checked + .choice-row-toggle.checkbox::after {
+  display: block;
+  left: 0.29em;
+  top: 0.125rem;
+  width: 0.1875rem;
+  height: 0.4375rem;
+  border: solid var(--ifm-color-primary);
+  border-width: 0 0.125rem 0.125rem 0;
+  transform: rotate(45deg);
+}
+
+/* --- Example CodeBlock Styles --- */
+
+.schema-examples {
+  margin: 0;
+  font-size: 0.85em;
+  white-space: pre-wrap;
+  /* Override theme defaults to make it blend into the table cell */
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.schema-examples pre,
+.schema-examples code {
+  margin: 0 !important;
+  padding: 0 !important;
+  background-color: transparent !important;
+}
+
+/* Hide the copy button within the examples code block */
+.schema-examples button {
+  display: none;
 }

package/components/SchemaRows.js

@@ -1,47 +1,30 @@
 import React from 'react';
 import './SchemaRows.css';
 import PropertyRow from './PropertyRow';
-import TableHeader from './TableHeader';
+import FoldableRows from './FoldableRows';
 
-const SchemaRows = ({ properties, requiredList = [], level = 0, getConstraints }) => {
-    return (
-        <>
-            {Object.entries(properties).map(([key, prop]) => {
-                const childProperties = prop.properties || (prop.items && prop.items.properties);
-                const hasChildren = childProperties && Object.keys(childProperties).length > 0;
+/**
+ * Renders the rows of the schema table from a flat `tableData` array.
+ * It maps over the array and renders the appropriate component for each row.
+ */
+export default function SchemaRows({ tableData }) {
+  if (!tableData) {
+    return null;
+  }
 
-                return (
-                    <React.Fragment key={key}>
-                        <PropertyRow
-                            propertyKey={key}
-                            prop={prop}
-                            requiredList={requiredList}
-                            level={level}
-                            getConstraints={getConstraints}
-                        />
-                        {hasChildren && (
-                            <tr key={`${key}-nested`}>
-                                <td colSpan="5" className="nested-table-container">
-                                    <strong>{prop.type === 'array' ? `${key} [ ]` : `${key} { }`}</strong>
-                                    <table style={{ width: '100%', marginTop: '5px' }}>
-                                        <TableHeader />
-                                        <tbody>
-                                            <SchemaRows
-                                                properties={prop.type === 'object' ? prop.properties : prop.items.properties}
-                                                requiredList={prop.type === 'object' ? prop.required || [] : prop.items.required || []}
-                                                level={level + 1}
-                                                getConstraints={getConstraints}
-                                            />
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                        )}
-                    </React.Fragment>
-                );
-            })}
-        </>
-    );
-};
+  return tableData.map((row) => {
+    const key = row.path.join('.');
 
-export default SchemaRows;
+    if (row.type === 'choice') {
+      return <FoldableRows key={key} row={row} />;
+    }
+
+    if (row.type === 'property') {
+      return (
+        <PropertyRow key={key} row={row} isLastInGroup={row.isLastInGroup} />
+      );
+    }
+
+    return null;
+  });
+}

package/components/SchemaViewer.js

@@ -3,19 +3,25 @@ import Heading from '@theme/Heading';
 import ExampleDataLayer from './ExampleDataLayer';
 import PropertiesTable from './PropertiesTable';
 
-// --- Main Exported Component ---
-// Helper: Build an example payload from per-property `examples` or other hints
-
-
 export default function SchemaViewer({ schema }) {
+  const hasOneOfAnyOf =
+    schema.oneOf ||
+    schema.anyOf ||
+    (schema.properties &&
+      Object.values(schema.properties).some(
+        (prop) => prop.oneOf || prop.anyOf,
+      ));
+  const exampleTitle = hasOneOfAnyOf
+    ? 'DataLayer Examples'
+    : 'DataLayer Example';
 
-    return (
-        <div>
-            <Heading as="h2">DataLayer Example</Heading>
-            <ExampleDataLayer schema={schema} />
+  return (
+    <div>
+      <Heading as="h2">{exampleTitle}</Heading>
+      <ExampleDataLayer schema={schema} />
 
-            <Heading as="h2">Event Properties</Heading>
-            <PropertiesTable schema={schema} />
-        </div>
-    );
-}
+      <Heading as="h2">Event Properties</Heading>
+      <PropertiesTable schema={schema} />
+    </div>
+  );
+}

package/components/TableHeader.js

@@ -1,15 +1,15 @@
 import React from 'react';
 
 export default function TableHeader() {
-    return (
-        <thead>
-            <tr>
-                <th width="20%">Property</th>
-                <th width="15%">Type</th>
-                <th width="25%">Constraints</th>
-                <th width="15%">Examples</th>
-                <th>Description</th>
-            </tr>
-        </thead>
-    );
-}
+  return (
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Type</th>
+        <th>Constraints</th>
+        <th>Examples</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+  );
+}

package/generateEventDocs.js

@@ -1,69 +1,149 @@
-import fs from 'fs';
 import path from 'path';
-import loadSchema from './helpers/loadSchema';
-import processSchema from './helpers/processSchema';
-import MdxTemplate from './helpers/mdx-template.js';
+import fs from 'fs';
+import { getPathsForVersion } from './helpers/path-helpers.js';
+import { readSchemas, writeDoc, createDir } from './helpers/file-system.js';
+import { processOneOfSchema, slugify } from './helpers/schema-processing.js';
+import SchemaDocTemplate from './helpers/schema-doc-template.js';
+import ChoiceIndexTemplate from './helpers/choice-index-template.js';
+import processSchema from './helpers/processSchema.js';
+
+async function generateAndWriteDoc(
+  filePath,
+  schema,
+  eventName,
+  outputDir,
+  options,
+  alreadyMergedSchema = null,
+) {
+  const { organizationName, projectName, siteDir } = options;
+  const baseEditUrl = `https://github.com/${organizationName}/${projectName}/edit/main`;
+  const PARTIALS_DIR = path.join(siteDir, 'docs/partials');
+
+  const mergedSchema = alreadyMergedSchema || (await processSchema(filePath));
+
+  // Check for partials
+  const topPartialPath = path.join(PARTIALS_DIR, `${eventName}.mdx`);
+  const bottomPartialPath = path.join(PARTIALS_DIR, `${eventName}_bottom.mdx`);
+
+  let topPartialImport = '';
+  let topPartialComponent = '';
+  if (fs.existsSync(topPartialPath)) {
+    topPartialImport = `import TopPartial from '@site/docs/partials/${eventName}.mdx';`;
+    topPartialComponent = '<TopPartial />';
+  }
+
+  let bottomPartialImport = '';
+  let bottomPartialComponent = '';
+  if (fs.existsSync(bottomPartialPath)) {
+    bottomPartialImport = `import BottomPartial from '@site/docs/partials/${eventName}_bottom.mdx';`;
+    bottomPartialComponent = '<BottomPartial />';
+  }
+
+  const editUrl = `${baseEditUrl}/${path.relative(
+    path.join(siteDir, '..'),
+    filePath,
+  )}`;
+
+  const mdxContent = SchemaDocTemplate({
+    schema,
+    mergedSchema,
+    editUrl,
+    file: path.basename(filePath),
+    topPartialImport,
+    bottomPartialImport,
+    topPartialComponent,
+    bottomPartialComponent,
+  });
+
+  const outputFilename = path.basename(filePath).replace('.json', '.mdx');
+  writeDoc(outputDir, outputFilename, mdxContent);
+}
+
+async function generateOneOfDocs(
+  eventName,
+  schema,
+  filePath,
+  outputDir,
+  options,
+) {
+  const eventOutputDir = path.join(outputDir, eventName);
+  createDir(eventOutputDir);
+
+  const processed = await processOneOfSchema(schema, filePath);
+
+  const indexPageContent = ChoiceIndexTemplate({
+    schema,
+    processedOptions: processed,
+  });
+  writeDoc(eventOutputDir, 'index.mdx', indexPageContent);
+
+  for (const [
+    index,
+    { slug, schema: processedSchema },
+  ] of processed.entries()) {
+    const subChoiceType = processedSchema.oneOf ? 'oneOf' : null;
+    const prefixedSlug = `${(index + 1).toString().padStart(2, '0')}-${slug}`;
+
+    if (subChoiceType) {
+      const tempFilePath = path.join(eventOutputDir, `${slug}.json`);
+      fs.writeFileSync(tempFilePath, JSON.stringify(processedSchema, null, 2));
+      await generateOneOfDocs(
+        prefixedSlug,
+        processedSchema,
+        tempFilePath,
+        eventOutputDir,
+        options,
+      );
+      fs.unlinkSync(tempFilePath);
+    } else {
+      const tempFilePath = path.join(eventOutputDir, `${prefixedSlug}.json`);
+      fs.writeFileSync(tempFilePath, JSON.stringify(processedSchema, null, 2));
+      await generateAndWriteDoc(
+        tempFilePath,
+        processedSchema,
+        slug,
+        eventOutputDir,
+        options,
+        processedSchema,
+      );
+      fs.unlinkSync(tempFilePath);
+    }
+  }
+}
 
 export default async function generateEventDocs(options) {
-    const { organizationName, projectName, siteDir } = options || {};
-    const baseEditUrl = `https://github.com/${organizationName}/${projectName}/edit/main`;
-    // CONFIGURATION
-    const SCHEMA_DIR = path.join(siteDir, 'static/schemas'); // Where your JSON files are
-    const OUTPUT_DIR = path.join(siteDir, 'docs/events'); // Where MDX goes
-    const PARTIALS_DIR = path.join(siteDir, 'docs/partials'); // Where your partials are
-
-    // Ensure output dir exists
-    if (!fs.existsSync(OUTPUT_DIR))
-    {
-        fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  const { siteDir, version, url } = options || {};
+  const { schemaDir, outputDir } = getPathsForVersion(version, siteDir);
+
+  createDir(outputDir);
+  const schemas = readSchemas(schemaDir);
+
+  console.log(`🚀 Generating documentation for ${schemas.length} schemas...`);
+
+  for (const { fileName, filePath, schema } of schemas) {
+    const eventName = fileName.replace('.json', '');
+
+    if (version) {
+      const baseUrl = url.endsWith('/') ? url.slice(0, -1) : url;
+      if (version !== 'current') {
+        schema.$id = `${baseUrl}/schemas/${version}/${fileName}`;
+      } else {
+        schema.$id = `${baseUrl}/schemas/next/${fileName}`;
+      }
     }
 
-    // Read all JSON files
-    const files = fs.readdirSync(SCHEMA_DIR).filter(file => file.endsWith('.json'));
-
-    console.log(`🚀 Generating documentation for ${files.length} schemas...`);
-
-    for (const file of files)
-    {
-        const filePath = path.join(SCHEMA_DIR, file);
-        const schema = loadSchema(filePath);
-        const mergedSchema = await processSchema(filePath);
-        const eventName = file.replace('.json', '');
-
-        // Check for partials
-        const topPartialPath = path.join(PARTIALS_DIR, `${eventName}.mdx`);
-        const bottomPartialPath = path.join(PARTIALS_DIR, `${eventName}_bottom.mdx`);
-
-        let topPartialImport = '';
-        let topPartialComponent = '';
-        if (fs.existsSync(topPartialPath)) {
-            topPartialImport = `import TopPartial from '@site/docs/partials/${eventName}.mdx';`;
-            topPartialComponent = '<TopPartial />';
-        }
-
-        let bottomPartialImport = '';
-        let bottomPartialComponent = '';
-        if (fs.existsSync(bottomPartialPath)) {
-            bottomPartialImport = `import BottomPartial from '@site/docs/partials/${eventName}_bottom.mdx';`;
-            bottomPartialComponent = '<BottomPartial />';
-        }
-
-        const mdxContent = MdxTemplate({
-            schema,
-            mergedSchema,
-            baseEditUrl,
-            file,
-            topPartialImport,
-            bottomPartialImport,
-            topPartialComponent,
-            bottomPartialComponent
-        });
-
-        // Write the .mdx file
-        const outputFilename = file.replace('.json', '.mdx');
-        fs.writeFileSync(path.join(OUTPUT_DIR, outputFilename), mdxContent);
-        console.log(`✅ Generated docs/events/${outputFilename}`);
+    if (schema.oneOf) {
+      await generateOneOfDocs(eventName, schema, filePath, outputDir, options);
+    } else {
+      await generateAndWriteDoc(
+        filePath,
+        schema,
+        eventName,
+        outputDir,
+        options,
+      );
     }
+  }
 
-    console.log('🎉 Documentation generation complete!');
+  console.log('🎉 Documentation generation complete!');
 }