react-science 4.1.2 → 5.0.0

package/src/components/accordion/Accordion.tsx

@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 import type {
   ReactElement,
   ReactNode,
-  ReactFragment,
   MouseEvent as ReactMouseEvent,
 } from 'react';
 import { useCallback } from 'react';
@@ -14,7 +13,6 @@ export interface AccordionProps {
   children?:
     | Array<ReactElement<AccordionItemProps>>
     | ReactElement<AccordionItemProps>
-    | ReactFragment
     | boolean
     | null;
 }
@@ -67,7 +65,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
   const { item, utils } = useAccordionContext(title, defaultOpened);
 
   const onClickHandle = useCallback(
-    (event: ReactMouseEvent<HTMLButtonElement>) => {
+    (event: ReactMouseEvent<HTMLDivElement>) => {
       if (event.shiftKey) {
         utils.clear();
       } else {
@@ -85,9 +83,9 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
         flexDirection: 'column',
       }}
     >
-      <button
+      <div
         onClick={onClickHandle}
-        type="button"
+        role="button"
         style={{
           display: 'flex',
           alignItems: 'center',
@@ -106,7 +104,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
           {title}
         </div>
         {toolbar}
-      </button>
+      </div>
       <div
         style={{
           display: item?.isOpen ? 'flex' : 'none',

package/src/components/dialog/ConfirmDialog.tsx

@@ -7,7 +7,7 @@ import {
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 
-import { Button } from '..';
+import { Button } from '../button';
 
 interface ConfirmDialogProps extends Omit<DialogProps, 'isCloseButtonShown'> {
   onConfirm: () => void;

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

@@ -1,7 +1,7 @@
 import { Button, Colors, NonIdealState } from '@blueprintjs/core';
 import type { IconName } from '@blueprintjs/icons';
 import styled from '@emotion/styled';
-import { CSSProperties, MouseEventHandler } from 'react';
+import { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import { DropzoneOptions, useDropzone } from 'react-dropzone';
 import tinycolor from 'tinycolor2';
 
@@ -59,7 +59,7 @@ export function DropZone(props: DropZoneProps) {
 }
 
 export interface DropZoneContainerProps extends DropZoneProps {
-  children: JSX.Element | null;
+  children: ReactElement | null;
 }
 
 export function DropZoneContainer(props: DropZoneContainerProps) {
@@ -68,7 +68,7 @@ export function DropZoneContainer(props: DropZoneContainerProps) {
 
 function DropZoneContent(
   props: DropZoneProps & {
-    children?: JSX.Element | null;
+    children?: ReactElement | null;
     onClick?: MouseEventHandler<HTMLDivElement>;
     emptyIcon?: IconName;
     emptyTitle?: string;

package/src/components/fullscreen/{FullscreenContext.tsx → fullscreen_context.provider.tsx}

@@ -1,13 +1,7 @@
 /* eslint-disable no-alert */
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from 'react';
+import { ReactNode, useEffect, useMemo, useReducer, useRef } from 'react';
+
+import { fullscreenContext, useFullscreen } from './fullscreen_context';
 
 type ElementType = HTMLDivElement & {
   webkitRequestFullscreen(): Promise<void>;
@@ -20,24 +14,7 @@ type DocumentType = Document & {
 interface FullscreenProps {
   children: ReactNode;
 }
-interface FullscreenState {
-  isFullScreen: boolean;
-}
-
-interface ContextType extends FullscreenState {
-  toggle: () => void;
-}
-const fullscreenContextInit = {
-  isFullScreen: false,
-  toggle: () => {
-    // empty
-  },
-};
-const FullscreenContext = createContext<ContextType>(fullscreenContextInit);
 
-export function useFullscreen() {
-  return useContext(FullscreenContext);
-}
 export function FullScreenProvider(props: FullscreenProps) {
   const [isFullScreen, toggle] = useReducer((value: boolean) => !value, false);
 
@@ -46,9 +23,9 @@ export function FullScreenProvider(props: FullscreenProps) {
     [isFullScreen, toggle],
   );
   return (
-    <FullscreenContext.Provider value={value}>
+    <fullscreenContext.Provider value={value}>
       <FullscreenInner {...props} />
-    </FullscreenContext.Provider>
+    </fullscreenContext.Provider>
   );
 }
 function FullscreenInner(props: FullscreenProps) {

package/src/components/fullscreen/fullscreen_context.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+interface FullscreenState {
+  isFullScreen: boolean;
+}
+
+interface ContextType extends FullscreenState {
+  toggle: () => void;
+}
+const fullscreenContextInit = {
+  isFullScreen: false,
+  toggle: () => {
+    // empty
+  },
+};
+
+export const fullscreenContext = createContext<ContextType>(
+  fullscreenContextInit,
+);
+
+export function useFullscreen() {
+  return useContext(fullscreenContext);
+}

package/src/components/fullscreen/{FullscreenToolbarButton.tsx → fullscreen_toolbar_button.tsx}

@@ -1,6 +1,6 @@
 import { Toolbar } from '../toolbar';
 
-import { useFullscreen } from './FullscreenContext';
+import { useFullscreen } from './fullscreen_context';
 
 export function FullscreenToolbarButton() {
   const { toggle } = useFullscreen();

package/src/components/fullscreen/index.ts

@@ -1,2 +1,3 @@
-export * from './FullscreenContext';
-export * from './FullscreenToolbarButton';
+export * from './fullscreen_context';
+export * from './fullscreen_context.provider';
+export * from './fullscreen_toolbar_button';

package/src/components/hooks/useOnClickOutside.ts

@@ -1,6 +1,6 @@
 import { useEffect, RefObject } from 'react';
 
-import { useRootLayoutContext } from '../root-layout/RootLayoutContext';
+import { useRootLayoutContext } from '../root-layout/root_layout_context';
 
 export function useOnClickOutside<T extends Node = Node>(
   ref: RefObject<T>,

package/src/components/hooks/useSelect.tsx

@@ -9,28 +9,30 @@ type FilterType<SourceType, Type> = Pick<
   }[keyof SourceType]
 >;
 
-interface ItemOptions<T> {
+interface UseSelectCommonOptions<T> {
   renderItem?: (item: T) => ReactNode;
   defaultSelectedItem?: T;
 }
 
-interface BaseOptions<T> extends ItemOptions<T> {
+interface UseSelectBaseOptions<T> extends UseSelectCommonOptions<T> {
   itemTextKey: keyof FilterType<T, string>;
 }
 
-interface RenderOptions<T> extends ItemOptions<T> {
+interface UseSelectRenderOptions<T> extends UseSelectCommonOptions<T> {
   getItemText: (item: T) => string;
 }
 
-type SelectOptions<T> = BaseOptions<T> | RenderOptions<T>;
+export type UseSelectOptions<T> =
+  | UseSelectBaseOptions<T>
+  | UseSelectRenderOptions<T>;
 
 function isAccessLabelByKey<T>(
-  options: SelectOptions<T>,
-): options is BaseOptions<T> {
+  options: UseSelectOptions<T>,
+): options is UseSelectBaseOptions<T> {
   return 'itemTextKey' in options;
 }
 
-function getLabel<T>(item: T, options: SelectOptions<T>) {
+function getLabel<T>(item: T, options: UseSelectOptions<T>) {
   const isAccessLByLabelKey = isAccessLabelByKey(options);
 
   if (!item || (isAccessLByLabelKey && !options.itemTextKey)) {
@@ -44,7 +46,7 @@ function getLabel<T>(item: T, options: SelectOptions<T>) {
   return options.getItemText(item);
 }
 
-export function useSelect<T>(options: SelectOptions<T>) {
+export function useSelect<T>(options: UseSelectOptions<T>) {
   const { defaultSelectedItem = null } = options;
 
   const [value, setValue] = useState<T | null>(defaultSelectedItem);
@@ -86,7 +88,7 @@ export function useSelect<T>(options: SelectOptions<T>) {
   };
 }
 
-function getItemRenderer<T>(value: T, options: SelectOptions<T>) {
+function getItemRenderer<T>(value: T, options: UseSelectOptions<T>) {
   const selectedLabel = getLabel(value, options);
 
   const render: ItemRenderer<T> = (

package/src/components/info-panel/InfoPanel.tsx

@@ -4,11 +4,12 @@ import { css } from '@emotion/react';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { CSSProperties, useCallback, useMemo, useState } from 'react';
 
-import { ValueRenderers } from '../index';
-import { Table } from '../table/Table';
+import { createTableColumnHelper, Table } from '../table';
+import * as ValueRenderers from '../value-renderers';
 
 export interface InfoPanelData {
   description: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: Record<string, string | number | object | boolean | any>;
 }
 
@@ -70,35 +71,51 @@ const style = {
   }),
 };
 
+interface InfoPanelDatum {
+  parameter: string;
+  value: string | number | object;
+}
+
+const columnHelper = createTableColumnHelper<InfoPanelDatum>();
+const columns = [
+  columnHelper.accessor('parameter', {
+    header: 'Parameter',
+  }),
+  columnHelper.accessor('value', {
+    header: 'Value',
+    cell: ({ getValue }) => valueCell(getValue()),
+  }),
+];
+
 export function InfoPanel(props: InfoPanelProps) {
   const [search, setSearch] = useState('');
   const { title = 'Information', data = [], titleStyle, inputStyle } = props;
   const viewData = useCallback(
     (data: Record<string, string | number | object>) => {
-      const exactMatch: Array<[string, string | number | object]> = [];
-      const startsWith: Array<[string, string | number | object]> = [];
-      const includes: Array<[string, string | number | object]> = [];
-      const valueContains: Array<[string, string | number | object]> = [];
+      const exactMatch: InfoPanelDatum[] = [];
+      const startsWith: InfoPanelDatum[] = [];
+      const includes: InfoPanelDatum[] = [];
+      const valueContains: InfoPanelDatum[] = [];
 
-      for (const [key, value] of Object.entries(data).sort(([a], [b]) =>
+      for (const [parameter, value] of Object.entries(data).sort(([a], [b]) =>
         a.localeCompare(b),
       )) {
-        const lowerKey = key.toLowerCase();
+        const lowerKey = parameter.toLowerCase();
         const lowerSearch = search.toLowerCase();
         if (lowerKey === lowerSearch) {
-          exactMatch.push([key, value]);
+          exactMatch.push({ parameter, value });
           continue;
         }
         if (lowerKey.startsWith(lowerSearch)) {
-          startsWith.push([key, value]);
+          startsWith.push({ parameter, value });
           continue;
         }
         if (lowerKey.includes(lowerSearch)) {
-          includes.push([key, value]);
+          includes.push({ parameter, value });
           continue;
         }
         if (valueSearch(value, search)) {
-          valueContains.push([key, value]);
+          valueContains.push({ parameter, value });
           continue;
         }
       }
@@ -109,7 +126,7 @@ export function InfoPanel(props: InfoPanelProps) {
   const { filteredData, total, count } = useMemo(() => {
     const filteredData: Array<
       Omit<InfoPanelData, 'data'> & {
-        data: Array<[string, string | number | object]>;
+        data: InfoPanelDatum[];
       }
     > = [];
     let total = 0;
@@ -189,29 +206,12 @@ export function InfoPanel(props: InfoPanelProps) {
               </Collapsible.Trigger>
               <Collapsible.Content css={style.content}>
                 <Table
+                  data={data}
+                  columns={columns}
                   striped
-                  css={css({
-                    width: '100%',
-                  })}
+                  tableProps={{ style: { width: '100%' } }}
                   compact
-                >
-                  <Table.Header>
-                    <ValueRenderers.Header value="Parameter" />
-                    <ValueRenderers.Header value="Value" />
-                  </Table.Header>
-                  {data.map(([key, value]) => (
-                    <Table.Row
-                      key={key}
-                      style={{
-                        height: '10px',
-                        padding: '0 !imporant',
-                      }}
-                    >
-                      <ValueRenderers.Text value={key} />
-                      {valueCell(value)}
-                    </Table.Row>
-                  ))}
-                </Table>
+                />
               </Collapsible.Content>
             </Collapsible.Root>
           );

package/src/components/logger/FifoLoggerDialog.tsx

@@ -4,9 +4,16 @@ import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { LogEntry } from 'fifo-logger';
-import { CSSProperties } from 'react';
+import { CSSProperties, useMemo } from 'react';
 
-import { Button, Table, useFifoLogger, ValueRenderers } from '../index';
+import { Button } from '../button';
+import {
+  createTableColumnHelper,
+  Table,
+  type TableRowTrPropsGetter,
+} from '../table';
+
+import { useFifoLogger } from './useFifoLogger';
 
 const ActionsFooter = styled.div`
   display: flex;
@@ -37,8 +44,54 @@ export interface FifoLoggerDialogProps {
   unseen: number;
 }
 
+const columnHelper = createTableColumnHelper<LogEntry>();
+function useColumns(unseen: number) {
+  return useMemo(
+    () => [
+      columnHelper.display({
+        header: '#',
+        cell: ({ row }) => {
+          return (
+            <RowIndexCell
+              pillColor={
+                row.index >= unseen
+                  ? 'transparent'
+                  : rowBackgroundColor[row.original.levelLabel]
+              }
+            >
+              {String(row.index + 1)}
+            </RowIndexCell>
+          );
+        },
+      }),
+      columnHelper.accessor('time', {
+        header: 'Time',
+        cell: ({ getValue }) => new Date(getValue()).toLocaleTimeString(),
+      }),
+      columnHelper.accessor('levelLabel', {
+        header: 'Level',
+      }),
+      columnHelper.accessor('message', {
+        header: 'Message',
+      }),
+    ],
+    [unseen],
+  );
+}
+
+const getRowTrProps: TableRowTrPropsGetter<LogEntry> = (row) => {
+  return {
+    style: {
+      backgroundColor: rowBackgroundColor[row.original.levelLabel],
+    },
+  };
+};
+
 export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
   const logger = useFifoLogger();
+
+  const columns = useColumns(props.unseen);
+
   return (
     <Dialog
       shouldReturnFocusOnClose={false}
@@ -55,44 +108,13 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
     >
       <DialogBody>
         <Table
+          data={props.logs}
+          columns={columns}
           compact
           bordered
-          css={css`
-            width: 100%;
-          `}
-        >
-          <Table.Header>
-            <ValueRenderers.Header value="#" />
-            <ValueRenderers.Header value="Time" />
-            <ValueRenderers.Header value="Level" />
-            <ValueRenderers.Header value="Message" />
-          </Table.Header>
-          {props.logs.map((logEntry, idx) => (
-            <Table.Row
-              key={logEntry.id}
-              style={{
-                backgroundColor: rowBackgroundColor[logEntry.levelLabel],
-              }}
-            >
-              <ValueRenderers.Component>
-                <RowIndexCell
-                  pillColor={
-                    idx >= props.unseen
-                      ? 'transparent'
-                      : rowBackgroundColor[logEntry.levelLabel]
-                  }
-                >
-                  {String(idx + 1)}
-                </RowIndexCell>
-              </ValueRenderers.Component>
-              <ValueRenderers.Text
-                value={new Date(logEntry.time).toLocaleTimeString()}
-              />
-              <ValueRenderers.Text value={logEntry.levelLabel} />
-              <ValueRenderers.Text value={logEntry.message} />
-            </Table.Row>
-          ))}
-        </Table>
+          tableProps={{ style: { width: '100%' } }}
+          getRowTrProps={getRowTrProps}
+        />
       </DialogBody>
       <DialogFooter
         actions={

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

@@ -1 +1 @@
-export * from './RootLayout';
+export * from './root_layout';

package/src/components/root-layout/{RootLayout.tsx → root_layout.tsx}

@@ -4,9 +4,9 @@ import { CSSProperties, ReactNode, useCallback, useState } from 'react';
 
 import { AccordionProvider } from '../accordion';
 
-import { RootLayoutProvider } from './RootLayoutContext';
 import { CustomDivPreflight } from './css-reset/customPreflight';
-import { queryClient } from './queryClient';
+import { queryClient } from './query_client';
+import { RootLayoutProvider } from './root_layout_context.provider';
 
 FocusStyleManager.onlyShowFocusOnTabs();
 

package/src/components/root-layout/root_layout_context.provider.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+import { rootLayoutContext } from './root_layout_context';
+
+export function RootLayoutProvider(props: {
+  children: ReactNode;
+  innerRef: HTMLElement | null;
+}) {
+  return (
+    <rootLayoutContext.Provider value={props.innerRef}>
+      {props.children}
+    </rootLayoutContext.Provider>
+  );
+}

package/src/components/root-layout/root_layout_context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const defaultPortalContext =
+  typeof document === 'undefined' ? null : document.body;
+
+export const rootLayoutContext = createContext<HTMLElement | null>(
+  defaultPortalContext,
+);
+
+export function useRootLayoutContext() {
+  return useContext(rootLayoutContext);
+}

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

@@ -2,10 +2,8 @@
 import { css } from '@emotion/react';
 import {
   PointerEvent as ReactPointerEvent,
-  createContext,
   CSSProperties,
   ReactNode,
-  useContext,
   useRef,
   useState,
   RefObject,
@@ -69,12 +67,6 @@ export interface SplitPaneProps {
   children: [ReactNode, ReactNode];
 }
 
-const splitPaneContext = createContext<boolean>(false);
-
-export function useSplitPaneContext() {
-  return useContext(splitPaneContext);
-}
-
 export function SplitPane(props: SplitPaneProps) {
   const {
     direction = 'horizontal',

package/src/components/table/default_table_cell.tsx

@@ -0,0 +1,20 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+
+import * as ValueRenderers from '../value-renderers';
+
+// TODO: support Date
+export function defaultTableCell<TData extends RowData, TValue = unknown>(
+  context: CellContext<TData, TValue>,
+) {
+  const value = context.getValue();
+  if (typeof value === 'string') {
+    return <ValueRenderers.Text value={value} />;
+  } else if (typeof value === 'number') {
+    return <ValueRenderers.Number value={value} />;
+  } else if (typeof value === 'boolean') {
+    return <ValueRenderers.Boolean value={value} />;
+  } else {
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    return <ValueRenderers.Text value={`${value}`} />;
+  }
+}

package/src/components/table/index.ts

@@ -1 +1,2 @@
-export * from './Table';
+export * from './table_root';
+export * from './table_utils';

package/src/components/table/table_body.tsx

@@ -0,0 +1,31 @@
+import type { Row, RowData } from '@tanstack/react-table';
+import type { HTMLAttributes } from 'react';
+
+import { TableRow } from './table_row';
+import { TableRowCell } from './table_row_cell';
+import type { TableRowTrPropsGetter } from './table_utils';
+
+export type TrPropsGetter = Omit<
+  HTMLAttributes<HTMLTableRowElement>,
+  'children'
+>;
+
+interface TableBodyProps<TData extends RowData> {
+  rows: Array<Row<TData>>;
+  getRowTrProps?: TableRowTrPropsGetter<TData>;
+}
+
+export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
+  const { rows, getRowTrProps } = props;
+  return (
+    <tbody>
+      {rows.map((row) => (
+        <TableRow key={row.id} trProps={getRowTrProps?.(row)}>
+          {row.getVisibleCells().map((cell) => (
+            <TableRowCell key={cell.id} cell={cell} />
+          ))}
+        </TableRow>
+      ))}
+    </tbody>
+  );
+}

package/src/components/table/table_header.tsx

@@ -0,0 +1,32 @@
+import type { Header, RowData } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+
+import { TableHeaderCell } from './table_header_cell';
+import { TableRow } from './table_row';
+
+const headerStyle: CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  zIndex: 10,
+  backgroundColor: 'white',
+};
+
+interface TableHeaderProps<TData extends RowData> {
+  headers: Array<Header<TData, unknown>>;
+  sticky: boolean;
+}
+
+export function TableHeader<TData extends RowData>(
+  props: TableHeaderProps<TData>,
+) {
+  const { headers, sticky } = props;
+  return (
+    <thead style={sticky ? headerStyle : undefined}>
+      <TableRow>
+        {headers.map((header) => (
+          <TableHeaderCell key={header.id} header={header} />
+        ))}
+      </TableRow>
+    </thead>
+  );
+}