studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝(react) upgrade stories for Storybook 8

Browse Source 
The old way of using Canvas is deprecated, we need to migrate all the
stories to the new standard.
This commit is contained in:
Nathan Vasse
2024-03-14 17:17:30 +01:00
committed by NathanVss
parent 1f80674717
commit c63aff4861
13 changed files with 175 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/react/src/components/Button/index.mdx
View File

@@ -23,19 +23,13 @@ You can use icons within the button by passing the icon name as a prop.
> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
<Canvas sourceState="shown">
<Story id="components-button--icon-left"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.IconLeft}/>
<Canvas sourceState="shown">
<Story id="components-button--icon-right"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.IconRight}/>
You can also use button with only an icon.
<Canvas sourceState="shown">
<Story id="components-button--icon-only"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.IconOnly}/>
## Disabled
@@ -43,34 +37,22 @@ The button can be disabled. The disabled button will render the same no matter w
> Keep in the mind that a disabled button will never call `onClick` if it is provided.
<Canvas sourceState="shown">
<Story id="components-button--disabled"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.Disabled}/>
## Full width
The button can be set to full width. You can use the `fullWidth` prop to do so.
<Canvas sourceState="shown">
<Story id="components-button--full-width"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--full-width-with-icon"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.FullWidth}/>
<Canvas sourceState="shown" of={Stories.FullWidthWithIcon}/>
## Size
You can adjust the size of the button by using the `size` prop. Default value is `medium`.
<Canvas sourceState="shown">
<Story id="components-button--primary"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--small"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--nano"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.Primary}/>
<Canvas sourceState="shown" of={Stories.Small}/>
<Canvas sourceState="shown" of={Stories.Nano}/>
## Props
@@ -78,8 +60,6 @@ You can use all the props of the native html `<button>` element props plus the f
<ArgTypes of={Button} />
## Design tokens
Here a the custom design tokens defined by the button.

29
packages/react/src/components/DataGrid/index.mdx
View File

@@ -2,6 +2,7 @@ import { Canvas, Meta, Source, ArgTypes } from '@storybook/blocks';
import { DataGrid } from './index';
import { SimpleDataGrid } from './SimpleDataGrid';
import { DataList } from './DataList';
import * as Stories from './index.stories';
<Meta of={Stories}/>
@@ -11,9 +12,7 @@ import * as Stories from './index.stories';
Cunningham provides a DataGrid component that can be used to display data in a tabular format. The DataGrid component
is built on top of [Tan Stack Table](https://tanstack.com/table/v8). It can be used for client only data or server side data.
<Canvas>
<Story id="components-datagrid--full-server-side"/>
</Canvas>
<Canvas of={Stories.FullServerSide}/>
## Get Started
@@ -39,9 +38,7 @@ This component is a wrapper around the more complicated DataGrid component. It i
Here a quick usage example
<Canvas sourceState="shown">
<Story id="components-datagrid--data-list-only"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.DataListOnly}/>
### Props
@@ -62,9 +59,7 @@ Sorting etc ...
Take a look at the following example that renders a table of users.
<Canvas sourceState="shown">
<Story id="components-datagrid--client-side-without-pagination"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.ClientSideWithoutPagination}/>
As you can see in this example there is no pagination, but we can simply add it by adding a `defaultPaginationParams` props.
We will also enable a default sorting on the `price` column with the `defaultSortModel` props, along with the row selection
@@ -73,9 +68,7 @@ with `enableRowSelection`, `rowSelection` and `onRowSelectionChange` props.
> Please click on checkboxes to select rows to see hows the `onRowSelectionChange` prop works, selected ids are displayed
below the table.
<Canvas sourceState="shown">
<Story id="components-datagrid--client-side-with-pagination"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.ClientSideWithPagination}/>
As you can see, with `SimpleDataGrid` you can easily add pagination, sorting without have to worry about controlling
their states.
@@ -93,9 +86,7 @@ pagination, sorting etc ...
Please take a look at the following example that simulates a server side data that's re-fetched on each page and sorting
change.
<Canvas sourceState="shown">
<Story id="components-datagrid--full-server-side"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.FullServerSide}/>
As you can see, in this example the pagination and sorting are now controlled, this is more verbose but gives you more
control over the state of the table, like being able to use `useEffect` to fetch data when the state changes.
@@ -151,17 +142,13 @@ outside the grid component ( for example to delete selected rows ).
The component provides out of the box a loading state that can be enabled by setting the `isLoading` props to `true`.
So feel free to use it between page or sorting changes when you are fetching data from a server.
<Canvas sourceState="shown">
<Story id="components-datagrid--loading"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.Loading}/>
## Empty State
The component automatically displays an empty state when there is no data to display and it is not loading.
<Canvas sourceState="shown">
<Story id="components-datagrid--empty"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.Empty}/>
## Actions alignment

56
packages/react/src/components/Forms/Checkbox/index.mdx
View File

@@ -8,9 +8,7 @@ import { Checkbox } from './index';
Cunningham provides a versatile Checkbox component that you can use in your forms.
<Canvas>
<Story id="components-forms-checkbox--group"/>
</Canvas>
<Canvas of={Stories.Group} />
## Label
@@ -18,80 +16,58 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label**
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--default"/>
</Canvas>
<Canvas of={Stories.Default} />
**With label**
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--with-label"/>
</Canvas>
<Canvas of={Stories.WithLabel} />
## Value
You can set the value of the checkbox in 3 different ways.
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--default"/>
<Story id="components-forms-checkbox--indeterminate"/>
<Story id="components-forms-checkbox--checked"/>
</Canvas>
<Canvas of={Stories.Default} />
<Canvas of={Stories.Indeterminate} />
<Canvas of={Stories.Checked} />
## Texts
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--with-texts"/>
</Canvas>
<Canvas of={Stories.WithTexts} />
## Disabled
As a regular checkbox, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--disabled"/>
</Canvas>
<Canvas of={Stories.Disabled} />
## States
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--with-texts"/>
</Canvas>
<Canvas of={Stories.WithTexts} />
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--success"/>
</Canvas>
<Canvas of={Stories.Success} />
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--error"/>
</Canvas>
<Canvas of={Stories.Error} />
## Group
It will happen often that you will need to use multiple grouped checkboxes. You can use the `CheckboxGroup` component to do so.
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--group"/>
</Canvas>
<Canvas of={Stories.Group} />
You can also define `state`, `text` props on the group component
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--group-error"/>
<Story id="components-forms-checkbox--group-success"/>
</Canvas>
<Canvas of={Stories.GroupError} />
<Canvas of={Stories.GroupSuccess} />
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--react-hook-form"/>
</Canvas>
<Canvas of={Stories.ReactHookForm} />
### Props
@@ -122,4 +98,4 @@ See also [Field](?path=/story/components-forms-field-doc--page)
##
<img src="components/Forms/Checkbox/resources/dd_2.svg"/>
<img src="components/Forms/Checkbox/resources/dd_2.svg"/>

57
packages/react/src/components/Forms/DatePicker/index.mdx
View File

@@ -1,9 +1,10 @@
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
import { Canvas, Meta, Story, Source } from '@storybook/addon-docs';
import { DatePicker } from "./index";
import { DateRangePicker } from "./index";
import * as Stories from "./index.stories"
import { ArgTypes } from '@storybook/blocks';
<Meta title="Components/Forms/DatePicker/Doc" component={DatePicker}/>
<Meta of={Stories}/>
# DatePicker
@@ -26,16 +27,13 @@ UI components provided by [React-Spectrum](https://react-spectrum.adobe.com/reac
`}
/>
<Canvas>
<Story id="components-forms-datepicker--default"/>
</Canvas>
<Canvas of={Stories.Default}/>
## Default value
You can use the following props to change the default value of the DatePicker component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--default-value"/>
</Canvas>
<Canvas of={Stories.DefaultValue} sourceState="shown"/>
## Range
@@ -65,62 +63,47 @@ Ex: If a `DateRangePicker` is named `"subscription"`, you would access its value
`}
/>
<Canvas>
<Story id="components-forms-datepicker--range-default"/>
</Canvas>
<Canvas of={Stories.RangeDefault}/>
## States
You can use the following props to change the state of the DatePicker component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--error"/>
<Story id="components-forms-datepicker--success"/>
</Canvas>
<Canvas of={Stories.Error}/>
<Canvas of={Stories.Success}/>
## Disabled
As a regular input, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--disabled"/>
<Story id="components-forms-datepicker--disabled-value"/>
</Canvas>
<Canvas of={Stories.Disabled} sourceState="shown"/>
<Canvas of={Stories.DisabledValue} sourceState="shown"/>
## Texts
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--with-text"/>
</Canvas>
<Canvas of={Stories.WithText} sourceState="shown"/>
## Controlled / Non Controlled
Like a native input, you can use the DatePicker component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--controlled"/>
<Story id="components-forms-datepicker--range-controlled"/>
</Canvas>
<Canvas of={Stories.Controlled} sourceState="shown"/>
<Canvas of={Stories.RangeControlled} sourceState="shown"/>
## MinValue / MaxValue
You can pass a date range that are valid using the `minValue` and `maxValue` props.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--min-max-value"/>
</Canvas>
<Canvas of={Stories.MinMaxValue} sourceState="shown"/>
## Invalid date
When passing an invalid date, for example outside of the valid range, the DatePicker component would render invalid.
<Canvas sourceState="shown">
<Story id="components-forms-datepicker--invalid-value"/>
</Canvas>
<Canvas of={Stories.InvalidValue} sourceState="shown"/>
## International calendars
@@ -131,6 +114,8 @@ By default, the DatePicker component uses the CunninghamProvider locale.
<Story id="components-forms-datepicker--custom-locale"/>
<Story id="components-forms-datepicker--cunningham-locale"/>
</Canvas>
<Canvas of={Stories.CustomLocale}/>
<Canvas of={Stories.CunninghamLocale}/>
## Timezone management
@@ -147,11 +132,11 @@ You can see the list of props below.
### DatePicker
<ArgsTable of={DatePicker} />
<ArgTypes of={DatePicker} />
### DateRangePicker
<ArgsTable of={DateRangePicker} />
<ArgTypes of={DateRangePicker} />
## Design tokens

49
packages/react/src/components/Forms/FileUploader/index.mdx
View File

@@ -8,10 +8,7 @@ import { FileUploader } from './index';
Cunningham provides a file uploader component that you can use in your forms.
<Canvas>
<Story id="components-forms-fileuploader--mono"/>
</Canvas>
<Canvas of={Stories.Mono}/>
<Source
language='ts'
@@ -24,38 +21,22 @@ Cunningham provides a file uploader component that you can use in your forms.
The file uploader comes with a multi version to handle multiple files.
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--multi-wih-files"/>
</Canvas>
<Canvas of={Stories.MultiWihFiles} sourceState="shown"/>
## States
You can use the following props to change the state of the FileUploader component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-with-file-success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-error"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-uploading"/>
</Canvas>
<Canvas of={Stories.MultiWithFileSuccess} sourceState="shown"/>
<Canvas of={Stories.MonoError} sourceState="shown"/>
<Canvas of={Stories.MonoUploading} sourceState="shown"/>
## Texts
You can customize displayed texts by using `bigText` and `text` props.
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-with-text"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-with-big-text"/>
</Canvas>
<Canvas of={Stories.MonoWithText} sourceState="shown"/>
<Canvas of={Stories.MonoWithBigText} sourceState="shown"/>
## Icons
@@ -63,15 +44,9 @@ You can customize the icons used by the FileUploader using `icon`, `successIcon`
> You can also disable the icon animation on hover by using `animateIcon` props.
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-custom-icons"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-custom-icons-success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-custom-icons-uploading"/>
</Canvas>
<Canvas of={Stories.MonoCustomIcons} sourceState="shown"/>
<Canvas of={Stories.MonoCustomIconsSuccess} sourceState="shown"/>
<Canvas of={Stories.MonoCustomIconsUploading} sourceState="shown"/>
## Controlled / Non Controlled
@@ -83,9 +58,7 @@ You can also reset the input by using the `reset` method available via the ref.
It works the same for multiple or mono version.
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--multi-value"/>
</Canvas>
<Canvas of={Stories.MultiValue} sourceState="shown"/>
## Props

60
packages/react/src/components/Forms/Input/index.mdx
View File

@@ -8,9 +8,7 @@ import * as Stories from './index.stories';
Cunningham provides a versatile Input component that you can use in your forms.
<Canvas>
<Story id="components-forms-input--default"/>
</Canvas>
<Canvas of={Stories.Default} sourceState="shown"/>
<Source
language='ts'
@@ -23,96 +21,68 @@ Cunningham provides a versatile Input component that you can use in your forms.
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-input--default"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-input--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-input--error"/>
</Canvas>
<Canvas of={Stories.Default} sourceState="shown"/>
<Canvas of={Stories.Success} sourceState="shown"/>
<Canvas of={Stories.Error} sourceState="shown"/>
## Disabled
As a regular input, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-input--disabled-empty"/>
<Story id="components-forms-input--disabled-filled"/>
</Canvas>
<Canvas of={Stories.DisabledEmpty} sourceState="shown"/>
<Canvas of={Stories.DisabledFilled} sourceState="shown"/>
## Icons
You can define an icon that will appear on the left side of the input by using the `icon` props.
<Canvas sourceState="shown">
<Story id="components-forms-input--icon"/>
</Canvas>
<Canvas of={Stories.Icon} sourceState="shown"/>
You can also independently add an icon on the right side by using the `rightIcon` props.
<Canvas sourceState="shown">
<Story id="components-forms-input--icon-right"/>
</Canvas>
<Canvas of={Stories.IconRight} sourceState="shown"/>
## Texts
You can define a text that will appear below the input by using the `text` props.
<Canvas sourceState="shown">
<Story id="components-forms-input--with-text"/>
</Canvas>
<Canvas of={Stories.WithText} sourceState="shown"/>
You can also independently add a text on the right side by using the `rightText` props.
<Canvas sourceState="shown">
<Story id="components-forms-input--with-both-texts"/>
</Canvas>
<Canvas of={Stories.WithBothTexts} sourceState="shown"/>
## Width
By default, the input has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas sourceState="shown">
<Story id="components-forms-input--full-width"/>
</Canvas>
<Canvas of={Stories.FullWidth} sourceState="shown"/>
## Chars Counter
You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare
in mind to also define `charCounterMax`.
<Canvas sourceState="shown">
<Story id="components-forms-input--char-counter"/>
</Canvas>
<Canvas of={Stories.CharCounter} sourceState="shown"/>
## Controlled / Non Controlled
Like a native input, you can use the Input component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas sourceState="shown">
<Story id="components-forms-input--controlled"/>
</Canvas>
<Canvas of={Stories.Controlled} sourceState="shown"/>
## Ref
You can use the `ref` props to get a reference to the input element.
<Canvas sourceState="shown">
<Story id="components-forms-input--with-ref"/>
</Canvas>
<Canvas of={Stories.WithRef} sourceState="shown"/>
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown">
<Story id="components-forms-input--react-hook-form"/>
</Canvas>
<Canvas of={Stories.ReactHookForm} sourceState="shown"/>
## Props

57
packages/react/src/components/Forms/Radio/index.mdx
View File

@@ -8,9 +8,7 @@ import * as Stories from './index.stories';
Cunningham provides a versatile Radio component that can be used in a variety of ways. The radio component is a form element that allows the user to select one option from a set of options.
<Canvas>
<Story id="components-forms-radio--group"/>
</Canvas>
<Canvas of={Stories.Group} sourceState="shown"/>
## Label
@@ -18,80 +16,55 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label**
<Canvas sourceState="shown">
<Story id="components-forms-radio--default"/>
</Canvas>
<Canvas of={Stories.Default} sourceState="shown"/>
**With label**
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-label"/>
</Canvas>
<Canvas of={Stories.WithLabel} sourceState="shown"/>
## Value
You can set the value of the radio with the `checked` attribute.
<Canvas sourceState="shown">
<Story id="components-forms-radio--default"/>
<Story id="components-forms-radio--checked"/>
</Canvas>
<Canvas of={Stories.Default}/>
<Canvas of={Stories.Checked}/>
## Texts
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-text"/>
</Canvas>
<Canvas of={Stories.WithText} sourceState="shown"/>
## Disabled
As a regular radio, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-radio--disabled"/>
</Canvas>
<Canvas of={Stories.Disabled} sourceState="shown"/>
## States
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-text"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-radio--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-radio--error"/>
</Canvas>
<Canvas of={Stories.WithText} sourceState="shown"/>
<Canvas of={Stories.Success} sourceState="shown"/>
<Canvas of={Stories.Error} sourceState="shown"/>
## Group
Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
<Canvas sourceState="shown">
<Story id="components-forms-radio--group"/>
</Canvas>
<Canvas of={Stories.Group} sourceState="shown"/>
You can also define `state`, `text` props on the group component
<Canvas sourceState="shown">
<Story id="components-forms-radio--group-error"/>
<Story id="components-forms-radio--group-success"/>
</Canvas>
<Canvas of={Stories.GroupError} sourceState="shown"/>
<Canvas of={Stories.GroupSuccess} sourceState="shown"/>
## Usage with react-hook-form
You can use this radio with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown">
<Story id="components-forms-radio--react-hook-form"/>
</Canvas>
<Canvas of={Stories.ReactHookForm} sourceState="shown"/>
### Props
@@ -120,4 +93,4 @@ See also [Field](?path=/story/components-forms-field-doc--page)
##
<img src="components/Forms/Radio/resources/dd_3.svg"/>
<img src="components/Forms/Radio/resources/dd_3.svg"/>

58
packages/react/src/components/Forms/Select/mono.mdx
View File

@@ -11,9 +11,7 @@ using [Downshift](https://www.downshift-js.com/), so that mean there is no `sele
> You can also use the [multi version](?path=/docs/components-forms-select-multi--docs) if you need
<Canvas>
<Story id="components-forms-select-mono--uncontrolled"/>
</Canvas>
<Canvas of={Stories.Uncontrolled}/>
## Options
@@ -36,9 +34,7 @@ As you can see the `value` is optional, if not provided, the `label` will be use
You can enable the text live filtering simply by using the `searchable` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--searchable-uncontrolled"/>
</Canvas>
<Canvas of={Stories.SearchableUncontrolled} />
> You can use `onSearchInputChange` to get the value of the input when the user is typing.
@@ -46,54 +42,38 @@ You can enable the text live filtering simply by using the `searchable` props.
You can use the following props to change the state of the Select component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--error"/>
</Canvas>
<Canvas of={Stories.Success}/>
<Canvas of={Stories.Error}/>
## Disabled
As a regular select, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--disabled"/>
</Canvas>
<Canvas of={Stories.Disabled}/>
## Texts
As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--with-text"/>
</Canvas>
<Canvas of={Stories.WithText}/>
## Width
By default, the select has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--full-width"/>
</Canvas>
<Canvas of={Stories.FullWidth}/>
## Clearable
By default, the select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--not-clearable"/>
</Canvas>
<Canvas of={Stories.NotClearable}/>
## Disabled options
You can disable some options by using the `disabled` props on the `Option` object.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--disabled-options"/>
</Canvas>
<Canvas of={Stories.DisabledOptions}/>
## Hide label
@@ -101,9 +81,7 @@ For some reasons you might want to hide the label of the select. You can do that
> It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--hidden-label"/>
</Canvas>
<Canvas of={Stories.HiddenLabel}/>
## Custom render option
@@ -114,26 +92,20 @@ You can give customize the look of the options by providing `render` callback.
Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom
HTML or with its `label`. It is set to `true` by default.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--custom-render"/>
</Canvas>
<Canvas of={Stories.CustomRender}/>
## Controlled / Non Controlled
Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--controlled"/>
</Canvas>
<Canvas of={Stories.Controlled}/>
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--react-hook-form"/>
</Canvas>
<Canvas of={Stories.ReactHookForm}/>
## Props
@@ -172,9 +144,7 @@ See also [Field](?path=/story/components-forms-field-doc--page)
## Form Example
<Canvas>
<Story id="components-forms-select-mono--form-example"/>
</Canvas>
<Canvas of={Stories.FormExample}/>
##

57
packages/react/src/components/Forms/Select/multi.mdx
View File

@@ -10,9 +10,7 @@ using [Downshift](https://www.downshift-js.com/), so that mean there is no `sele
The Multi-Select leverages the regular [Select](?path=/docs/components-forms-select-mono--docs) component, you just have to add the `multi` props.
<Canvas>
<Story id="components-forms-select-multi--full-width"/>
</Canvas>
<Canvas of={Stories.FullWidth}/>
## Options
@@ -22,9 +20,7 @@ The `options` props works the same as the `options` props in the [Select](?path=
You can enable the text live filtering simply by using the `searchable` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--searchable-uncontrolled"/>
</Canvas>
<Canvas of={Stories.SearchableUncontrolled}/>
> You can use `onSearchInputChange` to get the value of the input when the user is typing.
@@ -32,53 +28,38 @@ You can enable the text live filtering simply by using the `searchable` props.
You can use the following props to change the state of the Multi-Select component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--error"/>
</Canvas>
<Canvas of={Stories.Success}/>
<Canvas of={Stories.Error}/>
## Disabled
As a regular select, you can disable it by using the `disabled` props. In this mode the user can't select nor unselect existing options.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--disabled"/>
</Canvas>
<Canvas of={Stories.Disabled}/>
## Texts
As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--with-text"/>
</Canvas>
<Canvas of={Stories.WithText}/>
## Width
By default, the Multi-Select has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--full-width"/>
</Canvas>
<Canvas of={Stories.FullWidth}/>
## Clearable
By default, the Multi-Select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--not-clearable"/>
</Canvas>
<Canvas of={Stories.NotClearable}/>
## Disabled options
You can disable some options by using the `disabled` props on the `Option` object.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--disabled-options"/>
</Canvas>
<Canvas of={Stories.DisabledOptions}/>
## Hide label
@@ -86,9 +67,7 @@ For some reasons you might want to hide the label of the Multi-Select. You can d
> It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--hidden-label"/>
</Canvas>
<Canvas of={Stories.HiddenLabel}/>
## Monoline
@@ -98,9 +77,7 @@ always see the full list of selected options without having to scroll.
> At the moment this props cannot be used in conjunction with `searchable` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--monoline"/>
</Canvas>
<Canvas of={Stories.Monoline}/>
## Custom render option
@@ -111,26 +88,20 @@ You can give customize the look of the options by providing `render` callback.
Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom
HTML or with its `label`. It is set to `true` by default.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--searchable-custom-render"/>
</Canvas>
<Canvas of={Stories.SearchableCustomRender}/>
## Controlled / Non Controlled
Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--controlled"/>
</Canvas>
<Canvas of={Stories.Controlled}/>
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--react-hook-form"/>
</Canvas>
<Canvas of={Stories.ReactHookForm}/>
## Props

63
packages/react/src/components/Forms/Switch/index.mdx
View File

@@ -1,6 +1,7 @@
import { Canvas, Story, Meta, ArgsTable, Source } from '@storybook/addon-docs';
import { Canvas, Story, Meta, Source } from '@storybook/addon-docs';
import { Switch } from './index';
import * as Stories from './index.stories';
import { ArgTypes } from '@storybook/blocks';
<Meta of={Stories}/>
@@ -10,10 +11,7 @@ Cunningham provides a Switch component that can be used in a variety of ways.
> To better understand the Switch component, keep in mind that it is kind of a wrapper around the native HTML checkbox element.
<Canvas>
<Story id="components-forms-switch--form-example"/>
</Canvas>
<Canvas of={Stories.FormExample}/>
## Label
@@ -21,15 +19,11 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label**
<Canvas sourceState="shown">
<Story id="components-forms-switch--default"/>
</Canvas>
<Canvas of={Stories.Default}/>
**With label**
<Canvas sourceState="shown">
<Story id="components-forms-switch--with-label"/>
</Canvas>
<Canvas of={Stories.WithLabel}/>
## Label Side
@@ -39,53 +33,34 @@ You can decide where to place the label by using the `labelSide` prop.
**Label on the left (default)**
<Canvas sourceState="shown">
<Story id="components-forms-switch--with-label"/>
</Canvas>
<Canvas of={Stories.WithLabel}/>
**Label on the right**
<Canvas sourceState="shown">
<Story id="components-forms-switch--with-label-right"/>
</Canvas>
<Canvas of={Stories.WithLabelRight}/>
## Disabled
You can disable the switch by using the `disabled` prop.
<Canvas sourceState="shown">
<Story id="components-forms-switch--disabled"/>
<Story id="components-forms-switch--disabled-checked"/>
</Canvas>
<Canvas of={Stories.Disabled}/>
<Canvas of={Stories.DisabledChecked}/>
## States
You can use the following props to change the state of the component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-switch--with-text"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-switch--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-switch--error"/>
</Canvas>
<Canvas of={Stories.WithText}/>
<Canvas of={Stories.Success}/>
<Canvas of={Stories.Error}/>
## Width
By default, the Switch will automatically take the minimum needed width. But you can force it to take the full width of
its container by using the `fullWidth` prop.
<Canvas sourceState="shown">
<Story id="components-forms-switch--full-width"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-switch--with-label-right-and-full-width"/>
</Canvas>
<Canvas of={Stories.FullWidth}/>
<Canvas of={Stories.WithLabelRightAndFullWidth}/>
## Controlled / Non Controlled
@@ -95,23 +70,19 @@ In order to control the value of the switch, you can use the `checked` or `defau
> If you use the `defaultChecked` prop, the switch will be uncontrolled.
<Canvas sourceState="shown">
<Story id="components-forms-switch--controlled"/>
</Canvas>
<Canvas of={Stories.Controlled}/>
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown">
<Story id="components-forms-switch--react-hook-form"/>
</Canvas>
<Canvas of={Stories.ReactHookForm}/>
## Props
The props of this component are as close as possible to the native checkbox component. You can see the list of props below.
<ArgsTable of={Switch} />
<ArgTypes of={Switch} />
## Design tokens

52
packages/react/src/components/Forms/TextArea/index.mdx
View File

@@ -8,9 +8,7 @@ import { TextArea } from '.';
Cunningham provides a versatile TextArea component that you can use in your forms.
<Canvas>
<Story id="components-forms-textarea--default"/>
</Canvas>
<Canvas of={Stories.Default}/>
<Source
language='ts'
@@ -23,74 +21,52 @@ Cunningham provides a versatile TextArea component that you can use in your form
You can use the following props to change the state of the TextArea component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--default"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-textarea--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-textarea--error"/>
</Canvas>
<Canvas of={Stories.Default}/>
<Canvas of={Stories.Success}/>
<Canvas of={Stories.Error}/>
## Disabled
As a regular textarea, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--disabled-empty"/>
<Story id="components-forms-textarea--disabled-filled"/>
</Canvas>
<Canvas of={Stories.DisabledEmpty}/>
<Canvas of={Stories.DisabledFilled}/>
## Texts
You can define a text that will appear below the input by using the `text` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--with-text"/>
</Canvas>
<Canvas of={Stories.WithText}/>
You can also independently add a text on the right side by using the `rightText` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--with-both-texts"/>
</Canvas>
<Canvas of={Stories.WithBothTexts}/>
## Width
By default, the textarea has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--full-width"/>
</Canvas>
<Canvas of={Stories.FullWidth}/>
## Chars Counter
You can display a counter of the number of characters entered in the textarea by using the `charsCounter` props. Please bare
in mind to also define `charCounterMax`.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--char-counter"/>
</Canvas>
<Canvas of={Stories.CharCounter}/>
## Controlled / Non Controlled
Like a native textarea, you can use the TextArea component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--controlled"/>
</Canvas>
<Canvas of={Stories.Controlled}/>
## Ref
You can use the `ref` props to get a reference to the textarea element.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--with-ref"/>
</Canvas>
<Canvas of={Stories.WithRef}/>
## Props
@@ -121,6 +97,4 @@ Here are the custom design tokens defined by the textarea.
## Form Example
<Canvas>
<Story id="components-forms-textarea--form-example"/>
</Canvas>
<Canvas of={Stories.FormExample}/>

73
packages/react/src/components/Modal/index.mdx
View File

@@ -9,9 +9,7 @@ import { Modal } from './index';
Cunningham provides a versatile Modal component for displaying any kind of information.
<Canvas>
<Story of={Stories.ThreeButtons} inline={false}/>
</Canvas>
<Canvas of={Stories.ThreeButtons} story={{inline: false}}/>
<Source
language='ts'
@@ -98,36 +96,25 @@ You can set the size of the modal by passing the `size` prop.
### Small
<Canvas>
<Story of={Stories.Small} inline={false}/>
</Canvas>
<Canvas of={Stories.Small} story={{inline: false}}/>
### Medium
<Canvas>
<Story of={Stories.Medium} inline={false}/>
</Canvas>
<Canvas of={Stories.Medium} story={{inline: false}}/>
### Large
<Canvas>
<Story of={Stories.Large} inline={false}/>
</Canvas>
<Canvas of={Stories.Large} story={{inline: false}}/>
### Full
<Canvas>
<Story of={Stories.FullWithContent} inline={false}/>
</Canvas>
<Canvas of={Stories.FullWithContent} story={{inline: false}}/>
## Close button
You can hide the close button by passing the `hideCloseButton` prop.
<Canvas>
<Story of={Stories.HideCloseButton} inline={false}/>
</Canvas>
<Canvas of={Stories.HideCloseButton} story={{inline: false}}/>
## Buttons
@@ -135,42 +122,32 @@ You can hide the close button by passing the `hideCloseButton` prop.
You can add buttons on the right side of the modal by passing the `rightActions` prop.
<Canvas>
<Story of={Stories.PrimaryButton} inline={false}/>
</Canvas>
<Canvas of={Stories.PrimaryButton} story={{inline: false}}/>
### Left buttons
You can add buttons on the left side of the modal by passing the `leftActions` prop.
<Canvas>
<Story of={Stories.ThreeButtons} inline={false}/>
</Canvas>
<Canvas of={Stories.ThreeButtons} story={{inline: false}}/>
### Center buttons
You can add buttons on the center of the modal by passing the `actions` prop.
<Canvas>
<Story of={Stories.CenterButtons} inline={false}/>
</Canvas>
<Canvas of={Stories.CenterButtons} story={{inline: false}}/>
## Icon
You can add an icon to the modal by passing the `titleIcon` prop.
<Canvas>
<Story of={Stories.ExampleApplication} inline={false}/>
</Canvas>
<Canvas of={Stories.ExampleApplication} story={{inline: false}}/>
## Close on click outside
By default, the modal will not be closed when you click outside of it in order to match the default behavior of the `<dialog/>` element.
You can change this behavior by passing the `closeOnClickOutside` prop.
<Canvas>
<Story of={Stories.CloseOnClickOutside} inline={false}/>
</Canvas>
<Canvas of={Stories.CloseOnClickOutside} story={{inline: false}}/>
## Pre Built Modals
@@ -208,15 +185,11 @@ const App = () => {
### Confirmation modal
<Canvas>
<Story of={PreBuiltStories.ConfirmationModal} inline={false}/>
</Canvas>
<Canvas of={PreBuiltStories.ConfirmationModal} story={{inline: false}}/>
### Delete confirmation modal
<Canvas>
<Story of={PreBuiltStories.DeleteConfirmationModal} inline={false}/>
</Canvas>
<Canvas of={PreBuiltStories.DeleteConfirmationModal} story={{inline: false}}/>
### Message modal
@@ -224,21 +197,11 @@ This modal can be used to display a message to the user. It is possible to use m
#### Neutral
<Canvas>
<Story of={PreBuiltStories.NeutralModal} inline={false}/>
</Canvas>
<Canvas>
<Story of={PreBuiltStories.SuccessModal} inline={false}/>
</Canvas>
<Canvas>
<Story of={PreBuiltStories.InfoModal} inline={false}/>
</Canvas>
<Canvas>
<Story of={PreBuiltStories.ErrorModal} inline={false}/>
</Canvas>
<Canvas>
<Story of={PreBuiltStories.WarningModal} inline={false}/>
</Canvas>
<Canvas of={PreBuiltStories.NeutralModal} story={{inline: false}}/>
<Canvas of={PreBuiltStories.SuccessModal} story={{inline: false}}/>
<Canvas of={PreBuiltStories.InfoModal} story={{inline: false}}/>
<Canvas of={PreBuiltStories.ErrorModal} story={{inline: false}}/>
<Canvas of={PreBuiltStories.WarningModal} story={{inline: false}}/>
## Props

16
packages/react/src/components/Pagination/index.mdx
View File

@@ -11,9 +11,7 @@ for synchronous loading as well as asynchronous loading. You can paginate your a
fetch it from a server, the component is really versatile.
<Canvas sourceState="none">
<Story id="components-pagination--basic"/>
</Canvas>
<Canvas sourceState="none" of={Stories.Basic}/>
<Source
language='ts'
@@ -31,9 +29,7 @@ The most basic usage you can make of it is this one, defining a pagination with
### Basic
<Canvas sourceState="shown">
<Story id="components-pagination--basic"/>
</Canvas>
<Canvas sourceState="none" of={Stories.Basic}/>
### List of items
@@ -41,17 +37,13 @@ The most basic usage you can make of it is this one, defining a pagination with
But this won't make you really happy if you want to paginate your list of items, so you can wire things a bit better.
Let's make a component that paginate a list of random number.
<Canvas sourceState="shown">
<Story id="components-pagination--list"/>
</Canvas>
<Canvas sourceState="none" of={Stories.List}/>
### Set page programmatically
You can also set the page programmatically, for example, if you want to use a query parameter to set the page.
<Canvas sourceState="shown">
<Story id="components-pagination--force-page"/>
</Canvas>
<Canvas sourceState="none" of={Stories.ForcePage}/>
### Hide go to input