Migrate @storybook/addon-events to Typescript

[lonyele]

Issue: #5030

What I did

I migrated addon-events to Typescript.

I wrote some comments where I think more attention is needed

How to test

• Is this testable with Jest or Chromatic screenshots? No
• Does this need a new example in the kitchen sink apps? No
• Does this need an update to the documentation? No

If your answer is yes to any of these, please make sure to include it in your PR.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-lonyele-feature-migrate-addon-events.storybook.now.sh

[lonyele]

Probably I missed something... but putting only ...rest didn't work. I also had to add value, onChange which seems unnecessary.

[wuweiweiwu]

You can also use something like React.HTMLProps<HTMLTextAreaElement>

[lonyele]

Thanks, I'll try that!

[lonyele]

hm... It didn't work for me. Maybe I implemented in a wrong way?

[lonyele]

This one also gives me errors and I couldn't resolve it. Error goes like this

Argument of type '() => { display: string; boxSizing: "border-box"; verticalAlign: string; paddingRight: number; paddingTop: number; textAlign: "right"; width: number; fontWeight: "600"; }' is not assignable to parameter of type 'TemplateStringsArray'.
  Type '() => { display: string; boxSizing: "border-box"; verticalAlign: string; paddingRight: number; paddingTop: number; textAlign: "right"; width: number; fontWeight: "600"; }' is missing the following properties from type 'TemplateStringsArray': raw, concat, join, slice, and 16 more.ts(2345)

Changing code like this also didn't work

const Label = styled.label(() => ({
  display: 'table-cell',
  boxSizing: 'border-box',
  verticalAlign: 'top',
  paddingRight: 5,
  paddingTop: 7,
  textAlign: 'right',
  width: 100,
  fontWeight: '600',
}));

Similar code is already used at other parts

storybook/addons/a11y/src/components/Tabs.tsx

Lines 18 to 24 in 8aae29d

	const HighlightToggleLabel = styled.label(({ theme }) => ({
	cursor: 'pointer',
	userSelect: 'none',
	marginBottom: '3px',
	marginRight: '3px',
	color: theme.color.dark,
	}));

storybook/lib/components/src/form/field/field.tsx

Lines 4 to 13 in 2887028

	const Wrapper = styled.label(({ theme }) => ({
	display: 'flex',
	borderBottom: `1px solid ${theme.appBorderColor}`,
	margin: '0 15px',
	padding: '8px 0',
	'&:last-child': {
	marginBottom: '3rem',
	},
	}));

Here are for more information this, and this

[lonyele]

sorry if there are so many questions!

[ndelangen]

@gaetanmaisse think you could help here?

[ndelangen]

/tmp/storybook/addons/events/src/components/Panel.tsx
  5:1  error  '@storybook/api' should be listed in the project's dependencies. Run 'npm i -S @storybook/api' to add it  import/no-extraneous-dependencies

[lonyele]

@ndelangen oh... how come this happened. I yarn bootstrap --core, yarn dev, yarn start, yarn test and couldn't catch this big mistake? hm...

[shilman]

LGTM!