Move date input component to UI library

christianjro commented 9 months ago

Description

I moved the date input component to the Storybook UI library and updated all relevant import statements so that it works as intended. I also created jest tests to make sure that the calendar component opens when the date input component is clicked, and closes when the user clicks outside of the calendar.

Related Issues

Resolves #588

Testing

To run all testing suites: pnpm test
To run individual test I created: pnpm test packages/ui/src/components/date-input/date-input.test.tsx

PASS  src/features/instructions/how-it-works-button.test.tsx
PASS  ../ui/src/components/modal/modal.test.tsx
PASS  ../ui/src/components/date-input/date-input.test.tsx
PASS  ../ui/src/components/pick-list/pick-list.test.tsx
PASS  src/widgets/radius-tool/radius-tool.test.tsx
PASS  src/widgets/header/header.test.tsx
PASS  ../ui/src/components/stepper/stepper.test.tsx
PASS  ../ui/src/components/input/input.test.tsx

Test Suites: 8 passed, 8 total
Tests:       50 passed, 50 total
Snapshots:   0 total
Time:        16.362 s
Ran all test suites.

Updated Testing Coverage

File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -- | -- | -- | -- | -- | -- All files | 10.92 | 7.93 | 11.8 | 11.32 | src | 0 | 100 | 100 | 0 | main.tsx | 0 | 100 | 100 | 0 | 1-6 vite-env.d.ts | 0 | 0 | 0 | 0 | src/app | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 src/app/ui | 0 | 100 | 0 | 0 | app.tsx | 0 | 100 | 0 | 0 | 1-17 index.ts | 0 | 100 | 0 | 0 | 1 src/app/ui/layouts | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 screen-layout.tsx | 0 | 100 | 0 | 0 | 1-5 src/app/ui/routing | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 router.tsx | 0 | 100 | 100 | 0 | 1-14 src/entities/branding | 100 | 100 | 100 | 100 | index.ts | 100 | 100 | 100 | 100 | src/entities/branding/ui | 100 | 100 | 100 | 100 | logo.tsx | 100 | 100 | 100 | 100 | src/entities/map/lib/controls | 0 | 0 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1-2 map-draw-control.tsx | 0 | 0 | 0 | 0 | 1-75 map-draw-styles.ts | 0 | 100 | 100 | 0 | 1-126 use-map-draw.tsx | 0 | 100 | 0 | 0 | 1-8 src/entities/map/lib/provider | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 map-provider.tsx | 0 | 100 | 0 | 0 | 1-38 src/entities/navigation | 100 | 100 | 100 | 100 | index.ts | 100 | 100 | 100 | 100 | src/entities/navigation/lib | 100 | 100 | 100 | 100 | paths.ts | 100 | 100 | 100 | 100 | src/features/citation | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1-4 src/features/citation/lib | 0 | 0 | 0 | 0 | constants.ts | 0 | 0 | 0 | 0 | 1-7 index.ts | 0 | 100 | 100 | 0 | 1 src/features/citation/ui | 0 | 0 | 0 | 0 | citation-data-category-selection.tsx | 0 | 100 | 0 | 0 | 1-16 citation-data-filter.tsx | 0 | 100 | 0 | 0 | 2-14 citation-data-insights.tsx | 0 | 0 | 0 | 0 | 1-36 citation-date-presets-selection.tsx | 0 | 100 | 0 | 0 | 1-15 src/features/geocoder | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1-5 src/features/geocoder/api | 0 | 0 | 0 | 0 | endpoints.ts | 0 | 0 | 0 | 0 | 1-33 index.ts | 0 | 100 | 100 | 0 | 1 requests.ts | 0 | 0 | 0 | 0 | 1-7 src/features/geocoder/lib | 0 | 0 | 0 | 0 | constants.ts | 0 | 0 | 0 | 0 | 1-23 utilities.ts | 0 | 0 | 0 | 0 | 1-28 src/features/geocoder/ui | 0 | 0 | 0 | 0 | geocoder-result-header.tsx | 0 | 100 | 0 | 0 | 1-4 geocoder-result.tsx | 0 | 100 | 0 | 0 | 1-26 geocoder.tsx | 0 | 0 | 0 | 0 | 1-79 region-types-selection.tsx | 0 | 100 | 0 | 0 | 1-14 search-mode-toggle-button.tsx | 0 | 100 | 0 | 0 | 1-8 src/features/instructions | 77.77 | 100 | 50 | 87.5 | how-it-works-button.tsx | 100 | 100 | 100 | 100 | index.ts | 0 | 100 | 0 | 0 | 1 src/features/map | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1-5 src/features/map/ui | 0 | 0 | 0 | 0 | map.tsx | 0 | 0 | 0 | 0 | 1-60 use-map.tsx | 0 | 0 | 0 | 0 | 1-9 src/features/map/ui/draw | 0 | 0 | 0 | 0 | map-draw-action-button.tsx | 0 | 100 | 0 | 0 | 1-6 map-draw-apply-button.tsx | 0 | 0 | 0 | 0 | 1-17 map-draw-button.tsx | 0 | 0 | 0 | 0 | 1-21 map-draw-clear-button.tsx | 0 | 0 | 0 | 0 | 1-24 map-draw-instructions.tsx | 0 | 100 | 0 | 0 | 1-17 src/pages | 0 | 0 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 page.tsx | 0 | 100 | 0 | 0 | 2-7 parking-insights-page.tsx | 0 | 0 | 0 | 0 | 1-35 src/shared/data | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1-2 src/shared/data/feature-collections | 0 | 100 | 100 | 0 | index.ts | 0 | 100 | 100 | 0 | 1-5 src/shared/data/store | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1-4 store.ts | 0 | 100 | 100 | 0 | 1-14 ui-slice.ts | 0 | 100 | 0 | 0 | 3-45 src/shared/lib/constants | 0 | 0 | 0 | 0 | date.ts | 0 | 0 | 0 | 0 | 1-5 src/shared/lib/types | 0 | 100 | 100 | 0 | index.ts | 0 | 100 | 100 | 0 | 1 src/shared/lib/utilities | 0 | 0 | 0 | 0 | date.ts | 0 | 0 | 0 | 0 | 1-25 enum.ts | 0 | 100 | 0 | 0 | 1-5 string.ts | 0 | 0 | 0 | 0 | 1-4 src/shared/lib/utilities/testing | 100 | 50 | 100 | 100 | index.ts | 100 | 100 | 100 | 100 | test-wrapper.tsx | 100 | 0 | 100 | 100 | 11 testing.tsx | 100 | 66.66 | 100 | 100 | 6 src/shared/ui/fake-input | 0 | 100 | 0 | 0 | fake-input.tsx | 0 | 100 | 0 | 0 | 2-14 index.ts | 0 | 100 | 0 | 0 | 1 src/shared/ui/radio-group | 0 | 0 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 radio-group.tsx | 0 | 100 | 0 | 0 | 1-20 radio-option.tsx | 0 | 0 | 0 | 0 | 10-22 src/shared/ui/visualization | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 visualization-stub.tsx | 0 | 100 | 0 | 0 | 1-2 src/widgets/citation | 0 | 100 | 0 | 0 | index.ts | 0 | 100 | 0 | 0 | 1 src/widgets/citation/ui/explorer | 0 | 0 | 0 | 0 | citation-explorer-divider.tsx | 0 | 100 | 0 | 0 | 1-2 citation-explorer-section-title.tsx | 0 | 100 | 0 | 0 | 3-4 citation-explorer-section.tsx | 0 | 100 | 0 | 0 | 3-4 citation-explorer-title.tsx | 0 | 0 | 0 | 0 | 2-12 citation-explorer.tsx | 0 | 0 | 0 | 0 | 1-63 src/widgets/citation/ui/search | 0 | 0 | 0 | 0 | comparative-search.tsx | 0 | 0 | 0 | 0 | 1-86 draw-search.tsx | 0 | 100 | 0 | 0 | 1-10 single-seach.tsx | 0 | 100 | 0 | 0 | 1-16 src/widgets/citation/ui/visualization | 0 | 0 | 0 | 0 | comparative-search-visualization-focused.tsx | 0 | 100 | 0 | 0 | 1-29 comparative-search-visualization.tsx | 0 | 0 | 0 | 0 | 1-39 single-search-visualization.tsx | 0 | 100 | 0 | 0 | 1-32 src/widgets/header | 75 | 100 | 50 | 85.71 | header.tsx | 100 | 100 | 100 | 100 | index.ts | 0 | 100 | 0 | 0 | 1 src/widgets/radius-tool | 68.57 | 22.22 | 42.85 | 77.41 | index.ts | 0 | 100 | 0 | 0 | 1 radius-tool.tsx | 72.72 | 22.22 | 50 | 80 | 27-31,35,54 src/widgets/radius-tool/utils | 54.05 | 50 | 43.75 | 54.05 | formatDecimals.ts | 100 | 100 | 100 | 100 | unit-convertor.ts | 48.48 | 40 | 40 | 48.48 | 18-23,30-34,40,71-107

Checklist

[x] I have followed all conventions outlined in our documentation.
[x] I have fully tested my changes and confirmed that all new and existing tests pass.
[x] I have written meaningful commit messages for all changes.
[x] I have linted and formatted my changes to follow the code style of this repository.
[x] I have updated our documentation, accordingly.
[x] I have checked currently opened pull requests to ensure that there are no pending pull request for the same changes or issues.
[x] I have confirmed that this pull request fully meets the acceptance criteria for all related issues listed above.

netlify[bot] commented 9 months ago

Deploy Preview for lucky-parking-staging-storybook ready!

Name	Link
Latest commit	10192564336b60116b99faa69f9859c5deb0d570
Latest deploy log	https://app.netlify.com/sites/lucky-parking-staging-storybook/deploys/656138d80bf120000896d99e
Deploy Preview	https://deploy-preview-594--lucky-parking-staging-storybook.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 9 months ago

Deploy Preview for lucky-parking-staging ready!

Name	Link
Latest commit	10192564336b60116b99faa69f9859c5deb0d570
Latest deploy log	https://app.netlify.com/sites/lucky-parking-staging/deploys/656138d89bd8820008b2e310
Deploy Preview	https://deploy-preview-594--lucky-parking-staging.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

christianjro commented 9 months ago

Solid work! Great job with testing the open and close interaction!

Can we change the git log to present tense. Reason being, present tense puts on commits as change logs vs past tense focus on the user making the change

Can we also get copy of what test were ran, and a table of the new test coverage. Example

Thanks for the feedback, just made all the changes!

glenflorendo commented 9 months ago

Solid work! Great job with testing the open and close interaction! Can we change the git log to present tense. Reason being, present tense puts on commits as change logs vs past tense focus on the user making the change Can we also get copy of what test were ran, and a table of the new test coverage. Example

Thanks for the feedback, just made all the changes!

Great work, @christianjro! In addition to making the changes and replying to our suggestions, could you also click on "Resolve conversation"? It allows the PR to be merged once approved.

glenflorendo commented 9 months ago

@christianjro Can you resolve the merge conflicts?

hackforla / lucky-parking