datocms-react-ui 0.3.27 → 0.3.28

package/src/Canvas/index.tsx

@@ -0,0 +1,556 @@
+import React, { createContext, ReactNode, useContext, useEffect } from 'react';
+import {
+  RenderMethods,
+  RenderProperties,
+  SizingUtilities,
+} from 'datocms-plugin-sdk';
+import s from './styles.module.css.json';
+import { generateStyleFromCtx } from '../generateStyleFromCtx';
+import classNames from 'classnames';
+
+type BaseRenderPropertiesAndMethods = RenderProperties & RenderMethods;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const CtxContext = createContext<BaseRenderPropertiesAndMethods | null>(
+  null,
+);
+
+export function useCtx<T extends BaseRenderPropertiesAndMethods>(): T {
+  const ctx = useContext(CtxContext);
+
+  if (!ctx) {
+    throw new Error('useCtx requires <Canvas />!');
+  }
+
+  return ctx as T;
+}
+
+export type CanvasProps = {
+  ctx: BaseRenderPropertiesAndMethods;
+  noAutoResizer?: boolean;
+  children: ReactNode;
+};
+
+/**
+ * @example Color palette CSS variables
+ *
+ * Within the `Canvas` component, a color palette is made available as a set of
+ * CSS variables, allowing you to conform to the theme of the current environment:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Section title="Text colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--base-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--base-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--placeholder-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--placeholder-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="UI colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--light-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--lighter-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--lighter-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--disabled-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--disabled-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--darker-border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--darker-border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--alert-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--alert-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--notice-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--notice-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--add-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--add-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--remove-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--remove-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="Project-specific colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--accent-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--accent-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--primary-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--primary-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--dark-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--dark-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Typography CSS variables
+ *
+ * Typography is a foundational element in UI design. Good typography
+ * establishes a strong, cohesive visual hierarchy and presents content clearly
+ * and efficiently to users. Within the `Canvas` component, a set of CSS
+ * variables is available allowing your plugin to conform to the overall
+ * look&feel of DatoCMS:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xxs)' }}>
+ *             Size XXS
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-s</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-m</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-l)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size L
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ *
+ * @example Spacing CSS variables
+ *
+ * The following CSS variables are available as well, to mimick the spacing
+ * between elements used by the main DatoCMS application. Negative spacing
+ * variables are available too (`--negative-spacing-<SIZE>`).
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-s</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-s)',
+ *               height: 'var(--spacing-s)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-m</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-m)',
+ *               height: 'var(--spacing-m)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-l)',
+ *               height: 'var(--spacing-l)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xl)',
+ *               height: 'var(--spacing-xl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxl)',
+ *               height: 'var(--spacing-xxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxxl)',
+ *               height: 'var(--spacing-xxxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ */
+
+export function Canvas({
+  ctx,
+  children,
+  noAutoResizer,
+}: CanvasProps): JSX.Element {
+  const { mode } = (ctx as unknown) as { mode: string };
+
+  useEffect(() => {
+    if (mode !== 'renderPage' && !noAutoResizer) {
+      const ctxWithAutoResizer = (ctx as unknown) as SizingUtilities;
+      ctxWithAutoResizer.startAutoResizer();
+
+      return () => {
+        ctxWithAutoResizer.stopAutoResizer();
+      };
+    }
+
+    return undefined;
+  }, [mode, noAutoResizer]);
+
+  return (
+    <CtxContext.Provider value={ctx}>
+      <div
+        className={classNames(s['themeVariables'], s['canvas'])}
+        style={generateStyleFromCtx(ctx)}
+      >
+        {children}
+      </div>
+    </CtxContext.Provider>
+  );
+}

package/src/Canvas/styles.module.css

@@ -0,0 +1,75 @@
+.themeVariables {
+  /* Colors */
+  --base-body-color: rgb(52, 54, 58);
+  --base-body-color-rgb-components: 52, 54, 58;
+  --light-body-color: rgb(132, 132, 132);
+  --light-body-color-rgb-components: 132, 132, 132;
+  --placeholder-body-color: rgb(198, 198, 198);
+  --placeholder-body-color-rgb-components: 198, 198, 198;
+  --light-bg-color: rgb(245, 245, 245);
+  --light-bg-color-rgb-components: 245, 245, 245;
+  --lighter-bg-color: rgb(248, 248, 248);
+  --lighter-bg-color-rgb-components: 248, 248, 248;
+  --disabled-bg-color: rgb(237, 237, 237);
+  --disabled-bg-color-rgb-components: 237, 237, 237;
+  --border-color: rgb(240, 240, 240);
+  --border-color-rgb-components: 240, 240, 240;
+  --darker-border-color: rgb(215, 215, 215);
+  --darker-border-color-rgb-components: 215, 215, 215;
+  --alert-color: rgb(255, 94, 73);
+  --alert-color-rgb-components: 255, 94, 73;
+  --warning-color: rgb(255, 215, 0);
+  --warning-color-rgb-components: 255, 215, 0;
+  --notice-color: rgb(70, 215, 0);
+  --notice-color-rgb-components: 70, 215, 0;
+  --warning-bg-color: rgb(255, 255, 229);
+  --warning-bg-color-rgb-components: 255, 255, 229;
+  --add-color: rgb(76, 176, 109);
+  --add-color-rgb-components: 76, 176, 109;
+  --remove-color: rgb(235, 87, 106);
+  --remove-color-rgb-components: 235, 87, 106;
+
+  /* Fonts */
+  --base-font-family: 'colfax-web', 'Roboto', 'Helvetica Neue', Helvetica,
+    Roboto, Arial, sans-serif;
+  --monospaced-font-family: 'Roboto Mono', 'Menlo', 'Bitstream Vera Sans Mono',
+    Consolas, Courier, monospace;
+  --font-weight-bold: 500;
+
+  /* Spacing */
+  --spacing-s: calc(0.5 * 12 * 0.0625rem);
+  --spacing-m: calc(1 * 12 * 0.0625rem);
+  --spacing-l: calc(2 * 12 * 0.0625rem);
+  --spacing-xl: calc(3 * 12 * 0.0625rem);
+  --spacing-xxl: calc(5 * 12 * 0.0625rem);
+  --spacing-xxxl: calc(8 * 12 * 0.0625rem);
+
+  --negative-spacing-s: calc(-0.5 * 12 * 0.0625rem);
+  --negative-spacing-m: calc(-1 * 12 * 0.0625rem);
+  --negative-spacing-l: calc(-2 * 12 * 0.0625rem);
+  --negative-spacing-xl: calc(-3 * 12 * 0.0625rem);
+  --negative-spacing-xxl: calc(-5 * 12 * 0.0625rem);
+  --negative-spacing-xxxl: calc(-8 * 12 * 0.0625rem);
+
+  /* Font-size */
+  --font-size-xxs: calc(11 * 0.0625rem);
+  --font-size-xs: calc(12 * 0.0625rem);
+  --font-size-s: calc(14 * 0.0625rem);
+  --font-size-m: calc(15 * 0.0625rem);
+  --font-size-l: calc(17 * 0.0625rem);
+  --font-size-xl: calc(19 * 0.0625rem);
+  --font-size-xxl: calc(25 * 0.0625rem);
+  --font-size-xxxl: calc(30 * 0.0625rem);
+
+  --material-ease: cubic-bezier(0.55, 0, 0.1, 1);
+  --inertial-ease: cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.canvas {
+  font-family: var(--base-font-family);
+  -webkit-text-size-adjust: 100%;
+  line-height: 1.5;
+  color: var(--base-body-color);
+  font-size: var(--font-size-m);
+  text-rendering: optimizeLegibility;
+}

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

@@ -0,0 +1 @@
+{"themeVariables":"_themeVariables_ovgoa_1","canvas":"_canvas_ovgoa_68"}