Proposing Migration to TypeScript for Improved Development Experience

[2bfe26]

I would like to open a discussion regarding the migration of the project to TypeScript. As we continue to evolve and improve our codebase, I believe that adopting TypeScript will bring numerous benefits to our development process.

• TypeScript eliminates the need for separate type definition files, which can be inconvenient and error-prone to manage.
• Another benefit of migrating to TypeScript is that we can remove older libraries such as Babel and PropTypes, and rely solely on TypeScript for type checking and prop validation.
• TypeScript allows us to configure various options, such as "implicit returns," which can make typescript almost equal to pure javascript

Here I refactor the Alert component to show how it will be like

import { useState, PropsWithChildren } from 'react';
import { Button } from '../Button';
import { Icon } from '../Icon';
import { Theme, theme as defaultTheme } from '../../theme';
import * as Styles from './Button.styles';

export type PropsAlert = PropsWithChildren<{
  icon?: string;
  onClose?: () => void;
  skin: 'primary' | 'success' | 'error' | 'neutral' | 'warning';
  theme: QuantumTheme;
}>

export function Alert(props: PropsAlert) {
  const { children, onClose, icon, skin = 'neutral', theme = defaultTheme, ...restProps } = props;

  const [show, setShow] = useState(true);

  if(!show) {
    return null;
  }

  return (
    <Styles.Wrapper theme={theme}>
      {icon ? <Styles.Icon name={icon} /> : null}
      {children ?? null}
      {onClose ?? (
        <Styles.ButtonClose
          theme={theme}
          onClick={() => {
            setShow(false);
            onClose();
          }}
        />
      )}
    </Styles.Wrapper>
  )
}

Some points of atention here:

• Using a separate module for styles will help with readability
• Props should be exported as well, it can be useful for other components
• The default props should be done with the deconstruction of the props object
• Named exports are preferable over default exports
  • index.ts modules can export everything from a other module with export * from "./other-module
  • Prevent name duplication