refactor(checkbox): convert files to typescript (FE-4776)

[grabkowski]

Proposed behaviour

All component files should be refactored and converted to TypeScript.

Current behaviour

Component files are currently javascript.

Checklist

• [x] Commits follow our style guide ~~- [ ] Related issues linked in commit messages if required~~ ~~- [ ] Screenshots are included in the PR if useful~~ ~~- [ ] All themes are supported if required~~
• [x] Unit tests added or updated if required ~~- [ ] Cypress automation tests added or updated if required~~
• [x] Storybook added or updated if required ~~- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required~~
• [x] Typescript d.ts file added or updated if required

QA

• [ ] Tested in CodeSandbox/storybook
• [ ] Add new Cypress test coverage if required
• [ ] Carbon implementation matches Design System/designs
• [ ] UI Tests GitHub check reviewed if required

Additional context

Testing instructions

The following CodeSandbox is an example of the broken behaviour. You can see the new behaviour by looking at the version in the comment by codesandbox[bot].

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8b1ffc4284bc6c02f8877a31f968e63b87e3e538:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration

[cypress[bot]]

---

Test summary

3402 • 0 • 3 • 0 • 1

---

Run details

Project	carbon
Status	Passed
Commit	8b1ffc4284
Started	Oct 19, 2022 11:56 AM
Ended	Oct 19, 2022 12:01 PM
Duration	05:34 💡
OS	Linux Debian - 11.4
Browser	Chrome 106

View run in Cypress Dashboard ➡️

---

Flakiness

	src/components/tabs/tabs.test.js		1
1	Testing Tabs component > should render Tabs component > should verify when tab 3 is hovered over that info message is displayed

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[mkrds]

Looks good but I think it would be best if you'd also move all the stories from .stories.mdx to .stories.tsx

Check my decimal PR https://github.com/Sage/carbon/pull/5517

[Parsium]

I agree with @mkrds's point on refactoring the .mdx stories to typescript if possible - I think we would benefit from being able to catch potential prop bugs in our stories.

[grabkowski]

Hi @grabkowski, recently @robinzigmond and @DipperTheDan noticed chromatic was flagging some new stories in their builds, which eventually lead us to finding out that story parameters included in the MDX file were not being recognised by storybook. I noticed you have also defined the story parameters using the same pattern so I just wanted to make you aware of this.

To fix this, we need to move the the parameters for each exported story into the TSX story file instead (as shown in this storybook recipe).

Would you be able to add these changes too please? I would suggest defining the storyName in the TSX file as well just for consistency.

Good to know, I was not aware of that. Changed and commited.

As for the storyName - In my opinion it's better to leave them in mdx. I think that we should separate the documentation into code (tsx) and visual(mdx), and name is the visual part.

[carbonci]

:tada: This PR is included in version 111.5.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: