datocms-react-ui 1.1.1 → 2.0.1

package/src/ContextInspector/index.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Button, useCtx } from '..';
 import s from './styles.module.css.json';
+import { manifest } from 'datocms-plugin-sdk';
 
 const baseUrl =
-  'https://github.com/datocms/plugins-sdk/blob/master/packages/sdk/src/types.ts';
+  'https://github.com/datocms/plugins-sdk/blob/master/packages/sdk/';
 
 function copyTextToClipboard(text: string) {
   const textArea = document.createElement('textarea');
@@ -32,138 +32,12 @@ function copyTextToClipboard(text: string) {
   document.body.removeChild(textArea);
 }
 
-function addFinalPeriod(text: string) {
-  if (['!', '.'].includes(text[text.length - 1])) {
-    return text;
-  }
-
-  return `${text}.`;
-}
-
-function findChildrenById(manifest: any, id: string) {
-  return manifest.children.find((child: any) => child.id === id);
-}
-
-function findShortText(signature: any) {
-  return (
-    (signature.comment &&
-      addFinalPeriod(
-        signature.comment.summary.map((chunk: any) => chunk.text).join(''),
-      )) ||
-    null
-  );
-}
-
-function findFirstTag(signature: any, tagName: string): string | null {
-  if (!signature.comment || !signature.comment.blockTags) {
-    return null;
-  }
-
-  const tagNode = signature.comment.blockTags.find(
-    (tag: any) => tag.tag === tagName,
-  );
-
-  if (!tagNode) {
-    return null;
-  }
-
-  return tagNode.content.map((chunk: any) => chunk.text).join('');
-}
-
-function findExample(signature: any) {
-  const example = findFirstTag(signature, '@example');
-
-  if (!example) {
-    return null;
-  }
-
-  const lines = example
-    .split(/\n/)
-    .filter((l, i, all) => l.length !== 0 || (i !== 0 && i !== all.length - 1));
-
-  const spacesPerLine = lines.map((line) => {
-    const spaces = line.match(/^\s*/);
-    return spaces ? spaces[0].length : 0;
-  });
-
-  const commonIndentation = Math.min(...spacesPerLine);
-
-  const result = lines
-    .map((line) => line.substring(commonIndentation))
-    .join('\n');
-
-  return result.match(/```[a-z]*\n([\s\S]*?)\n```/)?.[1].trim();
-}
-
-function buildCtx(manifest: any, definition: any): any {
-  if (definition.type.type === 'intersection') {
-    let result: any[] = [];
-
-    for (const elementInIntersection of definition.type.types) {
-      if (elementInIntersection.type === 'reference') {
-        const innerDefinition = findChildrenById(
-          manifest,
-          elementInIntersection.id,
-        );
-        result = [...result, buildCtx(manifest, innerDefinition)];
-      }
-    }
-
-    return result.flat().filter((x) => x);
-  }
-
-  if (definition.type.type === 'reflection') {
-    const properties = definition.type.declaration.children.filter(
-      (child: any) =>
-        !['mode', 'getSettings', 'setHeight', 'bodyPadding'].includes(
-          child.name,
-        ),
-    );
-
-    if (properties.length === 0) {
-      return null;
-    }
-
-    return {
-      name: definition.name,
-      description: findShortText(definition),
-      properties: properties.map((child: any) => {
-        if (child.type?.declaration?.signatures) {
-          child.signatures = child.type.declaration.signatures;
-        }
-
-        if (child.signatures) {
-          const signature = child.signatures[0];
-          return {
-            name: child.name,
-            type: 'function',
-            description: findShortText(signature),
-            example: findExample(signature),
-            group: definition.name,
-            lineNumber: child.sources[0].line,
-          };
-        }
-
-        return {
-          name: child.name,
-          type: 'property',
-          description: findShortText(child),
-          example: findExample(child),
-          groupDescription: findShortText(definition),
-          group: definition.name,
-          lineNumber: child.sources[0].line,
-        };
-      }),
-    };
-  }
-
-  if (definition.type.type === 'reference') {
-    const innerDefinition = findChildrenById(manifest, definition.type.id);
-
-    return buildCtx(manifest, innerDefinition);
-  }
-
-  throw new Error(`Don\t know how to handle ${definition}`);
+function capitalize(input: string): string {
+  const transformed = input
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .toLowerCase();
+  return transformed.charAt(0).toUpperCase() + transformed.slice(1);
 }
 
 const ExpandablePane = ({ children, label }: any) => {
@@ -183,43 +57,10 @@ const ExpandablePane = ({ children, label }: any) => {
   );
 };
 
-export function ContextInspector(): JSX.Element {
+export function ContextInspector(): JSX.Element | null {
   const ctx = useCtx();
-  const [groups, setGroups] = useState<any[] | null>(null);
-
-  useEffect(() => {
-    const runner = async () => {
-      const response = await fetch(
-        'https://unpkg.com/datocms-plugin-sdk/types.json',
-      );
-      const manifest = await response.json();
-
-      const connectParameters = manifest.children.find(
-        (child: any) => child.name === 'FullConnectParameters',
-      );
-
-      const hook = connectParameters.type.declaration.children.find(
-        (hook: any) => hook.name === (ctx as any).mode,
-      );
-
-      const signature = hook.signatures
-        ? hook.signatures[0]
-        : hook.type.declaration.signatures[0];
-
-      const ctxParameter = signature.parameters.find(
-        (p: any) => p.name === 'ctx',
-      );
 
-      setGroups(
-        buildCtx(
-          manifest,
-          findChildrenById(manifest, ctxParameter.type.id),
-        ) as any[],
-      );
-    };
-
-    runner();
-  }, [setGroups]);
+  const hook = manifest.hooks[ctx.mode];
 
   const handleCopy = (text: string) => {
     copyTextToClipboard(text);
@@ -244,47 +85,56 @@ export function ContextInspector(): JSX.Element {
     )()(ctx);
   };
 
+  if (!hook.ctxArgument) {
+    return null;
+  }
+
+  const groups = [
+    ...manifest.baseCtx.properties,
+    ...(hook.ctxArgument.additionalProperties || []),
+    ...manifest.baseCtx.methods,
+    ...(hook.ctxArgument.additionalMethods || []),
+  ];
+
   return (
     <div className={s.inspector}>
-      {groups?.map((group) => {
-        const name = group.name
-          .replace('AdditionalMethods', 'Methods')
-          .replace('AdditionalProperties', 'Properties')
-          .replace('Methods', ' methods')
-          .replace('Properties', ' properties')
-          .replace('Utilities', ' utilities');
-
+      {groups.map((group) => {
         return (
-          <ExpandablePane label={`${name}`} key={name}>
-            <div className={s.groupDescription}>{group.description}</div>
+          <ExpandablePane
+            label={group.name ? capitalize(group.name) : 'Other'}
+            key={group.name}
+          >
             <div className={s.propertyGroup}>
-              {(group.properties || []).map((item: any) => (
-                <div key={item.name} className={s.propertyOrMethod}>
+              {group.comment?.comment && (
+                <div className={s.groupDescription}>
+                  {group.comment?.comment}
+                </div>
+              )}
+              {Object.entries(group.items).map(([name, info]) => (
+                <div key={name} className={s.propertyOrMethod}>
                   <div className={s.propertyOrMethodBody}>
                     <a
                       className={s.propertyOrMethodName}
-                      href={`${baseUrl}#L${item.lineNumber}`}
+                      href={`${baseUrl}${info.location.filePath}#L${info.location.lineNumber}`}
                       target="_blank"
                       rel="noreferrer"
                     >
-                      {item.name}
-                      {item.type === 'function' ? '()' : ''}
+                      {name}
+                      {info.type.startsWith('(') ? info.type : `: ${info.type}`}
                     </a>
 
-                    <div>{item.description}</div>
+                    <div>{info.comment?.comment}</div>
                   </div>
-                  {item.type === 'property' && (
+                  {!info.type.startsWith('(') && (
                     <div className={s.propertyOrMethodExample}>
-                      <pre>
-                        {JSON.stringify((ctx as any)[item.name], null, 2)}
-                      </pre>
+                      <pre>{JSON.stringify((ctx as any)[name], null, 2)}</pre>
                       <div className={s.propertyOrMethodExampleActions}>
                         <Button
                           type="button"
                           buttonSize="xxs"
                           onClick={handleCopy.bind(
                             null,
-                            JSON.stringify((ctx as any)[item.name], null, 2),
+                            JSON.stringify((ctx as any)[name], null, 2),
                           )}
                         >
                           Copy value
@@ -292,22 +142,22 @@ export function ContextInspector(): JSX.Element {
                       </div>
                     </div>
                   )}
-                  {item.example && (
+                  {info.comment?.example && (
                     <div className={s.propertyOrMethodExample}>
-                      <pre>{item.example}</pre>
+                      <pre>{info.comment.example}</pre>
                       <div className={s.propertyOrMethodExampleActions}>
                         <Button
                           type="button"
                           buttonSize="xxs"
                           buttonType="primary"
-                          onClick={handleRun.bind(null, item.example)}
+                          onClick={handleRun.bind(null, info.comment.example)}
                         >
                           Run example
                         </Button>
                         <Button
                           type="button"
                           buttonSize="xxs"
-                          onClick={handleCopy.bind(null, item.example)}
+                          onClick={handleCopy.bind(null, info.comment.example)}
                         >
                           Copy example
                         </Button>

package/src/generateStyleFromCtx/index.ts

@@ -1,5 +1,5 @@
-import type { RenderProperties } from 'datocms-plugin-sdk';
 import type { CSSProperties } from 'react';
+import { BaseCtx } from '../Canvas';
 
 function camelToDash(str: string) {
   if (str === str.toLowerCase()) {
@@ -9,7 +9,7 @@ function camelToDash(str: string) {
 }
 
 export function generateStyleFromCtx(
-  ctx: RenderProperties,
+  ctx: BaseCtx,
   noBodyPadding = false,
 ): CSSProperties {
   return {