Limiting Props

App.tsx

// frontendmasters.com/courses/react-typescript/limiting-props/
/* eslint-disable no-restricted-syntax */
/* eslint-disable react/require-default-props */
type ButtonBase = {
  children: string;
};

type PrimaryButtonProps = ButtonBase & {
  primary: boolean;
  secondary?: never;
  destructive?: never;
};
type SecondaryButtonProps = ButtonBase & {
  primary?: never;
  secondary: boolean;
  destructive?: never;
};
type DestructiveButtonProps = ButtonBase & {
  primary?: never;
  secondary?: never;
  destructive: boolean;
};

type ButtonProps =
  | PrimaryButtonProps
  | SecondaryButtonProps
  | DestructiveButtonProps;

const createClassNames = (classes: { [key: string]: boolean }): string => {
  let classNames = '';
  for (const [key, value] of Object.entries(classes)) {
    if (value) classNames += `${key} `;
  }
  return classNames.trim();
};

const Button = ({
  children,
  primary = false,
  secondary = false,
  destructive = false,
}: ButtonProps) => {
  const classNames = createClassNames({ primary, secondary, destructive });

  return (
    <button type="button" className={classNames}>
      {children}
    </button>
  );
};

const Application = () => {
  return (
    <main>
      <Button primary>Primary</Button>
      <Button secondary>Secondary</Button>
      <Button destructive>Destructive</Button>
    </main>
  );
};

export default Application;