plumage-dash-components 0.0.1

Description:

plumagedashcomponents 0.0.1

Plumage Dash Components
plumage_dash_components is a Dash component library. A storybook showing all available components will be made available
You can quickly get started with:

Run pip install plumage-dash-components
Run python usage.py
Visit http://localhost:8050 in your web browser

How to contribute
Install dependencies
If you want to build and develop yourself, you should fork + clone the repository, and
then:

Install npm packages.
npm ci --ignore-scripts --prefix ./react


Install python packages required to build components.
pip install .[dependencies]
pip install dash[dev]


Install the python packages for testing.
pip install .[tests]



Write component code in react/src/lib/components/<ComponentName>/<ComponentName>.tsx


Have a look at other components to see how the directory and file structure looks like.


The demo app is in react/src/demo and is where you will import an example of your
component. To start the existing demo app, run npm start --prefix ./react.


To test your code in a Python environment:

Build your code
npm run build --prefix ./react


Install the Python pacakge in development mode (if not already done and
assuming you are using a virtual environment):
pip install -e .


Create a new example in examples/ which uses your new component.



Write tests for your component.

Python

Python tests exist in tests/. Take a look at them to see how to write tests using
the Dash test framework.
Run the tests with pytest tests.


JavaScript

JavaScript tests exist in react/tests. Take a look at them to see how to write tests using
the Jest test framework.





Add custom styles to your component by putting your custom CSS files into
your distribution folder (plumage_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 in
plumage_dash_components/__init__.py so dash will serve them
automatically when the component suite is requested.
You can also include stylesheets directly in your component by adding the stylesheet to your component's directory and importing it via import "./<ComponentName>.css. Make sure that the class names in your stylesheet
are starting with your component's name and two underscores: .MyComponent__MyClassName.



Setup using VS Code Dev Container
To setup the project using a dev container, open the project in VS Code and select "Reopen in Dev Container".
This will install all dependencies automatically.
Note: Tests have to be run in headless mode in the dev container, which can be done with $ pytest tests --headless.