components-svelte 0.1.0

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,10 @@
+export type { BaseCodeBlockProps } from "./BaseCodeBlock.svelte";
+export { default as BaseCodeBlock } from "./BaseCodeBlock.svelte";
+export type { CodeBlockProps } from "./CodeBlock.svelte";
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export type { CopyToClipboardButtonProps } from "./types";
+export { default as CopyToClipboardButton } from "./CopyToClipboardButton.svelte";
+export type { CodeFooterProps } from "./CodeFooter.svelte";
+export { default as CodeFooter } from "./CodeFooter.svelte";
+export type { CodeHeaderProps } from "./CodeHeader.svelte";
+export { default as CodeHeader } from "./CodeHeader.svelte";

package/dist/components/code-block/index.js

@@ -0,0 +1,5 @@
+export { default as BaseCodeBlock } from "./BaseCodeBlock.svelte";
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export { default as CopyToClipboardButton } from "./CopyToClipboardButton.svelte";
+export { default as CodeFooter } from "./CodeFooter.svelte";
+export { default as CodeHeader } from "./CodeHeader.svelte";

package/dist/components/code-block/types.d.ts

@@ -0,0 +1,85 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { CodeBlockTheme, CodeStyling } from "../../utils/shiki/code-styling";
+type CopyToClipboardButtonProps = {
+    textToCopy: string;
+    onCopied?: (result: "success" | "error", textToCopy?: string) => void;
+    class?: string;
+    showTooltip?: boolean;
+    codeBlockTheme?: CodeBlockTheme;
+    copyButtonAriaLabel?: string;
+    tooltipCopyText?: string;
+    tooltipCopiedText?: string;
+} & Omit<HTMLButtonAttributes, "class">;
+type CodeBlockProps = {
+    language?: string;
+    filename?: string;
+    icon?: string;
+    lang?: string;
+    class?: string;
+    /**
+     * Whether to show line numbers.
+     */
+    lines?: boolean;
+    /**
+     * Whether to wrap the code block.
+     */
+    wrap?: boolean;
+    /**
+     * Whether to expand the code block.
+     */
+    expandable?: boolean;
+    /**
+     * The lines to highlight. it's a stringified array of numbers.
+     * Example: "[1,3,4,5]"
+     */
+    highlight?: string;
+    /**
+     * The lines to focus on. it's a stringified array of numbers.
+     * Example: "[1,3,4,5]"
+     */
+    focus?: string;
+    /**
+     * Internal prop to set the number of lines in the code block.
+     * Users should not set this prop.
+     */
+    numberOfLines?: number;
+    /**
+     * Prop to hide the ask ai button
+     */
+    hideAskAiButton?: boolean;
+    /**
+     * Prop to set the small text size
+     */
+    isSmallText?: boolean;
+    /**
+     * Pass in from CodeSnippetFeedbackProvider
+     */
+    feedbackModalOpen?: boolean;
+    /**
+     * Pass in from CodeSnippetFeedbackProvider
+     */
+    anchorRef?: {
+        current: HTMLDivElement | null;
+    };
+    /**
+     * Prop to set the code block theme (code block UI theme)
+     */
+    codeBlockTheme?: CodeBlockTheme;
+    /**
+     * Prop to set the code block theme object (syntax highlighting theme)
+     */
+    codeBlockThemeObject?: CodeStyling;
+    /**
+     * Pass in AskAiCodeBlockButton component
+     */
+    askAiButton?: Snippet;
+    /**
+     * Pass in CodeSnippetFeedbackButton component
+     */
+    feedbackButton?: Snippet;
+    children?: Snippet;
+    copyButtonProps?: Omit<CopyToClipboardButtonProps, "textToCopy">;
+    ref?: HTMLDivElement;
+};
+export type { CodeBlockProps, CopyToClipboardButtonProps };

package/dist/components/code-block/types.js

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

package/dist/components/code-group/CodeGroup.svelte

@@ -0,0 +1,327 @@
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import { getCodeString } from "../../utils/shiki/lib";
+  import { Icon as ComponentIcon } from "../icon";
+  import BaseCodeBlock from "../code-block/BaseCodeBlock.svelte";
+  import CopyToClipboardButton from "../code-block/CopyToClipboardButton.svelte";
+  import type { CopyToClipboardButtonProps } from "../code-block/types";
+  import type { CodeBlockTheme, CodeStyling } from "../../utils/shiki/code-styling";
+  import LanguageDropdown from "./LanguageDropdown.svelte";
+  import {
+    CODE_GROUP_CONTEXT,
+    type CodeGroupChild,
+    type CodeGroupContext,
+  } from "./context";
+
+  type CodeGroupProps = {
+    dropdown?: boolean;
+    isSmallText?: boolean;
+    children?: import("svelte").Snippet;
+    noMargins?: boolean;
+    feedbackModalOpen?: boolean;
+    anchorRef?: { current: HTMLDivElement | null };
+    codeBlockTheme?: CodeBlockTheme;
+    codeBlockThemeObject?: CodeStyling;
+    initialSelectedTab?: number;
+    onSelectedTabChange?: (index: number) => void;
+    askAiButton?: import("svelte").Snippet;
+    feedbackButton?: import("svelte").Snippet;
+    class?: string;
+    copyButtonProps?: CopyToClipboardButtonProps;
+  };
+
+  let {
+    children,
+    isSmallText,
+    class: className,
+    noMargins,
+    dropdown,
+    feedbackModalOpen,
+    anchorRef,
+    codeBlockTheme = "system",
+    codeBlockThemeObject,
+    initialSelectedTab = 0,
+    onSelectedTabChange,
+    askAiButton,
+    feedbackButton,
+    copyButtonProps,
+  }: CodeGroupProps = $props();
+
+  let childArr = $state<CodeGroupChild[]>([]);
+  let selectedTab = $state(0);
+  let hasInitialisedSelection = false;
+  let tabBarRef = $state<HTMLDivElement>();
+  let rootRef = $state<HTMLDivElement>();
+
+  function register(child: CodeGroupChild) {
+    const existingIndex = childArr.findIndex((item) => item.id === child.id);
+    if (existingIndex === -1) {
+      childArr = [...childArr, child];
+    } else {
+      const nextChildren = [...childArr];
+      nextChildren[existingIndex] = child;
+      childArr = nextChildren;
+    }
+  }
+
+  function unregister(id: symbol) {
+    childArr = childArr.filter((child) => child.id !== id);
+  }
+
+  const codeGroupContext: CodeGroupContext = { register, unregister };
+  setContext(CODE_GROUP_CONTEXT, codeGroupContext);
+
+  $effect(() => {
+    if (!hasInitialisedSelection) {
+      selectedTab = initialSelectedTab;
+      hasInitialisedSelection = true;
+    }
+  });
+
+  let selectedIndex = $derived(
+    Math.min(
+      Math.max(0, Number(selectedTab)),
+      Math.max(0, childArr.length - 1)
+    )
+  );
+  let selectedChild = $derived(childArr[selectedIndex]);
+  let groupClass = $derived(
+    cn(
+      Classes.CodeGroup,
+      "not-prose relative mt-5 mb-8 flex flex-col overflow-hidden rounded-2xl border border-stone-950/10 p-0.5 dark:border-white/10",
+      noMargins && "my-0",
+      codeBlockTheme === "system" &&
+        "dark:codeblock-dark codeblock-light bg-stone-50 text-stone-950 dark:bg-white/5 dark:text-stone-50",
+      codeBlockTheme === "dark" &&
+        "codeblock-dark border-transparent bg-codeblock text-stone-50 dark:bg-white/5",
+      feedbackModalOpen && "border border-primary dark:border-primary-light",
+      className
+    )
+  );
+
+  $effect(() => {
+    if (anchorRef && rootRef) {
+      anchorRef.current = rootRef;
+    }
+  });
+
+  function focusTab(index: number) {
+    requestAnimationFrame(() => {
+      tabBarRef
+        ?.querySelector<HTMLElement>(`[data-tab-index="${index}"]`)
+        ?.focus();
+    });
+  }
+
+  function handleValueChange(value: number, restoreFocus = true) {
+    if (childArr.length === 0) {
+      return;
+    }
+
+    const index = Math.min(Math.max(0, value), childArr.length - 1);
+    const wasFocusOnTab =
+      typeof document !== "undefined" &&
+      document.activeElement?.getAttribute("role") === "tab";
+
+    // Important to clear hash to avoid collisions with tab groups
+    if (typeof window !== "undefined" && window.location.hash) {
+      window.history.replaceState(
+        null,
+        "",
+        window.location.pathname + window.location.search
+      );
+    }
+
+    selectedTab = index;
+    onSelectedTabChange?.(index);
+
+    if ((restoreFocus && wasFocusOnTab) || restoreFocus === true) {
+      focusTab(index);
+    }
+  }
+
+  function handleTabKeydown(event: KeyboardEvent, index: number) {
+    let nextIndex: number | undefined;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      nextIndex = (index + 1) % childArr.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      nextIndex = (index - 1 + childArr.length) % childArr.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = childArr.length - 1;
+    }
+
+    if (nextIndex !== undefined) {
+      event.preventDefault();
+      handleValueChange(nextIndex);
+    }
+  }
+</script>
+
+{#if children}
+  <div aria-hidden="true" class="hidden">{@render children()}</div>
+{/if}
+
+{#if childArr.length > 0}
+  <div bind:this={rootRef} class={groupClass} data-value={selectedIndex}>
+    <div
+      class={cn(
+        "relative flex items-center justify-between gap-2",
+        dropdown ? "px-2.5" : "pr-2.5"
+      )}
+      data-component-part="code-group-tab-bar"
+      bind:this={tabBarRef}
+    >
+      {#if dropdown}
+        <div class="flex min-w-0 items-center gap-1.5 font-medium text-xs">
+          {#if selectedChild?.icon}
+            <ComponentIcon
+              class={cn("size-3.5 bg-stone-500 dark:bg-stone-400", Classes.CodeBlockIcon)}
+              icon={selectedChild.icon}
+              iconType="regular"
+              overrideColor
+            />
+          {/if}
+          <span
+            class={cn(
+              "truncate",
+              codeBlockTheme === "system" && "text-stone-950 dark:text-stone-50",
+              codeBlockTheme === "dark" && "text-stone-50"
+            )}
+          >{selectedChild?.filename}</span>
+        </div>
+      {:else}
+        <div
+          class={cn(
+            "flex w-0 flex-1 gap-1 overflow-x-auto overflow-y-hidden rounded-tl-xl text-xs leading-6",
+            codeBlockTheme === "system"
+              ? "scrollbar-code-system"
+              : "scrollbar-code-dark"
+          )}
+          role="tablist"
+          aria-label="Code examples"
+        >
+          {#each childArr as child, index (child.id)}
+            <button
+              class={cn(
+                "group relative my-1 mb-1.5 ml-0! flex items-center gap-1.5 whitespace-nowrap font-medium outline-0 first:ml-2.5! focus-visible:outline-2",
+                selectedIndex === index &&
+                  codeBlockTheme === "system" &&
+                  "text-primary dark:text-primary-light",
+                selectedIndex === index &&
+                  codeBlockTheme === "dark" &&
+                  "text-primary-light",
+                selectedIndex !== index &&
+                  codeBlockTheme === "system" &&
+                  "text-stone-500 dark:text-stone-400",
+                selectedIndex !== index &&
+                  codeBlockTheme === "dark" &&
+                  "text-stone-400"
+              )}
+              type="button"
+              role="tab"
+              aria-selected={selectedIndex === index}
+              aria-controls={`code-group-panel-${index}`}
+              id={`code-group-tab-${index}`}
+              tabindex={selectedIndex === index ? 0 : -1}
+              data-tab-index={index}
+              onclick={() => handleValueChange(index)}
+              onkeydown={(event) => handleTabKeydown(event, index)}
+            >
+              <div
+                class={cn(
+                  "z-10 flex items-center gap-1.5 rounded-lg px-1.5 focus:outline-none",
+                  childArr.length > 1 &&
+                    codeBlockTheme === "system" &&
+                    "group-hover:bg-stone-200/50 group-hover:text-primary dark:group-hover:bg-stone-700/70 dark:group-hover:text-primary-light",
+                  childArr.length > 1 &&
+                    codeBlockTheme === "dark" &&
+                    "group-hover:bg-stone-700/70 group-hover:text-primary-light"
+                )}
+              >
+                {#if child.icon}
+                  <ComponentIcon
+                    class={cn(
+                      "h-3.5 w-3.5 bg-stone-500 dark:bg-stone-400",
+                      codeBlockTheme === "system"
+                        ? "group-hover:bg-primary dark:group-hover:bg-primary-light"
+                        : "group-hover:bg-stone-700/70 group-hover:text-primary-light",
+                      Classes.CodeBlockIcon
+                    )}
+                    color={selectedIndex === index ? "currentColor" : undefined}
+                    icon={child.icon}
+                    iconType="regular"
+                    overrideColor
+                  />
+                {/if}
+                {child.filename}
+              </div>
+              {#if selectedIndex === index}
+                <div class="absolute right-0 -bottom-1.5 left-0 h-0.5 rounded-full bg-primary dark:bg-primary-light"></div>
+              {/if}
+            </button>
+          {/each}
+        </div>
+      {/if}
+
+      <div class="flex shrink-0 items-center justify-end gap-1.5">
+        {#if dropdown}
+          <LanguageDropdown
+            codeBlockTheme={codeBlockTheme}
+            languages={childArr.map((child) => child.language || "")}
+            selectedLanguage={selectedChild?.language || ""}
+            setSelectedLanguage={(_language, index) => handleValueChange(index, false)}
+          />
+        {/if}
+        {#if feedbackButton}{@render feedbackButton()}{/if}
+        <CopyToClipboardButton
+          codeBlockTheme={codeBlockTheme}
+          textToCopy={getCodeString(selectedChild?.codeString, selectedChild?.class, true)}
+          {...(copyButtonProps as Omit<CopyToClipboardButtonProps, "textToCopy">)}
+        />
+        {#if askAiButton}{@render askAiButton()}{/if}
+      </div>
+    </div>
+
+    <div class="flex flex-1 overflow-hidden">
+      {#each childArr as child, index (child.id)}
+        <div
+          class="relative h-full max-h-full w-full min-w-full max-w-full"
+          id={`code-group-panel-${index}`}
+          role="tabpanel"
+          aria-labelledby={index === selectedIndex ? `code-group-tab-${index}` : undefined}
+          tabindex={-1}
+          hidden={index !== selectedIndex}
+        >
+          <BaseCodeBlock
+            class={child.class}
+            codeBlockTheme={codeBlockTheme}
+            codeBlockThemeObject={codeBlockThemeObject ?? codeBlockTheme}
+            codeString={child.codeString}
+            expandable={child.expandable && index === selectedIndex}
+            filename={child.filename}
+            focus={child.focus}
+            highlight={child.highlight}
+            isParentCodeGroup={true}
+            isSmallText={isSmallText}
+            lang={child.lang}
+            language={child.language}
+            lines={child.lines}
+            numberOfLines={child.numberOfLines}
+            shouldHighlight={index === selectedIndex}
+            wrap={child.wrap}
+          >
+            {#if child.children}{@render child.children()}{/if}
+          </BaseCodeBlock>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<script lang="ts" module>
+  export type { CodeGroupProps };
+</script>

package/dist/components/code-group/CodeGroup.svelte.d.ts

@@ -0,0 +1,24 @@
+export type { CodeGroupProps };
+import type { CopyToClipboardButtonProps } from "../code-block/types";
+import type { CodeBlockTheme, CodeStyling } from "../../utils/shiki/code-styling";
+type CodeGroupProps = {
+    dropdown?: boolean;
+    isSmallText?: boolean;
+    children?: import("svelte").Snippet;
+    noMargins?: boolean;
+    feedbackModalOpen?: boolean;
+    anchorRef?: {
+        current: HTMLDivElement | null;
+    };
+    codeBlockTheme?: CodeBlockTheme;
+    codeBlockThemeObject?: CodeStyling;
+    initialSelectedTab?: number;
+    onSelectedTabChange?: (index: number) => void;
+    askAiButton?: import("svelte").Snippet;
+    feedbackButton?: import("svelte").Snippet;
+    class?: string;
+    copyButtonProps?: CopyToClipboardButtonProps;
+};
+declare const CodeGroup: import("svelte").Component<CodeGroupProps, {}, "">;
+type CodeGroup = ReturnType<typeof CodeGroup>;
+export default CodeGroup;

package/dist/components/code-group/CodeGroupSelect.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "../../utils/cn";
+  import type { CodeBlockTheme, CodeStyling } from "../../utils/shiki/code-styling";
+  import BaseCodeBlock from "../code-block/BaseCodeBlock.svelte";
+  import CopyToClipboardButton from "../code-block/CopyToClipboardButton.svelte";
+  import type { CopyToClipboardButtonProps } from "../code-block/types";
+  import CodeSelectDropdown from "./CodeSelectDropdown.svelte";
+
+  const DEFAULT_CODE_SNIPPET_ARIA_LABEL = "Code snippet";
+
+  type ExampleCodeSnippet = {
+    filename: string;
+    code: string;
+    language: string;
+    audioUrl?: string;
+  };
+
+  type CodeGroupSelectProps = {
+    snippets: Record<string, Record<string, ExampleCodeSnippet>>;
+    class?: string;
+    syncedLabel?: string;
+    setSyncedLabel?: (label: string) => void;
+    setSelectedExampleIndex?: (index: number) => void;
+    askAiButton?: Snippet;
+    codeBlockTheme?: CodeBlockTheme;
+    codeBlockThemeObject?: CodeStyling;
+    codeSnippetAriaLabel?: string;
+    copyButtonProps?: CopyToClipboardButtonProps;
+  };
+
+  let {
+    snippets,
+    class: className,
+    syncedLabel,
+    setSyncedLabel,
+    setSelectedExampleIndex,
+    askAiButton,
+    codeBlockTheme = "system",
+    codeBlockThemeObject,
+    codeSnippetAriaLabel = DEFAULT_CODE_SNIPPET_ARIA_LABEL,
+    copyButtonProps,
+  }: CodeGroupSelectProps = $props();
+
+  let groups = $derived(Object.keys(snippets));
+  let selectedGroup = $state<string | undefined>();
+  let selectedOption = $state<string | undefined>();
+
+  let safeSelectedGroup = $derived(
+    selectedGroup && groups.includes(selectedGroup) ? selectedGroup : groups[0]
+  );
+  let groupSnippets = $derived(
+    safeSelectedGroup !== undefined ? snippets[safeSelectedGroup] : undefined
+  );
+  let options = $derived(
+    groupSnippets ? Object.keys(groupSnippets) : undefined
+  );
+  let safeSelectedOption = $derived(
+    selectedOption && options?.includes(selectedOption)
+      ? selectedOption
+      : options?.[0]
+  );
+  let snippet = $derived(
+    groupSnippets !== undefined && safeSelectedOption !== undefined
+      ? groupSnippets[safeSelectedOption]
+      : undefined
+  );
+
+  function handleGroupSelect(group: string) {
+    selectedGroup = group;
+    const newOptions = snippets[group] ? Object.keys(snippets[group]) : [];
+    const firstOption = newOptions[0];
+
+    if (firstOption !== undefined) {
+      selectedOption = firstOption;
+      setSelectedExampleIndex?.(0);
+      if (firstOption !== syncedLabel) {
+        setSyncedLabel?.(firstOption);
+      }
+    }
+  }
+
+  function handleOptionSelect(option: string) {
+    selectedOption = option;
+    const index = options?.indexOf(option) ?? -1;
+    setSelectedExampleIndex?.(index === -1 ? 0 : index);
+    if (option !== syncedLabel) {
+      setSyncedLabel?.(option);
+    }
+  }
+
+  $effect(() => {
+    if (
+      syncedLabel &&
+      syncedLabel !== safeSelectedOption &&
+      options?.includes(syncedLabel)
+    ) {
+      selectedOption = syncedLabel;
+      const index = options?.indexOf(syncedLabel) ?? -1;
+      setSelectedExampleIndex?.(index === -1 ? 0 : index);
+    }
+  });
+</script>
+
+<div
+  class={cn(
+    "not-prose relative flex min-w-full max-w-full flex-col overflow-hidden rounded-2xl p-0.5 text-xs leading-6",
+    "border border-gray-950/10 bg-gray-50 dark:border-white/10 dark:bg-white/5",
+    className
+  )}
+  data-testid="code-group-select"
+>
+  <div class="flex w-full justify-between rounded-t-2xl text-xs leading-6">
+    <CodeSelectDropdown
+      options={groups}
+      selectedOption={safeSelectedGroup}
+      setSelectedOption={handleGroupSelect}
+    />
+    <div class="flex overflow-hidden">
+      {#if options}
+        <CodeSelectDropdown
+          options={options}
+          selectedOption={safeSelectedOption}
+          setSelectedOption={handleOptionSelect}
+        />
+      {/if}
+      <div
+        class="flex items-center gap-1.5 pr-2.5"
+        data-testid="code-group-select-copy-button"
+      >
+        <CopyToClipboardButton
+          codeBlockTheme={codeBlockTheme}
+          textToCopy={snippet?.code ?? ""}
+          {...(copyButtonProps as Omit<CopyToClipboardButtonProps, "textToCopy">)}
+        />
+        {#if askAiButton}{@render askAiButton()}{/if}
+      </div>
+    </div>
+  </div>
+
+  <section
+    aria-label={codeSnippetAriaLabel}
+    class="flex flex-1 overflow-hidden"
+  >
+    <div class="relative h-full max-h-full w-full min-w-full max-w-full">
+      {#if snippet?.audioUrl}
+        <div class="p-4">
+          <audio class="w-full" controls src={snippet.audioUrl}>
+            <track kind="captions" />
+          </audio>
+        </div>
+      {:else}
+        <BaseCodeBlock
+          codeBlockTheme={codeBlockTheme}
+          codeBlockThemeObject={codeBlockThemeObject ?? codeBlockTheme}
+          codeString={snippet?.code ?? ""}
+          isParentCodeGroup={true}
+          isSmallText={true}
+          language={snippet?.language}
+        >
+          {#snippet children()}{snippet?.code ?? ""}{/snippet}
+        </BaseCodeBlock>
+      {/if}
+    </div>
+  </section>
+</div>
+
+<script lang="ts" module>
+  export type { CodeGroupSelectProps, ExampleCodeSnippet };
+</script>

package/dist/components/code-group/CodeGroupSelect.svelte.d.ts

@@ -0,0 +1,25 @@
+export type { CodeGroupSelectProps, ExampleCodeSnippet };
+import type { Snippet } from "svelte";
+import type { CodeBlockTheme, CodeStyling } from "../../utils/shiki/code-styling";
+import type { CopyToClipboardButtonProps } from "../code-block/types";
+type ExampleCodeSnippet = {
+    filename: string;
+    code: string;
+    language: string;
+    audioUrl?: string;
+};
+type CodeGroupSelectProps = {
+    snippets: Record<string, Record<string, ExampleCodeSnippet>>;
+    class?: string;
+    syncedLabel?: string;
+    setSyncedLabel?: (label: string) => void;
+    setSelectedExampleIndex?: (index: number) => void;
+    askAiButton?: Snippet;
+    codeBlockTheme?: CodeBlockTheme;
+    codeBlockThemeObject?: CodeStyling;
+    codeSnippetAriaLabel?: string;
+    copyButtonProps?: CopyToClipboardButtonProps;
+};
+declare const CodeGroupSelect: import("svelte").Component<CodeGroupSelectProps, {}, "">;
+type CodeGroupSelect = ReturnType<typeof CodeGroupSelect>;
+export default CodeGroupSelect;