Merge branch 'master' into master

Author: T4rk1n

.circleci/config.yml

@@ -1,9 +1,12 @@
-version: 2
+version: 2.1
+
+orbs:
+  browser-tools: circleci/[email protected]
 
 jobs:
-    python-3.6: &test-template
+    python-3-8: &test-template
         docker:
-            - image: circleci/python:3.6-stretch-node-browsers
+            - image: cimg/python:3.8.20-browsers
               auth:
                 username: dashautomation
                 password: $DASH_PAT_DOCKERHUB
@@ -14,6 +17,10 @@ jobs:
         steps:
             - checkout
 
+            - browser-tools/install-browser-tools:
+                install-firefox: false
+                install-geckodriver: false
+
             - run:
                 name: ✍️ Write job name.
                 command: echo $CIRCLE_JOB > circlejob.txt
@@ -22,10 +29,9 @@ jobs:
                 key: deps1-{{ .Branch }}-{{ checksum "circlejob.txt" }}-{{ checksum "tests/requirements.txt" }}-{{ checksum ".circleci/config.yml" }}
 
             - run:
-                name: 🏗️ Create virtualenv
+                name: 🏗️ Create venv
                 command: |
-                    sudo pip install virtualenv
-                    python -m venv venv || virtualenv venv
+                    python -m venv venv
 
             - run:
                 name: 🏗️ Install requirements
@@ -45,9 +51,9 @@ jobs:
                     pytest
                 when: always
 
-    python-3.7-install-test:
+    python-3-12-install-test:
         docker:
-            - image: circleci/python:3.7-stretch-node-browsers
+            - image: cimg/python:3.12.7-browsers
               auth:
                 username: dashautomation
                 password: $DASH_PAT_DOCKERHUB
@@ -58,6 +64,10 @@ jobs:
         steps:
             - checkout
 
+            - browser-tools/install-browser-tools:
+                install-firefox: false
+                install-geckodriver: false
+
             - run:
                 name: ✍️ Write job name.
                 command: echo $CIRCLE_JOB > circlejob.txt
@@ -66,10 +76,9 @@ jobs:
                 key: deps1-{{ .Branch }}-{{ checksum "circlejob.txt" }}-{{ checksum "tests/requirements.txt" }}-{{ checksum ".circleci/config.yml" }}
 
             - run:
-                name: 🏗️ Create virtualenv
+                name: 🏗️ Create venv
                 command: |
-                    sudo pip install virtualenv
-                    python -m venv venv || virtualenv venv
+                    python -m venv venv
 
             - run:
                 name: 🏗️ Install requirements
@@ -102,7 +111,7 @@ workflows:
     version: 2
     build:
         jobs:
-            - python-3.6:
+            - python-3-8:
                 context: dash-docker-hub
-            - python-3.7-install-test:
+            - python-3-12-install-test:
                 context: dash-docker-hub

README.md

@@ -6,6 +6,13 @@ This repository contains a [Cookiecutter](https://github.com/audreyr/cookiecutte
 - If it's the first time creating a Dash component, start with our [React guide for Python developers](https://dash.plotly.com/react-for-python-developers)
 - Need help with your component? Create a post on the [Dash Community Forum](https://community.plotly.com/c/dash)
 
+<div align="center">
+  <a href="https://dash.plotly.com/project-maintenance">
+    <img src="https://dash.plotly.com/assets/images/maintained-by-plotly.png" width="400px" alt="Maintained by Plotly">
+  </a>
+</div>
+
+
 ## Usage
 
 To use this boilerplate:

{{cookiecutter.project_shortname}}/cookiecutter_templates/FunctionComponent.react.js

@@ -11,23 +11,25 @@ import PropTypes from 'prop-types';
 const {{cookiecutter.component_name}} = (props) => {
     const {id, label, setProps, value} = props;
 
+    const handleInputChange = (e) => {
+        /*
+        * Send the new value to the parent component.
+        * setProps is a prop that is automatically supplied
+        * by dash's front-end ("dash-renderer").
+        * In a Dash app, this will update the component's
+        * props and send the data back to the Python Dash
+        * app server if a callback uses the modified prop as
+        * Input or State.
+        */
+        setProps({ value: e.target.value });
+    };
+
     return (
         <div id={id}>
             ExampleComponent: {label}&nbsp;
             <input
                 value={value}
-                onChange={
-                    /*
-                        * Send the new value to the parent component.
-                        * setProps is a prop that is automatically supplied
-                        * by dash's front-end ("dash-renderer").
-                        * In a Dash app, this will update the component's
-                        * props and send the data back to the Python Dash
-                        * app server if a callback uses the modified prop as
-                        * Input or State.
-                        */
-                    e => setProps({ value: e.target.value })
-                }
+                onChange={handleInputChange}
             />
         </div>
     );

{{cookiecutter.project_shortname}}/usage.py

@@ -19,4 +19,4 @@ def display_output(value):
 
 
 if __name__ == '__main__':
-    app.run_server(debug=True)
+    app.run(debug=True)