Package: uk-gov-dash-components
UK Gov Dash componentsUK Gov Dash components is a Dash component library which providesGOV.UK styledcomponents for:AccordionAutoComplete DropdownChecklist⚠️ We intentionally only provide support for Python Dash projects.
If you are interested in Julia or R support please contact the teamPythonVisualisations@levellingup.gov.uk.Using the package from PythonFor installation using pip:pipinstalluk-gov-dash-componentsor for a specific version:pipinstalluk-gov-dash-components~=6.7.0For installation into a conda environment, paste the following code into the environment configuration file:- pip:
     - uk-gov-dash-components~=6.7.0Contributing to this packagePlotly Dash have written some documentation onReact for Python Developerswhich acts as good starting point.Install dependenciesIf you have selected install_dependencies during the prompt, you can skip this part.Install npm packagesnpm installCreate conda environmentconda env create -f environment.ymlCreate a new componentUse theComponentTemplatecomponent as a template.
This component is class based, while other components in this repository are functions.
You can read more aboutfunction components in the React documentation.Copysrc/lib/components/ComponentTemplate.react.js->src/lib/components/YourComponent.react.jsCopysrc/lib/fragments/ComponentTemplate.react.js->src/lib/fragments/YourComponent.react.jsModify the newly created files, replacing all references toComponentTemplatewithYourComponent, and replacing the sample functionality with what you'd like.Add both an import and export ofYourComponentto bothsrc/lib/index.jsandsrc/lib/LazyLoader.jsAddYourComponentto the import at the top of thesrc/demo/App.jsfile, and add<YourComponent>to the App.render() function.Runnpm startto start the demo server.Openhttp://localhost:8000in your browser.If nothing apears on the page, then open up the browser console to see the error(s).Test your code within a Dash ApplicationIf you've previously been runningnpm startyou've been running your component within a pure React environment separate to Dash.Build your code which will generate all the Python code requirednpm run buildRun theexample.pysample Dash app:python example.pyVisithttp://localhost:8050in your web browserAdd your component toexample.pyusing the existing Python as a template.Write tests for your component.These are the default instructionsA sample test is available intests/test_example.py, it will loadexample.pyand you can then automate interactions with selenium.Run the tests withpytest tests.The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g.https://github.com/plotly/dash-core-components)Add custom styles to your componentThese are the default instructionsAdd custom styles to your component by putting your custom CSS files into your distribution folder (uk_gov_dash_components).Make sure that they are referenced inMANIFEST.inso that they get properly included when you're ready to publish your component.Make sure the stylesheets are added to the_css_distdict inuk_gov_dash_components/__init__.pyso dash will serve them automatically when the component suite is requested.Review your codeCreate a production build and publish:Update theversionproperty of thepackage.jsonfile in the style of Major.Minor.Patch, e.g. 1.2.3Major - any breaking changes to previous functionality.Minor - additional functionality that doesn't effect backward compatibility. When updated the patch version should be reset to zero. eg. 2.3.1 goes to 2.4.0 for minor update.Patch - bug fixes that don't effect backward compatibility.
For more information seehereBuild your code:npm run buildCreate a Python distributionpython setup.py sdist bdist_wheelThis will create source and wheel distribution in the generated thedist/folder.
SeePyPAfor more information.Test your tarball by copying it's full file path and installing it locally into a new environment by running:pip install "<full file path>"eg.pip install "D:\Users\user\Desktop\Source Code Store\gov-uk-dash-react-components\dist\uk_gov_dash_components-1.2.1.tar.gz"When your PR is merged to main, it will be released automatically by theRelease workflowusing the version withinpackage.json.
You can still merge a PR which doesn't update the version withinpackage.json, but the Release workflow will fail.
Failure of the Release workflow means that a new release won't have been generated, the changes made to the package will not have been uploaded to PyPI and you won't be able to use the new version of the code in dashboard repos until you update the version inpackage.json.Dependencies and the Release workflow:TroubleshootingDependencies are specified in thepackage.jsonfile and installed vianpm install.
Sometimes dependencies will need updating and we will get vulnerability warnings/errors.
Here are some troubleshooting steps to take by running locally or adding to the github actions workflow file (release.yml):runnpm audit fixIf that doesn't work try deleting thenode_modulesfolder and thepackage-lock.jsonfile and runningnpm installagainIf that doesn't work take a closer look at the affected dependency by running for examplenpm ls glob-parentwhereglob-parentis the dependency that has the vulnerability warning. This will print out the dependencies in a tree-like fashion. You can try updating the top-level dependency or the dependency itself. For example if we want to update glob-parent to version 6.0.2 we runnpm install glob-parent@6.0.2followed bynpm updateto update all packages to their latest versions. Another alternative ifglob-parentis being installed by another package we can overide the version by adding the following to the package.json file"overrides": { "chokidar": "3.5.3", "glob-parent": "6.0.2"   }and then runningnpm update(note: need to addnpm updateto the workflow file if running github actions).Node version15/08/2023
We upgraded to Node version 20 and rectified theerr_ossl_evp_unsupportederror by adding a workaround to the package.json file as follows:"build:js": "node --openssl-legacy-provider ./node_modules/webpack/bin/webpack.js --mode production",We are now running Node with the--openssl-legacy-providerflag which means it will continue to use the legacy provider of the OpenSSL library.
This may not be neccessary in future as more libraries start to use use the more up to date version of OpenSSL.
It should also be noted that it is a possiblilty Node will stop supporting this flag in future.Sept 2023 : Node updated to version 18.17.1 on the DAP - request upgrade to node from DAP team.