react-science 0.19.1

package/src/components/color-picker/react-color/sketch/SketchPresetColors.tsx

@@ -0,0 +1,75 @@
+import { CSSProperties, MouseEvent, useCallback } from 'react';
+
+import { Swatch } from '../common';
+
+interface SketchPresetColorsProps {
+  colors: (string | { color: string; title: string })[];
+  onClick: (data: { hex: any; source: string }, event: any) => void;
+  onSwatchHover: any;
+}
+
+const styles: Record<'swatchWrap' | 'swatch', CSSProperties> &
+  Record<'colors', (flag: boolean) => CSSProperties> = {
+  colors: (flag: boolean) => ({
+    margin: '0 -10px',
+    padding: '10px 0 0 10px',
+    borderTop: '1px solid #eee',
+    display: 'flex',
+    flexWrap: 'wrap',
+    position: 'relative',
+    ...(flag && { display: 'none' }),
+  }),
+  swatchWrap: {
+    width: '16px',
+    height: '16px',
+    margin: '0 10px 10px 0',
+  },
+  swatch: {
+    borderRadius: '3px',
+    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',
+  },
+};
+
+const SketchPresetColors = (props: SketchPresetColorsProps) => {
+  const { colors, onClick, onSwatchHover } = props;
+
+  const handleClick = useCallback(
+    (hex: any, e: MouseEvent) => {
+      onClick?.(
+        {
+          hex,
+          source: 'hex',
+        },
+        e,
+      );
+    },
+    [onClick],
+  );
+
+  return (
+    <div style={styles.colors(!colors || colors.length === 0)}>
+      {colors.map((colorObjOrString) => {
+        const c =
+          typeof colorObjOrString === 'string'
+            ? { color: colorObjOrString }
+            : colorObjOrString;
+        const key = `${c.color}${'title' in c ? c?.title : ''}`;
+        return (
+          <div key={key} style={styles.swatchWrap}>
+            <Swatch
+              {...c}
+              style={styles.swatch}
+              onClick={handleClick}
+              onHover={onSwatchHover}
+              focusStyle={{
+                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,
+              }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SketchPresetColors;

package/src/components/drop-zone/DropZone.tsx

@@ -0,0 +1,132 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { MouseEventHandler, useCallback, useMemo } from 'react';
+import { FileError, FileRejection, useDropzone } from 'react-dropzone';
+import { FaCloudUploadAlt } from 'react-icons/fa';
+
+export interface DropZoneProps {
+  color?: string;
+  borderColor?: string;
+  onDrop?: <T extends File>(
+    acceptedFiles: T[],
+    rejectedFiles?: FileRejection[],
+  ) => void;
+  fileValidator?: <T extends File>(file: T) => FileError | FileError[] | null;
+  emptyText?: string;
+}
+
+const dropZoneCss = {
+  root: css`
+    position: relative;
+    height: 100%;
+    width: 100%;
+  `,
+  dragActive: css`
+    font-size: 1.5em;
+    font-weight: 600;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.7;
+    background-color: white;
+    border: 5px dashed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  `,
+  empty: css`
+    font-size: 1.5em;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 1em;
+    border: 5px dashed;
+    cursor: pointer;
+  `,
+};
+
+export function DropZone(props: DropZoneProps) {
+  return <DropZoneContent {...props} />;
+}
+
+export interface DropZoneContainerProps extends DropZoneProps {
+  children: JSX.Element | null;
+}
+
+export function DropZoneContainer(props: DropZoneContainerProps) {
+  return <DropZoneContent {...props} />;
+}
+
+function DropZoneContent(
+  props: DropZoneProps & {
+    children?: JSX.Element | null;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    emptyText?: string;
+  },
+) {
+  const {
+    color = 'black',
+    borderColor = 'gray',
+    children = null,
+    onDrop,
+    emptyText = 'Click or drag and drop to add data.',
+    onClick,
+    fileValidator,
+  } = props;
+
+  const hasChildren = children !== null;
+
+  const handleOnDrop = useCallback(
+    <T extends File>(acceptedFiles: T[], rejectedFiles: FileRejection[]) => {
+      onDrop?.(acceptedFiles, rejectedFiles);
+    },
+    [onDrop],
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    noClick: hasChildren,
+    validator: fileValidator,
+    onDrop: handleOnDrop,
+  });
+
+  const getPropsOptions = useMemo(() => {
+    if (onClick) {
+      return { onClick };
+    }
+  }, [onClick]);
+
+  return (
+    <div {...getRootProps(getPropsOptions)} css={dropZoneCss.root}>
+      {children}
+      {isDragActive ? (
+        <div
+          css={dropZoneCss.dragActive}
+          style={{
+            borderColor,
+            color,
+          }}
+        >
+          <FaCloudUploadAlt size={70} />
+          <p>Drop the files here.</p>
+        </div>
+      ) : !hasChildren ? (
+        <div
+          css={dropZoneCss.empty}
+          style={{
+            borderColor,
+            color,
+          }}
+        >
+          {emptyText}
+        </div>
+      ) : null}
+      <input {...getInputProps()} />
+    </div>
+  );
+}

package/src/components/drop-zone/index.ts

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

package/src/components/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,136 @@
+import styled from '@emotion/styled';
+import { Menu } from '@headlessui/react';
+import type { Placement } from '@popperjs/core';
+import { ReactNode, useRef } from 'react';
+
+import { useModifiedPopper } from '../hooks/useModifiedPopper';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { useOnOff } from '../hooks/useOnOff';
+import { Portal } from '../root-layout/Portal';
+
+import { MenuItems, MenuOption, MenuOptions } from './MenuItems';
+import { useContextMenuPlacement } from './useContextMenuPlacement';
+
+interface DropdownMenuBaseProps<T> {
+  /**
+   * Placement for react-popper
+   */
+  placement?: Placement;
+
+  options: MenuOptions<T>;
+  onSelect: (selected: MenuOption<T>) => void;
+}
+
+interface DropdownMenuClickProps<T> extends DropdownMenuBaseProps<T> {
+  /**
+   * Node to be inside the Button
+   */
+  children: ReactNode;
+  trigger: 'click';
+}
+
+interface DropdownMenuContextProps<T> extends DropdownMenuBaseProps<T> {
+  trigger: 'contextMenu';
+  children: ReactNode;
+}
+
+export type DropdownMenuProps<T> =
+  | DropdownMenuContextProps<T>
+  | DropdownMenuClickProps<T>;
+
+export function DropdownMenu<T>(props: DropdownMenuProps<T>) {
+  const { trigger, ...otherProps } = props;
+
+  if (trigger === 'contextMenu') {
+    return <DropdownContextMenu {...otherProps} />;
+  }
+
+  return (
+    <DropdownClickMenu {...otherProps}>{props.children}</DropdownClickMenu>
+  );
+}
+
+const HandleMenuContextDiv = styled.div`
+  display: contents;
+`;
+
+function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
+  const { children, onSelect, ...otherProps } = props;
+
+  const {
+    isPopperElementOpen,
+    closePopperElement,
+    handleContextMenu,
+    setPopperElement,
+    styles,
+    attributes,
+  } = useContextMenuPlacement(otherProps.placement || 'right-start');
+
+  const ref = useRef<HTMLDivElement>(null);
+  useOnClickOutside(ref, closePopperElement);
+
+  return (
+    <HandleMenuContextDiv onContextMenu={handleContextMenu}>
+      {isPopperElementOpen && (
+        <div ref={ref}>
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <Menu>
+              <MenuItems
+                itemsStatic
+                onSelect={(selected) => {
+                  closePopperElement();
+                  onSelect(selected);
+                }}
+                {...otherProps}
+              />
+            </Menu>
+          </div>
+        </div>
+      )}
+
+      {children}
+    </HandleMenuContextDiv>
+  );
+}
+
+function DropdownClickMenu<T>(
+  props: Omit<DropdownMenuProps<T>, 'trigger'> & { children: ReactNode },
+) {
+  const { placement = 'bottom-start', onSelect, ...otherProps } = props;
+
+  const [isOpened, , closeItems, toggle] = useOnOff(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+  useOnClickOutside(ref, closeItems);
+
+  const { setReferenceElement, setPopperElement, popperProps } =
+    useModifiedPopper<HTMLButtonElement>({ placement, offset: 6 });
+
+  return (
+    <Menu>
+      <Menu.Button ref={setReferenceElement} onClick={toggle}>
+        {props.children}
+      </Menu.Button>
+      {isOpened && (
+        <Portal>
+          <div ref={ref}>
+            <div ref={setPopperElement} {...popperProps}>
+              <MenuItems
+                itemsStatic
+                onSelect={(selected) => {
+                  closeItems();
+                  onSelect(selected);
+                }}
+                {...otherProps}
+              />
+            </div>
+          </div>
+        </Portal>
+      )}
+    </Menu>
+  );
+}

package/src/components/dropdown-menu/MenuItems.tsx

@@ -0,0 +1,141 @@
+import styled from '@emotion/styled';
+import { Menu } from '@headlessui/react';
+import type { ReactNode } from 'react';
+
+export interface MenuOption<T> {
+  type: 'option';
+  label: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  data?: T;
+}
+
+export interface MenuDivider {
+  type: 'divider';
+}
+
+export type MenuOptions<T> = Array<MenuOption<T> | MenuDivider>;
+
+const ItemDiv = styled.div<{
+  disabled: boolean;
+  active: boolean;
+}>`
+  display: contents;
+  cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
+  font-size: 0.875rem;
+  color: ${(props) => (!props.disabled ? 'black' : 'rgb(163, 163, 163)')};
+  & > div {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    ${(props) => props.active && 'background-color: rgb(243, 244, 246);'}
+  }
+
+  ${(props) =>
+    !props.disabled &&
+    `
+          &:hover > div {
+            background-color: rgb(243, 244, 246);
+          }
+        `}
+`;
+
+const Divider = styled.hr`
+  width: 100%;
+  color: rgb(229, 229, 229);
+  margin-top: 5px;
+  margin-bottom: 5px;
+  grid-column: 1 / -1;
+`;
+
+const ItemsDiv = styled.div<{
+  hasOneIconOrMore: boolean;
+}>`
+  display: grid;
+  grid-template-columns: [icon-start] ${(props) =>
+      props.hasOneIconOrMore ? '40px' : '0px'} [label-start] auto;
+  width: fit-content;
+  align-items: center;
+  border-radius: 6px;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 5px 12px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  --cell-padding: 16px;
+`;
+
+const LabelDiv = styled.div`
+  grid-column-start: label-start;
+  padding-right: var(--cell-padding);
+  padding-left: var(--cell-padding);
+`;
+
+const IconDiv = styled.div`
+  grid-column-start: icon-start;
+  width: 100%;
+  height: 100%;
+  padding-left: var(--cell-padding);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export interface MenuItemsProps<T> {
+  options: MenuOptions<T>;
+  onSelect: (selected: MenuOption<T>) => void;
+  itemsStatic?: boolean;
+}
+
+export function MenuItems<T>(props: MenuItemsProps<T>) {
+  const { options, onSelect, itemsStatic } = props;
+  const hasOneOrMoreIcon = options.some(
+    (option) => option.type === 'option' && option.icon,
+  );
+
+  return (
+    <Menu.Items
+      as={ItemsDiv}
+      static={itemsStatic}
+      hasOneIconOrMore={hasOneOrMoreIcon}
+    >
+      {options.map((option, index) => (
+        <Item
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          onSelect={onSelect}
+          option={option}
+        />
+      ))}
+    </Menu.Items>
+  );
+}
+
+interface ItemProps<T> {
+  option: MenuOptions<T>[number];
+  onSelect: MenuItemsProps<T>['onSelect'];
+}
+
+function Item<T>(props: ItemProps<T>) {
+  const { option, onSelect } = props;
+  const isDivider = option.type === 'divider';
+
+  if (isDivider) {
+    return <Divider />;
+  }
+
+  return (
+    <Menu.Item disabled={option.disabled}>
+      {({ active }) => (
+        <ItemDiv
+          onClick={() => {
+            onSelect(option);
+          }}
+          active={active}
+          disabled={option.disabled || false}
+        >
+          <IconDiv>{option.icon}</IconDiv>
+          <LabelDiv>{option.label}</LabelDiv>
+        </ItemDiv>
+      )}
+    </Menu.Item>
+  );
+}

package/src/components/dropdown-menu/index.ts

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

package/src/components/dropdown-menu/useContextMenuPlacement.ts

@@ -0,0 +1,76 @@
+import type { Placement } from '@popperjs/core';
+import React, { useCallback, useMemo, useState } from 'react';
+import { usePopper } from 'react-popper';
+
+interface PositionState {
+  clientX: number;
+  clientY: number;
+  pageX: number;
+  pageY: number;
+}
+
+export function useContextMenuPlacement(placement: Placement) {
+  const [positionState, setPositionState] = useState<PositionState | null>(
+    null,
+  );
+
+  const handleContextMenu = useCallback(
+    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      const { clientX, clientY, pageX, pageY } = event;
+      event.preventDefault();
+
+      setPositionState({
+        clientX,
+        clientY,
+        pageX,
+        pageY,
+      });
+    },
+    [],
+  );
+
+  const boundingClientRect = useMemo(() => {
+    return {
+      top: positionState?.clientY || 0,
+      left: positionState?.clientX || 0,
+      x: positionState?.pageX || 0,
+      y: positionState?.pageY || 0,
+
+      bottom: 0,
+      right: 0,
+      height: 0,
+      width: 0,
+      toJSON: () => '',
+    };
+  }, [positionState]);
+
+  const virtualElement = useMemo(() => {
+    return {
+      getBoundingClientRect: () => boundingClientRect,
+    };
+  }, [boundingClientRect]);
+
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const { styles, attributes, state } = usePopper(
+    virtualElement,
+    popperElement,
+    {
+      placement,
+    },
+  );
+
+  return {
+    setPopperElement,
+    styles,
+    attributes,
+    popperState: state,
+    isPopperElementOpen: positionState !== null,
+    handleContextMenu,
+    closePopperElement: () => {
+      setPositionState(null);
+    },
+  };
+}

package/src/components/fullscreen/FullscreenContext.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable no-alert */
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+
+type ElementType = HTMLDivElement & {
+  webkitRequestFullscreen(): Promise<void>;
+};
+
+type DocumentType = Document & {
+  webkitExitFullscreen(): Promise<void>;
+  webkitFullscreenElement: Element | null;
+};
+interface FullscreenProps {
+  children: ReactNode;
+}
+interface FullscreenState {
+  isFullScreen: boolean;
+}
+
+interface ContextType extends FullscreenState {
+  toggle: () => void;
+}
+const fullscreenContextInit = {
+  isFullScreen: false,
+  toggle: () => {},
+};
+const FullscreenContext = createContext<ContextType>(fullscreenContextInit);
+
+export function useFullscreen() {
+  return useContext(FullscreenContext);
+}
+export function FullScreenProvider(props: FullscreenProps) {
+  const [isFullScreen, toggle] = useReducer((value: boolean) => !value, false);
+
+  const value = useMemo(
+    () => ({ isFullScreen, toggle }),
+    [isFullScreen, toggle],
+  );
+  return (
+    <FullscreenContext.Provider value={value}>
+      <FullscreenInner {...props} />
+    </FullscreenContext.Provider>
+  );
+}
+function FullscreenInner(props: FullscreenProps) {
+  const { children } = props;
+  const { isFullScreen, toggle } = useFullscreen();
+  const ref = useRef<ElementType>(null);
+  useEffect(() => {
+    function onFullscreenChange() {
+      const document = window.document as DocumentType;
+      const value = Boolean(
+        document.fullscreenElement || document.webkitFullscreenElement,
+      );
+      if (!value && isFullScreen) toggle();
+    }
+    const div = ref.current;
+    if (!div) {
+      return;
+    }
+    div.addEventListener('fullscreenchange', onFullscreenChange);
+    div.addEventListener('webkitfullscreenchange', onFullscreenChange);
+
+    return () => {
+      div.removeEventListener('fullscreenchange', onFullscreenChange);
+      div.removeEventListener('webkitfullscreenchange', onFullscreenChange);
+    };
+  }, [isFullScreen, toggle]);
+  useEffect(() => {
+    if (isFullScreen && ref.current) {
+      if (ref.current.requestFullscreen) {
+        ref.current.requestFullscreen().catch(() => {
+          alert('Fullscreen is not supported');
+        });
+      } else if (ref.current.webkitRequestFullscreen) {
+        ref.current.webkitRequestFullscreen()?.catch(() => {
+          alert('Fullscreen is not supported');
+        });
+      }
+    }
+    const document = window.document as DocumentType;
+    if (!isFullScreen && document.fullscreenElement) {
+      if (document.exitFullscreen) {
+        document.exitFullscreen().catch(() => {
+          alert("Can't exit fullscreen");
+        });
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen().catch(() => {
+          alert("Can't exit fullscreen");
+        });
+      }
+    }
+  }, [isFullScreen]);
+  return (
+    <div
+      ref={ref}
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'white',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/fullscreen/FullscreenToolbarButton.tsx

@@ -0,0 +1,14 @@
+import { FaExpand } from 'react-icons/fa';
+
+import { Toolbar } from '../toolbar/Toolbar';
+
+import { useFullscreen } from './FullscreenContext';
+
+export function FullscreenToolbarButton() {
+  const { toggle } = useFullscreen();
+  return (
+    <Toolbar.Item title="Full screen" onClick={toggle}>
+      <FaExpand />
+    </Toolbar.Item>
+  );
+}

package/src/components/fullscreen/index.ts

@@ -0,0 +1,2 @@
+export * from './FullscreenContext';
+export * from './FullscreenToolbarButton';