diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index bdae9a4f833..2063c9e5ec5 100644 --- 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 index 3b12ae833db..11c9125a45f 100644 --- a/app/src/DesignTokens/Spacing/Spacing.stories.tsx +++ b/app/src/DesignTokens/Spacing/Spacing.stories.tsx @@ -1,3 +1,6 @@ +import styled from 'styled-components' +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React from 'react' import { ALIGN_FLEX_START, Box, @@ -5,8 +8,7 @@ import { 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 = 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 = args => { gridGap={SPACING.spacing8} padding={SPACING.spacing24} > - {targetSpacings.map((spacing, index) => ( + {sortedSpacing.map((spacing, index) => ( = args => { width="100%" height="6rem" > - + {`${spacing[0]} - ${spacing[1]}: ${convertToPx(spacing[1])}`} - - + + + + + ))} @@ -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 index f8729d48263..e089b8cee20 100644 --- 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 index 5b999ce2bc5..917e92143c6 100644 --- 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 index 5836fe5b947..73542cce99a 100644 --- 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 = { component: DeckLabelSetComponent, decorators: [ Story => ( - + ), @@ -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 index 654f12137fc..b48c3a55d37 100755 --- 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 index 36cb4f58efb..21d6a171744 100644 --- 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 = { component: MaterialsListModalComponent, decorators: [ Story => ( - - - + + + + + ), ], } diff --git a/protocol-designer/src/organisms/SlotInformation/SlotInformation.stories.tsx b/protocol-designer/src/organisms/SlotInformation/SlotInformation.stories.tsx index 98d6132ef23..1a748fbc37f 100644 --- 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 = { }, decorators: [ Story => ( - - - - - + + + + + + + ), ], } diff --git a/yarn.lock b/yarn.lock index 2923a10913e..a99af1adf0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4765,7 +4765,7 @@ "@smithy/types" "^3.0.0" tslib "^2.6.2" -"@storybook/addon-actions@7.6.17", "@storybook/addon-actions@^7.6.16": +"@storybook/addon-actions@7.6.17": 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/addon-essentials@7.6.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/addon-links@7.6.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/react-vite@7.6.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/react@7.6.17", "@storybook/react@^7.6.16": +"@storybook/react@7.6.17": 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 @@ storybook-addon-pseudo-states@2.0.0: 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: +storybook@7.6.17: version "7.6.17" resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.6.17.tgz#d7fdbbf57d61d386b3ccc6721285bc914f54269b" integrity sha512-8+EIo91bwmeFWPg1eysrxXlhIYv3OsXrznTr4+4Eq0NikqAoq6oBhtlN5K2RGS2lBVF537eN+9jTCNbR+WrzDA==