@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.1

package/src/interaction-enhancers/useHover.ts

@@ -1,84 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-export interface UseHoverOptions {
-  enterDelay?: number
-  leaveDelay?: number
-}
-
-export interface HoverHandlers {
-  onPointerEnter: () => unknown
-  onPointerLeave: () => unknown
-}
-
-export type UseHoverResult = [boolean, HoverHandlers]
-
-/**
- * Hook to track hover state of an element
- *
- * @param {UseHoverOptions} [options={}] (add an `enterDelay` or `leaveDelay` to the hover state change)
- * @returns {UseHoverResult}
- * @example
- * ```js
- * import { useHover } from '@opentrons/components'
- *
- * export function HoverComponent() {
- *   const [hovered, hoverHandlers] = useHover({
- *     enterDelay: 300,
- *     leaveDelay: 100
- *   })
- *
- *   return (
- *     <span {...hoverHandlers}>
- *       {hovered ? 'Hovered!' : 'Not hovered!'}
- *     </span>
- *   )
- * }
- * ```
- */
-export function useHover(options: UseHoverOptions = {}): UseHoverResult {
-  const { enterDelay, leaveDelay } = options
-  const [hovered, setHovered] = useState(false)
-  const timeoutRef = useRef<number>()
-
-  const handleHoverChange = useCallback(
-    (value: boolean, delay: number | undefined) => {
-      clearTimeout(timeoutRef.current)
-      if (delay) {
-        timeoutRef.current = setTimeout(
-          // TODO(mc, 2021-03-08): use window.setTimeout or a separate const
-          // for the handler to tell TS that we're using DOM setTimeout, not Node.js
-          // eslint-disable-next-line @typescript-eslint/no-implied-eval
-          (() => {
-            setHovered(value)
-          }) as TimerHandler,
-          delay
-        )
-      } else {
-        setHovered(value)
-      }
-    },
-    []
-  )
-
-  const handlers = useMemo(
-    () => ({
-      onPointerEnter: () => {
-        handleHoverChange(true, enterDelay)
-      },
-      onPointerLeave: () => {
-        handleHoverChange(false, leaveDelay)
-      },
-    }),
-    [handleHoverChange, enterDelay, leaveDelay]
-  )
-
-  // cleanup timeout on unmount
-  useEffect(
-    () => () => {
-      clearTimeout(timeoutRef.current)
-    },
-    []
-  )
-
-  return [hovered, handlers]
-}

package/src/interaction-enhancers/useOnClickOutside.ts

@@ -1,42 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-import type { RefObject } from 'react'
-
-export interface UseOnClickOutsideOptions {
-  onClickOutside?: (e: MouseEvent) => unknown
-}
-
-export const useOnClickOutside = <E extends Element>(
-  options: UseOnClickOutsideOptions
-): RefObject<E> => {
-  const { onClickOutside } = options
-  const node = useRef<E>(null)
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent): void => {
-      const clickedElem = event.target
-
-      console.assert(
-        clickedElem instanceof Node,
-        'expected clicked element to be Node - something went wrong in onClickOutside hook'
-      )
-
-      if (
-        onClickOutside != null &&
-        node != null &&
-        node.current != null &&
-        node.current.contains != null &&
-        !node.current.contains(clickedElem as Node)
-      ) {
-        onClickOutside(event)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [onClickOutside])
-
-  return node
-}

package/src/legacy-hardware-sim/LabwareNameOverlay.module.css

@@ -1,20 +0,0 @@
-@import '../index.module.css';
-
-.name_overlay {
-  width: 100%;
-  padding: 0.25rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-  background-color: color-mod(var(--c-black) alpha(0.75));
-  color: var(--c-font-light);
-  font-size: 0.5rem;
-}
-
-.display_name {
-  color: var(--c-font-light);
-  font-weight: var(--fw-semibold);
-  overflow-wrap: break-word;
-}
-
-.deck_slot:active {
-  cursor: grabbing;
-}

package/src/legacy-hardware-sim/LabwareNameOverlay.tsx

@@ -1,23 +0,0 @@
-import cx from 'classnames'
-
-import styles from './LabwareNameOverlay.module.css'
-
-export interface LabwareNameOverlayProps {
-  title: string
-  subtitle?: string | null | undefined
-  className?: string
-}
-
-/** @deprecated use LabwareDisplayName or custom RobotCoordsForeignDiv */
-export function LabwareNameOverlay(
-  props: LabwareNameOverlayProps
-): JSX.Element {
-  const { title, subtitle, className } = props
-
-  return (
-    <div className={cx(styles.name_overlay, className)}>
-      <p className={styles.display_name}> {title} </p>
-      {subtitle && <p>{subtitle}</p>}
-    </div>
-  )
-}

package/src/legacy-hardware-sim/ModuleItem.module.css

@@ -1,98 +0,0 @@
-@import '@opentrons/components/styles';
-
-.module {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  border-radius: 6px;
-  background-color: var(--c-black);
-  color: var(--c-black);
-  opacity: 0.9;
-}
-
-.module_review_icon {
-  width: 12px;
-  height: 12px;
-  margin: 0 0.25rem 0 0;
-  color: var(--c-white);
-}
-
-.module_review_icon_missing {
-  color: var(--c-red);
-}
-
-.module_review_icon_present {
-  color: var(--c-green);
-}
-
-.module_review_text {
-  margin-bottom: 0.75rem;
-  color: var(--c-white);
-  fill: currentColor;
-  font-size: 0.55rem;
-  font-weight: var(--fw-semibold);
-  text-transform: capitalize;
-  white-space: pre;
-}
-
-.module_name_overlay {
-  color: var(--c-black);
-  opacity: 0.7;
-}
-
-.module_connect_info_wrapper {
-  display: flex;
-  flex-direction: row;
-  color: var(--c-white);
-  font-size: 0.5rem;
-}
-
-.module_port_text {
-  color: var(--c-white);
-  fill: currentColor;
-  font-size: 0.65rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.module_port_text_na {
-  color: var(--c-med-gray);
-  fill: currentColor;
-  font-size: 0.65rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.module_wrapper {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 1.15rem;
-}
-
-.flipped_module_wrapper {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 1.15rem;
-}
-
-.module_name_text {
-  color: var(--c-white);
-  fill: currentColor;
-  font-size: 0.5rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.flipped {
-  transform: rotate(180deg);
-}
-
-.right_icon {
-  margin: 0 0 0 1rem;
-}

package/src/legacy-hardware-sim/index.ts

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

package/src/lists/SidePanelGroup.tsx

@@ -1,48 +0,0 @@
-// SidePanelGroup component
-import cx from 'classnames'
-
-import { Icon } from '../icons'
-import styles from './lists.module.css'
-
-import type { ReactNode } from 'react'
-import type { IconName } from '../icons'
-
-// TODO(bc, 2021-03-31): this component is only used in one place
-// reconsider whether it belongs in components library
-export interface SidePanelGroupProps {
-  /** text of title */
-  title?: string
-  /** optional icon left of the title */
-  iconName?: IconName
-  /** children, most likely one or more TitledList */
-  children?: ReactNode
-  /** additional classnames */
-  className?: string
-  /** disables the whole SidePanelGroup if true */
-  disabled?: boolean
-}
-
-/**
- * A component for grouping and titling multiple lists
- */
-export function SidePanelGroup(props: SidePanelGroupProps): JSX.Element {
-  const { iconName, disabled } = props
-
-  const className = cx(styles.panel_group, props.className, {
-    [styles.disabled]: disabled,
-  })
-
-  return (
-    <div className={className}>
-      {props.title && (
-        <div className={styles.title_bar}>
-          {iconName && (
-            <Icon className={styles.title_bar_icon} name={iconName} />
-          )}
-          <h2 className={styles.title}>{props.title}</h2>
-        </div>
-      )}
-      {props.children}
-    </div>
-  )
-}

package/src/lists/index.ts

@@ -1,2 +0,0 @@
-// list and list item components
-export * from './SidePanelGroup'

package/src/lists/lists.module.css

@@ -1,171 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --list-padding-large: 1rem;
-  --list-padding-small: 0.75rem;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.disabled {
-  background-color: transparent;
-
-  & * {
-    background-color: transparent;
-    color: var(--c-font-disabled);
-    fill: var(--c-font-disabled);
-    outline-color: #eee;
-  }
-}
-
-.panel_group,
-.titled_list,
-.list_item {
-  background-color: white;
-}
-
-.panel_group {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-}
-
-.hover_border {
-  outline: var(--bd-width-default) solid var(--c-highlight);
-}
-
-.header_text {
-  color: var(--c-font-disabled);
-  font-size: var(--fs-caption);
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-/*
-  TODO(IL, 2021-07-30): when consumers of this class are migrated to CSS-in-JS, keep in mind
-  the meaning of .title_bar is vague, it is widely used by several unrelated components.
-  Also, it's almost the same as .titled_list_title_bar -- they are the same
-  except for flex-related rules.
-*/
-.title_bar {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  text-decoration: none;
-}
-
-/* Specifically for TitledList */
-.titled_list_title_bar {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  text-decoration: none;
-}
-
-.titled_list_selected {
-  & .title_bar {
-    background-color: var(--c-bg-selected);
-
-    & * {
-      color: var(--c-selected-dark);
-      font-weight: var(--fw-semibold);
-    }
-  }
-}
-
-.title {
-  margin: 0;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-regular);
-  text-transform: uppercase;
-}
-
-.title_enabled {
-  color: var(--c-font-dark);
-}
-
-.title_disabled {
-  color: var(--c-font-disabled);
-}
-
-.title_bar_icon {
-  height: 1.5rem;
-  color: var(--c-font-dark);
-}
-
-.title_bar_error {
-  background-color: var(--c-error-light);
-}
-
-.icon_left_of_title {
-  height: 1.2rem;
-  margin-right: 0.5rem;
-}
-
-.icon_left_of_title_container {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.title_bar_carat {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  padding: calc(var(--list-padding-small) - var(--bd-width-default));
-  padding-top: 1rem;
-
-  &:hover {
-    background-color: color-mod(var(--c-black) alpha(5%));
-  }
-}
-
-.list {
-  padding-left: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
-.list_item {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  padding: var(--list-padding-small);
-  margin: 0;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  line-height: 1.25;
-
-  &:hover {
-    background-color: var(--c-bg-hover);
-  }
-
-  &.active {
-    background-color: var(--c-bg-selected);
-  }
-}
-
-a.list_item {
-  text-decoration: none;
-}
-
-.list_alert {
-  width: 100%;
-  padding: var(--list-padding-small);
-  background-color: var(--c-bg-light);
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-style: italic;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-}
-
-.item_icon {
-  height: calc(1.25 * var(--fs-body-1));
-  flex: none;
-  margin-right: 0.5rem;
-}

package/src/modals/AlertModal.tsx

@@ -1,89 +0,0 @@
-import cx from 'classnames'
-
-import { OutlineButton } from '../buttons'
-import { Icon } from '../icons'
-import { LegacyModal } from './LegacyModal'
-import styles from './modals.module.css'
-
-import type { ReactNode } from 'react'
-import type { ButtonProps } from '../buttons'
-import type { IconName } from '../icons'
-
-export interface AlertModalProps {
-  /** optional handler for overlay click */
-  onCloseClick?: () => unknown
-  /** optional modal heading */
-  heading?: ReactNode
-  /** optional array of `ButtonProps` for `OutlineButton`s at bottom of modal */
-  buttons?: Array<ButtonProps | null | undefined>
-  /** modal contents */
-  children: ReactNode
-  /** optional classes to apply */
-  className?: string
-  /** optional classes to apply */
-  contentsClassName?: string
-  /** lightens overlay (alert modal over existing modal) */
-  alertOverlay?: boolean
-  /** override default alert icon */
-  iconName?: IconName | null | undefined
-  /** restricts scroll outside of Modal when open, true by default */
-  restrictOuterScroll?: boolean
-}
-
-/**
- * @deprecated use Modal instead
- * Generic alert modal with a heading and a set of buttons at the bottom
- */
-export function AlertModal(props: AlertModalProps): JSX.Element {
-  const {
-    heading,
-    buttons,
-    className,
-    onCloseClick,
-    alertOverlay,
-    restrictOuterScroll,
-  } = props
-  const iconName = props.iconName || 'alert'
-  const wrapperStyle = cx(
-    styles.alert_modal_wrapper,
-    {
-      [styles.no_alert_header]: !heading,
-    },
-    props.contentsClassName
-  )
-
-  return (
-    <LegacyModal
-      className={className}
-      contentsClassName={wrapperStyle}
-      onCloseClick={onCloseClick}
-      alertOverlay={alertOverlay}
-      restrictOuterScroll={restrictOuterScroll}
-    >
-      {heading && (
-        <div
-          className={cx(styles.alert_modal_heading, {
-            [styles.no_icon_heading]: props.iconName === null,
-          })}
-        >
-          {props.iconName !== null && (
-            <Icon name={iconName} className={styles.alert_modal_icon} />
-          )}
-          {heading}
-        </div>
-      )}
-      <div className={styles.alert_modal_contents}>{props.children}</div>
-      {buttons && (
-        <div className={styles.alert_modal_buttons}>
-          {(buttons.filter(Boolean) as ButtonProps[]).map((button, index) => (
-            <OutlineButton
-              {...button}
-              className={cx(styles.alert_button, button.className)}
-              key={index}
-            />
-          ))}
-        </div>
-      )}
-    </LegacyModal>
-  )
-}

package/src/modals/ContinueModal.tsx

@@ -1,32 +0,0 @@
-import { AlertModal } from './AlertModal'
-
-import type { AlertModalProps } from './AlertModal'
-
-export interface ContinueModalProps extends Omit<AlertModalProps, 'buttons'> {
-  onCancelClick: () => unknown
-  onContinueClick: () => unknown
-}
-
-const CANCEL = 'Cancel'
-const CONTINUE = 'Continue'
-
-/**
- * * @deprecated use Modal instead
- * AlertModal variant to prompt user to "Cancel" or "Continue" a given action
- */
-export function ContinueModal(props: ContinueModalProps): JSX.Element {
-  const { onCancelClick, onContinueClick, ...passThruProps } = props
-  const buttons = [
-    { title: CANCEL, children: CANCEL, onClick: onCancelClick },
-    { title: CONTINUE, children: CONTINUE, onClick: onContinueClick },
-  ]
-
-  return (
-    <AlertModal
-      restrictOuterScroll={false}
-      onCloseClick={onCancelClick}
-      {...passThruProps}
-      buttons={buttons}
-    />
-  )
-}

package/src/modals/LegacyModal.tsx

@@ -1,61 +0,0 @@
-import { Fragment } from 'react'
-import { RemoveScroll } from 'react-remove-scroll'
-import cx from 'classnames'
-
-import styles from './modals.module.css'
-import { Overlay } from './Overlay'
-
-import type { MouseEventHandler, ReactNode, Ref } from 'react'
-
-export interface LegacyModalProps {
-  /** handler to close the modal (attached to `Overlay` onClick) */
-  onCloseClick?: MouseEventHandler
-  /** Optional styled heading **/
-  heading?: string
-  /** modal contents */
-  children: ReactNode
-  /** classes to apply */
-  className?: string
-  /** classes to apply to the contents box */
-  contentsClassName?: string
-  /** lightens overlay (alert modal over existing modal) */
-  alertOverlay?: boolean
-  /** restricts scroll outside of Modal when open, true by default */
-  restrictOuterScroll?: boolean
-  innerRef?: Ref<HTMLDivElement>
-}
-
-/**
- * @deprecated use Modal instead
- * Base modal component that fills its nearest `display:relative` ancestor
- * with a dark overlay and displays `children` as its contents in a white box
- */
-export function LegacyModal(props: LegacyModalProps): JSX.Element {
-  const {
-    contentsClassName,
-    alertOverlay,
-    onCloseClick,
-    heading,
-    innerRef,
-    restrictOuterScroll = true,
-  } = props
-  const Wrapper = restrictOuterScroll ? RemoveScroll : Fragment
-  return (
-    <Wrapper>
-      <div
-        className={cx(styles.modal, props.className, {
-          [styles.alert_modal]: alertOverlay,
-        })}
-      >
-        <Overlay onClick={onCloseClick} alertOverlay={alertOverlay} />
-        <div
-          ref={innerRef}
-          className={cx(styles.modal_contents, contentsClassName)}
-        >
-          {heading && <h3 className={styles.modal_heading}>{heading}</h3>}
-          {props.children}
-        </div>
-      </div>
-    </Wrapper>
-  )
-}