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

Jump to bottom

build: add React18 Support #2682

Merged
merged 10 commits into from
Nov 30, 2022
Merged

build: add React18 Support #2682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
41a30b0
build: add React18 Support
andreasonny83 Sep 20, 2022
2f0891a
refactor: add PropsWithChildren pros
andreasonny83 Sep 20, 2022
711529d
chore: update React version on missing packages
andreasonny83 Sep 21, 2022
4012bd2
fix: added newer proptypes types (react 18) (#3)
espipj Sep 22, 2022
1a8c5d6
refactor(yarn.lock): update yarn.lock file
andreasonny83 Sep 23, 2022
4e9396f
chore: update eslint and React versions
andreasonny83 Sep 23, 2022
84f307c
chore: fixing eslint issues
andreasonny83 Sep 23, 2022
cff665e
WIP: Fix react fc typings (#5)
espipj Sep 27, 2022
c27d8d6
fix(components): radio and button-group React18 fix
andreasonny83 Oct 27, 2022
a9bb6de
fix: update React app tests
andreasonny83 Oct 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
8 changes: 4 additions & 4 deletions .danger/__fixtures__/mock_package/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@
"@twilio-paste/design-tokens": "^8.0.0",
"@twilio-paste/styling-library": "^1.0.0",
"@twilio-paste/types": "^3.1.1",
"react": "^16.8.6 || ^17.0.2",
"react-dom": "^16.8.6 || ^17.0.2"
"react": "^16.8.6 || ^17.0.2 || ^18.0.0",
"react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
},
"devDependencies": {
"@twilio-paste/animation-library": "^0.3.7",
"@twilio-paste/color-contrast-utils": "^3.0.0",
"@twilio-paste/design-tokens": "^8.0.0",
"@twilio-paste/styling-library": "^1.0.2",
"@twilio-paste/types": "^3.1.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-helmet": "^6.1.0"
}
}
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ module.exports = {
],
settings: {
react: {
version: '17.0.2',
version: 'detect',
},
},
};
2 changes: 1 addition & 1 deletion .github/workflows/on_pull_request.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ jobs:
run: yarn lint

tests:
name: Test repository using React 17
name: Test repository using React 18
needs: build
runs-on: ubuntu-latest
steps:
Expand Down
37 changes: 19 additions & 18 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,32 +122,33 @@
"@netlify/functions": "^0.7.2",
"@percy/cli": "^1.10.1",
"@percy/cypress": "^3.1.2",
"@storybook/addon-a11y": "6.4.20",
"@storybook/addon-actions": "6.4.20",
"@storybook/addon-essentials": "6.4.20",
"@storybook/addon-interactions": "6.4.20",
"@storybook/addon-links": "6.4.20",
"@storybook/addon-viewport": "6.4.20",
"@storybook/addons": "6.4.20",
"@storybook/builder-webpack5": "6.4.20",
"@storybook/core": "6.4.20",
"@storybook/addon-a11y": "^6.5.12",
"@storybook/addon-actions": "^6.5.12",
"@storybook/addon-essentials": "^6.5.12",
"@storybook/addon-interactions": "^6.5.12",
"@storybook/addon-links": "^6.5.12",
"@storybook/addon-viewport": "^6.5.12",
"@storybook/addons": "^6.5.12",
"@storybook/builder-webpack5": "^6.5.12",
"@storybook/core": "^6.5.12",
"@storybook/jest": "0.0.10",
"@storybook/manager-webpack5": "6.4.20",
"@storybook/react": "6.4.20",
"@storybook/manager-webpack5": "^6.5.12",
"@storybook/react": "^6.5.12",
"@storybook/test-runner": "0.3.0",
"@storybook/testing-library": "0.0.13",
"@swc/core": "^1.2.160",
"@swc/jest": "^0.2.20",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.4.3",
"@twilio-labs/svg-to-react": "^2.1.1",
"@types/browser-sync": "^2.26.1",
"@types/color": "^3.0.0",
"@types/jest": "^24.0.18",
"@types/node": "^17.0.33",
"@types/react": "^17.0.31",
"@types/prop-types": "^15.7.5",
"@types/react": "^18.0.0",
"@types/react-color": "^3.0.6",
"@types/react-github-button": "^0.1.1",
"@types/react-helmet": "^5.0.14",
Expand Down Expand Up @@ -210,8 +211,8 @@
"prettier": "^2.2.1",
"prop-types": "^15.7.2",
"puppeteer-core": "^10.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-ga": "^3.3.0",
"react-helmet": "^6.1.0",
"react-router-dom": "6.2.1",
Expand Down
8 changes: 4 additions & 4 deletions packages/paste-core/components/alert-dialog/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"@twilio-paste/types": "^3.1.1",
"@twilio-paste/uid-library": "^0.2.1",
"prop-types": "^15.7.2",
"react": "^16.8.6 || ^17.0.2",
"react-dom": "^16.8.6 || ^17.0.2"
"react": "^16.8.6 || ^17.0.2 || ^18.0.0",
"react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
},
"devDependencies": {
"@twilio-paste/animation-library": "^0.3.9",
Expand All @@ -53,7 +53,7 @@
"@twilio-paste/types": "^3.1.9",
"@twilio-paste/uid-library": "^0.2.6",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
10 changes: 5 additions & 5 deletions packages/paste-core/components/alert-dialog/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ AlertDialogWithTwoActionsStory.story = {
},
};

export const DestructiveAlertDialog: React.FC = () => {
export const DestructiveAlertDialog = (): JSX.Element => {
return (
<AlertDialog
heading="Delete data"
Expand All @@ -78,7 +78,7 @@ DestructiveAlertDialogStory.story = {
},
};

export const OpenAlertDialogFromButton: React.FC = () => {
export const OpenAlertDialogFromButton = (): JSX.Element => {
const [isOpen, setIsOpen] = React.useState(false);
const handleOpen = (): void => setIsOpen(true);
const handleClose = (): void => setIsOpen(false);
Expand Down Expand Up @@ -113,7 +113,7 @@ OpenAlertDialogFromButtonStory.story = {
},
};

export const OpenAlertDialogFromModal: React.FC = () => {
export const OpenAlertDialogFromModal = (): JSX.Element => {
const [isModalOpen, setIsModalOpen] = React.useState(true);
const [isAlertDialogOpen, setIsAlertDialogOpen] = React.useState(true);
const handleModalOpen = (): void => setIsModalOpen(true);
Expand Down Expand Up @@ -217,7 +217,7 @@ DestructiveAlertDialogVRT.story = {
name: 'Destructive Alert Dialog for VRT',
};

export const CustomizedAlertDialog: React.FC = () => {
export const CustomizedAlertDialog = (): JSX.Element => {
const theme = useTheme();
return (
<CustomizationProvider
Expand Down Expand Up @@ -246,7 +246,7 @@ export const CustomizedAlertDialog: React.FC = () => {
);
};

export const CustomizedDestructiveAlertDialog: React.FC = () => {
export const CustomizedDestructiveAlertDialog = (): JSX.Element => {
const currentTheme = useTheme();
return (
<CustomizationProvider
Expand Down
8 changes: 4 additions & 4 deletions packages/paste-core/components/alert/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
"@twilio-paste/types": "^3.1.1",
"@twilio-paste/uid-library": "^0.2.1",
"prop-types": "^15.7.2",
"react": "^16.8.6 || ^17.0.2",
"react-dom": "^16.8.6 || ^17.0.2"
"react": "^16.8.6 || ^17.0.2 || ^18.0.0",
"react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
},
"devDependencies": {
"@twilio-paste/box": "^7.1.1",
Expand All @@ -55,7 +55,7 @@
"@twilio-paste/types": "^3.1.9",
"@twilio-paste/uid-library": "^0.2.6",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
8 changes: 4 additions & 4 deletions packages/paste-core/components/anchor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
"@twilio-paste/types": "^3.1.1",
"@twilio-paste/uid-library": "^0.2.1",
"prop-types": "^15.7.2",
"react": "^16.8.6 || ^17.0.2",
"react-dom": "^16.8.6 || ^17.0.2"
"react": "^16.8.6 || ^17.0.2 || ^18.0.0",
"react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
},
"devDependencies": {
"@twilio-paste/box": "^7.1.1",
Expand All @@ -47,7 +47,7 @@
"@twilio-paste/types": "^3.1.9",
"@twilio-paste/uid-library": "^0.2.6",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
8 changes: 4 additions & 4 deletions packages/paste-core/components/avatar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
"@twilio-paste/theme": "^8.0.0",
"@twilio-paste/types": "^3.1.1",
"prop-types": "^15.7.2",
"react": "^16.8.6 || ^17.0.2",
"react-dom": "^16.8.6 || ^17.0.2"
"react": "^16.8.6 || ^17.0.2 || ^18.0.0",
"react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
},
"devDependencies": {
"@twilio-paste/box": "^7.1.1",
Expand All @@ -51,7 +51,7 @@
"@twilio-paste/theme": "^8.0.3",
"@twilio-paste/types": "^3.1.9",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
7 changes: 6 additions & 1 deletion packages/paste-core/components/avatar/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@ import type {AvatarProps, AvatarContentProps, ColorVariants, AvatarVariants} fro

const DEFAULT_SIZE = 'sizeIcon70';

const AvatarContents: React.FC<AvatarContentProps> = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => {
const AvatarContents: React.FC<React.PropsWithChildren<AvatarContentProps>> = ({
name,
size = DEFAULT_SIZE,
src,
icon: Icon,
}) => {
const computedTokenNames = getComputedTokenNames(size);
if (src != null) {
return <Box as="img" alt={name} maxWidth="100%" src={src} size={size} title={name} />;
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-core/components/avatar/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export type AvatarProps = React.HTMLAttributes<'div'> &
Pick<BoxProps, 'element'> & {
name: string;
size?: IconSize;
icon?: React.FC<GenericIconProps>;
icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
src?: string;
color?: ColorVariants;
variant?: AvatarVariants;
Expand All @@ -18,6 +18,6 @@ export type AvatarProps = React.HTMLAttributes<'div'> &
export type AvatarContentProps = {
name: string;
size?: IconSize;
icon?: React.FC<GenericIconProps>;
icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
src?: string;
};
8 changes: 4 additions & 4 deletions packages/paste-core/components/badge/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
"@twilio-paste/types": "^3.1.1",
"@twilio-paste/uid-library": "^0.2.1",
"prop-types": "^15.7.2",
"react": "^16.8.6 || ^17.0.2",
"react-dom": "^16.8.6 || ^17.0.2"
"react": "^16.8.6 || ^17.0.2 || ^18.0.0",
"react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
},
"devDependencies": {
"@twilio-paste/anchor": "^9.0.1",
Expand All @@ -55,7 +55,7 @@
"@twilio-paste/types": "^3.1.9",
"@twilio-paste/uid-library": "^0.2.6",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
5 changes: 2 additions & 3 deletions packages/paste-core/components/badge/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import type {BadgeProps, BadgeVariants} from './types';
import {useResizeChildIcons} from './hooks';
import {badgeVariantStyles, getBadgeAnchorStyles, getBadgeButtonStyles} from './styles';

export type {BadgeProps};

const handlePropValidation = ({as, href, onClick}: Partial<BadgeProps>): void => {
if (as === 'a') {
if (href === null || href === undefined)
Expand Down Expand Up @@ -95,8 +93,9 @@ Badge.propTypes = {
'default',
'info',
] as BadgeVariants[]).isRequired,
// @ts-expect-error type unions are a little too much for prop types inferred types to handle
as: PropTypes.oneOf(['span', 'button', 'a']).isRequired,
href: PropTypes.string,
onClick: PropTypes.func,
};

export type {BadgeProps} from './types';
2 changes: 1 addition & 1 deletion packages/paste-core/components/badge/stories/customization.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const getStyles = (element = 'BADGE'): {[key: string]: PasteCustomCSS} =>
};
};

const CustomizationWrapper: React.FC<{variant: BadgeVariants; isTestEnvironment: boolean}> = ({
const CustomizationWrapper: React.FC<React.PropsWithChildren<{variant: BadgeVariants; isTestEnvironment: boolean}>> = ({
variant,
isTestEnvironment,
}): React.ReactElement => {
Expand Down
Loading