Add Tinloof's devs to repo contributors after merging the previous repo to this monorepo.

I just copy-pasted the components, but I believe their content is irrelevant. The problem is that the codemod doesn't respect passed options.

Faulty codemod

react-prop-types-typescript doesn't respect the preserver-prop-types (in both VS Code and CLI).

Code before transformation

import { styled } from '@mui/material/styles'
import PropTypes from 'prop-types'

const Root = styled('button', {
  name: 'SegmentedTab',
  shouldForwardProp: (property) => property !== 'isSelected',
  // @ts-expect-error TS(2339): Property 'isSelected' does not exist on type 'MUIS... Remove this comment to see the full error message
})(({ isSelected, theme }) => ({
  '&:hover': {
    // @ts-expect-error TS(2339): Property 'neutral' does not exist on type 'Palette... Remove this comment to see the full error message
    background: theme.palette.neutral[200],
  },
  alignItems: 'center',
  background: 'transparent',
  border: 'none',
  borderRadius: 999,
  color: theme.palette.text.primary,
  cursor: 'pointer',
  display: 'flex',
  flex: 1,
  fontFamily: theme.typography.fontFamily,
  fontSize: 'inherit',
  fontWeight: 'inherit',
  justifyContent: 'center',
  padding: 0,
  textDecoration: 'none',
  ...(isSelected && {
    '&, &:hover': {
      background: 'white',
    },
  }),
}))

export default function SegmentedTab({
  component = 'button',
  isSelected,
  ...other
}: any) {
  const Component = Root.withComponent(component)

  return <Component isSelected={isSelected} {...other} />
}

SegmentedTab.propTypes = {
  /** React component or HTML element name that is used to render tabs. */
  component: PropTypes.elementType,
  /** Marks the tab as a selected. */
  isSelected: PropTypes.bool.isRequired,
}

Expected code after transformation

import { styled } from '@mui/material/styles'

const Root = styled('button', {
  name: 'SegmentedTab',
  shouldForwardProp: (property) => property !== 'isSelected',
  // @ts-expect-error TS(2339): Property 'isSelected' does not exist on type 'MUIS... Remove this comment to see the full error message
})(({ isSelected, theme }) => ({
  '&:hover': {
    // @ts-expect-error TS(2339): Property 'neutral' does not exist on type 'Palette... Remove this comment to see the full error message
    background: theme.palette.neutral[200],
  },
  alignItems: 'center',
  background: 'transparent',
  border: 'none',
  borderRadius: 999,
  color: theme.palette.text.primary,
  cursor: 'pointer',
  display: 'flex',
  flex: 1,
  fontFamily: theme.typography.fontFamily,
  fontSize: 'inherit',
  fontWeight: 'inherit',
  justifyContent: 'center',
  padding: 0,
  textDecoration: 'none',
  ...(isSelected && {
    '&, &:hover': {
      background: 'white',
    },
  }),
}))

interface SegmentedTabProps {
  /** React component or HTML element name that is used to render tabs. */
  component?: React.ElementType;
  /** Marks the tab as a selected. */
  isSelected: boolean;
}

export default function SegmentedTab({
  component = 'button',
  isSelected,
  ...other
}: SegmentedTabProps) {
  const Component = Root.withComponent(component)

  return <Component isSelected={isSelected} {...other} />
}

SegmentedTab.propTypes = {
  /** React component or HTML element name that is used to render tabs. */
  component: PropTypes.elementType,
  /** Marks the tab as a selected. */
  isSelected: PropTypes.bool.isRequired,
}

Actual code after transformation

import { styled } from '@mui/material/styles'

const Root = styled('button', {
  name: 'SegmentedTab',
  shouldForwardProp: (property) => property !== 'isSelected',
  // @ts-expect-error TS(2339): Property 'isSelected' does not exist on type 'MUIS... Remove this comment to see the full error message
})(({ isSelected, theme }) => ({
  '&:hover': {
    // @ts-expect-error TS(2339): Property 'neutral' does not exist on type 'Palette... Remove this comment to see the full error message
    background: theme.palette.neutral[200],
  },
  alignItems: 'center',
  background: 'transparent',
  border: 'none',
  borderRadius: 999,
  color: theme.palette.text.primary,
  cursor: 'pointer',
  display: 'flex',
  flex: 1,
  fontFamily: theme.typography.fontFamily,
  fontSize: 'inherit',
  fontWeight: 'inherit',
  justifyContent: 'center',
  padding: 0,
  textDecoration: 'none',
  ...(isSelected && {
    '&, &:hover': {
      background: 'white',
    },
  }),
}))

interface SegmentedTabProps {
  /** React component or HTML element name that is used to render tabs. */
  component?: React.ElementType;
  /** Marks the tab as a selected. */
  isSelected: boolean;
}

export default function SegmentedTab({
  component = 'button',
  isSelected,
  ...other
}: SegmentedTabProps) {
  const Component = Root.withComponent(component)

  return <Component isSelected={isSelected} {...other} />
}

Estimated severity

It's quite a sever issue to us. We have hundreds of components we want to add types to, preserving prop types. Doing it manually is not an option.

Looks like a trivial issue to fix. The codemod doesn't pick up the preserver-prop-types option, neither from VS Code nor from the console. Feels like a typo to me, but I couldn't find a way to debug it myself.

Environment:

• Codemod CLI version: v0.10.14
• OS: macOS 14.4.1
• Node.js version: v18.19.1

This is to migrate our monorepo's linting and formatting from ESLint & Prettier to Biome.js.

Why:

1. Two in One: Biome comes with 190 lint rules from ESlint, TypeScript ESlint, and other sources with 97% compatibility with Prettier. Biome can be used as a replacement for two.
2. Biome adds new CLI options that enables to format and lint only files that changed (using Git)
3. its rust-based and 10x+ faster than eslint!!!

Biome Impact:

based on local run of biome on our monorepo, it runs the checks 10x faster (from 15.6 seconds down to just 1.6 seconds)

migration plan:

1. Run eslint/biome/migrate-rules codemod and make minor tweaks. (156 files changed
2. run biome to apply the required formatting (609 files changed)
3. fixed the linting issues manually for each part of the platform (cli, vsce, studio, etc.)
4. by now all lintings should work fine, so we enable the linting check for github action.

Codemod Impact:

If we were to manually migrate the Codemod Monorepo alone, we would have to:

• adjust 134 existing package.json files:
  • replace ESLint scripts (1 minute per file);
  • replace ESLint deps (1 minute per file);
• find a corresponding rule for each of the existing ESLint rules (2 minutes per rule);
• replace Prettier configuration (5 minutes)

It would have taken up to a whole day of boring mechanical work to perform the migration manually without performing any additional troubleshooting

Node.js 22 upgrade codemods

Codemod description

Codemods to help automate the Node.js 22 upgrade process according to the release notes here.

Applicability Criteria

Node.js < 22.0.0 -> Node.js >= 22.0.0

Additional context or links

• Release notes blog
• Annoucement

Codemod description

Build a set of codemods for the breaking changed of the new release
you can use one of the following engines:
jscodeshift, ast-grep, ts-morph, filemod (for file transformation)

Applicability Criteria

• Framework/library: react-native
• From: : v0.73.7
• To: v0.74.0

see https://reactnative.dev/blog/2024/04/22/release-0.74#breaking-changes-1
for before after examples.

The issue arises when attempting to authenticate the Codemod extension in Cursor. After successful authentication on the web, the website attempts to redirect using the vscode:// URL scheme. However, the Cursor application does not recognize this URL scheme. A workaround has been found where manually changing the URL scheme to cursor:// allows the redirect to work as expected.

Steps to Replicate

1. Open the Cursor application.
2. Install the Codemod extension within the Cursor application.
3. Click on the 'Sign In' button within the Codemod extension.
4. Authenticate with the required credentials on the web.
5. After successful authentication, the website attempts to redirect using the vscode:// URL scheme.

At this point, the Cursor application fails to recognize the vscode:// URL scheme and thus Codemod cannot sign in.

⚠️⚠️ Please do not include any proprietary code in the issue. ⚠️⚠️

Codemod name

Give an understandable name for the codemod.

Codemod description

Write a short description of the changes that should be made by this codemod.

Examples

Note: The example section helps codemod champions identify all the transformation patterns that this codemod should handle. Repeat before/after snippets for every transformation example you can find.

Code before transformation

//insert your code before transformation here

Code after transformation

//insert the expected **correct** output here

Applicability Criteria

Write the applicable framework/library for this codemod.
A codemod can:

• Migrate from one version to another [ex: React 18 -> React 19]
• Migrate from one framework to another [ex: ESLint -> Biome]
• Clean up or refactor code of the same framework/library version [ex: React 18 -> React 18]

Additional context or links

Add any other context about the problem here. This might include extra considerations, edge cases, relevant business logic, existing migration guides, relevant links, etc.