@wallarm-org/design-system 0.1.0

package/dist/components/CodeSnippet/CodeSnippetLineNumbers.d.ts

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export type CodeSnippetLineNumbersProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const CodeSnippetLineNumbers: FC<CodeSnippetLineNumbersProps>;

package/dist/components/CodeSnippet/CodeSnippetLineNumbers.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useCodeSnippet } from "./hooks/index.js";
+import { LINE_COLOR_STYLES, SIZE_LINE_HEIGHT_CLASSES } from "./lib/lineStyles.js";
+const CodeSnippetLineNumbers = ({ className, ...props })=>{
+    const { tokens, startingLineNumber, lines, size } = useCodeSnippet();
+    const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
+    if (!tokens) return null;
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "code-snippet-line-numbers",
+        className: cn('flex flex-col text-text-secondary select-none text-right', className),
+        ...props,
+        children: tokens.map((_, index)=>{
+            const lineNumber = startingLineNumber + index;
+            const lineConfig = lines.get(lineNumber);
+            const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
+            return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'px-8 bg-bg-primary', colorStyles?.text, colorStyles?.bg),
+                children: lineNumber
+            }, lineNumber);
+        })
+    });
+};
+CodeSnippetLineNumbers.displayName = 'CodeSnippetLineNumbers';
+export { CodeSnippetLineNumbers };

package/dist/components/CodeSnippet/CodeSnippetRoot.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type LineConfig } from './CodeSnippetContext';
+declare const codeSnippetRootVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CodeSnippetRootVariantProps = VariantProps<typeof codeSnippetRootVariants>;
+type CodeSnippetRootNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export type CodeSnippetRootProps<TLanguage extends string = string> = CodeSnippetRootNativeProps & CodeSnippetRootVariantProps & {
+    ref?: Ref<HTMLDivElement>;
+    /** The code string to display */
+    code: string;
+    /** Programming language for syntax highlighting */
+    language: TLanguage;
+    /** Per-line configuration (color, prefix) keyed by line number */
+    lines?: Record<number, LineConfig>;
+    /** Starting line number (default: 1) */
+    startingLineNumber?: number;
+    /** Enable line wrapping */
+    wrapLines?: boolean;
+    /** Max lines before collapsing (for ShowMore) */
+    maxLines?: number;
+    /** Callback when code is copied */
+    onCopy?: (code: string) => void;
+    /** Child components */
+    children?: ReactNode;
+};
+export declare const CodeSnippetRoot: {
+    <TLanguage extends string = string>({ code, language, size, lines, startingLineNumber, wrapLines: initialWrapLines, maxLines, onCopy, className, children, ...props }: CodeSnippetRootProps<TLanguage>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/CodeSnippet/CodeSnippetRoot.js

@@ -0,0 +1,111 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { plainAdapter } from "./adapters/plain.js";
+import { CodeSnippetContext } from "./CodeSnippetContext.js";
+import { useAdapter } from "./hooks/index.js";
+const codeSnippetRootVariants = cva("relative bg-component-code-snippet-bg rounded-6 font-mono text-text-primary overflow-hidden flex flex-col [&::selection]:bg-[var(--color-syntax-highlight-selected-bg)] [&::selection]:text-[var(--color-syntax-highlight-selected-code)] [&_*::selection]:bg-[var(--color-syntax-highlight-selected-bg)] [&_*::selection]:text-[var(--color-syntax-highlight-selected-code)]", {
+    variants: {
+        size: {
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const CodeSnippetRoot = ({ code, language, size = 'md', lines = {}, startingLineNumber = 1, wrapLines: initialWrapLines = false, maxLines = 0, onCopy, className, children, ...props })=>{
+    const adapterContext = useAdapter();
+    const [wrapLines, setWrapLines] = useState(initialWrapLines);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [tokens, setTokens] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const adapter = adapterContext?.adapter ?? plainAdapter;
+    useEffect(()=>{
+        let cancelled = false;
+        const highlight = async ()=>{
+            setIsLoading(true);
+            try {
+                const result = await adapter.highlight(code, language);
+                if (!cancelled) setTokens(result.tokens);
+            } catch  {
+                if (!cancelled) {
+                    const plainTokens = code.split('\n').map((line)=>[
+                            {
+                                content: line,
+                                type: 'plain'
+                            }
+                        ]);
+                    setTokens(plainTokens);
+                }
+            } finally{
+                if (!cancelled) setIsLoading(false);
+            }
+        };
+        highlight();
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        code,
+        language,
+        adapter
+    ]);
+    const copyToClipboard = useCallback(async ()=>{
+        await navigator.clipboard.writeText(code);
+        onCopy?.(code);
+    }, [
+        code,
+        onCopy
+    ]);
+    const contextValue = useMemo(()=>({
+            code,
+            language,
+            tokens,
+            isLoading,
+            size: size ?? 'md',
+            wrapLines,
+            startingLineNumber,
+            inlineGutter: false,
+            showLineNumbers: false,
+            lines: new Map(Object.entries(lines).map(([k, v])=>[
+                    Number(k),
+                    v
+                ])),
+            isExpanded,
+            maxLines,
+            copyToClipboard,
+            setWrapLines,
+            setIsExpanded,
+            adapter
+        }), [
+        code,
+        language,
+        tokens,
+        isLoading,
+        size,
+        wrapLines,
+        startingLineNumber,
+        lines,
+        isExpanded,
+        maxLines,
+        copyToClipboard,
+        adapter
+    ]);
+    return /*#__PURE__*/ jsx(CodeSnippetContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("div", {
+            "data-slot": "code-snippet",
+            className: cn(codeSnippetRootVariants({
+                size
+            }), className),
+            ...props,
+            children: children
+        })
+    });
+};
+CodeSnippetRoot.displayName = 'CodeSnippetRoot';
+export { CodeSnippetRoot };

package/dist/components/CodeSnippet/InlineCodeSnippet.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef, type FC } from 'react';
+export interface InlineCodeSnippetProps extends Omit<ComponentPropsWithRef<'code'>, 'children'> {
+    /** The code content to display */
+    code: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'inherit';
+    /** Render as child element using Radix Slot */
+    asChild?: boolean;
+    /** Enable click to copy functionality (default: true) */
+    copyable?: boolean;
+}
+/**
+ * InlineCodeSnippet - A simple inline code display component with optional copy functionality.
+ *
+ * @example
+ * ```tsx
+ * <p>
+ *   Run <InlineCodeSnippet code="npm install" /> to install dependencies.
+ * </p>
+ * ```
+ */
+export declare const InlineCodeSnippet: FC<InlineCodeSnippetProps>;

package/dist/components/CodeSnippet/InlineCodeSnippet.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/CodeSnippet/InlineCodeSnippet.figma.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { InlineCodeSnippet } from "./InlineCodeSnippet.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=2983-55138';
+code_connect.connect(InlineCodeSnippet, figmaNodeUrl, {
+    props: {
+        code: code_connect.string('Code'),
+        size: code_connect["enum"]('Size', {
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg'
+        })
+    },
+    example: ({ code, size })=>/*#__PURE__*/ jsx(InlineCodeSnippet, {
+            code: code,
+            size: size
+        })
+});

package/dist/components/CodeSnippet/InlineCodeSnippet.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { useCopyToClipboard } from "../../hooks/index.js";
+import { cn } from "../../utils/cn.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+const inlineCodeSnippetVariants = cva("inline-flex items-center bg-component-code-snippet-bg rounded-6 font-mono font-normal text-syntax-no-syntax", {
+    variants: {
+        size: {
+            sm: 'text-xs px-4 py-2',
+            md: 'text-sm px-4 py-2',
+            lg: 'text-base leading-sm px-4 py-2',
+            inherit: 'text-[1em] px-[0.25em] py-[0.125em]'
+        },
+        copyable: {
+            true: 'cursor-pointer hover:bg-states-primary-hover active:bg-states-primary-pressed',
+            false: ''
+        }
+    }
+});
+const InlineCodeSnippet = (props)=>{
+    const { code, size = 'inherit', asChild = false, copyable = true, className, onClick, ref, ...otherProps } = props;
+    const { copied, copy, reset, isSupported } = useCopyToClipboard();
+    const Comp = asChild ? Slot : 'code';
+    const isCopyable = copyable && isSupported;
+    useEffect(()=>{
+        if (!copied || "u" < typeof document) return;
+        const handleClickOutside = ()=>reset();
+        document.addEventListener('click', handleClickOutside);
+        return ()=>document.removeEventListener('click', handleClickOutside);
+    }, [
+        copied,
+        reset
+    ]);
+    const handleClick = (event)=>{
+        event.stopPropagation();
+        if (isCopyable) copy(code);
+        onClick?.(event);
+    };
+    const codeElement = /*#__PURE__*/ jsx(Comp, {
+        ref: ref,
+        "data-slot": "inline-code-snippet",
+        className: cn(inlineCodeSnippetVariants({
+            size,
+            copyable: isCopyable
+        }), className),
+        ...otherProps,
+        onClick: handleClick,
+        children: code
+    });
+    if (!isCopyable) return codeElement;
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        open: copied || void 0,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: codeElement
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: copied ? 'Copied' : 'Click to copy'
+            })
+        ]
+    });
+};
+InlineCodeSnippet.displayName = 'InlineCodeSnippet';
+export { InlineCodeSnippet };

package/dist/components/CodeSnippet/adapters/highlightjs.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightJsLanguage, SyntaxAdapter } from './types';
+export declare const highlightJsAdapter: SyntaxAdapter<HighlightJsLanguage>;

package/dist/components/CodeSnippet/adapters/highlightjs.js

@@ -0,0 +1,136 @@
+let hljsPromise = null;
+const SUPPORTED_LANGUAGES = [
+    "javascript",
+    "typescript",
+    'bash',
+    'json',
+    'html',
+    'xml',
+    'css',
+    'python',
+    'go',
+    'sql'
+];
+function mapHljsClassToTokenType(className) {
+    const classMap = {
+        'hljs-keyword': 'keyword',
+        'hljs-built_in': 'builtin',
+        'hljs-type': 'class-name',
+        'hljs-literal': 'boolean',
+        'hljs-number': 'number',
+        'hljs-string': 'string',
+        'hljs-regexp': 'regex',
+        'hljs-comment': 'comment',
+        'hljs-doctag': 'comment',
+        'hljs-function': 'function',
+        'hljs-title': 'function',
+        'hljs-class': 'class-name',
+        'hljs-variable': 'variable',
+        'hljs-template-variable': 'variable',
+        'hljs-attr': 'attr-name',
+        'hljs-attribute': 'attr-name',
+        'hljs-tag': 'tag',
+        'hljs-name': 'tag',
+        'hljs-selector-tag': 'tag',
+        'hljs-selector-id': 'property',
+        'hljs-selector-class': 'property',
+        'hljs-property': 'property',
+        'hljs-operator': 'operator',
+        'hljs-punctuation': 'punctuation',
+        'hljs-meta': 'keyword',
+        'hljs-params': 'variable',
+        'hljs-symbol': 'constant'
+    };
+    const classes = className.split(' ');
+    for (const cls of classes)if (classMap[cls]) return classMap[cls];
+    return 'plain';
+}
+function parseHljsHtml(html) {
+    const tokens = [];
+    let pos = 0;
+    const classStack = [];
+    while(pos < html.length){
+        if (html.startsWith('<span class="', pos)) {
+            const classStart = pos + 13;
+            const classEnd = html.indexOf('"', classStart);
+            if (-1 !== classEnd) {
+                const className = html.slice(classStart, classEnd);
+                classStack.push(className);
+                pos = classEnd + 2;
+                continue;
+            }
+        }
+        if (html.startsWith('</span>', pos)) {
+            classStack.pop();
+            pos += 7;
+            continue;
+        }
+        if ('<' === html[pos]) {
+            const tagEnd = html.indexOf('>', pos);
+            if (-1 !== tagEnd) {
+                pos = tagEnd + 1;
+                continue;
+            }
+        }
+        let textEnd = html.indexOf('<', pos);
+        if (-1 === textEnd) textEnd = html.length;
+        if (textEnd > pos) {
+            const content = decodeHtmlEntities(html.slice(pos, textEnd));
+            if (content) {
+                const currentClass = classStack[classStack.length - 1] || '';
+                tokens.push({
+                    content,
+                    type: currentClass ? mapHljsClassToTokenType(currentClass) : 'plain'
+                });
+            }
+            pos = textEnd;
+        } else pos++;
+    }
+    return tokens;
+}
+function decodeHtmlEntities(text) {
+    return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'");
+}
+async function getHljs() {
+    if (!hljsPromise) hljsPromise = import("highlight.js").then((module)=>module.default);
+    return hljsPromise;
+}
+const highlightJsAdapter = {
+    name: 'highlight.js',
+    async highlight (code, language) {
+        try {
+            const hljs = await getHljs();
+            const result = hljs.highlight(code, {
+                language
+            });
+            const lines = result.value.split('\n');
+            const tokens = lines.map((line)=>{
+                if (!line) return [
+                    {
+                        content: '',
+                        type: 'plain'
+                    }
+                ];
+                return parseHljsHtml(line);
+            });
+            return {
+                tokens,
+                html: result.value
+            };
+        } catch  {
+            const tokens = code.split('\n').map((line)=>[
+                    {
+                        content: line,
+                        type: 'plain'
+                    }
+                ]);
+            return {
+                tokens
+            };
+        }
+    },
+    getSupportedLanguages () {
+        return SUPPORTED_LANGUAGES;
+    }
+};
+export { highlightJsAdapter };

package/dist/components/CodeSnippet/adapters/index.d.ts

@@ -0,0 +1,20 @@
+export { plainAdapter } from './plain';
+export type { HighlightJsLanguage, HighlightResult, PlainLanguage, PrismLanguage, ShikiLanguage, SyntaxAdapter, Token, TokenType, } from './types';
+/**
+ * Lazily load the Prism adapter for syntax highlighting.
+ * Lightweight, good for most use cases.
+ * Bundle size: ~15KB gzipped
+ */
+export declare const loadPrismAdapter: () => Promise<import("./types").SyntaxAdapter<import("./types").PrismLanguage>>;
+/**
+ * Lazily load the Shiki adapter for syntax highlighting.
+ * High-quality highlighting with VS Code themes, supports more languages.
+ * Bundle size: ~200KB+ gzipped (includes WASM)
+ */
+export declare const loadShikiAdapter: () => Promise<import("./types").SyntaxAdapter<import("./types").ShikiLanguage>>;
+/**
+ * Lazily load the highlight.js adapter for syntax highlighting.
+ * Well-established library, good language support.
+ * Bundle size: ~30KB gzipped (core + common languages)
+ */
+export declare const loadHighlightJsAdapter: () => Promise<import("./types").SyntaxAdapter<import("./types").HighlightJsLanguage>>;

package/dist/components/CodeSnippet/adapters/index.js

@@ -0,0 +1,14 @@
+import { plainAdapter } from "./plain.js";
+const loadPrismAdapter = async ()=>{
+    const { prismAdapter } = await import("./prism.js");
+    return prismAdapter;
+};
+const loadShikiAdapter = async ()=>{
+    const { shikiAdapter } = await import("./shiki.js");
+    return shikiAdapter;
+};
+const loadHighlightJsAdapter = async ()=>{
+    const { highlightJsAdapter } = await import("./highlightjs.js");
+    return highlightJsAdapter;
+};
+export { loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter };

package/dist/components/CodeSnippet/adapters/plain.d.ts

@@ -0,0 +1,2 @@
+import type { PlainLanguage, SyntaxAdapter } from './types';
+export declare const plainAdapter: SyntaxAdapter<PlainLanguage>;

package/dist/components/CodeSnippet/adapters/plain.js

@@ -0,0 +1,22 @@
+const SUPPORTED_LANGUAGES = [
+    'text',
+    'plain'
+];
+const plainAdapter = {
+    name: 'plain',
+    async highlight (code) {
+        const tokens = code.split('\n').map((line)=>[
+                {
+                    content: line,
+                    type: 'plain'
+                }
+            ]);
+        return {
+            tokens
+        };
+    },
+    getSupportedLanguages () {
+        return SUPPORTED_LANGUAGES;
+    }
+};
+export { plainAdapter };

package/dist/components/CodeSnippet/adapters/prism.d.ts

@@ -0,0 +1,2 @@
+import type { PrismLanguage, SyntaxAdapter } from './types';
+export declare const prismAdapter: SyntaxAdapter<PrismLanguage>;

package/dist/components/CodeSnippet/adapters/prism.js

@@ -0,0 +1,140 @@
+import { Prism } from "prism-react-renderer";
+("u" > typeof globalThis ? globalThis : window).Prism = Prism;
+let languagesLoaded = false;
+async function loadAdditionalLanguages() {
+    if (languagesLoaded) return;
+    languagesLoaded = true;
+    await import("prismjs/components/prism-bash");
+}
+const SUPPORTED_LANGUAGES = [
+    "javascript",
+    "typescript",
+    'jsx',
+    'tsx',
+    'bash',
+    'shell',
+    'json',
+    'html',
+    'xml',
+    'css',
+    'python',
+    'go',
+    'sql',
+    'yaml',
+    'markdown'
+];
+function mapTokenType(prismType) {
+    const typeMap = {
+        plain: 'plain',
+        keyword: 'keyword',
+        string: 'string',
+        comment: 'comment',
+        function: 'function',
+        number: 'number',
+        operator: 'operator',
+        punctuation: 'punctuation',
+        'class-name': 'class-name',
+        property: 'property',
+        tag: 'tag',
+        'attr-name': 'attr-name',
+        'attr-value': 'attr-value',
+        boolean: 'boolean',
+        builtin: 'builtin',
+        constant: 'constant',
+        regex: 'regex',
+        variable: 'variable',
+        parameter: 'variable',
+        'template-string': 'string',
+        'template-punctuation': 'punctuation',
+        interpolation: 'variable',
+        'interpolation-punctuation': 'punctuation',
+        module: 'builtin',
+        imports: 'keyword',
+        exports: 'keyword',
+        'maybe-class-name': 'class-name',
+        'known-class-name': 'class-name',
+        'function-variable': 'function',
+        method: 'function',
+        'method-variable': 'function',
+        'property-access': 'property',
+        dom: 'builtin',
+        console: 'builtin',
+        'assign-left': 'variable',
+        environment: 'variable',
+        shebang: 'comment',
+        "file-descriptor": 'number'
+    };
+    return typeMap[prismType] ?? 'plain';
+}
+function flattenToken(token, parentType = 'plain') {
+    if ('string' == typeof token) return [
+        {
+            content: token,
+            type: mapTokenType(parentType)
+        }
+    ];
+    const tokenType = token.type || parentType;
+    const content = token.content;
+    if ('string' == typeof content) return [
+        {
+            content,
+            type: mapTokenType(tokenType)
+        }
+    ];
+    if (Array.isArray(content)) return content.flatMap((item)=>{
+        if ('string' == typeof item) return [
+            {
+                content: item,
+                type: mapTokenType(tokenType)
+            }
+        ];
+        return flattenToken(item, tokenType);
+    });
+    return flattenToken(content, tokenType);
+}
+const prismAdapter = {
+    name: 'prism',
+    async highlight (code, language) {
+        await loadAdditionalLanguages();
+        const grammar = Prism.languages[language];
+        if (!grammar) {
+            const tokens = code.split('\n').map((line)=>[
+                    {
+                        content: line,
+                        type: 'plain'
+                    }
+                ]);
+            return {
+                tokens
+            };
+        }
+        const prismTokens = Prism.tokenize(code, grammar);
+        const tokens = [];
+        let currentLine = [];
+        for (const token of prismTokens){
+            const flatTokens = flattenToken(token);
+            for (const flatToken of flatTokens){
+                const parts = flatToken.content.split('\n');
+                for(let i = 0; i < parts.length; i++){
+                    if (i > 0) {
+                        tokens.push(currentLine);
+                        currentLine = [];
+                    }
+                    const content = parts[i];
+                    if (content) currentLine.push({
+                        content,
+                        type: flatToken.type
+                    });
+                }
+            }
+        }
+        tokens.push(currentLine);
+        return {
+            tokens
+        };
+    },
+    getSupportedLanguages () {
+        return SUPPORTED_LANGUAGES;
+    }
+};
+export { prismAdapter };

package/dist/components/CodeSnippet/adapters/shiki.d.ts

@@ -0,0 +1,2 @@
+import type { ShikiLanguage, SyntaxAdapter } from './types';
+export declare const shikiAdapter: SyntaxAdapter<ShikiLanguage>;