Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(types): add correct types for react 19 codemod changes #4266

Merged
merged 2 commits into from
Mar 10, 2025
+153 −129
Merged

fix(types): add correct types for react 19 codemod changes #4266

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7be0897
fix(types): add correct types for react 19 codemod changes
krisantrobus Mar 7, 2025
f08ee40
feat(progress-bar): add interval type
PixeledCode Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/paste-core/components/ai-chat-log/src/useAIChatLogger.tsx
View file
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import type { AIMessageVariants } from "./AIMessageContext";
export type AIChat = {
id: string;
variant: AIMessageVariants;
content: React.ReactElement<any>;
content: React.ReactElement<HTMLElement>;
};

export type AIPartialIDChat = Omit<AIChat, "id"> & Partial<Pick<AIChat, "id">>;
2 changes: 1 addition & 1 deletion packages/paste-core/components/alert/src/Alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -112,7 +112,7 @@ export interface AlertProps extends HTMLPasteProps<"div"> {
element?: BoxProps["element"];
}

const renderAlertIcon = (variant: AlertVariants, element: string, title: string): React.ReactElement<any> => {
const renderAlertIcon = (variant: AlertVariants, element: string, title: string): React.ReactElement<HTMLElement> => {
switch (variant) {
case AlertVariants.ERROR:
return (
4 changes: 2 additions & 2 deletions packages/paste-core/components/badge/stories/customization.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import * as React from "react";
import { Badge } from "../src";
import type { BadgeVariants } from "../src/constants";

export const makeBadge = (variant: typeof BadgeVariants[number], element?: string): React.ReactElement<any> => (
export const makeBadge = (variant: typeof BadgeVariants[number], element?: string): React.ReactElement<HTMLElement> => (
<Badge as="span" element={element} variant={variant} data-testid={`${variant}_badge`}>
HelloWorld
</Badge>
@@ -39,7 +39,7 @@ export const getStyles = (element = "BADGE"): { [key: string]: PasteCustomCSS }

const CustomizationWrapper: React.FC<
React.PropsWithChildren<{ variant: typeof BadgeVariants[number]; isTestEnvironment: boolean }>
> = ({ variant, isTestEnvironment }): React.ReactElement<any> => {
> = ({ variant, isTestEnvironment }): React.ReactElement<HTMLElement> => {
const theme = useTheme();
const customElement = "FOO";
return (
2 changes: 1 addition & 1 deletion packages/paste-core/components/breadcrumb/src/Breadcrumb.tsx
View file
Original file line number Diff line number Diff line change
@@ -126,7 +126,7 @@ const Breadcrumb = React.forwardRef<HTMLDivElement, BreadcrumbProps>(
() => [
React.Children.count(children),
React.Children.toArray(children).filter(
(child): child is React.ReactElement<any> => React.isValidElement(child) || typeof child === "string",
(child): child is React.ReactElement<HTMLElement> => React.isValidElement(child) || typeof child === "string",
),
],
[children],
2 changes: 1 addition & 1 deletion packages/paste-core/components/button-group/src/ButtonGroup.tsx
View file
Original file line number Diff line number Diff line change
@@ -71,7 +71,7 @@ export interface ButtonGroupProps extends HTMLPasteProps<"div"> {
* @memberof ButtonGroupProps
*/
justifyContent?: JustifyOptions;
children: React.ReactElement<any>[];
children: React.ReactNode;
}

export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
2 changes: 1 addition & 1 deletion packages/paste-core/components/callout/src/Callout.tsx
View file
Original file line number Diff line number Diff line change
@@ -90,7 +90,7 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
},
};

const variantIcons: Record<CalloutVariants, React.ReactElement<any>> = {
const variantIcons: Record<CalloutVariants, React.ReactElement<HTMLElement>> = {
success: <SuccessIcon decorative color="colorTextIconSuccess" />,
error: <ErrorIcon decorative color="colorTextIconError" />,
warning: <WarningIcon decorative color="colorTextIconWarning" />,
2 changes: 1 addition & 1 deletion packages/paste-core/components/chat-log/src/useChatLogger.ts
View file
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ type PopChat = (id?: string) => void;
export type Chat = {
id: string;
variant?: MessageVariants;
content: React.ReactElement<any>;
content: React.ReactElement<HTMLElement>;
};

export type PartialIDChat = Omit<Chat, "id"> & Partial<Pick<Chat, "id">>;
2 changes: 1 addition & 1 deletion packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ const initCustomizationWrapper = (elementName?: string | undefined): RenderOptio
);
};

const ComboboxToTest = ({ element = "COMBOBOX" }): React.ReactElement<any> => (
const ComboboxToTest = ({ element = "COMBOBOX" }): React.ReactElement<HTMLElement> => (
<Combobox
items={[
{ letter: "a", number: 1 },
2 changes: 1 addition & 1 deletion ...ages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ const items = [
{ letter: "b", number: 3 },
];

const MultiselectComboboxToTest = ({ element = "MULTISELECT_COMBOBOX" }): React.ReactElement<any> => (
const MultiselectComboboxToTest = ({ element = "MULTISELECT_COMBOBOX" }): React.ReactElement<HTMLElement> => (
<MultiselectCombobox
items={items}
initialSelectedItems={[items[0], items[2]]}
4 changes: 2 additions & 2 deletions packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ const groupedItems = [
const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: boolean }>> = ({
isTestEnvironment,
children,
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
const currentTheme = useTheme();
return (
<Stack orientation="vertical" spacing="space50">
@@ -77,7 +77,7 @@ const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: b
FOO_SUFFIX: { backgroundColor: "colorBackgroundSubaccount", borderRadius: "borderRadiusCircle" },
}}
>
{React.cloneElement(children as React.ReactElement<any>, { element: "FOO" })}
{React.cloneElement(children as React.ReactElement<HTMLElement>, { element: "FOO" })}
</CustomizationProvider>
</Card>
</Stack>
4 changes: 2 additions & 2 deletions ...ages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@ const initialSelectedGroupedItems = [groupedItems[0], groupedItems[1], groupedIt
const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: boolean }>> = ({
isTestEnvironment,
children,
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
const currentTheme = useTheme();
return (
<Stack orientation="vertical" spacing="space50">
@@ -89,7 +89,7 @@ const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: b
FOO_SUFFIX: { backgroundColor: "colorBackgroundSubaccount", borderRadius: "borderRadiusCircle" },
}}
>
{React.cloneElement(children as React.ReactElement<any>, { element: "FOO" })}
{React.cloneElement(children as React.ReactElement<HTMLElement>, { element: "FOO" })}
</CustomizationProvider>
</Card>
</Stack>
2 changes: 1 addition & 1 deletion packages/paste-core/components/file-picker/src/FilePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ export interface FilePickerProps extends HTMLPasteProps<"input"> {
* @memberof FilePickerProps
*/
accept?: string;
children: React.ReactElement<any>;
children: React.ReactElement<HTMLElement>;
/**
* Overrides the default element name to apply unique styles with the Customization Provider
*
12 changes: 6 additions & 6 deletions packages/paste-core/components/keyboard-key/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ export default {
component: KeyboardKey,
};

export const Default = (): React.ReactElement<any> => {
export const Default = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
@@ -52,7 +52,7 @@ export const Default = (): React.ReactElement<any> => {
);
};

export const Inverse = (): React.ReactElement<any> => {
export const Inverse = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
@@ -88,7 +88,7 @@ export const Inverse = (): React.ReactElement<any> => {
);
};

export const ForcePressed = (): React.ReactElement<any> => {
export const ForcePressed = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
@@ -114,7 +114,7 @@ export const ForcePressed = (): React.ReactElement<any> => {
);
};

export const MultipleCombinations = (): React.ReactElement<any> => {
export const MultipleCombinations = (): React.ReactElement<HTMLElement> => {
const [textToDisplay, setTextToDisplay] = React.useState<string>("");

const stateCtrB = useKeyCombination({
@@ -184,7 +184,7 @@ export const MultipleCombinations = (): React.ReactElement<any> => {
);
};

export const TriggerModal = (): React.ReactElement<any> => {
export const TriggerModal = (): React.ReactElement<HTMLElement> => {
const [isOpen, setIsOpen] = React.useState(false);
const state = useKeyCombination({
keys: ["Control", "k"],
@@ -229,7 +229,7 @@ export const TriggerModal = (): React.ReactElement<any> => {
);
};

export const Customization = (): React.ReactElement<any> => {
export const Customization = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
22 changes: 11 additions & 11 deletions packages/paste-core/components/meter/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ export default {
component: Meter,
};

export const Default = (): React.ReactElement<any> => {
export const Default = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
@@ -25,7 +25,7 @@ export const Default = (): React.ReactElement<any> => {
);
};

export const Full = (): React.ReactElement<any> => {
export const Full = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
@@ -37,7 +37,7 @@ export const Full = (): React.ReactElement<any> => {
);
};

export const Empty = (): React.ReactElement<any> => {
export const Empty = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
@@ -49,7 +49,7 @@ export const Empty = (): React.ReactElement<any> => {
);
};

export const MinMax = (): React.ReactElement<any> => {
export const MinMax = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size40">
@@ -61,7 +61,7 @@ export const MinMax = (): React.ReactElement<any> => {
);
};

export const MinOnly = (): React.ReactElement<any> => {
export const MinOnly = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
@@ -73,7 +73,7 @@ export const MinOnly = (): React.ReactElement<any> => {
);
};

export const MaxOnly = (): React.ReactElement<any> => {
export const MaxOnly = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
@@ -85,7 +85,7 @@ export const MaxOnly = (): React.ReactElement<any> => {
);
};

export const AriaLabel = (): React.ReactElement<any> => {
export const AriaLabel = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size30">
@@ -94,7 +94,7 @@ export const AriaLabel = (): React.ReactElement<any> => {
);
};

export const CustomLabel = (): React.ReactElement<any> => {
export const CustomLabel = (): React.ReactElement<HTMLElement> => {
const labelId = useUID();
const meterId = useUID();
return (
@@ -105,7 +105,7 @@ export const CustomLabel = (): React.ReactElement<any> => {
);
};

export const WithHelpText = (): React.ReactElement<any> => {
export const WithHelpText = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
const helpTextId = useUID();
return (
@@ -127,7 +127,7 @@ export const WithHelpText = (): React.ReactElement<any> => {
);
};

export const Wrapped = (): React.ReactElement<any> => {
export const Wrapped = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
const helpTextId = useUID();
return (
@@ -149,7 +149,7 @@ export const Wrapped = (): React.ReactElement<any> => {
);
};

export const Customized = (): React.ReactElement<any> => {
export const Customized = (): React.ReactElement<HTMLElement> => {
const theme = useTheme();
const meterOneId = useUID();
const meterTwoId = useUID();
14 changes: 7 additions & 7 deletions packages/paste-core/components/page-header/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -43,7 +43,7 @@ export default {
component: PageHeader,
};

export const Default = (): React.ReactElement<any> => {
export const Default = (): React.ReactElement<HTMLElement> => {
return (
<PageHeader size="default">
<PageHeaderSetting>
@@ -86,7 +86,7 @@ export const Default = (): React.ReactElement<any> => {
);
};

export const SeparatorVersusNav = (): React.ReactElement<any> => {
export const SeparatorVersusNav = (): React.ReactElement<HTMLElement> => {
return (
<Box display="flex" columnGap="space200">
<Box width="size70" backgroundColor="colorBackground" height="min-content">
@@ -161,7 +161,7 @@ export const SeparatorVersusNav = (): React.ReactElement<any> => {
);
};

export const Compact = (): React.ReactElement<any> => {
export const Compact = (): React.ReactElement<HTMLElement> => {
return (
<Box maxWidth="size50">
<PageHeader size="compact">
@@ -204,7 +204,7 @@ export const Compact = (): React.ReactElement<any> => {
);
};

export const Wizard = (): React.ReactElement<any> => {
export const Wizard = (): React.ReactElement<HTMLElement> => {
return (
<Box maxWidth="size70">
<PageHeader>
@@ -238,7 +238,7 @@ export const Wizard = (): React.ReactElement<any> => {
);
};

export const Wrapped = (): React.ReactElement<any> => {
export const Wrapped = (): React.ReactElement<HTMLElement> => {
return (
<PageHeader size="default">
<PageHeaderSetting>
@@ -296,7 +296,7 @@ export const Wrapped = (): React.ReactElement<any> => {
);
};

export const TwilioExamples = (): React.ReactElement<any> => {
export const TwilioExamples = (): React.ReactElement<HTMLElement> => {
return (
<Box display="flex" flexDirection="column" rowGap="space150" maxWidth="size70">
<PageHeader>
@@ -381,7 +381,7 @@ export const TwilioExamples = (): React.ReactElement<any> => {
);
};

export const Customized = (): React.ReactElement<any> => {
export const Customized = (): React.ReactElement<HTMLElement> => {
const theme = useTheme();
return (
<CustomizationProvider
5 changes: 2 additions & 3 deletions packages/paste-core/components/progress-bar/stories/customization.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import { Button } from "@twilio-paste/button";
import { CustomizationProvider } from "@twilio-paste/customization";
import { Form, FormControl } from "@twilio-paste/form";
import { HelpText } from "@twilio-paste/help-text";
import { Label } from "@twilio-paste/label";
import { useUID } from "@twilio-paste/uid-library";
import * as React from "react";

@@ -18,7 +17,7 @@ const NumberFormatter = new Intl.NumberFormat("en-US");

export const CustomizationWrapper: React.FC<React.PropsWithChildren<{ isTestEnvironment: boolean }>> = ({
isTestEnvironment,
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
const progressBarId = useUID();
const customProgressBarId = useUID();
const helpTextId = useUID();
@@ -27,7 +26,7 @@ export const CustomizationWrapper: React.FC<React.PropsWithChildren<{ isTestEnvi

// Randomly updates the value of the progress bar to simulate a real progress bar
React.useEffect(() => {
let interval;
let interval: NodeJS.Timeout;
if (rerun) {
interval = setInterval(() => {
setValue((previousValue) => {
2 changes: 1 addition & 1 deletion packages/paste-core/components/progress-bar/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ export const Default = (): React.ReactNode => {

// Randomly updates the value of the progress bar to simulate a real progress bar
React.useEffect(() => {
let interval;
let interval: NodeJS.Timeout;
if (rerun) {
interval = setInterval(() => {
setValue((previousValue) => {
2 changes: 1 addition & 1 deletion packages/paste-core/components/select/__tests__/option.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ interface ExampleOptionProps extends OptionProps {
const ExampleOption: React.FC<React.PropsWithChildren<ExampleOptionProps>> = ({
suffix = "test",
...props
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
return (
<Option data-testid={`option-${suffix}`} {...props}>
Option 1
Loading

Unchanged files with check annotations Beta

View file
packages/paste-codemods/tools/__tests__/tools.spec.ts
const mockMapping = await generatePackageExportsMap(mockGetPastePackages);
expect(mockMapping).toEqual({
BOX_PROPS_TO_BLOCK: "@twilio-paste/core/box",

Check warning on line 37 in packages/paste-codemods/tools/__tests__/tools.spec.ts

GitHub Actions / Lint repository 

Define a constant instead of duplicating this literal 4 times
Box: "@twilio-paste/core/box",
ComboboxPrimitive: "@twilio-paste/core/combobox-primitive",

Check warning on line 39 in packages/paste-codemods/tools/__tests__/tools.spec.ts

GitHub Actions / Lint repository 

Define a constant instead of duplicating this literal 3 times
DisclosurePrimitive: "@twilio-paste/core/disclosure-primitive",

Check warning on line 40 in packages/paste-codemods/tools/__tests__/tools.spec.ts

GitHub Actions / Lint repository 

Define a constant instead of duplicating this literal 3 times
DisclosurePrimitiveContent: "@twilio-paste/core/disclosure-primitive",
Stack: "@twilio-paste/core/stack",
getCustomElementStyles: "@twilio-paste/core/box",
View file
packages/paste-codemods/tools/create-package-mappings.ts
const mapping = await generatePackageExportsMap();
// Write to disk
writeToFile(path.join(__dirname, ".cache/mappings.json"), mapping, {

Check warning on line 10 in packages/paste-codemods/tools/create-package-mappings.ts

GitHub Actions / Lint repository 

Do not use "__dirname"
successMessage: "Wrote core packages export mapping to .cache/mappings.json file!",
errorMessage: "Could not generate mappings!",
formatJson: true,
View file
packages/paste-codemods/tools/generatePackageExportsMap.ts
let packageExports = {};
try {
// eslint-disable-next-line global-require, import/no-dynamic-require
packageExports = require(name);

Check warning on line 26 in packages/paste-codemods/tools/generatePackageExportsMap.ts

GitHub Actions / Lint repository 

A `require()` style import is forbidden

Check warning on line 26 in packages/paste-codemods/tools/generatePackageExportsMap.ts

GitHub Actions / Lint repository 

Do not use "require"
} catch (error) {
// eslint-disable-next-line no-console
console.log(`Failed to dynamically require package: ${name}`, error);
View file
packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx
const { defineTest } = require("jscodeshift/dist/testUtils");

Check warning on line 1 in packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx

GitHub Actions / Lint repository 

A `require()` style import is forbidden

Check warning on line 1 in packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx

GitHub Actions / Lint repository 

Do not use "require"
defineTest(__dirname, "barreled-to-unbarreled", null, "barreled-to-unbarreled", { parser: "ts" });

Check warning on line 3 in packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx

GitHub Actions / Lint repository 

Do not use "__dirname"
View file
packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts
convertRawTokenJSONToArray({
"color-text-weak": {
type: "color",
category: "text-color",

Check warning on line 20 in packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts

GitHub Actions / Lint repository 

Define a constant instead of duplicating this literal 7 times
value: "#aeb2c1",
comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
originalValue: "{!palette-gray-40}",