valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/docs-code-example/docs-code-example.component.ts

@@ -0,0 +1,535 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, signal, TemplateRef, ContentChild, ViewEncapsulation } from '@angular/core';
+import { IonIcon, IonButton } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { copyOutline, checkmarkOutline, openOutline } from 'ionicons/icons';
+import { DocsCodeExampleMetadata, DocsCodeTab } from './types';
+
+// Prism.js imports (same pattern as code-display and plain-code-box)
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-markup';
+
+addIcons({ copyOutline, checkmarkOutline, openOutline });
+
+/**
+ * val-docs-code-example
+ *
+ * A code example component with tabs, preview, and copy functionality.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-code-example
+ *   [props]="{
+ *     title: 'Basic Button',
+ *     tabs: [
+ *       { label: 'HTML', language: 'html', code: '<val-button>Click me</val-button>' },
+ *       { label: 'TypeScript', language: 'typescript', code: 'import { ButtonComponent } from ...' }
+ *     ]
+ *   }"
+ * >
+ *   <ng-template #preview>
+ *     <val-button [props]="{ label: 'Click me' }"></val-button>
+ *   </ng-template>
+ * </val-docs-code-example>
+ * ```
+ */
+@Component({
+  selector: 'val-docs-code-example',
+  standalone: true,
+  imports: [CommonModule, IonIcon, IonButton],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="docs-code-example" [class]="props.cssClass">
+      <!-- Header -->
+      @if (props.title || props.description || props.externalLink) {
+        <div class="docs-code-example__header">
+          @if (props.title) {
+            <h4 class="docs-code-example__title">{{ props.title }}</h4>
+          }
+          @if (props.description) {
+            <p class="docs-code-example__description">{{ props.description }}</p>
+          }
+          @if (props.externalLink) {
+            <a
+              class="docs-code-example__external-link"
+              [href]="props.externalLink.url"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ props.externalLink.label || 'Open in StackBlitz' }}
+              <ion-icon name="open-outline"></ion-icon>
+            </a>
+          }
+        </div>
+      }
+
+      <!-- Preview -->
+      @if (previewTpl) {
+        <div class="docs-code-example__preview">
+          <ng-container *ngTemplateOutlet="previewTpl"></ng-container>
+        </div>
+      }
+
+      <!-- Tabs -->
+      @if (props.tabs?.length) {
+        <div class="docs-code-example__tabs">
+          <div class="docs-code-example__tab-list" role="tablist">
+            @for (tab of props.tabs; track tab.label; let i = $index) {
+              <button
+                class="docs-code-example__tab"
+                [class.docs-code-example__tab--active]="activeTab() === i"
+                (click)="activeTab.set(i)"
+                role="tab"
+                [attr.aria-selected]="activeTab() === i"
+              >
+                {{ tab.label }}
+              </button>
+            }
+          </div>
+
+          <!-- Code Panel -->
+          <div class="docs-code-example__code-panel">
+            <div class="docs-code-example__code-header">
+              @if (props.showCopyButton !== false) {
+                <ion-button
+                  fill="clear"
+                  size="small"
+                  class="docs-code-example__copy-btn"
+                  [attr.aria-label]="copied() ? 'Code copied' : 'Copy code'"
+                  (click)="copyCode()"
+                >
+                  <ion-icon
+                    slot="icon-only"
+                    [name]="copied() ? 'checkmark-outline' : 'copy-outline'"
+                  ></ion-icon>
+                </ion-button>
+              }
+            </div>
+            <pre
+              class="docs-code-example__pre"
+              [class.docs-code-example__pre--line-numbers]="props.showLineNumbers"
+            ><code
+              class="docs-code-example__code"
+              [class]="'language-' + currentTab().language"
+              [innerHTML]="highlightedCode()"
+            ></code></pre>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .docs-code-example {
+      margin: 1.5rem 0;
+      border: 1px solid #f2f6f7;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+      background: #ffffff;
+    }
+
+    .docs-code-example__header {
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid #f2f6f7;
+      background: #ffffff;
+    }
+
+    .docs-code-example__title {
+      font-size: 1rem;
+      font-weight: 600;
+      margin: 0 0 0.25rem 0;
+      color: var(--ion-text-color, #1a1a1a);
+    }
+
+    .docs-code-example__description {
+      font-size: 0.875rem;
+      color: var(--ion-color-medium, #666);
+      margin: 0;
+    }
+
+    .docs-code-example__external-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      margin-top: 0.5rem;
+      font-size: 0.8125rem;
+      color: #555;
+      text-decoration: none;
+    }
+
+    .docs-code-example__external-link:hover {
+      color: #1a1a1a;
+      text-decoration: underline;
+    }
+
+    .docs-code-example__external-link ion-icon {
+      font-size: 0.875rem;
+    }
+
+    .docs-code-example__preview {
+      padding: 1.5rem;
+      background: #ffffff;
+      border-bottom: 1px solid #f2f6f7;
+    }
+
+    .docs-code-example__tabs {
+      background: #f6f9fa;
+    }
+
+    .docs-code-example__tab-list {
+      display: flex;
+      gap: 2px;
+      border-bottom: 1px solid #f2f6f7;
+      overflow-x: auto;
+      scrollbar-width: thin;
+      font-size: 12px;
+    }
+
+    .docs-code-example__tab {
+      padding: 10px 18px 8px 18px;
+      font-family: 'Roboto Mono', 'SF Mono', Monaco, monospace;
+      font-size: 0.95em;
+      font-weight: 500;
+      color: #899396;
+      background: transparent;
+      border: 1px solid transparent;
+      border-bottom: none;
+      border-radius: 8px 8px 0 0;
+      cursor: pointer;
+      transition: background 0.2s, color 0.2s;
+      margin-bottom: -1px;
+      white-space: nowrap;
+    }
+
+    .docs-code-example__tab:hover {
+      background: #e8eef2;
+    }
+
+    .docs-code-example__tab--active {
+      background: #ffffff;
+      color: #19422d;
+      border: 1px solid #f2f6f7;
+      border-bottom: 1px solid #ffffff;
+      font-weight: 600;
+      z-index: 2;
+    }
+
+    .docs-code-example__code-panel {
+      position: relative;
+      background: #ffffff;
+    }
+
+    .docs-code-example__code-header {
+      position: sticky;
+      top: 10px;
+      float: right;
+      z-index: 10;
+      height: 0;
+      margin-right: 15px;
+    }
+
+    .docs-code-example__copy-btn {
+      --padding-start: 2px;
+      --padding-end: 2px;
+      min-width: 28px;
+      min-height: 28px;
+      height: 28px;
+      width: 28px;
+      --color: var(--ion-color-primary);
+      --background: rgba(255, 255, 255, 0.7);
+      border-radius: 6px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .docs-code-example__code-panel:hover .docs-code-example__copy-btn {
+      opacity: 1;
+    }
+
+    .docs-code-example__copy-btn:hover {
+      --background: rgba(255, 255, 255, 0.9);
+    }
+
+    .docs-code-example__pre {
+      margin: 0;
+      padding: 0;
+      overflow-x: auto;
+      overflow-y: auto;
+      max-height: 30rem;
+      min-height: 3rem;
+      background: #ffffff;
+      white-space: pre;
+      word-break: normal;
+    }
+
+    .docs-code-example__pre--line-numbers {
+      padding-left: 3rem;
+      counter-reset: line;
+    }
+
+    .docs-code-example__code {
+      display: block;
+      font-family: 'Roboto Mono', 'SF Mono', Monaco, 'Courier New', monospace;
+      font-size: 0.75em;
+      line-height: 1.5;
+      color: #24292f;
+      white-space: inherit;
+      word-break: normal;
+      tab-size: 2;
+    }
+
+    /* Prism.js syntax highlighting - Light theme (GitHub style) */
+    .docs-code-example__code .token {
+      text-decoration: none !important;
+    }
+
+    .docs-code-example__code .token.comment,
+    .docs-code-example__code .token.prolog,
+    .docs-code-example__code .token.doctype,
+    .docs-code-example__code .token.cdata {
+      color: #6a737d;
+    }
+
+    .docs-code-example__code .token.punctuation {
+      color: #24292f;
+    }
+
+    .docs-code-example__code .token.property,
+    .docs-code-example__code .token.tag,
+    .docs-code-example__code .token.boolean,
+    .docs-code-example__code .token.number,
+    .docs-code-example__code .token.constant,
+    .docs-code-example__code .token.symbol,
+    .docs-code-example__code .token.deleted {
+      color: #005cc5;
+    }
+
+    .docs-code-example__code .token.selector,
+    .docs-code-example__code .token.attr-name,
+    .docs-code-example__code .token.string,
+    .docs-code-example__code .token.char,
+    .docs-code-example__code .token.builtin,
+    .docs-code-example__code .token.inserted {
+      color: #22863a;
+    }
+
+    .docs-code-example__code .token.operator,
+    .docs-code-example__code .token.entity,
+    .docs-code-example__code .token.url {
+      color: #24292f;
+    }
+
+    .docs-code-example__code .token.atrule,
+    .docs-code-example__code .token.attr-value,
+    .docs-code-example__code .token.keyword {
+      color: #d73a49;
+    }
+
+    .docs-code-example__code .token.function,
+    .docs-code-example__code .token.class-name {
+      color: #6f42c1;
+    }
+
+    .docs-code-example__code .token.regex,
+    .docs-code-example__code .token.important,
+    .docs-code-example__code .token.variable {
+      color: #e36209;
+    }
+
+    /* Responsive */
+    @media (max-width: 600px) {
+      .docs-code-example {
+        border-radius: 8px;
+      }
+      .docs-code-example__tab-list {
+        font-size: 11px;
+      }
+      .docs-code-example__pre {
+        max-height: 20rem;
+      }
+      .docs-code-example__code {
+        font-size: 0.7em;
+      }
+    }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      .docs-code-example {
+        background: #21252b;
+        border-color: #3b4048;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
+      }
+
+      .docs-code-example__header {
+        background: #21252b;
+        border-color: #3b4048;
+      }
+
+      .docs-code-example__title {
+        color: #c9d1d9;
+      }
+
+      .docs-code-example__preview {
+        background: #161b22;
+        border-color: #3b4048;
+      }
+
+      .docs-code-example__tabs {
+        background: #1a1a1a;
+      }
+
+      .docs-code-example__tab-list {
+        border-color: #3b4048;
+      }
+
+      .docs-code-example__tab {
+        color: #8b949e;
+      }
+
+      .docs-code-example__tab:hover {
+        background: #21252b;
+      }
+
+      .docs-code-example__tab--active {
+        background: #282c34;
+        color: #c9d1d9;
+        border-color: #3b4048;
+        border-bottom-color: #282c34;
+      }
+
+      .docs-code-example__code-panel {
+        background: #161b22;
+      }
+
+      .docs-code-example__pre {
+        background: #161b22;
+      }
+
+      .docs-code-example__code {
+        color: #c9d1d9;
+      }
+
+      .docs-code-example__copy-btn {
+        --background: rgba(0, 0, 0, 0.4);
+      }
+
+      .docs-code-example__copy-btn:hover {
+        --background: rgba(0, 0, 0, 0.6);
+      }
+
+      /* Dark mode syntax highlighting */
+      .docs-code-example__code .token.comment,
+      .docs-code-example__code .token.prolog,
+      .docs-code-example__code .token.doctype,
+      .docs-code-example__code .token.cdata {
+        color: #8b949e;
+      }
+
+      .docs-code-example__code .token.punctuation {
+        color: #c9d1d9;
+      }
+
+      .docs-code-example__code .token.property,
+      .docs-code-example__code .token.tag,
+      .docs-code-example__code .token.boolean,
+      .docs-code-example__code .token.number,
+      .docs-code-example__code .token.constant,
+      .docs-code-example__code .token.symbol,
+      .docs-code-example__code .token.deleted {
+        color: #79c0ff;
+      }
+
+      .docs-code-example__code .token.selector,
+      .docs-code-example__code .token.attr-name,
+      .docs-code-example__code .token.string,
+      .docs-code-example__code .token.char,
+      .docs-code-example__code .token.builtin,
+      .docs-code-example__code .token.inserted {
+        color: #7ee787;
+      }
+
+      .docs-code-example__code .token.operator,
+      .docs-code-example__code .token.entity,
+      .docs-code-example__code .token.url {
+        color: #c9d1d9;
+      }
+
+      .docs-code-example__code .token.atrule,
+      .docs-code-example__code .token.attr-value,
+      .docs-code-example__code .token.keyword {
+        color: #ff7b72;
+      }
+
+      .docs-code-example__code .token.function,
+      .docs-code-example__code .token.class-name {
+        color: #d2a8ff;
+      }
+
+      .docs-code-example__code .token.regex,
+      .docs-code-example__code .token.important,
+      .docs-code-example__code .token.variable {
+        color: #ffa657;
+      }
+    }
+  `],
+})
+export class DocsCodeExampleComponent {
+  @Input() props: DocsCodeExampleMetadata = { tabs: [] };
+
+  @ContentChild('preview') previewTpl?: TemplateRef<any>;
+
+  protected activeTab = signal(0);
+  protected copied = signal(false);
+
+  protected currentTab(): DocsCodeTab {
+    return this.props.tabs[this.activeTab()] || { label: '', code: '', language: 'text' };
+  }
+
+  protected highlightedCode(): string {
+    const tab = this.currentTab();
+    const lang = this.normalizeLanguage(tab.language);
+    const grammar = Prism.languages[lang];
+
+    if (!grammar) {
+      return this.escapeHtml(tab.code);
+    }
+
+    return Prism.highlight(tab.code, grammar, lang);
+  }
+
+  async copyCode(): Promise<void> {
+    const code = this.currentTab().code;
+    try {
+      await navigator.clipboard.writeText(code);
+      this.copied.set(true);
+      setTimeout(() => this.copied.set(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy code:', err);
+    }
+  }
+
+  private normalizeLanguage(language: string): string {
+    const aliases: Record<string, string> = {
+      ts: 'typescript',
+      js: 'javascript',
+      html: 'markup',
+      xml: 'markup',
+      sh: 'bash',
+      shell: 'bash',
+    };
+    return aliases[language.toLowerCase()] || language.toLowerCase();
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

package/src/lib/components/molecules/docs-code-example/types.ts

@@ -0,0 +1,75 @@
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Configuration for the docs-code-example component.
+ */
+export interface DocsCodeExampleMetadata {
+  /**
+   * Example title.
+   */
+  title?: string;
+
+  /**
+   * Example description.
+   */
+  description?: string;
+
+  /**
+   * Code tabs to display.
+   */
+  tabs: DocsCodeTab[];
+
+  /**
+   * Template for live preview.
+   * Use ng-template with #preview reference.
+   */
+  previewTemplate?: TemplateRef<any>;
+
+  /**
+   * External link (e.g., StackBlitz, CodeSandbox).
+   */
+  externalLink?: {
+    url: string;
+    label?: string;
+  };
+
+  /**
+   * Show copy button on code blocks.
+   * @default true
+   */
+  showCopyButton?: boolean;
+
+  /**
+   * Show line numbers in code.
+   * @default false
+   */
+  showLineNumbers?: boolean;
+
+  /**
+   * Custom CSS class.
+   */
+  cssClass?: string;
+
+  /**
+   * Default active tab index.
+   * @default 0
+   */
+  defaultTab?: number;
+}
+
+export interface DocsCodeTab {
+  /**
+   * Tab label (e.g., "HTML", "TypeScript", "SCSS").
+   */
+  label: string;
+
+  /**
+   * Code content.
+   */
+  code: string;
+
+  /**
+   * Language for syntax highlighting.
+   */
+  language: 'html' | 'typescript' | 'scss' | 'css' | 'json' | 'bash' | 'text' | 'go';
+}