react-science 0.28.1 → 0.30.0

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

@@ -1,146 +0,0 @@
-import styled from '@emotion/styled';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
-// @ts-ignore This import fails when compiling to CJS.
-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={(event) => {
-            event.stopPropagation();
-            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

@@ -1,2 +0,0 @@
-export * from './DropdownMenu';
-export type { MenuOptions, MenuOption, MenuDivider } from './MenuItems';

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

@@ -1,76 +0,0 @@
-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>) => {
-      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/forms/Checkbox.tsx

@@ -1,77 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import { ReactNode } from 'react';
-import { RxCheck, RxMinus } from 'react-icons/rx/index';
-
-import { disabledColor, enabledColor } from './styles';
-
-export type CheckedState = boolean | 'indeterminate';
-
-interface CheckboxProps {
-  checked?: CheckedState;
-  disabled?: boolean;
-  label?: ReactNode;
-  onChange?: (checked: CheckedState) => void;
-}
-
-export function Checkbox(props: CheckboxProps) {
-  const {
-    checked = 'indeterminate',
-    disabled = false,
-    label,
-    onChange,
-  } = props;
-
-  return (
-    <label
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: '1.125em',
-      }}
-    >
-      <RadixCheckbox.Root
-        checked={checked}
-        onCheckedChange={onChange}
-        disabled={disabled}
-        css={css({
-          width: '16px',
-          height: '16px',
-          backgroundColor: disabled
-            ? 'rgba(0, 0, 0, 0.04)'
-            : checked
-            ? enabledColor
-            : 'white',
-          borderWidth: '1px',
-          borderColor: checked && !disabled ? enabledColor : disabledColor,
-          borderRadius: '4px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: disabled ? 'not-allowed' : 'pointer',
-        })}
-      >
-        <RadixCheckbox.Indicator
-          css={css({
-            color: disabled ? disabledColor : 'white',
-          })}
-        >
-          {checked === true ? (
-            <RxCheck />
-          ) : checked === 'indeterminate' ? (
-            <RxMinus />
-          ) : null}
-        </RadixCheckbox.Indicator>
-      </RadixCheckbox.Root>
-      <span
-        style={{
-          paddingInline: '8px',
-          lineHeight: '16px',
-        }}
-      >
-        {label}
-      </span>
-    </label>
-  );
-}

package/src/components/forms/Input.tsx

@@ -1,144 +0,0 @@
-import styled from '@emotion/styled';
-import { InputHTMLAttributes, ReactNode } from 'react';
-
-import { FullSpinner } from '../index';
-
-import { useFieldsContext } from './context/FieldsContext';
-import {
-  InputContainer,
-  GroupStyled,
-  LabelStyled,
-  InputVariant,
-} from './styles';
-import { SubText, SubTextProps } from './utils';
-
-const InputStyled = styled.input`
-  padding: 0;
-  flex: 1 1 0%;
-  border: none;
-  position: relative;
-  outline: none;
-`;
-
-const LeadingAddonStyled = styled.div`
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  border-right-width: 0px;
-  border-width: 1px;
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-  align-items: center;
-  display: inline-flex;
-
-  border-right: none;
-
-  border-color: var(--custom-border-color);
-`;
-
-const TrailingAddonStyled = styled.div`
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  border-left-width: 0px;
-  border-width: 1px;
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-  align-items: center;
-  display: inline-flex;
-
-  border-left: none;
-
-  border-color: var(--custom-border-color);
-`;
-
-const LeadingInlineAddonStyled = styled.div`
-  display: flex;
-  align-items: center;
-  padding-right: 0.5rem;
-`;
-
-const TrailingInlineAddonStyled = styled.div`
-  display: flex;
-  align-items: center;
-  padding-left: 0.5rem;
-`;
-
-interface RenderAddon {
-  addon: ReactNode;
-  inline?: boolean;
-}
-
-export interface InputProps
-  extends InputHTMLAttributes<HTMLInputElement>,
-    SubTextProps {
-  variant?: InputVariant;
-  leadingAddon?: RenderAddon;
-  trailingAddon?: RenderAddon;
-  help?: string;
-  error?: string;
-  valid?: true | string;
-  loading?: boolean;
-}
-
-export function Input(props: InputProps) {
-  const {
-    variant: variantProps,
-    trailingAddon,
-    leadingAddon,
-    help,
-    error,
-    valid,
-    loading,
-    ...otherProps
-  } = props;
-
-  const { name, variant: contextVariant } = useFieldsContext();
-
-  const hasLeading = (leadingAddon && !leadingAddon.inline) || false;
-  const hasTrailing = (trailingAddon && !trailingAddon.inline) || false;
-  const variant = variantProps || contextVariant;
-
-  return (
-    <InputContainer>
-      <GroupStyled hasError={!!error} hasValid={!!valid}>
-        {leadingAddon && !leadingAddon.inline && (
-          <LeadingAddonStyled>{leadingAddon.addon}</LeadingAddonStyled>
-        )}
-
-        <LabelStyled
-          variant={variant}
-          hasLeading={hasLeading}
-          hasTrailing={hasTrailing}
-        >
-          {leadingAddon?.inline && (
-            <LeadingInlineAddonStyled className="addon">
-              {leadingAddon.addon}
-            </LeadingInlineAddonStyled>
-          )}
-          <InputStyled id={name} name={name} {...otherProps} />
-          {trailingAddon?.inline && (
-            <TrailingInlineAddonStyled className="addon">
-              {trailingAddon.addon}
-            </TrailingInlineAddonStyled>
-          )}
-
-          {loading && (
-            <TrailingInlineAddonStyled
-              style={{ height: variant === 'default' ? 20 : 10 }}
-            >
-              <FullSpinner
-                height={variant === 'default' ? 20 : 10}
-                width={variant === 'default' ? 20 : 10}
-              />
-            </TrailingInlineAddonStyled>
-          )}
-        </LabelStyled>
-
-        {trailingAddon && !trailingAddon.inline && (
-          <TrailingAddonStyled>{trailingAddon.addon}</TrailingAddonStyled>
-        )}
-      </GroupStyled>
-
-      <SubText error={error} help={help} valid={valid} />
-    </InputContainer>
-  );
-}

package/src/components/forms/Select.tsx

@@ -1,197 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import styled from '@emotion/styled';
-import * as RadixSelect from '@radix-ui/react-select';
-import { SelectGroup } from '@radix-ui/react-select';
-import { Fragment, ReactNode, CSSProperties } from 'react';
-import { FaCheck, FaChevronDown, FaChevronUp } from 'react-icons/fa';
-
-import { Portal } from '../root-layout/Portal';
-
-interface Category {
-  label: ReactNode;
-  options: Option[];
-}
-interface Option {
-  label: ReactNode;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface SelectProps {
-  placeholder?: string;
-  value: string | undefined;
-  onSelect?: (value: string | undefined) => void;
-  options: Array<Option[] | Category[]>;
-  disabled?: boolean;
-  style?: CSSProperties;
-}
-
-const SelectRoot = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #ffffff;
-  font-size: 1.125em;
-  width: 120px;
-`;
-
-const SelectTrigger = styled(RadixSelect.Trigger)`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  padding: 4px 11px;
-  user-select: none;
-  font-size: 1.125em;
-  line-height: 1.125em;
-
-  &[data-disabled] {
-    color: rgba(0, 0, 0, 0.5);
-    background-color: #f5f5f5;
-  }
-`;
-
-const SelectContent = styled(RadixSelect.Content)`
-  width: var(--radix-select-trigger-width);
-  max-height: var(--radix-select-content-available-height);
-`;
-
-const SelectViewport = styled(RadixSelect.Viewport)`
-  width: var(--radix-select-trigger-width);
-  border-radius: 4px;
-  box-sizing: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  background-color: white;
-  padding: 5px;
-`;
-
-const SelectItem = styled(RadixSelect.Item)`
-  user-select: none;
-  font-size: 1.125em;
-  padding: 4px 11px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  &:hover {
-    background-color: #e6f4ff;
-  }
-  &[data-disabled] {
-    color: rgba(0, 0, 0, 0.5);
-  }
-`;
-
-const SelectLabel = styled(RadixSelect.Label)`
-  color: rgba(0, 0, 0, 0.5);
-  font-size: 1em;
-  padding: 4px 11px;
-  margin-top: 8px;
-`;
-
-const SelectItemIndicator = styled(RadixSelect.ItemIndicator)`
-  right: 0;
-  width: 25px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const SelectSeparator = styled(RadixSelect.Separator)`
-  height: 1px;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.15);
-  margin: 5px 0;
-`;
-
-export function Select(props: SelectProps) {
-  const {
-    placeholder,
-    value,
-    onSelect,
-    options,
-    disabled = false,
-    style,
-  } = props;
-
-  const selectedLabel = options
-    .flatMap((group) =>
-      group.flatMap((optionOrCategory) =>
-        'options' in optionOrCategory
-          ? optionOrCategory.options
-          : [optionOrCategory],
-      ),
-    )
-    .find((option) => option.value === value)?.label;
-
-  return (
-    <SelectRoot style={{ ...style }}>
-      <RadixSelect.Root
-        value={value}
-        onValueChange={onSelect}
-        disabled={disabled}
-      >
-        <SelectTrigger>
-          <RadixSelect.Value>
-            <span>{selectedLabel || placeholder}&nbsp;</span>
-          </RadixSelect.Value>
-          <RadixSelect.Icon asChild>
-            <FaChevronDown />
-          </RadixSelect.Icon>
-        </SelectTrigger>
-        <Portal>
-          <SelectContent position="popper">
-            <RadixSelect.ScrollUpButton>
-              <FaChevronUp />
-            </RadixSelect.ScrollUpButton>
-            <SelectViewport>
-              {options.map((group, groupIndex) => (
-                <Fragment key={groupIndex}>
-                  {group.map((optionOrCategory, optionOrCategoryIndex) =>
-                    'options' in optionOrCategory ? (
-                      <SelectGroup key={optionOrCategoryIndex}>
-                        <SelectLabel>{optionOrCategory.label}</SelectLabel>
-                        {optionOrCategory.options.map((option) => (
-                          <SelectItem
-                            key={option.value}
-                            value={option.value}
-                            disabled={option.disabled}
-                          >
-                            <RadixSelect.ItemText>
-                              {option.label}
-                            </RadixSelect.ItemText>
-                            <SelectItemIndicator>
-                              <FaCheck />
-                            </SelectItemIndicator>
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    ) : (
-                      <SelectItem
-                        key={optionOrCategory.value}
-                        value={optionOrCategory.value}
-                        disabled={optionOrCategory.disabled}
-                      >
-                        <RadixSelect.ItemText>
-                          {optionOrCategory.label}
-                        </RadixSelect.ItemText>
-                        <SelectItemIndicator>
-                          <FaCheck />
-                        </SelectItemIndicator>
-                      </SelectItem>
-                    ),
-                  )}
-                  {groupIndex < options.length - 1 && <SelectSeparator />}
-                </Fragment>
-              ))}
-            </SelectViewport>
-            <RadixSelect.ScrollDownButton />
-            <RadixSelect.Arrow />
-          </SelectContent>
-        </Portal>
-      </RadixSelect.Root>
-    </SelectRoot>
-  );
-}

package/src/components/forms/TextArea.tsx

@@ -1,45 +0,0 @@
-import styled from '@emotion/styled';
-import { TextareaHTMLAttributes } from 'react';
-
-import { useFieldsContext } from './context/FieldsContext';
-import {
-  InputContainer,
-  GroupStyled,
-  LabelStyled,
-  InputVariant,
-} from './styles';
-import { SubText, SubTextProps } from './utils';
-
-const TextAreaStyled = styled.textarea`
-  padding: 0;
-  flex: 1 1 0%;
-  border: none;
-  position: relative;
-  outline: none;
-`;
-
-export interface TextAreaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
-    SubTextProps {
-  variant?: InputVariant;
-}
-
-export function TextArea(props: TextAreaProps) {
-  const { variant: variantProps, help, error, valid, ...otherProps } = props;
-
-  const { name, variant: contextVariant } = useFieldsContext();
-
-  const variant = variantProps || contextVariant;
-
-  return (
-    <InputContainer>
-      <GroupStyled hasError={!!error} hasValid={!!valid}>
-        <LabelStyled variant={variant}>
-          <TextAreaStyled id={name} name={name} {...otherProps} />
-        </LabelStyled>
-      </GroupStyled>
-
-      <SubText error={error} help={help} valid={valid} />
-    </InputContainer>
-  );
-}