-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix: rename datepicker to daterangepicker * Move into date folder + wip: datepicker * Feat: <DatePicker/> few fixes and improvements to the DateRangePicker * Feat: new BackgroundAccent When it is unclear if the element will be used on a background or backgroundAlt the backgroundAccent can be used. This will probably most often be used for borders where the background is background(alt). * wip relative + few fixes * Feat: add relative picker * Fix: update DateRangePicker to use new component name * Feat: loading state + popover placement prop * chore: add popoverplacement prop to stories as selectable option --------- Co-authored-by: Niek Candaele <[email protected]>
- Loading branch information
1 parent
af5c2c8
commit 29fb5cf
Showing
40 changed files
with
1,075 additions
and
364 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 95 additions & 0 deletions
95
packages/lib-components/src/components/inputs/Date/DatePicker/Controlled.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { FC, useState } from 'react'; | ||
| import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../../InputProps'; | ||
| import { useController } from 'react-hook-form'; | ||
| import { GenericDatePicker, DatePickerProps } from './Generic'; | ||
| import { Label, ErrorMessage, Wrapper, Description } from '../../layout'; | ||
| import { Container } from './style'; | ||
| import { Skeleton } from '../../../../components'; | ||
|
|
||
| export type ControlledDatePickerProps = ControlledInputProps & DatePickerProps; | ||
| const defaultsApplier = defaultInputPropsFactory<ControlledDatePickerProps>(defaultInputProps); | ||
|
|
||
| export const ControlledDatePicker: FC<ControlledDatePickerProps> = (props) => { | ||
| const { | ||
| label, | ||
| name, | ||
| size, | ||
| hint, | ||
| control, | ||
| disabled, | ||
| readOnly, | ||
| required, | ||
| format, | ||
| mode, | ||
| relativePickerOptions, | ||
| timePickerOptions, | ||
| placeholder, | ||
| popOverPlacement, | ||
| loading, | ||
| description, | ||
| } = defaultsApplier(props); | ||
|
|
||
| const [showError, setShowError] = useState<boolean>(true); | ||
|
|
||
| const { | ||
| field, | ||
| fieldState: { error }, | ||
| } = useController({ | ||
| name, | ||
| control, | ||
| }); | ||
|
|
||
| const handleOnFocus = () => { | ||
| setShowError(false); | ||
| }; | ||
|
|
||
| const handleOnBlur = () => { | ||
| field.onBlur(); | ||
| setShowError(true); | ||
| }; | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| <Container> | ||
| {label && ( | ||
| <Label | ||
| required={required} | ||
| hint={hint} | ||
| htmlFor={name} | ||
| error={!!error} | ||
| size={size} | ||
| text={label} | ||
| disabled={disabled} | ||
| position="top" | ||
| /> | ||
| )} | ||
| {loading ? ( | ||
| <Skeleton variant="text" width="100%" height="38px" /> | ||
| ) : ( | ||
| <GenericDatePicker | ||
| onChange={field.onChange} | ||
| onFocus={handleOnFocus} | ||
| onBlur={handleOnBlur} | ||
| value={field.value} | ||
| disabled={disabled} | ||
| name={name} | ||
| id={name} | ||
| required={required} | ||
| size={size} | ||
| readOnly={readOnly} | ||
| hasError={!!error} | ||
| popOverPlacement={popOverPlacement} | ||
| hasDescription={!!description} | ||
| relativePickerOptions={relativePickerOptions} | ||
| timePickerOptions={timePickerOptions} | ||
| format={format} | ||
| placeholder={placeholder} | ||
| mode={mode} | ||
| /> | ||
| )} | ||
| {showError && error?.message && <ErrorMessage message={error.message} />} | ||
| </Container> | ||
| {description && <Description description={description} inputName={name} />} | ||
| </Wrapper> | ||
| ); | ||
| }; |
188 changes: 188 additions & 0 deletions
188
packages/lib-components/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| import React from 'react'; | ||
| import { useState } from 'react'; | ||
| import { Meta, StoryFn } from '@storybook/react'; | ||
| import { styled } from '../../../../styled'; | ||
| import { Button, DatePicker, DatePickerProps } from '../../../../components'; | ||
| import { useForm, SubmitHandler } from 'react-hook-form'; | ||
| import { z } from 'zod'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { DateTime } from 'luxon'; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: flex; | ||
| height: 100vh; | ||
| width: 50%; | ||
| margin: 0 auto; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| `; | ||
|
|
||
| export default { | ||
| title: 'Inputs/DatePicker', | ||
| component: DatePicker, | ||
| args: { | ||
| label: 'date', | ||
| name: 'date', | ||
| required: false, | ||
| description: 'This is a description', | ||
| popOverPlacement: 'bottom', | ||
| readOnly: false, | ||
| loading: false, | ||
| timePickerOptions: { | ||
| interval: 30, | ||
| }, | ||
| relativePickerOptions: { | ||
| showFriendlyName: true, | ||
| timeDirection: 'future', | ||
| }, | ||
| }, | ||
| } as Meta<DatePickerProps>; | ||
|
|
||
| const validationSchema = z.object({ | ||
| date: z.string().datetime({ offset: true }), | ||
| }); | ||
| type FormFields = { date: string }; | ||
|
|
||
| export const OnDateSubmit: StoryFn<DatePickerProps> = (args) => { | ||
| const [result, setResult] = useState<string>('none'); | ||
|
|
||
| const { control, handleSubmit } = useForm<FormFields>({ | ||
| mode: 'onSubmit', | ||
| resolver: zodResolver(validationSchema), | ||
| }); | ||
|
|
||
| const onSubmit: SubmitHandler<FormFields> = ({ date }) => { | ||
| setResult(date); | ||
| }; | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'} | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <DatePicker | ||
| mode="absolute" | ||
| control={control} | ||
| label={args.label} | ||
| name={args.name} | ||
| required={args.required} | ||
| loading={args.loading} | ||
| hint={args.hint} | ||
| description={args.description} | ||
| popOverPlacement={args.popOverPlacement} | ||
| /> | ||
| <Button type="submit" text="Submit form" /> | ||
| </form> | ||
| <p>result: {result}</p> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export const OnDateAndTimeSubmit: StoryFn<DatePickerProps> = (args) => { | ||
| const [result, setResult] = useState<string>('none'); | ||
|
|
||
| const { control, handleSubmit } = useForm<FormFields>({ | ||
| mode: 'onSubmit', | ||
| resolver: zodResolver(validationSchema), | ||
| }); | ||
|
|
||
| const onSubmit: SubmitHandler<FormFields> = ({ date }) => { | ||
| setResult(date); | ||
| }; | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'} | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <DatePicker | ||
| mode="absolute" | ||
| control={control} | ||
| label={args.label} | ||
| name={args.name} | ||
| required={args.required} | ||
| loading={args.loading} | ||
| hint={args.hint} | ||
| format={DateTime.DATETIME_SHORT} | ||
| timePickerOptions={args.timePickerOptions} | ||
| description={args.description} | ||
| popOverPlacement={args.popOverPlacement} | ||
| /> | ||
| <Button type="submit" text="Submit form" /> | ||
| </form> | ||
| <p>result: {result}</p> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export const onTimeSubmit: StoryFn<DatePickerProps> = (args) => { | ||
| const [result, setResult] = useState<string>('none'); | ||
|
|
||
| const { control, handleSubmit } = useForm<FormFields>({ | ||
| mode: 'onSubmit', | ||
| resolver: zodResolver(validationSchema), | ||
| }); | ||
|
|
||
| const onSubmit: SubmitHandler<FormFields> = ({ date }) => { | ||
| setResult(date); | ||
| }; | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'} | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <DatePicker | ||
| mode="absolute" | ||
| control={control} | ||
| label={args.label} | ||
| name={args.name} | ||
| required={args.required} | ||
| loading={args.loading} | ||
| hint={args.hint} | ||
| format={DateTime.TIME_SIMPLE} | ||
| timePickerOptions={args.timePickerOptions} | ||
| description={args.description} | ||
| popOverPlacement={args.popOverPlacement} | ||
| /> | ||
| <Button type="submit" text="Submit form" /> | ||
| </form> | ||
| <p>result: {result}</p> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export const RelativeSubmit: StoryFn<DatePickerProps> = (args) => { | ||
| const [result, setResult] = useState<string>('none'); | ||
|
|
||
| const { control, handleSubmit } = useForm<FormFields>({ | ||
| mode: 'onSubmit', | ||
| resolver: zodResolver(validationSchema), | ||
| }); | ||
|
|
||
| const onSubmit: SubmitHandler<FormFields> = ({ date }) => { | ||
| setResult(date); | ||
| }; | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'} | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <DatePicker | ||
| mode="relative" | ||
| control={control} | ||
| label={args.label} | ||
| name={args.name} | ||
| required={args.required} | ||
| loading={args.loading} | ||
| hint={args.hint} | ||
| format={DateTime.DATETIME_MED_WITH_SECONDS} | ||
| timePickerOptions={args.timePickerOptions} | ||
| relativePickerOptions={args.relativePickerOptions} | ||
| description={args.description} | ||
| popOverPlacement={args.popOverPlacement} | ||
| /> | ||
| <Button type="submit" text="Submit form" /> | ||
| </form> | ||
| <p>result: {result}</p> | ||
| </Wrapper> | ||
| ); | ||
| }; |
Oops, something went wrong.