fix some broken stories

Opentrons · Jan 7, 2025 · afbacee · afbacee
1 parent b28ef1e
commit afbacee
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 37 deletions.
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -1,6 +1,8 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
 import { I18nextProvider } from 'react-i18next'
 import { GlobalStyle } from '../app/src/atoms/GlobalStyle'
-import { i18n } from '../app/src/i18n'
+import { resources } from '../app/src/assets/localization'
 
 global.APP_SHELL_REMOTE = {
   ipcRenderer: {
@@ -43,6 +45,17 @@ export const customViewports = {
   },
 }
 
+// need to initialize i18n before importing any components
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'en',
+  fallbackLng: 'en',
+  debug: true,
+  interpolation: {
+    escapeValue: false,
+  },
+})
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   viewport: { viewports: customViewports },

diff --git a/app/src/DesignTokens/Spacing/Spacing.stories.tsx b/app/src/DesignTokens/Spacing/Spacing.stories.tsx
@@ -1,12 +1,14 @@
+import styled from 'styled-components'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
 import {
   ALIGN_FLEX_START,
   Box,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
   SPACING,
-  LegacyStyledText,
-  TYPOGRAPHY,
+  StyledText,
 } from '@opentrons/components'
 
 import type { Story, Meta } from '@storybook/react'
@@ -21,6 +23,12 @@ interface SpacingsStorybookProps {
 
 const Template: Story<SpacingsStorybookProps> = args => {
   const targetSpacings = args.spacings.filter(s => !s[1].includes('auto'))
+  // sort by rem value
+  const sortedSpacing = targetSpacings.sort((a, b) => {
+    const aValue = parseFloat(a[1].replace('rem', ''))
+    const bValue = parseFloat(b[1].replace('rem', ''))
+    return aValue - bValue
+  })
 
   const convertToPx = (remFormat: string): string => {
     const pxVal = Number(remFormat.replace('rem', '')) * 16
@@ -33,7 +41,7 @@ const Template: Story<SpacingsStorybookProps> = args => {
       gridGap={SPACING.spacing8}
       padding={SPACING.spacing24}
     >
-      {targetSpacings.map((spacing, index) => (
+      {sortedSpacing.map((spacing, index) => (
         <Flex
           key={`spacing_${index}`}
           flexDirection={DIRECTION_COLUMN}
@@ -43,14 +51,13 @@ const Template: Story<SpacingsStorybookProps> = args => {
           width="100%"
           height="6rem"
         >
-          <LegacyStyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
+          <StyledText desktopStyle="bodyLargeSemiBold">
             {`${spacing[0]} - ${spacing[1]}: ${convertToPx(spacing[1])}`}
-          </LegacyStyledText>
-          <Box
-            width={spacing[1]}
-            height="2rem"
-            backgroundColor={COLORS.blue50}
-          />
+          </StyledText>
+          <Flex gridGap={spacing[1]} backgroundColor={COLORS.blue50}>
+            <StyledBox />
+            <StyledBox />
+          </Flex>
         </Flex>
       ))}
     </Flex>
@@ -62,3 +69,9 @@ const allSpacings = Object.entries(SPACING)
 AllSpacing.args = {
   spacings: allSpacings,
 }
+
+const StyledBox = styled(Box)`
+  width: 2rem;
+  height: 2rem;
+  background-color: ${COLORS.blue35};
+`
diff --git a/app/src/organisms/EmergencyStop/DesktopEstopMissingModal.stories.tsx b/app/src/organisms/EmergencyStop/DesktopEstopMissingModal.stories.tsx
@@ -2,7 +2,7 @@ import type * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 
-import { configReducer } from '/app/redux/config/reducer'
+import { configReducer } from '../../redux/config/reducer'
 import { EstopMissingModal } from '.'
 
 import type { Store, StoreEnhancer } from 'redux'

diff --git a/app/src/organisms/EmergencyStop/DesktopEstopPressedModal.stories.tsx b/app/src/organisms/EmergencyStop/DesktopEstopPressedModal.stories.tsx
@@ -3,7 +3,7 @@ import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
-import { configReducer } from '/app/redux/config/reducer'
+import { configReducer } from '../../redux/config/reducer'
 import { EstopPressedModal } from '.'
 
 import type { Store, StoreEnhancer } from 'redux'

diff --git a/components/src/organisms/DeckLabelSet/DeckLabelSet.stories.tsx b/components/src/organisms/DeckLabelSet/DeckLabelSet.stories.tsx
@@ -8,14 +8,17 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 const mockDeckLabels = [
   {
+    isZoomed: false,
     text: 'Label',
     isSelected: false,
     labelBorderRadius: BORDERS.borderRadius4,
   },
   {
+    isZoomed: false,
     text: 'Label',
     isSelected: false,
     labelBorderRadius: BORDERS.borderRadius4,
+    isLast: true,
   },
 ]
 
@@ -24,7 +27,7 @@ const meta: Meta<typeof DeckLabelSetComponent> = {
   component: DeckLabelSetComponent,
   decorators: [
     Story => (
-      <Flex padding={SPACING.spacing16}>
+      <Flex padding={SPACING.spacing16} transform="scaleY(-1.0)">
         <Story />
       </Flex>
     ),
@@ -38,8 +41,8 @@ export const DeckLabel: Story = {
   args: {
     // width and height from Figma
     deckLabels: mockDeckLabels,
-    width: 31.9375,
-    height: 5.75,
+    width: 31.9375 * 16,
+    height: 5.75 * 16,
     x: 0,
     y: 0,
   },

diff --git a/package.json b/package.json
@@ -47,11 +47,11 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
-    "@storybook/addon-actions": "^7.6.16",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-links": "^7.6.16",
-    "@storybook/react": "^7.6.16",
-    "@storybook/react-vite": "^7.6.16",
+    "@storybook/addon-actions": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-vite": "7.6.17",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "13.5.0",
@@ -140,7 +140,7 @@
     "semver": "^7.3.8",
     "shx": "^0.3.4",
     "simple-git": "^3.15.1",
-    "storybook": "^7.6.16",
+    "storybook": "7.6.17",
     "storybook-addon-pseudo-states": "2.0.0",
     "style-loader": "^1.1.3",
     "stylelint": "^11.0.0",

diff --git a/protocol-designer/src/organisms/MaterialsListModal/MaterialsListModal.stories.tsx b/protocol-designer/src/organisms/MaterialsListModal/MaterialsListModal.stories.tsx
@@ -1,11 +1,15 @@
 import { I18nextProvider } from 'react-i18next'
+import { Provider } from 'react-redux'
+
 import { i18n } from '../../assets/localization'
+import { configureStore } from '../../configureStore'
 import { MaterialsListModal as MaterialsListModalComponent } from '.'
 
 import type { Meta, StoryObj } from '@storybook/react'
 import type { LabwareOnDeck, ModuleOnDeck } from '../../step-forms'
 import type { FixtureInList } from '.'
 
+const mockStore = configureStore()
 const mockHardware = [
   {
     id: 'mockHardware',
@@ -49,9 +53,11 @@ const meta: Meta<typeof MaterialsListModalComponent> = {
   component: MaterialsListModalComponent,
   decorators: [
     Story => (
-      <I18nextProvider i18n={i18n}>
-        <Story />
-      </I18nextProvider>
+      <Provider store={mockStore}>
+        <I18nextProvider i18n={i18n}>
+          <Story />
+        </I18nextProvider>
+      </Provider>
     ),
   ],
 }

diff --git a/protocol-designer/src/organisms/SlotInformation/SlotInformation.stories.tsx b/protocol-designer/src/organisms/SlotInformation/SlotInformation.stories.tsx
@@ -1,6 +1,7 @@
-import { Flex } from '@opentrons/components'
+import { MemoryRouter } from 'react-router-dom'
 import { I18nextProvider } from 'react-i18next'
 import { i18n } from '../../assets/localization'
+import { Flex } from '@opentrons/components'
 import { SlotInformation as SlotInformationComponent } from '.'
 
 import type { Meta, StoryObj } from '@storybook/react'
@@ -37,11 +38,13 @@ const meta: Meta<typeof SlotInformationComponent> = {
   },
   decorators: [
     Story => (
-      <I18nextProvider i18n={i18n}>
-        <Flex width="21rem">
-          <Story />
-        </Flex>
-      </I18nextProvider>
+      <MemoryRouter>
+        <I18nextProvider i18n={i18n}>
+          <Flex width="21rem">
+            <Story />
+          </Flex>
+        </I18nextProvider>
+      </MemoryRouter>
     ),
   ],
 }

diff --git a/yarn.lock b/yarn.lock
@@ -4765,7 +4765,7 @@
     "@smithy/types" "^3.0.0"
     tslib "^2.6.2"
 
-"@storybook/[email protected]", "@storybook/addon-actions@^7.6.16":
+"@storybook/[email protected]":
   version "7.6.17"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.6.17.tgz#b1be5ab28b22b4a50c6aa0cd0a3671ca5b6f5f71"
   integrity sha512-TBphs4v6LRfyTpFo/WINF0TkMaE3rrNog7wW5mbz6n0j8o53kDN4o9ZEcygSL5zQX43CAaghQTeDCss7ueG7ZQ==
@@ -4820,7 +4820,7 @@
     remark-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-essentials@^7.6.16":
+"@storybook/[email protected].17":
   version "7.6.17"
   resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-7.6.17.tgz#d49d9a77edc999518c6871b66032a647787c39f4"
   integrity sha512-qlSpamxuYfT2taF953nC9QijGF2pSbg1ewMNpdwLTj16PTZvR/d8NCDMTJujI1bDwM2m18u8Yc43ibh5LEmxCw==
@@ -4847,7 +4847,7 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/addon-links@^7.6.16":
+"@storybook/[email protected].17":
   version "7.6.17"
   resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.6.17.tgz#5a678ff09c1b5056b67cb345c115cfcd343ffe86"
   integrity sha512-iFUwKObRn0EKI0zMETsil2p9a/81rCuSMEWECsi+khkCAs1FUnD2cT6Ag5ydcNcBXsdtdfDJdtXQrkw+TSoStQ==
@@ -5292,7 +5292,7 @@
   resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.6.17.tgz#5875915316f687bf658cc6686ea49f2928eae4b2"
   integrity sha512-32Sa/G+WnvaPiQ1Wvjjw5UM9rr2c4GDohwCcWVv3/LJuiFPqNS6zglAtmnsrlIBnUwRBMLMh/ekCTdqMiUmfDw==
 
-"@storybook/react-vite@^7.6.16":
+"@storybook/[email protected].17":
   version "7.6.17"
   resolved "https://registry.yarnpkg.com/@storybook/react-vite/-/react-vite-7.6.17.tgz#29ea46ef27595d10ad115b33833ed5b167f02960"
   integrity sha512-4dIm3CuRl44X1TLzN3WoZh/bChzJF7Ud28li9atj9C8db0bb/y0zl8cahrsRFoR7/LyfqdOVLqaztrnA5SsWfg==
@@ -5305,7 +5305,7 @@
     magic-string "^0.30.0"
     react-docgen "^7.0.0"
 
-"@storybook/[email protected]", "@storybook/react@^7.6.16":
+"@storybook/[email protected]":
   version "7.6.17"
   resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.6.17.tgz#3e585b37f4a45d01b60543e1952a46ae3da70e81"
   integrity sha512-lVqzQSU03rRJWYW+gK2gq6mSo3/qtnVICY8B8oP7gc36jVu4ksDIu45bTfukM618ODkUZy0vZe6T4engK3azjA==
@@ -20800,7 +20800,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/storybook-addon-pseudo-states/-/storybook-addon-pseudo-states-2.0.0.tgz#4fa251aaea04ebc6d17b7e57e5f09ea240f14583"
   integrity sha512-tLuuwB1k+xFsX8C1fn4G/vJm5wX33jvSLeqTsJgWwI3/AKJUf6Thbg/kg14I2AwN8nqffjun2PzE05Iea23n0w==
 
-storybook@^7.6.16:
+[email protected].17:
   version "7.6.17"
   resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.6.17.tgz#d7fdbbf57d61d386b3ccc6721285bc914f54269b"
   integrity sha512-8+EIo91bwmeFWPg1eysrxXlhIYv3OsXrznTr4+4Eq0NikqAoq6oBhtlN5K2RGS2lBVF537eN+9jTCNbR+WrzDA==