xertica-ui 1.8.0 → 1.8.1

package/components/assistant/code-block/CodeBlock.tsx

@@ -1,263 +1,263 @@
-import React, { useState } from 'react';
-import { Check, Copy } from 'lucide-react';
-import { Button } from '../../ui/button';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-// Elegant custom theme inspired by Xertica.ai design system
-const elegantTheme = {
-  'code[class*="language-"]': {
-    color: 'var(--foreground)',
-    fontFamily: 'var(--font-mono)',
-    fontSize: '0.875rem',
-    textAlign: 'left' as const,
-    whiteSpace: 'pre' as const,
-    wordSpacing: 'normal',
-    wordBreak: 'normal',
-    lineHeight: '1.6',
-    tabSize: 2,
-    hyphens: 'none' as const,
-  },
-  'pre[class*="language-"]': {
-    color: 'var(--foreground)',
-    fontFamily: 'var(--font-mono)',
-    fontSize: '0.875rem',
-    textAlign: 'left' as const,
-    whiteSpace: 'pre' as const,
-    wordSpacing: 'normal',
-    wordBreak: 'normal',
-    lineHeight: '1.6',
-    tabSize: 2,
-    hyphens: 'none' as const,
-    padding: '1rem',
-    margin: 0,
-    overflow: 'auto',
-    background: 'transparent',
-  },
-  'comment': {
-    color: 'var(--muted-foreground)',
-    fontStyle: 'italic',
-  },
-  'prolog': {
-    color: 'var(--muted-foreground)',
-  },
-  'doctype': {
-    color: 'var(--muted-foreground)',
-  },
-  'cdata': {
-    color: 'var(--muted-foreground)',
-  },
-  'punctuation': {
-    color: 'var(--muted-foreground)',
-  },
-  'property': {
-    color: 'var(--chart-4)',
-  },
-  'tag': {
-    color: 'var(--chart-1)',
-  },
-  'boolean': {
-    color: 'var(--chart-5)',
-  },
-  'number': {
-    color: 'var(--chart-5)',
-  },
-  'constant': {
-    color: 'var(--chart-5)',
-  },
-  'symbol': {
-    color: 'var(--chart-5)',
-  },
-  'deleted': {
-    color: 'var(--chart-5)',
-  },
-  'selector': {
-    color: 'var(--chart-2)',
-  },
-  'attr-name': {
-    color: 'var(--chart-4)',
-  },
-  'string': {
-    color: 'var(--chart-2)',
-  },
-  'char': {
-    color: 'var(--chart-2)',
-  },
-  'builtin': {
-    color: 'var(--chart-4)',
-  },
-  'inserted': {
-    color: 'var(--chart-2)',
-  },
-  'operator': {
-    color: 'var(--primary)',
-  },
-  'entity': {
-    color: 'var(--chart-4)',
-  },
-  'url': {
-    color: 'var(--chart-1)',
-  },
-  '.language-css .token.string': {
-    color: 'var(--chart-2)',
-  },
-  '.style .token.string': {
-    color: 'var(--chart-2)',
-  },
-  'atrule': {
-    color: 'var(--chart-3)',
-  },
-  'attr-value': {
-    color: 'var(--chart-2)',
-  },
-  'keyword': {
-    color: 'var(--chart-3)',
-  },
-  'function': {
-    color: 'var(--chart-1)',
-  },
-  'class-name': {
-    color: 'var(--chart-4)',
-  },
-  'regex': {
-    color: 'var(--chart-5)',
-  },
-  'important': {
-    color: 'var(--chart-5)',
-    fontWeight: 'bold',
-  },
-  'variable': {
-    color: 'var(--chart-5)',
-  },
-};
-
-/**
- * Props for the CodeBlock component.
- */
-interface CodeBlockProps {
-  /** The code string to be displayed */
-  code: string;
-  /** Programming language for syntax highlighting */
-  language?: 'typescript' | 'tsx' | 'css' | 'bash' | 'jsx';
-  /** Optional filename to display in the header */
-  filename?: string;
-  /** Whether to show line numbers */
-  showLineNumbers?: boolean;
-}
-
-/**
- * Enhanced Syntax Highlighter component with "Copy to Clipboard" functionality.
- * 
- * @description
- * Uses `react-syntax-highlighter` with a custom "Elegant" theme inspired by Xertica's 
- * design tokens. It includes a fallback mechanism for the Clipboard API and 
- * optionally displays a header with the filename and language.
- * 
- * @ai-rules
- * 1. Theme: Uses a custom `elegantTheme` that maps to system CSS variables. Avoid overriding these colors manually.
- * 2. Clipboard: The copy functionality is robust with multiple fallback methods.
- * 3. Content: Ensure `code` is passed as a raw string without pre-formatting indentation if possible.
- */
-export const CodeBlock = ({
-  code,
-  language = 'tsx',
-  filename,
-  showLineNumbers = false
-}: CodeBlockProps) => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    try {
-      // Try modern Clipboard API first (with permission check)
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        try {
-          await navigator.clipboard.writeText(code);
-        } catch (clipboardError: any) {
-          // If clipboard API fails due to permissions, fall back to execCommand
-          if (clipboardError.name === 'NotAllowedError' || clipboardError.message.includes('permissions policy')) {
-            throw new Error('Clipboard permission denied, falling back');
-          }
-          throw clipboardError;
-        }
-      } else {
-        throw new Error('Clipboard API not available');
-      }
-
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      // Fallback for browsers that don't support Clipboard API or when permissions are denied
-      try {
-        const textArea = document.createElement('textarea');
-        textArea.value = code;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-
-        const successful = document.execCommand('copy');
-        document.body.removeChild(textArea);
-
-        if (successful) {
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2000);
-        } else {
-          console.error('Failed to copy text: execCommand returned false');
-        }
-      } catch (fallbackErr) {
-        console.error('All copy methods failed:', fallbackErr);
-      }
-    }
-  };
-
-  // Ensure code is a string
-  const codeString = typeof code === 'string' ? code : String(code || '');
-
-  return (
-    <div className="relative group rounded-[var(--radius)] border border-border overflow-hidden bg-muted/30">
-      {filename && (
-        <div className="flex items-center justify-between px-4 py-2 bg-muted border-b border-border">
-          <span className="text-xs text-muted-foreground font-mono">{filename}</span>
-          <span className="text-xs text-muted-foreground uppercase">{language}</span>
-        </div>
-      )}
-
-      <div className="relative">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 bg-background/80 hover:bg-background"
-          onClick={handleCopy}
-          aria-label={copied ? "Copiado" : "Copiar código"}
-        >
-          {copied ? (
-            <Check className="w-4 h-4 text-[var(--toast-success-icon)]" aria-hidden="true" />
-          ) : (
-            <Copy className="w-4 h-4" aria-hidden="true" />
-          )}
-        </Button>
-
-        <div className="overflow-x-auto w-full max-w-full">
-          <SyntaxHighlighter
-            language={language}
-            style={elegantTheme as any}
-            showLineNumbers={showLineNumbers}
-            wrapLines={true}
-            customStyle={{
-              margin: 0,
-              padding: '1rem',
-              background: 'transparent',
-              fontSize: 'inherit',
-            }}
-            codeTagProps={{
-              className: "text-[length:inherit]"
-            }}
-          >
-            {codeString}
-          </SyntaxHighlighter>
-        </div>
-      </div>
-    </div>
-  );
+import React, { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { Button } from '../../ui/button';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+
+// Elegant custom theme inspired by Xertica.ai design system
+const elegantTheme = {
+  'code[class*="language-"]': {
+    color: 'var(--foreground)',
+    fontFamily: 'var(--font-mono)',
+    fontSize: '0.875rem',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre' as const,
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.6',
+    tabSize: 2,
+    hyphens: 'none' as const,
+  },
+  'pre[class*="language-"]': {
+    color: 'var(--foreground)',
+    fontFamily: 'var(--font-mono)',
+    fontSize: '0.875rem',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre' as const,
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.6',
+    tabSize: 2,
+    hyphens: 'none' as const,
+    padding: '1rem',
+    margin: 0,
+    overflow: 'auto',
+    background: 'transparent',
+  },
+  'comment': {
+    color: 'var(--muted-foreground)',
+    fontStyle: 'italic',
+  },
+  'prolog': {
+    color: 'var(--muted-foreground)',
+  },
+  'doctype': {
+    color: 'var(--muted-foreground)',
+  },
+  'cdata': {
+    color: 'var(--muted-foreground)',
+  },
+  'punctuation': {
+    color: 'var(--muted-foreground)',
+  },
+  'property': {
+    color: 'var(--chart-4)',
+  },
+  'tag': {
+    color: 'var(--chart-1)',
+  },
+  'boolean': {
+    color: 'var(--chart-5)',
+  },
+  'number': {
+    color: 'var(--chart-5)',
+  },
+  'constant': {
+    color: 'var(--chart-5)',
+  },
+  'symbol': {
+    color: 'var(--chart-5)',
+  },
+  'deleted': {
+    color: 'var(--chart-5)',
+  },
+  'selector': {
+    color: 'var(--chart-2)',
+  },
+  'attr-name': {
+    color: 'var(--chart-4)',
+  },
+  'string': {
+    color: 'var(--chart-2)',
+  },
+  'char': {
+    color: 'var(--chart-2)',
+  },
+  'builtin': {
+    color: 'var(--chart-4)',
+  },
+  'inserted': {
+    color: 'var(--chart-2)',
+  },
+  'operator': {
+    color: 'var(--primary)',
+  },
+  'entity': {
+    color: 'var(--chart-4)',
+  },
+  'url': {
+    color: 'var(--chart-1)',
+  },
+  '.language-css .token.string': {
+    color: 'var(--chart-2)',
+  },
+  '.style .token.string': {
+    color: 'var(--chart-2)',
+  },
+  'atrule': {
+    color: 'var(--chart-3)',
+  },
+  'attr-value': {
+    color: 'var(--chart-2)',
+  },
+  'keyword': {
+    color: 'var(--chart-3)',
+  },
+  'function': {
+    color: 'var(--chart-1)',
+  },
+  'class-name': {
+    color: 'var(--chart-4)',
+  },
+  'regex': {
+    color: 'var(--chart-5)',
+  },
+  'important': {
+    color: 'var(--chart-5)',
+    fontWeight: 'bold',
+  },
+  'variable': {
+    color: 'var(--chart-5)',
+  },
+};
+
+/**
+ * Props for the CodeBlock component.
+ */
+interface CodeBlockProps {
+  /** The code string to be displayed */
+  code: string;
+  /** Programming language for syntax highlighting */
+  language?: 'typescript' | 'tsx' | 'css' | 'bash' | 'jsx';
+  /** Optional filename to display in the header */
+  filename?: string;
+  /** Whether to show line numbers */
+  showLineNumbers?: boolean;
+}
+
+/**
+ * Enhanced Syntax Highlighter component with "Copy to Clipboard" functionality.
+ * 
+ * @description
+ * Uses `react-syntax-highlighter` with a custom "Elegant" theme inspired by Xertica's 
+ * design tokens. It includes a fallback mechanism for the Clipboard API and 
+ * optionally displays a header with the filename and language.
+ * 
+ * @ai-rules
+ * 1. Theme: Uses a custom `elegantTheme` that maps to system CSS variables. Avoid overriding these colors manually.
+ * 2. Clipboard: The copy functionality is robust with multiple fallback methods.
+ * 3. Content: Ensure `code` is passed as a raw string without pre-formatting indentation if possible.
+ */
+export const CodeBlock = ({
+  code,
+  language = 'tsx',
+  filename,
+  showLineNumbers = false
+}: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      // Try modern Clipboard API first (with permission check)
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        try {
+          await navigator.clipboard.writeText(code);
+        } catch (clipboardError: any) {
+          // If clipboard API fails due to permissions, fall back to execCommand
+          if (clipboardError.name === 'NotAllowedError' || clipboardError.message.includes('permissions policy')) {
+            throw new Error('Clipboard permission denied, falling back');
+          }
+          throw clipboardError;
+        }
+      } else {
+        throw new Error('Clipboard API not available');
+      }
+
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Fallback for browsers that don't support Clipboard API or when permissions are denied
+      try {
+        const textArea = document.createElement('textarea');
+        textArea.value = code;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        if (successful) {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        } else {
+          console.error('Failed to copy text: execCommand returned false');
+        }
+      } catch (fallbackErr) {
+        console.error('All copy methods failed:', fallbackErr);
+      }
+    }
+  };
+
+  // Ensure code is a string
+  const codeString = typeof code === 'string' ? code : String(code || '');
+
+  return (
+    <div className="relative group rounded-[var(--radius)] border border-border overflow-hidden bg-muted/30">
+      {filename && (
+        <div className="flex items-center justify-between px-4 py-2 bg-muted border-b border-border">
+          <span className="text-xs text-muted-foreground font-mono">{filename}</span>
+          <span className="text-xs text-muted-foreground uppercase">{language}</span>
+        </div>
+      )}
+
+      <div className="relative">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 bg-background/80 hover:bg-background"
+          onClick={handleCopy}
+          aria-label={copied ? "Copiado" : "Copiar código"}
+        >
+          {copied ? (
+            <Check className="w-4 h-4 text-[var(--toast-success-icon)]" aria-hidden="true" />
+          ) : (
+            <Copy className="w-4 h-4" aria-hidden="true" />
+          )}
+        </Button>
+
+        <div className="overflow-x-auto w-full max-w-full">
+          <SyntaxHighlighter
+            language={language}
+            style={elegantTheme as any}
+            showLineNumbers={showLineNumbers}
+            wrapLines={true}
+            customStyle={{
+              margin: 0,
+              padding: '1rem',
+              background: 'transparent',
+              fontSize: 'inherit',
+            }}
+            codeTagProps={{
+              className: "text-[length:inherit]"
+            }}
+          >
+            {codeString}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </div>
+  );
 };

package/components/assistant/code-block/code-block.stories.tsx

@@ -1,57 +1,57 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CodeBlock } from './CodeBlock';
-import React from 'react';
-
-const meta: Meta<typeof CodeBlock> = {
-  title: 'Assistant/CodeBlock',
-  component: CodeBlock,
-  argTypes: {
-    language: {
-      control: 'select',
-      options: ['typescript', 'tsx', 'css', 'bash', 'jsx'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof CodeBlock>;
-
-const exampleCode = `function HelloWorld() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">Counter</h1>
-      <p>Current count: {count}</p>
-      <Button onClick={() => setCount(count + 1)}>
-        Increment
-      </Button>
-    </div>
-  );
-}`;
-
-export const Default: Story = {
-  args: {
-    code: exampleCode,
-    language: 'tsx',
-    filename: 'Counter.tsx',
-    showLineNumbers: false,
-  },
-  render: (args) => (
-    <div className="w-full max-w-3xl">
-      <CodeBlock {...args} />
-    </div>
-  ),
-};
-
-export const Simple: Story = {
-  args: {
-    code: 'npm install xertica-ui',
-    language: 'bash',
-  },
-  render: (args) => (
-    <div className="w-full max-w-xl">
-      <CodeBlock {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock } from './CodeBlock';
+import React from 'react';
+
+const meta: Meta<typeof CodeBlock> = {
+  title: 'Assistant/CodeBlock',
+  component: CodeBlock,
+  argTypes: {
+    language: {
+      control: 'select',
+      options: ['typescript', 'tsx', 'css', 'bash', 'jsx'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+const exampleCode = `function HelloWorld() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="text-2xl font-bold">Counter</h1>
+      <p>Current count: {count}</p>
+      <Button onClick={() => setCount(count + 1)}>
+        Increment
+      </Button>
+    </div>
+  );
+}`;
+
+export const Default: Story = {
+  args: {
+    code: exampleCode,
+    language: 'tsx',
+    filename: 'Counter.tsx',
+    showLineNumbers: false,
+  },
+  render: (args) => (
+    <div className="w-full max-w-3xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};
+
+export const Simple: Story = {
+  args: {
+    code: 'npm install xertica-ui',
+    language: 'bash',
+  },
+  render: (args) => (
+    <div className="w-full max-w-xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};