feat(custom-widgets): complete Custom JSX v2 (#6390)

apps/docs/src/components/custom-widget-code.tsx

@@ -0,0 +1,82 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+import {
+  BundledCustomWidgetGalleryClient,
+  CanonicalCustomWidgetExampleClient,
+  CustomWidgetCodeInputClient,
+  CustomWidgetCodeExampleClient,
+} from "./custom-widget-code-client";
+
+export interface CustomWidgetCodeExampleProps {
+  id: string;
+  label: string;
+  code: string;
+  language?: "json" | "jsx";
+  height?: string;
+}
+
+export interface CustomWidgetCodeInputProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange(value: string): void;
+  language: "json" | "css";
+  description?: string;
+  placeholder?: string;
+  height?: string;
+  required?: boolean;
+  maxLength?: number;
+}
+
+export interface CanonicalCustomWidgetExampleProps {
+  id: string;
+  label: string;
+  example: "requests" | "options";
+  height?: string;
+}
+
+export function CanonicalCustomWidgetExample(props: CanonicalCustomWidgetExampleProps) {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
+      {() => <CanonicalCustomWidgetExampleClient {...props} />}
+    </BrowserOnly>
+  );
+}
+
+export function CustomWidgetCodeExample(props: CustomWidgetCodeExampleProps) {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
+      {() => <CustomWidgetCodeExampleClient {...props} />}
+    </BrowserOnly>
+  );
+}
+
+export function CustomWidgetCodeInput(props: CustomWidgetCodeInputProps) {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
+      {() => <CustomWidgetCodeInputClient {...props} />}
+    </BrowserOnly>
+  );
+}
+
+export function BundledCustomWidgetGallery() {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height="520px" />}>
+      {() => <BundledCustomWidgetGalleryClient />}
+    </BrowserOnly>
+  );
+}
+
+function CodeExampleFallback({ height }: { height?: string }) {
+  return (
+    <div
+      style={{
+        minHeight: height ?? "220px",
+        border: "1px solid var(--ifm-color-emphasis-300)",
+        borderRadius: "var(--ifm-global-radius)",
+        background: "var(--ifm-background-surface-color)",
+      }}
+      aria-busy="true"
+    />
+  );
+}