react-science 0.29.0 → 0.30.0

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>
-  );
-}

package/src/components/forms/context/FieldsContext.tsx

@@ -1,82 +0,0 @@
-import styled from '@emotion/styled';
-import { createContext, ReactNode, useContext, useMemo } from 'react';
-
-interface FieldContext {
-  name?: string;
-  variant: 'default' | 'small';
-}
-
-interface FieldProps {
-  name: string;
-  label: string;
-  children: ReactNode;
-  variant?: 'default' | 'small';
-  required?: boolean;
-}
-
-const context = createContext<FieldContext | null>(null);
-
-const FieldContextRoot = styled.div`
-  display: flex;
-  flex-flow: row;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  gap: 5px;
-`;
-
-const Label = styled.label<{ variant: FieldProps['variant'] }>`
-  position: relative;
-  display: inline-flex;
-  max-width: 100%;
-  line-height: ${(props) => (props.variant === 'small' ? '28px' : '32px')};
-  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
-  white-space: nowrap;
-  text-align: end;
-`;
-
-const LabelContainer = styled.div`
-  flex-grow: 0;
-  display: inline-block;
-  overflow: hidden;
-  text-align: end;
-  vertical-align: middle;
-  white-space: nowrap;
-`;
-
-const FieldContextRequired = styled.span`
-  color: red;
-`;
-
-export function useFieldsContext(): FieldContext {
-  const ctx = useContext(context);
-
-  if (!ctx) {
-    return { name: undefined, variant: 'default' };
-  }
-
-  return ctx;
-}
-
-export function Field(props: FieldProps) {
-  const { label, name, children, required, variant } = props;
-
-  const memoized = useMemo(() => {
-    return { name, variant: variant || 'default' };
-  }, [name, variant]);
-
-  return (
-    <context.Provider value={memoized}>
-      <FieldContextRoot>
-        <LabelContainer>
-          <Label htmlFor={name} variant={memoized.variant}>
-            {label} {required && <FieldContextRequired>*</FieldContextRequired>}
-            :{' '}
-          </Label>
-        </LabelContainer>
-
-        {children}
-      </FieldContextRoot>
-    </context.Provider>
-  );
-}

package/src/components/forms/context/index.ts

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

package/src/components/spinner/FullSpinner.tsx

@@ -1,57 +0,0 @@
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-
-const spin = keyframes`
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-interface FullSpinnerProps {
-  width?: number;
-  height?: number;
-}
-
-const Spinner = styled.svg<FullSpinnerProps>`
-  height: ${({ height }) => `${height || 40}px`};
-  width: ${({ width }) => `${width || 40}px`};
-  animation: ${spin} 0.8s linear infinite;
-`;
-
-export function FullSpinner(props: FullSpinnerProps) {
-  // First div is used when using nextjs/dynamic even after component is loaded
-  return (
-    <div style={{ height: '100%' }}>
-      <div
-        style={{
-          display: 'flex',
-          height: '100%',
-          width: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Spinner
-          {...props}
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            style={{ opacity: 0.25 }}
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            style={{ opacity: 0.75 }}
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </Spinner>
-      </div>
-    </div>
-  );
-}

package/src/components/spinner/index.ts

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