grasia-dash-components

Dash UI component suite for GRASIA projects.

Use it

If you just want to use any of the components offered by this suite, add it to your system with pip install grasia-dash-components and import it with import grasia_dash_components.

You can see a very basic example of its usage in usage.py or in https://github.com/Akronix/test_grasia_dash_components.

Hack it

If you want to hack with the code, keep reading.

``sh


Install dependencies

$ npm install

Watch source for changes and build to lib/


$ npm start
`

Go to this link to learn more about Dash plugins.

$3

If you just want to play around with the available components that grasia-dash-components offers you, just follow the instructions below:

`sh


clone git repo and enter there

$ git clone https://github.com/Grasia/grasia-dash-components && cd grasia-dash-components

create a Python3 new virtual environment

$ virtualenv -p python3 venv/

activate it

$ source venv/bin/activate

and install dependencies

$ pip install -r requirements.txt

generate metadata.json of the Components

$ npm run prepublish

launch the playground

$ python usage.py
`

Feel free to modify usage.py source file and play with the different options of the components.

$3

For easy developing and testing of the react components, you can start up a demo development server:

`sh
$ npm run demo
$ open http://localhost:9000
`

You have to maintain the list of components in demo/Demo.react.js.

$3

#### To run lint and unit tests:

`sh
$ npm test
`

#### To run unit tests and watch for changes:

`sh
$ npm run test-watch
`

#### To debug unit tests in a browser (Chrome):

`sh
$ npm run test-debug
`

1. Wait until Chrome launches.
2. Click the "DEBUG" button in the top right corner.
3. Open up Chrome Devtools (Cmd+opt+i).
4. Click the "Sources" tab.
5. Find source files
- Navigate to webpack:// -> . -> spec/components to find your test source files.
- Navigate to webpack:// -> [your/repo/path]] -> grasia-dash-components -> src to find your component source files.
6. Now you can set breakpoints and reload the page to hit them.
7. The test output is available in the "Console" tab, or in any tab by pressing "Esc".

#### To run a specific test

In your test, append .only to a describe or it statement:

`javascript
describe.only('Foo component', () => {
// ...
})l
`

$3

1. Build development bundle to lib/ and watch for changes

# Once this is started, you can just leave it running.
$ npm start

2. Install module locally (after every change)

# Generate metadata, and build the JavaScript bundle
$ npm run install-local

# Now you're done. For subsequent changes, if you've got npm start
# running in a separate process, it's enough to just do:
$ python setup.py install

3. Run the dash layout you want to test

# Import grasia-dash-components to your layout, then run it:
$ python my_dash_layout.py




$3

Before publishing to PyPi, you can test installing the module locally:

`sh


Install in site-packages on your machine


$ npm run install-local
`

$3

`sh
$ npm run uninstall-local
``