diff --git a/.changeset/pink-candles-protect.md b/.changeset/pink-candles-protect.md new file mode 100644 index 0000000000..178d91b594 --- /dev/null +++ b/.changeset/pink-candles-protect.md @@ -0,0 +1,15 @@ +--- +"@alfalab/core-components-amount-input": patch +"@alfalab/core-components-button": patch +"@alfalab/core-components-calendar-input": patch +"@alfalab/core-components-calendar": patch +"@alfalab/core-components-checkbox-group": patch +"@alfalab/core-components-code-input": patch +"@alfalab/core-components-confirmation": patch +"@alfalab/core-components-custom-button": patch +"@alfalab/core-components-custom-picker-button": patch +"@alfalab/core-components-date-range-input": patch +"@alfalab/core-components-date-time-input": patch +--- + +Добавлен пакет @alfalab/core-config для глобальных настроек библиотеки. В него включены параметры: breakpoint для переключения между десктопной и мобильной версиями и client для выбора версии по умолчанию при серверном рендеринге diff --git a/.github/workflows/core-config-publish.yml b/.github/workflows/core-config-publish.yml new file mode 100644 index 0000000000..b7b8a18f18 --- /dev/null +++ b/.github/workflows/core-config-publish.yml @@ -0,0 +1,54 @@ +name: Publish core-config + +on: + workflow_dispatch: + inputs: + version: + description: 'Введите версию x.x.x' + required: true + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Check permissions + if: ${{ contains(fromJSON('["reme3d2y","hextion","SiebenSieben","fulcanellee"]'), github.actor) == false }} + uses: actions/github-script@v6 + with: + script: | + core.setFailed("you don't have permission to run this workflow!"); + + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v4 + with: + node-version: '20.x' + registry-url: 'https://registry.npmjs.org' + + - name: Install dependencies + run: yarn --pure-lockfile + + - name: Build app + run: | + cd ./external/core-config + yarn build + + - name: Set version + if: success() + run: | + cd ./external/core-config + git config user.name core-ds-bot + git config user.email ds@gitmax.tech + yarn --new-version version ${{ github.event.inputs.version }} + git push + + - name: Publish + if: success() + run: | + cd ./external/core-config + npm publish + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/external/core-config/LICENSE b/external/core-config/LICENSE new file mode 100644 index 0000000000..c0cf8553fa --- /dev/null +++ b/external/core-config/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 core-ds + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/external/core-config/README.md b/external/core-config/README.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/external/core-config/package.json b/external/core-config/package.json new file mode 100644 index 0000000000..af13acc33a --- /dev/null +++ b/external/core-config/package.json @@ -0,0 +1,17 @@ +{ + "name": "@alfalab/core-config", + "version": "1.0.0", + "description": "Глобальный конфиг для настройки core-components", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "license": "MIT", + "publishConfig": { + "access": "public" + }, + "files": [ + "/dist" + ], + "scripts": { + "build": "tsc" + } +} diff --git a/external/core-config/src/CoreConfigContext.tsx b/external/core-config/src/CoreConfigContext.tsx new file mode 100644 index 0000000000..577d799710 --- /dev/null +++ b/external/core-config/src/CoreConfigContext.tsx @@ -0,0 +1,26 @@ +import { createContext, useContext } from 'react'; + +export type CoreConfigContext = { + breakpoint: number; + client: 'desktop' | 'mobile'; +}; + +export const CoreConfigContext = createContext({ + breakpoint: 1024, + client: 'desktop', +}); + +export const useCoreConfig = (overrides: Partial = {}) => { + const config = useContext(CoreConfigContext); + + Object.entries(overrides).forEach(([key, value]) => { + if (value === undefined) { + delete overrides[key as keyof typeof overrides]; + } + }); + + return { + ...config, + ...overrides, + }; +}; diff --git a/external/core-config/src/index.ts b/external/core-config/src/index.ts new file mode 100644 index 0000000000..35d9f5fbce --- /dev/null +++ b/external/core-config/src/index.ts @@ -0,0 +1 @@ +export * from './CoreConfigContext'; diff --git a/external/core-config/tsconfig.json b/external/core-config/tsconfig.json new file mode 100644 index 0000000000..f740f89b0b --- /dev/null +++ b/external/core-config/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "target": "es2016", + "jsx": "react", + "module": "commonjs", + "declaration": true, + "outDir": "./dist", + "declarationDir": "./dist", + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "skipLibCheck": true + } +} diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx index dbb98a4b51..d648416136 100644 --- 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( onChange, onClear, onBlur, - breakpoint = getComponentBreakpoint(), onKeyDown, + breakpoint, + client, transparentMinor = true, inputClassName, label, @@ -363,6 +363,7 @@ export const AmountInput = forwardRef( dataTestId={dataTestId} ref={ref} breakpoint={breakpoint} + client={client} /> ); diff --git a/packages/button/src/Component.responsive.tsx b/packages/button/src/Component.responsive.tsx index ea95b455ef..233b5ec691 100644 --- a/packages/button/src/Component.responsive.tsx +++ b/packages/button/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 { ButtonDesktop } from './desktop'; import { ButtonMobile } from './mobile'; @@ -9,12 +8,16 @@ import { ButtonProps } from './typings'; export const Button = forwardRef( ( - { children, breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, ...restProps }, + { + children, + breakpoint, + client, + defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', + ...restProps + }, ref, ) => { - const query = `(min-width: ${breakpoint}px)`; - - const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue); + const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue); const Component = isDesktop ? ButtonDesktop : ButtonMobile; diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts index 0eb97adbf2..49ff4979f1 100644 --- a/packages/button/src/typings.ts +++ b/packages/button/src/typings.ts @@ -143,8 +143,14 @@ export type ButtonProps = CommonButtonProps & { */ breakpoint?: number; + /** + * Версия, которая будет использоваться при серверном рендеринге + */ + client?: 'desktop' | 'mobile'; + /** * Значение по-умолчанию для хука useMatchMedia + * @deprecated Используйте client */ defaultMatchMediaValue?: boolean | (() => boolean); }; diff --git a/packages/calendar-input/package.json b/packages/calendar-input/package.json index a398ba3499..bc64af4b1b 100644 --- a/packages/calendar-input/package.json +++ b/packages/calendar-input/package.json @@ -17,6 +17,7 @@ "dependencies": { "@alfalab/core-components-calendar": "^7.15.1", "@alfalab/core-components-date-input": "^4.4.6", + "@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 index 5d75911432..ef2b669ff5 100644 --- 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 & { * @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( - ({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => { - const [view] = useMedia( - [ - ['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 ? ( ) : ( diff --git a/packages/calendar-input/tsconfig.json b/packages/calendar-input/tsconfig.json index 2077a213d3..becceb3d57 100644 --- 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 index 80d25e03e8..96aed1e67b 100644 --- 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( - ({ 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 ? ( diff --git a/packages/checkbox-group/src/Component.responsive.tsx b/packages/checkbox-group/src/Component.responsive.tsx index 0de8d952a1..04fe7fda79 100644 --- 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 & { */ breakpoint?: number; + /** + * Версия, которая будет использоваться при серверном рендеринге + */ + client?: 'desktop' | 'mobile'; + /** * Значение по-умолчанию для хука useMatchMedia + * @deprecated Используйте client */ defaultMatchMediaValue?: boolean | (() => boolean); }; export const CheckboxGroup: FC = ({ - 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 index 50bdb528e5..04d8345564 100644 --- 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 & { */ breakpoint?: number; + /** + * Версия, которая будет использоваться при серверном рендеринге + */ + client?: 'desktop' | 'mobile'; + /** * Значение по-умолчанию для хука useMatchMedia + * @deprecated Используйте client */ defaultMatchMediaValue?: boolean | (() => boolean); }; export const CodeInput = forwardRef( - ({ 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 index 27e73f24a8..aca9e3bec8 100644 --- 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 = ({ - 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 ? ( diff --git a/packages/confirmation/src/components/base-confirmation/component.tsx b/packages/confirmation/src/components/base-confirmation/component.tsx index 0640fa5000..63d6541156 100644 --- 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 = ({ mobile, clearCodeOnError = true, hideCountdownSection = false, - breakpoint = getComponentBreakpoint(), + breakpoint, + client, initialScreenHintSlot, errorVisibleDuration, ...restProps @@ -103,6 +103,7 @@ export const BaseConfirmation: FC = ({ 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 index 8720942b29..7110e8f14b 100644 --- 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 = ({ mobile }) => { - const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint } = + const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } = useContext(ConfirmationContext); return ( @@ -41,6 +41,7 @@ export const FatalError: FC = ({ mobile }) => { onClick={onFatalErrorOkButtonClick} className={styles.button} breakpoint={breakpoint} + client={client} > {texts.fatalErrorButton} diff --git a/packages/confirmation/src/components/screens/hint/component.tsx b/packages/confirmation/src/components/screens/hint/component.tsx index 3094a5edb8..8d0bbd41b7 100644 --- 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 = ({ 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 = ({ mobile }) => { onClick={handleReturnButtonClick} className={styles.hintButton} breakpoint={breakpoint} + client={client} > {texts.hintButton} diff --git a/packages/confirmation/src/components/screens/initial/countdown-section.tsx b/packages/confirmation/src/components/screens/initial/countdown-section.tsx index ada328d93b..d5d7d8ee49 100644 --- 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 = ({ mobile, handleSmsRetryClick, }) => { - const { state, texts, timeLeft, blockSmsRetry, breakpoint } = useContext(ConfirmationContext); + const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } = + useContext(ConfirmationContext); const renderText = (text?: string) => ( = ({ onClick={handleSmsRetryClick} className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })} breakpoint={breakpoint} + client={client} > {texts.buttonRetry} diff --git a/packages/confirmation/src/context.ts b/packages/confirmation/src/context.ts index 6f261be5b0..9d1273f417 100644 --- a/packages/confirmation/src/context.ts +++ b/packages/confirmation/src/context.ts @@ -17,6 +17,7 @@ export const ConfirmationContext = createContext({ phone: '', hideCountdownSection: false, breakpoint: 1024, + client: 'desktop', initialScreenHintSlot: null, onTempBlockFinished: mockFn, onInputFinished: mockFn, diff --git a/packages/confirmation/src/types.ts b/packages/confirmation/src/types.ts index 63ce82095d..99f97898e0 100644 --- a/packages/confirmation/src/types.ts +++ b/packages/confirmation/src/types.ts @@ -123,6 +123,11 @@ export type ConfirmationProps = { */ breakpoint?: number; + /** + * Версия, которая будет использоваться при серверном рендеринге + */ + client?: 'desktop' | 'mobile'; + /** * Продолжительность отображения ошибки * @default 1300 @@ -156,14 +161,10 @@ export type TConfirmationContext = Required< | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' + | 'breakpoint' + | 'client' > & { timeLeft: number; - } & { - /** - * Контрольная точка для кнопки, с нее начинается desktop версия - * @default 1024 - */ - breakpoint?: number; }; export type ConfirmationTexts = { diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap index 25223b40f7..4307879fa3 100644 --- a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap @@ -311,7 +311,7 @@ Object { > boolean); }; @@ -38,14 +43,14 @@ export const CustomPickerButtonResponsive = forwardRef< footer, swipeable, bottomSheetProps, - breakpoint = getComponentBreakpoint(), - defaultMatchMediaValue, + breakpoint, + client, + defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }, ref, ) => { - const query = `(min-width: ${breakpoint}px)`; - const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue); + const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue); return isDesktop ? ( + + + +`; + +exports[`Snapshots tests should display opened correctly 2`] = ` +
+
+
+ +
+
+
+`; + +exports[`Snapshots tests should display opened correctly 3`] = `
`; -exports[`Snapshots tests should display opened correctly 2`] = ` +exports[`Snapshots tests should display opened correctly 4`] = `
@@ -1282,1123 +1372,6 @@ exports[`Snapshots tests should display opened correctly 2`] = `
`; -exports[`Snapshots tests should display opened correctly 3`] = ` -
-
-
- -
-
-
-`; - -exports[`Snapshots tests should display opened correctly 4`] = ` -
-
-
-
- -