datocms-react-ui 2.1.0-alpha.0 → 2.1.0-alpha.2

package/dist/types/VerticalSplit/index.d.ts

@@ -0,0 +1,238 @@
+import React from 'react';
+export declare type VerticalSplitProps = {
+    mode?: 'overlay' | 'split';
+    minSize?: number | string;
+    maxSize?: number | string;
+    size?: number | string;
+    primaryPane: 'left' | 'right';
+    isSecondaryCollapsed?: boolean;
+    allowResize?: boolean;
+    children: [React.ReactNode, React.ReactNode];
+    onDragFinished?: (newSize: number) => void;
+    onSecondaryToggle?: (secondaryExpanded: boolean) => void;
+};
+/**
+ * @example Resizable, left primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="left" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Resizable, right primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="right" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ *
+ * @example Overlay mode
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            mode="overlay"
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ */
+export declare function VerticalSplit({ mode, minSize, maxSize, size, primaryPane, children, allowResize, onDragFinished, onSecondaryToggle, isSecondaryCollapsed, }: VerticalSplitProps): JSX.Element;

package/dist/types/icons.d.ts

@@ -10,3 +10,6 @@ export declare function SidebarLeftArrowIcon({ width, height, style, className,
 export declare function SidebarRightArrowIcon({ width, height, style, className, }: IconProps): JSX.Element;
 export declare function CaretDownIcon({ width, height, style, className, }: IconProps): JSX.Element;
 export declare function CaretUpIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function ChevronsLeftIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function ChevronsRightIcon({ width, height, style, className, }: IconProps): JSX.Element;
+export declare function SidebarFlipIcon({ width, height, style, className, }: IconProps): JSX.Element;

package/dist/types/index.d.ts

@@ -6,21 +6,25 @@ export * from './Dropdown';
 export * from './FieldError';
 export * from './FieldGroup';
 export * from './FieldHint';
-export * from './Form';
 export * from './FieldWrapper';
+export * from './Form';
 export * from './FormLabel';
+export * from './HotKey';
 export * from './icons';
 export * from './Section';
 export * from './SelectField';
 export * from './SelectInput';
 export * from './SidebarPanel';
 export * from './Spinner';
+export * from './SplitView';
 export * from './SwitchField';
 export * from './SwitchInput';
-export * from './TextField';
-export * from './TextInput';
 export * from './TextareaField';
 export * from './TextareaInput';
+export * from './TextField';
+export * from './TextInput';
 export * from './Toolbar';
+export * from './Tooltip';
 export * from './useClickOutside';
 export * from './useMediaQuery';
+export * from './VerticalSplit';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "2.1.0-alpha.0",
+  "version": "2.1.0-alpha.2",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -40,8 +40,9 @@
     "url": "https://github.com/datocms/plugins-sdk/issues"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.16",
     "classnames": "^2.3.1",
-    "datocms-plugin-sdk": "^2.1.0-alpha.0",
+    "datocms-plugin-sdk": "^2.1.0-alpha.2",
     "react-intersection-observer": "^8.31.0",
     "react-select": "^5.2.1",
     "scroll-into-view-if-needed": "^2.2.20"
@@ -57,5 +58,5 @@
     "postcss-nested": "^5.0.6",
     "typedoc": "^0.26.7"
   },
-  "gitHead": "614ec540796d1d8065543bc6ff88da2f62764956"
+  "gitHead": "774ac774ad3125a0ee778b691a660d651cd67f29"
 }

package/src/HotKey/index.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import styles from './styles.module.css.json';
+
+const isMac = navigator.platform.indexOf('Mac') > -1;
+const modifierKey = isMac ? '⌘' : 'Ctrl';
+
+export type HotKeyProps = {
+  /**
+   * Keyboard shortcut string. Use "mod" for platform-specific modifier (Cmd on Mac, Ctrl elsewhere).
+   * Separate keys with "+". Examples: "mod+s", "mod+shift+p", "alt+enter"
+   */
+  hotkey: string;
+  /** Optional label to display before the key combination */
+  label?: string;
+};
+
+/**
+ * HotKey component displays keyboard shortcuts in a platform-aware format.
+ *
+ * The component automatically detects the user's platform and renders appropriate
+ * modifier key symbols (⌘ for Mac, Ctrl for Windows/Linux).
+ *
+ * @example Basic usage
+ *
+ * Display a simple keyboard shortcut without a label:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" />
+ * </Canvas>;
+ * ```
+ *
+ * @example With label
+ *
+ * Include a descriptive label to explain what the keyboard shortcut does:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <HotKey hotkey="mod+s" label="Save" />
+ * </Canvas>;
+ * ```
+ *
+ * @example Multiple hotkeys
+ *
+ * Display a list of keyboard shortcuts with labels for documenting available commands:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+c" label="Copy" />
+ *     <HotKey hotkey="mod+v" label="Paste" />
+ *     <HotKey hotkey="mod+shift+z" label="Redo" />
+ *     <HotKey hotkey="alt+enter" label="Submit" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Platform-specific rendering
+ *
+ * The component automatically adapts modifier keys based on the user's platform:
+ * - `mod` renders as `⌘` on Mac and `Ctrl` on Windows/Linux
+ * - `alt` renders as `⌥` on Mac and `Alt` on Windows/Linux
+ *
+ * This ensures the correct symbols are displayed for the user's operating system:
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-m)' }}>
+ *     <HotKey hotkey="mod+k" label="Open command palette" />
+ *     <HotKey hotkey="alt+enter" label="Submit form" />
+ *     <HotKey hotkey="mod+alt+f" label="Find and replace" />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function HotKey({ hotkey, label }: HotKeyProps) {
+  const keys = hotkey
+    .replace('mod', modifierKey)
+    .replace('alt', isMac ? '⌥' : 'Alt')
+    .split(/\+/)
+    .map((e) => e.charAt(0).toUpperCase() + e.slice(1));
+
+  return (
+    <div className={styles.hotKey}>
+      {label && <span className={styles.label}>{label}</span>}
+      <div className={styles.keys}>
+        {keys.map((key) => (
+          <span key={key} className={styles.hotKeyKey}>
+            {key}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/HotKey/styles.module.css

@@ -0,0 +1,22 @@
+.hotKey {
+  display: inline-flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+}
+
+.keys {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.hotKeyKey {
+  padding: 5px 8px;
+  background: var(--light-color);
+  border-radius: 3px;
+}

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

@@ -0,0 +1 @@
+{"hotKey":"_hotKey_1eko8_1","label":"_label_1eko8_7","keys":"_keys_1eko8_12","hotKeyKey":"_hotKeyKey_1eko8_18"}

package/src/SplitView/SplitViewPane/index.tsx

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from 'react';
+import s from './styles.module.css.json';
+
+export type SplitViewPaneProps = {
+  maxSize?: number | string;
+  minSize?: number | string;
+  style?: React.CSSProperties;
+};
+
+export function SplitViewPane({
+  style,
+  children,
+}: PropsWithChildren<SplitViewPaneProps>) {
+  return (
+    <div className={s.SplitViewPane} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/SplitView/SplitViewPane/styles.module.css

@@ -0,0 +1,6 @@
+.SplitViewPane {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}

package/src/SplitView/SplitViewPane/styles.module.css.json

@@ -0,0 +1 @@
+{"SplitViewPane":"_SplitViewPane_1cl1f_1"}

package/src/SplitView/SplitViewSash/index.tsx

@@ -0,0 +1,99 @@
+import classNames from 'classnames';
+import React, { ReactNode, useState } from 'react';
+import s from './styles.module.css.json';
+
+export type SashAction = {
+  icon: ReactNode;
+  onClick: () => void;
+};
+
+type SplitViewSashProps = {
+  className?: string;
+  style: React.CSSProperties;
+  split: 'vertical' | 'horizontal';
+  allowResize?: boolean;
+  action?: SashAction;
+  onMouseDown: (x: number, y: number) => void;
+  onMouseMove: (x: number, y: number) => void;
+  onMouseUp: () => void;
+};
+
+export function SplitViewSash({
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  style,
+  split,
+  allowResize,
+  action,
+}: SplitViewSashProps) {
+  const [dragging, setDrag] = useState(false);
+
+  function handleMouseMove(e: MouseEvent) {
+    onMouseMove(e.pageX, e.pageY);
+  }
+
+  function handleMouseUp() {
+    setDrag(false);
+    onMouseUp();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    onMouseMove(e.touches[0].pageX, e.touches[0].pageY);
+  }
+
+  function handleTouchEnd() {
+    setDrag(false);
+    onMouseUp();
+    window.removeEventListener('touchmove', handleTouchMove);
+    window.removeEventListener('touchend', handleTouchEnd);
+  }
+
+  const actionEl = action?.icon && (
+    <div
+      className={s.SplitViewSash__content}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+      }}
+      onClick={() => {
+        action.onClick();
+      }}
+    >
+      <div className={s.SplitViewSash__content__button}>{action?.icon}</div>
+    </div>
+  );
+
+  return (
+    <div
+      role="Resizer"
+      className={classNames(
+        s.SplitViewSash,
+        split === 'vertical'
+          ? s['SplitViewSash--vertical']
+          : s['SplitViewSash--horizontal'],
+        !allowResize && s['SplitViewSash--no-resize'],
+        dragging && s['SplitViewSash--dragging'],
+      )}
+      onMouseDown={(e) => {
+        setDrag(true);
+        onMouseDown(e.pageX, e.pageY);
+
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+      }}
+      onTouchStart={(e) => {
+        e.preventDefault();
+        setDrag(true);
+        onMouseDown(e.touches[0].pageX, e.touches[0].pageY);
+
+        window.addEventListener('touchmove', handleTouchMove);
+        window.addEventListener('touchend', handleTouchEnd);
+      }}
+      style={style}
+    >
+      {actionEl}
+    </div>
+  );
+}

package/src/SplitView/SplitViewSash/styles.module.css

@@ -0,0 +1,68 @@
+.SplitViewSash {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  transition: background-color 0.2s 0.15s;
+  background-color: rgba(var(--light-color-components), 0);
+  width: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.SplitViewSash:hover,
+.SplitViewSash--dragging {
+  background-color: var(--light-color);
+}
+
+.SplitViewSash:hover:has(.SplitViewSash__content:hover),
+.SplitViewSash--dragging:has(.SplitViewSash__content:hover) {
+  background-color: transparent;
+}
+
+.SplitViewSash--no-resize {
+  pointer-events: none;
+}
+
+.SplitViewSash--vertical {
+  cursor: col-resize;
+}
+
+.SplitViewSash--horizontal {
+  cursor: row-resize;
+}
+
+.SplitViewSash__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 15px 0;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.SplitViewSash__content__button {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: var(--light-body-color);
+}
+
+.SplitViewSash__content__button svg {
+  display: block;
+  fill: currentColor;
+}
+
+.SplitViewSash__content:hover .SplitViewSash__content__button {
+  background: var(--light-bg-color);
+  color: var(--base-body-color);
+}

package/src/SplitView/SplitViewSash/styles.module.css.json

@@ -0,0 +1 @@
+{"SplitViewSash":"_SplitViewSash_tds51_1","SplitViewSash--dragging":"_SplitViewSash--dragging_tds51_15","SplitViewSash__content":"_SplitViewSash__content_tds51_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_tds51_24","SplitViewSash--vertical":"_SplitViewSash--vertical_tds51_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_tds51_32","SplitViewSash__content__button":"_SplitViewSash__content__button_tds51_46"}