feat: wip

skbkontur · Nov 21, 2024 · 58e64fe · 58e64fe
1 parent db8a5a8
commit 58e64fe
Show file tree

Hide file tree

Showing 215 changed files with 9,275 additions and 7,719 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 .vscode
 .DS_Store
 *.code-workspace
+*.orig
 
 node_modules
 yarn-debug.log

diff --git a/package.json b/package.json
@@ -35,5 +35,6 @@
   },
   "resolutions": {
     "selenium-webdriver": "4.0.0-beta.4"
-  }
+  },
+  "packageManager": "[email protected]"
 }
diff --git a/packages/react-ui-validations/stories/__creevey__/Input.creevey.ts b/packages/react-ui-validations/stories/__creevey__/Input.creevey.ts
@@ -3,7 +3,7 @@ import { story, kind, test } from 'creevey';
 kind('Input', () => {
   story('TooltipTopLeft', () => {
     test('invalidTooltip', async function () {
-      const input = await this.browser.findElement({ css: '.react-ui-1xb4xgu' });
+      const input = await this.browser.findElement({ css: '[data-tid~="test-input"]' });
       await this.browser
         .actions({
           bridge: true,

diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.styles.ts b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.styles.ts
@@ -1,9 +1,11 @@
-import { css, memoizeStyle } from '../../../lib/theming/Emotion';
+import { memoizeStyle } from '../../../lib/theming/Emotion';
 import { Theme } from '../../../lib/theming/Theme';
+import type { Emotion } from '@emotion/css/create-instance';
 
-export const styles = memoizeStyle({
-  root() {
-    return css`
+export const getStyles = (emotion: Emotion) =>
+  memoizeStyle({
+    root() {
+      return emotion.css`
       font-weight: 400;
       font-size: 14px;
       padding-left: 300px;
@@ -41,15 +43,15 @@ export const styles = memoizeStyle({
         }
       }
     `;
-  },
-  darkRoot(t: Theme) {
-    return css`
+    },
+    darkRoot(t: Theme) {
+      return emotion.css`
       background: ${t.bgDefault};
       color: ${t.textColorDefault};
     `;
-  },
-  wrapper() {
-    return css`
+    },
+    wrapper() {
+      return emotion.css`
       padding: 30px 40px;
       margin: 0 auto;
       max-width: 1000px;
@@ -59,12 +61,12 @@ export const styles = memoizeStyle({
         padding: 16px;
       }
     `;
-  },
-  content() {
-    return css``;
-  },
-  darkContent(t: Theme) {
-    return css`
+    },
+    content() {
+      return emotion.css``;
+    },
+    darkContent(t: Theme) {
+      return emotion.css`
       h1,
       h2,
       h3,
@@ -126,14 +128,14 @@ export const styles = memoizeStyle({
         border: 1px solid #444;
       }
     `;
-  },
-  header() {
-    return css`
+    },
+    header() {
+      return emotion.css`
       padding: 40px 40px 0 !important;
     `;
-  },
-  sidebar() {
-    return css`
+    },
+    sidebar() {
+      return emotion.css`
       width: 300px;
       background: #41464e;
       font-size: 16px;
@@ -165,19 +167,19 @@ export const styles = memoizeStyle({
         font-weight: normal;
       }
     `;
-  },
-  footer() {
-    return css`
+    },
+    footer() {
+      return emotion.css`
       position: fixed;
       top: 0;
       right: 0;
       width: 149px;
       height: 149px;
       z-index: 999;
     `;
-  },
-  footerLink() {
-    return css`
+    },
+    footerLink() {
+      return emotion.css`
       position: relative;
       right: -37px;
       top: -22px;
@@ -194,5 +196,5 @@ export const styles = memoizeStyle({
       transform: rotate(45deg);
       cursor: pointer;
     `;
-  },
-});
+    },
+  });
diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx
@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import Context from 'react-styleguidist/lib/client/rsg-components/Context';
 import { useStyleGuideContext } from 'react-styleguidist/lib/client/rsg-components/Context/Context';
+import { EmotionContext } from '../../../lib/theming/Emotion';
+import { getStyles } from './StyleGuideWrapper.styles';
 
 import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
-import { cx } from '../../../lib/theming/Emotion';
 import { DARK_THEME } from '../../../lib/theming/themes/DarkTheme';
 import { DEFAULT_THEME_WRAPPER } from '../ThemeSwitcher/constants';
 
-import { styles } from './StyleGuideWrapper.styles';
-
 interface StyleGuideRendererProps {
   children: React.ReactNode;
   hasSidebar: boolean;
@@ -18,6 +17,7 @@ interface StyleGuideRendererProps {
 }
 
 function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: StyleGuideRendererProps) {
+  const emotion = useContext(EmotionContext);
   const { codeRevision, config, slots, displayMode, cssRevision } = useStyleGuideContext();
   const [theme, setTheme] = useState(DEFAULT_THEME_WRAPPER);
   document.body.style.fontFamily = 'Lab Grotesque, Roboto, Helvetica Neue, Arial, sans-serif';
@@ -33,11 +33,15 @@ function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: Style
       root.style.height = '100%';
     }
   }
+
+  const styles = getStyles(emotion);
   return (
     <Context.Provider value={{ theme, setTheme, codeRevision, config, slots, displayMode, cssRevision }}>
-      <div className={cx(styles.root(), { [styles.darkRoot(DARK_THEME)]: isThemeDark })}>
+      <div className={emotion.cx(styles.root(), { [styles.darkRoot(DARK_THEME)]: isThemeDark })}>
         <main className={styles.wrapper()}>
-          <div className={cx(styles.content(), { [styles.darkContent(DARK_THEME)]: isThemeDark })}>{children}</div>
+          <div className={emotion.cx(styles.content(), { [styles.darkContent(DARK_THEME)]: isThemeDark })}>
+            {children}
+          </div>
         </main>
         {hasSidebar && (
           <div data-testid="sidebar" className={styles.sidebar()}>

diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.styles.ts b/packages/react-ui/components/Autocomplete/Autocomplete.styles.ts
@@ -1,16 +1,20 @@
-import { css, memoizeStyle } from '../../lib/theming/Emotion';
+import type { Emotion } from '@emotion/css/create-instance';
+
+import { memoizeStyle } from '../../lib/theming/Emotion';
 import { Theme } from '../../lib/theming/Theme';
 
-export const styles = memoizeStyle({
-  root(t: Theme) {
-    return css`
-      display: inline-block;
-      width: ${t.inputWidth};
-    `;
-  },
-  noPortal() {
-    return css`
+export const getStyles = (emotion: Emotion) =>
+  memoizeStyle({
+    root(t: Theme) {
+      return emotion.css`
+        display: inline-block;
+        width: ${t.inputWidth};
+      `;
+    },
+
+    noPortal() {
+      return emotion.css`
       position: relative;
     `;
-  },
-});
+    },
+  });
diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -1,12 +1,12 @@
 import React, { AriaAttributes, KeyboardEvent } from 'react';
 import PropTypes from 'prop-types';
+import type { Emotion } from '@emotion/css/create-instance';
 
 import { MenuMessage } from '../../internal/MenuMessage';
 import { locale } from '../../lib/locale/decorators';
 import { getRandomID, isNullable } from '../../lib/utils';
-import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { Theme } from '../../lib/theming/Theme';
-import { cx } from '../../lib/theming/Emotion';
+import { EmotionConsumer } from '../../lib/theming/Emotion';
 import { isKeyArrowDown, isKeyArrowUp, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers';
 import { Input, InputProps } from '../Input';
 import { Menu } from '../../internal/Menu';
@@ -23,11 +23,12 @@ import { getDOMRect } from '../../lib/dom/getDOMRect';
 import { SizeProp } from '../../lib/types/props';
 import { Popup } from '../../internal/Popup';
 import { getMenuPositions } from '../../lib/getMenuPositions';
+import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { ZIndex } from '../../internal/ZIndex';
 
-import { styles } from './Autocomplete.styles';
 import { AutocompleteLocale, AutocompleteLocaleHelper } from './locale';
 import { getAutocompleteTheme } from './getAutocompleteTheme';
+import { getStyles } from './Autocomplete.styles';
 
 function match(pattern: string, items: string[]) {
   if (!pattern || !items) {
@@ -163,6 +164,8 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
   };
 
   private theme!: Theme;
+  private emotion!: Emotion;
+  private styles!: ReturnType<typeof getStyles>;
   private readonly locale!: AutocompleteLocale;
   private isMobileLayout!: boolean;
   private opened = false;
@@ -201,18 +204,26 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
   public render() {
     return (
-      <ThemeContext.Consumer>
-        {(theme) => {
-          this.theme = getAutocompleteTheme(theme);
+      <EmotionConsumer>
+        {(emotion) => {
+          this.emotion = emotion;
+          this.styles = getStyles(this.emotion);
           return (
-            <ThemeContext.Provider value={this.theme}>
-              <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>
-                {this.renderMain}
-              </CommonWrapper>
-            </ThemeContext.Provider>
+            <ThemeContext.Consumer>
+              {(theme) => {
+                this.theme = getAutocompleteTheme(theme);
+                return (
+                  <ThemeContext.Provider value={this.theme}>
+                    <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>
+                      {this.renderMain}
+                    </CommonWrapper>
+                  </ThemeContext.Provider>
+                );
+              }}
+            </ThemeContext.Consumer>
           );
         }}
-      </ThemeContext.Consumer>
+      </EmotionConsumer>
     );
   }
   public renderMain = (props: CommonWrapperRestProps<AutocompleteProps>) => {
@@ -253,8 +264,8 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
         <span
           data-tid={AutocompleteDataTids.root}
-          className={cx(styles.root(this.theme), {
-            [styles.noPortal()]: disablePortal,
+          className={this.emotion.cx(this.styles.root(this.theme), {
+            [this.styles.noPortal()]: disablePortal,
           })}
           style={{ width }}
           ref={this.refRootSpan}