From e19d10ef5e3445cfbe8bbb1fd1459649e7948e97 Mon Sep 17 00:00:00 2001 From: vapersmile <120370047+vapersmile@users.noreply.github.com> Date: Thu, 14 Mar 2024 17:24:38 +0100 Subject: [PATCH] 0.11.x (#20) * feat: add DataBadge component documentation * feat: change location of data-badge * feat: add calendar-header icon-card and form/full-name-fields * feat: add texts for calendar-header * fix: fix dead links --------- Co-authored-by: pereag --- .../react-front-kit-table/table-grid-view.mdx | 2 +- .../components/calendar-header.mdx | 51 +++++++++++++++++++ .../react-front-kit/components/data-badge.mdx | 37 ++++++++++++++ .../components/document-box.mdx | 2 +- .../react-front-kit/components/event-list.mdx | 2 +- docs/react-front-kit/components/icon-card.mdx | 38 ++++++++++++++ .../components/menu-languages.mdx | 5 +- .../components/summary-box.mdx | 2 +- docs/react-front-kit/form/_category_.json | 7 +++ .../react-front-kit/form/full-name-fields.mdx | 46 +++++++++++++++++ 10 files changed, 187 insertions(+), 5 deletions(-) create mode 100644 docs/react-front-kit/components/calendar-header.mdx create mode 100644 docs/react-front-kit/components/data-badge.mdx create mode 100644 docs/react-front-kit/components/icon-card.mdx create mode 100644 docs/react-front-kit/form/_category_.json create mode 100644 docs/react-front-kit/form/full-name-fields.mdx diff --git a/docs/react-front-kit-table/table-grid-view.mdx b/docs/react-front-kit-table/table-grid-view.mdx index ebff05d..8fc7cf8 100644 --- a/docs/react-front-kit-table/table-grid-view.mdx +++ b/docs/react-front-kit-table/table-grid-view.mdx @@ -8,7 +8,7 @@ import Description from '../../src/components/Description/Description'; extendsInfo={[ { label: 'SwitchableView', - link: './switchable-view', + link: '../react-front-kit/components/switchable-view', logo: , }, ]} diff --git a/docs/react-front-kit/components/calendar-header.mdx b/docs/react-front-kit/components/calendar-header.mdx new file mode 100644 index 0000000..5e2bad5 --- /dev/null +++ b/docs/react-front-kit/components/calendar-header.mdx @@ -0,0 +1,51 @@ +import { GitHubLogo } from '../../../src/icons/GitHubLogo'; + +# Calendar Header + + + Display a controlled calendar header with 3 levels of precision: Year, Day, + and Decade. The component is based on a component + [CalendarHeader](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/dates/src/components/CalendarHeader/CalendarHeader.tsx) + he is not shown in the documentation but visible in the library's code. + + +## Storybook Docs + + + +## Props + +| Name | Type | Default | Description | +| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| date | `Date` | - | Value given to define the date displayed on the calendarHeader | +| level | [`ICalendarHeaderClickType`](#icalendarheaderclicktype) | - | Defines the date level to display in the header modal | +| onDateClick | `((event: MouseEvent, date: Date, level: `[`ICalendarHeaderClickType`](#icalendarheaderclicktype)` ) => void)` | - | Returns a callback function that provides the value of the date that has just been clicked and the current level | +| monthProps | `Omit` | - | Allows configuring the props of the Month component from Mantine. | +| monthListProps | `Omit` | - | Allows configuring the props of the MonthList component from Mantine. | +| yearsListProps | `Omit` | - | Allows configuring the props of the YearsList component from Mantine. | +| ... | - | - | extends [`CalendarHeader props`](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/dates/src/components/CalendarHeader/CalendarHeader.tsx) | + +## ICalendarHeaderClickType + +| Type | Description | +| ------------------------------- | ---------------------------------------------------- | +| `"month" \| "year" \| "decade"` | Value of the click location's level of localization. | diff --git a/docs/react-front-kit/components/data-badge.mdx b/docs/react-front-kit/components/data-badge.mdx new file mode 100644 index 0000000..338036b --- /dev/null +++ b/docs/react-front-kit/components/data-badge.mdx @@ -0,0 +1,37 @@ +# Data Badge + + + Display a badge that spans the entire width of the parent component with a + number field and text. There are two types of displays: large and medium. + + +## Storybook Docs + + + +## Props + +| Name | Type | Default | Description | +| -------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| children | `string` | - | The text is displayed to the right of the number. | +| color | `DefaultMantineColor` | - | The color applied to the badge, and the contrast is automatically managed by the `autoContrast` prop of the `Badge` component. If the prop is not specified, the text color will be black, and there will be no `backgroundColor`. | +| number | `number` | - | The number value is displayed to the left of the text. The `fit-content` property and a `margin-right` are applied to the number tag. | +| size | `"lg" \| "md"` | `"md"` | Controls the appearance of the component. Allows switching between two templates: `"md"` and `"lg"`. | +| ratio | `number ` | - | Manages the default width size of the number tag. | +| ... | - | - | extends [`Badge props`](https://mantine.dev/core/badge/) | diff --git a/docs/react-front-kit/components/document-box.mdx b/docs/react-front-kit/components/document-box.mdx index 3bf1842..86220ad 100644 --- a/docs/react-front-kit/components/document-box.mdx +++ b/docs/react-front-kit/components/document-box.mdx @@ -17,7 +17,7 @@ ## Storybook Docs - + ## Props diff --git a/docs/react-front-kit/components/event-list.mdx b/docs/react-front-kit/components/event-list.mdx index 36c24de..2972d99 100644 --- a/docs/react-front-kit/components/event-list.mdx +++ b/docs/react-front-kit/components/event-list.mdx @@ -19,7 +19,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo'; ## Storybook Docs - + ## Props diff --git a/docs/react-front-kit/components/icon-card.mdx b/docs/react-front-kit/components/icon-card.mdx new file mode 100644 index 0000000..c9f5a86 --- /dev/null +++ b/docs/react-front-kit/components/icon-card.mdx @@ -0,0 +1,38 @@ +# Icon card + + + Renders a horizontal bar displaying the number of selected elements and an + array of [`IAction`s](../../shared-types/actions#iactiont) as + [ActionIcons](https://v6.mantine.dev/core/action-icon/) + + +## Storybook Docs + + + +## Props + +| Name | Type | Default | Description | +| -------- | ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| children | `ReactNode` | - | Free area in the lower zone of the map | +| icon | `ReactNode` | - | Area in the top of the map primarily used for displaying icons but can show anything that corresponds to the ReactNode type | +| subTitle | `ReactNode` | - | SubTitle area | +| title | `ReactNode` | - | TItle area | +| color | `string` | - | Define the background color of the card. By default, the primary color is applied. Auto-contrast is used to automatically change the text color | +| ... | - | - | extends [`card props`](https://mantine.dev/core/card/?t=props). | diff --git a/docs/react-front-kit/components/menu-languages.mdx b/docs/react-front-kit/components/menu-languages.mdx index 1a70dbc..c404b2f 100644 --- a/docs/react-front-kit/components/menu-languages.mdx +++ b/docs/react-front-kit/components/menu-languages.mdx @@ -29,7 +29,10 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo'; ## Storybook Docs - + ## Props diff --git a/docs/react-front-kit/components/summary-box.mdx b/docs/react-front-kit/components/summary-box.mdx index 5ea983e..c1c9c29 100644 --- a/docs/react-front-kit/components/summary-box.mdx +++ b/docs/react-front-kit/components/summary-box.mdx @@ -19,7 +19,7 @@ ## Storybook Docs - + ## Props diff --git a/docs/react-front-kit/form/_category_.json b/docs/react-front-kit/form/_category_.json new file mode 100644 index 0000000..3ce9303 --- /dev/null +++ b/docs/react-front-kit/form/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Form", + "position": 3, + "link": { + "type": "generated-index" + } +} diff --git a/docs/react-front-kit/form/full-name-fields.mdx b/docs/react-front-kit/form/full-name-fields.mdx new file mode 100644 index 0000000..32ad910 --- /dev/null +++ b/docs/react-front-kit/form/full-name-fields.mdx @@ -0,0 +1,46 @@ +# Full Name Fields + + + Displaying a grouped input with first name and last name, usable in a + controlled manner. + + +## Storybook Docs + + + +## Props + +| Name | Type | Default | Description | +| -------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- | +| firstNameProps | [`TextInputProps`](https://mantine.dev/core/text-input/?t=props) | - | extends [`text input props`](https://mantine.dev/core/text-input/) If configured, the changes will apply to the firstName input | +| lastNameProps | [`TextInputProps`](https://mantine.dev/core/text-input/?t=props) | - | extends [`text input props`](https://mantine.dev/core/text-input/) If configured, the changes will apply to the lastName input | +| onChange | `((value: IFullNameFieldsValues) => void)` | - | Callback function returning the value of the input that has just been changed | +| value | `IFullNameFieldsValues` | - | Allows setting the values of the two text input fields | +| ... | - | - | extends [`flex props`](https://mantine.dev/core/flex/?t=props) | + +## IFullNameFieldsValues + +| Name | Type | Default | Description | +| --------- | -------- | ------- | -------------------------- | +| firstName | `string` | - | Value of `firstName` field | +| lastName | `string` | - | Value of `lastName` field |