Merge pull request #3093 from plotly/default-react-18

Default to react 18

Author: T4rk1n

.circleci/config.yml

@@ -219,24 +219,6 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
-  test-312-react-18:
-    <<: *test
-    docker:
-      - image: cimg/python:3.12.1-browsers
-        auth:
-          username: dashautomation
-          password: $DASH_PAT_DOCKERHUB
-        environment:
-          PERCY_ENABLE: 0
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: True
-          PYVERSION: python312
-          REDIS_URL: redis://localhost:6379
-          REACT_VERSION: "18.2.0"
-      - image: cimg/redis:6.2.6
-        auth:
-          username: dashautomation
-          password: $DASH_PAT_DOCKERHUB
-
   test-38:
     <<: *test
     docker:
@@ -337,18 +319,6 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
-  dcc-312-react-18:
-    <<: *dcc-test
-    docker:
-      - image: cimg/python:3.12.1-browsers
-        auth:
-          username: dashautomation
-          password: $DASH_PAT_DOCKERHUB
-        environment:
-          PYVERSION: python312
-          PERCY_ENABLE: 0
-          REACT_VERSION: "18.2.0"
-
   dcc-38:
     <<: *dcc-test
     docker:
@@ -414,18 +384,6 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
-  html-312-react-18:
-    <<: *html-test
-    docker:
-      - image: cimg/python:3.12.1-browsers
-        auth:
-          username: dashautomation
-          password: $DASH_PAT_DOCKERHUB
-        environment:
-          PYVERSION: python312
-          PERCY_ENABLE: 0
-          REACT_VERSION: "18.2.0"
-
   html-38:
     <<: *html-test
     docker:
@@ -486,15 +444,6 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
-  table-server-react-18:
-    <<: *table-server
-    docker:
-      - image: cimg/python:3.12.1-browsers
-        environment:
-          PYVERSION: python312
-          PERCY_ENABLE: 0
-          REACT_VERSION: "18.2.0"
-
   table-unit-test:
     working_directory: ~/dash
     docker:
@@ -627,9 +576,6 @@ workflows:
       - test-312:
           requires:
             - install-dependencies-312
-      - test-312-react-18:
-          requires:
-            - install-dependencies-312
       - test-38:
           requires:
             - install-dependencies-38
@@ -644,19 +590,13 @@ workflows:
       - dcc-312:
           requires:
             - install-dependencies-312
-      - dcc-312-react-18:
-          requires:
-            - install-dependencies-312
       - dcc-38:
           requires:
             - install-dependencies-38
 
       - html-312:
           requires:
             - install-dependencies-312
-      - html-312-react-18:
-          requires:
-            - install-dependencies-312
       - html-38:
           requires:
             - install-dependencies-38
@@ -671,9 +611,6 @@ workflows:
       - table-server:
           requires:
             - install-dependencies-312
-      - table-server-react-18:
-          requires:
-            - install-dependencies-312
 
       - percy/finalize_all:
           requires:

@plotly/dash-generator-test-component-nested/src/components/MyNestedComponent.js

@@ -4,7 +4,7 @@ import React from 'react';
 /**
  * MyNestedComponent description
  */
-const MyNestedComponent = ({ id, value }) => (<div id={id}>{value}</div>);
+const MyNestedComponent = ({ id, value = '' }) => (<div id={id}>{value}</div>);
 
 MyNestedComponent.propTypes = {
     /**
@@ -18,8 +18,4 @@ MyNestedComponent.propTypes = {
     value: PropTypes.string
 };
 
-MyNestedComponent.defaultProps = {
-    value: ''
-};
-
 export default MyNestedComponent;

@plotly/dash-generator-test-component-standard/src/components/MyStandardComponent.js

@@ -4,7 +4,7 @@ import React from 'react';
 /**
  * MyComponent description
  */
-const MyStandardComponent = ({ id, style, value }) => (<div id={id} style={style}>{value}</div>);
+const MyStandardComponent = ({ id, style, value = '' }) => (<div id={id} style={style}>{value}</div>);
 
 MyStandardComponent.propTypes = {
     /**
@@ -23,8 +23,4 @@ MyStandardComponent.propTypes = {
     value: PropTypes.string
 };
 
-MyStandardComponent.defaultProps = {
-    value: ''
-};
-
-export default MyStandardComponent;
+export default MyStandardComponent;

@plotly/dash-test-components/src/components/AsyncComponent.js

@@ -14,6 +14,4 @@ AsyncComponent.propTypes = {
     value: PropTypes.string
 };
 
-AsyncComponent.defaultProps = {};
-
 export default AsyncComponent;

@plotly/dash-test-components/src/components/CollapseComponent.js

@@ -11,8 +11,4 @@ CollapseComponent.propTypes = {
     id: PropTypes.string
 };
 
-CollapseComponent.defaultProps = {
-    display: false
-};
-
 export default CollapseComponent;

@plotly/dash-test-components/src/components/DelayedEventComponent.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const DelayedEventComponent = ({ id, n_clicks, setProps }) => (<button
+const DelayedEventComponent = ({ id, n_clicks = 0, setProps }) => (<button
     id={id}
     onClick={() => setTimeout(() => setProps({ n_clicks: n_clicks + 1 }), 20)}
 />);
@@ -11,8 +11,4 @@ DelayedEventComponent.propTypes = {
     n_clicks: PropTypes.number
 };
 
-DelayedEventComponent.defaultProps = {
-    n_clicks: 0
-};
-
 export default DelayedEventComponent;

@plotly/dash-test-components/src/components/FragmentComponent.js

@@ -10,6 +10,4 @@ FragmentComponent.propTypes = {
     id: PropTypes.string
 };
 
-FragmentComponent.defaultProps = {};
-
-export default FragmentComponent;
+export default FragmentComponent;

@plotly/dash-test-components/src/components/StyledComponent.js

@@ -4,7 +4,7 @@ import React from 'react';
 /**
  * MyComponent description
  */
-const StyledComponent = ({ id, style, value }) => (<div id={id} style={style}>{value}</div>);
+const StyledComponent = ({ id, style, value = '' }) => (<div id={id} style={style}>{value}</div>);
 
 StyledComponent.propTypes = {
     /**
@@ -23,8 +23,4 @@ StyledComponent.propTypes = {
     value: PropTypes.string
 };
 
-StyledComponent.defaultProps = {
-    value: ''
-};
-
 export default StyledComponent;

@plotly/dash-test-components/src/components/WidthComponent.js

@@ -1,17 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
 
-const WidthComponent = props => (<Fragment>
-    {props.width}
+const WidthComponent = ({width = 0}) => (<Fragment>
+    {width}
 </Fragment>);
 
 WidthComponent.propTypes = {
     id: PropTypes.string,
     width: PropTypes.number
 };
 
-WidthComponent.defaultProps = {
-    width: 0
-};
-
-export default WidthComponent;
+export default WidthComponent;

@plotly/dash-test-components/src/fragments/AsyncComponent.js

@@ -11,6 +11,4 @@ AsyncComponent.propTypes = {
     value: PropTypes.string
 };
 
-AsyncComponent.defaultProps = {};
-
 export default AsyncComponent;