@xyd-js/components 0.0.0-build-8b31648-20250923204702 → 0.0.0-build-ec04de2-20250930214016

package/src/coder/CodeSample/CodeSample.tsx

@@ -24,16 +24,18 @@ export interface CodeSampleProps {
     descriptionHead?: string
     descriptionContent?: string | React.ReactNode
     descriptionIcon?: string
+    markdownFormat?: boolean
     kind?: "secondary"
     controlByMeta?: boolean // TODO: BETTER IN THE FUTURE
 }
 
-const CodeContext = React.createContext<{
+export const CodeContext = React.createContext<{
     size?: "full"
     lineNumbers?: boolean
     descriptionHead?: string
     descriptionContent?: string | React.ReactNode
     descriptionIcon?: string
+    markdownFormat?: boolean
 }>({})
 
 export function CodeSample(props: CodeSampleProps) {
@@ -58,6 +60,7 @@ function $ThemedCodeSample(props: CodeSampleProps) {
             descriptionHead: props.descriptionHead,
             descriptionContent: props.descriptionContent,
             descriptionIcon: props.descriptionIcon,
+            markdownFormat: props.markdownFormat,
         }}>
             <Code.Pre
                 codeblock={highlighted[0]}
@@ -85,6 +88,7 @@ function $ThemedCodeSample(props: CodeSampleProps) {
         descriptionHead: props.descriptionHead,
         descriptionContent: props.descriptionContent,
         descriptionIcon: props.descriptionIcon,
+        markdownFormat: props.markdownFormat,
     }}>
         <$CodeSampleTabs
             description={props.description}

package/src/coder/CodeTabs/CodeTabs.tsx

@@ -1,128 +1,143 @@
-import React, { useState, useEffect } from "react";
-import {Tabs as TabsPrimitive} from "radix-ui"; // TODO: remove and use separation
-import {
-    HighlightedCode,
-} from "codehike/code"
+import React, { useState, useEffect, useContext } from "react";
+import { Tabs as TabsPrimitive } from "radix-ui"; // TODO: remove and use separation
+import { HighlightedCode } from "codehike/code";
 
-import {
-    CodeCopy,
-} from "../CodeCopy";
+import { CodeCopy } from "../CodeCopy";
 import * as cn from "./CodeTabs.styles"; // TODO: style by highlighted?
 import { SyntaxHighlightedCode } from "../CodeTheme/CodeTheme";
 import { useCodeSampleAnalytics } from "../CodeSample/CodeSampleAnalytics";
 import { useUXEvents } from "../../uxsdk";
+import { CodeContext } from "../CodeSample/CodeSample";
 
 export interface CodeTabsProps {
-    description: string;
-    highlighted: SyntaxHighlightedCode[]
-    className?: string
-    controlByMeta?: boolean // TODO: BETTER IN THE FUTURE
+  description: string;
+  highlighted: SyntaxHighlightedCode[];
+  className?: string;
+  controlByMeta?: boolean; // TODO: BETTER IN THE FUTURE
 }
 
 export function withCodeTabs(PreComponent) {
-    return function CodeTabs(props: CodeTabsProps) {
-        const isSingle = props?.highlighted?.length === 1 && !props.description
-        const defaultValue = props.highlighted[0]?.meta || props.highlighted[0]?.lang
-        const [activeTab, setActiveTab] = useState(defaultValue)
-
-        const codeSampleAnalytics = useCodeSampleAnalytics()
-        const ux = useUXEvents()
-
-        // Reset active tab when highlighted prop changes
-        useEffect(() => {
-            setActiveTab(defaultValue)
-        }, [defaultValue])
-
-        useEffect(() => {
-            codeSampleAnalytics.setActiveTab(activeTab)
-        }, [])
-
-        function changeTab(value: string) {
-            setActiveTab(value)
-            codeSampleAnalytics.setActiveTab(value)
-            ux.docs.code.tab_change({tab: value})
-        }
-
-        if (props?.highlighted?.length === 0) { 
-            return null
-        }
+  return function CodeTabs(props: CodeTabsProps) {
+    const isSingle = props?.highlighted?.length === 1 && !props.description;
+    const defaultValue =
+      props.highlighted[0]?.meta || props.highlighted[0]?.lang;
+    const [activeTab, setActiveTab] = useState(defaultValue);
+    const {markdownFormat} = useContext(CodeContext);
+
+    const codeSampleAnalytics = useCodeSampleAnalytics();
+    const ux = useUXEvents();
+
+    // Reset active tab when highlighted prop changes
+    useEffect(() => {
+      setActiveTab(defaultValue);
+    }, [defaultValue]);
+
+    useEffect(() => {
+      codeSampleAnalytics.setActiveTab(activeTab);
+    }, []);
+
+    function changeTab(value: string) {
+      setActiveTab(value);
+      codeSampleAnalytics.setActiveTab(value);
+      ux.docs.code.tab_change({ tab: value });
+    }
 
-        return (
-            <xyd-codetabs className={`${cn.CodeTabsHost} ${props.className || ""}`}>
-                <TabsPrimitive.Root
-                    part="root"
-                    data-single={String(isSingle)}
-                    data-nodescription={!props.description ? "true" : undefined}
-                    className={`${cn.CodeTabsRoot}`}
-                    style={props.highlighted[0]?.style}
-                    value={activeTab}
-                    onValueChange={changeTab}
-                >
-                    <$LanguageTabSwitcher
-                        description={props.description}
-                        highlighted={props.highlighted}
-                    />
+    if (props?.highlighted?.length === 0) {
+      return null;
+    }
 
-                    {props.highlighted?.map((codeblock, i) => (
-                        <TabsPrimitive.Content value={codeblock.meta || codeblock.lang} key={i}>
-                            <PreComponent
-                                style={codeblock?.style || codeblock?.style}
-                                codeblock={codeblock}
-                            />
-                        </TabsPrimitive.Content>
-                    ))}
-                </TabsPrimitive.Root>
-            </xyd-codetabs>
-        )
+    let ContentRoot = TabsPrimitive.Content
+    if (markdownFormat) { // TODO: BETTER IN THE FUTURE
+        ContentRoot = React.Fragment
     }
+    
+    return (
+      <xyd-codetabs className={`${cn.CodeTabsHost} ${props.className || ""}`}>
+        <TabsPrimitive.Root
+          part="root"
+          data-single={String(isSingle)}
+          data-nodescription={!props.description ? "true" : undefined}
+          className={`${cn.CodeTabsRoot}`}
+          style={props.highlighted[0]?.style}
+          value={activeTab}
+          onValueChange={changeTab}
+        >
+          <$LanguageTabSwitcher
+            description={props.description}
+            highlighted={props.highlighted}
+          />
+
+          {props.highlighted?.map((codeblock, i) => (
+            <ContentRoot
+              value={codeblock.meta || codeblock.lang}
+              key={i}
+            >
+              <PreComponent
+                style={codeblock?.style || codeblock?.style}
+                codeblock={codeblock}
+              />
+            </ContentRoot>
+          ))}
+        </TabsPrimitive.Root>
+      </xyd-codetabs>
+    );
+  };
 }
 
 interface LanguageTabSwitcherProps {
-    description: string;
-    highlighted: HighlightedCode[]
+  description: string;
+  highlighted: HighlightedCode[];
 }
 
 function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
-    const isSingle = props?.highlighted?.length === 1 && !props.description
-
-    const highlighted = props.highlighted.filter((item, index, self) =>
-        index === self.findIndex((t) => (t.meta || t.lang) === (item.meta || item.lang))
-    );
-    return <xyd-codetabs-languages
-        data-single={String(isSingle)}
-        className={`
+  const isSingle = props?.highlighted?.length === 1 && !props.description;
+
+  const highlighted = props.highlighted.filter(
+    (item, index, self) =>
+      index ===
+      self.findIndex((t) => (t.meta || t.lang) === (item.meta || item.lang))
+  );
+  return (
+    <xyd-codetabs-languages
+      data-single={String(isSingle)}
+      className={`
         ${cn.CodeTabsLanguagesHost}
-    `}>
-
-        {
-            props.description && <div part="description">
-                <div part="description-item">
-                    {props.description}
-                </div>
-            </div>
-        }
-
-        <TabsPrimitive.List part="languages-list">
-            {highlighted?.map(({ meta, lang }, i) => {
-                if (isSingle) {
-                    return null
-                }
-                return <TabsPrimitive.Trigger
-                    part="language-trigger"
-                    value={meta || lang}
-                    key={i}
-                >
-                    {meta || lang}
-                </TabsPrimitive.Trigger>
-            })}
-        </TabsPrimitive.List>
-
-        <div part="copy">
-            {highlighted?.map((codeblock, i) => (
-                <TabsPrimitive.Content value={codeblock.meta || codeblock.lang} asChild key={i}>
-                    <CodeCopy text={codeblock.value} />
-                </TabsPrimitive.Content>
-            ))}
+    `}
+    >
+      {props.description && (
+        <div part="description">
+          <div part="description-item">{props.description}</div>
         </div>
+      )}
+
+      <TabsPrimitive.List part="languages-list">
+        {highlighted?.map(({ meta, lang }, i) => {
+          if (isSingle) {
+            return null;
+          }
+          return (
+            <TabsPrimitive.Trigger
+              part="language-trigger"
+              value={meta || lang}
+              key={i}
+            >
+              {meta || lang}
+            </TabsPrimitive.Trigger>
+          );
+        })}
+      </TabsPrimitive.List>
+
+      <div part="copy">
+        {highlighted?.map((codeblock, i) => (
+          <TabsPrimitive.Content
+            value={codeblock.meta || codeblock.lang}
+            asChild
+            key={i}
+          >
+            <CodeCopy text={codeblock.value} />
+          </TabsPrimitive.Content>
+        ))}
+      </div>
     </xyd-codetabs-languages>
+  );
 }

package/dist/_rollupPluginBabelHelpers-iq1gUDHm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-iq1gUDHm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}