react-science 0.19.1

package/src/components/tabs/TabsContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+import type { TabItem } from './Tabs';
+
+const tabsContext = createContext<TabItem | null | undefined>(null);
+
+export function useTabsContext() {
+  const context = useContext(tabsContext);
+  if (context === null) {
+    throw new Error('TabsContext was not found');
+  }
+
+  return context;
+}
+
+export function TabsProvider<T extends string = string>(props: {
+  children: ReactNode;
+  opened?: TabItem<T>;
+}) {
+  const { children, opened } = props;
+  return <tabsContext.Provider value={opened}>{children}</tabsContext.Provider>;
+}

package/src/components/tabs/index.ts

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

package/src/components/toolbar/Toolbar.tsx

@@ -0,0 +1,192 @@
+/** @jsxImportSource @emotion/react */
+import { css, CSSObject } from '@emotion/react';
+import {
+  ReactElement,
+  ReactFragment,
+  ReactNode,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+import { ToolbarProvider, useToolbarContext } from './ToolbarContext';
+
+export type ToolbarOrientation = 'vertical' | 'horizontal';
+export type ToolbarItemOrientation = 'vertical' | 'horizontal' | 'auto';
+
+export interface ToolbarProps {
+  orientation: ToolbarOrientation;
+  children?:
+    | Array<ReactElement<ToolbarItemProps>>
+    | ReactElement<ToolbarItemProps>
+    | ReactFragment
+    | boolean
+    | null;
+}
+
+export interface ToolbarItemProps {
+  id?: string;
+  title: string;
+  children: ReactNode;
+
+  active?: boolean;
+  titleOrientation?: ToolbarItemOrientation;
+  onClick?: (item: ToolbarItemProps) => void;
+  className?: string;
+}
+
+const border = '1px solid rgb(247, 247, 247)';
+
+const styles = {
+  toolbar: (orientation: ToolbarOrientation) => {
+    return css([
+      { display: 'flex', flexWrap: 'wrap' },
+      orientation === 'vertical'
+        ? {
+            flexDirection: 'column',
+            minHeight: '100%',
+            borderRight: border,
+          }
+        : {
+            flexDirection: 'row',
+            minWidth: '100%',
+          },
+    ]);
+  },
+  item: (active: boolean) => {
+    return css([
+      active && { backgroundColor: 'rgb(247, 247, 247)', borderRadius: 5 },
+      {
+        width: 30,
+        height: 30,
+        outline: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+        '&:hover + .content': { display: 'flex' },
+      },
+    ]);
+  },
+  tooltip: (
+    orientation: ToolbarOrientation,
+    itemOrientation: ToolbarItemOrientation,
+  ) => {
+    const common: CSSObject = {
+      display: 'none',
+      position: 'absolute',
+      backgroundColor: 'gray',
+      borderRadius: '2px',
+      color: 'white',
+      bottom: '0px',
+      right: '0px',
+      width: 'fit-content',
+      height: '50%',
+      fontSize: '0.875em',
+      whiteSpace: 'nowrap',
+      paddingLeft: '3px',
+      paddingRight: '3px',
+      zIndex: 50,
+    };
+
+    if (itemOrientation === 'auto') {
+      return css([
+        common,
+        orientation === 'vertical' && { margin: 'auto', marginLeft: 5 },
+        orientation === 'horizontal'
+          ? { top: '100%' }
+          : { top: '0px', left: '100%' },
+      ]);
+    } else {
+      return css([
+        common,
+        itemOrientation === 'horizontal' && { margin: 'auto', marginLeft: 5 },
+        itemOrientation === 'vertical'
+          ? { top: '100%' }
+          : { top: '0px', left: '100%' },
+      ]);
+    }
+  },
+};
+
+export function Toolbar(props: ToolbarProps) {
+  const { children, orientation } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (orientation === 'horizontal') {
+      return;
+    }
+
+    function update() {
+      const lastElement = ref.current?.lastElementChild;
+      if (!lastElement) {
+        return;
+      }
+      ref.current.style.width = 'initial';
+      const divRect = ref.current.getBoundingClientRect();
+      const lastElemRect = lastElement.getBoundingClientRect();
+      const width = `${lastElemRect.right - divRect.left}px`;
+      if (ref.current.style.width !== width) {
+        ref.current.style.width = width;
+      }
+    }
+
+    const element = ref.current;
+    if (element) {
+      const observer = new ResizeObserver(update);
+      observer.observe(element);
+      return () => observer.unobserve(element);
+    }
+  }, [orientation]);
+
+  return (
+    <div css={styles.toolbar(orientation)} ref={ref}>
+      <ToolbarProvider orientation={orientation}>{children}</ToolbarProvider>
+    </div>
+  );
+}
+
+Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
+  const orientation = useToolbarContext();
+  const {
+    active = false,
+    children,
+    onClick,
+    title,
+    titleOrientation = 'auto',
+    id,
+    ...other
+  } = props;
+
+  return (
+    <div
+      style={{ position: 'relative', padding: 4, fontSize: '1.25em' }}
+      {...other}
+    >
+      <button
+        type="button"
+        css={styles.item(active)}
+        onClick={() => {
+          if (onClick) {
+            onClick(props);
+          }
+        }}
+      >
+        {children}
+      </button>
+      <div
+        className="content"
+        css={styles.tooltip(orientation, titleOrientation)}
+      >
+        <span
+          style={{
+            display: 'flex',
+            margin: 'auto',
+            justifyContent: 'center',
+          }}
+        >
+          {title}
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/components/toolbar/ToolbarContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+import type { ToolbarOrientation } from './Toolbar';
+
+const toolbarContext = createContext<ToolbarOrientation | null>(null);
+
+export function useToolbarContext() {
+  const context = useContext(toolbarContext);
+  if (!context) {
+    throw new Error('ToolbarContext was not found');
+  }
+
+  return context;
+}
+
+export function ToolbarProvider(props: {
+  children: ReactNode;
+  orientation: ToolbarOrientation;
+}) {
+  return (
+    <toolbarContext.Provider value={props.orientation}>
+      {props.children}
+    </toolbarContext.Provider>
+  );
+}

package/src/components/toolbar/index.ts

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

package/src/components/utils/assert.ts

@@ -0,0 +1,20 @@
+export function assertUnreachable(x: never): never {
+  throw new Error(`unreachable: ${String(x)}`);
+}
+
+export function assertNotNull<T>(
+  value: T | null | undefined,
+): asserts value is Exclude<T, null | undefined> {
+  if (value === null) {
+    throw new Error('unexpected null value');
+  }
+  if (value === undefined) {
+    throw new Error('unexpected undefined value');
+  }
+}
+
+export function assert(value: unknown, message?: string): asserts value {
+  if (!value) {
+    throw new Error(`unreachable${message ? `: ${message}` : ''}`);
+  }
+}

package/src/components/utils/index.ts

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

package/src/components/value-renderers/Boolean.tsx

@@ -0,0 +1,9 @@
+import type { ValueRenderersProps } from '.';
+
+interface BooleanProps extends ValueRenderersProps {
+  value?: boolean;
+}
+
+export function Boolean({ value, ...other }: BooleanProps) {
+  return <div {...other}>{value !== undefined ? (value ? '✔' : '✘') : ''}</div>;
+}

package/src/components/value-renderers/Color.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import type { ValueRenderersProps } from '.';
+
+interface ColorProps extends ValueRenderersProps {
+  value?: string;
+}
+const styles = {
+  color: css({
+    position: 'absolute',
+    top: '2px',
+    left: '2px',
+    right: '2px',
+    bottom: '2px',
+  }),
+};
+export function Color({ value, style, onClick }: ColorProps) {
+  return (
+    <div
+      onClick={onClick}
+      css={styles.color}
+      style={{
+        background: value,
+        ...style,
+      }}
+    />
+  );
+}

package/src/components/value-renderers/Component.tsx

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+
+import type { ValueRenderersProps } from '.';
+
+interface ComponentProps extends ValueRenderersProps {
+  children?: ReactElement | ReactElement[];
+}
+
+export function Component({ children, ...other }: ComponentProps) {
+  return <div {...other}>{children}</div>;
+}

package/src/components/value-renderers/Header.tsx

@@ -0,0 +1,18 @@
+import { Title, TitleProps } from './Title';
+
+interface HeaderProps extends TitleProps {
+  sorted?: 'asc' | 'desc' | false;
+}
+export function Header({ sorted = false, ...other }: HeaderProps) {
+  return (
+    <div>
+      <Title {...other}>Header</Title>
+      {sorted
+        ? {
+            asc: ' 🔼',
+            desc: ' 🔽',
+          }[sorted]
+        : null}
+    </div>
+  );
+}

package/src/components/value-renderers/Number.tsx

@@ -0,0 +1,12 @@
+import type { ValueRenderersProps } from '.';
+
+interface NumberProps extends ValueRenderersProps {
+  value?: number;
+  fixed?: number;
+}
+
+export function Number({ value, fixed, ...other }: NumberProps) {
+  return (
+    <div {...other}>{value ? (fixed ? value.toFixed(fixed) : value) : ''}</div>
+  );
+}

package/src/components/value-renderers/ObjectRenderer.tsx

@@ -0,0 +1,11 @@
+import { ObjectInspector } from 'react-inspector';
+
+import type { ValueRenderersProps } from '.';
+
+interface ObjectRendererProps extends ValueRenderersProps {
+  value?: object;
+}
+
+export function ObjectRenderer({ value, ...other }: ObjectRendererProps) {
+  return <ObjectInspector data={value} {...other} />;
+}

package/src/components/value-renderers/Text.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import type { ValueRenderersProps } from '.';
+
+interface TextProps extends ValueRenderersProps {
+  value?: string;
+}
+const styles = {
+  text: css({
+    textOverflow: 'ellipsis',
+  }),
+};
+
+export function Text({ value, ...other }: TextProps) {
+  return (
+    <div {...other} css={styles.text}>
+      {value}
+    </div>
+  );
+}

package/src/components/value-renderers/Title.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import type { ValueRenderersProps } from '.';
+
+export interface TitleProps extends ValueRenderersProps {
+  value?: string;
+}
+
+const styles = {
+  title: css({
+    fontWeight: 'bold',
+  }),
+};
+export function Title({ value, ...other }: TitleProps) {
+  return (
+    <div {...other} css={styles.title}>
+      {value}
+    </div>
+  );
+}

package/src/components/value-renderers/index.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, MouseEvent } from 'react';
+
+export { Color } from './Color';
+export { Boolean } from './Boolean';
+export { Number } from './Number';
+export { Text } from './Text';
+export { Title } from './Title';
+export { Component } from './Component';
+
+export { Header } from './Header';
+
+export { ObjectRenderer as Object } from './ObjectRenderer';
+export interface ValueRenderersProps {
+  onClick?: (event: MouseEvent) => void;
+  style?: CSSProperties;
+}

package/src/test-utils.ts

@@ -0,0 +1,11 @@
+import path from 'node:path';
+
+import { fileCollectionFromPath } from 'filelist-utils';
+
+export function getTestDataPath(...subpaths: string[]) {
+  return path.join(__dirname, '..', 'test-data', ...subpaths);
+}
+
+export function getTestFileCollection(...subpaths: string[]) {
+  return fileCollectionFromPath(getTestDataPath(...subpaths));
+}