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

package/src/organisms/ProtocolTimelineScrubber/utils.ts

@@ -1,9 +1,11 @@
-import reduce from 'lodash/reduce'
-import omitBy from 'lodash/omitBy'
 import mapValues from 'lodash/mapValues'
+import omitBy from 'lodash/omitBy'
+import reduce from 'lodash/reduce'
+
 import { DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data'
+
 import { COLORS } from '../../helix-design-system'
-import type { WellFill } from '../../hardware-sim'
+
 import type {
   CompletedProtocolAnalysis,
   LabwareDefinition2,
@@ -16,6 +18,7 @@ import type {
   SingleLabwareLiquidState,
   TimelineFrame,
 } from '@opentrons/step-generation'
+import type { WellFill } from '../../hardware-sim'
 import type { CommandTextData } from './types'
 
 //  copied from protocol-designer

package/src/organisms/Toolbox/Toolbox.stories.tsx

@@ -1,5 +1,6 @@
 import { STYLE_PROPS } from '../../primitives'
 import { Toolbox as ToolboxComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ToolboxComponent> = {

package/src/organisms/Toolbox/__tests__/Toolbox.test.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
 import { renderWithProviders } from '../../../testing/utils'
 import { Toolbox } from '../index'
 

package/src/organisms/Toolbox/index.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
+
+import { PrimaryButton } from '../../atoms'
+import { BORDERS, COLORS } from '../../helix-design-system'
 import { Box, Btn, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
@@ -7,9 +10,7 @@ import {
   NO_WRAP,
   POSITION_RELATIVE,
 } from '../../styles'
-import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
-import { PrimaryButton } from '../../atoms'
 import { textDecorationUnderline } from '../../ui-style-constants/typography'
 
 import type { ReactNode } from 'react'

package/src/organisms/index.ts

@@ -2,3 +2,4 @@ export * from './DeckLabelSet'
 export * from './Toolbox'
 export * from './ProtocolTimelineScrubber'
 export * from './CommandText'
+export * from './FixtureOption'

package/src/primitives/Box.stories.tsx

@@ -1,4 +1,4 @@
-import { COLORS, BORDERS } from '../helix-design-system'
+import { BORDERS, COLORS } from '../helix-design-system'
 import { SPACING } from '../ui-style-constants'
 import { Box as BoxComponent } from './Box'
 

package/src/primitives/Box.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { PrimitiveComponent } from './types'
 

package/src/primitives/Btn.stories.tsx

@@ -1,17 +1,17 @@
-import type * as React from 'react'
+import { Box } from './Box'
 import {
-  PrimaryBtn,
-  SecondaryBtn,
-  NewPrimaryBtn,
-  NewSecondaryBtn,
+  LightSecondaryBtn,
   NewAlertPrimaryBtn,
   NewAlertSecondaryBtn,
-  LightSecondaryBtn,
+  NewPrimaryBtn,
+  NewSecondaryBtn,
+  PrimaryBtn,
+  SecondaryBtn,
   TertiaryBtn,
 } from './Btn'
-import { Box } from './Box'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Atoms/Btn',

package/src/primitives/Btn.tsx

@@ -1,12 +1,11 @@
 import styled, { css } from 'styled-components'
 
 import * as Styles from '../styles'
-import { styleProps, isntStyleProp } from './style-props'
-
 import { RESPONSIVENESS } from '../ui-style-constants'
+import { isntStyleProp, styleProps } from './style-props'
 
-import type { HTMLProps } from 'react'
 import type { StyledComponent } from 'styled-components'
+import type { HTMLProps } from 'react'
 import type { StyleProps } from './types'
 
 export const BUTTON_TYPE_SUBMIT: 'submit' = 'submit'

package/src/primitives/Flex.stories.tsx

@@ -1,8 +1,8 @@
-import { BORDERS, COLORS } from '../helix-design-system'
-import { SPACING } from '../ui-style-constants'
-import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles'
 import { LegacyStyledText } from '../atoms/StyledText'
+import { BORDERS, COLORS } from '../helix-design-system'
 import { Box, Flex as FlexComponent } from '../primitives'
+import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles'
+import { SPACING } from '../ui-style-constants'
 
 import type { Meta, StoryObj } from '@storybook/react'
 

package/src/primitives/Flex.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { PrimitiveComponent } from './types'
 

package/src/primitives/ForeignObject.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { ComponentProps } from 'react'
-import type { StyleProps, PrimitiveComponent } from './types'
+import type { PrimitiveComponent, StyleProps } from './types'
 
 export interface ForeignObjectProps extends StyleProps {
   /** attach a width attribute to the <svg> element */

package/src/primitives/Link.tsx

@@ -1,10 +1,10 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
 import { CURSOR_POINTER } from '../styles'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { ComponentProps } from 'react'
-import type { StyleProps, PrimitiveComponent } from './types'
+import type { PrimitiveComponent, StyleProps } from './types'
 
 export interface LinkProps extends StyleProps {
   /** render link with target="_blank" */

package/src/primitives/README.md

@@ -14,7 +14,6 @@ Style props will pass their value directly into CSS, but for safety, try to use
 
 ```js static
 import { Box, C_DARK_GRAY, C_WHITE } from '@opentrons/components'
-
 const GrayBox = () => <Box color={C_WHITE} backgroundColor={C_DARK_GRAY} />
 ```
 
@@ -31,12 +30,11 @@ const GrayBox = () => <Box color={C_WHITE} backgroundColor={C_DARK_GRAY} />
 
 ```js static
 import {
-  Text,
   FONT_SIZE_HEADER,
   FONT_WEIGHT_SEMIBOLD,
   LINE_HEIGHT_TITLE,
+  Text,
 } from '@opentrons/components'
-
 const Heading = () => (
   <Text
     fontSize={FONT_SIZE_HEADER}
@@ -66,8 +64,7 @@ const Heading = () => (
 | `paddingLeft`   | `padding-left`                     |
 
 ```js static
-import { Box, SPACING_AUTO, SPACING_3 } from '@opentrons/components'
-
+import { Box, SPACING_3, SPACING_AUTO } from '@opentrons/components'
 const Heading = () => <Box marginX={SPACING_AUTO} paddingY={SPACING_3} />
 ```
 
@@ -88,11 +85,10 @@ Note: If you specify both of a shorthand prop and the explicit prop (e.g. `margi
 
 ```js static
 import {
-  Box,
-  BORDER_SOLID_LIGHT,
   BORDER_RADIUS_DEFAULT,
+  BORDER_SOLID_LIGHT,
+  Box,
 } from '@opentrons/components'
-
 const Heading = () => (
   <Box border={BORDER_SOLID_LIGHT} borderRadius={BORDER_RADIUS_DEFAULT} />
 )
@@ -110,11 +106,10 @@ const Heading = () => (
 
 ```js static
 import {
-  Flex,
   ALIGN_ITEMS_CENTER,
+  Flex,
   JUSTIFY_CONTENT_CENTER,
 } from '@opentrons/components'
-
 const Heading = () => (
   <Flex
     alignItems={ALIGN_ITEMS_CENTER}
@@ -140,8 +135,7 @@ const Heading = () => (
 | `overflowY` | `overflow-y`         |
 
 ```js static
-import { Box, SIZE_4, OVERFLOW_HIDDEN } from '@opentrons/components'
-
+import { Box, OVERFLOW_HIDDEN, SIZE_4 } from '@opentrons/components'
 const Heading = () => <Box size={SIZE_4} overflow={OVERFLOW_HIDDEN} />
 ```
 
@@ -158,7 +152,6 @@ const Heading = () => <Box size={SIZE_4} overflow={OVERFLOW_HIDDEN} />
 
 ```js static
 import { Box, POSITION_ABSOLUTE } from '@opentrons/components'
-
 const Fill = () => (
   <Box position={POSITION_ABSOLUTE} top={0} right={0} bottom={0} left={0} />
 )
@@ -175,10 +168,8 @@ If you find yourself in a place where...
 
 ```js static
 import styled from 'styled-components'
-import { styleProps, isntStyleProp, C_DARK_GRAY } from '@opentrons/components'
-
+import { C_DARK_GRAY, isntStyleProp, styleProps } from '@opentrons/components'
 import type { PrimitiveComponent } from '@opentrons/components'
-
 export const Gray: PrimitiveComponent<'div'> = styled.div.withConfig({
   shouldForwardProp: isntStyleProp,
 })`

package/src/primitives/Svg.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Svg as SvgComponent } from './Svg'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Atoms/Svg',

package/src/primitives/Svg.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { ComponentProps } from 'react'
-import type { StyleProps, PrimitiveComponent } from './types'
+import type { PrimitiveComponent, StyleProps } from './types'
 
 export interface SvgProps extends StyleProps {
   /** attach a width attribute to the <svg> element */

package/src/primitives/Text.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { Text as TextComponent } from './Text'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Atoms/Text',

package/src/primitives/Text.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { styleProps, isntStyleProp } from './style-props'
+import { isntStyleProp, styleProps } from './style-props'
 
 import type { PrimitiveComponent } from './types'
 

package/src/primitives/__tests__/Box.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Box primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Btn.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Btn primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Flex.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Flex primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Link.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Link primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Svg.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Svg primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/Text.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('Text primitive component', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/primitives.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('primitive components with style props', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/__tests__/style-props.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('style props', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/primitives/style-props.ts

@@ -3,9 +3,8 @@
 
 import pick from 'lodash/pick'
 
-import type * as Types from './types'
-
 import type { CSSObject } from 'styled-components'
+import type * as Types from './types'
 
 type Text = string | number
 

package/src/primitives/types.ts

@@ -1,6 +1,6 @@
 // known style types
+import type { CSSProperties, StyledComponent } from 'styled-components'
 import type { ComponentType } from 'react'
-import type { StyledComponent, CSSProperties } from 'styled-components'
 
 export interface ColorProps {
   color?: string

package/src/slotmap/OT2SlotMap.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+
 import { Icon } from '../icons'
 import styles from './styles.module.css'
 

package/src/slotmap/__tests__/OT2SlotMap.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('SlotMap', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/structure/Card.stories.tsx

@@ -1,8 +1,9 @@
-import type * as React from 'react'
+import { Box, SIZE_4, SPACING_3, Text } from '@opentrons/components'
+
 import { Card as CardComponent } from './Card'
-import { Box, Text, SIZE_4, SPACING_3 } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Card',

package/src/structure/Card.tsx

@@ -1,10 +1,12 @@
 // Card component with drop shadow
 import styled, { css } from 'styled-components'
+
 import { isntStyleProp, styleProps } from '../primitives'
 import * as styles from '../styles'
 
 import type { ReactNode } from 'react'
-import type { StyleProps, PrimitiveComponent } from '../primitives'
+import type { PrimitiveComponent, StyleProps } from '../primitives'
+
 export interface CardProps extends StyleProps {
   /** Title for card, all cards should receive a title. */
   title?: ReactNode

package/src/structure/LabeledValue.stories.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { LabeledValue as LabeledValueComponent } from './LabeledValue'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Labeled Value',

package/src/structure/Splash.stories.tsx

@@ -1,8 +1,9 @@
-import type * as React from 'react'
-import { Splash as SplashComponent } from './Splash'
 import { Box } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import { Splash as SplashComponent } from './Splash'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/Splash',

package/src/structure/TitleBar.stories.tsx

@@ -1,8 +1,9 @@
-import type * as React from 'react'
+import { Icon, SIZE_1, Text } from '@opentrons/components'
+
 import { TitleBar } from './TitleBar'
-import { Text, Icon, SIZE_1 } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Molecules/TitleBar',

package/src/testing/utils/matchers.ts

@@ -1,4 +1,5 @@
 import { when } from 'vitest-when'
+
 import type { Matcher } from '@testing-library/react'
 
 // these are needed because under the hood react calls components with two arguments (props and some second argument nobody seems to know)

package/src/testing/utils/renderWithProviders.tsx

@@ -1,21 +1,21 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
 
-import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
-import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
+import { vi } from 'vitest'
 
+import type { RenderOptions, RenderResult } from '@testing-library/react'
+import type { PreloadedState, Store } from 'redux'
 import type {
   ComponentProps,
   ComponentType,
   PropsWithChildren,
   ReactElement,
 } from 'react'
-import type { RenderResult, RenderOptions } from '@testing-library/react'
-import type { PreloadedState, Store } from 'redux'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State

package/src/tooltips/DeprecatedTooltip.tsx

@@ -1,5 +1,6 @@
-import { Manager, Reference, Popper } from 'react-popper'
+import { Manager, Popper, Reference } from 'react-popper'
 import cx from 'classnames'
+
 import styles from './tooltips.module.css'
 
 import type {

package/src/tooltips/LegacyTooltip.stories.tsx

@@ -1,19 +1,20 @@
-import type * as React from 'react'
-import { LegacyTooltip } from './LegacyTooltip'
-import { useTooltip } from './useTooltip'
-import { useHoverTooltip } from './useHoverTooltip'
 import {
+  ALIGN_CENTER,
   Box,
+  C_LIGHT_GRAY,
+  C_MED_GRAY,
   Flex,
   JUSTIFY_CENTER,
-  ALIGN_CENTER,
-  SIZE_4,
   SIZE_3,
-  C_LIGHT_GRAY,
-  C_MED_GRAY,
+  SIZE_4,
 } from '@opentrons/components'
 
-import type { Story, Meta } from '@storybook/react'
+import { LegacyTooltip } from './LegacyTooltip'
+import { useHoverTooltip } from './useHoverTooltip'
+import { useTooltip } from './useTooltip'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Library/Atoms/LegacyTooltip',

package/src/tooltips/LegacyTooltip.tsx

@@ -2,16 +2,16 @@ import { forwardRef } from 'react'
 import { css } from 'styled-components'
 
 import { BORDERS, COLORS } from '../helix-design-system'
-import { fontSizeH4 } from '../ui-style-constants/typography'
-import { spacing8 } from '../ui-style-constants/spacing'
-import { ARROW_SIZE_PX } from './styles'
 import { Box } from '../primitives'
 import { CURSOR_POINTER } from '../styles'
+import { spacing8 } from '../ui-style-constants/spacing'
+import { fontSizeH4 } from '../ui-style-constants/typography'
+import { ARROW_SIZE_PX } from './styles'
 
-import type { CSSProperties, ForwardedRef, ReactNode, RefCallback } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { Placement } from './types'
+import type { CSSProperties, ForwardedRef, ReactNode, RefCallback } from 'react'
 import type { StyleProps } from '../primitives'
+import type { Placement } from './types'
 
 export interface LegacyTooltipProps extends StyleProps {
   /** Whether or not the tooltip should be rendered */

package/src/tooltips/__tests__/Tooltip.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('hook-based Tooltip', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/tooltips/__tests__/useHoverTooltip.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('useHoverTooltip', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/tooltips/__tests__/usePopper.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('usePopper hook', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/tooltips/__tests__/useTooltip.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest'
+
 describe('useTooltip hook', () => {
   it.todo('replace deprecated enzyme test')
 })

package/src/tooltips/types.ts

@@ -1,8 +1,6 @@
+import type { Instance, Modifier, Options } from '@popperjs/core/lib/types'
 import type { CSSProperties, RefCallback } from 'react'
-
-import type { Instance, Options, Modifier } from '@popperjs/core/lib/types'
-
-import type { UseHoverOptions, HoverHandlers } from '../interaction-enhancers'
+import type { HoverHandlers, UseHoverOptions } from '../interaction-enhancers'
 
 export type Placement = Options['placement']
 

package/src/tooltips/usePopper.ts

@@ -1,12 +1,12 @@
-import { useRef, useLayoutEffect } from 'react'
+import { useLayoutEffect, useRef } from 'react'
 import { createPopper } from '@popperjs/core'
 
 import type {
+  HandleStateUpdate,
+  PopperModifer,
+  PopperOptions,
   UsePopperOptions,
   UsePopperResult,
-  PopperOptions,
-  PopperModifer,
-  HandleStateUpdate,
 } from './types'
 
 const DISABLED_APPLY_STYLES_MODIFIER = {

package/src/tooltips/useTooltip.ts

@@ -1,10 +1,11 @@
-import { useState, useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import uniqueId from 'lodash/uniqueId'
-import { usePopper } from './usePopper'
+
 import * as Styles from './styles'
+import { usePopper } from './usePopper'
 
 import type { CSSProperties } from 'react'
-import type { UseTooltipOptions, UseTooltipResult, Placement } from './types'
+import type { Placement, UseTooltipOptions, UseTooltipResult } from './types'
 
 interface TooltipState {
   placement: Placement | null

package/src/ui-style-constants/typography.ts

@@ -1,4 +1,5 @@
 import { css } from 'styled-components'
+
 import { COLORS } from '../helix-design-system'
 
 // Font Sizes