Skip to content

Commit

Permalink
chore(): update storybook examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@sashachabin
sashachabin committed Feb 7, 2025
1 parent 23bce4a commit 52fab02
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 109 deletions.
95 changes: 13 additions & 82 deletions packages/react-ui/components/DateRangePicker/__docs__/DateRangePicker.docs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,48 +11,35 @@ import {
LocaleContext,
Select,
} from '@skbkontur/react-ui';
import { ThemeIn } from 'react-ui/lib/theming/Theme';

import { Meta, Story } from '../../../typings/stories';
import { Validations as ValidationsStory } from '../__stories__/DateRangePicker.stories';
import {
Component,
CustomChildrenVertical,
CustomChildrenWithoutDash,
Sizes,
Validations as ValidationsStory,
} from '../__stories__/DateRangePicker.stories';

export default {
title: 'Date Components/DateRangePicker',
component: DateRangePicker,
parameters: { creevey: { skip: true } },
} as Meta;

export const Example1: Story = () => {
const [value, setValue] = React.useState(['', '']);
const minDate = '08.07.2024';
const maxDate = '18.08.2024';

return (
<DateRangePicker
value={value}
minDate={minDate}
maxDate={maxDate}
onValueChange={([start, end]) => setValue([start, end])}
>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>
);
};
export const Example1 = Component;
Example1.storyName = 'Выбор периода';

/**
* Для валидаций используйте `DateRangePicker.validate(value, options)`, который принимает:
* - `value` — проверяемые значения `['dd.mm.yyyy', 'dd.mm.yyyy']`
* - `options` — объект с настройками `{ startOptional, endOptional, minDate, maxDate }`
*
* Возвращается объект валидацией полей start и end в формате `[true, false]`
*
* Возвращается валидация полей start и end в формате `[true, false]`
*/
export const Validations = ValidationsStory;
Validations.storyName = 'Валидации';


/**
* Пример с кастомизацией темы и кастомным рендером дня
*/
Expand Down Expand Up @@ -124,43 +111,10 @@ export const ExampleCustomOptional: Story = () => {
};
ExampleCustomOptional.storyName = 'Открытые даты начала или конца';


/**
* Через параметр `size` доступны размеры `large`, `medium` и `small`. С помощью токенов `calendar*` можно управлять размерами календаря
*/
export const ExampleSizes: Story = () => {
const [valueS, setValueS] = React.useState(['', '']);
const [valueM, setValueM] = React.useState(['', '']);
const [valueL, setValueL] = React.useState(['', '']);

const theme = React.useContext(ThemeContext);
const createTheme = (tokens: ThemeIn) => ThemeFactory.create(tokens, theme);

return (
<Gapped vertical gap={16}>
<ThemeContext.Provider value={createTheme({ calendarCellWidth: '44px', calendarCellHeight: '44px' })}>
<DateRangePicker size="large" value={valueL} onValueChange={setValueL}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>{' '}
</ThemeContext.Provider>

<ThemeContext.Provider value={createTheme({ calendarCellWidth: '36px', calendarCellHeight: '36px' })}>
<DateRangePicker size="medium" value={valueM} onValueChange={setValueM}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>
</ThemeContext.Provider>
<DateRangePicker size="small" value={valueS} onValueChange={setValueS}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>
</Gapped>
);
};
export const ExampleSizes = Sizes;
ExampleSizes.storyName = 'Размеры';

/**
Expand All @@ -169,35 +123,12 @@ ExampleSizes.storyName = 'Размеры';
* - `<DateRangePicker.End />`
* - `<DateRangePicker.Separator />`
*/
export const ExampleCustomWithoutDash: Story = () => {
const [value, setValue] = React.useState(['', '']);
return (
<DateRangePicker value={value} onValueChange={setValue}>
<DateRangePicker.Start style={{ borderRadius: 0 }} />
<DateRangePicker.End style={{ marginLeft: -1, borderRadius: 0 }} />
</DateRangePicker>
);
};
export const ExampleCustomWithoutDash = CustomChildrenWithoutDash;
ExampleCustomWithoutDash.storyName = 'Поля без тире';

export const ExampleCustomVertical: Story = () => {
const [value, setValue] = React.useState(['', '']);

return (
<DateRangePicker value={value} onValueChange={([start, end]) => setValue([start, end])}>
<Gapped gap={4} vertical>
<DateRangePicker.Start />
<DateRangePicker.End />
</Gapped>
</DateRangePicker>
);
};
export const ExampleCustomVertical = CustomChildrenVertical;
ExampleCustomVertical.storyName = 'Вертикальное расположение';

/**
*
*/

export const ExampleDateFormat: Story = () => {
const [value, setValue] = React.useState(['', '']);
const [order, setOrder] = React.useState(DateOrder.YMD);
Expand Down
98 changes: 71 additions & 27 deletions packages/react-ui/components/DateRangePicker/__stories__/DateRangePicker.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,26 @@ import { DateRangePicker } from '../DateRangePicker';
import { Tooltip } from '../../Tooltip';
import { Gapped } from '../../Gapped';
import { LangCodes, LocaleContext } from '../../../lib/locale';
import { ThemeContext } from '../../../lib/theming/ThemeContext';
import { ThemeIn } from '../../../lib/theming/Theme';
import { ThemeFactory } from '../../../lib/theming/ThemeFactory';

export default {
title: 'DateRangePicker',
} as Meta;

export const Component = () => {
const [value, setValue] = React.useState(['', '']);
const minDate = '08.07.2024';
const maxDate = '18.08.2024';

return (
<DateRangePicker value={value} onValueChange={setValue}>
<DateRangePicker
value={value}
minDate={minDate}
maxDate={maxDate}
onValueChange={([start, end]) => setValue([start, end])}
>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
Expand All @@ -42,28 +52,33 @@ export const Sizes: Story = () => {
const [valueS, setValueS] = React.useState(['', '']);
const [valueM, setValueM] = React.useState(['', '']);
const [valueL, setValueL] = React.useState(['', '']);

const theme = React.useContext(ThemeContext);
const createTheme = (tokens: ThemeIn) => ThemeFactory.create(tokens, theme);

return (
<>
<Gapped vertical>
<Gapped vertical gap={16}>
<ThemeContext.Provider value={createTheme({ calendarCellWidth: '44px', calendarCellHeight: '44px' })}>
<DateRangePicker size="large" value={valueL} onValueChange={setValueL}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>
</ThemeContext.Provider>

<ThemeContext.Provider value={createTheme({ calendarCellWidth: '36px', calendarCellHeight: '36px' })}>
<DateRangePicker size="medium" value={valueM} onValueChange={setValueM}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>

<DateRangePicker size="small" value={valueS} onValueChange={setValueS}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>
</Gapped>
</>
</ThemeContext.Provider>
<DateRangePicker size="small" value={valueS} onValueChange={setValueS}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>
</Gapped>
);
};
Sizes.parameters = {};
Expand Down Expand Up @@ -94,11 +109,6 @@ export const Autofocus: Story = () => {
};
Autofocus.parameters = {};

export const MenuAlign: Story = () => {
return <></>;
};
MenuAlign.parameters = {};

export const MenuPos: Story = () => {
const [valueTop, setValueTop] = React.useState(['', '']);
const [valueBottom, setValueBottom] = React.useState(['', '']);
Expand Down Expand Up @@ -134,7 +144,6 @@ export const DateRangePickerLocaleProvider = () => {
</div>
);
};
DateRangePickerLocaleProvider.storyName = 'LocaleProvider';
DateRangePickerLocaleProvider.parameters = { creevey: { skip: true } };

export const Disabled: Story = () => {
Expand All @@ -150,25 +159,59 @@ export const Disabled: Story = () => {
};
Disabled.parameters = {};

export const CustomChildren: Story = () => {
const [value, setValue] = React.useState(['', '']);
export const OptionalRange: Story = () => {
const [value1, setValue1] = React.useState(['', '']);
const [value2, setValue2] = React.useState(['', '']);
const [value3, setValue3] = React.useState(['', '']);

return (
<DateRangePicker value={value} onValueChange={setValue}>
<Gapped vertical gap={4}>
<Gapped vertical gap={16}>
<DateRangePicker optional={[false, false]} value={value1} onValueChange={setValue1}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</Gapped>
</DateRangePicker>

<DateRangePicker optional={[true, true]} value={value2} onValueChange={setValue2}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>

<DateRangePicker optional={[true, true]} value={value3} onValueChange={setValue3}>
<DateRangePicker.Start />
<DateRangePicker.Separator />
<DateRangePicker.End />
</DateRangePicker>
</Gapped>
);
};
OptionalRange.parameters = {};

export const CustomChildrenWithoutDash: Story = () => {
const [value, setValue] = React.useState(['', '']);
return (
<DateRangePicker value={value} onValueChange={setValue}>
<DateRangePicker.Start style={{ borderRadius: 0 }} />
<DateRangePicker.End style={{ marginLeft: -1, borderRadius: 0 }} />
</DateRangePicker>
);
};
CustomChildren.storyName = 'CustomChildren';
CustomChildren.parameters = {};
CustomChildrenWithoutDash.parameters = {};

export const CustomChildrenVertical: Story = () => {
const [value, setValue] = React.useState(['', '']);

export const Range: Story = () => {
return <></>;
return (
<DateRangePicker value={value} onValueChange={([start, end]) => setValue([start, end])}>
<Gapped gap={4} vertical>
<DateRangePicker.Start />
<DateRangePicker.End />
</Gapped>
</DateRangePicker>
);
};
Range.parameters = {};
CustomChildrenVertical.parameters = {};

export const Validations: Story = () => {
const [value, setValue] = React.useState(['', '']);
Expand Down Expand Up @@ -223,3 +266,4 @@ export const Validations: Story = () => {
</DateRangePicker>
);
};
Validations.parameters = {};

0 comments on commit 52fab02

Please sign in to comment.