Merge pull request #3 from skbkontur/UpdateStyledComponents

Обновил версию styled-components
skbkontur · Dec 18, 2023 · 9e793cb · 9e793cb
2 parents 03ccbba + d95c36f
commit 9e793cb
Show file tree

Hide file tree

Showing 12 changed files with 397 additions and 416 deletions.
diff --git a/.storybook/helpers.tsx b/.storybook/helpers.tsx
@@ -1,15 +1,14 @@
-import { MarkdownThemeProvider } from '../src/styles/styled-components';
 import { StoryContext } from '@storybook/react';
 import { CSSProperties } from 'react';
 import { DEFAULT_MARKDOWN_THEME } from '../src/styles/theme';
 import React from 'react';
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, ThemeProvider } from 'styled-components';
 
 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",
+    font-family: "Lab Grotesque", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
       "Droid Sans", "Helvetica Neue", sans-serif;
   }
 `;
@@ -19,11 +18,11 @@ export const storyBookMainDecorators = (story: Function, context?: StoryContext)
   const theme = { ...DEFAULT_MARKDOWN_THEME, themeMode: globalTheme };
 
   return (
-    <MarkdownThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <GlobalStyles />
       <div id="test-element" style={style}>
         {story()}
       </div>
-    </MarkdownThemeProvider>
+    </ThemeProvider>
   );
 };
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
-  processors: ['stylelint-processor-styled-components'],
-  extends: ['stylelint-config-standard', 'stylelint-config-styled-components'],
+  extends: 'stylelint-config-standard',
+  customSyntax: 'postcss-styled-syntax',
   rules: {
     'property-no-vendor-prefix': null,
     'declaration-colon-newline-after': null,
@@ -14,8 +14,7 @@ module.exports = {
     'alpha-value-notation': null,
     indentation: null,
     'no-descending-specificity': null,
-
-    'selector-list-comma-newline-after': 'always-multi-line',
+    'color-function-notation': 'legacy',
     'selector-pseudo-element-colon-notation': 'single',
   },
 };
diff --git a/index.ts b/index.ts
@@ -1,3 +1,10 @@
+import { ThemeProvider, ThemeConsumer } from 'styled-components';
+
+import { MarkdownThemeConsumerType, MarkdownThemeProviderType } from './src/styles/types';
+
+const MarkdownThemeProvider = ThemeProvider as MarkdownThemeProviderType;
+const MarkdownThemeConsumer = ThemeConsumer as MarkdownThemeConsumerType;
+
 export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
 export { MarkdownCombination } from './src/Markdown/MarkdownHelpers/MarkdownCombination';
 export {
@@ -10,4 +17,4 @@ export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
 export { MarkdownTheme } from './src/styles/theme';
 export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode } from '././src/Markdown/types';
 export { ThemeMode, ColorScheme } from './src/styles/types';
-export { MarkdownThemeProvider, MarkdownThemeConsumer } from './src/styles/styled-components';
+export { MarkdownThemeProvider, MarkdownThemeConsumer };
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
   "license": "UNLICENSED",
   "author": "tsypilov",
   "dependencies": {
-    "@types/styled-components": "5.1.26",
     "@types/turndown": "^5.0.1",
     "@types/uuid": "^9.0.1",
     "react-dropzone": "^14.2.3",
@@ -20,7 +19,7 @@
     "rehype-sanitize": "5.0.1",
     "remark-breaks": "^3.0.3",
     "remark-gfm": "^3.0.1",
-    "styled-components": "5.3.11",
+    "styled-components": "6.1.1",
     "turndown": "^7.1.2",
     "turndown-plugin-gfm": "^1.0.2",
     "uuid": "^9.0.0"
@@ -32,7 +31,7 @@
     "lint-staged": "lint-staged",
     "lint": "eslint --ext=ts,tsx src && yarn stylelint",
     "lint:fix": "eslint --ext=.ts,tsx src --fix",
-    "stylelint": "stylelint 'src/**/*.{tsx,ts}'",
+    "stylelint": "stylelint \"src/**/*.{tsx,ts}\"",
     "prepare": "husky install .husky",
     "storybook": "start-storybook -p 6007 -s public",
     "build-storybook": "build-storybook --quiet",
@@ -94,13 +93,13 @@
     "jest-teamcity-reporter": "0.9.0",
     "lerna": "5.0.0",
     "lint-staged": "^12.3.4",
+    "postcss": "8",
+    "postcss-styled-syntax": "0.5.0",
     "prettier": "2.2.1",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "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"
   },
   "files": [

diff --git a/src/Markdown/Markdown.styled.ts b/src/Markdown/Markdown.styled.ts
@@ -1,8 +1,8 @@
-import { Button, MenuItem, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
+import { Button, MenuItem, ThemeFactory, THEME_2022, ButtonProps } from '@skbkontur/react-ui';
 import { CSSProperties } from 'react';
+import styled, { css, IStyledComponent } from 'styled-components';
 
 import { HorizontalPaddings } from './types';
-import styled, { css } from '../styles/styled-components';
 import { MarkdownTheme } from '../styles/theme';
 
 interface PanelProps extends HorizontalPaddings {
@@ -80,9 +80,9 @@ export const ActionsWrapper = styled.div`
   align-items: center;
 `;
 
-export const MarkdownButtonWrapper = styled(Button)`
+export const MarkdownButtonWrapper: IStyledComponent<'web', ButtonProps> = styled(Button)`
   button {
-    padding: 4px 4px;
+    padding: 4px;
     border: none;
     box-sizing: border-box;
   }

diff --git a/src/Markdown/Markdown.tsx b/src/Markdown/Markdown.tsx
@@ -12,6 +12,7 @@ import React, {
   useState,
 } from 'react';
 import Foco from 'react-foco/lib';
+import { ThemeConsumer, ThemeProvider } from 'styled-components';
 
 import { MENTION_WRAPPER_ID_POSTFIX } from './constants';
 import { useFileLogic } from './Files/Files.logic';
@@ -37,7 +38,6 @@ import { HorizontalPaddings, ViewMode, Token, MarkdownApi } from './types';
 import { Guid } from './utils/guid';
 import { RequestStatus } from './utils/requestStatus';
 import { MarkdownViewer } from '../MarkdownViewer';
-import { MarkdownThemeProvider, MarkdownThemeConsumer } from '../styles/styled-components';
 import { DEFAULT_MARKDOWN_THEME } from '../styles/theme';
 
 export interface MarkdownProps extends MarkdownEditorProps {
@@ -158,7 +158,7 @@ export const Markdown: FC<MarkdownProps> = props => {
   );
 
   return (
-    <MarkdownThemeConsumer>
+    <ThemeConsumer>
       {theme => {
         const defaultTheme = theme ?? DEFAULT_MARKDOWN_THEME;
         const reactUiTheme = getMarkdownReactUiTheme(
@@ -169,14 +169,14 @@ export const Markdown: FC<MarkdownProps> = props => {
         );
 
         return (
-          <MarkdownThemeProvider theme={defaultTheme}>
+          <ThemeProvider theme={defaultTheme}>
             <ThemeContext.Provider value={reactUiTheme}>
               {fullscreen ? renderFullScreen() : content}
             </ThemeContext.Provider>
-          </MarkdownThemeProvider>
+          </ThemeProvider>
         );
       }}
-    </MarkdownThemeConsumer>
+    </ThemeConsumer>
   );
 
   function renderFullScreen() {

diff --git a/src/MarkdownIcons/MarkdownIcons.styled.ts b/src/MarkdownIcons/MarkdownIcons.styled.ts
@@ -1,8 +1,4 @@
-import styled from '../styles/styled-components';
-
-export const Wrapper = styled.div`
-  margin-top: 6px;
-`;
+import styled from 'styled-components';
 
 export const I = styled.i`
   padding: 0 4px;

diff --git a/src/MarkdownViewer/MarkdownViewer.styles.ts b/src/MarkdownViewer/MarkdownViewer.styles.ts
@@ -1,6 +1,5 @@
 import { CSSProperties } from 'react';
-
-import styled from '../styles/styled-components';
+import styled from 'styled-components';
 
 export const Wrapper = styled.div`
   overflow-wrap: break-word;

diff --git a/src/styles/styled-components.ts b/src/styles/styled-components.ts
diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
@@ -0,0 +1,6 @@
+import 'styled-components';
+import { MarkdownTheme } from './theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends MarkdownTheme {}
+}
diff --git a/src/styles/types.ts b/src/styles/types.ts
@@ -1,3 +1,7 @@
+import { Consumer, PropsWithChildren } from 'react';
+
+import { MarkdownTheme } from './theme';
+
 export interface ColorScheme {
   brand: string;
   disabledButton: string;
@@ -8,3 +12,10 @@ export interface ColorScheme {
 }
 
 export type ThemeMode = 'dark' | 'light';
+
+export type MarkdownThemeProviderType = ({
+  children,
+  theme,
+}: PropsWithChildren<{ theme: MarkdownTheme }>) => JSX.Element | null;
+
+export type MarkdownThemeConsumerType = Consumer<MarkdownTheme | undefined>;