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.

Sign up for GitHub

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

Jump to bottom

Epic 2 Foundational UI -- Profile Notifications/No Organizations Views #324

Merged
merged 24 commits into from
Feb 14, 2024
Merged

Epic 2 Foundational UI -- Profile Notifications/No Organizations Views #324

merged 24 commits into from
Feb 14, 2024

Conversation

joshua-rdrgz
Copy link
Collaborator

Sorry for the code bomb! This PR contains foundational UI components for building out Epic 2's UI, as well as the UI for the Profile page's "Notifications" view and "My Organizations" view when the user has no organizations.

Changes

Foundational UI components added:

  • Dialog (modals)
  • Form
  • Label
  • Input
  • Select
  • CreateOrganizationBtn: button component that activates a modal dialog containing the form for creating organizations.

Layout UI components added:

  • ProfileNotifications view for user's invitations to organizations
  • ProfileOrganizations view for viewing user's organizations.
  • Updated profile page base component to incorporate two new views.

Libraries Introduced

  • Radix UI -- open-source component library with unstyled components focused on ease of use and accessibility. More here: https://www.radix-ui.com/primitives
  • Shadcn/ui -- based foundational UI components off this copy/paste library (no dependency needed). Contains default styles that look amazing, and the library is based off Radix UI. I converted the Tailwind classes the library provides to CSS modules that fit with NPDC. More here: https://ui.shadcn.com/
  • Zod -- a library for TypeScript-first schema validations, used primarily for easy and effective form validation. More here: https://zod.dev/?id=introduction
  • @hookform/resolvers -- an easy to use package that connects Zod schemas to React Hook Form for easy and effective form validation. More here: https://www.npmjs.com/package/@hookform/resolvers

Screenshots

Screenshot 2024-02-11 at 5 33 06 PM Screenshot 2024-02-11 at 5 35 19 PM Screenshot 2024-02-11 at 5 33 29 PM Screenshot 2024-02-11 at 5 33 55 PM Screenshot 2024-02-11 at 5 34 21 PM Screenshot 2024-02-11 at 5 34 43 PM Screenshot 2024-02-11 at 5 35 03 PM

@joshua-rdrgz
Polish profile page UI layout
c527f7d
@joshua-rdrgz
Modify DataTable to accept any type/interface
cc26884
@joshua-rdrgz
Add left/right margins to profile page container
aa0cae5
@joshua-rdrgz
Add ProfileNotifications component
44bae5e
@joshua-rdrgz
Add ProfileOrganizations component and related subcomps
cbbc30e
@joshua-rdrgz
Add "Notifications" and "Organizations" to Profile Menu
e8b39f9
@joshua-rdrgz
Install form-validation/Radix-UI dependencies:
b2440c8 
Radix UI Dependencies:
@radix-ui/react-dialog
@radix-ui/react-label
@radix-ui/react-select
@radix-ui/react-slot
@radix-ui/react-toggle-group

Form Validation Dependencies:
@hookform/resolvers
react-hook-form (UPDATED)
zod
@joshua-rdrgz
Create foundational Dialog component(s)
34d4203
@joshua-rdrgz
Add useId hook for form accessibility
daa7a72
@joshua-rdrgz
Create base label component
499d0eb
@joshua-rdrgz
Create base form component(s)
0d6d10e
@joshua-rdrgz
Create select/option(s) component(s)
ba75b6f
@joshua-rdrgz
Create foundational <input> component
cdb8264
@joshua-rdrgz
make PrimaryButton receive forwarded "ref"
d8889d3
@joshua-rdrgz
Add foundational UI components to shared-components export
10cb92b
@joshua-rdrgz
Create CreateOrganizationBtn component w/dialog functionality
f9406fa
@joshua-rdrgz
Place CreateOrganizationBtn in profile views
623efdd 
Notifications View
No Organizations View
@joshua-rdrgz
Add confirm dialog to Join/Leave btn on notifications table
c6330b2
@joshua-rdrgz
update profile page snapshot: add 2 sections to profile nav
f484cdb
@joshua-rdrgz
Merge branch 'main' into josh/epic-two-ui
889e3d2
@joshua-rdrgz
get rid of unnecessary console log in useId hook
3875530
@joshua-rdrgz
fix CreateOrganizationBtn import in NoOrganizations component
2214ced
@joshua-rdrgz
Update "org already exists" text in CreateOrganizationForm
95fe5dc
@joshua-rdrgz joshua-rdrgz added enhancement New feature or request frontend labels Feb 11, 2024
@joshua-rdrgz
Downgrade "react-hook-form" to 7.25.0
c4e8a5d 
Solves type errors related to react-hook-form and form validation resolvers
DMalone87
DMalone87 approved these changes Feb 14, 2024
View reviewed changes
Copy link
Collaborator

@DMalone87 DMalone87 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent! Looks good.

@joshua-rdrgz joshua-rdrgz merged commit 6f29f7f into codeforboston:main Feb 14, 2024
3 checks passed
@joshua-rdrgz joshua-rdrgz deleted the josh/epic-two-ui branch February 14, 2024 21:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DMalone87 DMalone87 DMalone87 approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request frontend
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@joshua-rdrgz @DMalone87