(hidden) yq0g7qElG | notes | kipras melnikovas

(hidden) CvCdNlLtD
re: [[(hidden) v8hKA88Fi]] old -> new mappings of #[[(hidden) 1zvQUPuRu]] (4 -> 5) & [[codemods]]:
- https://pipedrive.slack.com/archives/C02HVJZDBT2/p1636328227098000
- > a lot of manual work
  - {{[[DONE]]}} who's gonna do it?
  - {{[[DONE]]}} where do you find the mappings yourself?
    - comparing dist/ folders of v4 vs v5?
- {{[[TODO]]}} I'd like the data between `tokenMapping.js` & `index.jsx` connected:
  - similar to how I'm doing it w/ the jsx attributes/props codemod (which started from the button):
    - https://github.com/pipedrive/CodeshiftCommunity/pull/4/files
      - `community/@pipedrive__convention-ui-react/src/5.0.0/transforms/replace-jsx-prop-and-its-value.config.ts`
  - I'd use this data to better understand of how I should write the codemods
    - what's important to understand is that I've seen very little usage of CUI myself, thus I don't have an accurate real-world representation/mental-model of it. if I don't get it before I decide the architecture & start coding, it's almost inevitable I'll make wrong assumptions & everything that comes with that.
    - and, if we decide to make the style codemods __find-then-prove-only-then-replace__ instead of __find-then-replace__ (like w/ jsx props/attributes) - to filter that the stuff we're modifying is actually from CUI instead of spraying & praying.
      - tho this would likely be overkill. but again -- ((fxZHX-yDI))
  - {{[[DONE]]}} i.e., currently, from the index.tsx file, it's not clear what cases apply when:
    - > // direct usage of tokens in js/ts/jsx/tsx files
      - {{[[DONE]]}} did the import path change?
      - {{[[DONE]]}} is the imported `colors` thing only available as a default export, or a named/destructured export, or both?
      - {{[[TODO]]}} is the provided usage in the comments - the existing one?
        
        {{[[DONE]]}} is it the only way that the tokens are used? i.e. can there be more ways of doing it?
        
        e.g.
        
```javascript <Foo color={colors.white} />```

vs

```javascript const { white } = colors <Foo color={white} />```
        
        {{[[DONE]]}} & do we want to support migrating them? nope
      - {{[[DONE]]}} what is the `createGlobalStyle` utility?
        
        {{[[TODO]]}} -> dont care where util imported from, just look for tokens from cui and replace them if css
        
        {{[[TODO]]}} how is it imported?
        
        {{[[TODO]]}} is it from styled-components?
        
        {{[[TODO]]}} are the more utils like this that wrap the css stuff inside js? e.g. `styled` (default export from styled-components)?
    - > // changing token usages in pcss/sass files
- follow-up q's
- #[[(hidden) JcqOWMyQe]]
  - {{[[TODO]]}} border radius - add comment to do manual
  - {{[[DONE]]}} parse colors from csv
    - convo:
      - https://pipedrive.slack.com/archives/C02HVJZDBT2/p1636376552116700
    - {{[[DONE]]}} push repo to
      - https://github.com/martinrajdl/cui5map/tree/master/generate-mappings-from-csv
      - csv:
        
        latest (one big spreadsheet, gotta download each .csv separately):
        
        https://docs.google.com/spreadsheets/d/1OXfLPYhNQ-oRu-D4vFxe-GhQoFpJnHBsPLFwHf94ev4/edit#[[(hidden) G97ohL3l8]]gid=1865925161
        
        whenever we updated - inside the repo (separate .csv files!):
        
        ((HU5ks5Hh5))
    - {{[[TODO]]}} for spacing/size - get example from Martin when repo done
  - {{[[TODO]]}} don't worry about color edge cases for now
  - {{[[TODO]]}} per-file, not per-whole-program
  - ((C9-NbYAPt))
  - {{[[TODO]]}} for (post)css files, don't handle complex stuff like mixins, just do simple stuff
(hidden) iK5ZVNHlm
(hidden) AnVLqmuzC
(hidden) SA3UXK-BX

words:	426 + 13 = 439
last update: