From dad7a7a0ff93e16ed5f50b476b9443c398d5de3a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 2 Jan 2025 11:03:48 +0100 Subject: [PATCH] fix type issues --- code/addons/a11y/src/components/VisionSimulator.tsx | 4 ++-- code/addons/interactions/src/components/Interaction.tsx | 4 ++-- .../addons/onboarding/src/components/List/List.styled.tsx | 4 ++-- code/addons/test/src/components/Interaction.tsx | 4 ++-- code/addons/test/src/components/TestProviderRender.tsx | 3 ++- code/addons/viewport/src/legacy/ToolLegacy.tsx | 4 ++-- code/addons/viewport/src/utils.tsx | 4 ++-- code/core/src/components/components/bar/button.tsx | 4 ++-- .../manager/components/notifications/NotificationItem.tsx | 4 ++-- code/lib/blocks/src/components/ArgsTable/SectionRow.tsx | 8 ++++---- 10 files changed, 22 insertions(+), 21 deletions(-) diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx index 2acc66b21c71..fe8d78592289 100644 --- a/code/addons/a11y/src/components/VisionSimulator.tsx +++ b/code/addons/a11y/src/components/VisionSimulator.tsx @@ -42,13 +42,13 @@ const getFilter = (filterName: string) => { return `url('#${filterName}')`; }; -const Hidden = styled.div(() => ({ +const Hidden = styled.div({ '&, & svg': { position: 'absolute', width: 0, height: 0, }, -})); +}); const ColorIcon = styled.span<{ filter: string }>( { diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx index 4ceef384d02a..ae6164a56f2e 100644 --- a/code/addons/interactions/src/components/Interaction.tsx +++ b/code/addons/interactions/src/components/Interaction.tsx @@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult'; import { MethodCall } from './MethodCall'; import { StatusIcon } from './StatusIcon'; -const MethodCallWrapper = styled.div(() => ({ +const MethodCallWrapper = styled.div({ fontFamily: typography.fonts.mono, fontSize: typography.size.s1, overflowWrap: 'break-word', inlineSize: 'calc( 100% - 40px )', -})); +}); const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()), diff --git a/code/addons/onboarding/src/components/List/List.styled.tsx b/code/addons/onboarding/src/components/List/List.styled.tsx index 64300369dd2a..b54fab802501 100644 --- a/code/addons/onboarding/src/components/List/List.styled.tsx +++ b/code/addons/onboarding/src/components/List/List.styled.tsx @@ -1,9 +1,9 @@ import { styled } from 'storybook/internal/theming'; -export const ListWrapper = styled.ul(() => ({ +export const ListWrapper = styled.ul({ display: 'flex', flexDirection: 'column', rowGap: 16, padding: 0, margin: 0, -})); +}); diff --git a/code/addons/test/src/components/Interaction.tsx b/code/addons/test/src/components/Interaction.tsx index 75797c65c5a3..fd48646e1b10 100644 --- a/code/addons/test/src/components/Interaction.tsx +++ b/code/addons/test/src/components/Interaction.tsx @@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult'; import { MethodCall } from './MethodCall'; import { StatusIcon } from './StatusIcon'; -const MethodCallWrapper = styled.div(() => ({ +const MethodCallWrapper = styled.div({ fontFamily: typography.fonts.mono, fontSize: typography.size.s1, overflowWrap: 'break-word', inlineSize: 'calc( 100% - 40px )', -})); +}); const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()), diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx index ab8e61fadf0d..dd00c6058d2b 100644 --- a/code/addons/test/src/components/TestProviderRender.tsx +++ b/code/addons/test/src/components/TestProviderRender.tsx @@ -355,7 +355,8 @@ export const TestProviderRender: FC< icon={ state.crashed ? ( - ) : status === 'unknown' ? ( + ) : // @ts-expect-error @ghengeveld should check whether this is a bug or not + status === 'unknown' ? ( ) : ( diff --git a/code/addons/viewport/src/legacy/ToolLegacy.tsx b/code/addons/viewport/src/legacy/ToolLegacy.tsx index 7035bd79789d..5f8988364414 100644 --- a/code/addons/viewport/src/legacy/ToolLegacy.tsx +++ b/code/addons/viewport/src/legacy/ToolLegacy.tsx @@ -74,10 +74,10 @@ const flip = ({ width, height, ...styles }: ViewportStyles) => ({ width: height, }); -const ActiveViewportSize = styled.div(() => ({ +const ActiveViewportSize = styled.div({ display: 'inline-flex', alignItems: 'center', -})); +}); const ActiveViewportLabel = styled.div(({ theme }) => ({ display: 'inline-block', diff --git a/code/addons/viewport/src/utils.tsx b/code/addons/viewport/src/utils.tsx index 619ddc178d3e..261ba22140d1 100644 --- a/code/addons/viewport/src/utils.tsx +++ b/code/addons/viewport/src/utils.tsx @@ -7,10 +7,10 @@ import { BrowserIcon, MobileIcon, TabletIcon } from '@storybook/icons'; import type { Viewport, ViewportMap } from './types'; -export const ActiveViewportSize = styled.div(() => ({ +export const ActiveViewportSize = styled.div({ display: 'inline-flex', alignItems: 'center', -})); +}); export const ActiveViewportLabel = styled.div(({ theme }) => ({ display: 'inline-block', diff --git a/code/core/src/components/components/bar/button.tsx b/code/core/src/components/components/bar/button.tsx index dc1727d10b57..20663149e526 100644 --- a/code/core/src/components/components/bar/button.tsx +++ b/code/core/src/components/components/bar/button.tsx @@ -140,11 +140,11 @@ const IconPlaceholder = styled.div(({ theme }) => ({ animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, })); -const IconButtonSkeletonWrapper = styled.div(() => ({ +const IconButtonSkeletonWrapper = styled.div({ marginTop: 6, padding: 7, height: 28, -})); +}); /** @deprecated This component will be removed in Storybook 9.0 */ export const IconButtonSkeleton = () => ( diff --git a/code/core/src/manager/components/notifications/NotificationItem.tsx b/code/core/src/manager/components/notifications/NotificationItem.tsx index 159fa0da137f..6e23ebd5b359 100644 --- a/code/core/src/manager/components/notifications/NotificationItem.tsx +++ b/code/core/src/manager/components/notifications/NotificationItem.tsx @@ -93,7 +93,7 @@ const NotificationWithInteractiveStates = styled(Notification)({ const NotificationButton = NotificationWithInteractiveStates.withComponent('div'); const NotificationLink = NotificationWithInteractiveStates.withComponent(Link); -const NotificationIconWrapper = styled.div(() => ({ +const NotificationIconWrapper = styled.div({ display: 'flex', marginRight: 10, alignItems: 'center', @@ -102,7 +102,7 @@ const NotificationIconWrapper = styled.div(() => ({ width: 16, height: 16, }, -})); +}); const NotificationTextWrapper = styled.div(({ theme }) => ({ width: '100%', diff --git a/code/lib/blocks/src/components/ArgsTable/SectionRow.tsx b/code/lib/blocks/src/components/ArgsTable/SectionRow.tsx index ad3abf0f8f32..a97c362a1df8 100644 --- a/code/lib/blocks/src/components/ArgsTable/SectionRow.tsx +++ b/code/lib/blocks/src/components/ArgsTable/SectionRow.tsx @@ -74,9 +74,9 @@ const Subsection = styled.td(({ theme }) => ({ background: theme.background.app, })); -const StyledTd = styled.td(() => ({ +const StyledTd = styled.td({ position: 'relative', -})); +}); const StyledTr = styled.tr(({ theme }) => ({ '&:hover > td': { @@ -86,7 +86,7 @@ const StyledTr = styled.tr(({ theme }) => ({ }, })); -const ClickIntercept = styled.button(() => ({ +const ClickIntercept = styled.button({ // reset button style background: 'none', border: 'none', @@ -103,7 +103,7 @@ const ClickIntercept = styled.button(() => ({ width: '100%', color: 'transparent', cursor: 'row-resize !important', -})); +}); export const SectionRow: FC = ({ level = 'section',