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