UnlockedLabs / UnlockEdv2

UnlockedLabs' WIP education portal/SIS for capturing meaningful progress of incarcerated learners in external providers, to help earn good time credits
5 stars 18 forks source link

Organize components into folders & export components in `index.js` file #413

Open jtucholski opened 1 week ago

jtucholski commented 1 week ago

Files could be better organized in the frontend by the use of folders. We should research a best way to organize these as our codebase will only grow from here.

Moreover, to make importing components from the same folder simplified, we should include an index.js file, especially in the /Components folder. This should export all components in that folder so they can then be imported in the same line wherever they are used.

jtucholski commented 1 week ago

@calisio What do you think about a folder structure like this? Maybe it gets the conversation started.

Most of the application is grouped by features. We could define Pages and Components for each feature group. Here's an example:

/src
  /features
    /dashboard
      /pages
        - Dashboard.tsx
        - AdminDashboard.tsx
        - StudentDashboard.tsx
      /components
        - StatsCard.tsx
    /user-management
      /pages
        - UserActivity.tsx
        - ManageUsers.tsx
      /components
        - UserTable.tsx
        - UserActivityMap.tsx
    /resources
      /pages
        - ResourcesManagement.tsx
      /components
        - ResourcesCategoryCard.tsx
        - ResourcesSideBar.tsx
        - EditResourceCollectionForm.tsx
    /provider-platform
      /pages
        - ProviderPlatformManagement.tsx
      /components
        - AddProviderForm.tsx
        - MapUserForm.tsx
        - ShowImportedUsers.tsx
    /auth
      /pages
        - Login.tsx
        - ResetPassword.tsx
        - Consent.tsx
      /components
        - LoginForm.tsx
        - ResetPasswordForm.tsx
        - ConsentForm.tsx
    /notifications
      /components
        - NotificationCard.tsx
        - NotificationSideBar.tsx
    /errors
      /pages
        - Unauthorized.tsx
        - Error.tsx
    /common
      /components
        - Navbar.tsx
        - Pagination.tsx
        - Modal.tsx
        - ThemeToggle.tsx
        - Toast.tsx
      /charts
        - MonthActivityChart.tsx
        - MilestonesBarChart.tsx
        - TopProgActivityPieChart.tsx
      /inputs
        - TextInput.tsx
        - DropdownInput.tsx
        - SearchBar.tsx
        - SubmitButton.tsx
      /pills
        - GreyPill.tsx
        - RedPill.tsx
        - DarkGreenPill.tsx
        - TealPill.tsx
        - YellowPill.tsx
        - LightGreenPill.tsx