Merge pull request #1076 from facultyai/dash-3.0

Author: tcbegley

.babelrc

@@ -1,12 +1,4 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    "@babel/plugin-transform-object-rest-spread",
-    "@babel/plugin-transform-runtime"
-  ],
-  "env": {
-    "test": {
-      "plugins": ["@babel/plugin-transform-class-properties"]
-    }
-  }
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

.github/CONTRIBUTING.md

@@ -19,7 +19,7 @@ restrictions:
 
 - Please **do not** use the issue tracker for personal support requests. Stack
   Overflow ([`plotly-dash`](https://stackoverflow.com/questions/tagged/plotly-dash) tag),
-  or the [Plotly Community Forum](https://community.plot.ly) are better places to get help.
+  or the [Plotly Community Forum](https://community.plotly.com) are better places to get help.
 
 - Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.

.prettierrc

@@ -3,5 +3,8 @@
   "singleQuote": true,
   "bracketSpacing": false,
   "arrowParens": "avoid",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^@/.*$", "^[./]"],
+  "importOrderSeparation": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

dash_bootstrap_components/__init__.py

@@ -1,7 +1,5 @@
 """Bootstrap themed components for use in Plotly Dash"""
 
-import os
-
 from dash_bootstrap_components import _components, icons, themes
 from dash_bootstrap_components._components import *  # noqa
 from dash_bootstrap_components._components import Table
@@ -10,9 +8,6 @@
 
 __all__ = _components.__all__ + ["icons", "themes"]
 
-_current_path = os.path.dirname(os.path.abspath(__file__))
-_METADATA_PATH = os.path.join(_current_path, "_components", "metadata.json")
-
 _js_dist = [
     {
         "relative_package_path": ("_components/dash_bootstrap_components.min.js"),

demo/Demo.js

@@ -1,4 +1,6 @@
+/* eslint-disable react/prop-types */
 import React, {useState} from 'react';
+
 import {
   Alert,
   Badge,
@@ -37,29 +39,29 @@ import {
   Tooltip
 } from '../src';
 
-const StateWrapper = ({tag: Tag, ...otherProps}) => {
+function StateWrapper({tag: Tag, ...otherProps}) {
   // helper to mimic setProps functionality
   const [state, setState] = useState(otherProps);
   return <Tag setProps={props => setState({...state, ...props})} {...state} />;
-};
+}
 
-const CollapseComponent = ({children}) => {
+function CollapseComponent({children}) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div>
-      <Button onClick={() => setIsOpen(!isOpen)}>Toggle collapse</Button>
+      <Button setProps={() => setIsOpen(!isOpen)}>Toggle collapse</Button>
       <Collapse is_open={isOpen}>{children}</Collapse>
     </div>
   );
-};
+}
 
 const FadeComponent = ({children}) => {
   const [isIn, setIsIn] = useState(false);
 
   return (
     <div>
-      <Button onClick={() => setIsOpen(!isIn)}>Toggle fade</Button>
+      <Button setProps={() => setIsIn(!isIn)}>Toggle fade</Button>
       <Fade is_in={isIn}>{children}</Fade>
     </div>
   );
@@ -212,7 +214,7 @@ const Demo = () => (
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 className="card-title">Here's another card</h5>
+              <h5 className="card-title">Here&apos;s another card</h5>
               <p className="card-text">With some text, and a button</p>
               <Button color="success">Click here</Button>
             </CardBody>
@@ -221,7 +223,7 @@ const Demo = () => (
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 className="card-title">Here's yet another card</h5>
+              <h5 className="card-title">Here&apos;s yet another card</h5>
               <p className="card-text">With some text, and some links</p>
               <CardLink href="https://www.asidatascience.com">
                 External

demo/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+
+import {createRoot} from 'react-dom/client';
 
 import Demo from './Demo';
 
-const rootInstance = ReactDOM.render(
-    <Demo />,
-    document.getElementById('react-demo-entry-point')
-);
+const root = createRoot(document.getElementById('react-demo-entry-point'));
+
+root.render(<Demo />);

docs/components_page/components/carousel.md

@@ -12,7 +12,7 @@ This is a carousel with slides only.  The default cycle time is 5000ms, but here
 
 ## With controls
 
-Here we add the previous and next controls.  The default is for the slideshow to autoplay after the user manually cycles the first item. Set `ride="carousel"` to start the slideshow on page load.
+Here we add the previous and next controls.
 
 {{example:components/carousel/controls.py:carousel}}
 

docs/components_page/components/carousel/simple.py

@@ -9,5 +9,4 @@
     controls=False,
     indicators=False,
     interval=2000,
-    ride="carousel",
 )

docs/components_page/components/index/simple.py

@@ -21,4 +21,4 @@
 
 # 5. Start the Dash server
 if __name__ == "__main__":
-    app.run_server()
+    app.run()

docs/components_page/components/navbar/navbar.py

@@ -1,7 +1,7 @@
 import dash_bootstrap_components as dbc
 from dash import Input, Output, State, html
 
-PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
+LOGO = "https://placehold.co/100x100"
 
 search_bar = dbc.Row(
     [
@@ -22,13 +22,13 @@
                 # Use row and col to control vertical alignment of logo / brand
                 dbc.Row(
                     [
-                        dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
+                        dbc.Col(html.Img(src=LOGO, height="30px")),
                         dbc.Col(dbc.NavbarBrand("Navbar", className="ms-2")),
                     ],
                     align="center",
                     className="g-0",
                 ),
-                href="https://plotly.com",
+                href="https://placehold.co/",
                 style={"textDecoration": "none"},
             ),
             dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),