yearn/web-lib

[Improvement] Consistency and DX

Majorfi opened this issue · 0 comments

What

We need to add consistency with the typing of components and the available default props:

  • All types for a specific component should be exported in a separate file name [component].d.tsx
  • All types should be correctly exported and accessible for devs
  • It should be possible to use any "default HTML" props for the components. Usually this is just by adding & React.ComponentPropsWithoutRef<'div'> to the type of the component, and {...props} to the wrapper, but this may need some specific stuff. The idea is that a dev should be able to send stuff like className to ANY component

Moreover, some components have subcomponents/different parts that devs may want to customise. We have 3 ways to allow that:

  • Dev just copy past the code and update the parts he needs (bad)
  • We add props for almost everything, this way everything can be customised, but it's way harder to maintain (meh)
  • We wrap any relevant className in a specific component css className, allowing the dev to overwrite this className. Exemple:
# React
- className={'mb-2 text-sm text-typo-secondary truncate'}
+ className={'MyComponent--label'}

#scss
+ .MyComponent--label {
+  @apply mb-2 text-sm text-typo-secondary truncate;
+}

Note

It's maybe not the best options. Feel free to debate!