react-science 0.19.1

package/src/components/accordion/AccordionContext.tsx

@@ -0,0 +1,195 @@
+import { Draft, produce } from 'immer';
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  Reducer,
+  useReducer,
+  useMemo,
+  useEffect,
+} from 'react';
+
+interface AccordionItemState {
+  title: string;
+  isOpen: boolean;
+}
+
+type ActionType<Action, Payload = void> = Payload extends void
+  ? { type: Action }
+  : { type: Action; payload: Payload };
+
+export interface AccordionState {
+  items: Array<AccordionItemState>;
+}
+
+type AccordionActions =
+  | ActionType<'TOGGLE', string>
+  | ActionType<'CLEAR', string>
+  | ActionType<'REMOVE_ITEM', string>
+  | ActionType<'CREATE_ITEM', { title: string; isOpen: boolean }>
+  | ActionType<'CHANGE_ITEM', { title: string; isOpen: boolean }>;
+
+type ContextType = [
+  AccordionContext,
+  {
+    clear: (except: string) => void;
+    toggle: (title: string) => void;
+    remove: (title: string) => void;
+    create: (title: string, defaultOpened?: boolean) => AccordionItemState;
+    change: (title: string, isOpen: boolean) => void;
+  },
+];
+
+type AccordionContext = AccordionState;
+
+const accordionContext = createContext<ContextType | null>(null);
+
+const reducer: Reducer<AccordionState, AccordionActions> = produce(
+  (draft, actions): Draft<AccordionState> => {
+    switch (actions.type) {
+      case 'TOGGLE': {
+        const item = getItem(actions.payload, draft.items);
+
+        if (!item) {
+          draft.items.push({ isOpen: true, title: actions.payload });
+          return draft;
+        }
+
+        item.isOpen = !item.isOpen;
+
+        return draft;
+      }
+      case 'CLEAR': {
+        const item = getItem(actions.payload, draft.items);
+
+        if (!item) {
+          draft.items.push({ isOpen: true, title: actions.payload });
+          return draft;
+        }
+
+        for (const element of draft.items) {
+          element.isOpen = element.title === item.title;
+        }
+
+        return draft;
+      }
+      case 'REMOVE_ITEM': {
+        draft.items = draft.items.filter(
+          (element) => element.title !== actions.payload,
+        );
+
+        return draft;
+      }
+      case 'CREATE_ITEM': {
+        draft.items.push(actions.payload);
+        return draft;
+      }
+      case 'CHANGE_ITEM': {
+        const item = getItem(actions.payload.title, draft.items);
+
+        if (item) {
+          item.isOpen = actions.payload.isOpen;
+        }
+
+        return draft;
+      }
+      default: {
+        return draft;
+      }
+    }
+  },
+);
+
+export function useToggleAccordion() {
+  const context = useContext(accordionContext);
+
+  if (!context) {
+    throw new Error('AccordionContext was not found');
+  }
+
+  const [, utils] = context;
+
+  return useMemo(() => {
+    return {
+      open: (title: string) => utils.change(title, true),
+      close: (title: string) => utils.change(title, false),
+    };
+  }, [utils]);
+}
+
+export function useAccordionContext(title: string, defaultOpened?: boolean) {
+  const context = useContext(accordionContext);
+
+  if (!context) {
+    throw new Error('AccordionContext was not found');
+  }
+
+  const [state, utils] = context;
+
+  useEffect(() => {
+    utils.create(title, defaultOpened);
+    return () => utils.remove(title);
+  }, [defaultOpened, title, utils]);
+
+  let item = getItem(title, state.items);
+
+  return useMemo(
+    () => ({
+      item,
+      utils: {
+        clear: () => utils.clear(title),
+        toggle: () => utils.toggle(title),
+        remove: () => utils.remove(title),
+        create: (defaultOpened?: boolean) => utils.create(title, defaultOpened),
+      },
+    }),
+    [item, title, utils],
+  );
+}
+
+export function AccordionProvider(props: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(reducer, {
+    items: [],
+  });
+
+  const utils = useMemo(
+    () => ({
+      change: (title: string, isOpen: boolean) => {
+        return dispatch({
+          type: 'CHANGE_ITEM',
+          payload: { isOpen, title },
+        });
+      },
+      clear: (except: string) => {
+        return dispatch({ type: 'CLEAR', payload: except });
+      },
+      toggle: (title: string) => {
+        return dispatch({ type: 'TOGGLE', payload: title });
+      },
+      remove: (title: string) => {
+        return dispatch({ type: 'REMOVE_ITEM', payload: title });
+      },
+      create: (title: string, defaultOpened?: boolean) => {
+        const item = { title, isOpen: defaultOpened || false };
+        dispatch({ type: 'CREATE_ITEM', payload: item });
+        return item;
+      },
+    }),
+    [dispatch],
+  );
+
+  const value = useMemo<ContextType>(() => {
+    return [{ items: state.items }, utils];
+  }, [state.items, utils]);
+
+  return (
+    <accordionContext.Provider value={value}>
+      {props.children}
+    </accordionContext.Provider>
+  );
+}
+
+function getItem(title: string, items: Array<AccordionItemState>) {
+  const item = items.find((element) => element.title === title);
+  return item;
+}

package/src/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './AccordionContext';

package/src/components/button/Button.tsx

@@ -0,0 +1,59 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import type { CSSProperties, ReactNode } from 'react';
+
+interface Colorhover {
+  basic: CSSProperties['backgroundColor'];
+  hover?: CSSProperties['backgroundColor'];
+}
+
+interface ButtonProps {
+  children: ReactNode;
+  backgroundColor?: Colorhover;
+  color?: Colorhover;
+  onClick?: () => void;
+  style?: CSSProperties;
+}
+
+export function Button(props: ButtonProps) {
+  const {
+    backgroundColor = {
+      basic: 'hsl(21deg, 90%, 48%)',
+      hover: 'hsl(21deg, 90%, 40%)',
+    },
+    color = { basic: 'white', hover: 'white' },
+    style,
+    onClick,
+    children,
+  } = props;
+
+  return (
+    <button
+      style={style}
+      onClick={onClick}
+      css={css({
+        display: 'flex',
+        alignItems: 'center',
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderWidth: 1,
+        borderColor: 'transparent',
+        fontSize: '1.125em',
+        borderRadius: 6,
+        color: color.basic,
+        minWidth: 30,
+        justifyContent: 'center',
+        backgroundColor: backgroundColor.basic,
+        ':hover': {
+          color: color.hover,
+          backgroundColor: backgroundColor.hover,
+        },
+      })}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/button/ButtonGroup.tsx

@@ -0,0 +1,71 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { ReactNode } from 'react';
+
+const styles = {
+  root: css`
+    display: inline-flex;
+    border-radius: 0.375rem;
+    isolation: isolate;
+  `,
+  firstButton: css`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-width: 1px;
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  `,
+  secondButton: css`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-width: 1px;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+    margin-left: -1px;
+  `,
+};
+
+interface ButtonGroupProps {
+  children: [ReactNode, ReactNode];
+}
+
+export function ButtonGroup(props: ButtonGroupProps) {
+  const { children } = props;
+  return <div css={styles.root}>{children}</div>;
+}
+
+interface ButtonGroupButtonProps {
+  position: 'first' | 'last';
+  label: string;
+  onClick: () => void;
+}
+
+ButtonGroup.Button = function ButtonGroupButton(props: ButtonGroupButtonProps) {
+  const { position, label, onClick } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      css={position === 'first' ? styles.firstButton : styles.secondButton}
+    >
+      {label}
+    </button>
+  );
+};

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './ButtonGroup';

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -0,0 +1,77 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { 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 FixedColorPreview from '../preview/FixedColorPreview';
+import { ColorPicker, ColorPickerProps } from '../react-color/ColorPicker';
+import * as colorHelper from '../react-color/helpers/color';
+
+type ColorPickerDropdownProps = Pick<
+  ColorPickerProps,
+  'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
+>;
+
+const colorPickerDropdownCss = {
+  root: css`
+    position: relative;
+    width: 100%;
+    border: 1px solid darkgray;
+    border-radius: 0.25rem;
+    height: 30px;
+    padding: 5px;
+  `,
+  preview: css`
+    height: 100%;
+    width: 100%;
+    border-radius: 0.125rem;
+  `,
+};
+
+export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
+  const { color, ...otherProps } = props;
+
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [isOpened, , close, toggle] = useOnOff(false);
+
+  const { hex } = colorHelper.toState(color || 'white');
+
+  const { setReferenceElement, setPopperElement, popperProps } =
+    useModifiedPopper<HTMLButtonElement>({
+      placement: 'bottom-start',
+      offset: 6,
+    });
+
+  useOnClickOutside(ref, close);
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={setReferenceElement}
+        css={colorPickerDropdownCss.root}
+        onClick={toggle}
+      >
+        <div css={colorPickerDropdownCss.preview}>
+          <FixedColorPreview color={hex} />
+        </div>
+      </button>
+      {isOpened && (
+        <Portal>
+          <div
+            ref={(div) => {
+              setPopperElement(div);
+              ref.current = div;
+            }}
+            {...popperProps}
+          >
+            <ColorPicker color={color} {...otherProps} />
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+}

package/src/components/color-picker/gradient-select/GradientSelect.tsx

@@ -0,0 +1,92 @@
+import styled from '@emotion/styled';
+import { Listbox } from '@headlessui/react';
+import * as scaleChromatic from 'd3-scale-chromatic';
+import { Fragment } from 'react';
+import { FaChevronDown } from 'react-icons/fa';
+
+import FixedGradientPreview from '../preview/FixedGradientPreview';
+
+export const fixedGradientScales = {
+  turbo: scaleChromatic.interpolateTurbo,
+  viridis: scaleChromatic.interpolateViridis,
+  inferno: scaleChromatic.interpolateInferno,
+  magma: scaleChromatic.interpolateMagma,
+  plasma: scaleChromatic.interpolatePlasma,
+};
+
+export type GradientScaleName = keyof typeof fixedGradientScales;
+
+const scaleOptions = Object.keys(fixedGradientScales) as GradientScaleName[];
+
+const GradientSelectListbox = styled.div`
+  position: relative;
+  width: 100%;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+`;
+
+const GradientSelectButton = styled.button`
+  position: relative;
+  width: 100%;
+  height: 30px;
+  padding: 3px;
+`;
+
+const GradientSelectChevron = styled(FaChevronDown)`
+  position: absolute;
+  height: 100%;
+  top: 0;
+  right: 0.5rem;
+`;
+
+const GradientSelectOptions = styled.ul`
+  position: absolute;
+  width: 100%;
+  margin-top: 5px;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+  padding-inline: 3px;
+  padding-bottom: 5px;
+`;
+
+const GradientSelectOption = styled.li<{ active: boolean }>`
+  display: flex;
+  flex-direction: column;
+  padding-top: 5px;
+  cursor: pointer;
+  ${(props) => !props.active && 'opacity: 0.8;'}
+  ${(props) => props.active && 'font-weight: bold;'}
+`;
+
+export interface GradientSelectProps {
+  value: GradientScaleName;
+  onChange: (value: GradientScaleName) => void;
+}
+
+export function GradientSelect(props: GradientSelectProps) {
+  const { value, onChange } = props;
+  return (
+    <Listbox value={value} onChange={onChange}>
+      <GradientSelectListbox>
+        <Listbox.Button as={GradientSelectButton}>
+          <FixedGradientPreview gradient={value} />
+          <GradientSelectChevron />
+        </Listbox.Button>
+        <Listbox.Options as={GradientSelectOptions}>
+          {scaleOptions.map((option) => (
+            <Listbox.Option as={Fragment} key={option} value={option}>
+              {({ active }) => (
+                <GradientSelectOption active={active}>
+                  {option}
+                  <div style={{ height: 15 }}>
+                    <FixedGradientPreview gradient={option} />
+                  </div>
+                </GradientSelectOption>
+              )}
+            </Listbox.Option>
+          ))}
+        </Listbox.Options>
+      </GradientSelectListbox>
+    </Listbox>
+  );
+}

package/src/components/color-picker/index.ts

@@ -0,0 +1,5 @@
+export * from './color-picker-dropdown/ColorPickerDropdown';
+export * from './gradient-select/GradientSelect';
+export * from './preview/ColorPreview';
+export * from './react-color/ColorPicker';
+export * from './palette';

package/src/components/color-picker/palette.ts

@@ -0,0 +1,12 @@
+// Taken from https://personal.sron.nl/~pault/#fig:scheme_muted
+export const defaultColorPalette = [
+  '#CC6677',
+  '#332288',
+  '#DDCC77',
+  '#117733',
+  '#88CCEE',
+  '#882255',
+  '#44AA99',
+  '#999933',
+  '#AA4499',
+];

package/src/components/color-picker/preview/ColorPreview.tsx

@@ -0,0 +1,23 @@
+import { ColorConfig } from '../../../app-data/index';
+import { assertUnreachable } from '../../utils/assert';
+
+import FixedColorPreview from './FixedColorPreview';
+import FixedGradientPreview from './FixedGradientPreview';
+
+export interface ColorPreviewProps {
+  color: ColorConfig;
+}
+
+export function ColorPreview(props: ColorPreviewProps) {
+  const { color } = props;
+  switch (color.kind) {
+    case 'fixed': {
+      return <FixedColorPreview color={color.color} />;
+    }
+    case 'fixedGradient': {
+      return <FixedGradientPreview gradient={color.gradient} />;
+    }
+    default:
+      assertUnreachable(color);
+  }
+}

package/src/components/color-picker/preview/FixedColorPreview.tsx

@@ -0,0 +1,10 @@
+interface FixedColorPreviewProps {
+  color: string;
+}
+
+export default function FixedColorPreview(props: FixedColorPreviewProps) {
+  const { color } = props;
+  return (
+    <div style={{ width: '100%', height: '100%', backgroundColor: color }} />
+  );
+}

package/src/components/color-picker/preview/FixedGradientPreview.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+
+import {
+  GradientScaleName,
+  fixedGradientScales,
+} from '../gradient-select/GradientSelect';
+
+interface FixedGradientPreviewProps {
+  gradient: GradientScaleName;
+}
+
+export default function FixedGradientPreview(props: FixedGradientPreviewProps) {
+  const { gradient } = props;
+  const scale = fixedGradientScales[gradient];
+
+  const gradientCss = useMemo(() => {
+    const stops: string[] = [];
+    for (let i = 0; i <= 100; i++) {
+      stops.push(scale(i / 100));
+    }
+    return `linear-gradient(to right, ${stops.join(', ')})`;
+  }, [scale]);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        borderRadius: '0.125rem',
+        background: gradientCss,
+      }}
+    />
+  );
+}