From 22200a0170b965781863577416b23a05473288bd Mon Sep 17 00:00:00 2001 From: Osama Abdul Latif <62595605+OsamaAbdellateef@users.noreply.github.com> Date: Tue, 29 Oct 2024 18:34:11 +0300 Subject: [PATCH] [DST-581]: Revise `` page (#4202) * Revise datefield page * Adding anatomy section * Adding appearance demo * Adding usage section * Re-order page sections * Delete unwanted section of simple datefield * Deleteing unwatned file * Revising exmaples * Adding related section * Revise props table * Adding changeset * Resolving comments * Remove dup sections * Adding alt components section * rem dup words * Remove unwanted sections * Delete unwanted files * Fixing issues * Resolving comments * Resolving comments --- .changeset/fresh-zoos-vanish.md | 8 ++ .../form/datefield/date-field-basic.demo.tsx | 10 -- .../datefield/date-field-disabled.demo.tsx | 9 -- .../form/datefield/date-field-error.demo.tsx | 5 - .../datefield/date-field-required.demo.tsx | 5 - .../datefield/datefield-appearance.demo.tsx | 10 ++ .../components/form/datefield/datefield.mdx | 107 ++++++++++++----- .../building-forms/validation-zod.demo.tsx | 109 ++++++++++++++++++ docs/public/datefield/datefield-anatomy.jpg | Bin 0 -> 34660 bytes .../components/src/DateField/DateField.tsx | 4 + 10 files changed, 207 insertions(+), 60 deletions(-) create mode 100644 .changeset/fresh-zoos-vanish.md delete mode 100644 docs/content/components/form/datefield/date-field-basic.demo.tsx delete mode 100644 docs/content/components/form/datefield/date-field-disabled.demo.tsx delete mode 100644 docs/content/components/form/datefield/date-field-error.demo.tsx delete mode 100644 docs/content/components/form/datefield/date-field-required.demo.tsx create mode 100644 docs/content/components/form/datefield/datefield-appearance.demo.tsx create mode 100644 docs/content/patterns/building-forms/validation-zod.demo.tsx create mode 100644 docs/public/datefield/datefield-anatomy.jpg diff --git a/.changeset/fresh-zoos-vanish.md b/.changeset/fresh-zoos-vanish.md new file mode 100644 index 0000000000..36adf62d40 --- /dev/null +++ b/.changeset/fresh-zoos-vanish.md @@ -0,0 +1,8 @@ +--- +'@marigold/components': patch +'@marigold/docs': patch +--- + +docs([DST-581]): revise `` page according to new component page structure + +Revised the `` documentation page to our new layout of component pages. \ No newline at end of file diff --git a/docs/content/components/form/datefield/date-field-basic.demo.tsx b/docs/content/components/form/datefield/date-field-basic.demo.tsx deleted file mode 100644 index 1af43f3ad0..0000000000 --- a/docs/content/components/form/datefield/date-field-basic.demo.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { CalendarDate } from '@internationalized/date'; -import { DateField } from '@marigold/components'; - -export default () => ( - -); diff --git a/docs/content/components/form/datefield/date-field-disabled.demo.tsx b/docs/content/components/form/datefield/date-field-disabled.demo.tsx deleted file mode 100644 index 2174776581..0000000000 --- a/docs/content/components/form/datefield/date-field-disabled.demo.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { DateField } from '@marigold/components'; - -export default () => ( - -); diff --git a/docs/content/components/form/datefield/date-field-error.demo.tsx b/docs/content/components/form/datefield/date-field-error.demo.tsx deleted file mode 100644 index e21a12c5e1..0000000000 --- a/docs/content/components/form/datefield/date-field-error.demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { DateField } from '@marigold/components'; - -export default () => ( - -); diff --git a/docs/content/components/form/datefield/date-field-required.demo.tsx b/docs/content/components/form/datefield/date-field-required.demo.tsx deleted file mode 100644 index 38e9d74717..0000000000 --- a/docs/content/components/form/datefield/date-field-required.demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { DateField } from '@marigold/components'; - -export default () => ( - -); diff --git a/docs/content/components/form/datefield/datefield-appearance.demo.tsx b/docs/content/components/form/datefield/datefield-appearance.demo.tsx new file mode 100644 index 0000000000..c6f72f4a25 --- /dev/null +++ b/docs/content/components/form/datefield/datefield-appearance.demo.tsx @@ -0,0 +1,10 @@ +import { CalendarDate } from '@internationalized/date'; +import { DateField } from '@marigold/components'; + +export default () => ( + +); diff --git a/docs/content/components/form/datefield/datefield.mdx b/docs/content/components/form/datefield/datefield.mdx index a0e44af84f..bd1c8b35b3 100644 --- a/docs/content/components/form/datefield/datefield.mdx +++ b/docs/content/components/form/datefield/datefield.mdx @@ -1,48 +1,93 @@ --- title: DateField -caption: Component for input forms. +caption: Component for entering date in forms. +badge: updated --- -The `` allows users to enter and edit date values using a keyboard. Each part of a date value is displayed in an individually editable segment. +The `` allows users to enter and edit date values using a keyboard. Each part of a date value is displayed in an individually editable segment. These segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard. -The `` segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard. +## Anatomy -## Import +A `` consists of a label and a group of segments representing each unit of a date and time, such as years, months, days, hours, and minutes. -```tsx -import { DateField } from '@marigold/components'; -``` +Anatomy of datefield ## Appearance - - -## Props - - - -## Examples - -### Simple DateField + -This example shows a regular `` without any special props. - - - -### Disabled DateField - -You can disable the `` so that the user can't interact with it anymore. - - + -### Required DateField +## Usage -If you want a `` to be required, you just have to add the property `required`. With that the small required icon appears next to the label. +The `` component is a versatile input element used for selecting dates in forms. It enhances user experience by providing a structured way to input date information, reducing errors associated with manual entry. With features like labels and descriptions, it clearly communicates its purpose to users. The component can also support default values. Overall, the `` is essential for applications requiring date selection, ensuring both accessibility and usability. - +## Props -### DateField With an Error + -This example shows how to use the `error` with the `errorMessage`. + - +## Alternative components + +
    +
  • + [DatePicker](/components/form/datepicker): a user interface element that + allows users to select a date from a calendar. +
    • +
+ +## Related + + + + + + ), + }, + { + title: 'Form Fields', + href: '../../introduction/form-fields', + caption: 'Learn how to build forms.', + icon: ( + + + + + ), + }, + ]} +/> diff --git a/docs/content/patterns/building-forms/validation-zod.demo.tsx b/docs/content/patterns/building-forms/validation-zod.demo.tsx new file mode 100644 index 0000000000..e972b4fb88 --- /dev/null +++ b/docs/content/patterns/building-forms/validation-zod.demo.tsx @@ -0,0 +1,109 @@ +import { FormEventHandler, useState } from 'react'; +import { z } from 'zod'; +import { zfd } from 'zod-form-data'; +import { + Button, + Checkbox, + Columns, + FieldGroup, + Headline, + Select, + Stack, + TextField, +} from '@marigold/components'; + +export default () => { + const schemaData = z.object({ + firstname: z.string().min(1), + name: z.string().min(1), + phone: z.string().min(6), + mail: z.string().email(), + country: z.string(), + terms: zfd.checkbox(), + }); + + const [error, setError] = useState([]); + const handleSubmit: FormEventHandler = e => { + e.preventDefault(); + const errorList: Array = []; + const formData = new FormData(e.target as HTMLFormElement); + const data = Object.fromEntries(formData); + const validatedForm = schemaData.safeParse(data); + + if (!validatedForm.success) { + validatedForm.error.issues.map(e => { + return errorList.push(e.path.toString()); + }); + setError(errorList); + } else { + alert(JSON.stringify(data)); + } + }; + + return ( + + Account Registration +
+ + + + + + + + + + Agree to the terms + + + + + +
+ + ); +}; diff --git a/docs/public/datefield/datefield-anatomy.jpg b/docs/public/datefield/datefield-anatomy.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5c026b7a99d6a58d263e1a31b873cec438a22384 GIT binary patch literal 34660 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 literal 0 HcmV?d00001 diff --git a/packages/components/src/DateField/DateField.tsx b/packages/components/src/DateField/DateField.tsx index 9c60fd6506..df17f5bf0a 100644 --- a/packages/components/src/DateField/DateField.tsx +++ b/packages/components/src/DateField/DateField.tsx @@ -20,6 +20,10 @@ export interface DateFieldProps Pick, 'label' | 'description' | 'errorMessage'> { variant?: string; size?: string; + + /** + * Optional element (e.g., button or icon) rendered inside the DateField. + */ action?: ReactElement; /**