Skip to main content

Task Flows

Task Flow templates in STRUDEL Kit are UI flows built out as React components that plug directly into your base app. They are based on the Task Flows in the STRUDEL Design System which offer user-friendly methods for implementing common patterns seen in scientific and data-intensive UIs.

Task Flow templates can be generated all together by building the whole strudel-kit app (base app + templates):

npx degit strudel-science/strudel-kit my-app

Or they can be generated individually:

npx degit strudel-science/strudel-kit/src/pages/compare-data my-compare-data

Task Flow Pieces​

Every Task Flow template consists of four main pieces:

  1. Page components
  2. Layout components
  3. Inner page components
  4. Tests

Page components​

A Task Flow template is made up of a series of pages that are built out as React components. Any file that is not prefixed by a dash (-) or an underscore (_) or nested in a directory that is prefixed with a dash is a page. The name of the file maps directly to the name of the path in the URL to render that page. Note that the URL path includes the full path starting from the pages directory. So a the file /src/pages/my-taskflow/new.tsx will be accessible at the URL route /my-taskflow/new. STRUDEL Kit uses the TanStack Router library to handle routing throughout the app and to autogenerate routes based on the file structure in the src/pages directory. Check out the TanStack Router documentation to understand all the conventions around file naming and page routing.

Layout components​

Some Task Flow templates have one or more _layout.tsx files. These files are wrapper components that wrap around all of the pages nested inside of their co-located _layout directories. These are used for layout elements that are common to multiple pages in a Task Flow like navigation or header elements. To better understand how layout components affect the component nesting/rendering, it can be helpful to look at the File-Based Routing section of the TanStack router docs.

Inner page components​

Along with their page components, most Task Flows also have inner page components that are separated into their own files. These are housed in the -components directory and are used within page components.

Customizing a Task Flow​

One of the first things you will do when using one of the Task Flow templates is customize it for your own needs. For common and simple customizable items, there will be a comment in the template code that says CUSTOMIZE:. These comments can be seen throughout the page components, inner components, and layout components of a template. These mark things like titles, links, column configurations, or filter configurations. It can be useful to do a project-wide search in your IDE for the term CUSTOMIZE: to get started. On top of customizing the simple stuff, you have full reign to change the template code as is needed for your project.