React: Support v19 betas in peer dependencies

.circleci/config.yml

@@ -768,30 +768,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 35
+          parallelism: 37
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 35
+          parallelism: 37
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 32
+          parallelism: 34
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 30
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 30
+          parallelism: 32
           requires:
             - build-sandboxes
       - test-portable-stories:

code/addons/docs/template/stories/docs2/resolved-react.stories.ts

@@ -44,6 +44,8 @@ export default {
     docs: {
       name: 'ResolvedReact',
     },
+    // the version string changes with every release of React/Next.js/Preact, not worth snapshotting
+    chromatic: { disable: true },
   },
 };
 

code/addons/links/package.json

@@ -82,7 +82,7 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "react": {

code/e2e-tests/addon-docs.spec.ts

@@ -200,6 +200,11 @@ test.describe('addon-docs', () => {
       expectedReactVersionRange = /^17/;
     } else if (templateName.includes('react16')) {
       expectedReactVersionRange = /^16/;
+    } else if (
+      templateName.includes('react-vite/prerelease') ||
+      templateName.includes('react-webpack/prerelease')
+    ) {
+      expectedReactVersionRange = /^19/;
     }
 
     // Arrange - Get the actual versions

code/frameworks/nextjs/package.json

@@ -173,8 +173,8 @@
   },
   "peerDependencies": {
     "next": "^13.5.0 || ^14.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {

code/frameworks/react-vite/package.json

@@ -64,8 +64,8 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {

code/frameworks/react-webpack5/package.json

@@ -53,8 +53,8 @@
     "@types/node": "^18.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "typescript": ">= 4.2.x"
   },
   "peerDependenciesMeta": {

code/lib/cli/src/sandbox-templates.ts

@@ -201,6 +201,28 @@ const baseTemplates = {
     },
     skipTasks: ['bench'],
   },
+  'react-vite/prerelease-ts': {
+    name: 'React Prerelease (Vite | TypeScript)',
+    /**
+     * 1. Create a Vite project with the React template
+     * 2. Add React beta versions
+     * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing
+     * 4. Add @types/react and @types/react-dom pointing to the beta packages
+     */
+    script: `
+      npm create vite --yes {{beforeDir}} -- --template react-ts && \
+      cd {{beforeDir}} && \
+      yarn add react@beta react-dom@beta && \
+      jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \
+      yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
+      `,
+    expected: {
+      framework: '@storybook/react-vite',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'react-webpack/18-ts': {
     name: 'React Latest (Webpack | TypeScript)',
     script: 'yarn create webpack5-react {{beforeDir}}',
@@ -222,6 +244,26 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
+  'react-webpack/prerelease-ts': {
+    name: 'React Prerelease (Webpack | TypeScript)',
+    /**
+     * 1. Create a Webpack project with React beta versions
+     * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing
+     * 4. Add @types/react and @types/react-dom pointing to the beta packages
+     */
+    script: `
+      yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta" && \
+      cd {{beforeDir}} && \
+      jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \
+      yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
+      `,
+    expected: {
+      framework: '@storybook/react-webpack5',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'solid-vite/default-js': {
     name: 'SolidJS Latest (Vite | JavaScript)',
     script: 'npx degit solidjs/templates/js {{beforeDir}}',
@@ -628,6 +670,8 @@ export const daily: TemplateKey[] = [
   'angular-cli/prerelease',
   'cra/default-js',
   'react-vite/default-js',
+  'react-vite/prerelease-ts',
+  'react-webpack/prerelease-ts',
   'vue3-vite/default-js',
   'vue-cli/default-js',
   'lit-vite/default-js',

code/lib/react-dom-shim/package.json

@@ -58,8 +58,8 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "publishConfig": {
     "access": "public"

code/lib/theming/package.json

@@ -68,8 +68,8 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "react": {

code/presets/react-webpack/package.json

@@ -84,8 +84,8 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "typescript": {

code/renderers/react/package.json

@@ -86,8 +86,8 @@
     "require-from-string": "^2.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "typescript": ">= 4.2.x"
   },
   "peerDependenciesMeta": {

code/ui/blocks/package.json

@@ -75,8 +75,8 @@
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "react": {

code/ui/blocks/src/components/Source.tsx

@@ -98,7 +98,7 @@ const Source: FunctionComponent<SourceProps> = ({
   language,
   code,
   dark,
-  format,
+  format = false,
   ...rest
 }) => {
   const { typography } = useTheme();
@@ -138,7 +138,4 @@ const Source: FunctionComponent<SourceProps> = ({
   );
 };
 
-Source.defaultProps = {
-  format: false,
-};
 export { Source, StyledSyntaxHighlighter };

code/ui/components/package.json

@@ -87,8 +87,8 @@
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "publishConfig": {
     "access": "public"

code/ui/components/src/components/form/field/field.tsx

@@ -38,7 +38,3 @@ export const Field = ({ label, children, ...props }: FieldProps) => (
     {children}
   </Wrapper>
 );
-
-Field.defaultProps = {
-  label: undefined,
-};

code/ui/components/src/components/tabs/tabs.tsx

@@ -134,14 +134,14 @@ export interface TabsProps {
 export const Tabs: FC<TabsProps> = memo(
   ({
     children,
-    selected,
+    selected = null,
     actions,
-    absolute,
-    bordered,
-    tools,
+    absolute = false,
+    bordered = false,
+    tools = null,
     backgroundColor,
-    id: htmlId,
-    menuName,
+    id: htmlId = null,
+    menuName = 'Tabs',
     emptyState,
     showToolsWhenEmpty,
   }) => {
@@ -206,15 +206,6 @@ export const Tabs: FC<TabsProps> = memo(
   }
 );
 Tabs.displayName = 'Tabs';
-Tabs.defaultProps = {
-  id: null,
-  children: null,
-  tools: null,
-  selected: null,
-  absolute: false,
-  bordered: false,
-  menuName: 'Tabs',
-};
 
 export interface TabsStateProps {
   children: TabsProps['children'];

code/ui/components/src/components/tooltip/ListItem.tsx

@@ -186,17 +186,18 @@ export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href'
 }
 
 const ListItem = ({
-  loading,
-  title,
-  center,
-  right,
-  icon,
-  active,
-  disabled,
+  loading = false,
+  title = <span>Loading state</span>,
+  center = null,
+  right = null,
+
+  active = false,
+  disabled = false,
   isIndented,
-  href,
-  onClick,
-  LinkWrapper,
+  href = null,
+  onClick = null,
+  icon,
+  LinkWrapper = null,
   ...rest
 }: ListItemProps) => {
   const itemProps = getItemProps(onClick, href, LinkWrapper);
@@ -220,16 +221,4 @@ const ListItem = ({
   );
 };
 
-ListItem.defaultProps = {
-  loading: false,
-  title: <span>Loading state</span>,
-  center: null,
-  right: null,
-  active: false,
-  disabled: false,
-  href: null,
-  LinkWrapper: null,
-  onClick: null,
-};
-
 export default ListItem;

code/ui/components/src/components/tooltip/Tooltip.tsx

@@ -126,7 +126,16 @@ export interface TooltipProps {
 
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
-    { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows, ...props },
+    {
+      placement = 'top',
+      hasChrome = true,
+      children,
+      arrowProps = {},
+      tooltipRef,
+      color,
+      withArrows,
+      ...props
+    },
     ref
   ) => {
     return (
@@ -139,10 +148,3 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 );
 
 Tooltip.displayName = 'Tooltip';
-Tooltip.defaultProps = {
-  color: undefined,
-  tooltipRef: undefined,
-  hasChrome: true,
-  placement: 'top',
-  arrowProps: {},
-};

code/ui/components/src/components/tooltip/TooltipLinkList.tsx

@@ -58,7 +58,7 @@ export interface TooltipLinkListProps {
   LinkWrapper?: LinkWrapperType;
 }
 
-export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) => {
+export const TooltipLinkList = ({ links, LinkWrapper = null }: TooltipLinkListProps) => {
   const hasIcon = links.some((link) => link.icon);
   return (
     <List>
@@ -68,7 +68,3 @@ export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) =>
     </List>
   );
 };
-
-TooltipLinkList.defaultProps = {
-  LinkWrapper: ListItem.defaultProps.LinkWrapper,
-};

code/ui/components/src/components/tooltip/TooltipMessage.tsx

@@ -60,9 +60,3 @@ export const TooltipMessage = ({ title, desc, links }: TooltipMessageProps) => {
     </MessageWrapper>
   );
 };
-
-TooltipMessage.defaultProps = {
-  title: null,
-  desc: null,
-  links: null,
-};