refactor(components): remove css modules for hardware sim, only expor…

…t targeted directories to lib

In order to allow key components to be used in server side rendered environments, remove the
dependency on css modules and target exported directories for lib build

components/src/hardware-sim/Labware/LabwareRender.tsx

@@ -51,9 +51,6 @@ export interface LabwareRenderProps {
   onMouseEnterWell?: (e: WellMouseEvent) => unknown
   /** Optional callback, called with WellMouseEvent args onMouseLeave */
   onMouseLeaveWell?: (e: WellMouseEvent) => unknown
-  /** Special class which, together with 'data-wellname' on the well elements,
-    allows drag-to-select behavior */
-  selectableWellClass?: string
   gRef?: React.RefObject<SVGGElement>
   onLabwareClick?: () => void
 }
@@ -71,7 +68,6 @@ export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
         definition={props.definition}
         onMouseEnterWell={props.onMouseEnterWell}
         onMouseLeaveWell={props.onMouseLeaveWell}
-        selectableWellClass={props.selectableWellClass}
         onLabwareClick={props.onLabwareClick}
         highlight={props.highlight}
       />

components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import map from 'lodash/map'
+import { COLORS } from '../../../ui-style-constants'
 import { Well } from './Well'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { CSSProperties } from 'styled-components'
@@ -22,6 +23,8 @@ function FilledWellsComponent(props: FilledWellsProps): JSX.Element {
               wellName={wellName}
               well={definition.wells[wellName]}
               fill={color}
+              stroke={COLORS.black}
+              strokeWidth='0.6'
             />
           )
         }

components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx

@@ -22,8 +22,6 @@ export interface StaticLabwareProps {
   onMouseEnterWell?: (e: WellMouseEvent) => unknown
   /** Optional callback to be executed when mouse leaves a well element */
   onMouseLeaveWell?: (e: WellMouseEvent) => unknown
-  /** [legacy] css class to be added to well component if it is selectable */
-  selectableWellClass?: string
 }
 
 const TipDecoration = React.memo(function TipDecoration(props: {

components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx

@@ -26,7 +26,7 @@ export const STYLE_BY_WELL_CONTENTS: {
   highlightedWell: {
     stroke: COLORS.blueEnabled,
     fill: `${COLORS.blueEnabled}33`, // 20% opacity
-    strokeWidth: 0.6,
+    strokeWidth: 1,
   },
   disabledWell: {
     stroke: '#C6C6C6', // LEGACY --light-grey-hover
@@ -36,11 +36,11 @@ export const STYLE_BY_WELL_CONTENTS: {
   selectedWell: {
     stroke: COLORS.blueEnabled,
     fill: COLORS.transparent,
-    strokeWidth: 0.6,
+    strokeWidth: 1,
   },
   tipMissing: {
     stroke: '#A4A4A4', // LEGACY --c-near-black
-    fill: '#E5E2E2', // LEFACY --c-light-gray
+    fill: '#E5E2E2', // LEGACY --c-light-gray
     strokeWidth: 0.6,
   },
   tipPresent: {

components/src/hardware-sim/Labware/labwareInternals/Well.tsx

@@ -3,7 +3,9 @@ import * as React from 'react'
 import type { LabwareWell } from '@opentrons/shared-data'
 import type { WellMouseEvent } from './types'
 import type { StyleProps } from '../../../primitives'
+import { COLORS } from '../../../ui-style-constants'
 
+export const INTERACTIVE_WELL_DATA_ATTRIBUTE = 'data-wellname'
 export interface WellProps extends StyleProps {
   /** Well Name (eg 'A1') */
   wellName: string
@@ -17,15 +19,13 @@ export interface WellProps extends StyleProps {
   onMouseLeaveWell?: (e: WellMouseEvent) => unknown
 }
 
-
-
 export function WellComponent(props: WellProps): JSX.Element {
   const {
     well,
     wellName,
-    stroke,
-    strokeWidth,
-    fill,
+    stroke = COLORS.black,
+    strokeWidth = 1,
+    fill = COLORS.white,
     onMouseEnterWell,
     onMouseLeaveWell,
   } = props
@@ -34,7 +34,7 @@ export function WellComponent(props: WellProps): JSX.Element {
   const isInteractive = onMouseEnterWell != null || onMouseLeaveWell != null 
   const pointerEvents: React.CSSProperties['pointerEvents'] = isInteractive ? 'auto' : 'none' 
   const commonProps = {
-    'data-wellname': isInteractive ? wellName : undefined,
+    [INTERACTIVE_WELL_DATA_ATTRIBUTE]: isInteractive ? wellName : undefined,
     onMouseEnter: onMouseEnterWell != null ? (event: React.MouseEvent) => onMouseEnterWell({ wellName, event }) : undefined,
     onMouseLeave: onMouseLeaveWell != null ? (event: React.MouseEvent) => onMouseLeaveWell({ wellName, event }) : undefined,
     style: { pointerEvents, stroke, strokeWidth, fill }

components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
-import cx from 'classnames'
 import { C_BLACK, C_BLUE } from '../../../styles/colors'
 import { RobotCoordsText } from '../../Deck'
 import { WellLabelOption, WELL_LABEL_OPTIONS } from '../LabwareRender'
-import styles from './WellLabels.css'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { HighlightedWellLabels } from './types'
 import { COLORS } from '../../../ui-style-constants'

components/src/index.ts

@@ -1,6 +1,5 @@
 // opentrons components library
 
-export * from './constants'
 export * from './hooks'
 export * from './utils'
 

components/src/manifest.ts

@@ -0,0 +1,6 @@
+// opentrons components library package
+
+export * from './hardware-sim'
+export * from './primitives'
+
+export * from './ui-style-constants'

components/webpack.config.js

@@ -2,9 +2,9 @@
 
 const path = require('path')
 const webpackMerge = require('webpack-merge')
-const { baseConfig } = require('@opentrons/webpack-config')
+const { baseConfig, rules } = require('@opentrons/webpack-config')
 
-const ENTRY_INDEX = path.join(__dirname, 'src/index.ts')
+const ENTRY_INDEX = path.join(__dirname, 'src/manifest.ts')
 const OUTPUT_PATH = path.join(__dirname, 'lib')
 
 module.exports = async () =>
@@ -16,4 +16,6 @@ module.exports = async () =>
       library: '@opentrons/components',
       libraryTarget: 'umd',
     },
+    plugins: [],
+    module: { rules: [rules.js] },
   })

protocol-designer/src/components/labware/SelectableLabware.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import reduce from 'lodash/reduce'
 
 import {
-  SELECTABLE_WELL_CLASS,
   WellMouseEvent,
   WellGroup,
 } from '@opentrons/components'
@@ -48,7 +47,7 @@ const getChannelsFromNozleType = (nozzleType: NozzleType): ChannelType => {
 
 export class SelectableLabware extends React.Component<Props> {
   _getWellsFromRect: (rect: GenericRect) => WellGroup = rect => {
-    const selectedWells = getCollidingWells(rect, SELECTABLE_WELL_CLASS)
+    const selectedWells = getCollidingWells(rect)
     return this._wellsFromSelected(selectedWells)
   }
 
@@ -189,7 +188,6 @@ export class SelectableLabware extends React.Component<Props> {
                 this.handleMouseLeaveWell(mouseEventArgs)
                 handleMouseLeaveWell(mouseEventArgs.event)
               }}
-              selectableWellClass={SELECTABLE_WELL_CLASS}
               onMouseEnterWell={({ wellName, event }) => {
                 if (wellContents !== null) {
                   this.handleMouseEnterWell({ wellName, event })

protocol-designer/src/utils/index.ts

@@ -19,12 +19,13 @@ import type {
   LabwareEntities,
   PipetteEntities,
 } from '@opentrons/step-generation'
+import { INTERACTIVE_WELL_DATA_ATTRIBUTE } from '@opentrons/components/src/hardware-sim/Labware/labwareInternals/Well'
 
 export const registerSelectors: (arg0: any) => void =
   process.env.NODE_ENV === 'development'
     ? // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('reselect-tools').registerSelectors
-    : (a: any) => {}
+    require('reselect-tools').registerSelectors
+    : (a: any) => { }
 export const uuid: () => string = uuidv1
 // Collision detection for SelectionRect / SelectableLabware
 export const rectCollision = (
@@ -45,7 +46,6 @@ export function clientRectToBoundingRect(rect: ClientRect): BoundingRect {
 }
 export const getCollidingWells = (
   rectPositions: GenericRect,
-  selectableClassname: string
 ): WellGroup => {
   // Returns set of selected wells under a collision rect
   const { x0, y0, x1, y1 } = rectPositions
@@ -56,9 +56,8 @@ export const getCollidingWells = (
     height: Math.abs(y1 - y0),
   }
   // NOTE: querySelectorAll returns a NodeList, so you need to unpack it as an Array to do .filter
-  // @ts-expect-error(sa, 2021-6-21): there is no option to query by class selector in HTMLElementTagNameMap (see type of querySelectorAll)
   const selectableElems: HTMLElement[] = [
-    ...document.querySelectorAll('.' + selectableClassname),
+    ...document.querySelectorAll<HTMLElement>(`[${INTERACTIVE_WELL_DATA_ATTRIBUTE}]`),
   ]
   const collidedElems = selectableElems.filter((selectableElem, i) =>
     rectCollision(
@@ -68,11 +67,11 @@ export const getCollidingWells = (
   )
   const collidedWellData = collidedElems.reduce(
     (acc: WellGroup, elem): WellGroup => {
-      // TODO IMMEDIATELY no magic string 'wellname'
-      if ('wellname' in elem.dataset) {
+      if (
+        INTERACTIVE_WELL_DATA_ATTRIBUTE.replace('data-', '') in elem.dataset
+      ) {
         const wellName = elem.dataset.wellname
-        // @ts-expect-error(sa, 2021-6-21): wellName might be undefined
-        return { ...acc, [wellName]: null }
+        return wellName != null ? { ...acc, [wellName]: null } : acc
       }
 
       return acc
@@ -81,7 +80,6 @@ export const getCollidingWells = (
   )
   return collidedWellData
 }
-// TODO IMMEDIATELY use where appropriate
 export const arrayToWellGroup = (w: string[]): WellGroup =>
   w.reduce((acc, wellName) => ({ ...acc, [wellName]: null }), {})
 // cross-PD memoization of well set utils
@@ -119,8 +117,8 @@ export const makeTimerText = (
   targetMinutes === null && targetSeconds === null
     ? null
     : `${targetMinutes}  ${i18n.t(
-        'application.units.minutes'
-      )} ${targetSeconds}  ${i18n.t('application.units.seconds')} timer`
+      'application.units.minutes'
+    )} ${targetSeconds}  ${i18n.t('application.units.seconds')} timer`
 
 export const getIsAdapter = (
   labwareId: string,