refactor: update components

core-ds · Oct 28, 2024 · 6e371d4 · 6e371d4
1 parent 1d894a3
commit 6e371d4
Show file tree

Hide file tree

Showing 81 changed files with 554 additions and 362 deletions.
diff --git a/external/core-config/src/CoreConfigContext.tsx b/external/core-config/src/CoreConfigContext.tsx
@@ -2,12 +2,12 @@ import { createContext, useContext } from 'react';
 
 export type CoreConfigContext = {
     breakpoint: number;
-    ssrView: 'desktop' | 'mobile';
+    client: 'desktop' | 'mobile';
 };
 
 export const CoreConfigContext = createContext<CoreConfigContext>({
     breakpoint: 1024,
-    ssrView: 'desktop',
+    client: 'desktop',
 });
 
 export const useCoreConfig = (overrides: Partial<CoreConfigContext> = {}) => {

diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx
@@ -2,7 +2,6 @@ import React, { FocusEvent, forwardRef, Fragment, useCallback, useEffect, useSta
 import cn from 'classnames';
 
 import { Input, InputProps } from '@alfalab/core-components-input';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
 import { withSuffix } from '@alfalab/core-components-with-suffix';
 import { CurrencyCodes } from '@alfalab/data';
 import { formatAmount, THINSP } from '@alfalab/utils';
@@ -135,8 +134,9 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             onChange,
             onClear,
             onBlur,
-            breakpoint = getComponentBreakpoint(),
             onKeyDown,
+            breakpoint,
+            client,
             transparentMinor = true,
             inputClassName,
             label,
@@ -363,6 +363,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
                     dataTestId={dataTestId}
                     ref={ref}
                     breakpoint={breakpoint}
+                    client={client}
                 />
             </div>
         );

diff --git a/packages/button/src/Component.responsive.tsx b/packages/button/src/Component.responsive.tsx
@@ -11,8 +11,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         {
             children,
             breakpoint,
-            ssrView,
-            defaultMatchMediaValue = ssrView !== undefined ? ssrView === 'desktop' : undefined,
+            client,
+            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
             ...restProps
         },
         ref,

diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts
@@ -146,11 +146,11 @@ export type ButtonProps = CommonButtonProps & {
     /**
      * Версия, которая будет использоваться при серверном рендеринге
      */
-    ssrView?: 'desktop' | 'mobile';
+    client?: 'desktop' | 'mobile';
 
     /**
      * Значение по-умолчанию для хука useMatchMedia
-     * @deprecated Используйте ssrView
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
diff --git a/packages/calendar-input/package.json b/packages/calendar-input/package.json
@@ -17,6 +17,7 @@
     "dependencies": {
         "@alfalab/core-components-calendar": "^7.14.2",
         "@alfalab/core-components-date-input": "^4.4.4",
+        "@alfalab/core-components-mq": "^4.3.0",
         "@alfalab/core-components-popover": "^6.3.2",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",

diff --git a/packages/calendar-input/src/Component.responsive.tsx b/packages/calendar-input/src/Component.responsive.tsx
@@ -2,8 +2,7 @@ import React, { forwardRef } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { DateInputProps } from '@alfalab/core-components-date-input';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
-import { useMedia } from '@alfalab/hooks';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { CalendarInputProps } from './components/calendar-input/Component';
 import { CalendarInputDesktop } from './desktop';
@@ -15,6 +14,11 @@ export type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
 };
 
 export type CalendarInputMedia = 'desktop' | 'mobile';
@@ -24,16 +28,10 @@ export type CalendarInputMedia = 'desktop' | 'mobile';
  * use UniversalDateInput instead
  */
 export const CalendarInputResponsive = forwardRef<HTMLInputElement, CalendarInputResponsiveProps>(
-    ({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
-        const [view] = useMedia<CalendarInputMedia>(
-            [
-                ['mobile', `(max-width: ${breakpoint - 1}px)`],
-                ['desktop', `(min-width: ${breakpoint}px)`],
-            ],
-            'desktop',
-        );
+    ({ breakpoint, client, ...restProps }, ref) => {
+        const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
 
-        return view === 'desktop' ? (
+        return isDesktop ? (
             <CalendarInputDesktop {...restProps} ref={ref} />
         ) : (
             <CalendarInputMobile {...restProps} ref={ref} />

diff --git a/packages/calendar-input/tsconfig.json b/packages/calendar-input/tsconfig.json
@@ -11,6 +11,7 @@
             "@alfalab/core-components-input/*": ["../input/src/*"],
             "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-calendar/*": ["../calendar/src/*"],
+            "@alfalab/core-components-popover/*": ["../popover/src/*"],
             "@alfalab/core-components-*": ["../*/src"]
         }
     },
@@ -19,6 +20,7 @@
         { "path": "../date-input" },
         { "path": "../popover" },
         { "path": "../modal" },
-        { "path": "../shared" },
+        { "path": "../mq" },
+        { "path": "../shared" }
     ]
 }
diff --git a/packages/calendar/src/Component.responsive.tsx b/packages/calendar/src/Component.responsive.tsx
@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { useMatchMedia } from '@alfalab/core-components-mq';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { CalendarMobile, CalendarMobileProps } from './components/calendar-mobile';
 import { CalendarDesktop, CalendarDesktopProps } from './desktop';
@@ -14,15 +13,29 @@ export type ResponsiveCalendarProps = CalendarDesktopProps &
          */
         breakpoint?: number;
 
+        /**
+         * Версия, которая будет использоваться при серверном рендеринге
+         */
+        client?: 'desktop' | 'mobile';
+
         /**
          * Значение по-умолчанию для хука useMatchMedia
+         * @deprecated Используйте client
          */
         defaultMatchMediaValue?: boolean | (() => boolean);
     };
 
 export const CalendarResponsive = forwardRef<HTMLDivElement, ResponsiveCalendarProps>(
-    ({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, ...restProps }, ref) => {
-        const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    (
+        {
+            breakpoint,
+            client,
+            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
 
         return isDesktop ? (
             <CalendarDesktop {...restProps} ref={ref} />

diff --git a/packages/checkbox-group/src/Component.responsive.tsx b/packages/checkbox-group/src/Component.responsive.tsx
@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
-import { useMatchMedia } from '@alfalab/core-components-mq';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { BaseCheckboxGroupProps } from './components/base-checkbox-group';
 import { CheckboxGroupDesktop } from './desktop';
@@ -14,20 +13,25 @@ export type CheckboxGroupProps = Omit<BaseCheckboxGroupProps, 'styles'> & {
      */
     breakpoint?: number;
 
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const CheckboxGroup: FC<CheckboxGroupProps> = ({
-    breakpoint = getComponentBreakpoint(),
-    defaultMatchMediaValue,
+    breakpoint,
+    client,
+    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
     ...restProps
 }) => {
-    const query = `(min-width: ${breakpoint}px)`;
-
-    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
+    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
 
     const Component = isDesktop ? CheckboxGroupDesktop : CheckboxGroupMobile;
 

diff --git a/packages/code-input/src/Component.responsive.tsx b/packages/code-input/src/Component.responsive.tsx
@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { useMatchMedia } from '@alfalab/core-components-mq';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { CodeInputDesktop } from './desktop';
 import { CodeInputMobile } from './mobile';
@@ -14,17 +13,29 @@ export type CodeInputProps = Omit<BaseCodeInputProps, 'stylesInput'> & {
      */
     breakpoint?: number;
 
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const CodeInput = forwardRef<CustomInputRef, CodeInputProps>(
-    ({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, ...restProps }, ref) => {
-        const query = `(min-width: ${breakpoint}px)`;
-
-        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
+    (
+        {
+            breakpoint,
+            client,
+            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
 
         const Component = isDesktop ? CodeInputDesktop : CodeInputMobile;
 

diff --git a/packages/confirmation/src/component.responsive.tsx b/packages/confirmation/src/component.responsive.tsx
@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
-import { useMatchMedia } from '@alfalab/core-components-mq';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { ConfirmationDesktop } from './desktop';
 import { ConfirmationMobile } from './mobile';
@@ -17,18 +16,25 @@ export type ResponsiveConfirmationProps = Omit<
      */
     breakpoint?: number;
 
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const ConfirmationResponsive: FC<ResponsiveConfirmationProps> = ({
-    breakpoint = getComponentBreakpoint(),
-    defaultMatchMediaValue = true,
+    breakpoint,
+    client,
+    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
     ...restProps
 }) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
 
     return isDesktop ? (
         <ConfirmationDesktop {...restProps} />

diff --git a/packages/confirmation/src/components/base-confirmation/component.tsx b/packages/confirmation/src/components/base-confirmation/component.tsx
@@ -1,7 +1,6 @@
 import React, { ComponentType, FC, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
 import { usePrevious } from '@alfalab/hooks';
 
 import { ConfirmationContext } from '../../context';
@@ -40,7 +39,8 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
     mobile,
     clearCodeOnError = true,
     hideCountdownSection = false,
-    breakpoint = getComponentBreakpoint(),
+    breakpoint,
+    client,
     initialScreenHintSlot,
     errorVisibleDuration,
     ...restProps
@@ -103,6 +103,7 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
         phone,
         blockSmsRetry,
         breakpoint,
+        client,
         onTempBlockFinished,
         onChangeState,
         onChangeScreen,

diff --git a/packages/confirmation/src/components/screens/fatal-error/component.tsx b/packages/confirmation/src/components/screens/fatal-error/component.tsx
@@ -17,7 +17,7 @@ export type FatalErrorProps = {
 };
 
 export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
-    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint } =
+    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } =
         useContext(ConfirmationContext);
 
     return (
@@ -41,6 +41,7 @@ export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
                 onClick={onFatalErrorOkButtonClick}
                 className={styles.button}
                 breakpoint={breakpoint}
+                client={client}
             >
                 {texts.fatalErrorButton}
             </Button>

diff --git a/packages/confirmation/src/components/screens/hint/component.tsx b/packages/confirmation/src/components/screens/hint/component.tsx
@@ -18,7 +18,7 @@ export type HintProps = {
 };
 
 export const Hint: FC<HintProps> = ({ mobile }) => {
-    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint } =
+    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint, client } =
         useContext(ConfirmationContext);
 
     const handleReturnButtonClick = () => {
@@ -110,6 +110,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                 onClick={handleReturnButtonClick}
                 className={styles.hintButton}
                 breakpoint={breakpoint}
+                client={client}
             >
                 {texts.hintButton}
             </Button>

diff --git a/packages/confirmation/src/components/screens/initial/countdown-section.tsx b/packages/confirmation/src/components/screens/initial/countdown-section.tsx
@@ -25,7 +25,8 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
     mobile,
     handleSmsRetryClick,
 }) => {
-    const { state, texts, timeLeft, blockSmsRetry, breakpoint } = useContext(ConfirmationContext);
+    const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =
+        useContext(ConfirmationContext);
 
     const renderText = (text?: string) => (
         <Typography.Text
@@ -69,6 +70,7 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
                 onClick={handleSmsRetryClick}
                 className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}
                 breakpoint={breakpoint}
+                client={client}
             >
                 {texts.buttonRetry}
             </Button>

diff --git a/packages/confirmation/src/context.ts b/packages/confirmation/src/context.ts
@@ -17,6 +17,7 @@ export const ConfirmationContext = createContext<TConfirmationContext>({
     phone: '',
     hideCountdownSection: false,
     breakpoint: 1024,
+    client: 'desktop',
     initialScreenHintSlot: null,
     onTempBlockFinished: mockFn,
     onInputFinished: mockFn,