Data file upload components

[davinov]

Here is the start of react components to handle data file uploads: both components should use a common container, with two different themes.
Rest to do:

• handle state when uploading
• factor file input logic
• tests!

Many questions:

• multiple themes vs multiple components
• common way to handle stuff that were "out of the box" with vue (class names composition, native events on components, styles colors, etc.)

[ChibiBlasphem]

Tu pourrais ici par exemple passer une prop a StyledContainer qui serai isClickable de type boolean et adapter StyledContainer comme ça.

import styled, { css } from 'styled-components';

const StyledContainer = styled.div<{ isClickable: boolean }>`
  ${props => props.isClickable && css`cursor: pointer`}
`

[ChibiBlasphem]

Si tu veux composer des classNames (malgré qu'on utilise styled-components), tu peux utiliser la librarie classnames.
Cette library exporte une function (import cx from 'classnames') que tu peux utiliser comme ça:

const classes = cx('card', className, {
  'a-condition-classname': aBoolean
})

[ChibiBlasphem]

Je ne pense pas que le composant devrait avoir a gérer tous les thèmes différents, ça ne me parait pas scalable.

Je vois deux façon de faire qui pourrai éviter au composant de gérer ça lui-même.

1. Avoir une prop className?: string sur ton composant Card ce que tu fais déjà.
   Ensuite pour styliser le composant de l'extérieur tu pourrais faire :

const PrimaryCard = styled(Card)`
  background: #6a8a83;
  color: white;
`

Mais ça demande à avoir une connaissance de la structure du composant ce qui brise un peu le principe d'encapsulation.
2. Définir des tokens modifiables de l'extérieur (variable CSS). Par exemple:

const Container = styled.div`
  padding: 20px;
  width: 325px;
  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
  color: var(--card-color);
  background-color: var(--card-background-color);
`;

Et le styliser comme la solution 1 mais en spécifiant juste la valeur de ces tokens:

const PrimaryCard = styled(Card)`
  --card-background-color: #6a8a83;
  --card-color: white;
`