From efdadc0a51ad946f18269c41bbaff01d94a17931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Wed, 14 Jun 2023 10:43:32 +0300 Subject: [PATCH 01/22] feat(input): added mobile and responsive versions component --- jest.screenshots.config.js | 1 + packages/amount-input/src/Component.test.tsx | 14 +++ packages/amount-input/src/Component.tsx | 2 + .../src/__snapshots__/Component.test.tsx.snap | 20 ++-- .../src/component.screenshots.test.tsx | 1 + packages/amount-input/tsconfig.json | 4 +- packages/bank-card/src/Component.test.tsx | 14 +++ .../src/__snapshots__/Component.test.tsx.snap | 16 ++-- packages/bank-card/tsconfig.json | 3 +- .../calendar-input/src/Component.test.tsx | 16 +++- .../src/__snapshots__/Component.test.tsx.snap | 20 ++-- packages/calendar-input/tsconfig.json | 2 + .../calendar-range/src/Component.test.tsx | 22 ++++- .../src/__snapshots__/Component.test.tsx.snap | 8 +- packages/calendar-range/tsconfig.json | 1 + .../components/calendar-mobile/Component.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 14 +++ packages/custom-picker-button/tsconfig.json | 3 +- packages/date-input/src/Component.test.tsx | 14 +++ .../src/__snapshots__/Component.test.tsx.snap | 4 +- packages/date-input/tsconfig.json | 3 +- .../src/Component.desktop.tsx | 7 +- .../date-range-input/src/Component.mobile.tsx | 6 +- .../src/Component.responsive.tsx | 2 +- .../date-range-input/src/Component.test.tsx | 18 +++- .../src/__snapshots__/Component.test.tsx.snap | 4 +- .../components/date-range-input/Component.tsx | 60 ++++++------ packages/date-range-input/tsconfig.json | 2 + .../date-time-input/src/Component.desktop.tsx | 7 +- .../date-time-input/src/Component.mobile.tsx | 7 +- .../src/Component.responsive.tsx | 2 +- .../date-time-input/src/Component.test.tsx | 16 +++- .../src/__snapshots__/Component.test.tsx.snap | 4 +- .../components/date-time-input/Component.tsx | 13 ++- packages/date-time-input/tsconfig.json | 2 + packages/form-control/package.json | 1 + .../form-control/src/Component.desktop.tsx | 11 +++ .../form-control/src/Component.mobile.tsx | 11 +++ .../form-control/src/Component.responsive.tsx | 35 +++++++ packages/form-control/src/Component.test.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 80 ++++++++-------- .../base-form-control}/Component.tsx | 91 +++++++++++++------ .../base-form-control}/default.module.css | 3 +- .../base-form-control}/index.module.css | 9 +- .../src/components/base-form-control/index.ts | 1 + .../base-form-control}/inverted.module.css | 3 +- packages/form-control/src/desktop.module.css | 31 +++++++ packages/form-control/src/desktop.ts | 1 + .../form-control/src/docs/Component.docs.mdx | 23 +++++ ...nent.stories.mdx => Component.stories.tsx} | 41 +++------ .../form-control/src/docs/development.mdx | 9 +- packages/form-control/src/index.ts | 2 +- packages/form-control/src/mobile.module.css | 31 +++++++ packages/form-control/src/mobile.ts | 1 + packages/form-control/src/vars.css | 8 +- packages/form-control/tsconfig.json | 11 ++- .../src/__snapshots__/Component.test.tsx.snap | 14 +-- .../src/autocomplete-field/Component.tsx | 2 +- .../autocomplete-mobile-field/Component.tsx | 8 +- packages/input-autocomplete/tsconfig.json | 2 + packages/input/package.json | 1 + packages/input/src/Component.desktop.tsx | 11 +++ packages/input/src/Component.mobile.tsx | 11 +++ packages/input/src/Component.responsive.tsx | 35 +++++++ packages/input/src/Component.test.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 8 +- .../{ => components/base-input}/Component.tsx | 35 ++++--- .../base-input}/default.module.css | 3 +- .../base-input}/index.module.css | 5 +- .../input/src/components/base-input/index.ts | 1 + .../base-input}/inverted.module.css | 3 +- packages/input/src/desktop.ts | 1 + packages/input/src/docs/Component.docs.mdx | 24 +++++ ...nent.stories.mdx => Component.stories.tsx} | 43 +++------ packages/input/src/docs/development.mdx | 9 +- packages/input/src/index.ts | 2 +- packages/input/src/mobile.ts | 1 + packages/input/tsconfig.json | 7 +- .../src/__snapshots__/component.test.tsx.snap | 4 +- .../intl-phone-input/src/component.test.tsx | 14 +++ packages/intl-phone-input/tsconfig.json | 2 + packages/masked-input/src/Component.test.tsx | 14 +++ .../src/__snapshots__/Component.test.tsx.snap | 8 +- packages/masked-input/tsconfig.json | 3 +- packages/number-input/src/Component.test.tsx | 14 +++ .../src/__snapshots__/Component.test.tsx.snap | 4 +- packages/number-input/tsconfig.json | 3 +- .../src/__snapshots__/component.test.tsx.snap | 4 +- .../password-input/src/component.test.tsx | 14 +++ packages/password-input/tsconfig.json | 3 +- packages/phone-input/src/Component.test.tsx | 14 +++ .../src/__snapshots__/Component.test.tsx.snap | 8 +- packages/phone-input/tsconfig.json | 3 +- .../src/__snapshots__/Component.test.tsx.snap | 5 + packages/picker-button/tsconfig.json | 1 + packages/pure-input/src/index.module.css | 2 +- .../src/__snapshots__/component.test.tsx.snap | 8 +- .../select-with-tags/src/component.test.tsx | 14 +++ packages/select-with-tags/src/component.tsx | 2 + packages/select-with-tags/src/types.ts | 6 ++ packages/select-with-tags/tsconfig.json | 1 + packages/select/src/Component.tsx | 12 ++- .../src/__snapshots__/Component.test.tsx.snap | 16 ++-- .../select/src/components/field/Component.tsx | 86 ++++++++++-------- .../components/select-mobile/Component.tsx | 6 +- .../select-modal-mobile/Component.tsx | 6 +- .../useLazyLoading/use-lazy-loading.test.tsx | 14 +++ packages/select/tsconfig.json | 1 + packages/slider-input/src/Component.test.tsx | 14 +++ .../src/__snapshots__/Component.test.tsx.snap | 4 +- packages/slider-input/tsconfig.json | 3 +- packages/table/tsconfig.json | 1 + packages/tabs/tsconfig.json | 3 +- packages/textarea/src/Component.test.tsx | 16 +++- packages/textarea/src/Component.tsx | 2 + .../src/__snapshots__/Component.test.tsx.snap | 16 ++-- packages/textarea/src/default.module.css | 2 +- packages/textarea/src/index.module.css | 1 + packages/textarea/src/inverted.module.css | 2 +- packages/textarea/src/typings.ts | 6 ++ packages/textarea/tsconfig.json | 3 +- packages/themes/src/mixins/click.css | 3 + .../themes/src/mixins/form-control/click.css | 8 ++ .../themes/src/mixins/form-control/corp.css | 5 + .../src/mixins/form-control/intranet.css | 2 + .../themes/src/mixins/form-control/mobile.css | 2 + .../themes/src/mixins/form-control/site.css | 5 + packages/time-input/src/Component.test.tsx | 14 +++ .../src/__snapshots__/Component.test.tsx.snap | 4 +- packages/time-input/tsconfig.json | 3 +- packages/with-suffix/src/Component.test.tsx | 14 +++ packages/with-suffix/src/Component.tsx | 2 + .../src/__snapshots__/Component.test.tsx.snap | 4 +- packages/with-suffix/tsconfig.json | 4 +- tools/storybook/findComponentPath.js | 45 +++++---- tsconfig.json | 4 +- 136 files changed, 1056 insertions(+), 395 deletions(-) create mode 100644 packages/form-control/src/Component.desktop.tsx create mode 100644 packages/form-control/src/Component.mobile.tsx create mode 100644 packages/form-control/src/Component.responsive.tsx rename packages/form-control/src/{ => components/base-form-control}/Component.tsx (60%) rename packages/form-control/src/{ => components/base-form-control}/default.module.css (96%) rename packages/form-control/src/{ => components/base-form-control}/index.module.css (92%) create mode 100644 packages/form-control/src/components/base-form-control/index.ts rename packages/form-control/src/{ => components/base-form-control}/inverted.module.css (96%) create mode 100644 packages/form-control/src/desktop.module.css create mode 100644 packages/form-control/src/desktop.ts create mode 100644 packages/form-control/src/docs/Component.docs.mdx rename packages/form-control/src/docs/{Component.stories.mdx => Component.stories.tsx} (64%) create mode 100644 packages/form-control/src/mobile.module.css create mode 100644 packages/form-control/src/mobile.ts create mode 100644 packages/input/src/Component.desktop.tsx create mode 100644 packages/input/src/Component.mobile.tsx create mode 100644 packages/input/src/Component.responsive.tsx rename packages/input/src/{ => components/base-input}/Component.tsx (95%) rename packages/input/src/{ => components/base-input}/default.module.css (93%) rename packages/input/src/{ => components/base-input}/index.module.css (96%) create mode 100644 packages/input/src/components/base-input/index.ts rename packages/input/src/{ => components/base-input}/inverted.module.css (94%) create mode 100644 packages/input/src/desktop.ts create mode 100644 packages/input/src/docs/Component.docs.mdx rename packages/input/src/docs/{Component.stories.mdx => Component.stories.tsx} (67%) create mode 100644 packages/input/src/mobile.ts create mode 100644 packages/themes/src/mixins/form-control/click.css diff --git a/jest.screenshots.config.js b/jest.screenshots.config.js index 477b8c2891..2e85a98b81 100644 --- a/jest.screenshots.config.js +++ b/jest.screenshots.config.js @@ -14,6 +14,7 @@ module.exports = { }, }, moduleNameMapper: { + '@alfalab/core-components-(.*)/(.*)$': '/packages/$1/src/$2', '@alfalab/core-components-(.*)$': '/packages/$1/src', '\\.css$': 'identity-obj-proxy', }, diff --git a/packages/amount-input/src/Component.test.tsx b/packages/amount-input/src/Component.test.tsx index d9dbc04d16..2347f17c76 100644 --- a/packages/amount-input/src/Component.test.tsx +++ b/packages/amount-input/src/Component.test.tsx @@ -11,6 +11,20 @@ import { AmountInput } from './index'; import { AmountInputProps } from './Component'; describe('AmountInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // deprecated + removeListener: jest.fn(), // deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + function renderAmountInput( value: AmountInputProps['value'], currency: CurrencyCodes | null = 'RUR', diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx index 8085c2d431..0d65904886 100644 --- a/packages/amount-input/src/Component.tsx +++ b/packages/amount-input/src/Component.tsx @@ -108,6 +108,7 @@ export const AmountInput = forwardRef( clear = false, onChange, onClear, + breakpoint=1024, ...restProps }, ref, @@ -255,6 +256,7 @@ export const AmountInput = forwardRef( pattern={`[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`} dataTestId={dataTestId} ref={ref} + breakpoint={breakpoint} /> ); diff --git a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap index a91d5acdf0..60b2a90f00 100644 --- a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap @@ -9,10 +9,10 @@ Object { class="container bold" >
value: 123400, size: 'm', block: true, + breakpoint: 1 }, }, 'padding: 0 270px; transform:scale(2.1)', diff --git a/packages/amount-input/tsconfig.json b/packages/amount-input/tsconfig.json index 3bb4022bed..51694e5376 100644 --- a/packages/amount-input/tsconfig.json +++ b/packages/amount-input/tsconfig.json @@ -6,7 +6,9 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-input/*": ["../input/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], } }, "references": [{ "path": "../input" }, { "path": "../with-suffix" }] diff --git a/packages/bank-card/src/Component.test.tsx b/packages/bank-card/src/Component.test.tsx index 935e93172f..b587fbb361 100644 --- a/packages/bank-card/src/Component.test.tsx +++ b/packages/bank-card/src/Component.test.tsx @@ -5,6 +5,20 @@ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon'; import { BankCard } from './index'; describe('BankCard', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const VISA_VALID_NUMBER = '4111111111111111'; const MC_VALID_NUMBER = '5500000000000004'; const MIR_VALID_NUMBER = '2201382000000013'; diff --git a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap index caf003b26d..e32e8b7d51 100644 --- a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap +++ b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap @@ -31,10 +31,10 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
{ + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const getSelectedDay = () => document.querySelector('td[aria-selected="true"]') as HTMLButtonElement; diff --git a/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap index 3c646b0d52..fa772fc157 100644 --- a/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap @@ -7,10 +7,10 @@ exports[`CalendarInput Display tests should match snapshot 1`] = ` tabindex="-1" >
{ +describe('CalendarRange', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const defaultDate = new Date('October 01, 2020 00:00:00'); const currentDate = new Date(); const currentMonth = startOfMonth(currentDate); @@ -226,14 +240,14 @@ describe('CalendarRange', () => { const [inputFrom, inputTo] = queryAllByRole('textbox') as HTMLInputElement[]; await waitFor(() => { - fireEvent.focus(inputFrom); + fireEvent.click(inputFrom); expect( document.querySelector('.from-calendar .button.month .buttonContent'), ).toHaveTextContent(currentMonthName); }); await waitFor(() => { - fireEvent.focus(inputTo); + fireEvent.click(inputTo); expect( document.querySelector('.to-calendar .button.month .buttonContent'), ).toHaveTextContent(currentMonthName); @@ -251,7 +265,7 @@ describe('CalendarRange', () => { const [inputFrom, inputTo] = queryAllByRole('textbox') as HTMLInputElement[]; await waitFor(() => { - fireEvent.focus(inputTo); + fireEvent.click(inputTo); expect(document.querySelector('.to-calendar')).toBeInTheDocument(); }); diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap index 690af4532c..c44327a3f9 100644 --- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap +++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap @@ -7,10 +7,10 @@ exports[`CalendarRange Display tests should match snapshot 1`] = ` >
( return ( diff --git a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap index 93cb8d2c6f..7af18be7fe 100644 --- a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap @@ -14,6 +14,7 @@ exports[`Snapshots tests should display correctly 1`] = ` aria-labelledby="downshift-1-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton white darkening" + componentformcontrol="[object Object]" id="downshift-0-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -125,6 +126,7 @@ exports[`Snapshots tests should display correctly 3`] = ` aria-labelledby="downshift-21-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton white darkening" + componentformcontrol="[object Object]" id="downshift-20-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -182,6 +184,7 @@ exports[`Snapshots tests should display opened correctly 1`] = ` aria-labelledby="downshift-7-label" arrow="[object Object]" class="component primary m component primary block iconOnly customButton white darkening" + componentformcontrol="[object Object]" id="downshift-6-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -229,6 +232,7 @@ exports[`Snapshots tests should display opened correctly 2`] = ` aria-labelledby="downshift-7-label" arrow="[object Object]" class="component primary m component primary block iconOnly customButton white darkening" + componentformcontrol="[object Object]" id="downshift-6-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -276,6 +280,7 @@ exports[`Snapshots tests should display opened correctly 3`] = ` aria-labelledby="downshift-17-label" arrow="[object Object]" class="component primary m component primary block iconOnly customButton white darkening" + componentformcontrol="[object Object]" id="downshift-16-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -1377,6 +1382,7 @@ exports[`Snapshots tests should display opened correctly 5`] = ` aria-labelledby="downshift-27-label" arrow="[object Object]" class="component primary m component primary block iconOnly customButton white darkening" + componentformcontrol="[object Object]" id="downshift-26-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -2480,6 +2486,7 @@ Object { aria-labelledby="downshift-5-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton black darkening" + componentformcontrol="[object Object]" id="downshift-4-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -2534,6 +2541,7 @@ Object { aria-labelledby="downshift-5-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton black darkening" + componentformcontrol="[object Object]" id="downshift-4-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -2818,6 +2826,7 @@ Object { aria-labelledby="downshift-25-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton black darkening" + componentformcontrol="[object Object]" id="downshift-24-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -2872,6 +2881,7 @@ Object { aria-labelledby="downshift-25-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton black darkening" + componentformcontrol="[object Object]" id="downshift-24-input" selectedmultiple="" style="background: rgb(255, 69, 195);" @@ -2983,6 +2993,7 @@ Object { aria-labelledby="downshift-3-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton white darkening" + componentformcontrol="[object Object]" id="downshift-2-input" selectedmultiple="" style="background: rgb(0, 255, 0);" @@ -3037,6 +3048,7 @@ Object { aria-labelledby="downshift-3-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton white darkening" + componentformcontrol="[object Object]" id="downshift-2-input" selectedmultiple="" style="background: rgb(0, 255, 0);" @@ -3321,6 +3333,7 @@ Object { aria-labelledby="downshift-23-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton white darkening" + componentformcontrol="[object Object]" id="downshift-22-input" selectedmultiple="" style="background: rgb(0, 255, 0);" @@ -3375,6 +3388,7 @@ Object { aria-labelledby="downshift-23-label" arrow="[object Object]" class="component primary m component primary block withRightAddons customButton white darkening" + componentformcontrol="[object Object]" id="downshift-22-input" selectedmultiple="" style="background: rgb(0, 255, 0);" diff --git a/packages/custom-picker-button/tsconfig.json b/packages/custom-picker-button/tsconfig.json index 0ed50e1044..5851ea0732 100644 --- a/packages/custom-picker-button/tsconfig.json +++ b/packages/custom-picker-button/tsconfig.json @@ -8,7 +8,8 @@ "paths": { "@alfalab/core-components-*": ["../*/src"], "@alfalab/core-components-modal/*": ["../modal/src/*"], - "@alfalab/core-components-picker-button/*": ["../picker-button/src/*"] + "@alfalab/core-components-picker-button/*": ["../picker-button/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"] } }, "references": [ diff --git a/packages/date-input/src/Component.test.tsx b/packages/date-input/src/Component.test.tsx index 88bc675336..eac9cdf22b 100644 --- a/packages/date-input/src/Component.test.tsx +++ b/packages/date-input/src/Component.test.tsx @@ -5,6 +5,20 @@ import { render, waitFor } from '@testing-library/react'; import { DateInput } from './index'; describe('DateInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Display tests', () => { it('should match snapshot', () => { expect(render().container).toMatchSnapshot(); diff --git a/packages/date-input/src/__snapshots__/Component.test.tsx.snap b/packages/date-input/src/__snapshots__/Component.test.tsx.snap index cdeef5f1c8..79516c93e4 100644 --- a/packages/date-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/date-input/src/__snapshots__/Component.test.tsx.snap @@ -3,10 +3,10 @@ exports[`DateInput Display tests should match snapshot 1`] = `
& +export type DateRangeInputDesktopProps = Omit & ConditionalProps; export const DateRangeInputDesktop = forwardRef( - (props, ref) => , + (props, ref) => , ); diff --git a/packages/date-range-input/src/Component.mobile.tsx b/packages/date-range-input/src/Component.mobile.tsx index fd55832faf..64877ae4b9 100644 --- a/packages/date-range-input/src/Component.mobile.tsx +++ b/packages/date-range-input/src/Component.mobile.tsx @@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'; import { CalendarMobile } from '@alfalab/core-components-calendar'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -import { InputProps } from '@alfalab/core-components-input'; +import { InputMobile } from '@alfalab/core-components-input/mobile'; import { ConditionalProps, @@ -10,9 +10,9 @@ import { DateRangeInputProps, } from './components/date-range-input'; -export type DateRangeInputMobileProps = Omit & +export type DateRangeInputMobileProps = Omit & ConditionalProps; export const DateRangeInputMobile = forwardRef( - (props, ref) => , + (props, ref) => , ); diff --git a/packages/date-range-input/src/Component.responsive.tsx b/packages/date-range-input/src/Component.responsive.tsx index ed035d2362..75f5f42d79 100644 --- a/packages/date-range-input/src/Component.responsive.tsx +++ b/packages/date-range-input/src/Component.responsive.tsx @@ -10,7 +10,7 @@ import { DateRangeInputMobile } from './Component.mobile'; export type DateRangeInputResponsiveProps = Omit< DateRangeInputProps, - 'view' | 'picker' | 'onClose' + 'view' | 'picker' | 'onClose' | 'InputComponent' > & ConditionalProps & { /** diff --git a/packages/date-range-input/src/Component.test.tsx b/packages/date-range-input/src/Component.test.tsx index 512d6ce90b..a96c16ab66 100644 --- a/packages/date-range-input/src/Component.test.tsx +++ b/packages/date-range-input/src/Component.test.tsx @@ -1,11 +1,25 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; -import { act, fireEvent, getByTestId, render, waitFor } from '@testing-library/react'; +import { act, fireEvent, render, waitFor } from '@testing-library/react'; -import { DateRangeInput } from './index'; +import { DateRangeInputDesktop as DateRangeInput } from './desktop'; import { parseDateString } from './utils'; describe('DateRangeInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Display tests', () => { it('should match snapshot', () => { expect( diff --git a/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap b/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap index bcea8993b0..f106761c15 100644 --- a/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ exports[`DateRangeInput Display tests should match snapshot 1`] = ` class="component" >
& * Отображение компонента в мобильном или десктопном виде */ view?: 'desktop' | 'mobile'; + + /** + * Компонент инпута + */ + InputComponent?: ElementType; }; type GetDatesRet = { formattedValue: string; dateFrom?: Date; dateTo?: Date; dateArr: string[] }; @@ -182,6 +187,7 @@ export const DateRangeInput = React.forwardRef - - {rightAddons} - {picker && ( - - )} - - } - /> + {InputComponent ? ( + + {rightAddons} + {picker && ( + + )} + + } + /> + ) : null} {picker && ( ; +export type DateTimeInputDesktopProps = Omit; export const DateTimeInputDesktop = forwardRef( - (props, ref) => , + (props, ref) => , ); diff --git a/packages/date-time-input/src/Component.mobile.tsx b/packages/date-time-input/src/Component.mobile.tsx index d146cd5389..b9046348b9 100644 --- a/packages/date-time-input/src/Component.mobile.tsx +++ b/packages/date-time-input/src/Component.mobile.tsx @@ -1,13 +1,12 @@ import React, { forwardRef } from 'react'; import { CalendarMobile } from '@alfalab/core-components-calendar'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import { InputProps } from '@alfalab/core-components-input'; +import { InputMobile} from '@alfalab/core-components-input/mobile'; import { DateTimeInput, DateTimeInputProps } from './components/date-time-input/Component'; -export type DateTimeInputMobileProps = Omit; +export type DateTimeInputMobileProps = Omit; export const DateTimeInputMobile = forwardRef( - (props, ref) => , + (props, ref) => , ); diff --git a/packages/date-time-input/src/Component.responsive.tsx b/packages/date-time-input/src/Component.responsive.tsx index b63c9e82b8..66ed388ba6 100644 --- a/packages/date-time-input/src/Component.responsive.tsx +++ b/packages/date-time-input/src/Component.responsive.tsx @@ -8,7 +8,7 @@ import { DateTimeInputProps } from './components/date-time-input/Component'; import { DateTimeInputDesktop } from './Component.desktop'; import { DateTimeInputMobile } from './Component.mobile'; -export type DateTimeInputResponsiveProps = Omit & { +export type DateTimeInputResponsiveProps = Omit & { /** * Контрольная точка, с нее начинается desktop версия * @default 1024 diff --git a/packages/date-time-input/src/Component.test.tsx b/packages/date-time-input/src/Component.test.tsx index fe69cae2e9..e3ce84aca0 100644 --- a/packages/date-time-input/src/Component.test.tsx +++ b/packages/date-time-input/src/Component.test.tsx @@ -2,10 +2,24 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import { act, fireEvent, render, waitFor } from '@testing-library/react'; -import { DateTimeInput } from '.'; +import {DateTimeInputDesktop as DateTimeInput } from './desktop'; import { addTimeToDate, getFullDateTime } from './utils'; describe('DateTimeInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Display tests', () => { it('should match snapshot', () => { expect( diff --git a/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap b/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap index 85e4ffe1e6..026c0a7289 100644 --- a/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ exports[`DateTimeInput Display tests should match snapshot 1`] = ` class="component" >
& { * Отображение компонента в мобильном или десктопном виде */ view?: 'desktop' | 'mobile'; + + /** + * Компонент инпута + */ + InputComponent?: ElementType; }; export const DateTimeInput = React.forwardRef( @@ -168,6 +173,7 @@ export const DateTimeInput = React.forwardRef - } - /> + /> ) : null} {picker && ( ; + +export const FormControlDesktop = forwardRef( + (restProps, ref) => , +); diff --git a/packages/form-control/src/Component.mobile.tsx b/packages/form-control/src/Component.mobile.tsx new file mode 100644 index 0000000000..06232f4e3f --- /dev/null +++ b/packages/form-control/src/Component.mobile.tsx @@ -0,0 +1,11 @@ +import React, { forwardRef } from 'react'; + +import { BaseFormControl, BaseFormControlProps } from './components/base-form-control'; + +import styles from './mobile.module.css'; + +export type FormControlMobileProps = Omit; + +export const FormControlMobile = forwardRef( + (restProps, ref) => , +); diff --git a/packages/form-control/src/Component.responsive.tsx b/packages/form-control/src/Component.responsive.tsx new file mode 100644 index 0000000000..b4e31ab6fd --- /dev/null +++ b/packages/form-control/src/Component.responsive.tsx @@ -0,0 +1,35 @@ +import React, { forwardRef } from 'react'; + +import { useMatchMedia } from '@alfalab/core-components-mq'; + +import { isClient } from '../../utils'; + +import { BaseFormControlProps } from './components/base-form-control'; +import { FormControlDesktop } from './Component.desktop'; +import { FormControlMobile } from './Component.mobile'; + +export type FormControlProps = Omit & { + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; + + /** + * Значение по-умолчанию для хука useMatchMedia + */ + defaultMatchMediaValue?: boolean | (() => boolean); +}; + +export const FormControl = forwardRef( + ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => { + const query = `(min-width: ${breakpoint}px)`; + const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false); + + const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue); + + const Component = isDesktop ? FormControlDesktop : FormControlMobile; + + return ; + }, +); diff --git a/packages/form-control/src/Component.test.tsx b/packages/form-control/src/Component.test.tsx index 110f4b82f7..eed8bf2870 100644 --- a/packages/form-control/src/Component.test.tsx +++ b/packages/form-control/src/Component.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { FormControl } from './index'; +import { FormControlDesktop as FormControl } from './desktop'; describe('FormControl', () => { describe('Snapshots tests', () => { diff --git a/packages/form-control/src/__snapshots__/Component.test.tsx.snap b/packages/form-control/src/__snapshots__/Component.test.tsx.snap index 89b6720f79..d1befc2c13 100644 --- a/packages/form-control/src/__snapshots__/Component.test.tsx.snap +++ b/packages/form-control/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
, "container":
, "container":
, "container":
, "container":
This is hint @@ -431,10 +431,10 @@ Object { , "container":
This is hint @@ -511,10 +511,10 @@ Object { "baseElement":
, "container":
, "container":
This is label
, "container":
This is label
, "container":
& { +export type BaseFormControlProps = HTMLAttributes & { /** * Растягивает компонент на ширину контейнера */ @@ -115,9 +115,14 @@ export type FormControlProps = HTMLAttributes & { * Компонент поля (инпут, textarea и пр.) */ children?: ReactNode; + + /** + * Основные стили компонента. + */ + styles: { [key: string]: string }; }; -export const FormControl = React.forwardRef( +export const BaseFormControl = React.forwardRef( ( { block = false, @@ -141,6 +146,7 @@ export const FormControl = React.forwardRef( bottomAddons, children, dataTestId, + styles, ...restProps }, ref, @@ -151,64 +157,88 @@ export const FormControl = React.forwardRef(
{label && labelView === 'outer' && ( - {label} + + {label} + )}
{leftAddons && ( -
+
{leftAddons}
)} -
+
{label && labelView === 'inner' && ( - + {label}
- {label} + {label}
)} -
{children}
+
{children}
{rightAddons && ( -
+
{rightAddons}
)} @@ -217,7 +247,11 @@ export const FormControl = React.forwardRef( {errorMessage && ( {errorMessage} @@ -225,7 +259,8 @@ export const FormControl = React.forwardRef( )} {hint && !errorMessage && ( - {hint} + {hint} )}
); diff --git a/packages/form-control/src/default.module.css b/packages/form-control/src/components/base-form-control/default.module.css similarity index 96% rename from packages/form-control/src/default.module.css rename to packages/form-control/src/components/base-form-control/default.module.css index bfeb7cf563..f36763554b 100644 --- a/packages/form-control/src/default.module.css +++ b/packages/form-control/src/components/base-form-control/default.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .component { color: var(--form-control-color); diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/components/base-form-control/index.module.css similarity index 92% rename from packages/form-control/src/index.module.css rename to packages/form-control/src/components/base-form-control/index.module.css index 36d390eabe..38ad72b8c1 100644 --- a/packages/form-control/src/index.module.css +++ b/packages/form-control/src/components/base-form-control/index.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .component { font-family: var(--form-control-font-family); @@ -93,8 +92,6 @@ display: block; margin-bottom: calc(var(--gap-s) / 2); - padding: var(--form-control-sub-paddings); - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -108,7 +105,6 @@ .s .inner { min-height: var(--form-control-s-min-height); - border-radius: var(--form-control-s-border-radius); } .s .hasInnerLabel .input > * { @@ -121,7 +117,6 @@ .m .inner { min-height: var(--form-control-m-min-height); - border-radius: var(--form-control-m-border-radius); } .m .hasInnerLabel .input > * { @@ -134,7 +129,6 @@ .l .inner { min-height: var(--form-control-l-min-height); - border-radius: var(--form-control-l-border-radius); } .l .hasInnerLabel .input > * { @@ -147,7 +141,6 @@ .xl .inner { min-height: var(--form-control-xl-min-height); - border-radius: var(--form-control-xl-border-radius); } .xl .label { diff --git a/packages/form-control/src/components/base-form-control/index.ts b/packages/form-control/src/components/base-form-control/index.ts new file mode 100644 index 0000000000..0d0e860c0d --- /dev/null +++ b/packages/form-control/src/components/base-form-control/index.ts @@ -0,0 +1 @@ +export * from './Component' \ No newline at end of file diff --git a/packages/form-control/src/inverted.module.css b/packages/form-control/src/components/base-form-control/inverted.module.css similarity index 96% rename from packages/form-control/src/inverted.module.css rename to packages/form-control/src/components/base-form-control/inverted.module.css index b3e17e5e66..a84644b404 100644 --- a/packages/form-control/src/inverted.module.css +++ b/packages/form-control/src/components/base-form-control/inverted.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .component { color: var(--form-control-inverted-color); diff --git a/packages/form-control/src/desktop.module.css b/packages/form-control/src/desktop.module.css new file mode 100644 index 0000000000..554d77433c --- /dev/null +++ b/packages/form-control/src/desktop.module.css @@ -0,0 +1,31 @@ +@import './vars.css'; + +.above { + padding: var(--form-control-sub-paddings); +} + +.sub { + padding: var(--form-control-sub-paddings); +} + +.error { + padding: var(--form-control-sub-paddings); +} + +/* SIZES */ + +.s .inner { + border-radius: var(--form-control-s-border-radius); +} + +.m .inner { + border-radius: var(--form-control-m-border-radius); +} + +.l .inner { + border-radius: var(--form-control-l-border-radius); +} + +.xl .inner { + border-radius: var(--form-control-xl-border-radius); +} diff --git a/packages/form-control/src/desktop.ts b/packages/form-control/src/desktop.ts new file mode 100644 index 0000000000..12c7c2339e --- /dev/null +++ b/packages/form-control/src/desktop.ts @@ -0,0 +1 @@ +export * from './Component.desktop'; diff --git a/packages/form-control/src/docs/Component.docs.mdx b/packages/form-control/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..214808d2ac --- /dev/null +++ b/packages/form-control/src/docs/Component.docs.mdx @@ -0,0 +1,23 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/form-control/src/docs/Component.stories.mdx b/packages/form-control/src/docs/Component.stories.tsx similarity index 64% rename from packages/form-control/src/docs/Component.stories.mdx rename to packages/form-control/src/docs/Component.stories.tsx index ab9fd484b9..e7b2dab667 100644 --- a/packages/form-control/src/docs/Component.stories.mdx +++ b/packages/form-control/src/docs/Component.stories.tsx @@ -1,20 +1,20 @@ -import { Meta, Story, Markdown } from '@storybook/addon-docs'; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import { text, select, boolean } from '@storybook/addon-knobs'; import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; -import { ComponentHeader, Tabs } from 'storybook/blocks'; import { FormControl } from '@alfalab/core-components-form-control'; -import packageJson from '../../package.json'; -import Development from './development.mdx'; -import Description from './description.mdx'; -import Changelog from '../../CHANGELOG.md?raw'; +const meta: Meta = { + title: 'Components/FormControl', + component: FormControl, + id: 'FormControl', +}; - +type Story = StoryObj; -{/* Canvas */} - - - {React.createElement(() => { +export const form_control: Story = { + name: 'CustomButton', + render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); return (
); - })} - - -{/* Docs */} - - + }, +}; -} - changelog={{Changelog}} - development={} -/> +export default meta; diff --git a/packages/form-control/src/docs/development.mdx b/packages/form-control/src/docs/development.mdx index 5e832d1cb3..ba345d444c 100644 --- a/packages/form-control/src/docs/development.mdx +++ b/packages/form-control/src/docs/development.mdx @@ -1,17 +1,22 @@ import { CssVars } from 'storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; -import { FormControl as FormControlTS } from '../Component'; +import { FormControlDesktop } from '../Component.desktop'; +import { FormControlMobile } from '../Component.mobile'; +import { FormControl } from '../Component.responsive'; import vars from '!!raw-loader!../vars.css'; ## Подключение ```jsx import { FormControl } from '@alfalab/core-components/form-control'; +import { FormControlMobile } from '@alfalab/core-components/form-control/mobile'; +import { FormControlDesktop } from '@alfalab/core-components/form-control/desktop'; ``` +Из индекса импортируется responsive версия компонента. ## Свойства - + ## Переменные diff --git a/packages/form-control/src/index.ts b/packages/form-control/src/index.ts index e51a5d2440..6e49866c64 100644 --- a/packages/form-control/src/index.ts +++ b/packages/form-control/src/index.ts @@ -1 +1 @@ -export * from './Component'; +export * from './Component.responsive'; diff --git a/packages/form-control/src/mobile.module.css b/packages/form-control/src/mobile.module.css new file mode 100644 index 0000000000..b59f9f3c10 --- /dev/null +++ b/packages/form-control/src/mobile.module.css @@ -0,0 +1,31 @@ +@import './vars.css'; + +.above { + padding: var(--form-control-mobile-sub-paddings); +} + +.sub { + padding: var(--form-control-mobile-sub-paddings); +} + +.error { + padding: var(--form-control-mobile-sub-paddings); +} + +/* SIZES */ + +.s .inner { + border-radius: var(--form-control-mobile-s-border-radius); +} + +.m .inner { + border-radius: var(--form-control-mobile-m-border-radius); +} + +.l .inner { + border-radius: var(--form-control-mobile-l-border-radius); +} + +.xl .inner { + border-radius: var(--form-control-mobile-xl-border-radius); +} diff --git a/packages/form-control/src/mobile.ts b/packages/form-control/src/mobile.ts new file mode 100644 index 0000000000..b9fe097b67 --- /dev/null +++ b/packages/form-control/src/mobile.ts @@ -0,0 +1 @@ +export * from './Component.mobile'; diff --git a/packages/form-control/src/vars.css b/packages/form-control/src/vars.css index 3eb52096a7..ec635c1661 100644 --- a/packages/form-control/src/vars.css +++ b/packages/form-control/src/vars.css @@ -78,6 +78,8 @@ --form-control-labeled-xl-paddings: 38px var(--gap-m) 14px; --form-control-sub-paddings: 0; + --form-control-mobile-sub-paddings: 0 var(--gap-2xs); + /* disabled */ --form-control-disabled-opacity: 1; @@ -89,6 +91,11 @@ --form-control-m-border-radius: var(--border-radius-m); --form-control-l-border-radius: var(--border-radius-m); --form-control-xl-border-radius: var(--border-radius-l); + + --form-control-mobile-s-border-radius: 10px; + --form-control-mobile-m-border-radius: 10px; + --form-control-mobile-l-border-radius: 10px; + --form-control-mobile-xl-border-radius: 10px; } @define-mixin form-control-sub { @@ -96,5 +103,4 @@ /* adjusting overall height 👌 */ margin-top: 6px; - padding: var(--form-control-sub-paddings); } diff --git a/packages/form-control/tsconfig.json b/packages/form-control/tsconfig.json index fee37a72ff..385e1773b4 100644 --- a/packages/form-control/tsconfig.json +++ b/packages/form-control/tsconfig.json @@ -1,8 +1,13 @@ { - "include": ["src", "../../typings"], + "include": ["src", "../../typings", "../utils"], "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "dist", - "rootDirs": ["src"] - } + "rootDirs": ["src"], + "baseUrl": ".", + "paths": { + "@alfalab/core-components-*": ["../*/src"], + } + }, + "references": [{ "path": "../mq" }] } diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap index 229389701a..ed35b5718f 100644 --- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap @@ -15,12 +15,13 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in closed class="component" >
@@ -60,12 +61,13 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s class="component" >
@@ -180,10 +182,10 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s class="bottomAddons" >
& Pick; @@ -48,7 +48,7 @@ export const AutocompleteMobileField = ({ onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} > - {value}
}
- +
); }; diff --git a/packages/input-autocomplete/tsconfig.json b/packages/input-autocomplete/tsconfig.json index 6ba661a0e9..55fb83ace0 100644 --- a/packages/input-autocomplete/tsconfig.json +++ b/packages/input-autocomplete/tsconfig.json @@ -8,6 +8,8 @@ "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], + "@alfalab/core-components-input/*": ["../input/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/input/package.json b/packages/input/package.json index edb4a3124a..4acb70076e 100644 --- a/packages/input/package.json +++ b/packages/input/package.json @@ -20,6 +20,7 @@ "@alfalab/core-components-button": "^8.4.0", "@alfalab/core-components-form-control": "^9.0.5", "@alfalab/core-components-badge": "^5.1.0", + "@alfalab/core-components-mq": "^4.1.4", "@alfalab/hooks": "^1.13.0", "@alfalab/icons-glyph": "^2.108.0", "classnames": "^2.3.1", diff --git a/packages/input/src/Component.desktop.tsx b/packages/input/src/Component.desktop.tsx new file mode 100644 index 0000000000..172610efe3 --- /dev/null +++ b/packages/input/src/Component.desktop.tsx @@ -0,0 +1,11 @@ +import React, { forwardRef } from 'react'; + +import { FormControlDesktop } from '@alfalab/core-components-form-control/desktop'; + +import { BaseInput, BaseInputProps } from './components/base-input'; + +export type InputDesktopProps = Omit; + +export const InputDesktop = forwardRef((restProps, ref) => ( + +)); diff --git a/packages/input/src/Component.mobile.tsx b/packages/input/src/Component.mobile.tsx new file mode 100644 index 0000000000..1ababf9a2a --- /dev/null +++ b/packages/input/src/Component.mobile.tsx @@ -0,0 +1,11 @@ +import React, { forwardRef } from 'react'; + +import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; + +import { BaseInput, BaseInputProps } from './components/base-input'; + +export type InputMobileProps = Omit; + +export const InputMobile = forwardRef((restProps, ref) => ( + +)); diff --git a/packages/input/src/Component.responsive.tsx b/packages/input/src/Component.responsive.tsx new file mode 100644 index 0000000000..82b48d0a18 --- /dev/null +++ b/packages/input/src/Component.responsive.tsx @@ -0,0 +1,35 @@ +import React, { forwardRef } from 'react'; + +import { useMatchMedia } from '@alfalab/core-components-mq'; + +import { isClient } from '../../utils'; + +import { BaseInputProps } from './components/base-input'; +import { InputDesktop } from './Component.desktop'; +import { InputMobile } from './Component.mobile'; + +export type InputProps = Omit & { + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; + + /** + * Значение по-умолчанию для хука useMatchMedia + */ + defaultMatchMediaValue?: boolean | (() => boolean); +}; + +export const Input = forwardRef( + ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => { + const query = `(min-width: ${breakpoint}px)`; + const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false); + + const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue); + + const Component = isDesktop ? InputDesktop : InputMobile; + + return ; + }, +); diff --git a/packages/input/src/Component.test.tsx b/packages/input/src/Component.test.tsx index 598842ea9f..212f14c87b 100644 --- a/packages/input/src/Component.test.tsx +++ b/packages/input/src/Component.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Input } from './index'; +import { InputDesktop as Input } from './desktop'; describe('Input', () => { describe('Snapshots tests', () => { diff --git a/packages/input/src/__snapshots__/Component.test.tsx.snap b/packages/input/src/__snapshots__/Component.test.tsx.snap index 4db2ad233f..883c07275c 100644 --- a/packages/input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
, "container":
, | 'size' | 'type' @@ -103,7 +103,7 @@ export type InputProps = Omit< /** * Ref для обертки input */ - wrapperRef?: React.Ref; + wrapperRef?: React.Ref | null; /** * Слот слева @@ -179,6 +179,10 @@ export type InputProps = Omit< * Обработчик MouseUp по полю */ onMouseUp?: (event: MouseEvent) => void; + /** + * Идентификатор для систем автоматизированного тестирования + */ + FormControlComponent?: ElementType; /** * Идентификатор для систем автоматизированного тестирования @@ -186,7 +190,7 @@ export type InputProps = Omit< dataTestId?: string; }; -export const Input = React.forwardRef( +export const BaseInput = React.forwardRef( ( { size = 's', @@ -223,6 +227,7 @@ export const Input = React.forwardRef( defaultValue, wrapperRef, readOnly, + FormControlComponent, ...restProps }, ref, @@ -361,8 +366,8 @@ export const Input = React.forwardRef( ); }; - return ( - ( data-test-id={dataTestId} aria-label={typeof label === 'string' ? label : undefined} /> - - ); + + ) : null; }, ); /** * Для отображения в сторибуке */ -Input.defaultProps = { - size: 's', - type: 'text', - block: false, -}; +// BaseInput.defaultProps = { + +// size: 's', + +// type: 'text', + +// block: false, + +// }; diff --git a/packages/input/src/default.module.css b/packages/input/src/components/base-input/default.module.css similarity index 93% rename from packages/input/src/default.module.css rename to packages/input/src/components/base-input/default.module.css index b8ed16c844..3de4d38e55 100644 --- a/packages/input/src/default.module.css +++ b/packages/input/src/components/base-input/default.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .input { color: var(--input-color); diff --git a/packages/input/src/index.module.css b/packages/input/src/components/base-input/index.module.css similarity index 96% rename from packages/input/src/index.module.css rename to packages/input/src/components/base-input/index.module.css index be46a50e5b..78e49404a5 100644 --- a/packages/input/src/index.module.css +++ b/packages/input/src/components/base-input/index.module.css @@ -1,6 +1,5 @@ -@import '../../themes/src/default.css'; -@import '../../form-control/src/vars.css'; -@import './vars.css'; +@import '../../../../form-control/src/vars.css'; +@import '../../vars.css'; .input { @mixin paragraph_component; diff --git a/packages/input/src/components/base-input/index.ts b/packages/input/src/components/base-input/index.ts new file mode 100644 index 0000000000..0d0e860c0d --- /dev/null +++ b/packages/input/src/components/base-input/index.ts @@ -0,0 +1 @@ +export * from './Component' \ No newline at end of file diff --git a/packages/input/src/inverted.module.css b/packages/input/src/components/base-input/inverted.module.css similarity index 94% rename from packages/input/src/inverted.module.css rename to packages/input/src/components/base-input/inverted.module.css index 3a4b14f327..61a3f3f120 100644 --- a/packages/input/src/inverted.module.css +++ b/packages/input/src/components/base-input/inverted.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .input { color: var(--input-inverted-color); diff --git a/packages/input/src/desktop.ts b/packages/input/src/desktop.ts new file mode 100644 index 0000000000..90ed8dc22a --- /dev/null +++ b/packages/input/src/desktop.ts @@ -0,0 +1 @@ +export * from './Component.desktop' \ No newline at end of file diff --git a/packages/input/src/docs/Component.docs.mdx b/packages/input/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..2447190566 --- /dev/null +++ b/packages/input/src/docs/Component.docs.mdx @@ -0,0 +1,24 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/input/src/docs/Component.stories.mdx b/packages/input/src/docs/Component.stories.tsx similarity index 67% rename from packages/input/src/docs/Component.stories.mdx rename to packages/input/src/docs/Component.stories.tsx index fe01fcb047..35aebc1926 100644 --- a/packages/input/src/docs/Component.stories.mdx +++ b/packages/input/src/docs/Component.stories.tsx @@ -1,20 +1,21 @@ -import { Meta, Story, Markdown } from '@storybook/addon-docs'; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import { text, select, boolean } from '@storybook/addon-knobs'; + import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; -import { ComponentHeader, Tabs } from 'storybook/blocks'; import { Input } from '@alfalab/core-components-input'; -import packageJson from '../../package.json'; -import Description from './description.mdx'; -import Development from './development.mdx'; -import Changelog from '../../CHANGELOG.md?raw'; - - +const meta: Meta = { + title: 'Components/Input', + component: Input, + id: 'Input', +}; -{/* Canvas */} +type Story = StoryObj; - - {React.createElement(() => { +export const input: Story = { + name: 'Input', + render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); return (
); - })} - - -{/* Docs */} - - + }, +}; -} - changelog={{Changelog}} - development={} -/> +export default meta; diff --git a/packages/input/src/docs/development.mdx b/packages/input/src/docs/development.mdx index d57d118553..f0b81eb90b 100644 --- a/packages/input/src/docs/development.mdx +++ b/packages/input/src/docs/development.mdx @@ -1,17 +1,22 @@ import { CssVars } from 'storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; -import { Input as InputTS } from '../Component'; +import { Input } from '../Component.responsive'; +import { InputDesktop} from '../Component.desktop'; +import { InputMobile } from '../Component.mobile'; import vars from '!!raw-loader!../vars.css'; ## Подключение ```jsx import { Input } from '@alfalab/core-components/input'; +import { InputDesktop } from '@alfalab/core-components/input/desktop'; +import { InputMobile } from '@alfalab/core-components/input/mobile'; ``` +Из индекса импортируется responsive версия компонента. ## Свойства - + ## Переменные diff --git a/packages/input/src/index.ts b/packages/input/src/index.ts index e51a5d2440..6e49866c64 100644 --- a/packages/input/src/index.ts +++ b/packages/input/src/index.ts @@ -1 +1 @@ -export * from './Component'; +export * from './Component.responsive'; diff --git a/packages/input/src/mobile.ts b/packages/input/src/mobile.ts new file mode 100644 index 0000000000..1cbbd4644b --- /dev/null +++ b/packages/input/src/mobile.ts @@ -0,0 +1 @@ +export * from './Component.mobile' \ No newline at end of file diff --git a/packages/input/tsconfig.json b/packages/input/tsconfig.json index 650a3e18e0..a73e611479 100644 --- a/packages/input/tsconfig.json +++ b/packages/input/tsconfig.json @@ -1,13 +1,14 @@ { - "include": ["src", "../../typings"], + "include": ["src", "../../typings", "../utils"], "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "dist", "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"] } }, - "references": [{ "path": "../button" }, { "path": "../form-control" }, { "path": "../loader" }, { "path": "../badge" }] + "references": [{ "path": "../button" }, { "path": "../form-control" }, { "path": "../loader" }, { "path": "../badge" }, { "path": "../mq" }] } diff --git a/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap b/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap index e06db3cf0b..83aa1e2d37 100644 --- a/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap +++ b/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap @@ -10,10 +10,10 @@ exports[`IntlPhoneInput should match snapshot 1`] = ` tabindex="-1" >
{ + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const testId = 'intl-phone-input'; it('should match snapshot', () => { diff --git a/packages/intl-phone-input/tsconfig.json b/packages/intl-phone-input/tsconfig.json index 666e50b9c7..b1fe0f0299 100644 --- a/packages/intl-phone-input/tsconfig.json +++ b/packages/intl-phone-input/tsconfig.json @@ -7,6 +7,8 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], + "@alfalab/core-components-input/*": ["../input/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/masked-input/src/Component.test.tsx b/packages/masked-input/src/Component.test.tsx index e423ffa2c9..e969ad272a 100644 --- a/packages/masked-input/src/Component.test.tsx +++ b/packages/masked-input/src/Component.test.tsx @@ -8,6 +8,20 @@ import { MaskedInput } from './index'; const cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]; describe('MaskedInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Snapshots tests', () => { it('should match snapshot', () => { expect(render()).toMatchSnapshot(); diff --git a/packages/masked-input/src/__snapshots__/Component.test.tsx.snap b/packages/masked-input/src/__snapshots__/Component.test.tsx.snap index 12753389d3..576004fd32 100644 --- a/packages/masked-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/masked-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
, "container":
{ + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Snapshots tests', () => { it('should match snapshot', () => { expect(render().container).toMatchSnapshot(); diff --git a/packages/number-input/src/__snapshots__/Component.test.tsx.snap b/packages/number-input/src/__snapshots__/Component.test.tsx.snap index c9691cc25e..a4088794e2 100644 --- a/packages/number-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/number-input/src/__snapshots__/Component.test.tsx.snap @@ -3,10 +3,10 @@ exports[`NumberInput Snapshots tests should match snapshot 1`] = `
input.getAttribute('type') const isPasswordVisible = (input: HTMLInputElement) => input.getAttribute('type') === 'text'; describe('PasswordInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const dataTestId = 'test-id'; describe('snapshots tests', () => { diff --git a/packages/password-input/tsconfig.json b/packages/password-input/tsconfig.json index 3ce067c831..2767fb95ca 100644 --- a/packages/password-input/tsconfig.json +++ b/packages/password-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], } }, "references": [{ "path": "../input" }, { "path": "../icon-button" }] diff --git a/packages/phone-input/src/Component.test.tsx b/packages/phone-input/src/Component.test.tsx index 449187cf66..8d8824ef6a 100644 --- a/packages/phone-input/src/Component.test.tsx +++ b/packages/phone-input/src/Component.test.tsx @@ -5,6 +5,20 @@ import userEvent from '@testing-library/user-event'; import { PhoneInput } from './index'; describe('PhoneInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const dataTestId = 'test-id'; it('should match snapshot', () => { diff --git a/packages/phone-input/src/__snapshots__/Component.test.tsx.snap b/packages/phone-input/src/__snapshots__/Component.test.tsx.snap index 589a1395e5..2b27e1e5a8 100644 --- a/packages/phone-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/phone-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
, "container":
{ + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Display tests', () => { it('should match snapshot', () => { const { container } = render( diff --git a/packages/select-with-tags/src/component.tsx b/packages/select-with-tags/src/component.tsx index 32a8ff3028..544b629f9f 100644 --- a/packages/select-with-tags/src/component.tsx +++ b/packages/select-with-tags/src/component.tsx @@ -35,6 +35,7 @@ export const SelectWithTags = forwardRef( transformCollapsedTagText, transformTagText, Tag, + breakpoint, ...restProps }, ref, @@ -138,6 +139,7 @@ export const SelectWithTags = forwardRef( transformTagText, handleUpdatePopover, isPopoverOpen, + breakpoint, }} selected={selected || selectedTags} autocomplete={isAutocomplete} diff --git a/packages/select-with-tags/src/types.ts b/packages/select-with-tags/src/types.ts index cf55e43fff..515a31e1d5 100644 --- a/packages/select-with-tags/src/types.ts +++ b/packages/select-with-tags/src/types.ts @@ -74,4 +74,10 @@ export type SelectWithTagsProps = Omit< * Трансформировать текст компонента Тэг */ transformTagText?: (tagText?: ReactNode) => ReactNode; + + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; }; diff --git a/packages/select-with-tags/tsconfig.json b/packages/select-with-tags/tsconfig.json index 0faf646cd3..5989d8f405 100644 --- a/packages/select-with-tags/tsconfig.json +++ b/packages/select-with-tags/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/select/src/Component.tsx b/packages/select/src/Component.tsx index d9413f9783..1af52a4b6a 100644 --- a/packages/select/src/Component.tsx +++ b/packages/select/src/Component.tsx @@ -1,6 +1,9 @@ import React, { forwardRef } from 'react'; -import { FormControlProps } from '@alfalab/core-components-form-control/src/Component'; +import { + FormControlDesktop, + FormControlDesktopProps, +} from '@alfalab/core-components-form-control/desktop'; import { Arrow as DefaultArrow } from './components/arrow'; import { BaseSelect } from './components/base-select'; @@ -10,7 +13,7 @@ import { Option as DefaultOption } from './components/option'; import { OptionsList as DefaultOptionsList } from './components/options-list'; import { BaseSelectProps } from './typings'; -export type SelectFieldProps = Omit & Record; +export type SelectFieldProps = Omit & Record; export type SelectProps = Omit & { /** @@ -27,6 +30,7 @@ export const Select = forwardRef( OptionsList = DefaultOptionsList, Optgroup = DefaultOptgroup, Option = DefaultOption, + fieldProps={}, ...restProps }, ref, @@ -35,6 +39,10 @@ export const Select = forwardRef( ref={ref} Option={Option} Field={Field} + fieldProps={{ + FormControlComponent: FormControlDesktop, + ...(fieldProps as object), + }} Optgroup={Optgroup} OptionsList={OptionsList} Arrow={Arrow} diff --git a/packages/select/src/__snapshots__/Component.test.tsx.snap b/packages/select/src/__snapshots__/Component.test.tsx.snap index 8ffd2c4e5c..b68e0d5ea7 100644 --- a/packages/select/src/__snapshots__/Component.test.tsx.snap +++ b/packages/select/src/__snapshots__/Component.test.tsx.snap @@ -16,12 +16,12 @@ Object { class="component" >
@@ -74,12 +74,12 @@ Object { class="component" >
@@ -183,12 +183,12 @@ exports[`Select Snapshots tests should match snapshot with fatal error 1`] = ` class="component" >
@@ -247,12 +247,12 @@ exports[`Select Snapshots tests should match snapshot with visibleOptions 1`] = class="component" >
diff --git a/packages/select/src/components/field/Component.tsx b/packages/select/src/components/field/Component.tsx index 76fcca50d8..6a4885f082 100644 --- a/packages/select/src/components/field/Component.tsx +++ b/packages/select/src/components/field/Component.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useRef, useState } from 'react'; +import React, { ElementType, useCallback, useRef, useState } from 'react'; import cn from 'classnames'; -import { FormControl, FormControlProps } from '@alfalab/core-components-form-control'; +import { FormControlProps } from '@alfalab/core-components-form-control'; import { useFocus } from '@alfalab/hooks'; import { FieldProps as BaseFieldProps } from '../../typings'; @@ -9,6 +9,13 @@ import { joinOptions } from '../../utils'; import styles from './index.module.css'; +type FieldProps = { + /** + * Компонент FormControl + */ + FormControlComponent?: ElementType; +}; + export const Field = ({ size = 'm', open, @@ -29,8 +36,9 @@ export const Field = ({ innerProps, dataTestId, fieldClassName, + FormControlComponent, ...restProps -}: BaseFieldProps & FormControlProps) => { +}: BaseFieldProps & FormControlProps & FieldProps) => { const [focused, setFocused] = useState(false); const wrapperRef = useRef(null); @@ -52,40 +60,44 @@ export const Field = ({ onFocus={handleFocus} onBlur={handleBlur} > - - {rightAddons} - {/* TODO: стоит переделать, но это будет мажорка */} - {Arrow ? React.cloneElement(Arrow, { className: styles.arrow }) : null} - - ) - } - data-test-id={dataTestId} - {...restProps} - {...innerProps} - > -
- {placeholder && !filled && ( - {placeholder} - )} - {filled &&
{value}
} -
- + {FormControlComponent ? ( + + {rightAddons} + {/* TODO: стоит переделать, но это будет мажорка */} + {Arrow + ? React.cloneElement(Arrow, { className: styles.arrow }) + : null} + + ) + } + data-test-id={dataTestId} + {...restProps} + {...innerProps} + > +
+ {placeholder && !filled && ( + {placeholder} + )} + {filled &&
{value}
} +
+ + ) : null}
); }; diff --git a/packages/select/src/components/select-mobile/Component.tsx b/packages/select/src/components/select-mobile/Component.tsx index 0123b5491c..c3223bbc2e 100644 --- a/packages/select/src/components/select-mobile/Component.tsx +++ b/packages/select/src/components/select-mobile/Component.tsx @@ -1,6 +1,7 @@ import React, { forwardRef, ReactNode } from 'react'; import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet'; +import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; import { useSelectWithApply, UseSelectWithApplyProps } from '../../presets/useSelectWithApply/hook'; import { Header } from '../../presets/useSelectWithApply/options-list-with-apply/header/Component'; @@ -119,7 +120,10 @@ export const SelectMobile = forwardRef( open={openProp} size={size} optionsSize={optionsSize} - fieldProps={fieldProps} + fieldProps={{ + FormControlComponent: FormControlMobile, + ...(fieldProps as object), + }} optionProps={optionProps} Arrow={Arrow} Field={Field} diff --git a/packages/select/src/components/select-modal-mobile/Component.tsx b/packages/select/src/components/select-modal-mobile/Component.tsx index f45e44393c..d58156d9a6 100644 --- a/packages/select/src/components/select-modal-mobile/Component.tsx +++ b/packages/select/src/components/select-modal-mobile/Component.tsx @@ -1,5 +1,6 @@ import React, { forwardRef } from 'react'; +import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; import { ModalMobile } from '@alfalab/core-components-modal/Component.mobile'; import { useSelectWithApply, UseSelectWithApplyProps } from '../../presets/useSelectWithApply/hook'; @@ -114,7 +115,10 @@ export const SelectModalMobile = forwardRef( open={openProp} size={size} optionsSize={optionsSize} - fieldProps={fieldProps} + fieldProps={{ + FormControlComponent: FormControlMobile, + ...(fieldProps as object), + }} optionProps={optionProps} Arrow={Arrow} Field={Field} diff --git a/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx b/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx index 9b8517a852..23bd6f22fb 100644 --- a/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx +++ b/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx @@ -19,6 +19,20 @@ const mockOptions = (offset: number) => ({ }); describe('Select useLazyLoading hook', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const observe = jest.fn(); /* diff --git a/packages/select/tsconfig.json b/packages/select/tsconfig.json index 05bd530c91..5b2b251afc 100644 --- a/packages/select/tsconfig.json +++ b/packages/select/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/slider-input/src/Component.test.tsx b/packages/slider-input/src/Component.test.tsx index 8fe9c694c1..2171ad6c04 100644 --- a/packages/slider-input/src/Component.test.tsx +++ b/packages/slider-input/src/Component.test.tsx @@ -4,6 +4,20 @@ import { render, fireEvent } from '@testing-library/react'; import { SliderInput } from './index'; describe('SliderInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + it('should match snapshot', () => { const { container } = render(); expect(container).toMatchSnapshot(); diff --git a/packages/slider-input/src/__snapshots__/Component.test.tsx.snap b/packages/slider-input/src/__snapshots__/Component.test.tsx.snap index 9d78343704..6d3b6228f2 100644 --- a/packages/slider-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/slider-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ exports[`SliderInput should match snapshot 1`] = ` class="component s" >
{ + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Snapshots tests', () => { it('should match snapshot', () => { const { container } = render(