Emoji picker enhancements dark screenshots

.storybook/helpers.tsx

@@ -1,27 +1,41 @@
 import { StoryContext } from '@storybook/react';
 import React, { CSSProperties } from 'react';
-import { DEFAULT_MARKDOWN_THEME } from '../src/styles/theme';
+import {
+  DEFAULT_MARKDOWN_DARK_THEME,
+  DEFAULT_MARKDOWN_THEME,
+  MarkdownTheme,
+  MarkdownThemeProvider,
+} from '../src/styles/theme';
 import { createGlobalStyle, ThemeProvider } from '../src/styles/styled-components';
+import { THEME_2022, THEME_2022_DARK } from '@skbkontur/react-ui';
 
 const style: CSSProperties = { padding: 4, boxSizing: 'border-box' };
 
 const GlobalStyles = createGlobalStyle`
   body {
     font-family: "Lab Grotesque", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
       "Droid Sans", "Helvetica Neue", sans-serif;
+
+  background: ${p => (p.theme.themeMode === 'light' ? '#fff' : '#2f2f2f')};
   }
 `;
 
 export const storyBookMainDecorators = (story: Function, context?: StoryContext) => {
   const globalTheme = context?.globals?.theme;
-  const theme = { ...DEFAULT_MARKDOWN_THEME, themeMode: globalTheme };
+  const isLightTheme = globalTheme === 'light';
+  const theme: MarkdownTheme = {
+    ...(isLightTheme ? DEFAULT_MARKDOWN_THEME : DEFAULT_MARKDOWN_DARK_THEME),
+    reactUiTheme: isLightTheme ? THEME_2022 : THEME_2022_DARK,
+  };
 
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyles />
-      <div id="test-element" style={style}>
-        {story()}
-      </div>
-    </ThemeProvider>
+    <MarkdownThemeProvider value={theme}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyles />
+        <div id="test-element" style={style}>
+          {story()}
+        </div>
+      </ThemeProvider>
+    </MarkdownThemeProvider>
   );
 };

.storybook/preview.ts

@@ -23,9 +23,6 @@ const preview: Preview = {
         icon: 'circlehollow',
         items: ['light', 'dark'],
       },
-      initialGlobals: {
-        theme: 'light',
-      },
     },
   },
   initialGlobals: {

.stylelintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['stylelint-config-standard', 'stylelint-config-styled-components'],
+  extends: ['stylelint-config-standard'],
   customSyntax: 'postcss-styled-syntax',
   rules: {
     'property-no-vendor-prefix': null,
@@ -14,8 +14,11 @@ module.exports = {
     'alpha-value-notation': null,
     indentation: null,
     'no-descending-specificity': null,
+    'selector-class-pattern': null,
+    'media-feature-range-notation': 'prefix',
+    'declaration-block-no-redundant-longhand-properties': [true, { ignoreShorthands: ['gap', 'grid-gap'] }],
     'color-function-notation': 'legacy',
-    'selector-list-comma-newline-after': 'always-multi-line',
     'selector-pseudo-element-colon-notation': 'single',
+    'media-query-no-invalid': null,
   },
 };

package.json

@@ -97,14 +97,13 @@
     "jest-teamcity-reporter": "0.9.0",
     "lerna": "5.0.0",
     "lint-staged": "12.3.4",
+    "postcss-styled-syntax": "0.5.0",
     "prettier": "2.2.1",
     "react": "17",
     "react-dom": "17",
     "storybook": "8.2.8",
-    "stylelint": "13.13.1",
-    "stylelint-config-standard": "22.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
+    "stylelint": "15.11.0",
+    "stylelint-config-standard": "34.0.0",
     "typescript": "4.9.4",
     "vite": "5.4.11"
   },

src/Markdown/Emoji/Emoji.styled.ts

@@ -1,15 +1,22 @@
+import { getColor } from './helpers';
 import styled from '../../styles/styled-components';
 
 /**
  * Все доступные переменные для кастомизации стилей можно посмотреть здесь:
  * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
  */
 
+/* stylelint-disable function-name-case */
 export const EmojiPickerWrapper = styled.div`
   em-emoji-picker {
     --font-family: inherit;
     --shadow: unset;
-    --rgb-accent: ${p => p.theme.colors.brand};
-    --color-border: rgba(0, 0, 0, 0);
+    --rgb-accent: ${({ theme }) => getColor(theme.colors.brand)};
+    --color-border: ${({ theme }) => getColor(theme.colors.grayDefault)};
+    --rgb-background: ${({ theme }) => getColor(theme.colors.emojiPickerBackgroundRGBColor)};
+    --rgb-input: ${({ theme }) => getColor(theme.colors.emojiPickerBackgroundRGBColor)};
+    --rgb-color: ${({ theme }) => getColor(theme.colors.text)};
+
+    max-height: 300px;
   }
 `;

src/Markdown/Emoji/helpers.ts

@@ -0,0 +1,6 @@
+const RGB_KEY = 'rgb';
+const regExp = /\((.*)\)/;
+const rgbDefaultWhite = '255, 255, 255';
+
+export const getColor = (color: string) =>
+  color.startsWith(RGB_KEY) ? color.match(regExp)?.pop() ?? rgbDefaultWhite : `from ${color} r g b / 1`;

src/Markdown/Markdown.creevey.ts

@@ -65,12 +65,15 @@ kind('Markdown', () => {
         .sendKeys('b')
         .perform();
       const boldFromKeyboard = await this.captureElement?.takeScreenshot();
+      await this.browser.actions().click(buttons[12]).perform();
+      const openedEmojiPicker = await this.captureElement?.takeScreenshot();
       await this.expect({
         openedDropdown,
         h1FromButton,
         h1FromKeyboard,
         boldFromButton,
         boldFromKeyboard,
+        openedEmojiPicker,
       }).to.matchImages();
     });
   });

src/Markdown/Markdown.styled.ts

@@ -230,7 +230,7 @@ export const getMarkdownReactUiTheme = (
       checkboxShadowActive: `0 0 0 1px ${colors.grayDefault}`,
       checkboxCheckedColor: colors.grayDefault,
       hintFontSize: elementsFontSize,
-      hintColor: themeMode === 'light' ? colors.white : colors.grayDefault,
+      hintColor: colors.textInverse,
       selectPaddingXSmall: '8px',
       selectLineHeightSmall: '24px',
       dropdownBorderWidth: '0',

src/Markdown/Markdown.tsx

@@ -52,6 +52,8 @@ export interface MarkdownProps extends MarkdownEditorProps {
   hideActionsOptions?: HideActionsOptions;
   /** Превьювер мардауна, по умолчанию используется MarkdownViewer */
   markdownViewer?: (value: string) => ReactNode;
+  /** Колбек, срабатывает на изменение режима редактирования или просмотра */
+  onChangeViewMode?: (mode: ViewMode) => void;
   /** Padding markdownActions (кнопки помощи форматирования текста), включает режим panel */
   panelHorizontalPadding?: number;
   /** Url для профиля сотрудника  */
@@ -76,6 +78,7 @@ export const Markdown: FC<MarkdownProps> = props => {
     borderless,
     showShotKeys = true,
     hideActionsOptions,
+    onChangeViewMode,
     ...textareaProps
   } = props;
 
@@ -144,7 +147,7 @@ export const Markdown: FC<MarkdownProps> = props => {
             hideOptions={hideActionsOptions}
             hasFilesApi={!!api?.fileDownloadApi && !!api?.fileUploadApi}
             onOpenFileDialog={open}
-            onChangeViewMode={setViewMode}
+            onChangeViewMode={handleChangeViewMode}
             onClickFullscreen={handleClickFullscreen}
             onSelectEmoji={onSelectEmoji}
           />
@@ -238,6 +241,11 @@ export const Markdown: FC<MarkdownProps> = props => {
     }
   }
 
+  function handleChangeViewMode(mode: ViewMode) {
+    setViewMode(mode);
+    onChangeViewMode?.(mode);
+  }
+
   function handleSelectUser(login: string, name: string) {
     if (textareaRef.current && mention) {
       const htmlTextArea = (textareaRef.current as any) as HTMLTextAreaElement;

src/Markdown/MarkdownActions.tsx

@@ -68,7 +68,7 @@ export const MarkdownActions: FC<Props> = ({
         <ActionsWrapper>
           {!hideOptions?.heading && (
             <MarkdownDropdown>
-              <Dropdown disablePortal disabled={isPreviewMode} menuWidth={280} caption="Заголовок">
+              <Dropdown disablePortal disabled={isPreviewMode} menuWidth={300} caption="Заголовок">
                 {markdownHelpHeaders.map((helper, idx) => (
                   <MarkdownMenuItem
                     key={idx}

src/Markdown/MarkdownMention.tsx

@@ -53,7 +53,7 @@ export const MarkdownMention: FC<Props> = ({ value, onUserSelect, x, y, getUsers
 
   return createPortal(
     <ZIndex priority="Toast" style={getMarkdownMentionStyle(x, y)}>
-      <Menu ref={menuRef} preventWindowScroll hasShadow maxHeight={300} width={300}>
+      <Menu ref={menuRef} preventWindowScroll hasShadow maxHeight={300} width={320}>
         {users?.map(user => (
           <MentionMenuItem key={user.id} onClick={() => onUserSelect(user?.login ?? '', user.name)}>
             <UserWrapper>

src/Markdown/__stories__/Markdown.stories.tsx

@@ -1,12 +1,10 @@
-import { Modal, SizeProp, THEME_2022 } from '@skbkontur/react-ui';
+import { Modal, SizeProp } from '@skbkontur/react-ui';
 import { text, ValidationContainer } from '@skbkontur/react-ui-validations';
 import { Meta, StoryFn } from '@storybook/react';
 import React, { CSSProperties, useState } from 'react';
 
 import { a11yRules } from '../../../a11y/rules';
 import { MarkdownViewer } from '../../MarkdownViewer';
-import { MarkdownThemeProvider } from '../../styles/theme';
-import { DEFAULT_MARKDOWN_THEME } from '../../styles/theme';
 import { allVariantsMarkdownMock, emojiMarkdownMock } from '../__mocks__/markdown.mock';
 import { Markdown } from '../Markdown';
 import { MarkdownApi, RefItem, User } from '../types';
@@ -77,29 +75,12 @@ export const InModal: StoryFn = () => {
   const [value, setValue] = useState<string>('');
 
   return (
-    <MarkdownThemeProvider
-      value={{
-        reactUiTheme: THEME_2022,
-        themeMode: 'light',
-        colors: {
-          grayDefault: 'black',
-          link: 'black',
-          panelBg: 'black',
-          disabledButton: 'black',
-          white: 'white',
-          brand: 'black',
-        },
-        elementsFontSize: '14px',
-        elementsLineHeight: '20px',
-      }}
-    >
-      <Modal width={600}>
-        <Modal.Header>In Modal</Modal.Header>
-        <Modal.Body>
-          <Markdown api={apiMock} value={value} maxLength={50000} onValueChange={setValue} />
-        </Modal.Body>
-      </Modal>
-    </MarkdownThemeProvider>
+    <Modal width={600}>
+      <Modal.Header>In Modal</Modal.Header>
+      <Modal.Body>
+        <Markdown api={apiMock} value={value} maxLength={50000} onValueChange={setValue} />
+      </Modal.Body>
+    </Modal>
   );
 };
 

src/styles/theme.ts

@@ -14,18 +14,36 @@ export interface MarkdownTheme {
 
 export const DEFAULT_MARKDOWN_THEME: MarkdownTheme = {
   colors: {
-    white: '#fff',
+    text: '#222',
     brand: '#e76f57',
     grayDefault: '#858585',
     disabledButton: '#adadad',
     panelBg: '#d6d6d6',
     link: '#51adff',
+    textInverse: '#fff',
+    emojiPickerBackgroundRGBColor: 'rgb(255,255,255, 0)',
   },
   elementsFontSize: '16px',
   elementsLineHeight: '24px',
   themeMode: 'light',
 };
 
+export const DEFAULT_MARKDOWN_DARK_THEME: MarkdownTheme = {
+  colors: {
+    text: '#fff',
+    brand: '#e76f57',
+    grayDefault: '#858585',
+    disabledButton: '#adadad',
+    panelBg: '#d6d6d6',
+    link: '#51adff',
+    textInverse: '#222',
+    emojiPickerBackgroundRGBColor: 'rgb(0,0,0,0)',
+  },
+  elementsFontSize: '16px',
+  elementsLineHeight: '24px',
+  themeMode: 'dark',
+};
+
 export const MarkdownThemeContext = createContext<MarkdownTheme>(DEFAULT_MARKDOWN_THEME);
 
 export const MarkdownThemeProvider = MarkdownThemeContext.Provider;

src/styles/types.ts

@@ -1,10 +1,12 @@
 export interface ColorScheme {
   brand: string;
   disabledButton: string;
+  emojiPickerBackgroundRGBColor: string;
   grayDefault: string;
   link: string;
   panelBg: string;
-  white: string;
+  text: string;
+  textInverse: string;
 }
 
 export type ThemeMode = 'dark' | 'light';