Skip to content
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

Conversation

khushal87
Copy link
Member

@khushal87 khushal87 commented Jun 13, 2021

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:

Suppose X is a component:
Directory structure:
X
 - X.tsx
 - index.tsx
 - __tests__

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 that src directory will only be exposed to the users and developers using index.ts and specific UI component's index.tsx. This change is done for the following components as they had child components:

  • Tile
  • Header
  • Checkbox
  • PricingCard
  • SpeedDial
  • ListItem
  • Slider
  • Tooltip
    An example of this pattern of modification is:
Suppose X is a component:
Directory structure:
X
 - components
       - Y.tsx
 - X.tsx
 - index.tsx
 - __tests__

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.

  • Badge
  • BottomSheet
  • Checkbox
  • Divider
  • Header
  • Icon
  • LinearProgess
  • Overlay
  • PricingCard
  • Searchbar
  • Slider
  • SocialIcon
  • Switch
  • Text
  • Tile
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 the index.tsx file itself.

  • Avatar
  • Card
  • Dialog
  • ListItem
  • Tab
  • TabView
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:

  • Image
  • Input
  • SearchBar
  • Tooltip
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:

  • Button
  • ButtonGroup
  • Chip
  • FAB
  • SpeedDial
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:

  • AirbnbRating as TapRating
  • Rating as SwipeRating The name of the folder is as per the usage.

Tags
#gsoc #docs-autogen #khushal87

@codecov
Copy link

codecov bot commented Jun 13, 2021

Codecov Report

❗ No coverage uploaded for pull request base (next@374884e). Click here to learn what that means.
The diff coverage is 84.19%.

❗ Current head 8d57827 differs from pull request most recent head 3284244. Consider uploading reports for the commit 3284244 to get more accurate results
Impacted file tree graph

@@           Coverage Diff           @@
##             next    #3081   +/-   ##
=======================================
  Coverage        ?   82.35%           
=======================================
  Files           ?       68           
  Lines           ?     1513           
  Branches        ?      666           
=======================================
  Hits            ?     1246           
  Misses          ?      263           
  Partials        ?        4           
Impacted Files Coverage Δ
src/card/Card.tsx 42.85% <ø> (ø)
src/card/CardDivider.tsx 50.00% <ø> (ø)
src/card/CardFeaturedSubtitle.tsx 33.33% <ø> (ø)
src/card/CardFeaturedTitle.tsx 33.33% <ø> (ø)
src/card/CardImage.tsx 66.66% <ø> (ø)
src/card/CardTitle.tsx 33.33% <ø> (ø)
src/config/BackgroundImage.tsx 100.00% <ø> (ø)
src/config/ThemeProvider.tsx 100.00% <ø> (ø)
src/config/colors.tsx 100.00% <ø> (ø)
src/config/colorsDark.tsx 100.00% <ø> (ø)
... and 57 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 374884e...3284244. Read the comment docs.

@khushal87 khushal87 changed the title [Refactor] Directory structure for simple components [Refactor] Directory structure of components Jun 18, 2021
@pranshuchittora
Copy link
Member

pranshuchittora commented Jun 20, 2021

Review Checklist

  • TSC Build
  • Tests
  • Website working & building

@pranshuchittora pranshuchittora merged commit d2c6733 into react-native-elements:next Jun 20, 2021
@khushal87 khushal87 deleted the khushal87-docs-autogen-refactor-1 branch July 3, 2021 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants