@usefragments/ui 1.0.0

package/src/components/CodeBlock/CodeBlock.module.scss

@@ -0,0 +1,384 @@
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+
+// Local component tokens (code blocks always dark — no light variant).
+// $fui-code-bg stays global (shared with Markdown's <pre> styling).
+$fui-code-text: #e2e2e5 !default;
+$fui-code-text-muted: #8a8a9a !default;
+$fui-code-border: rgba(255, 255, 255, 0.06) !default;
+$fui-code-tab-text: $fui-code-text-muted !default;
+$fui-code-tab-text-active: #e2e2e5 !default;
+$fui-code-copy-bg: rgba(255, 255, 255, 0.06) !default;
+$fui-code-copy-bg-hover: rgba(255, 255, 255, 0.12) !default;
+$fui-code-highlight-bg: rgba(255, 255, 255, 0.06) !default;
+// Selection tint derived from the primary action blue instead of semantic state colors.
+$fui-code-selection-bg: color-mix(
+  in srgb,
+  var(--fui-button-primary-base, #0a84ff) 30%,
+  transparent
+) !default;
+$fui-code-scrollbar-track: transparent !default;
+$fui-code-scrollbar-thumb: rgba(255, 255, 255, 0.1) !default;
+$fui-code-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2) !default;
+
+.container {
+  width: 100%;
+}
+
+// External title label (above the code block)
+.title {
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--fui-letter-spacing-wide, $fui-letter-spacing-wide);
+  margin-bottom: var(--fui-space-1, $fui-space-1);
+}
+
+// Code blocks always use dark theme styling (same in light and dark mode)
+// --fui-code-bg can be overridden inline via the `bg` prop
+.wrapper {
+  position: relative;
+  border-radius: var(--fui-radius-lg, $fui-radius-lg);
+  overflow: hidden;
+  background-color: var(--fui-code-bg, $fui-code-bg);
+}
+
+// ============================================
+// Header bar (filename and optional copy icon)
+// ============================================
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--fui-space-4, $fui-space-4);
+  background-color: transparent;
+  border-bottom: 1px solid var(--fui-code-border, $fui-code-border);
+  min-height: var(--fui-input-height, $fui-input-height);
+}
+
+.filename {
+  font-family: var(--fui-font-mono, $fui-font-mono);
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  font-weight: var(--fui-font-weight-normal, $fui-font-weight-normal);
+  color: var(--fui-code-text-muted, $fui-code-text-muted);
+  letter-spacing: 0.01em;
+}
+
+// Copy button - icon-only for header or overlay placements
+.copyButton {
+  @include button-reset;
+  @include touch-target;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fui-space-1, $fui-space-1);
+  color: var(--fui-code-text-muted, $fui-code-text-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  cursor: pointer;
+  transition:
+    background var(--fui-transition-fast, $fui-transition-fast),
+    color var(--fui-transition-fast, $fui-transition-fast),
+    opacity var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    color: var(--fui-code-tab-text-active, $fui-code-tab-text-active);
+    background: var(--fui-code-copy-bg-hover, $fui-code-copy-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &.copied {
+    color: var(--fui-color-success-text, $fui-color-success-text);
+    opacity: 1;
+  }
+}
+
+.copyOverlay {
+  position: absolute;
+  top: var(--fui-space-2, $fui-space-2);
+  right: var(--fui-space-2, $fui-space-2);
+  z-index: 2;
+  background: var(--fui-code-copy-bg, $fui-code-copy-bg);
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  opacity: 0;
+  transition:
+    opacity var(--fui-transition-fast, $fui-transition-fast),
+    background var(--fui-transition-fast, $fui-transition-fast),
+    color var(--fui-transition-fast, $fui-transition-fast);
+}
+
+.withCopyOverlay {
+  // Reveal copy button on container hover
+  &:hover .copyOverlay,
+  .copyOverlay:focus-visible {
+    opacity: 1;
+  }
+
+  // Also reveal when copied (feedback must be visible)
+  .copyOverlay.copied {
+    opacity: 1;
+  }
+
+  .codeContainer :global(.shiki),
+  .loading pre {
+    padding-right: calc(
+      var(--fui-space-4, #{$fui-space-4}) + var(--fui-target-size-min, #{$fui-target-size-min}) +
+        var(--fui-space-3, #{$fui-space-3})
+    );
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.persistentCopy {
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 1;
+}
+
+.persistentCopyWrapper {
+  .copyOverlay {
+    opacity: 1;
+  }
+}
+
+.loading {
+  pre {
+    margin: 0;
+    padding: var(--fui-space-4, $fui-space-4);
+    background-color: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    font-family: var(--fui-font-mono, $fui-font-mono);
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+    line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+    color: var(--fui-code-text, $fui-code-text);
+    overflow-x: auto;
+  }
+
+  code {
+    background: none !important;
+    padding: 0;
+    border: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+  }
+}
+
+.codeContainer {
+  // Shiki output styling - always dark theme
+  :global(.shiki) {
+    background-color: transparent !important;
+    margin: 0;
+    padding: var(--fui-space-4, $fui-space-4);
+    border: none !important;
+    border-radius: 0 !important;
+    font-family: var(--fui-font-mono, $fui-font-mono);
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+    line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+    overflow-x: auto;
+    tab-size: 2;
+
+    code {
+      background: none !important;
+      padding: 0;
+      border: none;
+      border-radius: 0;
+      font-family: inherit;
+      font-size: inherit;
+      counter-reset: line;
+    }
+  }
+
+  // Line styles
+  :global(.line) {
+    display: inline-block;
+    width: 100%;
+    // Match the code line-height so empty lines keep the code rhythm.
+    min-height: calc(var(--fui-line-height-normal, #{$fui-line-height-normal}) * 1em);
+
+    &:global(.highlighted) {
+      background-color: var(--fui-code-highlight-bg, $fui-code-highlight-bg);
+      margin: 0 calc(-1 * var(--fui-space-4, $fui-space-4));
+      padding: 0 var(--fui-space-4, $fui-space-4);
+      border-left: 2px solid var(--fui-color-info-text, $fui-color-info-text);
+    }
+  }
+
+  // Line numbers
+  :global(.line-number) {
+    display: inline-block;
+    width: 2.5em;
+    padding-right: 1em;
+    text-align: right;
+    color: var(--fui-code-text-muted, $fui-code-text-muted);
+    user-select: none;
+    opacity: 0.6;
+  }
+
+  // Custom selection highlight for better visibility
+  *::selection {
+    background: var(--fui-code-selection-bg, $fui-code-selection-bg);
+    color: var(--fui-code-tab-text-active, $fui-code-tab-text-active);
+  }
+
+  // Custom scrollbar for code blocks
+  :global(.shiki)::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  :global(.shiki)::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  :global(.shiki)::-webkit-scrollbar-thumb {
+    background: var(--fui-code-scrollbar-thumb, $fui-code-scrollbar-thumb);
+    border-radius: var(--fui-radius-full, $fui-radius-full);
+
+    &:hover {
+      background: var(--fui-code-scrollbar-thumb-hover, $fui-code-scrollbar-thumb-hover);
+    }
+  }
+}
+
+// Line numbers variant
+.withLineNumbers {
+  .codeContainer :global(.shiki) {
+    padding-left: var(--fui-space-2, $fui-space-2);
+  }
+}
+
+// Diff styling
+.withDiff {
+  :global(.diff-marker) {
+    display: inline-block;
+    width: 1.5em;
+    text-align: center;
+    user-select: none;
+    color: var(--fui-code-text-muted, $fui-code-text-muted);
+  }
+
+  :global(.diff-added) {
+    background-color: var(--fui-color-success-bg, $fui-color-success-bg);
+    margin: 0 calc(-1 * var(--fui-space-4, $fui-space-4));
+    padding: 0 var(--fui-space-4, $fui-space-4);
+
+    :global(.diff-marker) {
+      color: var(--fui-color-success-text, $fui-color-success-text);
+    }
+  }
+
+  :global(.diff-removed) {
+    background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
+    margin: 0 calc(-1 * var(--fui-space-4, $fui-space-4));
+    padding: 0 var(--fui-space-4, $fui-space-4);
+
+    :global(.diff-marker) {
+      color: var(--fui-color-danger-text, $fui-color-danger-text);
+    }
+  }
+}
+
+// Compact variant — reduced padding
+.compact {
+  .wrapper {
+    border-radius: var(--fui-radius-md, $fui-radius-md);
+  }
+
+  .codeContainer :global(.shiki),
+  .loading pre {
+    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+    line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  }
+
+  .codeContainer :global(.line) {
+    min-height: calc(var(--fui-line-height-tight, #{$fui-line-height-tight}) * 1em);
+  }
+
+  .withCopyOverlay {
+    .codeContainer :global(.shiki),
+    .loading pre {
+      padding-right: calc(
+        var(--fui-space-3, #{$fui-space-3}) + var(--fui-target-size-min, #{$fui-target-size-min}) +
+          var(--fui-space-3, #{$fui-space-3})
+      );
+    }
+  }
+}
+
+// Word wrap
+.wordWrap {
+  .codeContainer :global(.shiki),
+  .loading pre {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  :global(.line) {
+    display: block;
+    width: auto;
+  }
+}
+
+// Caption below code block
+.caption {
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  margin-top: var(--fui-space-2, $fui-space-2);
+}
+
+// Collapse/expand button with gradient fade
+.collapseButton {
+  @include button-reset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fui-space-1, $fui-space-1);
+  width: 100%;
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  color: var(--fui-code-text-muted, $fui-code-text-muted);
+  background: linear-gradient(to bottom, transparent, var(--fui-code-bg, $fui-code-bg) 40%);
+  border-top: none;
+  cursor: pointer;
+  transition: color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    color: var(--fui-code-tab-text-active, $fui-code-tab-text-active);
+  }
+
+  &:focus-visible {
+    // Inset outline (not the box-shadow focus-ring mixin) because the wrapper
+    // clips overflow — a box-shadow ring would be hidden.
+    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
+      var(--fui-focus-ring-color, $fui-focus-ring-color);
+    outline-offset: calc(-1 * var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}));
+  }
+}
+
+// Responsive
+@media (max-width: $fui-breakpoint-md) {
+  .codeContainer :global(.shiki) {
+    font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+    padding: var(--fui-space-3, $fui-space-3);
+  }
+}
+
+// ============================================
+// Tabbed Code Block
+// ============================================
+
+.tabbedPanel {
+  margin-top: 0;
+}

package/src/components/CodeBlock/CodeBlock.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock } from '.';
+
+/**
+ * Syntax-highlighted code display with copy, theming, diff view, line
+ * numbers, and collapsible sections. The required `code` prop holds the
+ * content; `language` and `theme` control highlighting.
+ */
+const meta = {
+  title: 'Display/CodeBlock',
+  component: CodeBlock,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Syntax-highlighted code display with copy functionality.',
+      },
+    },
+  },
+  argTypes: {
+    language: {
+      control: 'select',
+      options: [
+        'tsx',
+        'typescript',
+        'ts',
+        'javascript',
+        'js',
+        'jsx',
+        'bash',
+        'shell',
+        'css',
+        'scss',
+        'sass',
+        'json',
+        'html',
+        'xml',
+        'markdown',
+        'md',
+        'yaml',
+        'yml',
+        'python',
+        'py',
+        'ruby',
+        'go',
+        'rust',
+        'java',
+        'kotlin',
+        'swift',
+        'c',
+        'cpp',
+        'csharp',
+        'php',
+        'sql',
+        'graphql',
+        'diff',
+        'plaintext',
+        'text',
+      ],
+      description: 'Programming language for syntax highlighting',
+    },
+    theme: {
+      control: 'select',
+      options: [
+        'synthwave-84',
+        'github-dark',
+        'github-light',
+        'one-dark-pro',
+        'dracula',
+        'nord',
+        'monokai',
+        'vitesse-dark',
+        'vitesse-light',
+        'min-dark',
+        'min-light',
+      ],
+      description: 'Syntax highlighting theme',
+    },
+    copyPlacement: {
+      control: 'select',
+      options: ['auto', 'header', 'overlay'],
+      description: 'Where to place the copy button',
+    },
+    showCopy: { control: 'boolean' },
+    showLineNumbers: { control: 'boolean' },
+    wordWrap: { control: 'boolean' },
+    collapsible: { control: 'boolean' },
+    defaultCollapsed: { control: 'boolean' },
+    compact: { control: 'boolean' },
+    persistentCopy: { control: 'boolean' },
+  },
+  args: {
+    code: "import { Button } from '@usefragments/ui';\n\nfunction App() {\n  return <Button>Click me</Button>;\n}",
+    language: 'tsx',
+    theme: 'one-dark-pro',
+  },
+} satisfies Meta<typeof CodeBlock>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithFilename: Story = {
+  args: {
+    filename: 'app.tsx',
+    code: "import { Button, Card } from '@usefragments/ui';\n\nfunction App() {\n  return <Button>Get Started</Button>;\n}",
+  },
+};
+
+export const WithLineNumbers: Story = {
+  args: {
+    showLineNumbers: true,
+    language: 'typescript',
+    code: 'const greeting = "Hello";\nconst name = "World";\nconsole.log(`${greeting}, ${name}!`);',
+  },
+};
+
+export const DiffView: Story = {
+  args: {
+    language: 'tsx',
+    showLineNumbers: true,
+    removedLines: [2],
+    addedLines: [3],
+    code: 'function Counter() {\n  const inc = () => setCount(c => c + 1);\n  const inc = useCallback(() => setCount(c => c + 1), []);\n  return <button onClick={inc}>Count</button>;\n}',
+  },
+};
+
+export const Bash: Story = {
+  args: {
+    language: 'bash',
+    title: 'Installation',
+    code: 'npm install @usefragments/ui',
+  },
+};
+
+export const Collapsible: Story = {
+  args: {
+    language: 'tsx',
+    showLineNumbers: true,
+    collapsible: true,
+    defaultCollapsed: true,
+    collapsedLines: 4,
+    code: 'export function UserProfile({ userId }: { userId: string }) {\n  const [user, setUser] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error</div>;\n  return <h1>{user.name}</h1>;\n}',
+  },
+};