react-science 0.25.0 → 0.26.2

package/src/components/forms/Input.tsx

@@ -1,96 +1,16 @@
 import styled from '@emotion/styled';
-import { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 
 import { FullSpinner } from '../index';
 
 import { useFieldsContext } from './context/FieldsContext';
-
-type InputVariant = 'default' | 'small';
-
-interface StyledProps {
-  variant: InputVariant;
-  hasLeading: boolean;
-  hasTrailing: boolean;
-}
-
-const LabelStyled = styled.label<StyledProps>`
-  padding: ${(props) =>
-    props.variant === 'default'
-      ? props.hasTrailing
-        ? '2px 9px 4px 9px'
-        : '2px 9px'
-      : props.hasTrailing
-      ? '1px 7px 1px 7px'
-      : '1px 7px'};
-
-  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
-  line-height: '17px';
-
-  background-color: white;
-  border-width: 1px;
-  align-items: center;
-  flex-direction: row;
-  flex: 1 1 0%;
-  display: flex;
-  position: relative;
-
-  border-top-right-radius: ${(props) =>
-    props.hasLeading && !props.hasTrailing && '0.375rem'};
-
-  border-bottom-right-radius: ${(props) =>
-    props.hasLeading && !props.hasTrailing && '0.375rem'};
-
-  border-top-left-radius: ${(props) =>
-    props.hasTrailing && !props.hasLeading && '0.375rem'};
-
-  border-bottom-left-radius: ${(props) =>
-    props.hasTrailing && !props.hasLeading && '0.375rem'};
-
-  border-radius: ${(props) =>
-    !props.hasLeading && !props.hasTrailing && '0.375rem'};
-
-  border-color: var(--custom-border-color);
-`;
-
-function getStyleColor(hasError: boolean, hasValid: boolean) {
-  if (hasError) {
-    return {
-      default: '#ffa39e',
-      hover: '#f95d55',
-    };
-  }
-
-  if (hasValid) {
-    return {
-      default: '#6adc24',
-      hover: '#62cb21',
-    };
-  }
-
-  return {
-    default: 'rgb(217, 217, 217)',
-    hover: '#4096ff',
-  };
-}
-
-const GroupStyled = styled.div<{ hasError: boolean; hasValid: boolean }>`
-  display: flex;
-  border-radius: 0.375rem;
-  margin-top: 0.25rem;
-
-  .addon {
-    color: ${({ hasError }) => hasError && '#f95d55'};
-  }
-
-  --custom-border-color: ${({ hasError, hasValid }) =>
-    getStyleColor(hasError, hasValid).default};
-
-  :hover,
-  :focus-within {
-    --custom-border-color: ${({ hasError, hasValid }) =>
-      getStyleColor(hasError, hasValid).hover};
-  }
-`;
+import {
+  InputContainer,
+  GroupStyled,
+  LabelStyled,
+  InputVariant,
+} from './styles';
+import { SubText, SubTextProps } from './utils';
 
 const InputStyled = styled.input`
   padding: 0;
@@ -142,27 +62,20 @@ const TrailingInlineAddonStyled = styled.div`
   padding-left: 0.5rem;
 `;
 
-const RootInput = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-
 interface RenderAddon {
   addon: ReactNode;
   inline?: boolean;
 }
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  variant?: 'default' | 'small';
-
+export interface InputProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    SubTextProps {
+  variant?: InputVariant;
   leadingAddon?: RenderAddon;
   trailingAddon?: RenderAddon;
-
   help?: string;
   error?: string;
   valid?: true | string;
-
   loading?: boolean;
 }
 
@@ -185,7 +98,7 @@ export function Input(props: InputProps) {
   const variant = variantProps || contextVariant;
 
   return (
-    <RootInput>
+    <InputContainer>
       <GroupStyled hasError={!!error} hasValid={!!valid}>
         {leadingAddon && !leadingAddon.inline && (
           <LeadingAddonStyled>{leadingAddon.addon}</LeadingAddonStyled>
@@ -226,30 +139,6 @@ export function Input(props: InputProps) {
       </GroupStyled>
 
       <SubText error={error} help={help} valid={valid} />
-    </RootInput>
+    </InputContainer>
   );
 }
-
-function SubText(props: Pick<InputProps, 'help' | 'error' | 'valid'>) {
-  const { error, help, valid: validProps } = props;
-
-  const valid = typeof validProps === 'string' ? validProps : undefined;
-  const text = error || valid || help;
-
-  return <p style={{ color: getColor(error, validProps) }}>{text}</p>;
-}
-
-function getColor(
-  error?: string,
-  valid?: true | string,
-): CSSProperties['color'] {
-  if (error) {
-    return '#f95d55';
-  }
-
-  if (valid && typeof valid !== 'boolean') {
-    return '#62cb21';
-  }
-
-  return 'gray';
-}

package/src/components/forms/TextArea.tsx

@@ -0,0 +1,45 @@
+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/index.ts

@@ -1,4 +1,6 @@
 export * from './Input';
+export * from './TextArea';
 export * from './Checkbox';
 export * from './context';
 export * from './Select';
+export * from './radio-group';

package/src/components/forms/radio-group/ButtonRadioItem.tsx

@@ -0,0 +1,77 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+
+import { enabledColor, InputVariant } from '../styles';
+
+import { RadioOption, RadioGroupProps } from './RadioGroup';
+
+const buttonStyles = {
+  container: css({
+    border: '1px solid rgba(0, 0, 0, 0.25)',
+    borderRightWidth: 0,
+    position: 'relative',
+  }),
+  item: (disabled: boolean, variant?: InputVariant) =>
+    css({
+      opacity: disabled ? 0.25 : 1,
+      padding: variant === 'default' ? '0px 15px' : '0px 7px',
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer',
+      ':hover': {
+        '& > label': {
+          color: disabled ? '' : enabledColor,
+        },
+      },
+    }),
+
+  indicator: css({
+    position: 'absolute',
+    top: -1,
+    left: -1,
+    right: -1,
+    bottom: -1,
+    zIndex: 10,
+    border: '1px solid',
+    borderColor: enabledColor,
+
+    '& ~ label': {
+      color: enabledColor,
+    },
+  }),
+
+  label: (variant?: InputVariant) =>
+    css({
+      cursor: 'pointer',
+      fontSize: variant === 'small' ? '1em' : '1.125em',
+      lineHeight: variant === 'default' ? '30px' : '22px',
+    }),
+};
+
+export function ButtonRadioItem(
+  prop: RadioOption & Pick<RadioGroupProps, 'onSelect' | 'variant' | 'name'>,
+) {
+  const { value, label, disabled = false, onSelect, variant, name } = prop;
+  return (
+    <div css={buttonStyles.container}>
+      <RadioGroup.Item
+        css={buttonStyles.item(disabled, variant)}
+        value={value}
+        id={`${value}${name}`}
+        onClick={() => {
+          if (!disabled) onSelect?.(prop);
+        }}
+      >
+        <RadioGroup.Indicator css={buttonStyles.indicator} />
+        <label
+          css={buttonStyles.label(variant)}
+          htmlFor={`${value}${name}`}
+          style={{}}
+        >
+          {label}
+        </label>
+      </RadioGroup.Item>
+    </div>
+  );
+}

package/src/components/forms/radio-group/ClassicRadioItem.tsx

@@ -0,0 +1,95 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+
+import { disabledColor, enabledColor, InputVariant } from '../styles';
+
+import { RadioOption, RadioGroupProps } from './RadioGroup';
+
+const classicStyles = {
+  container: (disabled: boolean) =>
+    css({
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'row-reverse',
+      opacity: disabled ? 0.25 : 1,
+      overflow: 'hidden',
+      border: 'none',
+    }),
+  item: (disabled: boolean, variant?: InputVariant) =>
+    css({
+      position: 'relative',
+      width: variant === 'default' ? 16 : 14,
+      height: variant === 'default' ? 16 : 14,
+      borderRadius: '50%',
+      border: '1px solid grey',
+      backgroundColor: disabled ? disabledColor : 'white',
+      ':hover': {
+        borderColor: disabled ? 'grey' : enabledColor,
+      },
+    }),
+
+  indicator: css({
+    position: 'absolute',
+    top: -1,
+    left: -1,
+    right: -1,
+    bottom: -1,
+    zIndex: 10,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: enabledColor,
+    borderRadius: '50%',
+  }),
+  circle: css({
+    width: '40%',
+    height: '40%',
+    borderRadius: '50%',
+    backgroundColor: 'white',
+  }),
+
+  label: (disabled: boolean) =>
+    css({
+      cursor: 'pointer',
+      lineHeight: 1,
+      paddingLeft: 5,
+      fontSize: '12px',
+      ':hover': {
+        '& ~ button': {
+          borderColor: disabled ? 'grey' : enabledColor,
+        },
+      },
+    }),
+};
+
+export function ClassicRadioItem(
+  props: RadioOption & Pick<RadioGroupProps, 'onSelect' | 'variant' | 'name'>,
+) {
+  const { value, label, disabled = false, onSelect, variant, name } = props;
+  return (
+    <div css={classicStyles.container(disabled)}>
+      <label
+        css={classicStyles.label(disabled)}
+        style={{
+          fontSize: variant === 'small' ? '1em' : '1.125em',
+        }}
+        htmlFor={`${value}${name}`}
+      >
+        {label}
+      </label>
+      <RadioGroup.Item
+        css={classicStyles.item(disabled, variant)}
+        value={value}
+        id={`${value}${name}`}
+        onClick={() => {
+          if (!disabled) onSelect?.(props);
+        }}
+      >
+        <RadioGroup.Indicator css={classicStyles.indicator}>
+          <div css={classicStyles.circle} />
+        </RadioGroup.Indicator>
+      </RadioGroup.Item>
+    </div>
+  );
+}

package/src/components/forms/radio-group/RadioGroup.tsx

@@ -0,0 +1,83 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import * as RadioGroupRadix from '@radix-ui/react-radio-group';
+import { ReactNode } from 'react';
+
+import { InputVariant } from '../styles';
+
+import { ButtonRadioItem } from './ButtonRadioItem';
+import { ClassicRadioItem } from './ClassicRadioItem';
+
+export interface RadioOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+export interface RadioGroupProps {
+  selected?: RadioOption;
+  type?: 'classic' | 'button';
+  options?: RadioOption[];
+  onSelect?: (option: RadioOption) => void;
+  name?: string;
+  disabled?: boolean;
+  variant?: InputVariant;
+}
+const rootStyles = {
+  basic: css({
+    display: 'flex',
+    flexDirection: 'row',
+    width: 'fit-content',
+  }),
+  button: (variant: InputVariant) =>
+    css({
+      ' & > *:first-of-type, & > *:first-of-type span': {
+        borderRadius: variant === 'default' ? '6px 0 0 6px' : '4px 0 0 4px',
+      },
+      ' & > *:last-of-type, & > *:last-of-type span': {
+        borderRightWidth: 1,
+        borderRadius: variant === 'default' ? '0 6px 6px 0' : '0 4px 4px 0',
+      },
+    }),
+};
+export function RadioGroup(props: RadioGroupProps) {
+  const {
+    selected,
+    type = 'classic',
+    disabled: groupDisabled = false,
+    options = [],
+    onSelect,
+    name = '',
+    variant = 'default',
+  } = props;
+  return (
+    <RadioGroupRadix.Root
+      css={[
+        rootStyles.basic,
+        type === 'classic' ? null : rootStyles.button(variant),
+      ]}
+      style={{
+        gap: type === 'classic' ? (variant === 'default' ? 10 : 5) : 0,
+      }}
+      value={selected?.value}
+      name={name}
+      disabled={groupDisabled}
+    >
+      {options?.map(({ value, label, disabled }) => {
+        const childProps = {
+          key: value,
+          value,
+          label,
+          disabled: groupDisabled || disabled,
+          onSelect,
+          variant,
+          name,
+        };
+        return type === 'classic' ? (
+          <ClassicRadioItem {...childProps} />
+        ) : (
+          <ButtonRadioItem {...childProps} />
+        );
+      })}
+    </RadioGroupRadix.Root>
+  );
+}

package/src/components/forms/radio-group/index.ts

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

package/src/components/forms/styles.ts

@@ -0,0 +1,96 @@
+import styled from '@emotion/styled';
+
+export type InputVariant = 'default' | 'small';
+
+interface StyledProps {
+  variant: InputVariant;
+  hasLeading?: boolean;
+  hasTrailing?: boolean;
+}
+export const enabledColor = '#1677ff';
+export const disabledColor = '#b8b8b8';
+
+export const LabelStyled = styled.label<StyledProps>`
+  padding: ${(props) =>
+    props.variant === 'default'
+      ? props.hasTrailing
+        ? '2px 9px 4px 9px'
+        : '2px 9px'
+      : props.hasTrailing
+      ? '1px 7px 1px 7px'
+      : '1px 7px'};
+
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  line-height: '17px';
+
+  background-color: white;
+  border-width: 1px;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 0%;
+  display: flex;
+  position: relative;
+
+  border-top-right-radius: ${(props) =>
+    props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-bottom-right-radius: ${(props) =>
+    props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-top-left-radius: ${(props) =>
+    props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-bottom-left-radius: ${(props) =>
+    props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-radius: ${(props) =>
+    !props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-color: var(--custom-border-color);
+`;
+
+function getStyleColor(hasError: boolean, hasValid: boolean) {
+  if (hasError) {
+    return {
+      default: '#ffa39e',
+      hover: '#f95d55',
+    };
+  }
+
+  if (hasValid) {
+    return {
+      default: '#6adc24',
+      hover: '#62cb21',
+    };
+  }
+
+  return {
+    default: 'rgb(217, 217, 217)',
+    hover: '#4096ff',
+  };
+}
+
+export const GroupStyled = styled.div<{ hasError: boolean; hasValid: boolean }>`
+  display: flex;
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+
+  .addon {
+    color: ${({ hasError }) => hasError && '#f95d55'};
+  }
+
+  --custom-border-color: ${({ hasError, hasValid }) =>
+    getStyleColor(hasError, hasValid).default};
+
+  :hover,
+  :focus-within {
+    --custom-border-color: ${({ hasError, hasValid }) =>
+      getStyleColor(hasError, hasValid).hover};
+  }
+`;
+
+export const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;

package/src/components/forms/utils/SubText.tsx

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'react';
+
+export interface SubTextProps {
+  help?: string;
+  error?: string;
+  valid?: true | string;
+}
+
+export function SubText(props: SubTextProps) {
+  const { error, help, valid: validProps } = props;
+
+  const valid = typeof validProps === 'string' ? validProps : undefined;
+  const text = error || valid || help;
+
+  return <p style={{ color: getColor(error, validProps) }}>{text}</p>;
+}
+
+function getColor(
+  error?: string,
+  valid?: true | string,
+): CSSProperties['color'] {
+  if (error) {
+    return '#f95d55';
+  }
+
+  if (valid && typeof valid !== 'boolean') {
+    return '#62cb21';
+  }
+
+  return 'gray';
+}

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

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

package/src/components/header/PanelHeader.tsx

@@ -0,0 +1,75 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { ReactNode, useEffect, useRef } from 'react';
+import { FaCog } from 'react-icons/fa';
+
+import { Button } from '../button/Button';
+
+const styles = {
+  container: css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottom: '0.55px solid rgb(240, 240, 240)',
+  }),
+  leftContainer: css({
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    '& > button': {
+      padding: '0 5px',
+      minWidth: 'auto',
+    },
+  }),
+  counterLabel: css({
+    margin: 0,
+    textAlign: 'right',
+    lineHeight: '22px',
+    whiteSpace: 'nowrap',
+  }),
+};
+
+interface PanelHeaderProps {
+  total?: number;
+  current?: number;
+  onClickSettings?: () => void;
+  children?: ReactNode;
+}
+
+export function PanelHeader({
+  total,
+  current,
+  children,
+  onClickSettings,
+}: PanelHeaderProps) {
+  const labelRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (!labelRef.current) return;
+
+    if (current !== undefined && total !== undefined) {
+      labelRef.current.textContent = `${current} / ${total}`;
+    } else if (current !== undefined) {
+      labelRef.current.textContent = `[ ${current} ]`;
+    } else if (total !== undefined) {
+      labelRef.current.textContent = `[ ${total} ]`;
+    }
+  }, [current, total]);
+
+  return (
+    <div css={styles.container}>
+      <div css={styles.leftContainer}>{children}</div>
+      <p ref={labelRef} css={styles.counterLabel} />
+      {onClickSettings && (
+        <Button
+          onClick={onClickSettings}
+          color={{ basic: 'black', hover: 'black' }}
+          backgroundColor={{ basic: 'white', hover: '#f7f7f7' }}
+        >
+          <FaCog />
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/header/index.ts

@@ -1 +1,2 @@
 export * from './Header';
+export * from './PanelHeader';