(hds-2421) Fix newly introduced ts errors

Notification errors only show with ts-check-stories. Caused by incompatible child types. Unknown why ts-check does not show it, or VSCode.
City-of-Helsinki · Sep 11, 2024 · 888020b · 888020b
1 parent 8595956
commit 888020b
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 35 deletions.
diff --git a/packages/react/src/components/dropdown/combobox/Combobox.stories.tsx b/packages/react/src/components/dropdown/combobox/Combobox.stories.tsx
@@ -25,6 +25,9 @@ type DefaultArgs = Pick<
 > & { multiselect: false; onChange: (option: Option | Option[]) => void };
 
 type StoryArgs = DefaultArgs & Partial<ComboboxProps<Option>>;
+// for some reason ComboboxProps<Option> causes ts errors
+type ComponentProps = ComboboxProps<{ label: string }>;
+type MultiSelectComponentProps = ComponentProps & MultiSelectEssentials;
 
 function getId(): string {
  return uniqueId('hds-combobox-');
@@ -82,30 +85,30 @@ export default {
  } as DefaultArgs,
 };
 
-export const Default = (args: StoryArgs) => <Combobox {...args} />;
+export const Default = (args: StoryArgs) => <Combobox {...(args as ComponentProps)} />;
 
-export const WithClearButton = (args: StoryArgs) => <Combobox {...args} />;
+export const WithClearButton = (args: StoryArgs) => <Combobox {...(args as ComponentProps)} />;
 WithClearButton.storyName = 'With clear button';
 WithClearButton.args = {
  clearable: true,
 };
 WithClearButton.parameters = { loki: { skip: true } };
 
-export const Multiselect = (args: StoryArgs) => <Combobox {...args} />;
+export const Multiselect = (args: StoryArgs) => <Combobox {...(args as ComponentProps)} />;
 Multiselect.storyName = 'Multi-select';
 Multiselect.args = {
  multiselect: true,
  options: getRegionOptions(),
  selectedItemRemoveButtonAriaLabel: 'Remove {value}',
 };
 
-export const Invalid = (args: StoryArgs) => <Combobox {...args} />;
+export const Invalid = (args: StoryArgs) => <Combobox {...(args as ComponentProps)} />;
 Invalid.args = {
  invalid: true,
  error: 'Wrong item!',
 };
 
-export const Disabled = (args: StoryArgs) => <Combobox {...args} />;
+export const Disabled = (args: StoryArgs) => <Combobox {...(args as ComponentProps)} />;
 Disabled.args = {
  disabled: true,
 };
@@ -149,8 +152,8 @@ export const Controlled = (args: StoryArgs) => {
  >
  Select all
  </Button>
- <Combobox
- {...(args as unknown as MultiSelectArgsWithLabel)}
+ <Combobox<Option>
+ {...(args as unknown as MultiSelectComponentProps & { 'aria-labelledby': undefined })}
  id={getId()}
  label="Multi-select combobox"
  multiselect
@@ -169,7 +172,7 @@ export const DisabledOptions = (args: StoryArgs) => {
  return (
  <>
  <Combobox {...(args as DefaultArgs)} id={getId()} label="Combobox" isOptionDisabled={getIsDisabled} />
- <Combobox
+ <Combobox<Option>
  {...(args as unknown as MultiSelectArgsWithLabel)}
  id={getId()}
  label="Multi-select combobox"
@@ -183,10 +186,14 @@ export const DisabledOptions = (args: StoryArgs) => {
 };
 DisabledOptions.storyName = 'With disabled options';
 
-export const Icon = (args: ComboboxProps<Option>) => <Combobox {...args} icon={<IconFaceSmile />} />;
+export const Icon = (args: ComboboxProps<Option>) => (
+ <Combobox {...(args as ComponentProps)} icon={<IconFaceSmile />} />
+);
 Icon.storyName = 'With icon';
 
-export const MultiselectWithIcon = (args: ComboboxProps<Option>) => <Combobox {...args} icon={<IconLocation />} />;
+export const MultiselectWithIcon = (args: ComboboxProps<Option>) => (
+ <Combobox {...(args as ComponentProps)} icon={<IconLocation />} />
+);
 MultiselectWithIcon.storyName = 'Multi-select with icon';
 MultiselectWithIcon.args = {
  multiselect: true,
@@ -196,7 +203,7 @@ MultiselectWithIcon.args = {
 
 MultiselectWithIcon.parameters = { loki: { skip: true } };
 
-export const Tooltip = (args: ComboboxProps<Option>) => <Combobox {...args} />;
+export const Tooltip = (args: ComboboxProps<Option>) => <Combobox {...(args as ComponentProps)} />;
 Tooltip.storyName = 'With tooltip';
 Tooltip.args = {
  tooltipLabel: 'Tooltip',
@@ -206,7 +213,7 @@ Tooltip.args = {
 };
 
 export const CustomTheme = (args: StoryArgs) => (
- <Combobox
+ <Combobox<Option>
  {...(args as unknown as MultiSelectArgsWithLabel)}
  multiselect
  selectedItemRemoveButtonAriaLabel="Remove {value}"
@@ -256,7 +263,7 @@ CustomTheme.args = {
 export const ComboboxExample = (args: ComboboxProps<Option>) => {
  return (
  <Combobox
- {...args}
+ {...(args as ComponentProps)}
  placeholder="Type to search"
  getA11ySelectionMessage={({ selectedItem }) => {
  return selectedItem ? `${selectedItem.label} selected` : '';
@@ -268,8 +275,8 @@ ComboboxExample.storyName = 'Combobox example';
 
 export const MultiSelectExample = (args: MultiSelectArgsWithLabel) => {
  return (
- <Combobox
- {...args}
+ <Combobox<Option>
+ {...(args as unknown as MultiSelectComponentProps & { 'aria-labelledby': undefined })}
  label="Items"
  helper="Choose items"
  placeholder="Type to search"

diff --git a/packages/react/src/components/dropdown/select/Select.stories.tsx b/packages/react/src/components/dropdown/select/Select.stories.tsx
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { uniqueId } from 'lodash';
 
 import { Button } from '../../button';
-import { MultiSelectProps, Select } from './Select';
+import { MultiSelectProps, Select, SelectProps } from './Select';
 import { IconFaceSmile, IconLocation } from '../../../icons';
 import { ComboboxProps } from '../combobox/Combobox';
 
@@ -25,6 +25,10 @@ type DefaultArgs = Pick<
 > & { multiselect: false; onChange: (option: Option | Option[]) => void };
 
 type StoryArgs = DefaultArgs & Partial<ComboboxProps<Option>>;
+// for some reason SelectProps<Option> causes ts errors
+type ComponentProps = SelectProps<{ label: string }>;
+type SelectComponentProps = ComponentProps;
+type MultiSelectComponentProps = ComponentProps & MultiSelectEssentials;
 
 function getId(): string {
  return uniqueId('hds-select-');
@@ -70,29 +74,29 @@ export default {
  },
 };
 
-export const Default = (args: StoryArgs) => <Select {...args} />;
+export const Default = (args: StoryArgs) => <Select {...(args as SelectComponentProps)} />;
 
-export const WithClearButton = (args: StoryArgs) => <Select {...args} />;
+export const WithClearButton = (args: StoryArgs) => <Select {...(args as SelectComponentProps)} />;
 WithClearButton.storyName = 'With clear button';
 WithClearButton.args = {
  clearable: true,
 };
 WithClearButton.parameters = { loki: { skip: true } };
 
-export const Multiselect = (args: StoryArgs) => <Select {...args} />;
+export const Multiselect = (args: StoryArgs) => <Select {...(args as SelectComponentProps)} />;
 Multiselect.storyName = 'Multi-select';
 Multiselect.args = {
  multiselect: true,
  selectedItemRemoveButtonAriaLabel: 'Remove {value}',
 };
 
-export const Invalid = (args: StoryArgs) => <Select {...args} />;
+export const Invalid = (args: StoryArgs) => <Select {...(args as SelectComponentProps)} />;
 Invalid.args = {
  invalid: true,
  error: 'Wrong item!',
 };
 
-export const Disabled = (args: StoryArgs) => <Select {...args} />;
+export const Disabled = (args: StoryArgs) => <Select {...(args as SelectComponentProps)} />;
 Disabled.args = {
  disabled: true,
 };
@@ -135,7 +139,7 @@ export const Controlled = (args: StoryArgs) => {
  >
  Select all
  </Button>
- <Select
+ <Select<Option>
  {...(args as unknown as MultiSelectArgsWithLabel)}
  id={getId()}
  label="Multi-select"
@@ -169,18 +173,20 @@ export const DisabledOptions = (args: StoryArgs) => {
 };
 DisabledOptions.storyName = 'With disabled options';
 
-export const Icon = (args: StoryArgs) => <Select {...args} icon={<IconFaceSmile />} />;
+export const Icon = (args: StoryArgs) => <Select {...(args as SelectComponentProps)} icon={<IconFaceSmile />} />;
 Icon.storyName = 'With icon';
 
-export const MultiselectWithIcon = (args: StoryArgs) => <Select {...args} icon={<IconLocation />} />;
+export const MultiselectWithIcon = (args: StoryArgs) => (
+ <Select {...(args as SelectComponentProps)} icon={<IconLocation />} />
+);
 MultiselectWithIcon.storyName = 'Multi-select with icon';
 MultiselectWithIcon.args = {
  multiselect: true,
  selectedItemRemoveButtonAriaLabel: 'Remove {value}',
 };
 MultiselectWithIcon.parameters = { loki: { skip: true } };
 
-export const Tooltip = (args: StoryArgs) => <Select {...args} />;
+export const Tooltip = (args: StoryArgs) => <Select {...(args as SelectComponentProps)} />;
 Tooltip.storyName = 'With tooltip';
 Tooltip.args = {
  tooltipLabel: 'Tooltip',
@@ -190,7 +196,7 @@ Tooltip.args = {
 };
 
 export const CustomTheme = (args: StoryArgs) => (
- <Select {...(args as unknown as MultiSelectArgsWithLabel)} multiselect />
+ <Select<Option> {...(args as unknown as MultiSelectArgsWithLabel)} multiselect />
 );
 CustomTheme.storyName = 'With custom theme';
 CustomTheme.args = {
@@ -236,7 +242,7 @@ CustomTheme.args = {
 export const SelectExample = (args: StoryArgs) => {
  return (
  <Select<Option>
- {...args}
+ {...(args as SelectComponentProps)}
  getA11ySelectionMessage={({ selectedItem }) => {
  return selectedItem ? `${selectedItem.label} selected` : '';
  }}
@@ -255,7 +261,7 @@ export const MultiSelectExample = ({ options: itemOptions, ...args }) => {
 
  return (
  <Select<Option>
- {...args}
+ {...(args as unknown as MultiSelectComponentProps & { 'aria-labelledby': undefined })}
  label="Items"
  helper="Choose items"
  multiselect

diff --git a/packages/react/src/components/dropdown/select/Select.test.tsx b/packages/react/src/components/dropdown/select/Select.test.tsx
@@ -20,7 +20,7 @@ const defaultProps: SelectProps<{ label: string; value: string }> = {
  selectedItemSrLabel: 'Selected item {value}',
 };
 
-const getWrapper = (props?: unknown) => render(<Select {...defaultProps} {...props} />);
+const getWrapper = (props?: Record<string, unknown>) => render(<Select {...defaultProps} {...props} />);
 
 describe('<Select /> spec', () => {
  it('renders the component', () => {

diff --git a/packages/react/src/components/hero/Hero.stories.tsx b/packages/react/src/components/hero/Hero.stories.tsx
@@ -526,7 +526,7 @@ export const PlaygroundForTheme = (args: HeroProps & Record<string, string>) =>
  '--information-color': args.informationColor,
  ...args.theme,
  };
-
+ // @ts-ignore is for Object.fromEntries
  const theme = Object.fromEntries(Object.entries(argsAsTheme).filter(([, value]) => !!value));
  const heroProps: HeroProps = {
  koros: args.koros,

diff --git a/packages/react/src/components/loadingSpinner/LoadingSpinner.stories.tsx b/packages/react/src/components/loadingSpinner/LoadingSpinner.stories.tsx
@@ -41,17 +41,17 @@ export const MultipleSpinners = (args: LoadingSpinnerProps) => {
  <>
  <div style={{ marginBottom: 'var(--spacing-s)' }}>
  <Button onClick={() => setShowSpinner1(!showSpinner1)}>
- {showSpinner1 ? 'Remove' : 'Add'} loading spinner #1
+ {`${showSpinner1 ? 'Remove' : 'Add'} loading spinner #1`}
  </Button>
  </div>
  <div style={{ marginBottom: 'var(--spacing-s)' }}>
  <Button onClick={() => setShowSpinner2(!showSpinner2)}>
- {showSpinner2 ? 'Remove' : 'Add'} loading spinner #2
+ {`${showSpinner2 ? 'Remove' : 'Add'} loading spinner #2`}
  </Button>
  </div>
  <div style={{ marginBottom: 'var(--spacing-s)' }}>
  <Button onClick={() => setShowSpinner3(!showSpinner3)}>
- {showSpinner3 ? 'Remove' : 'Add'} loading spinner #3
+ {`${showSpinner3 ? 'Remove' : 'Add'} loading spinner #3`}
  </Button>
  </div>
  {showSpinner1 && <LoadingSpinner {...args} />}

diff --git a/packages/react/src/components/login/Login.stories.tsx b/packages/react/src/components/login/Login.stories.tsx
@@ -633,7 +633,7 @@ export const ExampleApplication = (args: StoryArgs) => {
  <strong>{isUsingKeycloak ? 'Helsinki Profile' : 'Tunnistamo'}</strong>.
  </p>
  <LoginButton errorText="Login failed. Try again!" loggingInText="Logging in">
- Log in{' '}
+ Log in
  </LoginButton>
  </ContentAligner>
  </Wrapper>

diff --git a/packages/react/src/components/notification/Notification.tsx b/packages/react/src/components/notification/Notification.tsx
@@ -261,7 +261,8 @@ export const Notification = React.forwardRef<HTMLDivElement, NotificationProps>(
  return (
  <ConditionalVisuallyHidden visuallyHidden={invisible}>
  <animated.section
- {...rest}
+ // this "as" fixes ts error with wrong types. Seen only when running ts-check-stories.
+ {...(rest as Record<string, unknown>)}
  // there is an issue with react-spring -rc3 and a new version of @types/react: https://github.com/react-spring/react-spring/issues/1102
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  style={{ ...notificationTransition, ...(style as any) }}