From e44a13f38f9867a2102368bf40a56077b973a138 Mon Sep 17 00:00:00 2001 From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:05:20 +0300 Subject: [PATCH] feat(DatePicker): rm component (#7840) * feat(DatePicker): rm component * feat(DatePicker): add codemod * fix: remove import --- .../codemods/src/transforms/v7/date-picker.ts | 31 +++ .../DatePicker/DatePicker.e2e-playground.tsx | 30 --- .../components/DatePicker/DatePicker.e2e.tsx | 11 - .../DatePicker/DatePicker.module.css | 31 --- .../DatePicker/DatePicker.stories.tsx | 25 -- .../components/DatePicker/DatePicker.test.tsx | 216 ---------------- .../src/components/DatePicker/DatePicker.tsx | 244 ------------------ .../vkui/src/components/DatePicker/Readme.md | 39 --- ...atepicker-android-chromium-dark-1-snap.png | 3 - ...tepicker-android-chromium-light-1-snap.png | 3 - .../datepicker-ios-webkit-dark-1-snap.png | 3 - .../datepicker-ios-webkit-light-1-snap.png | 3 - .../datepicker-vkcom-chromium-dark-1-snap.png | 3 - ...datepicker-vkcom-chromium-light-1-snap.png | 3 - .../datepicker-vkcom-firefox-dark-1-snap.png | 3 - .../datepicker-vkcom-firefox-light-1-snap.png | 3 - .../datepicker-vkcom-webkit-dark-1-snap.png | 3 - .../datepicker-vkcom-webkit-light-1-snap.png | 3 - .../FormLayoutGroup.e2e-playground.tsx | 4 +- ...youtgroup-android-chromium-dark-1-snap.png | 4 +- ...outgroup-android-chromium-light-1-snap.png | 4 +- ...formlayoutgroup-ios-webkit-dark-1-snap.png | 4 +- ...ormlayoutgroup-ios-webkit-light-1-snap.png | 4 +- ...layoutgroup-vkcom-chromium-dark-1-snap.png | 4 +- ...ayoutgroup-vkcom-chromium-light-1-snap.png | 4 +- ...mlayoutgroup-vkcom-firefox-dark-1-snap.png | 4 +- ...layoutgroup-vkcom-firefox-light-1-snap.png | 4 +- ...rmlayoutgroup-vkcom-webkit-dark-1-snap.png | 4 +- ...mlayoutgroup-vkcom-webkit-light-1-snap.png | 4 +- .../ModalPage/ModalPage.stories.tsx | 15 +- .../vkui/src/components/ModalRoot/Readme.md | 12 +- packages/vkui/src/index.ts | 2 - styleguide/config.js | 1 - 33 files changed, 67 insertions(+), 664 deletions(-) create mode 100644 packages/codemods/src/transforms/v7/date-picker.ts delete mode 100644 packages/vkui/src/components/DatePicker/DatePicker.e2e-playground.tsx delete mode 100644 packages/vkui/src/components/DatePicker/DatePicker.e2e.tsx delete mode 100644 packages/vkui/src/components/DatePicker/DatePicker.module.css delete mode 100644 packages/vkui/src/components/DatePicker/DatePicker.stories.tsx delete mode 100644 packages/vkui/src/components/DatePicker/DatePicker.test.tsx delete mode 100644 packages/vkui/src/components/DatePicker/DatePicker.tsx delete mode 100644 packages/vkui/src/components/DatePicker/Readme.md delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-dark-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-light-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-dark-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-light-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-dark-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-light-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-dark-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-light-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-dark-1-snap.png delete mode 100644 packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-light-1-snap.png diff --git a/packages/codemods/src/transforms/v7/date-picker.ts b/packages/codemods/src/transforms/v7/date-picker.ts new file mode 100644 index 0000000000..175daa5bbd --- /dev/null +++ b/packages/codemods/src/transforms/v7/date-picker.ts @@ -0,0 +1,31 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo } from '../../codemod-helpers'; +import { report } from '../../report'; +import { JSCodeShiftOptions } from '../../types'; + +export const parser = 'tsx'; + +export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) { + const { alias } = options; + const j = api.jscodeshift; + const source = j(file.source); + const { localName } = getImportInfo(j, file, 'DatePicker', alias); + + if (!localName) { + return source.toSource(); + } + source + .find(j.JSXElement, { + openingElement: { + name: { name: localName }, + }, + }) + .forEach(() => { + report( + api, + `Manual changes required for ${localName}. component DatePicker was removed in v7.0.0, please use Input, Select or DateInput component`, + ); + }); + + return source.toSource(); +} diff --git a/packages/vkui/src/components/DatePicker/DatePicker.e2e-playground.tsx b/packages/vkui/src/components/DatePicker/DatePicker.e2e-playground.tsx deleted file mode 100644 index dc352916c6..0000000000 --- a/packages/vkui/src/components/DatePicker/DatePicker.e2e-playground.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers'; -import { - AdaptivityProvider, - type AdaptivityProviderProps, -} from '../AdaptivityProvider/AdaptivityProvider'; -import { DatePicker, type DatePickerProps } from './DatePicker'; - -type DatePickerPropsWithAdaptivity = DatePickerProps & - Pick; - -export const DatePickerPlayground = (props: ComponentPlaygroundProps) => { - return ( - - {({ hasPointer, sizeY, ...props }: DatePickerPropsWithAdaptivity) => ( - - - - )} - - ); -}; diff --git a/packages/vkui/src/components/DatePicker/DatePicker.e2e.tsx b/packages/vkui/src/components/DatePicker/DatePicker.e2e.tsx deleted file mode 100644 index ad65e8761c..0000000000 --- a/packages/vkui/src/components/DatePicker/DatePicker.e2e.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { test } from '@vkui-e2e/test'; -import { DatePickerPlayground } from './DatePicker.e2e-playground'; - -test('DatePicker', async ({ - mount, - expectScreenshotClippedToContent, - componentPlaygroundProps, -}) => { - await mount(); - await expectScreenshotClippedToContent(); -}); diff --git a/packages/vkui/src/components/DatePicker/DatePicker.module.css b/packages/vkui/src/components/DatePicker/DatePicker.module.css deleted file mode 100644 index 310d5a57be..0000000000 --- a/packages/vkui/src/components/DatePicker/DatePicker.module.css +++ /dev/null @@ -1,31 +0,0 @@ -.host { - margin: 0; - padding: 0; - border: 0; -} - -.container { - inline-size: 100%; - display: flex; - flex-direction: row; -} - -.day { - min-inline-size: 72px; -} - -.month { - min-inline-size: 0; - display: flex; - flex: 1 0 0; - padding-block: 0; - padding-inline: 8px; -} - -.year { - min-inline-size: 92px; -} - -.monthSelect { - inline-size: 100%; -} diff --git a/packages/vkui/src/components/DatePicker/DatePicker.stories.tsx b/packages/vkui/src/components/DatePicker/DatePicker.stories.tsx deleted file mode 100644 index 48b54587bd..0000000000 --- a/packages/vkui/src/components/DatePicker/DatePicker.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; -import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants'; -import { DatePicker, type DatePickerProps } from './DatePicker'; - -const story: Meta = { - title: 'Forms/DatePicker', - component: DatePicker, - parameters: { ...CanvasFullLayout, ...DisableCartesianParam }, - args: { onDateChange: fn() }, -}; - -export default story; - -type Story = StoryObj; - -export const Playground: Story = { - args: { - min: { day: 1, month: 1, year: 1901 }, - max: { day: 1, month: 1, year: 2006 }, - dayPlaceholder: 'ДД', - monthPlaceholder: 'ММММ', - yearPlaceholder: 'ГГГГ', - }, -}; diff --git a/packages/vkui/src/components/DatePicker/DatePicker.test.tsx b/packages/vkui/src/components/DatePicker/DatePicker.test.tsx deleted file mode 100644 index f5ffc5e5ec..0000000000 --- a/packages/vkui/src/components/DatePicker/DatePicker.test.tsx +++ /dev/null @@ -1,216 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import { baselineComponent, fakeTimers, userEvent } from '../../testing/utils'; -import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider'; -import { DatePicker, type DatePickerProps } from './DatePicker'; - -const getDate = (year = 2021, month = 1, day = 1) => ({ year, month, day }); -const getByName = (name: string) => document.getElementsByName(name)[0] as HTMLInputElement; - -const DatePickerCustom = (props: DatePickerProps) => { - return ( - - - - ); -}; -const DatePickerNative = (props: DatePickerProps) => { - return ( - - - - ); -}; - -describe('DatePicker', () => { - fakeTimers(); - baselineComponent(DatePicker, { - // TODO [a11y]: "Exceeded timeout of 5000 ms for a test. - // Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout." - a11y: false, - }); - - describe('custom', () => { - const select = async (name: string, value: number) => - await userEvent.selectOptions(getByName(name), String(value)); - - it.each([ - ['uncontrolled', 'defaultValue'], - ['controlled', 'value'], - ])('renders value when %s', (_type, propName) => { - const props = { [propName]: getDate() }; - render(); - expect(getByName('year')).toHaveValue('2021'); - expect(getByName('month')).toHaveValue('1'); - expect(getByName('day')).toHaveValue('1'); - expect(getByName('date')).toHaveValue('2021-01-01'); - }); - - it('fires change', async () => { - let date = getDate(); - render( (date = v)} />); - - await select('year', 2019); - expect(date).toEqual(getDate(2019, 1, 1)); - expect(getByName('date')).toHaveValue('2019-01-01'); - - await select('month', 5); - expect(date).toEqual(getDate(2019, 5, 1)); - expect(getByName('date')).toHaveValue('2019-05-01'); - - await select('day', 5); - expect(date).toEqual(getDate(2019, 5, 5)); - expect(getByName('date')).toHaveValue('2019-05-05'); - }); - - describe('renders options', () => { - const getOptions = (name: string) => - Array.from(getByName(name).querySelectorAll('option')).map((e) => e.value); - - it('year, with min/max', () => { - render(); - expect(getOptions('year')).toEqual(['2020', '2019', '2018']); - }); - - describe('month', () => { - const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; - - it('without min / max', () => { - render(); - expect(getOptions('month')).toEqual(months); - }); - - it.skip('respects min', async () => { - render(); - expect(getOptions('month')).toEqual(months); - await select('year', 2022); - expect(getOptions('month')).toEqual(['11', '12']); - }); - - it.skip('respects max', async () => { - render(); - expect(getOptions('month')).toEqual(months); - await select('year', 2018); - expect(getOptions('month')).toEqual(['1', '2']); - }); - }); - - describe('day', () => { - const days = (count: number) => new Array(count).fill(0).map((_, i) => String(i + 1)); - - it('depends on month', async () => { - render(); - // allows 31 by default - expect(getOptions('day')).toEqual(days(31)); - - await select('month', 5); - expect(getOptions('day')).toEqual(days(31)); - - await select('month', 4); - expect(getOptions('day')).toEqual(days(30)); - }); - - describe('respects gap year', () => { - it('allows 29 by default', async () => { - render(); - await select('month', 2); - expect(getOptions('day')).toEqual(days(29)); - }); - - it('allows 29 in gap year', () => { - render(); - expect(getOptions('day')).toEqual(days(29)); - }); - - it('allows 28 in non-gap year', () => { - render(); - expect(getOptions('day')).toEqual(days(28)); - }); - }); - - it.skip('respects min', () => { - const min = getDate(2022, 11, 29); - render(); - expect(getOptions('day')).toEqual(['29', '30']); - }); - - it.skip('respects max', () => { - const max = getDate(2018, 2, 2); - render(); - expect(getOptions('day')).toEqual(['1', '2']); - }); - }); - }); - - it('respects outer value when controlled', async () => { - const { rerender } = render(); - expect(getByName('date')).toHaveValue('2021-01-01'); - rerender(); - expect(getByName('date')).toHaveValue('2021-01-02'); - }); - }); - - describe('native', () => { - const getInput = () => document.querySelector('input') as Element; - - it.each([ - ['uncontrolled', 'defaultValue'], - ['controlled', 'value'], - ])('renders value when %s', (_type, propName) => { - const props = { [propName]: getDate() }; - render(); - expect(getInput()).toHaveValue('2021-01-01'); - }); - - it('sets min/max', () => { - render(); - expect(getInput()).toHaveAttribute('min', '2021-01-01'); - expect(getInput()).toHaveAttribute('max', '2021-01-01'); - }); - - it('fires change', async () => { - let date = getDate(); - render( (date = v)} />); - - await userEvent.type(getInput(), '2019-05-05'); - expect(date).toEqual(getDate(2019, 5, 5)); - }); - - it('resets form when uncontrolled', () => { - render( -
- - , - ); - fireEvent.change(getByName('date'), { target: { value: '2024-02-03' } }); - expect(getByName('date')).toHaveValue('2024-02-03'); - screen.getByTestId('form').reset(); - expect(getByName('date')).toHaveValue(''); - }); - it('resets form with defaultValue when uncontrolled', () => { - render( -
- - , - ); - fireEvent.change(getByName('date'), { target: { value: '2024-02-03' } }); - expect(getByName('date')).toHaveValue('2024-02-03'); - screen.getByTestId('form').reset(); - expect(getByName('date')).toHaveValue('2021-01-01'); - }); - - it('respects outer value when controlled', async () => { - const { rerender } = render( -
- - , - ); - expect(getByName('date')).toHaveValue('2021-01-01'); - rerender( -
- - , - ); - expect(getByName('date')).toHaveValue('2021-01-02'); - }); - }); -}); diff --git a/packages/vkui/src/components/DatePicker/DatePicker.tsx b/packages/vkui/src/components/DatePicker/DatePicker.tsx deleted file mode 100644 index d09e2f6497..0000000000 --- a/packages/vkui/src/components/DatePicker/DatePicker.tsx +++ /dev/null @@ -1,244 +0,0 @@ -'use client'; - -import * as React from 'react'; -import { leadingZero } from '@vkontakte/vkjs'; -import { clamp } from '../../helpers/math'; -import { range } from '../../helpers/range'; -import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer'; -import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl'; -import { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener'; -import type { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types'; -import { CustomSelect } from '../CustomSelect/CustomSelect'; -import { Input, type InputProps } from '../Input/Input'; -import { RootComponent } from '../RootComponent/RootComponent'; -import styles from './DatePicker.module.css'; - -const DefaultMonths: string[] = [ - 'Января', - 'Февраля', - 'Марта', - 'Апреля', - 'Мая', - 'Июня', - 'Июля', - 'Августа', - 'Сентября', - 'Октября', - 'Ноября', - 'Декабря', -]; - -export type DatePickerDateFormat = { - day: number; - month: number; - year: number; -}; - -const DEFAULT_EMPTY_DATE = { day: 0, month: 0, year: 0 }; - -export interface DatePickerProps - extends Omit< - HTMLAttributesWithRootRef, - 'defaultValue' | 'value' | 'min' | 'max' - > { - min?: DatePickerDateFormat; - max?: DatePickerDateFormat; - name?: string; - defaultValue?: DatePickerDateFormat; - value?: DatePickerDateFormat; - popupDirection?: 'top' | 'bottom'; - monthNames?: string[]; - dayPlaceholder?: string; - monthPlaceholder?: string; - yearPlaceholder?: string; - onDateChange?: (value: DatePickerDateFormat) => void; // TODO [>=7] заменить на onChange - disabled?: boolean; -} - -// Переводим state к формату гг-мм-дд -function convertToInputFormat(value: Partial | undefined) { - if (!value) { - return undefined; - } - const { day = 0, month = 0, year = 0 } = value; - return `${year}-${leadingZero(month)}-${leadingZero(day)}`; -} - -// Переводим дату формата гг-мм-дд к объекту -function parseInputDate(date: string): DatePickerDateFormat { - if (date.length === 0) { - return DEFAULT_EMPTY_DATE; - } - const splited = date.split('-'); - - return { - day: Number(splited[2]), - month: Number(splited[1]), - year: Number(splited[0]), - }; -} - -function getMonthMaxDay(month?: number, year?: number) { - return month ? new Date(year || 2016, month, 0).getDate() : 31; -} - -const DatePickerCustom = ({ - name, - min = { day: 0, month: 0, year: 0 }, - max = { day: 31, month: 12, year: 2100 }, - dayPlaceholder, - monthPlaceholder, - yearPlaceholder, - popupDirection, - value, - monthNames, - onDateChange, - disabled, - defaultValue = DEFAULT_EMPTY_DATE, - ...restProps -}: DatePickerProps) => { - const isControlled = value !== undefined; - const [internalValue, setInternalValue] = useCustomEnsuredControl({ value, defaultValue }); - const hiddenInput = React.useRef(null); - - const onSelectChange: React.ChangeEventHandler = (e) => { - const nextDate = { - day: internalValue.day, - month: internalValue.month, - year: internalValue.year, - }; - nextDate[e.target.name as keyof typeof nextDate] = Number(e.target.value); - nextDate.day = nextDate.day - ? clamp(nextDate.day, 1, getMonthMaxDay(nextDate.month, nextDate.year)) - : nextDate.day; - setInternalValue(nextDate); - onDateChange?.(nextDate); - }; - const dayOptions = range(1, getMonthMaxDay(internalValue.month, internalValue.year)).map( - (value) => ({ - label: String(value), - value, - }), - ); - const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({ - label: name, - value: index + 1, - })); - const yearOptions = range(max.year, min.year).map((value) => ({ - label: String(value), - value: value, - })); - - useNativeFormResetListener(hiddenInput, () => { - if (!isControlled) { - setInternalValue(defaultValue); - } - }); - - return ( - -
-
- -
-
- -
-
- -
-
- - - ); -}; - -const DatePickerNative = ({ - min = { day: 0, month: 0, year: 0 }, - max = { day: 31, month: 12, year: 2100 }, - monthNames, - popupDirection, - dayPlaceholder, - monthPlaceholder, - yearPlaceholder, - value, - defaultValue = DEFAULT_EMPTY_DATE, - onDateChange, - ...restProps -}: DatePickerProps) => { - const onStringChange: React.ChangeEventHandler = React.useCallback( - (e) => { - onDateChange?.(parseInputDate(e.currentTarget.value)); - }, - [onDateChange], - ); - const inputProps: HasOnlyExpectedProps< - typeof restProps & Pick, - InputProps - > = restProps; - - const valueProps = value - ? { value: convertToInputFormat(value) } - : { defaultValue: convertToInputFormat(defaultValue) }; - - return ( - - ); -}; - -/** - * @see https://vkcom.github.io/VKUI/#/DatePicker - * - * @deprecated 6.2.0 - * - * Компонент устарел и будет удален в v7. Используйте вместо него компоненты - * [Input](https://vkcom.github.io/VKUI/#/Input) и - * [Select](https://vkcom.github.io/VKUI/#/Select). - */ -export const DatePicker = ({ onDateChange, ...props }: DatePickerProps): React.ReactNode => { - const hasPointer = useAdaptivityHasPointer(); - - const onChange = (update: DatePickerDateFormat) => { - onDateChange && onDateChange({ ...update }); - }; - - const Cmp = hasPointer ? DatePickerCustom : DatePickerNative; - return ; -}; diff --git a/packages/vkui/src/components/DatePicker/Readme.md b/packages/vkui/src/components/DatePicker/Readme.md deleted file mode 100644 index db630e9fc8..0000000000 --- a/packages/vkui/src/components/DatePicker/Readme.md +++ /dev/null @@ -1,39 +0,0 @@ -Компонент выбора даты. Для десктопа - это три [CustomSelect-a](#!/CustomSelect). Для мобильного вида - input c `type="date"` - -Принимает значения `min` (минимальная доступная дата), `max` (максимальная), `defaultValue` (для неконтролируемого компонента) и `value` (для контролируемого компонента) в формате `{day: 1, month: 1, year: 1901}`, - -`onDateChange` - используется для получения значения DatePicker-а. - -Для десктопного вида можно передать массив с названиями месяцев, иначе будут использоваться дефолтные русские в родительном падеже. - -```jsx - - - DatePicker - - - { - console.log(value); - }} - dayPlaceholder="ДД" - monthPlaceholder="ММММ" - yearPlaceholder="ГГГГ" - /> - - - { - console.log(value); - }} - /> - - - - -``` diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-dark-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-dark-1-snap.png deleted file mode 100644 index edb7cbd04c..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-dark-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:302638e082d6752993efef9ef1212dc46900fd66554bea5bee7a13c9a0e01d9f -size 56177 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-light-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-light-1-snap.png deleted file mode 100644 index 9e6536acd4..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-android-chromium-light-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c0e091944abcd74b3c1e7f3123bf2425dce21e8bf9c9801341153eb03274d88a -size 56784 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-dark-1-snap.png deleted file mode 100644 index cf16ac9e4f..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-dark-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2d6a465e7eb0a170828f1b75cb6243a889b517698b80ed281a4a7385a9eb22cf -size 50431 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-light-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-light-1-snap.png deleted file mode 100644 index 82fb8ce79a..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-ios-webkit-light-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dd6e48e6c22c0c240011a79cb3bc005ffc415e3b3a04c8c45a812cb9bbd4170b -size 50710 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-dark-1-snap.png deleted file mode 100644 index a2a6fd9c3e..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-dark-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2f4a2af06daf37a0d3ed7e21063f538194fbb7bdcc7c6648bc7b7641c05e1dea -size 52880 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-light-1-snap.png deleted file mode 100644 index cddb5c3650..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-chromium-light-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2053da3b0ea6129a2d838d7cfe20dfb2b42ab807964c0910e6e891a6c8946262 -size 47869 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-dark-1-snap.png deleted file mode 100644 index e27369f021..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-dark-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:69ccb9fe221b5b55cd61b0cefaed3b1e08e475fc64726be9010c2bece169e1ea -size 68837 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-light-1-snap.png deleted file mode 100644 index 360c3bdd83..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-firefox-light-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a6ecf29094391c0c02e0d669c7a7936897950a261b60191fe66dbedcd6d4160b -size 70248 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-dark-1-snap.png deleted file mode 100644 index c79f164d8a..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-dark-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:08d15668d926e5e9ac59eefd9bf1071042a3cc95ebbc083992534e4d6c6ca86c -size 45944 diff --git a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-light-1-snap.png deleted file mode 100644 index ac00a63e6a..0000000000 --- a/packages/vkui/src/components/DatePicker/__image_snapshots__/datepicker-vkcom-webkit-light-1-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:64b8238114f1b168a5b4c9480027077dfb0f11b89a8d6925ebea942d78f0abce -size 46457 diff --git a/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.e2e-playground.tsx b/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.e2e-playground.tsx index 8110819426..444b631b52 100644 --- a/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.e2e-playground.tsx +++ b/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.e2e-playground.tsx @@ -4,7 +4,7 @@ import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider'; import { ChipsInput } from '../ChipsInput/ChipsInput'; import { ChipsSelect } from '../ChipsSelect/ChipsSelect'; import { CustomSelect } from '../CustomSelect/CustomSelect'; -import { DatePicker } from '../DatePicker/DatePicker'; +import { DateInput } from '../DateInput/DateInput'; import { FormItem } from '../FormItem/FormItem'; import { Input } from '../Input/Input'; import { NativeSelect } from '../NativeSelect/NativeSelect'; @@ -196,7 +196,7 @@ export const FormLayoutGroupPlayground = (props: ComponentPlaygroundProps) => { - + , ], diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-dark-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-dark-1-snap.png index 83de2f2db3..73cc109ed3 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4445b059e9d76142ce26b14b9fef82c249e6aa788357cff98e77420c3f383ef5 -size 154723 +oid sha256:ce9fa7112299f07ebee9e8367ac68362e2064e44cf94559712da8431216b2d76 +size 153594 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-light-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-light-1-snap.png index 482a79df6b..2b759221b2 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e67a36c7f2789087875e3607a1bb2a86eb76cec23cca1021ad54173ba2be645e -size 157205 +oid sha256:b533eab7102e3fedd1d20da5a6bddcc2970c6693c1342781aea05b44ff616278 +size 156158 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-dark-1-snap.png index e3d8407675..61750f1470 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:47d21936311cffa73062ec0d58cfe49612f6c672c77ca444b74ffd48a3bd67a4 -size 158247 +oid sha256:baf9596b5fb5a1b9b092a64effb3c1d530f71764a773881c5eb0d2de844e1562 +size 159122 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-light-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-light-1-snap.png index cdd6615c76..4aa8a82338 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0afb6c2dd802cf95592a27238b2a1b1fb0dcdc67ca948c519d2a006d3fc9904a -size 159810 +oid sha256:b0400ddf8ba0cdbe0aa78e6368f66e6058b45ef6fd0885a3d5df6cec9eaf14dd +size 160784 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-dark-1-snap.png index c5c6823399..a8a765d722 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:12c8c66730951cd4a3d78e6c3d9cbfc9adfae3129da4929da319a5b5aa4a6cba -size 161680 +oid sha256:d2313fdb141137cc182a618834137fedd7fd772422c28103fb2a19c2a1e8d8a6 +size 161098 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-light-1-snap.png index c11a41703f..6bdf5d624a 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bdb8d1c4c6e70b926241d06e2796a36bcf0d58968b909e940e36664c19d378e9 -size 165492 +oid sha256:6651097f4494541e61f6e67fb7e877b2baff9fb704e55ef2b52c359050023e99 +size 164812 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-dark-1-snap.png index cb6f59b613..e8d22c961a 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:83e0358aef48cf851231ffe2f74aca934d3b9cdc7dbd6582148660d0e42012fd -size 263848 +oid sha256:eb49b6d1c0bac3bf45ce9f25b07d8661554b2144f7c78f3511c50308ac913166 +size 260787 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-light-1-snap.png index cf4bc4efbe..1c7bbf86d1 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3d9024b5b80c99605c8e441c39438a26f8699227062726d4bbfeae15666bb636 -size 272417 +oid sha256:5f695b9817a8c66055c0ca0b5f2a952c211ba3207e70a5102ab1e2c746fa075a +size 269233 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-dark-1-snap.png index f38f04cada..8af0acb01b 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e872d5e11553f2124207b1776741c30b6fdba127d0c1a52eb56feb7a81d4ebeb -size 162634 +oid sha256:91026c46f7731c812c3279d584be22c96a40aee119f9073846de076db79de528 +size 163646 diff --git a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-light-1-snap.png index dbcb973493..d31f258e64 100644 --- a/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:37799ffb4199f9a3fa4010e21a5e9d9384149d14fea9183022e55bd37976c3e2 -size 165352 +oid sha256:655b120571109ac825522cab26b5f7630113393b4ab1c47d3fffe55ec31bc2db +size 166341 diff --git a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx index b54a6bcc6a..c0eed6b737 100644 --- a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx +++ b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Icon24Dismiss, Icon56MoneyTransferOutline } from '@vkontakte/icons'; @@ -9,7 +10,7 @@ import { getRandomUser, getRandomUsers } from '../../testing/mock'; import { Avatar } from '../Avatar/Avatar'; import { CellButton } from '../CellButton/CellButton'; import { Checkbox } from '../Checkbox/Checkbox'; -import { DatePicker } from '../DatePicker/DatePicker'; +import { DateInput } from '../DateInput/DateInput'; import { FormItem } from '../FormItem/FormItem'; import { Gradient } from '../Gradient/Gradient'; import { Group } from '../Group/Group'; @@ -153,6 +154,7 @@ export const FullscreenModalPage: Story = { export const ModalPageWithFilters: Story = { render: function Render() { + const [dateOfBirth, setDateOfBirth] = useState(new Date(1901, 0, 1)); const { sizeX } = useAdaptivityConditionalRender(); return ( @@ -212,12 +214,11 @@ export const ModalPageWithFilters: Story = { - diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md index 20945bbd68..bf14879ef4 100644 --- a/packages/vkui/src/components/ModalRoot/Readme.md +++ b/packages/vkui/src/components/ModalRoot/Readme.md @@ -105,6 +105,7 @@ const App = () => { const { isDesktop } = useAdaptivityWithJSMediaQueries(); const [activeModal, setActiveModal] = useState(null); const [modalHistory, setModalHistory] = useState([]); + const [dateOfBirth, setDateOfBirth] = useState(new Date(1901, 0, 1)); const [randomUser] = useState(() => getRandomUser()); const [users] = useState(() => 'k' @@ -302,12 +303,11 @@ const App = () => { - diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts index 2022c28d52..058719e375 100644 --- a/packages/vkui/src/index.ts +++ b/packages/vkui/src/index.ts @@ -325,8 +325,6 @@ export type { } from './components/CustomSelect/CustomSelect'; export { CustomSelectOption } from './components/CustomSelectOption/CustomSelectOption'; export type { CustomSelectOptionProps } from './components/CustomSelectOption/CustomSelectOption'; -export { DatePicker } from './components/DatePicker/DatePicker'; -export type { DatePickerProps, DatePickerDateFormat } from './components/DatePicker/DatePicker'; export { SegmentedControl } from './components/SegmentedControl/SegmentedControl'; export type { SegmentedControlProps, diff --git a/styleguide/config.js b/styleguide/config.js index 77d1962ece..03c28919df 100644 --- a/styleguide/config.js +++ b/styleguide/config.js @@ -292,7 +292,6 @@ const baseConfig = { `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Textarea/Textarea.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/File/File.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/DropZone/DropZone.tsx`, - `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/DatePicker/DatePicker.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/SegmentedControl/SegmentedControl.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Calendar/Calendar.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/CalendarRange/CalendarRange.tsx`,