feat: wip

skbkontur · May 21, 2024 · 42b91de · 42b91de
1 parent 06c28e1
commit 42b91de
Show file tree

Hide file tree

Showing 215 changed files with 9,480 additions and 8,166 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/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
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
 import Context from 'react-styleguidist/lib/client/rsg-components/Context';
 import { useStyleGuideContext } from 'react-styleguidist/lib/client/rsg-components/Context/Context';
-import { cx } from '../../../lib/theming/Emotion';
-import { styles } from './StyleGuideWrapper.styles';
+import { useEmotion } from '../../../lib/theming/Emotion';
+import { getStyles } from './StyleGuideWrapper.styles';
 import { DARK_THEME } from '../../../lib/theming/themes/DarkTheme';
 import { DEFAULT_THEME_WRAPPER } from '../ThemeSwitcher/constants';
 
@@ -16,6 +16,7 @@ interface StyleGuideRendererProps {
 }
 
 function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: StyleGuideRendererProps) {
+  const emotion = useEmotion();
   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';
@@ -31,11 +32,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,11 +1,14 @@
-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};
-    `;
-  },
-});
+export const getStyles = (emotion: Emotion) =>
+  memoizeStyle({
+    root(t: Theme) {
+      return emotion.css`
+        display: inline-block;
+        width: ${t.inputWidth};
+      `;
+    },
+  });
diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -2,11 +2,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 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 { isKeyArrowDown, isKeyArrowUp, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers';
 import { Input, InputProps } from '../Input';
@@ -23,10 +23,12 @@ import { responsiveLayout } from '../ResponsiveLayout/decorator';
 import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';
 import { getDOMRect } from '../../lib/dom/getDOMRect';
 import { SizeProp } from '../../lib/types/props';
+import { EmotionConsumer } from '../../lib/theming/Emotion';
+import { ThemeContext } from '../../lib/theming/ThemeContext';
 
-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) {
@@ -159,6 +161,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
   };
 
   private theme!: Theme;
+  private emotion!: Emotion;
   private readonly locale!: AutocompleteLocale;
   private isMobileLayout!: boolean;
   private opened = false;
@@ -197,18 +200,25 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
   public render() {
     return (
-      <ThemeContext.Consumer>
-        {(theme) => {
-          this.theme = getAutocompleteTheme(theme);
+      <EmotionConsumer>
+        {(emotion) => {
+          this.emotion = emotion;
           return (
-            <ThemeContext.Provider value={this.theme}>
-              <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-                {this.renderMain}
-              </CommonWrapper>
-            </ThemeContext.Provider>
+            <ThemeContext.Consumer>
+              {(theme) => {
+                this.theme = getAutocompleteTheme(theme);
+                return (
+                  <ThemeContext.Provider value={this.theme}>
+                    <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+                      {this.renderMain}
+                    </CommonWrapper>
+                  </ThemeContext.Provider>
+                );
+              }}
+            </ThemeContext.Consumer>
           );
         }}
-      </ThemeContext.Consumer>
+      </EmotionConsumer>
     );
   }
   public renderMain = (props: CommonWrapperRestProps<AutocompleteProps>) => {
@@ -244,6 +254,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
       ref: this.refInput,
     };
 
+    const styles = getStyles(this.emotion);
     return (
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
         <span