[Refact/Fix] typescript styled components #219
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/1hive/quests/Db53565CyF5xsodjw9v8USssV1Kf |
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
packages/react-app/src/components/field-input/date-field-input.tsx
Outdated
Show resolved
Hide resolved
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
packages/react-app/src/components/utils/transaction-progress-component.tsx
Outdated
Show resolved
Hide resolved
kamikazebr
commented
Apr 10, 2022
kamikazebr
commented
Apr 10, 2022
Corantin
approved these changes
Apr 11, 2022
kamikazebr
commented
Apr 12, 2022
kamikazebr
commented
Apr 14, 2022
kamikazebr
commented
Apr 14, 2022
| @@ -12,9 +12,8 @@ | |||
| "@babel/preset-typescript" | |||
| ], | |||
| "plugins": [ | |||
| ["babel-plugin-styled-components", { "displayName": true }], | |||
| "@babel/plugin-transform-react-jsx-source", | |||
| "@babel/plugin-proposal-class-properties" | |||
There was a problem hiding this comment.
It exist inside the react-preset
kamikazebr
commented
Apr 14, 2022
| @@ -42,6 +42,7 @@ | |||
| "react/no-unused-prop-types": "warn", | |||
| "jsx-props-no-spreading": "off", | |||
| "react/jsx-props-no-spreading": "off", | |||
| "react/state-in-constructor": "off", | |||
There was a problem hiding this comment.
Needed because some preset (i think airbnb) and the ErrorBoundary component dont have constructor to receive the props.
kamikazebr
commented
Apr 14, 2022
| @@ -89,16 +89,16 @@ | |||
| "@babel/preset-react": "^7.7.4", | |||
| "@babel/preset-typescript": "^7.16.7", | |||
| "@sentry/webpack-plugin": "^1.15.1", | |||
| "@testing-library/react-hooks": "^7.0.2", | |||
| "@testing-library/react-hooks": "^8.0.0", | |||
There was a problem hiding this comment.
They fixed the react problem with versions, it was getting react 18
kamikazebr
commented
Apr 14, 2022
| "@types/jest": "^27.4.1", | ||
| "@types/lodash-es": "^4.17.5", |
kamikazebr
commented
Apr 14, 2022
Comment on lines
+147
to
+148
| "@types/react": "17.0.44", | ||
| "@types/react-dom": "17.0.15" |
There was a problem hiding this comment.
Fixed the react types using resolutions
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We need re-able typescript to styled-components.
It could avoid errors, typos and acelerate the development, mainly for the new contributors.
Plus we get fast refactors when we need, because the IDE will warn us about if it's broken before we try test it out.
Bugs / typos found
Some bug / typos founded in convertion
FilterWrapperStyledbut one have and useisSmallResolutionthe another not.And more in changed files.
Advantages
1 IDE pop up the correct type and we get the power of use TypeScript
2 Refactor are more fast and safe to do.
3 If you dont know how the component works, you dont need read ton the codes, just check the types that accept.
4 Avoid typos, errors and bugs
2 Alternatives to implement
1 adding types direct in generic space - more simple
2 creating interface/type to more complex properties
Bonus
Like the last image above, we yet can get more strong type using
css template stringit allow write css code with IDE help and check, if all its right.