@kitn.ai/ui 0.14.1

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

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { CodeBlock, CodeBlockCode, CodeBlockGroup } from './code-block';
+import { Button } from '../ui/button';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const tsCode = `interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+function greet(user: User): string {
+  return \`Hello, \${user.name}!\`;
+}`;
+
+const pythonCode = `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]
+
+print(fibonacci(10))`;
+
+const cssCode = `:root {
+  --primary: hsl(240 5.9% 10%);
+  --background: hsl(0 0% 100%);
+}
+
+.button {
+  background: var(--color-primary);
+  color: white;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+}`;
+
+/**
+ * Story for the compound `CodeBlock` family. The root `CodeBlock` is a bordered
+ * card container; `CodeBlockCode` does the (on-demand, Shiki) syntax
+ * highlighting; `CodeBlockGroup` is a flex header/footer row. The controllable
+ * props live on `CodeBlockCode`, so `Playground` drives that piece directly.
+ */
+const meta = {
+  title: 'Solid (Advanced)/Elements/CodeBlock',
+  component: CodeBlockCode,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        'A bordered code card with optional syntax highlighting. `CodeBlock` is the container, `CodeBlockCode` renders the (Shiki-)highlighted source, and `CodeBlockGroup` is a flex row for a header/footer (filename + copy button).',
+        '**When to use:** to display code snippets in chat messages, documentation, or anywhere fenced code appears — typically emitted by the Markdown renderer for ``` blocks.',
+        '**How to use:** wrap one or more children in `<CodeBlock>`. Pass the source string and a `language` to `<CodeBlockCode>`; optionally override the `theme`. Add a `<CodeBlockGroup>` for a filename row and copy action.',
+        '**Placement:** inside assistant message content, README/docs panes, and tool-output views.',
+      ]),
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    code: {
+      control: 'text',
+      description: 'The source code string to render.',
+    },
+    language: {
+      control: 'text',
+      description: 'Language id for syntax highlighting (e.g. `typescript`, `python`, `css`).',
+      table: { defaultValue: { summary: 'tsx' } },
+    },
+    theme: {
+      control: 'text',
+      description: 'Shiki theme id. Falls back to the active ChatConfig `codeTheme`.',
+    },
+  },
+  args: {
+    code: tsCode,
+    language: 'typescript',
+  },
+  render: (args) => (
+    <div class="max-w-lg">
+      <CodeBlock>
+        <CodeBlockCode {...args} />
+      </CodeBlock>
+    </div>
+  ),
+} satisfies Meta<typeof CodeBlockCode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { CodeBlock, CodeBlockCode, CodeBlockGroup } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — edit the code, language, or theme via controls. */
+export const Playground: Story = {
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={tsCode} language="typescript" />
+</CodeBlock>`),
+};
+
+export const TypeScript: Story = {
+  args: { code: tsCode, language: 'typescript' },
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={tsCode} language="typescript" />
+</CodeBlock>`),
+};
+
+export const Python: Story = {
+  args: { code: pythonCode, language: 'python' },
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={pythonCode} language="python" />
+</CodeBlock>`),
+};
+
+export const CSS: Story = {
+  args: { code: cssCode, language: 'css' },
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={cssCode} language="css" />
+</CodeBlock>`),
+};
+
+/** A header row (`CodeBlockGroup`) with a filename and a copy button — showcase. */
+export const WithHeader: Story = {
+  render: () => (
+    <div class="max-w-lg">
+      <CodeBlock>
+        <CodeBlockGroup class="border-b border-border px-4 py-2">
+          <span class="text-xs text-muted-foreground font-mono">user.ts</span>
+          <Button variant="ghost" size="icon-sm" aria-label="Copy code">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+            </svg>
+          </Button>
+        </CodeBlockGroup>
+        <CodeBlockCode code={tsCode} language="typescript" />
+      </CodeBlock>
+    </div>
+  ),
+  ...src(`<CodeBlock>
+  <CodeBlockGroup class="border-b border-border px-4 py-2">
+    <span class="text-xs text-muted-foreground font-mono">user.ts</span>
+    <Button variant="ghost" size="icon-sm">{/* copy icon */}</Button>
+  </CodeBlockGroup>
+  <CodeBlockCode code={tsCode} language="typescript" />
+</CodeBlock>`),
+};

package/src/components/code-block.tsx

@@ -0,0 +1,105 @@
+import { type JSX, splitProps, createResource, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig } from '../primitives/chat-config';
+import { highlight, isCodeHighlightingEnabled } from '../primitives/highlighter';
+
+// --- CodeBlock (Root) ---
+
+export interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children?: JSX.Element;
+}
+
+function CodeBlock(props: CodeBlockProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div
+      class={cn(
+        'not-prose flex w-full flex-col overflow-clip border',
+        'border-border bg-card text-card-foreground',
+        // Radius is a CSS var (default = rounded-xl) so it can be set to 0 for
+        // flush embedding, e.g. under framework tabs in the docs Code panel.
+        'rounded-[var(--kai-code-radius,0.75rem)]',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- CodeBlockCode ---
+
+export interface CodeBlockCodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language?: string;
+  theme?: string;
+}
+
+function CodeBlockCode(props: CodeBlockCodeProps) {
+  const [local, rest] = splitProps(props, ['code', 'language', 'theme', 'class']);
+  const config = useChatConfig();
+
+  const lang = () => local.language ?? 'tsx';
+  const theme = () => local.theme ?? config.codeTheme();
+  const highlightingOn = () => isCodeHighlightingEnabled() && config.codeHighlight();
+
+  // When highlighting is off, the source is null so the fetcher never runs and
+  // no Shiki code is ever imported — the plain `<pre>` fallback renders instead.
+  const [highlighted] = createResource(
+    () => (highlightingOn() ? { code: local.code, lang: lang(), theme: theme() } : null),
+    (src) => highlight(src.code, src.lang, src.theme)
+  );
+
+  const codeTextSize = () => {
+    switch (config.proseSize()) {
+      case 'xs': return 'text-[11px]';
+      case 'sm': return 'text-[13px]';
+      case 'base': return 'text-sm';
+      case 'lg': return 'text-base';
+    }
+  };
+
+  const classNames = () =>
+    cn(
+      'w-full overflow-x-auto [&>pre]:px-4 [&>pre]:py-4',
+      codeTextSize(),
+      local.class
+    );
+
+  return (
+    // `tabindex={0}` makes the horizontally-scrollable region reachable by
+    // keyboard (axe `scrollable-region-focusable`); `{...rest}` lets a consumer
+    // override it. No `role="region"` — that would demand an accessible name.
+    <Show
+      when={highlighted()}
+      fallback={
+        <div class={classNames()} tabindex={0} {...rest}>
+          <pre><code>{local.code}</code></pre>
+        </div>
+      }
+    >
+      <div class={classNames()} tabindex={0} innerHTML={highlighted()} {...rest} />
+    </Show>
+  );
+}
+
+// --- CodeBlockGroup ---
+
+export interface CodeBlockGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children?: JSX.Element;
+}
+
+function CodeBlockGroup(props: CodeBlockGroupProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div
+      class={cn('flex items-center justify-between', local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+export { CodeBlock, CodeBlockCode, CodeBlockGroup };