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:
- Run
npm run storybook
, then go to the component we're interested in, make changes, and verify visual look and feel in story book. - Run a Jest test to verify functionality of a given component.
- Have minimal amount of duplicate component code that themes, styles, or presents information in the same way.
- 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 pagespages
/: 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 insrc/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 withimport { 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
0 issues of 3 selected
- Status: Open.#1030 In LAION-AI/Open-Assistant;
- Status: Open.#2853 In LAION-AI/Open-Assistant;
- Status: Open.#2745 In LAION-AI/Open-Assistant;