Package: dash-material-components
Dash Material Design Componentsdash-material-componentsallows to build consistently styled dashboards with complex and reactive layouts, following Google'sMaterial Designprinciples.The library leveragesMUI Reactcomponents for use withPlotly Dash.This project has been initially boostrapped thanks to theDash plugin cookiecutter.QuickstartInstallationThe python package is available from thePyPi repository,pipinstalldash-material-componentsUsage as a libraryOnce installed, start using the Python components exactly like you would use otherDash component libraries,importdashimportdash_material_componentsasdmc# Compose a dashboard layouttext=dmc.Typography(text="Content...",component="p",variant="body2")section_1=dmc.Section(id="section-1",orientation="columns",children=[text,text_2],cards=[{"title":"Card 1a","size":3},{"title":"Card 1b"}])section_2=dmc.Section(id="section-2",size=3,children=[text,text_2],orientation="rows",cards=[{"title":"Card 2a","size":4},{"title":"Card 2b"}])page=dmc.Page(orientation="columns",children=[section_1,section_2])navbar=dmc.NavBar(title="Custom dash")layout=dmc.Dashboard(children=[navbar,page])# Instantiate a Dash appapp=dash.Dash(__name__)app.layout=layoutif__name__=="__main__":app.run_server()Usage in notebooksAs pre-requisite, install the Jupyter Lab extensionJupyterDash,~$pipinstalljupyter-dashThen, copy the Dash snippet above into a Jupyter notebook cell and replace theDashclass with theJupyterDashclass:importjupyter_dash# Instantiate a Dash appapp=jupyter_dash.JupyterDash(__name__)app.layout=layoutapp.run_server(mode='jupyterlab',host="0.0.0.0",port=8001)Local developmentStructure for a Dash component project*project/*python-package/             # The python package, output folder for the bundles.*src/                      # The javascript source directory for the components.*components/             # Where to put the react component classes.*index.js                # The index for the components exported by the bundle.*package.json              # JS package build commands.*webpack.config.js         # The webpack configs used to generate the bundles.*pyproject.toml            # Python package build commands.Install dependenciesThe project is shipped with off-the-shelf scripts to manage node packages as well as a set of utilities for local development. If theyarnnode package manager is installed globally, install all javascript dependencies,~$yarninstall--frozen-lockfile:warning: the Dash material components has only been tested against Node.js v18.And thanks topoetrypython package manager, create a virtual environnement,~$poetryinstallWrite a new React componentCompose your new Dash components insrc/componentsand make sure the React components are exported in your package entrypointsrc/index.js.importNoosComponentfrom'./components/NoosComponent.jsx';export{NoosComponent};:warning: the Dash material components are currently using MUI v.4, with the aim to transitionning to MUI v.5 shortly.The corresponding Python component API is auto-discovered from the React component declaredProps, while the component Python docstring are automatically generated from thePropsReact docstrings./** Used to auto-generate the Python component and docstrings */constNoosComponent=(props)=>{const{text}=props;return(<div><p>{text}</p></div>);}Box.defaultProps={text:'Sample value',};Box.propTypes={/** Used to auto-generate the Python component and docstrings */text:PropTypes.string,};exportdefaultNoosComponent;:heavy_exclamation_mark: Be careful to use the correct formatting for your docstrings for them to be properly recognized.Create a production buildOnce your components have been included into your package entrypoint, run:yarn build:js, to generate the JavaScript bundledash_material_components.jsyarn build:py, to generate the Python class files for the components.yarn build, to generate everything: the JavaScript bundles and the Python class files.In addition to buikld scripts, the projectpackage.jsonoffers linter, formatter and hot-reloader:yarn format, to auto-format the React component code.yarn lint, to check bundle compliance with ECMA standards.yarn watch, to watch the library source directory and rebuild the JavaScript bundle.Further readingIncluded below, few resources on how to extend the Dash component library:basics on Reactbackground on Dash componentscommunity-maintained component libraries