mardi 9 février 2021

Atomic Design: Separate generic components vs. application specific components

I am building a UI library using the Atomic Design methodology and I ran into a problem when trying to separate Generic components vs. Application specific components.

Let's say I am building a data table. Here is a sample of my code base.

Atoms
- Inputs (TextInput, SelectInput, DateInput...)
- EditableCell (inline editing cell that switch from a div to an input component when clicked)

Molecules
- TableRow (iteration of Inputs and or EditableCell)

Organism
- Table (Header and TableRows)

TableRow is a generic component that can accept any array of ReactNode (inputs and/or EditableCell). However, at some point I need to create specific TableRow that will accept different data props structure for different use cases.

TableRowInstance1: | TextDiv | InputSelect | EditableCell | InputDate    |`
TableRowInstance2: | TextDiv | InputSelect | InputNumber  | EditableCell | TextDiv | InputDate |

When and where should I create those application specific components to keep my code base as reusable as possible?

I have the feeling that I'm doing wrong with the Atomic Design methodology

Aucun commentaire:

Enregistrer un commentaire