WIP examples from sanity data (#1086)

* WIP examples from sanity data

* Organize inputs

* Fix styles and scope

* Fix component preview

* Change title to caption

Author: oscarcarlstrom

apps/docs/app/routes/_docs/komponenter/$slug.tsx

@@ -1,7 +1,6 @@
 import * as badgeExamples from '@/examples/badge';
 import * as buttonExamples from '@/examples/button';
 import { sanityFetch } from '@/lib/sanity';
-import { ComponentPreview } from '@/ui/component-preview';
 import { Content } from '@/ui/content';
 import { PropsTable } from '@/ui/props-table';
 import { createFileRoute, notFound } from '@tanstack/react-router';
@@ -46,10 +45,6 @@ function Page() {
 
       <Content content={data.content ?? []} />
 
-      {examples.map(({ title, code }) => (
-        <ComponentPreview scope={scope} key={title} title={title} code={code} />
-      ))}
-
       <PropsTable props={componentProps} />
     </>
   );

apps/docs/app/ui/component-preview.tsx

@@ -7,60 +7,56 @@ import reactElementToJSXString from 'react-element-to-jsx-string';
 import { LiveEditor, LivePreview, LiveProvider } from 'react-live';
 
 type ComponentPreviewProps = {
-  title: string;
+  caption: string;
   /** @alpha - Passing a React.ReactNode is currently not compatible with React 19, pass a string to make it work with React 19 until react-element-to-jsx-string supports React 19  */
   code: React.ReactNode | string;
-  /** All custom components that are rendered must be present in the scope */
-  scope: Partial<typeof GrunnmurenIconsScope & typeof GrunnmurenScope>;
 };
 
-export const ComponentPreview = ({
-  title,
-  code,
-  scope,
-}: ComponentPreviewProps) => {
+export const ComponentPreview = ({ caption, code }: ComponentPreviewProps) => {
   // Keep of the code string in state to be able to copy it
   const [codeString, setCodeString] = useState(
     typeof code === 'string' ? code : reactElementToJSXString(code),
   );
 
   const [hasCopied, setHasCopied] = useState(false);
+
   return (
-    <LiveProvider code={codeString} scope={scope} theme={themes.vsDark}>
-      <div className="my-8 grid gap-y-4">
-        <h2 className="heading-m">{title}</h2>
-        <hr />
-        <LivePreview className="flex gap-x-4" />
-        <div className="grid grid-cols-[1fr,auto] grid-rows-[auto,1fr] overflow-hidden rounded-lg bg-[#1e1e1e]">
-          <LiveEditor
-            tabMode="focus"
-            // Use the same black color as the background on the editor
-            className="row-span-2 font-mono"
-            onChange={(newCode) => setCodeString(newCode)}
-          />
-          <div className="relative text-mint">
-            <GrunnmurenScope.Button
-              onPress={() =>
-                navigator.clipboard.writeText(codeString).then(() => {
-                  setHasCopied(true);
-                  setTimeout(() => setHasCopied(false), 2000); // Reset after 2 seconds
-                })
-              }
-              variant="tertiary"
-            >
-              <GrunnmurenIconsScope.Documents />
-            </GrunnmurenScope.Button>
-            <span
-              className={cx(
-                'absolute right-2 top-full transition-opacity duration-100',
-                hasCopied ? 'opacity-100' : 'opacity-0',
-              )}
-              aria-hidden={!hasCopied}
-              role="alert"
-            >
-              Kopiert!
-            </span>
-          </div>
+    <LiveProvider
+      code={codeString}
+      scope={{ ...GrunnmurenIconsScope, ...GrunnmurenScope }}
+      theme={themes.vsDark}
+    >
+      <p>{caption}</p>
+      <LivePreview className="my-4 flex gap-x-4" />
+      <div className="grid grid-cols-[1fr,auto] grid-rows-[auto,1fr] overflow-hidden rounded-lg bg-[#1e1e1e]">
+        <LiveEditor
+          tabMode="focus"
+          // Use the same black color as the background on the editor
+          className="row-span-2 font-mono"
+          onChange={(newCode) => setCodeString(newCode)}
+        />
+        <div className="relative text-mint">
+          <GrunnmurenScope.Button
+            onPress={() =>
+              navigator.clipboard.writeText(codeString).then(() => {
+                setHasCopied(true);
+                setTimeout(() => setHasCopied(false), 2000); // Reset after 2 seconds
+              })
+            }
+            variant="tertiary"
+          >
+            <GrunnmurenIconsScope.Documents />
+          </GrunnmurenScope.Button>
+          <span
+            className={cx(
+              'absolute right-2 top-full transition-opacity duration-100',
+              hasCopied ? 'opacity-100' : 'opacity-0',
+            )}
+            aria-hidden={!hasCopied}
+            role="alert"
+          >
+            Kopiert!
+          </span>
         </div>
       </div>
     </LiveProvider>

apps/docs/app/ui/content.tsx

@@ -1,7 +1,14 @@
 import { PortableText } from '@portabletext/react';
 import type { Content as IContent } from 'sanity.types';
+import { ComponentPreview } from './component-preview';
 
-const components = {};
+const components = {
+  types: {
+    'live-code-block': ({ value }) => (
+      <ComponentPreview caption={value.caption} code={value.code.code} />
+    ),
+  },
+};
 
 export function Content({ content }: { content: IContent }) {
   return (

apps/docs/app/ui/props-table.tsx

@@ -12,7 +12,7 @@ interface PropsTableProps {
 }
 
 export const PropsTable = ({ props }: PropsTableProps) => (
-  <table className="w-full">
+  <table className="my-12 w-full">
     <caption className="heading-m mb-2 text-left">Props</caption>
     <thead>
       <tr className="bg-sky-lightest text-left align-baseline *:px-3 *:py-2">