ts-migrate VS storybook

Update tsconfig. Replace the content of tsconfig.json with the values from tsconfig.base.json.

Airbnb converted many millions of lines gradually using automation and wrote about it:

https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-...

And also open sourced the tooling:

https://github.com/airbnb/ts-migrate

Are you migrating with ts-migrate?

When you migrate your entire project over to TypeScript, errors like "undefined is not a function", syntax errors, or reference errors should no longer exist in your codebase. Thankfully, this is not as daunting as it sounds. Migrating your entire Node.js application to TypeScript can be done incrementally so that you can start reaping the rewards immediately in crucial parts of the codebase. You can also adopt a tool like ts-migrate if you intend to perform the migration in one go.

Flow to ts — helps to produce raw migration from Flow to TS files and reduces monkey job. TS migrate — helps convert JS files to Typescript files. A great introduction can be found here.

💡 I typed it using ts-migrate ts-migrate is a tool I strongly recommend. It's been developed by Airbnb to help to migrate easily JavaScript projects to TypeScript.

When you decide to migrate, I recommend checking https://github.com/airbnb/ts-migrate may speed few migration steps (but it wont solve missing types/interfaces)

You can use AirBnb's ts-migrate tool or try a more direct tactic following the Migrating from JavaScript guide.

Take a look at https://github.com/airbnb/ts-migrate

📚 4. Use Storybook (Seriously) If you’re not using Storybook for UI development, now is the time. It isolates your components from the app, which means:

Further Reading Design Systems Repo: https://designsystemsrepo.com/ Tailwind UI: https://designsystemsrepo.com/ Storybook.js: https://designsystemsrepo.com/

Storybook for UI Development

In this tutorial, you'll learn how to build a monorepo using Lerna. We’ll be building a Next.js application which will import components from a separate package. We’ll also be using Storybook to showcase those components.

Dumi. A static site generator specifically designed for component library development. Look at it as something between Storybook and Docusaurus inside the Umi world (but much better integrated between each other, presumably).

import type { Meta, StoryObj } from '@storybook/react'; import { fn } from '@storybook/test'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { title: 'Example/Button', component: Button, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout layout: 'centered', }, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/api/argtypes argTypes: { backgroundColor: { control: 'color' }, }, // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, } satisfies Meta; export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Primary: Story = { args: { primary: true, label: 'Button', }, };

Storybook is an open-source tool for building and testing UI components in isolation. Think of it as a dedicated workshop where you can create, preview, and document components in every possible state without spinning up the full application.

9. Storybook

GitHub Repo: https://github.com/storybookjs/storybook