datocms-react-ui 0.3.27 → 0.3.31

package/src/ContextInspector/index.tsx

@@ -0,0 +1,316 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useState } from 'react';
+import { Button, useCtx } from '..';
+import s from './styles.module.css.json';
+
+const baseUrl =
+  'https://github.com/datocms/plugins-sdk/blob/master/packages/sdk/src/types.ts';
+
+function copyTextToClipboard(text: string) {
+  const textArea = document.createElement('textarea');
+  textArea.style.position = 'fixed';
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.width = '2em';
+  textArea.style.height = '2em';
+  textArea.style.padding = '0';
+  textArea.style.border = 'none';
+  textArea.style.outline = 'none';
+  textArea.style.boxShadow = 'none';
+  textArea.style.background = 'transparent';
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    document.execCommand('copy');
+  } catch (err) {
+    // NOP
+  }
+
+  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.shortText)) || null
+  );
+}
+
+function findFirstTag(signature: any, tagName: string): string | null {
+  if (!signature.comment || !signature.comment.tags) {
+    return null;
+  }
+
+  const tagNode = signature.comment.tags.find(
+    (tag: any) => tag.tag === tagName,
+  );
+
+  if (!tagNode) {
+    return null;
+  }
+
+  return tagNode.text;
+}
+
+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) {
+  if (definition.type.type === 'intersection') {
+    let result: any[] = [];
+
+    definition.type.types.forEach((elementInIntersection: any) => {
+      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 &&
+          child.type.declaration &&
+          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,
+        };
+      }),
+    };
+  }
+
+  throw new Error(`Don\t know how to handle ${definition}`);
+}
+
+const ExpandablePane = ({ children, label }: any) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={s.panel}>
+      <button
+        className={s.panelHandle}
+        onClick={() => setOpen((open) => !open)}
+      >
+        {label}
+      </button>
+      {open && <div className={s.panelBody}>{children}</div>}
+    </div>
+  );
+};
+
+export function ContextInspector(): JSX.Element {
+  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.signatures[0].name === (ctx as any).mode,
+      );
+
+      const signature = hook.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 handleCopy = (text: string) => {
+    copyTextToClipboard(text);
+    (ctx as any).notice('Copied to clipboard!');
+  };
+
+  const handleRun = (example: string) => {
+    Function(
+      `
+        "use strict";
+        return(
+          async function(ctx) {
+            try {
+              ${example}
+            } catch(e) {
+              console.error(e);
+              await ctx.alert('Execution failed! See console for errors!');
+            }
+          }
+        )
+      `,
+    )()(ctx);
+  };
+
+  return (
+    <div className={s.inspector}>
+      {groups &&
+        groups.map((group) => {
+          const name = group.name
+            .replace('AdditionalMethods', 'Methods')
+            .replace('AdditionalProperties', 'Properties')
+            .replace('Methods', ' methods')
+            .replace('Properties', ' properties')
+            .replace('Utilities', ' utilities');
+
+          return (
+            <ExpandablePane label={`${name}`} key={name}>
+              <div className={s.groupDescription}>{group.description}</div>
+              <div className={s.propertyGroup}>
+                {(group.properties || []).map((item: any) => (
+                  <div key={item.name} className={s.propertyOrMethod}>
+                    <div className={s.propertyOrMethodBody}>
+                      <a
+                        className={s.propertyOrMethodName}
+                        href={`${baseUrl}#L${item.lineNumber}`}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {item.name}
+                        {item.type === 'function' ? '()' : ''}
+                      </a>
+
+                      <div>{item.description}</div>
+                    </div>
+                    {item.type === 'property' && (
+                      <div className={s.propertyOrMethodExample}>
+                        <pre>
+                          {JSON.stringify((ctx as any)[item.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),
+                            )}
+                          >
+                            Copy value
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                    {item.example && (
+                      <div className={s.propertyOrMethodExample}>
+                        <pre>{item.example}</pre>
+                        <div className={s.propertyOrMethodExampleActions}>
+                          <Button
+                            type="button"
+                            buttonSize="xxs"
+                            buttonType="primary"
+                            onClick={handleRun.bind(null, item.example)}
+                          >
+                            Run example
+                          </Button>
+                          <Button
+                            type="button"
+                            buttonSize="xxs"
+                            onClick={handleCopy.bind(null, item.example)}
+                          >
+                            Copy example
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </ExpandablePane>
+          );
+        })}
+    </div>
+  );
+}

package/src/ContextInspector/styles.module.css

@@ -0,0 +1,90 @@
+.inspector {
+  margin: var(--spacing-l) 0;
+}
+
+.panel {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.panelHandle {
+  all: inherit;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  font-weight: var(--font-weight-bold);
+  background: var(--light-bg-color);
+  border: 0;
+  padding: 5px 10px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--lighter-bg-color);
+  }
+}
+
+.panelBody {
+  padding: 20px;
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+}
+
+.groupDescription {
+  line-height: 1.2;
+  margin-bottom: 20px;
+  font-size: var(--font-size-s);
+}
+
+.propertyGroup {
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+}
+
+.propertyOrMethod {
+  border-bottom: 1px solid var(--border-color);
+  line-height: 1.2;
+
+  p {
+    margin: 0;
+  }
+}
+
+.propertyOrMethodBody {
+  padding: 15px;
+}
+
+.propertyOrMethodExample {
+  position: relative;
+
+  pre {
+    padding: 15px;
+    background: var(--light-bg-color);
+    font-size: 0.8em;
+    margin: 0;
+    max-height: 240px;
+    overflow: auto;
+  }
+}
+
+.propertyOrMethodName {
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  color: var(--light-body-color);
+  font-family: var(--monospaced-font-family);
+  font-size: 0.9em;
+  margin-bottom: 5px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.propertyOrMethodExampleActions {
+  padding: 15px;
+  background: white;
+  display: flex;
+
+  > * {
+    margin-right: 10px;
+  }
+}

package/src/ContextInspector/styles.module.css.json

@@ -0,0 +1 @@
+{"inspector":"_inspector_u6041_1","panel":"_panel_u6041_5","panelHandle":"_panelHandle_u6041_9","panelBody":"_panelBody_u6041_25","groupDescription":"_groupDescription_u6041_31","propertyGroup":"_propertyGroup_u6041_37","propertyOrMethod":"_propertyOrMethod_u6041_42","propertyOrMethodBody":"_propertyOrMethodBody_u6041_51","propertyOrMethodExample":"_propertyOrMethodExample_u6041_55","propertyOrMethodName":"_propertyOrMethodName_u6041_68","propertyOrMethodExampleActions":"_propertyOrMethodExampleActions_u6041_82"}

package/src/Dropdown/Dropdown.tsx

@@ -0,0 +1,171 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { MediaQuery } from '../useMediaQuery';
+import { useClickOutside } from '../useClickOutside';
+import { DropdownContext } from './DropdownContext';
+import s from './styles.module.css.json';
+
+type RenderTriggerCtx = {
+  open: boolean;
+  onClick: () => void;
+};
+
+export type DropdownProps = {
+  renderTrigger: (ctx: RenderTriggerCtx) => JSX.Element;
+  children: React.ReactNode;
+};
+
+/**
+ * @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Options
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownOption onClick={() => {}}>Edit</DropdownOption>
+ *       <DropdownOption disabled onClick={() => {}}>
+ *         Duplicate
+ *       </DropdownOption>
+ *       <DropdownSeparator />
+ *       <DropdownOption red onClick={() => {}}>
+ *         Delete
+ *       </DropdownOption>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ *
+ * @example Option actions
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Fields
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownOption>
+ *         First option
+ *         <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
+ *         <DropdownOptionAction
+ *           red
+ *           icon={<TrashIcon />}
+ *           onClick={() => {}}
+ *         />
+ *       </DropdownOption>
+ *       <DropdownOption>
+ *         Second option
+ *         <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
+ *         <DropdownOptionAction
+ *           red
+ *           icon={<TrashIcon />}
+ *           onClick={() => {}}
+ *         />
+ *       </DropdownOption>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ *
+ * @example Option groups
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Dropdown
+ *     renderTrigger={({ open, onClick }) => (
+ *       <Button
+ *         onClick={onClick}
+ *         rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
+ *       >
+ *         Fields
+ *       </Button>
+ *     )}
+ *   >
+ *     <DropdownMenu>
+ *       <DropdownGroup name="Group 1">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *       <DropdownGroup name="Group 2">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *       <DropdownGroup name="Group 3">
+ *         <DropdownOption>Foo</DropdownOption>
+ *         <DropdownOption>Bar</DropdownOption>
+ *         <DropdownOption>Qux</DropdownOption>
+ *       </DropdownGroup>
+ *     </DropdownMenu>
+ *   </Dropdown>
+ * </Canvas>;
+ * ```
+ */
+export function Dropdown({
+  renderTrigger,
+  children,
+}: DropdownProps): JSX.Element {
+  const isClickOutsideEnabled = useRef<boolean>();
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    isClickOutsideEnabled.current = false;
+  }, []);
+
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (
+        isClickOutsideEnabled.current &&
+        !event.target.closest('.' + s['Dropdown__menu']) &&
+        isOpen
+      ) {
+        setOpen(false);
+      }
+    },
+    [setOpen, isOpen, isClickOutsideEnabled],
+  );
+
+  const outsideRef = useClickOutside<HTMLDivElement>(handleClickOutside);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  const handleToggle = useCallback(() => {
+    setOpen((open) => !open);
+  }, [setOpen]);
+
+  return (
+    <MediaQuery media="(max-width: 1024px)">
+      {({ matches }) => {
+        // In small devices click outside is disabled because
+        // the menu goes full screen and has a close button.
+        isClickOutsideEnabled.current = !matches;
+
+        return (
+          <DropdownContext.Provider value={{ closeMenu: handleClose }}>
+            <div className={s['Dropdown']} ref={outsideRef}>
+              {renderTrigger({ open: isOpen, onClick: handleToggle })}
+              {isOpen && children}
+            </div>
+          </DropdownContext.Provider>
+        );
+      }}
+    </MediaQuery>
+  );
+}

package/src/Dropdown/DropdownContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+type DropdownContextType = {
+  closeMenu: () => void;
+};
+
+export const DropdownContext = createContext<DropdownContextType>({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  closeMenu: () => {},
+});

package/src/Dropdown/Group.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import s from './styles.module.css.json';
+
+export type GroupProps = {
+  children: React.ReactNode;
+  name: ReactNode;
+};
+
+export const Group = ({ children, name }: GroupProps): JSX.Element => {
+  return (
+    <div>
+      <div className={s['Dropdown__menu__group__title']}>{name}</div>
+      <div className={s['Dropdown__menu__group__content']}>{children}</div>
+    </div>
+  );
+};