react-science 0.19.1

package/src/components/header/Header.tsx

@@ -0,0 +1,33 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import type { ReactElement } from 'react';
+
+import type { ToolbarProps } from '../toolbar/Toolbar';
+
+type ReactProps = ReactElement<ToolbarProps>;
+
+interface HeaderProps {
+  children: [ReactProps, ReactProps];
+}
+
+const styles = {
+  header: css({
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+
+    justifyContent: 'space-between',
+    borderBottom: '1px solid rgb(247, 247, 247);',
+
+    boxShadow: 'rgb(255, 255, 255) 0px 1px 0px 0px inset',
+  }),
+};
+
+export function Header(props: HeaderProps) {
+  return (
+    <div css={styles.header}>
+      <div>{props.children[0]}</div>
+      <div>{props.children[1]}</div>
+    </div>
+  );
+}

package/src/components/header/index.ts

@@ -0,0 +1 @@
+export * from './Header';

package/src/components/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useDoubleClick';
+export * from './useHashSearchParams';
+export * from './useModifiedPopper';
+export * from './useOnClickOutside';
+export * from './useOnOff';
+export * from './useToggle';

package/src/components/hooks/useDoubleClick.ts

@@ -0,0 +1,42 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+export interface UseDoubleClickOptions<EventData> {
+  onClick: (data: EventData) => void;
+  onDoubleClick: (data: EventData) => void;
+  delay?: number;
+}
+
+export function useDoubleClick<EventData>({
+  onClick,
+  onDoubleClick,
+  delay = 250,
+}: UseDoubleClickOptions<EventData>) {
+  const timeout = useRef<number | null>(null);
+  useEffect(() => {
+    return () => {
+      // Cleanup timeout when the component is unmounted.
+      if (timeout.current) {
+        window.clearTimeout(timeout.current);
+      }
+    };
+  }, []);
+  const handleClick = useCallback(
+    (data: EventData) => {
+      if (timeout.current === null) {
+        // No recent click. Start timer to wait for possible double click.
+        timeout.current = window.setTimeout(() => {
+          timeout.current = null;
+          onClick?.(data);
+        }, delay);
+      } else {
+        // A click occured recently. Trigger double click event and stop timer.
+        window.clearTimeout(timeout.current);
+        timeout.current = null;
+        onDoubleClick?.(data);
+      }
+    },
+    [onClick, onDoubleClick, delay],
+  );
+
+  return handleClick;
+}

package/src/components/hooks/useHashSearchParams.ts

@@ -0,0 +1,49 @@
+import { useSyncExternalStore } from 'react';
+
+const emptySearchParams = new URLSearchParams();
+
+const lastValue = {
+  hash: '',
+  searchParams: emptySearchParams,
+};
+
+export function useHashSearchParams() {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      function onHashChange() {
+        onStoreChange();
+      }
+      window.addEventListener('hashchange', onHashChange);
+      return () => {
+        window.removeEventListener('hashchange', onHashChange);
+      };
+    },
+    getHashSearchParams,
+    getHashSearchParamsServer,
+  );
+}
+
+function getHashSearchParams(): URLSearchParams {
+  const hash = window.location.hash;
+
+  if (lastValue.hash === hash) {
+    return lastValue.searchParams;
+  }
+
+  lastValue.hash = hash;
+  if (hash.startsWith('#?')) {
+    lastValue.searchParams = new URLSearchParams(hash.slice(1));
+  } else if (hash.startsWith('#%3F') || hash.startsWith('#%3f')) {
+    lastValue.searchParams = new URLSearchParams(
+      decodeURIComponent(hash.slice(1)),
+    );
+  } else {
+    lastValue.searchParams = emptySearchParams;
+  }
+
+  return lastValue.searchParams;
+}
+
+function getHashSearchParamsServer(): URLSearchParams {
+  return emptySearchParams;
+}

package/src/components/hooks/useModifiedPopper.ts

@@ -0,0 +1,75 @@
+import { Placement } from '@popperjs/core';
+import { HTMLAttributes, useState } from 'react';
+import { Modifier, usePopper } from 'react-popper';
+
+const sameWidthModifier: Modifier<'sameWidth'> = {
+  name: 'sameWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.width = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.width = `${
+      state.elements.reference.getBoundingClientRect().width
+    }px`;
+  },
+};
+
+function getOffsetModifier(offset: number): Modifier<'offset'> {
+  return {
+    name: 'offset',
+    options: {
+      offset: [0, offset],
+    },
+  };
+}
+
+export interface UseModifiedPopperReturn<
+  R extends Element = HTMLDivElement,
+  P extends HTMLElement = HTMLDivElement,
+> {
+  setReferenceElement: (ref: R | null) => void;
+  setPopperElement: (popper: P | null) => void;
+  popperProps: HTMLAttributes<P>;
+}
+
+export function useModifiedPopper<
+  R extends Element = HTMLDivElement,
+  P extends HTMLElement = HTMLDivElement,
+>(options: {
+  placement?: Placement;
+  offset?: number;
+  sameWidth?: boolean;
+}): UseModifiedPopperReturn<R, P> {
+  const { offset, placement, sameWidth } = options;
+
+  const [referenceElement, setReferenceElement] = useState<R | null>(null);
+  const [popperElement, setPopperElement] = useState<P | null>(null);
+
+  const modifiers: Modifier<'sameWidth' | 'offset'>[] = [];
+
+  if (sameWidth) {
+    modifiers.push(sameWidthModifier);
+  }
+
+  if (offset) {
+    modifiers.push(getOffsetModifier(offset));
+  }
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement,
+    strategy: 'fixed',
+    modifiers,
+  });
+
+  return {
+    setReferenceElement,
+    setPopperElement,
+    popperProps: {
+      style: styles.popper,
+      ...attributes.popper,
+    },
+  };
+}

package/src/components/hooks/useOnClickOutside.ts

@@ -0,0 +1,30 @@
+import { useEffect, RefObject } from 'react';
+
+import { useRootLayoutContext } from '../root-layout/RootLayoutContext';
+
+export function useOnClickOutside<T extends Node = Node>(
+  ref: RefObject<T>,
+  handler: (event: Event) => void,
+) {
+  const shadowElement = useRootLayoutContext();
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const listener = (event: any) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    shadowElement.addEventListener('mousedown', listener);
+    shadowElement.addEventListener('touchstart', listener);
+
+    return () => {
+      shadowElement.removeEventListener('mousedown', listener);
+      shadowElement.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler, shadowElement]);
+}

package/src/components/hooks/useOnOff.ts

@@ -0,0 +1,12 @@
+import { useState, useCallback } from 'react';
+
+export function useOnOff(
+  initialValue = false,
+): [isOn: boolean, setOn: () => void, setOff: () => void, toggle: () => void] {
+  const [isOn, setOnOff] = useState(initialValue);
+
+  const setOn = useCallback(() => setOnOff(true), []);
+  const setOff = useCallback(() => setOnOff(false), []);
+  const toggle = useCallback(() => setOnOff(!isOn), [isOn]);
+  return [isOn, setOn, setOff, toggle];
+}

package/src/components/hooks/useToggle.ts

@@ -0,0 +1,8 @@
+import { useOnOff } from './useOnOff';
+
+export function useToggle(
+  initialValue = false,
+): [isOn: boolean, toggle: () => void] {
+  const [isOn, , , toggle] = useOnOff(initialValue);
+  return [isOn, toggle];
+}

package/src/components/index.ts

@@ -0,0 +1,18 @@
+export * from './accordion/index';
+export * from './button/index';
+export * from './color-picker/index';
+export * from './drop-zone/index';
+export * from './dropdown-menu/index';
+export * from './fullscreen/index';
+export * from './header/index';
+export * from './hooks/index';
+export * from './layout-manager/index';
+export * from './modal/index';
+export * from './root-layout/index';
+export * from './spinner/index';
+export * from './split-pane/index';
+export * from './table/index';
+export * from './tabs/index';
+export * from './toolbar/index';
+export * from './utils/index';
+export * as ValueRenderers from './value-renderers/index';

package/src/components/layout-manager/LayoutManager.tsx

@@ -0,0 +1,99 @@
+import { v4 as uuid } from '@lukeed/uuid';
+import {
+  createElement,
+  FunctionComponent,
+  ComponentType,
+  ReactNode,
+} from 'react';
+
+import { Accordion } from '../accordion/Accordion';
+import { DropZone } from '../drop-zone/DropZone';
+import { Modal } from '../modal/Modal';
+import { SplitPane } from '../split-pane/SplitPane';
+
+const layoutComponents: ComponentsMap = {
+  SplitPane,
+  Accordion,
+  Modal,
+  DropZone,
+};
+
+interface ComponentsMap {
+  [componentName: string]: ComponentType<any>;
+}
+
+interface LayoutManagerProps {
+  layout: Layout;
+  components?: ComponentsMap;
+}
+
+export interface Layout {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  layout: LayoutComponent | any;
+}
+interface LayoutComponent {
+  id: string;
+  component: keyof typeof layoutComponents | FunctionComponent | string;
+  children?: LayoutComponent[];
+}
+
+export function LayoutManager(props: LayoutManagerProps) {
+  const { layout, components } = props;
+  return createLayout(layout, components);
+}
+
+function createLayoutComponent(
+  com: LayoutComponent,
+  components: LayoutManagerProps['components'],
+  props = {},
+): JSX.Element | null {
+  const { id, component, children, ...compProps } = com;
+  const componentId = id || uuid();
+  const componentNode = findComponent(component, components);
+
+  if (componentNode) {
+    const componentProps = { id: componentId, ...compProps, ...props };
+    const childrenComp =
+      children && typeof children === 'string'
+        ? children
+        : createElements(children, components);
+
+    return createElement(
+      componentNode,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      componentProps as any,
+      childrenComp,
+    );
+  }
+  return null;
+}
+
+function createLayout(
+  layout: Layout,
+  components: LayoutManagerProps['components'],
+) {
+  return createLayoutComponent(layout.layout, components);
+}
+
+function createElements(
+  children: LayoutComponent[] | undefined,
+  components: LayoutManagerProps['components'],
+): ReactNode[] | undefined {
+  return children?.map((comp, index) =>
+    createLayoutComponent(comp, components, { key: index }),
+  );
+}
+
+function findComponent(
+  component: LayoutComponent['component'],
+  definedComponents: LayoutManagerProps['components'],
+): ComponentType<any> | null {
+  if (typeof component === 'function') return component;
+
+  if (typeof component === 'string') {
+    if (definedComponents?.[component]) return definedComponents[component];
+    if (layoutComponents[component]) return layoutComponents[component];
+  }
+
+  return null;
+}

package/src/components/layout-manager/index.ts

@@ -0,0 +1 @@
+export * from './LayoutManager';

package/src/components/modal/ConfirmModal.tsx

@@ -0,0 +1,113 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import type { ReactNode } from 'react';
+
+import { Button } from '..';
+
+import { useDialog } from './useDialog';
+
+interface ConfirmModalProps {
+  children: ReactNode;
+  isOpen: boolean;
+  requestCloseOnEsc?: boolean;
+  requestCloseOnBackdrop?: boolean;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  onRequestClose?: () => void;
+  saveText?: string;
+  cancelText?: string;
+  headerColor: string;
+  maxWidth?: number;
+}
+
+export function ConfirmModal(props: ConfirmModalProps) {
+  const {
+    isOpen,
+    saveText = 'Save',
+    cancelText = 'Cancel',
+    headerColor,
+    maxWidth,
+    onRequestClose,
+    onCancel = onRequestClose,
+    onConfirm,
+    requestCloseOnBackdrop = true,
+    requestCloseOnEsc = true,
+    children,
+  } = props;
+
+  const { ref, onClick } = useDialog({
+    isOpen,
+    requestCloseOnEsc,
+    requestCloseOnBackdrop,
+    onRequestClose,
+  });
+
+  return (
+    <dialog
+      ref={ref}
+      style={{
+        display: 'flex',
+        position: 'fixed',
+        backgroundColor: 'transparent',
+      }}
+      css={css`
+        ::backdrop: rgba(113, 113, 122, 0.75);
+      `}
+      onClick={onClick}
+    >
+      {isOpen ? (
+        <div
+          style={{
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: 'white',
+            maxHeight: '90%',
+            width: '100%',
+            maxWidth: maxWidth || undefined,
+            borderWidth: 1,
+            borderColor: 'transparent',
+            borderRadius: '0.5rem',
+            boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
+            borderTop: `10px solid ${headerColor}`,
+          }}
+        >
+          <div style={{ color: headerColor, display: 'flex', flex: '1 1 0%' }}>
+            {children}
+          </div>
+
+          <div
+            style={{
+              borderTop: '2px solid rgb(247, 247, 247)',
+              padding: '10px 20px 10px 20px',
+              display: 'flex',
+              flexDirection: 'row-reverse',
+              gap: 10,
+            }}
+          >
+            <Button
+              onClick={onConfirm}
+              backgroundColor={{
+                basic: 'hsla(243deg, 75%, 58%, 1)',
+                hover: 'hsla(245deg, 58%, 50%, 1)',
+              }}
+              color={{ basic: 'white' }}
+            >
+              {saveText}
+            </Button>
+            <Button
+              onClick={onCancel}
+              backgroundColor={{
+                basic: 'hsla(0deg, 72%, 50%, 1)',
+                hover: 'hsla(0deg, 73%, 42%, 1)',
+              }}
+              color={{ basic: 'white' }}
+            >
+              {cancelText}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </dialog>
+  );
+}

package/src/components/modal/Modal.tsx

@@ -0,0 +1,112 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import type { ReactElement, ReactNode } from 'react';
+
+import ModalCloseButton from './ModalCloseButton';
+import { useDialog } from './useDialog';
+
+export interface ModalProps {
+  children: ReactElement | Array<ReactElement>;
+  isOpen: boolean;
+  requestCloseOnEsc?: boolean;
+  hasCloseButton?: boolean;
+  requestCloseOnBackdrop?: boolean;
+  onRequestClose?: () => void;
+  maxWidth?: number;
+  width?: number;
+  height?: number;
+}
+
+export function Modal(props: ModalProps) {
+  const {
+    isOpen,
+    onRequestClose,
+    hasCloseButton = true,
+    requestCloseOnBackdrop = true,
+    requestCloseOnEsc = true,
+    maxWidth,
+    width,
+    height,
+    children,
+  } = props;
+  const { ref, onClick } = useDialog({
+    isOpen,
+    requestCloseOnEsc,
+    requestCloseOnBackdrop,
+    onRequestClose,
+  });
+
+  return (
+    <dialog
+      ref={ref}
+      style={{
+        display: 'flex',
+        position: 'fixed',
+        backgroundColor: 'transparent',
+      }}
+      css={css`
+        ::backdrop: rgba(113, 113, 122, 0.75);
+      `}
+      onClick={onClick}
+    >
+      {isOpen ? (
+        <div
+          style={{
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: 'white',
+            maxHeight: '90%',
+            width: width || '100%',
+            maxWidth: maxWidth || undefined,
+            height: height || 'max-content',
+            borderWidth: 1,
+            borderColor: 'transparent',
+            borderRadius: '0.5rem',
+            boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          {children}
+          {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
+        </div>
+      ) : null}
+    </dialog>
+  );
+}
+
+Modal.Header = function ModalHeader(props: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '10px 20px 10px 20px',
+        borderBottom: '2px solid rgb(247, 247, 247)',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+Modal.Body = function ModalBody(props: { children: ReactNode }) {
+  return (
+    <div style={{ display: 'flex', flex: '1 1 0%', overflowY: 'auto' }}>
+      {props.children}
+    </div>
+  );
+};
+
+Modal.Footer = function ModalFooter(props: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        borderTop: '2px solid rgb(247, 247, 247)',
+        padding: '10px 20px 10px 20px',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/components/modal/ModalCloseButton.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { FaTimes } from 'react-icons/fa';
+
+export default function ModalCloseButton(props: { onClick?: () => void }) {
+  return (
+    <div style={{ position: 'absolute', top: 4, right: 4 }}>
+      <button
+        type="button"
+        style={{ padding: '10px 6px 10px 6px' }}
+        onClick={props.onClick}
+        css={css({
+          color: 'rgba(239, 68, 68)',
+          ':hover': { color: 'rgba(185, 28, 28)' },
+        })}
+      >
+        <FaTimes />
+      </button>
+    </div>
+  );
+}

package/src/components/modal/index.ts

@@ -0,0 +1,2 @@
+export * from './ConfirmModal';
+export * from './Modal';

package/src/components/modal/useDialog.ts

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+export function useDialog({
+  isOpen,
+  requestCloseOnEsc,
+  requestCloseOnBackdrop,
+  onRequestClose,
+}: {
+  isOpen: boolean;
+  requestCloseOnEsc: boolean;
+  requestCloseOnBackdrop: boolean;
+  onRequestClose?: () => void;
+}) {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    function onEsc(event: Event) {
+      event.preventDefault();
+      if (requestCloseOnEsc && onRequestClose) {
+        onRequestClose();
+      }
+    }
+    const dialog = ref.current;
+    if (dialog) {
+      dialog.addEventListener('cancel', onEsc);
+      return () => dialog.removeEventListener('cancel', onEsc);
+    }
+  }, [onRequestClose, requestCloseOnEsc]);
+
+  useEffect(() => {
+    const dialog = ref.current;
+    if (dialog && isOpen) {
+      dialog.showModal();
+      return () => dialog.close();
+    }
+  }, [isOpen]);
+
+  const onClick = useCallback(
+    (event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => {
+      // Since the dialog has no size of itself, this condition is only
+      // `true` when we click on the backdrop.
+      if (event.target === event.currentTarget && requestCloseOnBackdrop) {
+        onRequestClose?.();
+      }
+    },
+    [requestCloseOnBackdrop, onRequestClose],
+  );
+
+  return { ref, onClick };
+}