Feat: Split the Drawer component

[nick-y-ito]

Overview

This pull request introduces two new components: BaseDrawer and PrimaryDrawer. The purpose of this change is to demonstrate how to follow the Open-Closed Principle of the SOLID principles when creating multiple variations of drawer components. Please note that the existing drawer components (Drawer.tsx, DrawerUsageExample.tsx, SecondaryDrawer.tsx, and SecondaryDrawerUsageExample.tsx) have intentionally been kept for reference.

Changes

• Created the BaseDrawer component.
• Created the PrimaryBottomDrawer component.
• Created the PrimaryBottomDrawerUsageExampel.
• Put all the newly created files in the Drawers/ directory.

Review points

Screen Captures

Note

• The next task will be #188
• The implementation of this PR is an example of creating a customized drawer for various needs.
• Thus, I renamed PrimaryBottomDrawer to ExampleDrawer since we no longer need the drawer with a primary color background.

Assignee Checklist:

• [x] The naming convention of the PR title is correct (See the comment at the top of this template)
• [x] The base branch is correct (See: Types of Branches)
• [x] The branch name follows the Branch Naming Conventions
• [x] The correct assignees and reviewers have been designated for this PR
• [x] The coding style follows the Coding Style Guide
• [x] All the related issues are associated with this PR
• [x] All criteria in the associated issues are met (please tick the checkboxes)
• [x] My changes do not generate new warnings or errors (especially in the console)

Reviewer Checklist:

• [ ] Double-check the "Assignee Checklist"
• [ ] The code follows the generic best practices and our Coding Style Guide
• [ ] The code is well-commented and easy to understand
• [ ] The UI changes accurately reflect the provided design

[nick-y-ito]

@kotaaaa @kanta1207 @ShoeheyOt

Hi guys, please let me share my thoughts on how to handle this PR. As per our earlier verbal discussion, we have decided that we no longer need the PrimaryBottomDrawer. However, I think it would still be good to merge this PR, maybe along with @ShoeheyOt 's PR, to preserve the BaseDrawer and provide an example of how to implement a customized drawer for each need by inheriting BaseDrawer. We just need to make sure to delete the SecondaryDrawer when merging into the develop branch.

Therefore, I renamed PrimaryBottomDrawer to ExampleDrawer and added some comments to indicate that it's an example file.

To know how I updated after the verbal discussion, please take a look at the commits after cd19587 (#186)

I'd also love to hear your opinions.

[kanta1207]

@kotaaaa @kanta1207 @ShoeheyOt

Hi guys, please let me share my thoughts on how to handle this PR. As per our earlier verbal discussion, we have decided that we no longer need the PrimaryBottomDrawer. However, I think it would still be good to merge this PR, maybe along with @ShoeheyOt 's PR, to preserve the BaseDrawer and provide an example of how to implement a customized drawer for each need by inheriting BaseDrawer. We just need to make sure to delete the SecondaryDrawer when merging into the develop branch.

Therefore, I renamed PrimaryBottomDrawer to ExampleDrawer and added some comments to indicate that it's an example file.

To know how I updated after the verbal discussion, please take a look at the commits after cd19587 (#186)

I'd also love to hear your opinions.

Thank you for sharing & summarizing your thoughts on this and I totally agree with you! I especially liked your idea on renaming PrimaryBottomDrawer to be Example, that's really a nice way to keep this work and Shu and Yusuke's effort for future!

[nick-y-ito]

@kanta1207 @kotaaaa @ShoeheyOt Thank you for your feedback :) I will merge it now!