@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/i18n.ts

@@ -0,0 +1,63 @@
+import { initReactI18next } from 'react-i18next'
+import i18n from 'i18next'
+import capitalize from 'lodash/capitalize'
+import startCase from 'lodash/startCase'
+
+import { titleCase } from '@opentrons/shared-data'
+
+import { resources } from './assets/localization'
+
+import type { InitOptions } from 'i18next'
+
+export const US_ENGLISH = 'en-US'
+export const SIMPLIFIED_CHINESE = 'zh-CN'
+
+// these strings will not be translated so should not be localized
+export const US_ENGLISH_DISPLAY_NAME = 'English (US)'
+export const SIMPLIFIED_CHINESE_DISPLAY_NAME = '中文'
+
+export type Language = typeof US_ENGLISH | typeof SIMPLIFIED_CHINESE
+
+export const LANGUAGES: Array<{ name: string; value: Language }> = [
+  { name: US_ENGLISH_DISPLAY_NAME, value: US_ENGLISH },
+  { name: SIMPLIFIED_CHINESE_DISPLAY_NAME, value: SIMPLIFIED_CHINESE },
+]
+
+const i18nConfig: InitOptions = {
+  resources,
+  lng: 'en',
+  fallbackLng: 'en',
+  debug: process.env.NODE_ENV === 'development',
+  defaultNS: 'shared',
+  interpolation: {
+    escapeValue: false, // not needed for react as it escapes by default
+    format: function (value: string, format, lng) {
+      if (format === 'upperCase') return value.toUpperCase()
+      if (format === 'lowerCase') return value.toLowerCase()
+      if (format === 'capitalize') return capitalize(value)
+      if (format === 'sentenceCase') return startCase(value)
+      if (format === 'titleCase') return titleCase(value)
+      return value
+    },
+  },
+  keySeparator: false, // use namespaces and context instead
+  saveMissing: true,
+  missingKeyHandler: (lng, ns, key) => {
+    process.env.NODE_ENV === 'test'
+      ? console.error(`Missing ${lng} Translation: key={${key}} ns={${ns}}`)
+      : console.warn(`Missing ${lng} Translation: key={${key}} ns={${ns}}`)
+  },
+}
+
+const i18nCb = (err?: Error): void => {
+  if (err != null) {
+    console.error(
+      'Internationalization was not initialized properly. error: ',
+      err
+    )
+  }
+}
+
+void i18n.use(initReactI18next).init(i18nConfig, i18nCb)
+
+export { i18n, i18nCb, i18nConfig }

package/src/icons/Icon.stories.tsx

@@ -0,0 +1,45 @@
+import { Flex, STYLE_PROPS } from '../primitives'
+import { SPACING } from '../ui-style-constants'
+import { Icon as IconComponent } from './Icon'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof IconComponent> = {
+  title: 'Library/Atoms/Icon',
+  component: IconComponent,
+  argTypes: {
+    // Disable all StyleProps
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+    name: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof IconComponent>
+
+export const Icon: Story = {
+  args: {
+    name: 'alert',
+    spin: false,
+    size: '4rem',
+  },
+}

package/src/icons/Icon.tsx

@@ -0,0 +1,79 @@
+import cx from 'classnames'
+import { css, keyframes } from 'styled-components'
+
+import { Svg } from '../primitives'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
+import type { ReactNode } from 'react'
+import type { SvgProps } from '../primitives'
+
+export type IconName = keyof typeof ICON_DATA_BY_NAME
+
+export interface IconProps extends SvgProps {
+  /** name constant of the icon to display */
+  name: IconName
+  /** classes to apply */
+  className?: string
+  /** spin the icon with a CSS animation */
+  spin?: boolean
+  /** x attribute as a number or string (for nesting inside another SVG) */
+  x?: number | string
+  /** y attribute as a number or string (for nesting inside another SVG) */
+  y?: number | string
+  /** width as a number or string (for nesting inside another SVG) */
+  svgHeight?: number | string
+  /** height as a number or string (for nesting inside another SVG) */
+  svgWidth?: number | string
+  /** inline style passed into the icon svg */
+  style?: Record<string, string | number>
+  /** optional children */
+  children?: ReactNode
+  id?: string
+}
+
+const spinAnimation = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`
+
+const spinStyle = css`
+  &.spin {
+    animation: ${spinAnimation} 0.8s steps(8) infinite;
+    transform-origin: center;
+  }
+`
+
+/**
+ * Inline SVG icon component
+ *
+ * If you need access to the IconName type, you can:
+ * ```js
+ * import type { IconName } from '@opentrons/components'
+ * ```
+ */
+export function Icon(props: IconProps): JSX.Element | null {
+  const { name, children, className, spin, id, ...svgProps } = props
+
+  if (!(name in ICON_DATA_BY_NAME)) {
+    console.error(`"${name}" is not a valid Icon name`)
+    return null
+  }
+
+  const { viewBox, path } = ICON_DATA_BY_NAME[name]
+
+  return (
+    <Svg
+      aria-hidden="true"
+      fill="currentColor"
+      viewBox={viewBox}
+      className={cx(className, { spin })}
+      css={spinStyle}
+      {...svgProps}
+      id={id}
+    >
+      <path aria-roledescription={name} fillRule="evenodd" d={path} />
+      {props.children}
+    </Svg>
+  )
+}

package/src/icons/IconList.stories.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react'
+
+import {
+  ALIGN_CENTER,
+  BORDERS,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  Text,
+  TYPOGRAPHY,
+  WRAP,
+} from '@opentrons/components'
+
+import { Icon as IconComponent } from './Icon'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
+import type { Meta, Story } from '@storybook/react'
+import type { IconName } from './Icon'
+
+export default {
+  title: 'Library/Atoms/IconList',
+  decorators: [Story => <Story />],
+} as Meta
+
+interface IconState {
+  name: IconName
+  showText: boolean
+}
+
+const Template: Story<React.ComponentProps<typeof IconComponent>> = args => {
+  // const { backgroundColor } = args
+  const [icons, setIcons] = React.useState<IconState[]>(() =>
+    Object.keys(ICON_DATA_BY_NAME).map(name => ({
+      name: name as IconName,
+      showText: false,
+    }))
+  )
+  const [selectedIcon, setSelectedIcon] = React.useState<IconName | null>(null)
+
+  // copy icon name
+  const handleCopy = async (
+    iconName: IconName,
+    index: number
+  ): Promise<void> => {
+    await navigator.clipboard.writeText(iconName)
+    setIcons(prevIcons =>
+      prevIcons.map((icon, i) => {
+        if (i === index) {
+          return { ...icon, showText: true }
+        } else {
+          return icon
+        }
+      })
+    )
+    setSelectedIcon(iconName)
+  }
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setIcons(prevIcons =>
+        prevIcons.map(icon => ({ ...icon, showText: false }))
+      )
+      setSelectedIcon(null)
+    }, 2000)
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [icons])
+
+  return (
+    <Flex flexWrap={WRAP}>
+      {icons.map(({ name, showText }, index) => (
+        <Flex
+          key={`icon_${name}`}
+          width="8.75rem"
+          flexDirection={DIRECTION_COLUMN}
+          alignItems={ALIGN_CENTER}
+          borderRadius={BORDERS.borderRadius12}
+          marginRight={SPACING.spacing8}
+          marginBottom={SPACING.spacing8}
+          padding={SPACING.spacing16}
+          onClick={() => handleCopy(name, index)}
+          border={
+            selectedIcon === name
+              ? `2px solid ${COLORS.blue50}`
+              : `2px solid ${COLORS.black90}`
+          }
+        >
+          <IconComponent name={name as IconName} size="4rem" />
+          <Text
+            textAlign={TYPOGRAPHY.textAlignCenter}
+            marginTop={SPACING.spacing8}
+            fontSize={TYPOGRAPHY.fontSizeP}
+          >
+            {name}
+          </Text>
+          <Flex height="1.5rem">
+            {showText ? <Text color={COLORS.blue50}> {'copied'}</Text> : null}
+          </Flex>
+        </Flex>
+      ))}
+    </Flex>
+  )
+}
+export const IconList = Template.bind({})
+IconList.args = {
+  backgroundColor: COLORS.blue50,
+}

package/src/icons/ModuleIcon.tsx

@@ -0,0 +1,52 @@
+import {
+  ABSORBANCE_READER_TYPE,
+  FLEX_STACKER_MODULE_TYPE,
+  HEATERSHAKER_MODULE_TYPE,
+  MAGNETIC_BLOCK_TYPE,
+  MAGNETIC_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+} from '@opentrons/shared-data'
+
+import { Icon } from './Icon'
+
+import type { ModuleType } from '@opentrons/shared-data'
+import type { StyleProps } from '../primitives/types'
+
+export type ModuleIconName =
+  | 'ot-magnet-v2'
+  | 'ot-heater-shaker'
+  | 'ot-temperature-v2'
+  | 'ot-magnet-v2'
+  | 'ot-thermocycler'
+  | 'ot-absorbance'
+  | 'ot-flex-stacker'
+
+export const MODULE_ICON_NAME_BY_TYPE: {
+  [type in ModuleType]: ModuleIconName
+} = {
+  [MAGNETIC_BLOCK_TYPE]: 'ot-magnet-v2',
+  [HEATERSHAKER_MODULE_TYPE]: 'ot-heater-shaker',
+  [TEMPERATURE_MODULE_TYPE]: 'ot-temperature-v2',
+  [MAGNETIC_MODULE_TYPE]: 'ot-magnet-v2',
+  [THERMOCYCLER_MODULE_TYPE]: 'ot-thermocycler',
+  [ABSORBANCE_READER_TYPE]: 'ot-absorbance',
+  [FLEX_STACKER_MODULE_TYPE]: 'ot-flex-stacker',
+}
+
+interface ModuleIconProps extends StyleProps {
+  moduleType: ModuleType
+}
+
+export function ModuleIcon(props: ModuleIconProps): JSX.Element {
+  const { moduleType, ...styleProps } = props
+  const iconName = MODULE_ICON_NAME_BY_TYPE[moduleType]
+
+  return (
+    <Icon
+      name={iconName}
+      {...styleProps}
+      data-testid={`ModuleIcon_${iconName}`}
+    />
+  )
+}

package/src/icons/NotificationIcon.tsx

@@ -0,0 +1,41 @@
+import { COLOR_WARNING } from '../styles'
+import { Icon } from './Icon'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
+import type { IconName, IconProps } from './Icon'
+
+export interface NotificationIconProps extends IconProps {
+  /** name constant of the optional notifcation icon to display */
+  childName: IconName | null
+  /** color to apply to notification icon (defaults to COLOR_WARNING) */
+  childColor?: string
+}
+
+const SCALE_FACTOR = 3
+
+/**
+ * Inline SVG icon component with additional nested notification icon. Takes
+ * all the same props as Icon in addition to the ones listed above.
+ */
+export function NotificationIcon(props: NotificationIconProps): JSX.Element {
+  const { childName, childColor, ...iconProps } = props
+  const { viewBox } = ICON_DATA_BY_NAME[iconProps.name]
+  const [x, y, width, height] = viewBox.split(' ').map(Number)
+  const scaledWidth = width / SCALE_FACTOR
+  const scaledHeight = height / SCALE_FACTOR
+
+  return (
+    <Icon {...iconProps}>
+      {childName && (
+        <Icon
+          name={childName}
+          color={childColor ?? COLOR_WARNING}
+          x={x + (SCALE_FACTOR - 1) * scaledWidth}
+          y={y + (SCALE_FACTOR - 1) * scaledHeight}
+          svgWidth={scaledWidth}
+          svgHeight={scaledHeight}
+        />
+      )}
+    </Icon>
+  )
+}