Skip to content

Conversation

@mxstbr
Copy link
Contributor

@mxstbr mxstbr commented Jul 1, 2019

Adds TypeScript types to the components, so that any consumer only has to install the package and will automatically get the types. These were extracted from our internal project where I typed all the components we are currently using.

TODO

  • Currently only file-based imports are typed (import Flex from '@primer/components/src/Flex'), we will need to update the types to also type the exports
  • Avatar
  • BaseStyles
  • BorderBox
  • Box
  • BranchName
  • Button
  • CircleBadge
  • CircleOcticon
  • CounterLabel
  • Details
  • Dropdown
  • FilterList
  • Flash
  • Flex
  • Heading
  • Label
  • Link
  • PointerBox
  • Position
  • StateLabel
  • StyledOcticon
  • Text
  • TextInput
  • Tooltip
  • UnderlineNav
  • theme

Closes #389

I think it might be worth having a discussion on whether the package itself should be written in TypeScript, but that would be a much bigger change and this gets us 100% of the way there for all consumers.

Merge checklist

  • Changed base branch to release branch
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@jerrygreen
Copy link

That's a cool thing! I'll subscribe to updates, will be waiting :)

P.S. Thanks for your work

@colebemis
Copy link
Contributor

Really excited about this!

@mxstbr mxstbr mentioned this pull request Jul 3, 2019
@mxstbr mxstbr marked this pull request as ready for review July 3, 2019 09:57
@mxstbr
Copy link
Contributor Author

mxstbr commented Jul 3, 2019

Done, I have now typed all components! 🎉 This is ready for a review 👍


export const UnderlineNav: React.FunctionComponent<UnderlineNavProps>

export const theme: Object
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that the theme should be properly typed, but that would be a lot of effort 😅 I think this is good enough ™️ for a TypeScript MVP, and we can always improve this later.


#### Merge checklist
- [ ] Changed base branch to release branch
- [ ] Add or update TypeScript definitions (`index.d.ts`) if necessary
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this little reminder to ensure the TypeScript definitions stay up to date, even when new components are added or old ones changed—happy to remove that again if you think it's unnecessary

Copy link

@emplums emplums left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great, thanks for adding @mxstbr! I don't think we'll get around to re-writing the library with TS anytime soon but this is a good start 👍

@emplums emplums changed the base branch from master to release-13.2.0 July 17, 2019 19:21
@emplums emplums merged commit 5bacdfd into primer:release-13.2.0 Jul 17, 2019
@colebemis colebemis mentioned this pull request Jul 17, 2019
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants