valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/code-display/code-display.stories.ts

@@ -0,0 +1,402 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { CodeDisplayComponent } from './code-display.component';
+import { CodeDisplayMetadata, CodeTab } from './types';
+
+const createCodeDisplayProps = (overrides: Partial<CodeDisplayMetadata> = {}): CodeDisplayMetadata => ({
+  code: 'console.log("Hello, World!");',
+  language: 'javascript',
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createCodeDisplayProps();
+
+const typescriptProps = createCodeDisplayProps({
+  code: `interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: 'admin' | 'user';
+}
+
+function getUser(id: number): Promise<User> {
+  return fetch(\`/api/users/\${id}\`)
+    .then(response => response.json());
+}`,
+  language: 'typescript',
+});
+
+const htmlProps = createCodeDisplayProps({
+  code: `<div class="container">
+  <header>
+    <h1>Welcome</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+    </nav>
+  </header>
+  <main>
+    <p>Hello, World!</p>
+  </main>
+</div>`,
+  language: 'html',
+});
+
+const cssProps = createCodeDisplayProps({
+  code: `.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 24px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+}`,
+  language: 'css',
+});
+
+const pythonProps = createCodeDisplayProps({
+  code: `def fibonacci(n: int) -> list[int]:
+    """Generate Fibonacci sequence up to n numbers."""
+    if n <= 0:
+        return []
+
+    sequence = [0, 1]
+    while len(sequence) < n:
+        sequence.append(sequence[-1] + sequence[-2])
+
+    return sequence[:n]
+
+# Example usage
+result = fibonacci(10)
+print(f"First 10 Fibonacci numbers: {result}")`,
+  language: 'python',
+});
+
+const jsonProps = createCodeDisplayProps({
+  code: `{
+  "name": "valtech-components",
+  "version": "1.0.0",
+  "description": "Angular component library",
+  "dependencies": {
+    "@angular/core": "^17.0.0",
+    "@ionic/angular": "^7.0.0"
+  },
+  "scripts": {
+    "build": "ng build",
+    "test": "ng test"
+  }
+}`,
+  language: 'json',
+});
+
+const bashProps = createCodeDisplayProps({
+  code: `#!/bin/bash
+
+# Deploy script
+echo "Starting deployment..."
+
+# Build the project
+npm run build
+
+# Run tests
+npm test
+
+# Deploy to server
+rsync -avz ./dist/ user@server:/var/www/app/
+
+echo "Deployment complete!"`,
+  language: 'bash',
+});
+
+const sqlProps = createCodeDisplayProps({
+  code: `SELECT
+  u.id,
+  u.name,
+  u.email,
+  COUNT(o.id) as order_count,
+  SUM(o.total) as total_spent
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.created_at >= '2024-01-01'
+GROUP BY u.id, u.name, u.email
+HAVING COUNT(o.id) > 0
+ORDER BY total_spent DESC
+LIMIT 10;`,
+  language: 'sql',
+});
+
+const withTabsProps: CodeDisplayMetadata = {
+  tabs: [
+    {
+      label: 'component.ts',
+      language: 'typescript',
+      code: `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hello',
+  templateUrl: './hello.component.html',
+  styleUrls: ['./hello.component.scss']
+})
+export class HelloComponent {
+  name = 'World';
+}`,
+    },
+    {
+      label: 'component.html',
+      language: 'html',
+      code: `<div class="hello-container">
+  <h1>Hello, {{ name }}!</h1>
+  <button (click)="greet()">Greet</button>
+</div>`,
+    },
+    {
+      label: 'component.scss',
+      language: 'scss',
+      code: `.hello-container {
+  padding: 20px;
+  text-align: center;
+
+  h1 {
+    color: var(--ion-color-primary);
+    margin-bottom: 16px;
+  }
+}`,
+    },
+  ],
+};
+
+const reactExampleTabs: CodeDisplayMetadata = {
+  tabs: [
+    {
+      label: 'App.tsx',
+      language: 'typescript',
+      code: `import React, { useState } from 'react';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="app">
+      <h1>Counter: {count}</h1>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}
+
+export default App;`,
+    },
+    {
+      label: 'App.css',
+      language: 'css',
+      code: `.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px;
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 16px;
+  cursor: pointer;
+}`,
+    },
+  ],
+};
+
+const meta: Meta<CodeDisplayComponent> = {
+  title: 'Molecules/CodeDisplay',
+  component: CodeDisplayComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, CodeDisplayComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Code display configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'CodeDisplayMetadata',
+          detail: `{
+  code?: string;
+  language?: string;
+  tabs?: CodeTab[];
+}
+
+CodeTab: {
+  label: string;
+  code: string;
+  language: string;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-code-display
+
+A code display component with syntax highlighting and optional tabs.
+
+### Features
+
+- **Syntax Highlighting**: Support for multiple languages
+- **Tabs**: Display multiple code files in tabs
+- **Copy Button**: One-click code copying
+- **Line Numbers**: Optional line numbering
+- **Dark Theme**: Optimized for readability
+
+### Usage
+
+\`\`\`html
+<!-- Single code block -->
+<val-code-display
+  [props]="{
+    code: 'console.log(\"Hello\");',
+    language: 'javascript'
+  }"
+></val-code-display>
+
+<!-- With tabs -->
+<val-code-display
+  [props]="{
+    tabs: [
+      { label: 'index.ts', code: '...', language: 'typescript' },
+      { label: 'styles.css', code: '...', language: 'css' }
+    ]
+  }"
+></val-code-display>
+\`\`\`
+
+### Supported Languages
+
+JavaScript, TypeScript, HTML, CSS, SCSS, Python, JSON, Bash, SQL, and more.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CodeDisplayComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: defaultProps },
+  }),
+};
+
+export const TypeScript: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: typescriptProps },
+  }),
+};
+
+export const HTML: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: htmlProps },
+  }),
+};
+
+export const CSS: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: cssProps },
+  }),
+};
+
+export const Python: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: pythonProps },
+  }),
+};
+
+export const JSON: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: jsonProps },
+  }),
+};
+
+export const Bash: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: bashProps },
+  }),
+};
+
+export const SQL: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: sqlProps },
+  }),
+};
+
+export const WithTabs: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: withTabsProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Code display with multiple tabs for related files.',
+      },
+    },
+  },
+};
+
+export const ReactExample: Story = {
+  render: () => ({
+    template: `<div style="max-width: 700px;"><val-code-display [props]="codeProps"></val-code-display></div>`,
+    props: { codeProps: reactExampleTabs },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 700px;">
+        <h3 style="margin: 0; font-family: system-ui;">Code Display Examples</h3>
+
+        <div>
+          <h4 style="margin: 0 0 8px; font-family: system-ui;">TypeScript</h4>
+          <val-code-display [props]="typescript"></val-code-display>
+        </div>
+
+        <div>
+          <h4 style="margin: 0 0 8px; font-family: system-ui;">Multi-file Component</h4>
+          <val-code-display [props]="tabs"></val-code-display>
+        </div>
+      </div>
+    `,
+    props: {
+      typescript: typescriptProps,
+      tabs: withTabsProps,
+    },
+  }),
+};

package/src/lib/components/molecules/code-display/types.ts

@@ -0,0 +1,11 @@
+export type CodeTab = {
+  label: string;
+  code: string;
+  language: string;
+};
+
+export type CodeDisplayMetadata = {
+  code?: string;
+  language?: string;
+  tabs?: CodeTab[];
+};

package/src/lib/components/molecules/command-display/command-display.component.scss

@@ -0,0 +1,38 @@
+.command-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--ion-color-light, #f2f2f2);
+  border-radius: 24px;
+  padding: 12px 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.command-text {
+  flex-grow: 1;
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: var(--ion-color-dark, #333);
+  margin-right: 10px;
+}
+
+.copy-icon {
+  font-size: 1.3rem;
+  color: var(--ion-color-medium, #92949c);
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--ion-color-primary, #3880ff);
+  }
+}
+
+@media (min-width: 600px) {
+  .command-text {
+    font-size: 1.2rem;
+  }
+
+  .copy-icon {
+    font-size: 1.2rem;
+  }
+}

package/src/lib/components/molecules/command-display/command-display.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input } from '@angular/core';
+import { Clipboard } from '@capacitor/clipboard';
+import { ToastController } from '@ionic/angular';
+import { IonIcon } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { CommandDisplayMetadata } from './types';
+
+@Component({
+  selector: 'val-command-display',
+  standalone: true,
+  imports: [CommonModule, IonIcon],
+  template: `
+    <div class="command-container">
+      <div class="command-text">$ {{ props.text }}</div>
+      <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
+    </div>
+  `,
+  styleUrls: ['./command-display.component.scss'],
+})
+export class CommandDisplayComponent {
+  private toast = inject(ToastController);
+  private i18n = inject(I18nService);
+
+  @Input() props: CommandDisplayMetadata;
+
+  async copyCommand() {
+    if (this.props.text) {
+      await Clipboard.write({
+        string: this.props.text,
+      });
+      this.presentToast(this.i18n.t('copiedToClipboard'));
+    }
+  }
+
+  async presentToast(message: string) {
+    const toast = await this.toast.create({
+      message: message,
+      duration: 2000,
+      position: 'bottom',
+      color: 'dark',
+    });
+    toast.present();
+  }
+}

package/src/lib/components/molecules/command-display/command-display.stories.ts

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { CommandDisplayComponent } from './command-display.component';
+import { CommandDisplayMetadata } from './types';
+
+const createCommandDisplayProps = (overrides: Partial<CommandDisplayMetadata> = {}) => ({
+  text: 'npm install @valtech/components',
+  ...overrides,
+} as CommandDisplayMetadata);
+
+const defaultProps = createCommandDisplayProps();
+
+const npmInstallProps = createCommandDisplayProps({
+  text: 'npm install @valtech/components --save',
+});
+
+const gitCloneProps = createCommandDisplayProps({
+  text: 'git clone https://github.com/valtech/valtech-components.git',
+});
+
+const dockerRunProps = createCommandDisplayProps({
+  text: 'docker run -d -p 8080:80 valtech/app:latest',
+});
+
+const curlProps = createCommandDisplayProps({
+  text: 'curl -X POST https://api.example.com/users -H "Content-Type: application/json" -d \'{"name":"John"}\'',
+});
+
+const showcaseDefaultProps = createCommandDisplayProps({
+  text: 'npx create-valtech-app my-project',
+});
+
+const showcaseInstallProps = createCommandDisplayProps({
+  text: 'npm install',
+});
+
+const showcaseRunProps = createCommandDisplayProps({
+  text: 'npm run start',
+});
+
+const meta: Meta<CommandDisplayComponent> = {
+  title: 'Molecules/CommandDisplay',
+  component: CommandDisplayComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the command display',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CommandDisplayComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `<val-command-display [props]="props"></val-command-display>`,
+  }),
+};
+
+export const NpmInstall: Story = {
+  render: () => ({
+    props: { props: npmInstallProps },
+    template: `<val-command-display [props]="props"></val-command-display>`,
+  }),
+};
+
+export const GitClone: Story = {
+  render: () => ({
+    props: { props: gitCloneProps },
+    template: `<val-command-display [props]="props"></val-command-display>`,
+  }),
+};
+
+export const DockerRun: Story = {
+  render: () => ({
+    props: { props: dockerRunProps },
+    template: `<val-command-display [props]="props"></val-command-display>`,
+  }),
+};
+
+export const LongCommand: Story = {
+  render: () => ({
+    props: { props: curlProps },
+    template: `<val-command-display [props]="props"></val-command-display>`,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      defaultProps: showcaseDefaultProps,
+      installProps: showcaseInstallProps,
+      runProps: showcaseRunProps,
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 600px;">
+        <h3>Quick Start Commands</h3>
+        <p style="color: var(--ion-color-medium);">1. Create a new project:</p>
+        <val-command-display [props]="defaultProps"></val-command-display>
+
+        <p style="color: var(--ion-color-medium);">2. Install dependencies:</p>
+        <val-command-display [props]="installProps"></val-command-display>
+
+        <p style="color: var(--ion-color-medium);">3. Start the development server:</p>
+        <val-command-display [props]="runProps"></val-command-display>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/command-display/types.ts

@@ -0,0 +1,3 @@
+export type CommandDisplayMetadata = {
+  text: string;
+};