Rework a bit the recent work made on RHF example to make some component
more generic, such as RhfSelect and RhfDatepicker, which is based on a
design using RHF context hooks to provide a seamless integration.
Fixes#144
Based on recent developers feedbacks that needed to use props types
in order to wrap the lib's component they were stuck because we were
not exporting all of them.
Fixes#143
Major Changes
- The first bunch of components and features are ready,
the first milestone has been reached
Minor Changes
- 9edb976: Position Datepicker popover on top or bottom depending space
available
Patch Changes
- fd7ad8a: Do not apply font-family to all elements with `*` selector
Position the datepicker on top of the input when the input is
at the bottom of the screen and whenthere is enough space to display
the datepicker on the top.
Currently, `react` package use `*` selector to enforce the font family
to all elements. That is weird as all elements are not able anymore to
inherit their font-family from their parent. In order to enforce the use
of font-family base by default without breaking the parent inheritance,
we apply font-family to the body element instead.
Fix#137
By default, component's timezone is the user locale timezone.
Component now offers a way to set its timezone to any supported
Intl timezone format. Please note that output values from the
component will always be converted to a UTC timezone.
Enforces a standardized approach for end consumers using the
component's API. Consumers are now required to provide a date as an
ISO string in either UTC or with a UTC offset. The support for native
Date objects has been removed to ensure consistent and reliable
behavior across all implementations. By adopting this uniform input
format, we can simplify usage and avoid potential inconsistencies in
date handling.
By introducing this utility function, we ensure that any output value
is converted back to an ISO 8601 date and time string in UTC timezone.
Overall, it harmonize and factorize the way we output
values from date picker components.
DateRangePicker aria-labels mention when a selected date range
contains today's date, which breaks the tests while ran on the
first day of the month. Avoid these tests to be flaky.
Previously the generator was only handling hard-defined design tokens
preventing to make custom tokens to appear in the scss generated file.
This new way of generating the file handles custom tokens in a more
generic way.
Refactor tests to enhance simplicity and clarity by introducing
expected string values. This improvement is particularly relevant
for focused months and focused year scenarios. Consequently, the
tests no longer depend on the user's locale.
Resolve development warning in `CalendarAux` component caused
by recent updates to react-aria dependencies. Update props for next
and previous calendar buttons, removing `onFocusChange` before
passing to the Button component.
If we had more than 1 columns with custom cells, we would get a warning
about duplicate keys, because every columns got the key `actions`.
We add the column index to the key to make it unique.
Show international capabilities of the `DatePicker` component using the
`locale` props and the Cunningham provider. Dates would
be automatically displayed in the appropriate calendar system.
Refactor the original DatePicker component to utilize the newly created shared
common DatePickerAux component. This modification enhances code consistency,
and promotes the reuse of the DatePickerAux across date inputs variants.
Previously we were not fully using CSS variables as values used in
CSS were hard-coded one. It wasn't keeping the variable references.
This was causing issues when customizing the theme, because editing
colors was not enough, it was needed to customize also the tokens
using these variables. Now by introducing ref() we can delegate how
to deal with these directly to the generators themselves.
Due to the previous changes of LabelledBox that allows it to fit dynamic
height containers, we forgot to update the DatePicker resulting in a broken
CSS alignment.
Adding this new variant makes necessary to reorganize the files to keep
a clear separations of concerns. As of now Select/index.tsx is just an
entrypoint to render either the mono or multi variant of the select.
Select under the calendar component were not properly initialized,
leading to issues. Additionally, syncing the dropdowns with the calendar
state was causing unnecessary renders. Selects now update on user events
triggered by the toggle button, ensuring the selected item remains
up-to-date. The code has been refactored to eliminate duplication
and improve the component's readability and maintainability.
Based on the Figma DS design by Alex, a mono date-picker
component has been added. It uses react-aria headless ui
component capabilities, with downshift headless ui component.
React-aria was not supporting by default dropdown menus to
select months and years. We could not reuse Popover component
from react-aria because we are not using their headless ui
component for the button one. Clicking on the toggle calendar
button triggers both the button and the popover click outside
events. React-aria button uses a custom onPress props that is
disabled by their popover. Instead, I have implemented a simple
custom hook. This is the first acceptable version of the component.
Some minor user interaction are missing. This first component
doesn't support time selection.
A design system needs a popover mecanism.
In the select component, this logic is handled by downshift.
We introduce a new component, responsible to open an element in
a popin and close it when the user click outside of it.
Some older tools misbehave if the last line of data
in a text file is not terminated with a newline.
It makes sure the last line was properly terminated.
Previously the type of the row parameter of renderCell was hardcoded as
Row. This wasn't ideal because the best case scenario we want it to enable
Typescript to use the type of rows props. Now that's the case.
Resolve#62
Align design tokens of input component with select component's
design tokens for consistent styling configuration. Having a
transparent background was causing a weird ux.
