Spike on USWDS Date picker

[jonnalley]

Goals

• Understand feasibility of using the USWDS date picker instead of what we have now when choosing PoP and need by dates
• Get a feel for what issues or problems it causes to switch to this

Tasks

UX

• update Figma designs to incorporate date-picker component #2202

Dev

• Review options
• Date Picker
  • Replace Need By Date in the BLI Form
  • refactor CRUD operations
  • refactor CANSelect #2169
  • refactor validations
• create/edit/update unit and e2e tests
• Tech Debt
  • add validation to Services Components
  • 🐛 in review mode, cancelling deletes agreement #2185
• UX Review
  • ensure date is in valid format before posting form #2204

Additional Context

• This came up when building Incorporate Services Components into contract creation #1852
• We'll need to remove uswds javascript since it conflicts with Trussworks and Comet libraries
  • will need to refactor the CanSelect Combobox and any other ComboBoxes relying on uswds js

Resources

• timely Syntax podcast on UI Component Libraries
• USWDS Date Picker
  • 🟢 working similar to Comet's implementation
• Comet's Date Picker
  • 🟠 got it working but calendar looks a little wonky
  • not consistent with their storybook example?
  • re-renders extra white-space on form 😞
• Trussworks Date Picker
  • 🟠 working but...
  • 🔴 unable to set form state since its an uncontrolled component
• MDN Docs on input date
• Adobe's Date Picker and lower level React Aria component
• Radix does not have a DatePicker 🫠
• AirBnBs Date Picker looks pretty good 🤩

[fpigeonjr]

Got the DatePicker working for both the Comet and Trussworks components. There is an issue with the alignment on the dates that I am running down as seen here:

[fpigeonjr]

solved the css issue and working on the embedding on the BLI Form

• Comet seemed to re-render on input changes in the form
• Trussworks seemed solid so going with that for now

[fpigeonjr]

@jonnalley @kimschulke :
I think the Date Range Picker may be a good choice for Period of Performance Start and End Dates.

Would it be ok to experiment with that component in this SPIKE for POP start and end dates?

[jonnalley]

@fpigeonjr go for it !

[fpigeonjr]

👍 will do @jonnalley

[fpigeonjr]

DatePicker not updating form state may be related to Trussworks issue 2348

[fpigeonjr]

started re-working a custom DatePicker based on Comet's implementation

[fpigeonjr]

my custom DatePicker component is working now without re-rendering and we are able to set form state
🤩thanks Co-Pilot

[fpigeonjr]

• added vest validations to DatePicker and AllServicesComponent
• found bug in review-mode cancelling out of wizard deletes Agreement
• added tasks for DateRangePicker and CANSelect refactor

[fpigeonjr]

• Completed the refactor of CanSelect to CanComboBox using the ComboBox implementation via react-select as seen on our other combo boxes in the app.
• Will start e2e testing updates tomorrow

[fpigeonjr]

• restarted work on DatePicker on a new branch due to numerous merge conflicts and eslint weirdness.
• Accordion functionality broke so needed to fix this as well
• updated e2e tests for new DatePicker

[fpigeonjr]

• completed UX review on 4/18/2024 and added tasks ensure date is in valid format before posting form #2204 and update Figma designs to incorporate date-picker component #2202
• DateRangePicker is on its own gh-issue now

[fpigeonjr]

@jonnalley dev tasks are complete for this user-story

[jonnalley]

4/19