Dash components for Gov UK
Project description
UK Gov Dash components
UK Gov Dash components is a Dash component library which provides GOV.UK styled components for:
- Accordion
- AutoComplete Dropdown
- Checklist
⚠️ We intentionally only provide support for Python Dash projects. If you are interested in Julia or R support please contact the team PythonVisualisations@levellingup.gov.uk.
Using the package from Python
For installation using pip:
pip install uk-gov-dash-components
or for a specific version:
pip install uk-gov-dash-components~=6.7.0
For installation into a conda environment, paste the following code into the environment configuration file:
- pip:
- uk-gov-dash-components~=6.7.0
Contributing to this package
Plotly Dash have written some documentation on React for Python Developers which acts as good starting point.
Install dependencies
If you have selected install_dependencies during the prompt, you can skip this part.
- Install npm packages
npm install
- Create conda environment
conda env create -f environment.yml
Create a new component
Use the ComponentTemplate
component as a template.
This component is class based, while other components in this repository are functions.
You can read more about function components in the React documentation.
- Copy
src/lib/components/ComponentTemplate.react.js
->src/lib/components/YourComponent.react.js
- Copy
src/lib/fragments/ComponentTemplate.react.js
->src/lib/fragments/YourComponent.react.js
- Modify the newly created files, replacing all references to
ComponentTemplate
withYourComponent
, and replacing the sample functionality with what you'd like. - Add both an import and export of
YourComponent
to bothsrc/lib/index.js
andsrc/lib/LazyLoader.js
- Add
YourComponent
to the import at the top of thesrc/demo/App.js
file, and add<YourComponent>
to the App.render() function.- Run
npm start
to start the demo server. - Open http://localhost:55555 in your browser.
- If nothing apears on the page, then open up the browser console to see the error(s).
- Run
Test your code within a Dash Application
If you've previously been running npm start
you've been running your component within a pure React environment separate to Dash.
- Build your code which will generate all the Python code required
npm run build
- Run the
example.py
sample Dash app:python example.py
- Visit http://localhost:8050 in your web browser
- Add your component to
example.py
using the existing Python as a template.
Write tests for your component.
These are the default instructions
- A sample test is available in
tests/test_example.py
, it will loadexample.py
and you can then automate interactions with selenium. - Run the tests with
pytest 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 component
These are the default instructions
- Add 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 in
MANIFEST.in
so that they get properly included when you're ready to publish your component. - Make sure the stylesheets are added to the
_css_dist
dict inuk_gov_dash_components/__init__.py
so dash will serve them automatically when the component suite is requested.
- Make sure that they are referenced in
- Review your code
Create a production build and publish:
-
Update the
version
property of thepackage.json
file in the style of Major.Minor.Patch, e.g. 1.2.3- Major - 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 see here
-
Build your code:
npm run build
-
Create a Python distribution
python setup.py sdist bdist_wheel
This will create source and wheel distribution in the generated the
dist/
folder. See PyPA for 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 the Release workflow using the version within package.json. You can still merge a PR which doesn't update the version within
package.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
.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for uk_gov_dash_components-1.11.12.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 51e56288244676cce6fa4d54f82cef7b564fa270e3daae304aa4ea29eff8405d |
|
MD5 | a1186e3fcb4f6da01a39f502a42c2ce8 |
|
BLAKE2b-256 | b2a44853cd1434378e18d9c29f6fcf66645fb169bf75a77e803d78fabab03cee |
Hashes for uk_gov_dash_components-1.11.12-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 9454dd8753bd44275ae11dd222cb3625783e698538dd2d213d32e7fe8614471a |
|
MD5 | 10dc76a7cd9aa87efe9943ca3676b641 |
|
BLAKE2b-256 | 7c1d1db3e76f1d91bdd2dcbda000dcb7a8e9e74e60cc1f983012fa7faf8915a1 |