-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Refactor] Directory structure of components #3081
[Refactor] Directory structure of components #3081
Conversation
Codecov Report
@@ Coverage Diff @@
## next #3081 +/- ##
=======================================
Coverage ? 82.35%
=======================================
Files ? 68
Lines ? 1513
Branches ? 666
=======================================
Hits ? 1246
Misses ? 263
Partials ? 4
Continue to review full report at Codecov.
|
…autogen-refactor-1
…e, Input, ListItem, Tooltip
…-native-elements into khushal87-docs-autogen-refactor-1
…-native-elements into khushal87-docs-autogen-refactor-1
Review Checklist
|
What kind of change does this PR introduce?
This PR refactors the directory structure of the components as in the list below. This includes both simple and compound components. There are other refactoring including importing the Rating components(TapRating, SwipeRating), etc. All the directories and files are using a common pattern including usage of props and the way it's imported and used.
Did you add tests for your changes?
Yes, I have done the required changes in the tests if needed and have maintained the imports for the components as and when required.
If relevant, did you update the documentation?
Not required for this change.
Summary
I have changed the directory structure considering the point in mind that it will unlock new possibilities when it comes to working with the code. The directory structure along with the components files is now uniform. An example of the pattern can be found here:
Now, if there's a child component that is used by some other component then I have created a
components
sub-directory for it. I have done this considering the point thatsrc
directory will only be exposed to the users and developers using index.ts and specific UI component'sindex.tsx
. This change is done for the following components as they had child components:An example of this pattern of modification is:
Moreover, I have tried my best to make the components code linear within the components files. This includes export, import, usage structure.
Does this PR introduce a breaking change?
Yes, this makes the directory structure uniform such that new developers can find it easy to work on the project and this also allows adding ideas like Docs Autogen easier as this will help a common parser/code to parse the components and extract information out of it.
Other information
Components whose directory structure are refactored:
Simple Components
The simple components follow the architecture as mentioned above in the example.
Compound Components
They use Base components which are exported along with the other components in the
index.tsx
file. The Themed export is also done in theindex.tsx
file itself.Class based Components
Some of the components are still using the traditional class-based components. I have done the folder restructuring including adding
index.tsx
file and doing the import-export work for the components. These include:Buttons
There is a folder restructure for Button components. Previously components like Chip, ButtonGroup, SpeedDial, etc. whereinto the same directory as
buttons
, and now all the components have their own directory. This solution will unlock structured and readable code including other benefits. Components for which the following change is done:Ratings
The package currently directly uses Rating components such as TapRating, SwipeRating directly from the package
react-native-ratings
. To generate documentation automatically we need to provide the components as a separate entity in the code. Therefore, I have created two different folders with the same names as users would import them:Tags
#gsoc #docs-autogen #khushal87