chore: add pagefind & CodeEditor wrapper

Author: zettca

apps/docs/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "pagefind --site dist --output-path dist/_pagefind",
     "start": "npx serve dist"
   },
   "dependencies": {
@@ -30,6 +31,7 @@
     "@types/node": "^20.11.6",
     "@types/react": "^18.2.43",
     "@unocss/postcss": "^66.0.0",
+    "pagefind": "^1.3.0",
     "raw-loader": "^4.0.2",
     "rehype-mdx-code-props": "^3.0.1",
     "string-replace-loader": "^3.1.0",

apps/docs/src/components/code/CodeEditor.tsx

@@ -0,0 +1,20 @@
+import {
+  CodeEditor as LiveCodeEditor,
+  type CodeEditorProps as LiveCodeEditorProps,
+} from "react-live-runner";
+import { clsx } from "clsx";
+
+export interface CodeEditorProps extends LiveCodeEditorProps {}
+
+export function CodeEditor({ className, ...others }: CodeEditorProps) {
+  return (
+    <LiveCodeEditor
+      data-pagefind-ignore
+      className={clsx(
+        "font-mono text-[.85em] rounded-b-round border-border",
+        className,
+      )}
+      {...others}
+    />
+  );
+}

apps/docs/src/components/code/ExpandableLayout.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { CodeEditor, useLiveRunner, type Scope } from "react-live-runner";
+import { useLiveRunner, type Scope } from "react-live-runner";
 import { clsx } from "clsx";
 
+import { CodeEditor } from "./CodeEditor";
 import { DocsContainer } from "./DocsProvider";
 import { ExpandableControls } from "./ExpandableControls";
 
@@ -51,16 +52,12 @@ export const ExpandableLayout = ({ scope, code }: ExpandableLayoutProps) => {
 
       {/* Code Editor Section */}
       <div
-        className="max-h-400px overflow-auto rounded-b-inherit -mt-xxs transition-max-height border-color-inherit"
+        className="overflow-auto -mt-xxs transition-max-height"
         style={{
           maxHeight: isExpanded ? 400 : 0,
         }}
       >
-        <CodeEditor
-          value={editorCode}
-          onChange={onChange}
-          className="font-mono text-[.85em] rounded-b-inherit border border-color-inherit"
-        />
+        <CodeEditor value={editorCode} onChange={onChange} className="border" />
       </div>
     </section>
   );

apps/docs/src/components/code/Playground.tsx

@@ -2,10 +2,10 @@
 
 import { Children, isValidElement, useCallback, useState } from "react";
 import jsxToString from "react-element-to-jsx-string";
-import { CodeEditor } from "react-live-runner";
 import { clsx } from "clsx";
 
 import { ComponentMeta } from "../../utils/component";
+import { CodeEditor } from "./CodeEditor";
 import { Controls, type Control } from "./Controls";
 import { DocsProvider } from "./DocsProvider";
 
@@ -138,9 +138,11 @@ export const Playground = ({
       </div>
 
       {/* Code editor */}
-      <div className="max-h-100 overflow-auto rounded-b-round border border-t-0 max-h-250px">
-        <CodeEditor readOnly className="font-mono text-[.85em]" value={code} />
-      </div>
+      <CodeEditor
+        readOnly
+        value={code}
+        className="max-h-250px overflow-auto border border-t-0"
+      />
     </section>
   );
 };

apps/docs/src/components/code/PopupLayout.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { CodeEditor, useLiveRunner, type Scope } from "react-live-runner";
+import { useLiveRunner, type Scope } from "react-live-runner";
 import { Check, Code, Copy } from "@phosphor-icons/react";
 import {
   HvDialog,
@@ -8,6 +8,7 @@ import {
   HvIconButton,
 } from "@hitachivantara/uikit-react-core";
 
+import { CodeEditor } from "./CodeEditor";
 import { DocsContainer } from "./DocsProvider";
 
 type PopupLayoutProps = {
@@ -70,7 +71,7 @@ export const PopupLayout = ({ id, scope, code }: PopupLayoutProps) => {
           <CodeEditor
             value={editorCode}
             onChange={onChange}
-            className="font-mono text-[.85em] rounded-round border border-color-inherit"
+            className="rounded-round border"
           />
         </HvDialogContent>
       </HvDialog>

apps/docs/src/components/code/ToggableLayout.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
-import { CodeEditor, useLiveRunner, type Scope } from "react-live-runner";
+import { useLiveRunner, type Scope } from "react-live-runner";
 import { clsx } from "clsx";
 import { HvTab, HvTabs, HvTypography } from "@hitachivantara/uikit-react-core";
 
+import { CodeEditor } from "./CodeEditor";
 import { DocsContainer } from "./DocsProvider";
 import { ToggableControls } from "./ToggableControls";
 
@@ -71,7 +72,6 @@ export const ToggableLayout = ({ title, scope, code }: ToggableLayoutProps) => {
             <CodeEditor
               value={Object.values(tmpCode)[activeTab]}
               onChange={handleEditorChange}
-              className="font-mono text-[.88em]"
             />
           </div>