@datashaper/react

react

This package contains a collection of React components for constructing wrangling pipeline interfaces. All of the core components used in our complete webapp are stored here, such as fundamental verb configuration forms, table renderers, etc.

Some of these components can be useful for data-driven apps even if they do not need to perform wrangling or build pipelines. For example, the ArqueroDetailsList is a standard Fluent DetailsList that accepts an Arquero table instead of the usual items array, and it automatically renders it richly and with various data display options.

Many of the components (including every verb configuration form) have stories that can be viewed in Storybook. Run the project locally to see these stories and use them during development, or view the latest on GitHub.

Verb forms

To create a new verb form component for use in the application, a few steps need to be taken:

• An implementation of the verb needs to exist in the workflow package.
• A form component needs to be written; these are in src/components/verbs. Any React component can be written as long as it binds change events to the workflow instance. We have a number of helpers and form templates to make this easier, see other verbs for examples. Ensure that selectStepForm has a mapping to bind the verb name to a form.
• A verb description needs to be written. This is a read-only summary of the verb parameters, usable for applications to display a concise printout of the pipeline, and also used in the stories to verify input mappings are correct. Ensure that selectStepDescription has a mapping to bind the verb name to a description.
• At minimum, add an entry in the every operation story to see the verb component and description rendered. If multiple permutations are desired, create a new story.