orcs-design-system/es/components/CodeBlock/CodeBlock.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import CodeBlock from "./index";
import { H2, P } from "../Typography";
import Box from "../Box";
import Spacer from "../Spacer";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/CodeBlock",
  component: CodeBlock,
  decorators: [Story => /*#__PURE__*/_jsx(Box, {
    p: "r",
    children: /*#__PURE__*/_jsx(Story, {})
  })]
};
const sampleJSON = {
  name: "TeamForm Configuration",
  version: "2.0",
  features: {
    allocation: true,
    integrations: ["jira", "slack", "azure"],
    limits: {
      maxUsers: 1000,
      maxProjects: 50
    }
  },
  metadata: {
    created: "2025-01-15",
    lastModified: "2025-01-20"
  }
};
const sampleJavaScript = "function calculateAllocation(person, project, fte) {\n  if (!person || !project) {\n    throw new Error(\"Person and project are required\");\n  }\n  \n  const allocation = {\n    personId: person.id,\n    projectId: project.id,\n    fte: Math.min(Math.max(fte, 0), 1),\n    startDate: new Date(),\n    status: \"active\"\n  };\n  \n  return allocation;\n}\n\nexport default calculateAllocation;";
const sampleTypeScript = "interface Person {\n  id: string;\n  name: string;\n  email: string;\n  fte: number;\n}\n\ntype AllocationStatus = \"active\" | \"pending\" | \"completed\";\n\nclass AllocationManager {\n  private allocations: Map<string, Person>;\n  \n  constructor() {\n    this.allocations = new Map();\n  }\n  \n  addAllocation(person: Person): void {\n    this.allocations.set(person.id, person);\n  }\n  \n  getTotalFte(): number {\n    return Array.from(this.allocations.values())\n      .reduce((sum, person) => sum + person.fte, 0);\n  }\n}";
const sampleSQL = "SELECT \n  p.id,\n  p.name,\n  p.email,\n  COUNT(a.id) as allocation_count,\n  SUM(a.fte) as total_fte\nFROM persons p\nLEFT JOIN allocations a ON p.id = a.person_id\nWHERE a.status = 'active'\n  AND a.start_date >= '2025-01-01'\nGROUP BY p.id, p.name, p.email\nHAVING SUM(a.fte) > 0.5\nORDER BY total_fte DESC;";
const sampleBash = "#!/bin/bash\n\n# Deploy script for TeamForm\nset -e\n\necho \"Starting deployment...\"\n\n# Build the application\nnpm run build\n\n# Run tests\nnpm test\n\n# Deploy to production\nif [ \"$ENV\" = \"production\" ]; then\n  echo \"Deploying to production...\"\n  npm run deploy:prod\nelse\n  echo \"Deploying to staging...\"\n  npm run deploy:staging\nfi\n\necho \"Deployment complete!\"";
const samplePython = "class AllocationCalculator:\n    def __init__(self, max_fte=1.0):\n        self.max_fte = max_fte\n        self.allocations = []\n    \n    def add_allocation(self, person_id, project_id, fte):\n        \"\"\"Add a new allocation for a person to a project.\"\"\"\n        if fte > self.max_fte:\n            raise ValueError(f\"FTE cannot exceed {self.max_fte}\")\n        \n        allocation = {\n            'person_id': person_id,\n            'project_id': project_id,\n            'fte': fte,\n            'status': 'active'\n        }\n        self.allocations.append(allocation)\n        return allocation\n    \n    def get_total_fte(self, person_id):\n        \"\"\"Calculate total FTE for a person across all projects.\"\"\"\n        return sum(\n            a['fte'] for a in self.allocations \n            if a['person_id'] == person_id\n        )";

// Default story (light variant)
export const Default = () => /*#__PURE__*/_jsx(CodeBlock, {
  language: "json",
  children: JSON.stringify(sampleJSON, null, 2)
});

// Light variant (explicit)
export const LightVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Light Theme (Default)"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Clean white background with dark text - matches existing pre tag styling"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    variant: "light",
    showLineNumbers: true,
    children: JSON.stringify(sampleJSON, null, 2)
  })]
});

// Dark variant
export const DarkVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Dark Theme"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Dark background with light text for reduced eye strain"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    variant: "dark",
    showLineNumbers: true,
    children: JSON.stringify(sampleJSON, null, 2)
  })]
});

// Side by side comparison
export const VariantComparison = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Light vs Dark Comparison"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Light variant (default):"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "javascript",
    variant: "light",
    children: sampleJavaScript
  }), /*#__PURE__*/_jsx(Spacer, {
    mb: "r"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Dark variant:"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "javascript",
    variant: "dark",
    children: sampleJavaScript
  })]
});

// With line numbers
export const WithLineNumbers = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "JSON Configuration with Line Numbers"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    showLineNumbers: true,
    children: JSON.stringify(sampleJSON, null, 2)
  })]
});

// Without header
export const WithoutHeader = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Minimal Mode (No Header)"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Useful for embedding in tight spaces"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    showHeader: false,
    children: JSON.stringify(sampleJSON, null, 2)
  })]
});

// Custom max height
export const CustomMaxHeight = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Limited Height with Scrolling"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Set maxHeight to control vertical scrolling"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    maxHeight: "200px",
    children: JSON.stringify(sampleJSON, null, 2)
  })]
});

// JavaScript example
export const JavaScript = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "JavaScript with Line Numbers"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "javascript",
    showLineNumbers: true,
    children: sampleJavaScript
  })]
});

// TypeScript example
export const TypeScript = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "TypeScript"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "typescript",
    showLineNumbers: true,
    children: sampleTypeScript
  })]
});

// SQL example
export const SQL = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "SQL Query"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "sql",
    showLineNumbers: true,
    children: sampleSQL
  })]
});

// Bash example
export const BashScript = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Shell Script"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "bash",
    showLineNumbers: true,
    children: sampleBash
  })]
});

// Python example
export const Python = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Python Class"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "python",
    showLineNumbers: true,
    children: samplePython
  })]
});

// Multiple code blocks
export const MultipleBlocks = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Configuration Comparison"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Original Configuration:"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    maxHeight: "150px",
    children: JSON.stringify({
      version: "1.0",
      features: ["basic"]
    }, null, 2)
  }), /*#__PURE__*/_jsx(Spacer, {
    mb: "r"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Updated Configuration:"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    maxHeight: "150px",
    children: JSON.stringify(sampleJSON, null, 2)
  })]
});

// Compact JSON
export const CompactJSON = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Compact Mode for Small Snippets"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    showHeader: false,
    maxHeight: "100px",
    children: JSON.stringify({
      status: "success",
      count: 42
    }, null, 2)
  })]
});

// All features enabled
export const AllFeaturesEnabled = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "All Features Enabled"
  }), /*#__PURE__*/_jsx(P, {
    mb: "r",
    children: "Header + Line Numbers + Copy Button + Custom Height"
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "javascript",
    showLineNumbers: true,
    showCopyButton: true,
    showHeader: true,
    maxHeight: "300px",
    children: sampleJavaScript
  })]
});

// Editable mode
export const Editable = () => {
  const [code, setCode] = React.useState(JSON.stringify(sampleJSON, null, 2));
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(H2, {
      mb: "r",
      children: "Editable Code Block"
    }), /*#__PURE__*/_jsxs(P, {
      mb: "r",
      children: ["Use the ", /*#__PURE__*/_jsx("code", {
        children: "editable"
      }), " prop to make the code block editable. Perfect for configuration editors, JSON editors, or any scenario where users need to modify code."]
    }), /*#__PURE__*/_jsx(CodeBlock, {
      language: "json",
      editable: true,
      value: code,
      onChange: e => setCode(e.target.value),
      showLineNumbers: true,
      rows: 15
    })]
  });
};

// Editable with different language
export const EditableJavaScript = () => {
  const [code, setCode] = React.useState(sampleJavaScript);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(H2, {
      mb: "r",
      children: "Editable JavaScript"
    }), /*#__PURE__*/_jsx(P, {
      mb: "r",
      children: "Editable mode works with any language. Syntax highlighting is preserved while editing."
    }), /*#__PURE__*/_jsx(CodeBlock, {
      language: "javascript",
      editable: true,
      value: code,
      onChange: e => setCode(e.target.value),
      showLineNumbers: true,
      rows: 20
    })]
  });
};

// Editable dark variant
export const EditableDark = () => {
  const [code, setCode] = React.useState(JSON.stringify(sampleJSON, null, 2));
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(H2, {
      mb: "r",
      children: "Editable Dark Theme"
    }), /*#__PURE__*/_jsx(P, {
      mb: "r",
      children: "Editable mode is available in both light and dark variants."
    }), /*#__PURE__*/_jsx(CodeBlock, {
      language: "json",
      variant: "dark",
      editable: true,
      value: code,
      onChange: e => setCode(e.target.value),
      showLineNumbers: true,
      rows: 15
    })]
  });
};

// Usage example for migration
export const MigrationExample = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(H2, {
    mb: "r",
    children: "Migration from <pre> tags"
  }), /*#__PURE__*/_jsxs(P, {
    mb: "r",
    children: [/*#__PURE__*/_jsx("strong", {
      children: "Before:"
    }), " Plain HTML pre tag"]
  }), /*#__PURE__*/_jsx(Box, {
    bg: "greyLightest",
    p: "r",
    borderRadius: "2",
    mb: "r",
    style: {
      fontFamily: "monospace"
    },
    children: /*#__PURE__*/_jsx("pre", {
      children: JSON.stringify({
        old: "approach"
      }, null, 2)
    })
  }), /*#__PURE__*/_jsxs(P, {
    mb: "r",
    children: [/*#__PURE__*/_jsx("strong", {
      children: "After:"
    }), " CodeBlock component with syntax highlighting"]
  }), /*#__PURE__*/_jsx(CodeBlock, {
    language: "json",
    children: JSON.stringify({
      new: "approach",
      benefits: ["highlighting", "copy", "themes"]
    }, null, 2)
  })]
});
Default.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Default"
};
LightVariant.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "LightVariant"
};
DarkVariant.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DarkVariant"
};
VariantComparison.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "VariantComparison"
};
WithLineNumbers.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "WithLineNumbers"
};
WithoutHeader.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "WithoutHeader"
};
CustomMaxHeight.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CustomMaxHeight"
};
JavaScript.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "JavaScript"
};
TypeScript.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TypeScript"
};
SQL.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SQL"
};
BashScript.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "BashScript"
};
Python.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Python"
};
MultipleBlocks.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "MultipleBlocks"
};
CompactJSON.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CompactJSON"
};
AllFeaturesEnabled.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "AllFeaturesEnabled"
};
Editable.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Editable"
};
EditableJavaScript.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "EditableJavaScript"
};
EditableDark.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "EditableDark"
};
MigrationExample.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "MigrationExample"
};