Dash 3.0

.circleci/config.yml

@@ -227,24 +227,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:
@@ -349,18 +331,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:
@@ -430,18 +400,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:
@@ -506,15 +464,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:
@@ -655,9 +604,6 @@ workflows:
       - test-312:
           requires:
             - install-dependencies-312
-      - test-312-react-18:
-          requires:
-            - install-dependencies-312
       - test-38:
           requires:
             - install-dependencies-38
@@ -672,19 +618,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
@@ -699,9 +639,6 @@ workflows:
       - table-server:
           requires:
             - install-dependencies-312
-      - table-server-react-18:
-          requires:
-            - install-dependencies-312
 
       - percy/finalize_all:
           requires:

.pylintrc

@@ -75,6 +75,7 @@ disable=fixme,
         unnecessary-lambda-assignment,
         broad-exception-raised,
         consider-using-generator,
+        too-many-ancestors
 
 
 # Enable the message, report, category or checker with the given id(s). You can

@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-generator-test-component-typescript/base/__init__.py

@@ -16,7 +16,12 @@
     dict(
         relative_package_path='dash_generator_test_component_typescript.js',
         namespace='dash_generator_test_component_typescript'
-    )
+    ),
+    {
+        "dev_package_path": "proptypes.js",
+        "dev_only": True,
+        "namespace": 'dash_generator_test_component_typescript'
+    }
 ]
 
 for _component in __all__:

@plotly/dash-generator-test-component-typescript/dash_prop_typing.py

@@ -0,0 +1 @@
+ignore_props = ['ignored_prop']

@plotly/dash-generator-test-component-typescript/generator.test.ts

@@ -271,6 +271,23 @@ describe('Test Typescript component metadata generation', () => {
                 );
                 expect(objectOfComponents).toBe("node");
             }
+        );
+
+        test(
+            'union and literal values', () => {
+                const propType = R.path(
+                    propPath('TypeScriptComponent', 'union_enum').concat(
+                        'type'
+                    ),
+                    metadata
+                );
+                expect(propType.name).toBe('union');
+                expect(propType.value.length).toBe(3);
+                expect(propType.value[0].name).toBe('number');
+                expect(propType.value[1].name).toBe('literal');
+                expect(propType.value[2].name).toBe('literal');
+                expect(propType.value[1].value).toBe('small');
+            }
         )
     });
 

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -25,6 +25,7 @@ export type TypescriptComponentProps = {
     array_obj?: {a: string}[];
     array_any?: any[];
     enum_string?: 'one' | 'two';
+    enum_number?: 2 | 3 | 4 | 5 | 6;
     union?: number | string;
     union_shape?: {a: string} | string;
     array_union_shape?: ({a: string} | string)[];
@@ -46,6 +47,8 @@ export type TypescriptComponentProps = {
 
     object_of_string?: {[k: string]: string};
     object_of_components?: {[k: string]: JSX.Element};
+    ignored_prop?: {ignore: {me: string}};
+    union_enum?: number | 'small' | 'large'
 };
 
 export type WrappedHTMLProps = {

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

@@ -7,9 +7,8 @@ const AddPropsComponent = (props) => {
 
     return (
         <div id={id}>
-            {React.cloneElement(children, {
+            {React.cloneElement(children, { 
                 receive: `Element #${id} pass`,
-                id: id,
             })}
         </div>
     );

@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/ExternalComponent.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const ExternalComponent = ({ id, text, input_id, extra_component }) => {
+    const ctx = window.dash_component_api.useDashContext();
+    const ExternalWrapper = window.dash_component_api.ExternalWrapper;
+
+    return (
+        <div id={id}>
+            {text && <ExternalWrapper
+
+                component={{
+                    type: "Input",
+                    namespace: "dash_core_components",
+                    props: {
+                        value: text,
+                        id: input_id
+                    }
+                }}
+                componentPath={[...ctx.componentPath, 'external']}
+            />}
+            {
+                extra_component &&
+                <ExternalWrapper
+                    component={extra_component}
+                    componentPath={[...ctx.componentPath, 'extra']}
+            />}
+        </div>
+    )
+}
+
+ExternalComponent.propTypes = {
+    id: PropTypes.string,
+    text: PropTypes.string,
+    input_id: PropTypes.string,
+    extra_component: PropTypes.exact({
+        type: PropTypes.string,
+        namespace: PropTypes.string,
+        props: PropTypes.object, 
+    }),
+};
+
+export default ExternalComponent;

@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;

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

@@ -13,6 +13,7 @@ import AddPropsComponent from "./components/AddPropsComponent";
 import ReceivePropsComponent from "./components/ReceivePropsComponent";
 import ShapeOrExactKeepOrderComponent from "./components/ShapeOrExactKeepOrderComponent";
 import ArrayOfExactOrShapeWithNodePropAssignNone from './components/ArrayOfExactOrShapeWithNodePropAssignNone';
+import ExternalComponent from './components/ExternalComponent';
 
 
 export {
@@ -29,5 +30,6 @@ export {
     AddPropsComponent,
     ReceivePropsComponent,
     ShapeOrExactKeepOrderComponent,
-    ArrayOfExactOrShapeWithNodePropAssignNone
+    ArrayOfExactOrShapeWithNodePropAssignNone,
+    ExternalComponent,
 };