feat: add datetime components with hook form integration #42

walt-it · 2024-10-21T12:49:35Z

Add date time components

Currently we don't have any standard for date or time components, mostly because the libraries we usually reach out for (Radix and Headless) do not have them. This results in each project making different decisions for which one to use or in some cases even writing these complex components from scratch which is very error prone, leaving out accessibility concerns or not contemplating a lot of edge cases.

This proposal aims to add an implementation for a batch of components related to date and time selection, using these components from react-aria as a solid base.

Also includes a proposal for making these components usable with and without hook form integration. Special thanks to @slagomarsino-dev for the Typescript help on this!

If you want to try out the components, you can pull the branch and go to the /playground route. (I'll delete this before merging if we move forward and move the examples over to Storybook)

…rm-integration

src/domains/guest/screens/Playground.tsx

src/providers/Providers.tsx

src/shared/components/ui/index.ts

hyanez-lightit · 2024-11-13T15:24:15Z

Can we add some stories for it ?

slagomarsino-dev

Awesome work, you nailed it! 🚀 🔥

src/domains/guest/screens/Playground.tsx

src/shared/components/ui/Calendar/Calendar.tsx

src/shared/components/ui/Calendar/CalendarHeader.tsx

src/shared/components/ui/DateField/DateField.tsx

src/shared/components/ui/DatePicker/DatePicker.tsx

src/shared/components/ui/RangeCalendar/RangeCalendar.tsx

src/shared/components/ui/Calendar/Calendar.stories.tsx

…rm-integration

src/shared/components/ui/Calendar/Calendar.tsx

src/shared/components/ui/RangeCalendar/RangeCalendar.tsx

src/shared/components/ui/index.ts

ThunderNaka · 2024-12-04T13:54:38Z

src/shared/utils/dateWithoutTimezone.ts

@@ -3,3 +3,5 @@ export const dateWithoutTimezone = (input: string) => {
  const withoutTimezone = date.substring(0, date.length - 1);
  return new Date(withoutTimezone);
 };
+
+export const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;


Weird colocation for this function

We haven't talked about this yet, but I think we should figure out some sort of classification for utils. I feel like the way it's setup right now we will end up with too many files that only have one fn inside.

I can move it to its own file in the meantime.

ThunderNaka · 2024-12-04T13:55:35Z

src/shared/utils/findFirstEnabledDate.ts

+export const findFirstEnabledDate = (
+  table: HTMLTableElement | null,
+): Element | null => {
+  return (
+    table?.querySelector<HTMLTableCellElement>("td:not([aria-disabled])")
+      ?.children[0] ?? null
+  );
+};


Is this necesary? 🤔

We have to choose a place to put the controller.field.ref in order for hook form to focus on the correct element when the field is invalid. For calendars I chose the first enabled date and for that I need to reach into the table and choose the correct component to focus.

There's a number of ways we could do this, another option could be to focus on a wrapper div and use focus-within from tw to style it. But that also brings accessibility concerns because we have to manage screen reader labels ourselves.

I think pointing to the element that react-aria already manages it's the best choice.

ThunderNaka · 2024-12-04T13:57:04Z

src/shared/utils/isDateISOString.ts

@@ -0,0 +1,2 @@
+export const isDateISOString = (dateString: string) =>


We do not have this function in Light-it yet, is it mandatory to have this?

https://github.com/search?q=org%3ALight-it-labs+isDateISOString&type=code

It's used in the validations file in this PR to generate zod rules for both a date and a range of dates.
I think it would be a nice addition to the boilerplate to have a standard on date format and ISO seems like a good choice.

ThunderNaka · 2024-12-04T14:03:07Z

src/shared/components/ui/TimeField/TimeField.tsx

+const classNames = tv({
+  slots: {
+    dateInput:
+      "flex w-full items-center space-x-1 rounded-lg border p-2 md:w-fit",
+    dateSegment: "font-medium text-gray-800",
+  },
+})();


You are not going by the standard executing the tv function inline.

This was a suggestion by @slagomarsino-dev to group the styles into a classNames namespace and avoid confusion in the template because in this case names like dateInput or dateSegment might be confused with something else.

I agree with that but I'm also ok with calling them in the template, I think using them inside the classNames prop usually it's a good enough indication that it will output a class.

ThunderNaka · 2024-12-04T14:05:59Z

src/shared/components/ui/Calendar/CalendarDate.tsx

+      default: "",
+      selected: "bg-purple-500 text-white",
+      disabled: "cursor-not-allowed bg-slate-500 text-slate-400",
+      unavailable: "cursor-not-allowed bg-red-200 text-red-300",


Here, you can just have a selected, disabled, and unavailable variant instead of a "state." Then, you can use them.

ThunderNaka · 2024-12-04T14:47:28Z

src/shared/components/ui/TimeField/TimeField.tsx

+})();
+
+interface TimeFieldBaseProps<T extends TimeValue>
+  extends Omit<AriaTimeFieldProps<T>, "className"> {


Why are we omitting className?

That was based on a couple of things:

The className prop needs to be passed to an element inside, I'm assuming best place would be the wrapper element to use the override to add external margins for example. In that case, each project can make the decision to add this prop only when it's needed.

The className prop coming from react-aria can be both a string or a fn that receives component state (isDisabled for example) so it would require some additional checks to use it

I think it would be best to treat the ui components style as internal and manage any external spaces through other means, like flexbox or grid containers

ThunderNaka · 2024-12-04T14:48:02Z

src/shared/components/ui/TimeField/TimeField.tsx

+  label,
+  description,
+  errorMessage,


ThunderNaka · 2024-12-04T14:48:17Z

src/shared/components/ui/TimeField/TimeField.tsx

+      <DateInput className={classNames.dateInput}>
+        {(segment) => (
+          <DateSegment
+            ref={(el) => isFirstChild(el) && controller?.field.ref(el)}


ThunderNaka · 2024-12-04T15:00:21Z

src/shared/utils/isFirstChild.ts

+export const isFirstChild = (el: Element | null) => {
+  if (!el) return false;
+  return (
+    el.parentElement && Array.from(el.parentElement.children).indexOf(el) === 0
+  );
+};


What's the point of this?

Same as this: #42 (comment)

But in this case choosing the first date segment from the field to focus when it's invalid.

ThunderNaka · 2024-12-04T15:01:48Z

src/shared/types/form.ts

+export interface WithHookForm<U extends FieldValues> {
+  name: Path<U>;
+  control: Control<U>;
+  onChange?: never;
+  onBlur?: never;
+}
+// This type allows onChange and onBlur to be passed when there is no control.
+// Also makes name optional and a generic string instead of a form Path.
+export interface WithoutHookForm<T> {


Semantics, but both have hook forms; the difference is when they are controlled or uncontrolled.

Not sure I understand this, if I don't pass control to the component then hook form should have no idea that particular field exists. I am using useController inside on either case, is that what you meant?

These names makes sense to me but I'm open to change them to whatever seems clearer.

walt-it added 8 commits October 20, 2024 22:41

feat: add components

441f591

feat: add timezone constant

a7c89ad

feat: add field controller

56d1afd

feat: move timezone to utils + fix sentry path

736edf4

feat: add i18n provider

3ac8159

feat: fix range calendar styles

50a3e95

feat: add packages

c32daf0

feat: add playground route

dd505cb

github-actions bot added the WIP Work in progress or draft label Oct 21, 2024

walt-it changed the title ~~No task/add datetime components with hook form integration~~ feat: add datetime components with hook form integration Oct 21, 2024

Merge branch 'main' into no-task/add-datetime-components-with-hook-fo…

e7d7a6e

…rm-integration

walt-it commented Nov 13, 2024

View reviewed changes

src/domains/guest/screens/Playground.tsx Outdated Show resolved Hide resolved

walt-it commented Nov 13, 2024

View reviewed changes

src/providers/Providers.tsx Show resolved Hide resolved

walt-it commented Nov 13, 2024

View reviewed changes

src/shared/components/ui/index.ts Outdated Show resolved Hide resolved

walt-it requested a review from ThunderNaka November 13, 2024 14:57

walt-it removed the WIP Work in progress or draft label Nov 13, 2024

github-actions bot added the To Review label Nov 13, 2024

slagomarsino-dev reviewed Nov 13, 2024

View reviewed changes

walt-it added 6 commits November 14, 2024 16:58

feat: change to arrow fn

ab57abe

feat: organize validations

f1b0f5c

feat: change to arrow fns

813f35b

feat: remove unneeded type

1dd92a2

feat: add default stories

37e251b

feat: add more stories

ed49176

slagomarsino-dev reviewed Nov 15, 2024

View reviewed changes

src/shared/components/ui/Calendar/Calendar.stories.tsx Outdated Show resolved Hide resolved

walt-it added 4 commits November 15, 2024 16:26

feat: adjust stories

f547568

feat: adjust classNames

6d6079d

feat: add date range picker

2ef07db

Merge branch 'main' into no-task/add-datetime-components-with-hook-fo…

b42d441

…rm-integration

walt-it added 7 commits November 26, 2024 13:44

feat: add time field component

b31dbc1

feat: add auto focus on field error

4edf258

feat: extract message to component

7785dc7

feat: add icon props

3bb918f

feat: remove playground page

5170a04

feat: fix styles nesting

8b56dea

feat: refactor to separate CalendarDate

9eb4e04

slagomarsino-dev reviewed Dec 2, 2024

View reviewed changes

src/shared/components/ui/Calendar/Calendar.tsx Show resolved Hide resolved

src/shared/components/ui/RangeCalendar/RangeCalendar.tsx Show resolved Hide resolved

src/shared/components/ui/index.ts Outdated Show resolved Hide resolved

walt-it added 2 commits December 2, 2024 13:44

feat: omit classname

e31d836

feat: move types for forms

d163279

ThunderNaka reviewed Dec 4, 2024

View reviewed changes

walt-it added 2 commits December 4, 2024 15:12

feat: refactor classname conditions

565d0fe

feat: remove internationalized

c2f4876

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add datetime components with hook form integration #42

feat: add datetime components with hook form integration #42

walt-it commented Oct 21, 2024 •

edited

Loading

hyanez-lightit commented Nov 13, 2024

slagomarsino-dev left a comment

ThunderNaka Dec 4, 2024

walt-it Dec 4, 2024

ThunderNaka Dec 4, 2024

walt-it Dec 4, 2024

ThunderNaka Dec 4, 2024

walt-it Dec 4, 2024

ThunderNaka Dec 4, 2024

walt-it Dec 4, 2024

ThunderNaka Dec 4, 2024

ThunderNaka Dec 4, 2024

walt-it Dec 4, 2024

ThunderNaka Dec 4, 2024

ThunderNaka Dec 4, 2024

ThunderNaka Dec 4, 2024

walt-it Dec 4, 2024

ThunderNaka Dec 4, 2024

walt-it Dec 4, 2024

		@@ -0,0 +1,2 @@
		export const isDateISOString = (dateString: string) =>

feat: add datetime components with hook form integration #42

Are you sure you want to change the base?

feat: add datetime components with hook form integration #42

Conversation

walt-it commented Oct 21, 2024 • edited Loading

Add date time components

hyanez-lightit commented Nov 13, 2024

slagomarsino-dev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

walt-it commented Oct 21, 2024 •

edited

Loading