@semantic-components/code 0.63.0 → 0.64.0

package/src/lib/components/code-viewer/README.md

@@ -1,178 +0,0 @@
-# Code Viewer Components
-
-A read-only code display component with syntax highlighting powered by [Shiki](https://shiki.style/) and shadcn/ui styling. Automatically follows the app's light/dark theme.
-
-## Import
-
-```typescript
-import { ScCodeViewer, ScCodeViewerHeader, ScCodeViewerLabel, ScCodeViewerContent, ScCodeViewerLanguage } from '@semantic-components/ui-lab';
-```
-
-## Architecture
-
-The component uses Shiki's dual-theme feature (`github-light` + `github-dark`) with `defaultColor: false` to generate CSS variable-based output. The CSS switches between `--shiki-light` and `--shiki-dark` variables based on the `.dark` class on the document root.
-
-```
-ScCodeViewer (Root - div[sc-code-viewer])
-├── ScCodeViewerHeader (Header - div[sc-code-viewer-header])
-│   ├── ScCodeViewerLabel (Label - span[sc-code-viewer-label])
-│   └── ScCopyButton (Copy button)
-└── ScCodeViewerContent (Content - div[sc-code-viewer-content])
-```
-
-## Components
-
-| Component             | Selector                      | Description                      |
-| --------------------- | ----------------------------- | -------------------------------- |
-| `ScCodeViewer`        | `div[sc-code-viewer]`         | Root container with border       |
-| `ScCodeViewerHeader`  | `div[sc-code-viewer-header]`  | Header bar with border           |
-| `ScCodeViewerLabel`   | `span[sc-code-viewer-label]`  | Label for filename or language   |
-| `ScCodeViewerContent` | `div[sc-code-viewer-content]` | Content with syntax highlighting |
-
-## Inputs
-
-### ScCodeViewer (Root)
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-The root container with border and rounded corners.
-
-### ScCodeViewerHeader
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-Header bar with bottom border for filename/language label and copy button.
-
-### ScCodeViewerLabel
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-Label for displaying filename or language with muted foreground styling.
-
-### ScCodeViewerContent
-
-| Input             | Type                   | Default       | Description                      |
-| ----------------- | ---------------------- | ------------- | -------------------------------- |
-| `code`            | `string`               | **required**  | The source code to display       |
-| `language`        | `ScCodeViewerLanguage` | `'plaintext'` | Language for syntax highlighting |
-| `showLineNumbers` | `boolean`              | `false`       | Whether to show line numbers     |
-| `class`           | `string`               | `''`          | Additional CSS classes           |
-
-The content component with Shiki syntax highlighting.
-
-## Supported Languages
-
-`angular-ts` | `typescript` | `javascript` | `html` | `css` | `json` | `python` | `bash` | `shell` | `markdown` | `yaml` | `sql` | `go` | `rust` | `java` | `plaintext`
-
-## Usage
-
-### Basic Usage
-
-```html
-<div sc-code-viewer>
-  <div sc-code-viewer-header>
-    <span sc-code-viewer-label>TypeScript</span>
-    <button sc-copy-button [value]="code"></button>
-  </div>
-  <div sc-code-viewer-content [code]="code" language="typescript"></div>
-</div>
-```
-
-### With Filename
-
-```html
-<div sc-code-viewer>
-  <div sc-code-viewer-header>
-    <span sc-code-viewer-label>app.component.ts</span>
-    <button sc-copy-button [value]="code"></button>
-  </div>
-  <div sc-code-viewer-content [code]="code" language="angular-ts"></div>
-</div>
-```
-
-### With Line Numbers
-
-```html
-<div sc-code-viewer>
-  <div sc-code-viewer-header>
-    <span sc-code-viewer-label>{{ filename }}</span>
-    <button sc-copy-button [value]="code"></button>
-  </div>
-  <div sc-code-viewer-content [code]="code" language="typescript" [showLineNumbers]="true"></div>
-</div>
-```
-
-### Without Header
-
-```html
-<div sc-code-viewer>
-  <div sc-code-viewer-content [code]="code" language="json"></div>
-</div>
-```
-
-### With Max Height
-
-```html
-<div sc-code-viewer>
-  <div sc-code-viewer-header>
-    <span sc-code-viewer-label>{{ language }}</span>
-    <button sc-copy-button [value]="code"></button>
-  </div>
-  <div sc-code-viewer-content [code]="longCode" language="typescript" maxHeight="300px"></div>
-</div>
-```
-
-### Custom Header Content
-
-```html
-<div sc-code-viewer>
-  <div sc-code-viewer-header>
-    <div class="flex items-center gap-2">
-      <svg class="size-4"><!-- icon --></svg>
-      <span sc-code-viewer-label>{{ filename }}</span>
-      <span class="text-xs text-muted-foreground">({{ lines }} lines)</span>
-    </div>
-    <div class="flex gap-2">
-      <button>Download</button>
-      <button sc-copy-button [value]="code"></button>
-    </div>
-  </div>
-  <div sc-code-viewer-content [code]="code" [language]="language"></div>
-</div>
-```
-
-## Theming
-
-The component automatically follows the app's theme:
-
-- **Light mode**: Uses `github-light` Shiki theme
-- **Dark mode**: Uses `github-dark` Shiki theme (activated by `.dark` class on `<html>`)
-
-No manual theme configuration is needed. The component renders both theme colors as CSS variables and switches between them with CSS.
-
-## Features
-
-- **Composable Architecture**: Build custom layouts with separate header and content components
-- **Syntax Highlighting**: Powered by Shiki with 30+ languages supported
-- **Automatic Theming**: Follows app's light/dark mode automatically
-- **Line Numbers**: Optional line number display
-- **Copy Button**: Built-in copy-to-clipboard functionality with ScCopyButton
-- **Customizable**: All components accept custom classes
-- **Accessible**: Proper semantic HTML and ARIA attributes
-
-## Styling
-
-The components use Tailwind CSS with shadcn/ui design tokens:
-
-- **Container** (`ScCodeViewer`): `rounded-lg border border-border overflow-hidden`
-- **Header** (`ScCodeViewerHeader`): `flex items-center justify-between border-b border-border px-4 py-2`
-- **Label** (`ScCodeViewerLabel`): `text-xs font-medium text-muted-foreground`
-- **Content** (`ScCodeViewerContent`): `overflow-auto` with configurable max-height
-- **Code font**: System monospace stack (`ui-monospace, SFMono-Regular, ...`)
-- **Line numbers**: Muted foreground at 50% opacity, non-selectable

package/src/lib/components/code-viewer/code-viewer-content.ts

@@ -1,96 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { codeToHtml } from 'shiki';
-import { cn } from '@semantic-components/ui';
-
-export type ScCodeViewerLanguage =
-  | 'angular-ts'
-  | 'typescript'
-  | 'javascript'
-  | 'html'
-  | 'css'
-  | 'json'
-  | 'python'
-  | 'bash'
-  | 'shell'
-  | 'markdown'
-  | 'yaml'
-  | 'sql'
-  | 'go'
-  | 'rust'
-  | 'java'
-  | 'plaintext';
-
-@Component({
-  selector: 'div[sc-code-viewer-content]',
-  template: `
-    @if (highlightedHtml()) {
-      <div [class]="contentClass()" [innerHTML]="highlightedHtml()"></div>
-    } @else {
-      <pre
-        class="m-0 p-4 text-sm leading-relaxed font-mono text-foreground"
-      ><code>{{ code() }}</code></pre>
-    }
-  `,
-  host: {
-    'data-slot': 'code-viewer-content',
-    '[class]': 'wrapperClass()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCodeViewerContent {
-  readonly code = input.required<string>();
-  readonly language = input<ScCodeViewerLanguage>('plaintext');
-  readonly showLineNumbers = input(false);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  private readonly sanitizer = inject(DomSanitizer);
-
-  protected readonly highlightedHtml = signal<SafeHtml | null>(null);
-
-  protected readonly wrapperClass = computed(() =>
-    cn('overflow-auto', this.classInput()),
-  );
-
-  protected readonly contentClass = computed(() =>
-    cn(this.showLineNumbers() && 'shiki-line-numbers'),
-  );
-
-  constructor() {
-    effect(() => {
-      const code = this.code();
-      const lang = this.language();
-
-      this.highlight(code, lang);
-    });
-  }
-
-  private async highlight(
-    code: string,
-    lang: ScCodeViewerLanguage,
-  ): Promise<void> {
-    try {
-      const html = await codeToHtml(code, {
-        lang,
-        themes: {
-          light: 'github-light',
-          dark: 'github-dark',
-        },
-        defaultColor: false,
-      });
-      this.highlightedHtml.set(this.sanitizer.bypassSecurityTrustHtml(html));
-    } catch {
-      this.highlightedHtml.set(null);
-    }
-  }
-}

package/src/lib/components/code-viewer/code-viewer-header.ts

@@ -1,31 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-code-viewer-header]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'code-viewer-header',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCodeViewerHeader {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'flex items-center justify-between border-b border-border px-4 py-2',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/code-viewer/code-viewer-label.ts

@@ -1,28 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'span[sc-code-viewer-label]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'code-viewer-label',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCodeViewerLabel {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('text-xs font-medium text-muted-foreground', this.classInput()),
-  );
-}

package/src/lib/components/code-viewer/code-viewer.ts

@@ -1,28 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-code-viewer]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'code-viewer',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCodeViewer {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('overflow-hidden rounded-lg border border-border', this.classInput()),
-  );
-}

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "isolatedModules": true,
-    "target": "es2022",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "emitDecoratorMetadata": false,
-    "module": "preserve"
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {}
-}