react-science 0.19.1

package/src/components/split-pane/SplitPane.tsx

@@ -0,0 +1,284 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import {
+  MouseEvent as ReactMouseEvent,
+  createContext,
+  CSSProperties,
+  ReactNode,
+  useContext,
+  useRef,
+  useState,
+  RefObject,
+  useReducer,
+} from 'react';
+import useResizeObserver from 'use-resize-observer';
+
+import { useOnOff } from '../hooks/useOnOff';
+
+import { useSplitPaneSize } from './useSplitPaneSize';
+
+export type SplitPaneDirection = 'vertical' | 'horizontal';
+export type SplitPaneSide = 'start' | 'end';
+export type SplitPaneSize = `${number}%` | `${number}px`;
+export type SplitPaneType = '%' | 'px';
+
+export interface SplitPaneProps {
+  /**
+   * Whether the split is done in the horizontal or vertical direction.
+   * @default 'horizontal'
+   */
+  direction?: SplitPaneDirection;
+  /**
+   * Defines which side of the pane is controlled by the split value.
+   * It is also the side that will be closed when the user double clicks on the
+   * splitter.
+   * A value of 'start' means 'left' or 'top' (depending on the direction).
+   * @default 'start'
+   */
+  controlledSide?: SplitPaneSide;
+  /**
+   * Initial size of the controlled side. Unit can be either '%' or 'px'.
+   * @default '50%'
+   */
+  initialSize?: SplitPaneSize;
+  /**
+   * Defines whether the pane is initially closed.
+   * A value of `true` means the pane is always initially closed.
+   * A value of `false` means the pane is always initially open.
+   * A value of type `number` means the pane is initially closed if its total
+   * size is smaller than the specified value. In that case, the pane will
+   * dynamically open or close when the total size changes, until the user
+   * interacts with the splitter. After the first interaction, the pane will
+   * no longer open or close automatically.
+   * @default false
+   */
+  initialClosed?: boolean | number;
+  /**
+   * Called whenever the user finishes resizing the pane.
+   */
+  onResize?: (position: SplitPaneSize) => void;
+  /**
+   * Called whenever the user double clicks on the splitter to open or close
+   * the pane.
+   */
+  onToggle?: (isClosed: boolean) => void;
+  /**
+   * The two React elements to show on both sides of the pane.
+   */
+  children: [ReactNode, ReactNode];
+}
+
+const splitPaneContext = createContext<boolean>(false);
+
+export function useSplitPaneContext() {
+  return useContext(splitPaneContext);
+}
+
+export function SplitPane(props: SplitPaneProps) {
+  const {
+    direction = 'horizontal',
+    controlledSide = 'start',
+    initialSize = '50%',
+    initialClosed = false,
+    onResize,
+    onToggle,
+    children,
+  } = props;
+
+  const minimumSize = typeof initialClosed === 'number' ? initialClosed : null;
+
+  // Whether the pane is explicitly closed. If the value is `false`, the pane
+  // may still be currently closed because it is smaller than the minimum size.
+  const [isPaneClosed, closePane, openPane] = useOnOff(
+    typeof initialClosed === 'boolean' ? initialClosed : false,
+  );
+
+  // Whether the user has already interacted with the pane.
+  const [hasTouched, touch] = useReducer(() => true, false);
+
+  const [[size, sizeType], setSize] = useState(() => parseSize(initialSize));
+
+  const splitterRef = useRef<HTMLDivElement>(null);
+  const { onMouseDown } = useSplitPaneSize({
+    controlledSide,
+    direction,
+    splitterRef,
+    sizeType,
+    onSizeChange(value) {
+      touch();
+      setSize(value);
+    },
+    onResize,
+  });
+
+  const rootSize = useResizeObserver<HTMLDivElement>();
+
+  let isFinalClosed = isPaneClosed;
+  if (
+    !isFinalClosed &&
+    minimumSize !== null &&
+    !hasTouched &&
+    rootSize.width !== undefined &&
+    rootSize.height !== undefined
+  ) {
+    if (direction === 'horizontal') {
+      isFinalClosed = rootSize.width < minimumSize;
+    } else {
+      isFinalClosed = rootSize.height < minimumSize;
+    }
+  }
+
+  function handleToggle() {
+    touch();
+    if (isFinalClosed) {
+      openPane();
+      if (isPaneClosed && onToggle) {
+        onToggle(false);
+      }
+    } else {
+      closePane();
+      if (!isPaneClosed && onToggle) {
+        onToggle(true);
+      }
+    }
+  }
+
+  function getSplitSideStyle(side: SplitPaneSide) {
+    return getItemStyle(
+      isFinalClosed,
+      controlledSide === side,
+      direction,
+      size,
+      sizeType,
+    );
+  }
+
+  return (
+    <div
+      ref={rootSize.ref}
+      style={{
+        display: 'flex',
+        height: '100%',
+        width: '100%',
+        flexDirection: direction === 'horizontal' ? 'row' : 'column',
+      }}
+    >
+      <SplitSide style={getSplitSideStyle('start')}>{children[0]}</SplitSide>
+
+      <Splitter
+        onDoubleClick={handleToggle}
+        onMouseDown={isFinalClosed ? undefined : onMouseDown}
+        isFinalClosed={isFinalClosed}
+        direction={direction}
+        splitterRef={splitterRef}
+      />
+
+      <SplitSide style={getSplitSideStyle('end')}>{children[1]}</SplitSide>
+    </div>
+  );
+}
+
+interface SplitterProps {
+  onDoubleClick: () => void;
+  onMouseDown?: (event: ReactMouseEvent) => void;
+  direction: SplitPaneDirection;
+  isFinalClosed: boolean;
+  splitterRef: RefObject<HTMLDivElement>;
+}
+
+function Splitter(props: SplitterProps) {
+  const { onDoubleClick, onMouseDown, direction, isFinalClosed, splitterRef } =
+    props;
+  return (
+    <div
+      onDoubleClick={onDoubleClick}
+      onMouseDown={onMouseDown}
+      css={getSeparatorStyle(direction, !isFinalClosed)}
+      ref={splitterRef}
+    >
+      <div style={{ fontSize: '0.875em' }}>
+        {direction === 'horizontal' ? <span>⋮</span> : <span>⋯</span>}
+      </div>
+    </div>
+  );
+}
+
+interface SplitSideProps {
+  style: CSSProperties;
+  children: ReactNode;
+}
+
+function SplitSide(props: SplitSideProps) {
+  const { style, children } = props;
+
+  return <div style={style}>{children}</div>;
+}
+
+function parseSize(initialSize: string): [number, SplitPaneType] {
+  const [, value, type] = /(?<value>^\d+)(?<type>.+)$/.exec(
+    initialSize,
+  ) as unknown as [string, string, SplitPaneType];
+
+  return [Number(value), type];
+}
+
+const flexBase = 100;
+function percentToFlex(percent: number): number {
+  percent /= 100;
+  return (flexBase - percent * flexBase) / percent;
+}
+
+function getItemStyle(
+  isClosed: boolean,
+  isControlledSide: boolean,
+  direction: SplitPaneDirection,
+  size: number,
+  type: SplitPaneType,
+) {
+  const isHorizontal = direction === 'horizontal';
+  if (isClosed) {
+    return isControlledSide
+      ? { display: 'none' }
+      : { flex: '1 1 0%', display: 'flex' };
+  } else if (type === '%') {
+    return isControlledSide
+      ? { flex: '100 0 0%', display: 'flex' }
+      : { flex: `${percentToFlex(size)} 0 0%`, display: 'flex' };
+  } else {
+    return isControlledSide
+      ? {
+          [isHorizontal ? 'width' : 'height']: size,
+          display: 'flex',
+        }
+      : {
+          flex: '1 1 0%',
+          display: 'flex',
+          minWidth: isHorizontal ? 0 : undefined,
+          minHeight: isHorizontal ? undefined : 0,
+        };
+  }
+}
+
+function getSeparatorStyle(direction: SplitPaneDirection, enabled: boolean) {
+  return css([
+    direction === 'horizontal' && {
+      cursor: enabled ? 'ew-resize' : 'pointer',
+      width: '10px',
+    },
+    direction === 'vertical' && {
+      height: '10px',
+      cursor: enabled ? 'ns-resize' : 'pointer',
+    },
+    {
+      backgroundColor: 'rgb(247, 247, 247)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      userSelect: 'none',
+      minWidth: 11,
+      ':hover': {
+        backgroundColor: 'rgb(223, 223, 223)',
+      },
+    },
+  ]);
+}

package/src/components/split-pane/index.ts

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

package/src/components/split-pane/useSplitPaneSize.tsx

@@ -0,0 +1,99 @@
+import type { RefObject } from 'react';
+
+import type {
+  SplitPaneDirection,
+  SplitPaneSide,
+  SplitPaneSize,
+  SplitPaneType,
+} from './SplitPane';
+
+interface UseSplitPaneSizeOptions {
+  controlledSide: SplitPaneSide;
+  direction: SplitPaneDirection;
+  splitterRef: RefObject<HTMLDivElement>;
+  sizeType: SplitPaneType;
+  onSizeChange: (newSize: [number, SplitPaneType]) => void;
+  onResize?: (newSize: SplitPaneSize) => void;
+}
+
+export function useSplitPaneSize(options: UseSplitPaneSizeOptions) {
+  const {
+    controlledSide,
+    direction,
+    splitterRef,
+    sizeType,
+    onSizeChange,
+    onResize,
+  } = options;
+
+  function mouseDownCallback() {
+    let lastSize: [number, SplitPaneType] | null = null;
+    function onMouseMove(event: MouseEvent) {
+      if (!splitterRef.current) return;
+      const { clientX, clientY } = event;
+      const parentDiv = splitterRef.current.parentElement as HTMLDivElement;
+      const bounds = parentDiv.getBoundingClientRect();
+      const parentDimension =
+        direction === 'horizontal'
+          ? parentDiv.clientWidth
+          : parentDiv.clientHeight;
+
+      const client =
+        direction === 'horizontal'
+          ? clientX - bounds.left
+          : clientY - bounds.top;
+
+      const centralizingValue =
+        direction === 'horizontal'
+          ? splitterRef.current.clientWidth / 2
+          : splitterRef.current.clientHeight / 2;
+
+      const value =
+        controlledSide === 'start' ? client : parentDimension - client;
+
+      if (sizeType === 'px') {
+        const newSize = getValueFromSplitter(value - centralizingValue, {
+          min: 50,
+          max: parentDimension - 50,
+        });
+        lastSize = [newSize, sizeType];
+        onSizeChange(lastSize);
+      } else if (sizeType === '%') {
+        const valueDiff = (value / parentDimension) * 100;
+        const newSize = getValueFromSplitter(valueDiff, {
+          min: 5,
+          max: 95,
+        });
+        lastSize = [newSize, sizeType];
+        onSizeChange(lastSize);
+      }
+    }
+
+    function mouseUpCallback() {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', mouseUpCallback);
+      if (lastSize && onResize) {
+        onResize(`${lastSize[0]}${lastSize[1]}`);
+      }
+    }
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', mouseUpCallback);
+  }
+
+  return {
+    onMouseDown: mouseDownCallback,
+  };
+}
+
+function getValueFromSplitter(
+  value: number,
+  options: { min: number; max: number },
+) {
+  const newValue = Math.round((value + Number.EPSILON) * 100) / 100;
+  return getMinMax(newValue, options);
+}
+
+function getMinMax(value: number, options: { min: number; max: number }) {
+  return Math.min(Math.max(value, options.min), options.max);
+}

package/src/components/table/Table.tsx

@@ -0,0 +1,128 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import {
+  Children,
+  createContext,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useMemo,
+} from 'react';
+
+import {
+  Boolean,
+  Color,
+  Component,
+  Header,
+  Number,
+  Object,
+  Text,
+  Title,
+} from '../value-renderers';
+
+const styles = {
+  border: css({
+    border: '0.5px solid rgb(0, 0, 0)',
+    padding: '5px',
+    position: 'relative',
+  }),
+  noBorder: css({
+    padding: '5px',
+    position: 'relative',
+  }),
+};
+
+const TableContext = createContext({ border: true });
+function useTableContext() {
+  const context = useContext(TableContext);
+  return context;
+}
+
+function splitChildren(children: ReactNode) {
+  const Rows: ReactElement[] = [];
+  let Header: ReactElement | null = null;
+  for (let child of Children.toArray(children)) {
+    if (typeof child !== 'object' || !isValidElement(child)) {
+      // eslint-disable-next-line no-console
+      console.error('Invalid Table child:', child);
+      throw new Error('invalid Table child');
+    } else if (child.type === Table.Row) {
+      Rows.push(child);
+    } else if (child.type === Table.Header) {
+      Header = child;
+    } else {
+      throw new Error('invalid Table child');
+    }
+  }
+  return { Rows, Header };
+}
+export interface TableProps {
+  children?: ReactNode;
+  border?: boolean;
+}
+
+export function Table(props: TableProps) {
+  const { border = true, children } = props;
+  const { Header, Rows } = splitChildren(children);
+  const tableContextValue = useMemo(() => ({ border }), [border]);
+  return (
+    <TableContext.Provider value={tableContextValue}>
+      <table>
+        {Header}
+        <tbody>{Rows}</tbody>
+      </table>
+    </TableContext.Provider>
+  );
+}
+
+function useRowChildren(children: ReactNode) {
+  const cells: ReactElement[] = [];
+  const { border } = useTableContext();
+  for (let child of Children.toArray(children)) {
+    if (
+      typeof child === 'object' &&
+      isValidElement(child) &&
+      (child.type === Color ||
+        child.type === Boolean ||
+        child.type === Text ||
+        child.type === Number ||
+        child.type === Title ||
+        child.type === Object ||
+        child.type === Header ||
+        child.type === Component)
+    ) {
+      if (child.type === Header) {
+        cells.push(
+          <th key={child.key} css={border ? styles.border : styles.noBorder}>
+            {child}
+          </th>,
+        );
+      } else {
+        cells.push(
+          <td key={child.key} css={border ? styles.border : styles.noBorder}>
+            {child}
+          </td>,
+        );
+      }
+    } else {
+      // eslint-disable-next-line no-console
+      console.error('Invalid Row child:', child);
+      throw new Error('invalid Row child');
+    }
+  }
+  return { cells };
+}
+
+function Row({ children, border = false }: TableProps) {
+  const { cells } = useRowChildren(children);
+  return <tr style={{ border: border ? '1px solid black' : '' }}>{cells}</tr>;
+}
+Table.Row = Row;
+Table.Header = ({ children, border = false }: TableProps) => {
+  return (
+    <thead>
+      <Table.Row border={border}>{children}</Table.Row>
+    </thead>
+  );
+};

package/src/components/table/index.ts

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

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,183 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { ReactNode, useMemo } from 'react';
+
+import { TabsProvider, useTabsContext } from './TabsContext';
+
+type TabsOrientation = 'vertical' | 'horizontal';
+
+export interface TabItem<T extends string = string> {
+  id: T;
+  title: ReactNode;
+  content: ReactNode;
+}
+
+interface TabsItemProps {
+  onClick: () => void;
+  title: ReactNode;
+  id: string;
+}
+
+interface TabsProps<T extends string = string> {
+  opened?: T;
+  orientation?: TabsOrientation;
+  items: Array<TabItem<T>>;
+  onClick?: (id: T) => void;
+}
+
+const styles = {
+  scroll: css({
+    '&::-webkit-scrollbar': {
+      height: '7px',
+      width: '7px',
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: 'rgba(0,0,0,.05)',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(0,0,0,.2)',
+    },
+  }),
+  item: (isSelected: boolean, orientation: TabsOrientation) => {
+    return css([
+      {
+        padding: '0.25em 1em',
+        border: '1px solid hsl(0deg, 0%, 80%)',
+        fontSize: '1.125em',
+        ':hover': {
+          backgroundColor: 'hsl(0deg, 0%, 90%)',
+        },
+        whiteSpace: 'nowrap',
+      },
+      isSelected && {
+        backgroundColor: 'hsl(0deg, 0%, 95%)',
+        ':hover': {
+          backgroundColor: 'hsl(0deg, 0%, 90%)',
+        },
+      },
+      orientation === 'horizontal' && {
+        margin: '0px 2px 0px 2px',
+        borderBottom: 'none',
+      },
+      orientation === 'vertical' && {
+        margin: '2px 0px 2px 0px',
+        borderRight: 'none',
+      },
+    ]);
+  },
+};
+
+export function Tabs<T extends string = string>(props: TabsProps<T>) {
+  const { orientation = 'horizontal', items, onClick, opened } = props;
+  const item = useMemo(
+    () => items.find(({ id: itemId }) => itemId === opened),
+    [items, opened],
+  );
+  if (orientation === 'horizontal') {
+    return (
+      <TabsProvider opened={item}>
+        <TabsHorizontal items={items} onClick={onClick} />
+      </TabsProvider>
+    );
+  }
+
+  return (
+    <TabsProvider opened={item}>
+      <TabsVertical items={items} onClick={onClick} />
+    </TabsProvider>
+  );
+}
+
+function TabsItem(props: TabsItemProps & { orientation: TabsOrientation }) {
+  const item = useTabsContext();
+
+  return (
+    <button
+      type="button"
+      onClick={props.onClick}
+      css={styles.item(item?.id === props.id, props.orientation)}
+    >
+      {props.title}
+    </button>
+  );
+}
+
+function TabsVertical<T extends string = string>(
+  props: Omit<TabsProps<T>, 'orientation' | 'opened'>,
+) {
+  const { items, onClick } = props;
+  const item = useTabsContext();
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        flex: '1 1 0%',
+        overflowY: 'hidden',
+        height: '100%',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          borderRight: '1px solid hsl(0deg, 0%, 80%)',
+          overflowY: 'auto',
+        }}
+        css={styles.scroll}
+      >
+        {items.map((item) => (
+          <TabsItem
+            orientation="vertical"
+            key={item.id}
+            title={item.title}
+            id={item.id}
+            onClick={() => {
+              onClick?.(item.id);
+            }}
+          />
+        ))}
+      </div>
+      {item && (
+        <div style={{ flex: '1 1 0%', overflowX: 'auto' }}>{item.content}</div>
+      )}
+    </div>
+  );
+}
+
+function TabsHorizontal<T extends string = string>(
+  props: Omit<TabsProps<T>, 'orientation' | 'opened'>,
+) {
+  const { items, onClick } = props;
+  const item = useTabsContext();
+  return (
+    <div
+      style={{ display: 'flex', flexDirection: 'column', overflowX: 'hidden' }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          borderBottom: '1px solid hsl(0deg, 0%, 80%)',
+          overflowX: 'auto',
+        }}
+        css={styles.scroll}
+      >
+        {items.map((item) => (
+          <TabsItem
+            key={item.id}
+            orientation="horizontal"
+            id={item.id}
+            title={item.title}
+            onClick={() => {
+              onClick?.(item.id);
+            }}
+          />
+        ))}
+      </div>
+      {item && (
+        <div style={{ flex: '1 1 0%', overflowX: 'auto' }}>{item.content}</div>
+      )}
+    </div>
+  );
+}