Skip to content
Open
No due date
Last updated Jun 9, 2023
89% complete

Right now the web code has a lot of duplication and it's relatively hard to inspect a specific UI component, tweak it, and verify that it looks good.

In an ideal state we should be able to:

  1. Run npm run storybook, then go to the component we're interested in, make changes, and verify visual look and feel in story book.
  2. Run a Jest test to verify functionality of a given component.
  3. Have minimal amount of duplicate component code that themes, styles, or presents information in the same way.
  4. Be able to quickly navigate to the components we're interested in making.

To do this, I propose we migrate towards a directory structure modeled by RedwoodJS:

  • Directory structure is as follows:
  • components/: All presentation components with a modest amount of nested directory structure. Nested directories should use lowercase names.
  • layouts/: Each broad layout component used by pages
  • pages/: What we currently have, user visible pages and API routes.

Within a component definition we should then:

  • Have a folder for the component with the same name. For MyTaskComponent it's in src/components/MyTaskComponent/MyTaskComponent.tsx
  • Have a storybook story in the component directory.
  • Have a Jest test in the component directory.
  • Have a simple index.tsx that exports the component so that call sites can import with import { MyTaskComponent } from "src/components/MyTaskComponent";

After this change it'll be easier to work on smaller components and test them in isolation without having to actually run the backend in most cases.

List view