@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.4

package/src/styles/colors.module.css

@@ -1,58 +0,0 @@
-/* ToDo this file will be removed once the labware library, designer, and creator are updated */
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: color-mod(var(--c-blue) lightness(85%));
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: color-mod(var(--c-highlight) alpha(0.3));
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}

package/src/styles/colors.ts

@@ -1,58 +0,0 @@
-// gray scale
-export const C_BLACK = '#000000'
-export const C_DARK_GRAY = '#4a4a4a'
-export const C_MED_DARK_GRAY = '#6c6c6c'
-export const C_MED_GRAY = '#9b9b9b'
-export const C_SILVER_GRAY = '#e3e3e3'
-export const C_MED_LIGHT_GRAY = '#d2d2d2'
-export const C_LIGHT_GRAY = '#e6e6e6'
-export const C_BRIGHT_GRAY = '#f8f8f8'
-export const C_HARBOR_GRAY = '#8a8c8e'
-export const C_NEAR_WHITE = '#fafafa'
-export const C_WHITE = '#ffffff'
-export const C_TRANSPARENT = 'transparent'
-export const C_DARK_BLACK = '#16212d'
-
-// brand colors
-export const C_BLUE = '#006cfa'
-export const C_MINT = '#00bfa8'
-export const C_AQUAMARINE = '#eefff8'
-export const C_POWDER_BLUE = '#f1f8ff'
-export const C_SKY_BLUE = '#accfff80'
-export const C_BLUE_PRESSED = '#0050b8'
-
-// colors by usage
-// TODO(mc, 2020-10-08): s/COLOR_/C_
-export const COLOR_WARNING = '#e28200'
-export const COLOR_WARNING_LIGHT = '#ffd58f'
-export const COLOR_WARNING_DARK = '#9e5e00'
-export const COLOR_ERROR = '#d12929'
-export const COLOR_SUCCESS = '#60b120'
-export const C_DISABLED = '#9c9c9c'
-export const C_SELECTED_DARK = '#00c3e6'
-export const C_BG_SELECTED = '#f0f3ff'
-export const C_ERROR_DARK = '#ac0505'
-export const C_ERROR_LIGHT = '#ffc0c0'
-
-// overlays
-export const OVERLAY_WHITE_10 = 'rgba(255, 255, 255, 0.1)'
-export const OVERLAY_WHITE_20 = 'rgba(255, 255, 255, 0.2)'
-
-// used to set aside further subsections of cards beyond
-// what can be distinguished with a border
-export const OVERLAY_LIGHT_GRAY_50 = 'rgba(230, 230, 230, 0.4)'
-
-// used as default BaseModal overlay color
-export const OVERLAY_GRAY_90 = 'rgba(127, 127, 127, 0.9)'
-
-// darkest modal overlay used
-export const OVERLAY_BLACK_90 = 'rgba(0, 0, 0, 0.9)'
-
-// 80 percent opacity overlay
-export const OVERLAY_BLACK_80 = 'rgba(0, 0, 0, 0.8)'
-
-// opacities
-export const OPACITY_DISABLED = 0.3
-
-// TODO(isk: 3/2/20): Rename to be more generic (e.g. not FONT)
-export const C_FONT_DISABLED = '#9c9c9c'

package/src/styles/cursor.ts

@@ -1,12 +0,0 @@
-// cursor
-// https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword
-export const CURSOR_AUTO = 'auto'
-export const CURSOR_CROSSHAIR = 'crosshair'
-export const CURSOR_DEFAULT = 'default'
-export const CURSOR_GRAB = 'grab'
-export const CURSOR_GRABBING = 'grabbing'
-export const CURSOR_HELP = 'help'
-export const CURSOR_NOT_ALLOWED = 'not-allowed'
-export const CURSOR_POINTER = 'pointer'
-export const CURSOR_ZOOM_IN = 'zoom-in'
-export const CURSOR_WAIT = 'wait'

package/src/styles/flexbox.ts

@@ -1,39 +0,0 @@
-export const FLEX_NONE = 'none'
-export const FLEX_AUTO = 'auto'
-export const FLEX_MIN_CONTENT = 'min-content'
-export const FLEX_MAX_CONTENT = 'max-content'
-
-export const ALIGN_NORMAL = 'normal'
-export const ALIGN_START = 'start'
-export const ALIGN_END = 'end'
-export const ALIGN_FLEX_START = 'flex-start'
-export const ALIGN_FLEX_END = 'flex-end'
-export const ALIGN_CENTER = 'center'
-export const ALIGN_BASELINE = 'baseline'
-export const ALIGN_STRETCH = 'stretch'
-
-export const JUSTIFY_NORMAL = 'normal'
-export const JUSTIFY_START = 'start'
-export const JUSTIFY_END = 'end'
-export const JUSTIFY_FLEX_START = 'flex-start'
-export const JUSTIFY_FLEX_END = 'flex-end'
-export const JUSTIFY_CENTER = 'center'
-export const JUSTIFY_SPACE_BETWEEN = 'space-between'
-export const JUSTIFY_SPACE_AROUND = 'space-around'
-export const JUSTIFY_SPACE_EVENLY = 'space-evenly'
-export const JUSTIFY_STRETCH = 'stretch'
-
-export const DIRECTION_ROW = 'row'
-export const DIRECTION_ROW_REVERSE = 'row-reverse'
-export const DIRECTION_COLUMN = 'column'
-export const DIRECTION_COLUMN_REVERSE = 'column-reverse'
-
-export const WRAP = 'wrap'
-export const NO_WRAP = 'nowrap'
-export const WRAP_REVERSE = 'wrap-reverse'
-
-export const WHITE_SPACE_NORMAL = 'normal'
-export const WHITE_SPACE_PRE = 'pre'
-export const WHITE_SPACE_PRE_WRAP = 'pre-wrap'
-export const WHITE_SPACE_PRE_LINE = 'pre-line'
-export const WHITE_SPACE_BREAK_SPACES = 'break-spaces'

package/src/styles/global.css

@@ -1,179 +0,0 @@
-/* this is global CSS for the components package and all other opentrons projects */
-:root {
-  /* colors */
-
-  /* currently we follow the order of colors.ts file */
-
-  /* green */
-  --green-60: #03683e;
-  --green-35: #afedd3;
-  --green-20: #e8f7ed;
-  --green-50-non-touchscreen: #04aa65;
-  --green-50-touchscreen: #1ca850;
-  --green-50: var(--green-50-non-touchscreen);
-  --green-40-non-touchscreen: #91e2c0;
-  --green-40-touchscreen: #8ef3a8;
-  --green-40: var(--green-40-non-touchscreen);
-  --green-30-non-touchscreen: #c4f6e0;
-  --green-30-touchscreen: #8afbab;
-  --green-30: var(--green-30-non-touchscreen);
-
-  /* red */
-  --red-60: #941313;
-  --red-55: #c71a1b;
-  --red-50: #de1b1b;
-  --red-40: #f5b2b3;
-  --red-35: #f8c8c9;
-  --red-30: #fad6d6;
-  --red-20: #fce9e9;
-
-  /* yellow */
-  --yellow-60: #825512;
-  --yellow-50: #f09d20;
-  --yellow-40: #fcd48b;
-  --yellow-35: #ffe1a4;
-  --yellow-30: #ffe9be;
-  --yellow-20: #fdf3e2;
-
-  /* purple */
-  --purple-60-non-touchscreen: #562566;
-  --purple-60-touchscreen: #612367;
-  --purple-60: var(--purple-60-non-touchscreen);
-  --purple-55-non-touchscreen: #713187;
-  --purple-55-touchscreen: #822e89;
-  --purple-55: var(--purple-55-non-touchscreen);
-  --purple-50-non-touchscreen: #893ba4;
-  --purple-50-touchscreen: #9e39a8;
-  --purple-50: var(--purple-50-non-touchscreen);
-  --purple-40-non-touchscreen: #cea4df;
-  --purple-40-touchscreen: #e2a9ea;
-  --purple-40: var(--purple-40-non-touchscreen);
-  --purple-35-non-touchscreen: #dbbce7;
-  --purple-35-touchscreen: #ecc2f2;
-  --purple-35: var(--purple-35-non-touchscreen);
-  --purple-30-non-touchscreen: #e6d5ec;
-  --purple-30-touchscreen: #f4def7;
-  --purple-30: var(--purple-30-non-touchscreen);
-  --purple-20-non-touchscreen: #f1e8f5;
-  --purple-20-touchscreen: #fff3fe;
-  --purple-20: var(--purple-20-non-touchscreen);
-
-  /* blue */
-  --blue-60: #004196;
-  --blue-55: #0056c8;
-  --blue-40: #a9cefd;
-  --blue-35: #bfdcfd;
-  --blue-30: #d0e6fe;
-  --blue-20: #e1efff;
-  --blue-10: #f1f8ff;
-
-  /* gray */
-  --grey-60: #4a4c4e;
-  --grey-55: #626467;
-  --grey-50: #737578;
-  --grey-40: #b7b8b9;
-  --grey-35: #cbcccc;
-  --grey-30: #dedede;
-  --grey-20: #e9e9e9;
-  --grey-10: #f3f3f3;
-
-  /* core */
-  --black-90: #16212d;
-  --black-80: #24313f;
-  --black-70: #39495b;
-  --white: #fff;
-  --blue-50: #006cfa;
-
-  /* semi-opaques */
-  --transparent-white-80: #fffc;
-  --transparent-white-50: #ffffff80;
-  --transparent-black-80: #16212d80;
-
-  /* flex */
-  --flex-55: #0297cc;
-  --flex-50: #00bdff;
-  --flex-40: #aae3fc;
-
-  /* extras */
-  --transparent: #0000;
-
-  /* spacing */
-  --spacing-2: 0.125rem; /* 2px */
-  --spacing-4: 0.25rem; /* 4px */
-  --spacing-6: 0.375rem; /* 6px */
-  --spacing-8: 0.5rem; /* 8px */
-  --spacing-10: 0.625rem; /* 10px */
-  --spacing-12: 0.75rem; /* 12px */
-  --spacing-16: 1rem; /* 16px */
-  --spacing-20: 1.25rem; /* 20px */
-  --spacing-24: 1.5rem; /* 24px */
-  --spacing-32: 2rem; /* 32px */
-  --spacing-40: 2.5rem; /* 40px */
-  --spacing-44: 2.75rem; /* 44px */
-  --spacing-48: 3rem; /* 48px */
-  --spacing-60: 3.75rem; /* 60px */
-  --spacing-68: 4.25rem; /* 68px */
-  --spacing-80: 5rem; /* 80px */
-  --spacing-120: 7.5rem; /* 120px */
-
-  /* border-radius */
-  --border-radius-2: 0.125rem; /* 2px */
-  --border-radius-4: 0.25rem; /* 4px */
-  --border-radius-8: 0.5rem; /* 8px */
-  --border-radius-12: 0.75rem; /* 12px */
-  --border-radius-16: 1rem; /* 16px */
-  --border-radius-40: 2.5rem; /* 40px */
-  --border-radius-200: 50rem; /* 200px */
-
-  /* font-size */
-  --font-size-80: 5rem; /* 80px */
-  --font-size-38: 2.375rem; /* 38px */
-  --font-size-32: 2rem; /* 32px */
-  --font-size-28: 1.75rem; /* 28px */
-  --font-size-22: 1.375rem; /* 22px */
-  --font-size-20: 1.25rem; /* 20px */
-  --font-size-h1: 1.1875rem; /* H1 19px */
-  --font-size-h2: 0.9375rem; /* H2 15px */
-  --font-size-h3: 0.875rem; /* H3 14px */
-  --font-size-h4: 0.8125rem; /* H4 13px */
-  --font-size-h6: 0.5625rem; /* H6 9px */
-  --font-size-p: 0.8125rem; /* P 13px */
-  --font-size-label: 0.6875rem; /* Label 11px */
-  --font-size-caption: 0.625rem; /* Caption 10px */
-
-  /* line-height */
-  --line-height-96: 6rem; /* 96px */
-  --line-height-48: 3rem; /* 48px */
-  --line-height-42: 2.625rem; /* 42px */
-  --line-height-36: 2.25rem; /* 36px */
-  --line-height-28: 1.75rem; /* 28px */
-  --line-height-24: 1.5rem; /* 24px */
-  --line-height-20: 1.25rem; /* 20px */
-  --line-height-18: 1.125rem; /* 18px */
-  --line-height-16: 1rem; /* 16px */
-  --line-height-12: 0.75rem; /* 12px */
-
-  /* font-weight */
-
-  /* this might be removed. that depends on what StyledText looks like */
-  --font-weight-bold: 700;
-  --font-weight-semi-bold: 600;
-  --font-weight-regular: 400;
-  --font-weight-light: 300;
-}
-
-.enable_touchscreen_colors {
-  /* green */
-  --green-50: var(--green-50-touchscreen);
-  --green-40: var(--green-40-touchscreen);
-  --green-30: var(--green-30-touchscreen);
-
-  /* purple */
-  --purple-60: var(--purple-60-touchscreen);
-  --purple-55: var(--purple-55-touchscreen);
-  --purple-50: var(--purple-50-touchscreen);
-  --purple-40: var(--purple-40-touchscreen);
-  --purple-35: var(--purple-35-touchscreen);
-  --purple-30: var(--purple-30-touchscreen);
-  --purple-20: var(--purple-20-touchscreen);
-}

package/src/styles/index.module.css

@@ -1,8 +0,0 @@
-.clickable {
-  cursor: pointer;
-}
-
-.rotated {
-  transform: rotate(180deg);
-  transform-origin: center;
-}

package/src/styles/index.ts

@@ -1,8 +0,0 @@
-export * from './borders'
-export * from './colors'
-export * from './cursor'
-export * from './flexbox'
-export * from './layout'
-export * from './position'
-export * from './spacing'
-export * from './typography'

package/src/styles/layout.ts

@@ -1,31 +0,0 @@
-// display
-export const DISPLAY_NONE = 'none'
-export const DISPLAY_INLINE = 'inline'
-export const DISPLAY_BLOCK = 'block'
-export const DISPLAY_INLINE_BLOCK = 'inline-block'
-export const DISPLAY_FLEX = 'flex'
-export const DISPLAY_TABLE = 'table'
-export const DISPLAY_TABLE_ROW = 'table-row'
-export const DISPLAY_TABLE_CELL = 'table-cell'
-export const DISPLAY_GRID = 'grid'
-
-// powers-of-two size scale
-export const SIZE_AUTO = 'auto'
-export const SIZE_1 = '1rem'
-export const SIZE_2 = '2rem'
-export const SIZE_3 = '4rem'
-export const SIZE_4 = '8rem'
-export const SIZE_5 = '16rem'
-export const SIZE_6 = '32rem'
-
-// overflow
-export const OVERFLOW_VISIBLE = 'visible'
-export const OVERFLOW_HIDDEN = 'hidden'
-export const OVERFLOW_CLIP = 'clip'
-export const OVERFLOW_SCROLL = 'scroll'
-export const OVERFLOW_AUTO = 'auto'
-
-// overflow wrap
-export const OVERFLOW_WRAP_ANYWHERE = 'anywhere'
-export const OVERFLOW_WRAP_BREAK_WORD = 'break-word'
-export const OVERFLOW_WRAP_NORMAL = 'normal'

package/src/styles/position.ts

@@ -1,5 +0,0 @@
-export const POSITION_STATIC: 'static' = 'static'
-export const POSITION_RELATIVE: 'relative' = 'relative'
-export const POSITION_ABSOLUTE: 'absolute' = 'absolute'
-export const POSITION_FIXED: 'fixed' = 'fixed'
-export const POSITION_STICKY: 'sticky' = 'sticky'

package/src/styles/spacing.ts

@@ -1,11 +0,0 @@
-export const SPACING_AUTO = 'auto'
-
-// powers-of-two spacing scale
-export const SPACING_1 = '0.25rem'
-export const SPACING_2 = '0.5rem'
-export const SPACING_3 = '1rem'
-export const SPACING_4 = '2rem'
-export const SPACING_5 = '4rem'
-export const SPACING_6 = '8rem'
-export const SPACING_7 = '16rem'
-export const SPACING_8 = '32rem'

package/src/styles/typography.module.css

@@ -1,23 +0,0 @@
-/* ToDo this file will be removed once the labware library, designer, and creator are updated */
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}

package/src/styles/typography.ts

@@ -1,90 +0,0 @@
-import { css } from 'styled-components'
-
-import { C_DARK_GRAY, C_WHITE } from './colors'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-
-// font size values
-export const FONT_SIZE_HUGE = '3rem'
-export const FONT_SIZE_BIG = '1.5rem'
-export const FONT_SIZE_HEADER = '1.125rem'
-export const FONT_SIZE_DEFAULT = '1rem'
-export const FONT_SIZE_BODY_2 = '0.875rem'
-export const FONT_SIZE_BODY_1 = '0.75rem'
-export const FONT_SIZE_CAPTION = '0.625rem'
-export const FONT_SIZE_TINY = '0.325rem'
-export const FONT_SIZE_MICRO = '0.2rem'
-export const FONT_SIZE_INHERIT = 'inherit'
-
-// line height values
-export const LINE_HEIGHT_SOLID = 1
-export const LINE_HEIGHT_TITLE = 1.25
-export const LINE_HEIGHT_COPY = 1.5
-
-// font weight values
-export const FONT_WEIGHT_LIGHT = 300
-export const FONT_WEIGHT_REGULAR = 400
-export const FONT_WEIGHT_SEMIBOLD = 600
-export const FONT_WEIGHT_BOLD = 800
-
-// font style values
-export const FONT_STYLE_NORMAL = 'normal'
-export const FONT_STYLE_ITALIC = 'italic'
-
-// text align
-export const TEXT_ALIGN_LEFT = 'left'
-export const TEXT_ALIGN_CENTER = 'center'
-export const TEXT_ALIGN_RIGHT = 'right'
-export const TEXT_ALIGN_JUSTIFY = 'justify'
-
-// text transform
-export const TEXT_TRANSFORM_NONE = 'none'
-export const TEXT_TRANSFORM_CAPITALIZE = 'capitalize'
-export const TEXT_TRANSFORM_UPPERCASE = 'uppercase'
-export const TEXT_TRANSFORM_LOWERCASE = 'lowercase'
-
-// text decoration
-export const TEXT_DECORATION_UNDERLINE = 'underline'
-
-// font property sets
-export const FONT_HEADER_DARK: FlattenSimpleInterpolation = css`
-  font-size: ${FONT_SIZE_HEADER};
-  font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  color: ${C_DARK_GRAY};
-`
-
-export const FONT_HEADER_THIN: FlattenSimpleInterpolation = css`
-  font-size: ${FONT_SIZE_HEADER};
-  font-weight: ${FONT_WEIGHT_REGULAR};
-  color: ${C_DARK_GRAY};
-`
-
-export const FONT_BODY_1_DARK: FlattenSimpleInterpolation = css`
-  font-size: ${FONT_SIZE_BODY_1};
-  font-weight: ${FONT_WEIGHT_REGULAR};
-  color: ${C_DARK_GRAY};
-`
-
-export const FONT_BODY_1_LIGHT: FlattenSimpleInterpolation = css`
-  font-size: ${FONT_SIZE_BODY_1};
-  font-weight: ${FONT_WEIGHT_REGULAR};
-  color: ${C_WHITE};
-`
-
-export const FONT_BODY_2_DARK: FlattenSimpleInterpolation = css`
-  font-size: ${FONT_SIZE_BODY_2};
-  font-weight: ${FONT_WEIGHT_REGULAR};
-  color: ${C_DARK_GRAY};
-`
-
-export const FONT_BODY_1_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
-  font-size: ${FONT_SIZE_BODY_1};
-  font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  color: ${C_DARK_GRAY};
-`
-
-export const FONT_HUGE_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
-  font-size: ${FONT_SIZE_HUGE};
-  font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  color: ${C_DARK_GRAY};
-`

package/src/testing/utils/index.ts

@@ -1,2 +0,0 @@
-export * from './renderWithProviders'
-export * from './matchers'

package/src/testing/utils/matchers.ts

@@ -1,32 +0,0 @@
-import { when } from 'vitest-when'
-
-import type { Matcher } from '@testing-library/react'
-
-// these are needed because under the hood react calls components with two arguments (props and some second argument nobody seems to know)
-// https://github.com/timkindberg/jest-when/issues/66
-// use partialComponentPropsMatcher to only verify the props you pass into partialComponentPropsMatcher
-export const partialComponentPropsMatcher = (argsToMatch: unknown): any =>
-  // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
-  when.allArgs((args, equals) =>
-    equals(args[0], expect.objectContaining(argsToMatch))
-  )
-
-// Match things like <p>Some <strong>nested</strong> text</p>
-// Use with either string match: getByText(nestedTextMatcher("Some nested text"))
-// or regexp: getByText(nestedTextMatcher(/Some nested text/))
-export const nestedTextMatcher = (textMatch: string | RegExp): Matcher => (
-  content,
-  node
-) => {
-  const hasText = (n: typeof node): boolean => {
-    if (n == null || n.textContent === null) return false
-    return typeof textMatch === 'string'
-      ? Boolean(n?.textContent.match(textMatch))
-      : textMatch.test(n.textContent)
-  }
-  const nodeHasText = hasText(node)
-  const childrenDontHaveText =
-    node != null && Array.from(node.children).every(child => !hasText(child))
-
-  return nodeHasText && childrenDontHaveText
-}

package/src/testing/utils/renderWithProviders.tsx

@@ -1,56 +0,0 @@
-// render using targetted component using @testing-library/react
-// with wrapping providers for i18next and redux
-
-import { I18nextProvider } from 'react-i18next'
-import { QueryClient, QueryClientProvider } from 'react-query'
-import { Provider } from 'react-redux'
-import { render } from '@testing-library/react'
-import { legacy_createStore } from 'redux'
-import { vi } from 'vitest'
-
-import type { RenderOptions, RenderResult } from '@testing-library/react'
-import type { Store } from 'redux'
-import type {
-  ComponentProps,
-  ComponentType,
-  PropsWithChildren,
-  ReactElement,
-} from 'react'
-
-export interface RenderWithProvidersOptions<State> extends RenderOptions {
-  initialState?: State
-  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
-}
-
-export function renderWithProviders<State>(
-  Component: ReactElement,
-  options?: RenderWithProvidersOptions<State>
-): [RenderResult, Store<State>] {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const { initialState = {}, i18nInstance = null } = options || {}
-
-  const store: Store<State> = legacy_createStore(vi.fn(), initialState)
-  store.dispatch = vi.fn()
-  store.getState = vi.fn(() => initialState) as () => State
-
-  const queryClient = new QueryClient()
-
-  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
-    children,
-  }) => {
-    const BaseWrapper = (
-      <QueryClientProvider client={queryClient}>
-        <Provider store={store}>{children}</Provider>
-      </QueryClientProvider>
-    )
-    if (i18nInstance != null) {
-      return (
-        <I18nextProvider i18n={i18nInstance}>{BaseWrapper}</I18nextProvider>
-      )
-    } else {
-      return BaseWrapper
-    }
-  }
-
-  return [render(Component, { wrapper: ProviderWrapper }), store]
-}