chore: docs

Author: mathuo

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -28,7 +28,7 @@ const components = {
                     position: 'relative',
                 }}
             >
-                <Table data={metadata} />
+                {/* <Table data={metadata} /> */}
                 <span
                     style={{
                         position: 'absolute',

packages/docs/src/components/ui/reference/docRef.tsx

@@ -43,25 +43,31 @@ type DocsJson = {
 
 const newJson = docsJson_ as ExportedTypeFile;
 
-console.log(newJson);
-
 export const DocumentRef = (props: { value: TypeSystem.Type }) => {
-    if (!props.value) {
+    const code = React.useMemo(() => {
+        if (!props.value) {
+            return null;
+        }
+
+        switch (props.value.kind) {
+            case 'typeAlias':
+                return codify(props.value);
+            case 'interface':
+                return codify(props.value);
+            case 'class':
+                return codify(props.value);
+            case 'function':
+                return codify(props.value);
+            default:
+                return null;
+        }
+    }, [props.value]);
+
+    if (!code) {
         return null;
     }
 
-    switch (props.value.kind) {
-        case 'typealias':
-            return codify(props.value);
-        case 'interface':
-            return codify(props.value);
-        case 'class':
-            return codify(props.value);
-        case 'function':
-            return codify(props.value);
-        default:
-            return <div>{'error'}</div>;
-    }
+    return <CodeBlock language="tsx">{code}</CodeBlock>;
 };
 
 export const Text = (props: { content: DocsContent[] }) => {
@@ -211,13 +217,13 @@ export const DocRef = (props: DocRefProps) => {
                     return (
                         <>
                             <Row key={i} doc={doc} />
-                            <div>
+                            {/* <div>
                                 {firstLevel(doc).map((x) => (
                                     <span style={{ padding: '0px 2px' }}>
                                         <DocumentRef value={newJson[x]} />
                                     </span>
                                 ))}
-                            </div>
+                            </div> */}
                             {/* {doc.pieces?.map((piece) => (
                                 <tr>
                                     <th colSpan={2}>

packages/docs/src/components/ui/reference/types.ts

@@ -216,7 +216,7 @@ export function codify(value: TypeSystem.Type | null) {
 
     if (value.kind === 'typeLiteral') {
         if (value.properties) {
-            return `{ ${value.properties.map(codify).join(', ')} }`;
+            return `{\n${value.properties.map(codify).join(',\n')}\n}`;
         }
         if (value.signatures) {
             return value.signatures.map(codify).join('\n');
@@ -228,15 +228,19 @@ export function codify(value: TypeSystem.Type | null) {
     }
 
     if (value.kind === 'interface') {
-        return `interface ${value.name} { ${value.children
+        return `interface ${value.name} {\n${value.children
             .map(codify)
-            .join(',')} }`;
+            .join(',\n')}\n}`;
     }
 
     if (value.kind === 'class') {
-        return `interface ${value.name} { ${value.children
+        return `interface ${value.name} {\n${value.children
             .map(codify)
-            .join(',')} }`;
+            .join(',\n')}\n}`;
+    }
+
+    if (value.kind === 'typeAlias') {
+        return `type ${value.name} = ${codifyType(value.type)}`;
     }
 
     console.log('unreachable', value);
@@ -300,7 +304,7 @@ export namespace TypeSystem {
 
     export type TypeAlias = {
         name: string;
-        kind: 'typealias';
+        kind: 'typeAlias';
         typeParameters: TypeSystem.TypeParameter[];
         type: TypeDescriptor.Type;
         comment?: Comment;