From e4990f444497ba9b6ee4357bb1d814d1f710205a Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sun, 1 Jun 2025 09:27:05 -0400 Subject: [PATCH] Replace styled-components with Emotion in ui --- packages/redux-devtools-ui/.stylelintrc | 7 --- packages/redux-devtools-ui/package.json | 15 ++--- .../src/Button/Button.stories.tsx | 2 +- .../src/Button/styles/common.ts | 6 +- .../src/Button/styles/default.ts | 4 +- .../src/Button/styles/material.ts | 4 +- .../redux-devtools-ui/src/Container/index.tsx | 2 +- .../src/Container/styles/index.ts | 7 +-- .../src/ContextMenu/ContextMenu.stories.tsx | 2 +- .../src/ContextMenu/styles/index.ts | 4 +- .../src/Dialog/styles/default.ts | 4 +- .../src/Dialog/styles/material.ts | 4 +- .../redux-devtools-ui/src/Editor/Editor.tsx | 8 +-- .../src/Editor/styles/index.ts | 6 +- .../src/Form/styles/index.ts | 5 +- .../src/Notification/Notification.stories.tsx | 2 +- .../src/Notification/styles/index.ts | 4 +- .../SegmentedControl.stories.tsx | 2 +- .../src/SegmentedControl/styles/index.ts | 7 +-- .../src/Select/Select.stories.tsx | 2 +- .../src/Slider/Slider.stories.tsx | 2 +- .../src/Slider/styles/common.ts | 5 +- .../src/Slider/styles/default.ts | 4 +- .../src/Slider/styles/material.ts | 4 +- .../src/Tabs/Tabs.stories.tsx | 2 +- .../src/Tabs/styles/common.ts | 2 +- .../src/Tabs/styles/default.ts | 7 +-- .../src/Tabs/styles/material.ts | 7 +-- .../src/Toolbar/Toolbar.stories.tsx | 2 +- .../src/Toolbar/styles/Divider.ts | 5 +- .../src/Toolbar/styles/Spacer.ts | 2 +- .../src/Toolbar/styles/Toolbar.ts | 16 +++-- .../redux-devtools-ui/src/utils/animations.ts | 2 +- .../src/utils/createStyledComponent.ts | 63 ++++++------------- .../src/utils/createThemedComponent.tsx | 8 ++- pnpm-lock.yaml | 37 +++++++++-- 36 files changed, 123 insertions(+), 142 deletions(-) delete mode 100644 packages/redux-devtools-ui/.stylelintrc diff --git a/packages/redux-devtools-ui/.stylelintrc b/packages/redux-devtools-ui/.stylelintrc deleted file mode 100644 index 9e72e47c..00000000 --- a/packages/redux-devtools-ui/.stylelintrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "processors": ["stylelint-processor-styled-components"], - "extends": [ - "stylelint-config-recommended", - "stylelint-config-styled-components" - ] -} diff --git a/packages/redux-devtools-ui/package.json b/packages/redux-devtools-ui/package.json index 6394e803..6ee4f49f 100644 --- a/packages/redux-devtools-ui/package.json +++ b/packages/redux-devtools-ui/package.json @@ -36,7 +36,6 @@ "clean": "rimraf lib storybook-static", "test": "jest", "lint": "eslint .", - "lint:css": "stylelint \"./src/**/*.js\"", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" @@ -64,6 +63,8 @@ "@babel/preset-env": "^7.27.2", "@babel/preset-react": "^7.27.1", "@babel/preset-typescript": "^7.27.1", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", "@storybook/addon-onboarding": "^9.0.2", "@storybook/react-vite": "^9.0.2", "@testing-library/dom": "^10.4.0", @@ -73,7 +74,6 @@ "@types/node": "^22.15.21", "@types/jest": "^29.5.14", "@types/react": "^19.1.6", - "@types/styled-components": "^5.1.34", "babel-loader": "^10.0.0", "csstype": "^3.1.3", "jest": "^29.7.0", @@ -84,19 +84,14 @@ "react-is": "^19.1.0", "rimraf": "^6.0.1", "storybook": "^9.0.2", - "styled-components": "^5.3.11", - "stylelint": "^16.19.1", - "stylelint-config-standard": "^38.0.0", - "stylelint-config-styled-components": "^0.1.1", - "stylelint-processor-styled-components": "^1.10.0", "ts-jest": "^29.3.4", "typescript": "~5.8.3", "vite": "^6.3.5" }, "peerDependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "@types/styled-components": "^5.1.34", - "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "styled-components": "^5.3.11" + "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } } diff --git a/packages/redux-devtools-ui/src/Button/Button.stories.tsx b/packages/redux-devtools-ui/src/Button/Button.stories.tsx index b31dc24f..e5a8e022 100644 --- a/packages/redux-devtools-ui/src/Button/Button.stories.tsx +++ b/packages/redux-devtools-ui/src/Button/Button.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { MdFiberManualRecord } from 'react-icons/md'; import { Meta, StoryObj } from '@storybook/react-vite'; import Button from './'; diff --git a/packages/redux-devtools-ui/src/Button/styles/common.ts b/packages/redux-devtools-ui/src/Button/styles/common.ts index cc2dc519..0ecae4f4 100644 --- a/packages/redux-devtools-ui/src/Button/styles/common.ts +++ b/packages/redux-devtools-ui/src/Button/styles/common.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { fadeIn } from '../../utils/animations'; import colorEffect from '../../utils/color'; import { Mark, Size, TooltipPosition } from '../Button'; @@ -138,7 +138,7 @@ export const commonStyle = ({ theme, mark, size, -}: ThemedStyledProps) => css` +}: CommonStyleProps & { theme: Theme }) => css` display: inline-block; position: relative; flex-shrink: 0; @@ -188,7 +188,7 @@ export const tooltipStyle = ({ tooltipPosition, mark, size, -}: ThemedStyledProps) => css` +}: TooltipStyleProps & { theme: Theme }) => css` ${commonStyle({ theme, mark, size })} &:before { diff --git a/packages/redux-devtools-ui/src/Button/styles/default.ts b/packages/redux-devtools-ui/src/Button/styles/default.ts index 8439f356..c0e11f7a 100644 --- a/packages/redux-devtools-ui/src/Button/styles/default.ts +++ b/packages/redux-devtools-ui/src/Button/styles/default.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { Theme } from '../../themes/default'; export interface StyleProps { @@ -10,7 +10,7 @@ export const style = ({ theme, primary, disabled, -}: ThemedStyledProps) => css` +}: StyleProps & { theme: Theme }) => css` box-sizing: border-box; -webkit-font-smoothing: antialiased; outline: none; diff --git a/packages/redux-devtools-ui/src/Button/styles/material.ts b/packages/redux-devtools-ui/src/Button/styles/material.ts index 5ecb6351..c06e4d75 100644 --- a/packages/redux-devtools-ui/src/Button/styles/material.ts +++ b/packages/redux-devtools-ui/src/Button/styles/material.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { ripple } from '../../utils/animations'; import { StyleProps } from './default'; import { Theme } from '../../themes/default'; @@ -7,7 +7,7 @@ export const style = ({ theme, primary, disabled, -}: ThemedStyledProps) => css` +}: StyleProps & { theme: Theme }) => css` box-sizing: border-box; -webkit-font-smoothing: antialiased; outline: none; diff --git a/packages/redux-devtools-ui/src/Container/index.tsx b/packages/redux-devtools-ui/src/Container/index.tsx index ae7b73dd..5a0a1060 100644 --- a/packages/redux-devtools-ui/src/Container/index.tsx +++ b/packages/redux-devtools-ui/src/Container/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider } from 'styled-components'; +import { ThemeProvider } from '@emotion/react'; import { useTheme, ThemeData } from '../utils/theme'; import { MainContainerWrapper, ContainerWrapper } from './styles'; import { Theme } from '../themes/default'; diff --git a/packages/redux-devtools-ui/src/Container/styles/index.ts b/packages/redux-devtools-ui/src/Container/styles/index.ts index c101c40b..4bb1b681 100644 --- a/packages/redux-devtools-ui/src/Container/styles/index.ts +++ b/packages/redux-devtools-ui/src/Container/styles/index.ts @@ -1,4 +1,4 @@ -import styled, { ThemedStyledProps } from 'styled-components'; +import styled from '@emotion/styled'; import color from '../../utils/color'; import { Theme } from '../../themes/default'; @@ -8,9 +8,8 @@ export const MainContainerWrapper = styled.div` width: 100%; flex-flow: column nowrap; overflow: auto; - ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''} - background-color: ${(props: ThemedStyledProps<{}, Theme>) => - color(props.theme.base00, 'lighten', 0.03)}; + background-color: ${(props: { theme?: Theme }) => + color(props.theme!.base00, 'lighten', 0.03)}; color: ${(props) => props.theme.base07}; font-size: 12px; diff --git a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx index 74d431e8..cf3c5dbf 100644 --- a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx +++ b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; import ContextMenu from './'; import { items } from './data'; diff --git a/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts b/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts index 1555419c..c928d27c 100644 --- a/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts +++ b/packages/redux-devtools-ui/src/ContextMenu/styles/index.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { Theme } from '../../themes/default'; interface StyleProps { @@ -12,7 +12,7 @@ export default ({ left, top, visible, -}: ThemedStyledProps) => css` +}: StyleProps & { theme: Theme }) => css` ${visible ? ` visibility: visible; diff --git a/packages/redux-devtools-ui/src/Dialog/styles/default.ts b/packages/redux-devtools-ui/src/Dialog/styles/default.ts index 664cb452..69e6fd47 100644 --- a/packages/redux-devtools-ui/src/Dialog/styles/default.ts +++ b/packages/redux-devtools-ui/src/Dialog/styles/default.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { Theme } from '../../themes/default'; export interface StyleProps { @@ -10,7 +10,7 @@ export const style = ({ theme, open, fullWidth, -}: ThemedStyledProps) => css` +}: StyleProps & { theme: Theme }) => css` position: fixed; top: 0px; right: 0px; diff --git a/packages/redux-devtools-ui/src/Dialog/styles/material.ts b/packages/redux-devtools-ui/src/Dialog/styles/material.ts index d348518c..e194a69f 100644 --- a/packages/redux-devtools-ui/src/Dialog/styles/material.ts +++ b/packages/redux-devtools-ui/src/Dialog/styles/material.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { StyleProps } from './default'; import { Theme } from '../../themes/default'; @@ -6,7 +6,7 @@ export const style = ({ theme, open, fullWidth, -}: ThemedStyledProps) => css` +}: StyleProps & { theme: Theme }) => css` position: fixed; top: 0px; right: 0px; diff --git a/packages/redux-devtools-ui/src/Editor/Editor.tsx b/packages/redux-devtools-ui/src/Editor/Editor.tsx index d9e1e5c5..1e2b9b46 100644 --- a/packages/redux-devtools-ui/src/Editor/Editor.tsx +++ b/packages/redux-devtools-ui/src/Editor/Editor.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import CodeMirror, { EditorChange } from 'codemirror'; import type { Base16Theme } from 'react-base16-styling'; import { defaultStyle, themedStyle } from './styles'; @@ -16,10 +16,10 @@ import 'codemirror/addon/fold/foldgutter.css'; const EditorContainer = styled.div( '' as unknown as TemplateStringsArray, - ({ theme }: { theme: Theme }) => - theme.scheme === 'default' && theme.light + ({ theme }: { theme?: Base16Theme }) => + theme!.scheme === 'default' && (theme as Theme).light ? defaultStyle - : themedStyle(theme), + : themedStyle(theme!), ); export interface EditorProps { diff --git a/packages/redux-devtools-ui/src/Editor/styles/index.ts b/packages/redux-devtools-ui/src/Editor/styles/index.ts index bfeffcc8..9550e687 100644 --- a/packages/redux-devtools-ui/src/Editor/styles/index.ts +++ b/packages/redux-devtools-ui/src/Editor/styles/index.ts @@ -1,5 +1,5 @@ -import { css } from 'styled-components'; -import { Theme } from '../../themes/default'; +import { css } from '@emotion/react'; +import { Base16Theme } from 'react-base16-styling'; export const defaultStyle = ` height: 100%; @@ -11,7 +11,7 @@ export const defaultStyle = ` } `; -export const themedStyle = (theme: Theme) => css` +export const themedStyle = (theme: Base16Theme) => css` height: 100%; > div { diff --git a/packages/redux-devtools-ui/src/Form/styles/index.ts b/packages/redux-devtools-ui/src/Form/styles/index.ts index f9ad52a1..b8f4ddbe 100644 --- a/packages/redux-devtools-ui/src/Form/styles/index.ts +++ b/packages/redux-devtools-ui/src/Form/styles/index.ts @@ -1,8 +1,7 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { Theme } from '../../themes/default'; -// eslint-disable-next-line @typescript-eslint/no-empty-object-type -export default ({ theme }: ThemedStyledProps<{}, Theme>) => css` +export default ({ theme }: { theme: Theme }) => css` padding: 10px; line-height: 1.846; font-size: 14px; diff --git a/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx b/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx index 0f5f9798..d55aa27b 100644 --- a/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx +++ b/packages/redux-devtools-ui/src/Notification/Notification.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; import Notification from './'; diff --git a/packages/redux-devtools-ui/src/Notification/styles/index.ts b/packages/redux-devtools-ui/src/Notification/styles/index.ts index 509cda52..7b2bcc17 100644 --- a/packages/redux-devtools-ui/src/Notification/styles/index.ts +++ b/packages/redux-devtools-ui/src/Notification/styles/index.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { Theme } from '../../themes/default'; import { Type } from '../Notification'; @@ -19,7 +19,7 @@ interface StyleProps { type: Type; } -export default ({ theme, type }: ThemedStyledProps) => css` +export default ({ theme, type }: StyleProps & { theme: Theme }) => css` display: flex; align-items: flex-start; flex-shrink: 0; diff --git a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx index f7e92933..1b9e5087 100644 --- a/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx +++ b/packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; import SegmentedControl from './'; diff --git a/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts b/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts index 7a48ee50..6a9b95f5 100644 --- a/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts +++ b/packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import color from '../../utils/color'; import { Theme } from '../../themes/default'; @@ -6,10 +6,7 @@ interface StyleProps { disabled: boolean | undefined; } -export default ({ - theme, - disabled, -}: ThemedStyledProps) => css` +export default ({ theme, disabled }: StyleProps & { theme: Theme }) => css` display: flex; flex-shrink: 0; diff --git a/packages/redux-devtools-ui/src/Select/Select.stories.tsx b/packages/redux-devtools-ui/src/Select/Select.stories.tsx index e9c6b3e7..c12b461c 100644 --- a/packages/redux-devtools-ui/src/Select/Select.stories.tsx +++ b/packages/redux-devtools-ui/src/Select/Select.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import Select from './'; import { options } from './options'; import { Meta, StoryObj } from '@storybook/react-vite'; diff --git a/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx b/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx index 1d39d376..27fae999 100644 --- a/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx +++ b/packages/redux-devtools-ui/src/Slider/Slider.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; import Slider from './'; diff --git a/packages/redux-devtools-ui/src/Slider/styles/common.ts b/packages/redux-devtools-ui/src/Slider/styles/common.ts index 20360d03..0ab18a43 100644 --- a/packages/redux-devtools-ui/src/Slider/styles/common.ts +++ b/packages/redux-devtools-ui/src/Slider/styles/common.ts @@ -1,8 +1,7 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { Theme } from '../../themes/default'; -// eslint-disable-next-line @typescript-eslint/no-empty-object-type -export const containerStyle = ({ theme }: ThemedStyledProps<{}, Theme>) => css` +export const containerStyle = ({ theme }: { theme: Theme }) => css` display: flex; align-items: center; diff --git a/packages/redux-devtools-ui/src/Slider/styles/default.ts b/packages/redux-devtools-ui/src/Slider/styles/default.ts index 8b985b9a..3f85e042 100644 --- a/packages/redux-devtools-ui/src/Slider/styles/default.ts +++ b/packages/redux-devtools-ui/src/Slider/styles/default.ts @@ -6,7 +6,7 @@ Based on: http://codepen.io/thebabydino/pen/YPOPxr */ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { prefixSelectors } from '../../utils/autoPrefix'; import { Theme } from '../../themes/default'; @@ -21,7 +21,7 @@ export const style = ({ percent, disabled, withLabel, -}: ThemedStyledProps) => css` +}: StyleProps & { theme: Theme }) => css` display: block; width: 100%; position: relative; diff --git a/packages/redux-devtools-ui/src/Slider/styles/material.ts b/packages/redux-devtools-ui/src/Slider/styles/material.ts index 0bf79701..48fa155a 100644 --- a/packages/redux-devtools-ui/src/Slider/styles/material.ts +++ b/packages/redux-devtools-ui/src/Slider/styles/material.ts @@ -1,4 +1,4 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { prefixSelectors } from '../../utils/autoPrefix'; import color from '../../utils/color'; import { animationCurve } from '../../utils/animations'; @@ -10,7 +10,7 @@ export const style = ({ percent, disabled, withLabel, -}: ThemedStyledProps) => css` +}: StyleProps & { theme: Theme }) => css` display: block; width: 100%; position: relative; diff --git a/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx b/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx index 364b7a4c..24a69b2e 100644 --- a/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx +++ b/packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; import Tabs from './'; import { tabs, simple10Tabs } from './data'; diff --git a/packages/redux-devtools-ui/src/Tabs/styles/common.ts b/packages/redux-devtools-ui/src/Tabs/styles/common.ts index d85259b7..29b5a127 100644 --- a/packages/redux-devtools-ui/src/Tabs/styles/common.ts +++ b/packages/redux-devtools-ui/src/Tabs/styles/common.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { Position } from '../Tabs'; interface StyleProps { diff --git a/packages/redux-devtools-ui/src/Tabs/styles/default.ts b/packages/redux-devtools-ui/src/Tabs/styles/default.ts index 1d3da379..3bd52d9f 100644 --- a/packages/redux-devtools-ui/src/Tabs/styles/default.ts +++ b/packages/redux-devtools-ui/src/Tabs/styles/default.ts @@ -1,14 +1,11 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { Theme } from '../../themes/default'; export interface StyleProps { main: boolean | undefined; } -export const style = ({ - theme, - main, -}: ThemedStyledProps) => css` +export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css` display: flex; flex: 0 0 1; padding-left: 1px; diff --git a/packages/redux-devtools-ui/src/Tabs/styles/material.ts b/packages/redux-devtools-ui/src/Tabs/styles/material.ts index a55bda86..f44ce842 100644 --- a/packages/redux-devtools-ui/src/Tabs/styles/material.ts +++ b/packages/redux-devtools-ui/src/Tabs/styles/material.ts @@ -1,12 +1,9 @@ -import { css, ThemedStyledProps } from 'styled-components'; +import { css } from '@emotion/react'; import { ripple } from '../../utils/animations'; import { Theme } from '../../themes/default'; import { StyleProps } from './default'; -export const style = ({ - theme, - main, -}: ThemedStyledProps) => css` +export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css` display: flex; flex: 0 0 1; padding-left: 1px; diff --git a/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx b/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx index 64a13d5f..1cc8f462 100644 --- a/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx +++ b/packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react-vite'; import { MdPlayArrow } from 'react-icons/md'; import { MdFiberManualRecord } from 'react-icons/md'; diff --git a/packages/redux-devtools-ui/src/Toolbar/styles/Divider.ts b/packages/redux-devtools-ui/src/Toolbar/styles/Divider.ts index 9838c56d..2f109eda 100644 --- a/packages/redux-devtools-ui/src/Toolbar/styles/Divider.ts +++ b/packages/redux-devtools-ui/src/Toolbar/styles/Divider.ts @@ -1,7 +1,8 @@ -import styled from 'styled-components'; +import styled from '@emotion/styled'; +import { Theme } from '../../themes/default'; const Divider = styled.div` - background-color: ${(props) => props.theme.base02}; + background-color: ${(props: { theme?: Theme }) => props.theme!.base02}; box-shadow: 1px 1px 2px ${(props) => props.theme.base00}; height: ${(props) => props.theme.inputHeight || '30'}px; width: 1px; diff --git a/packages/redux-devtools-ui/src/Toolbar/styles/Spacer.ts b/packages/redux-devtools-ui/src/Toolbar/styles/Spacer.ts index 73068d5b..be6b9820 100644 --- a/packages/redux-devtools-ui/src/Toolbar/styles/Spacer.ts +++ b/packages/redux-devtools-ui/src/Toolbar/styles/Spacer.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from '@emotion/styled'; const Spacer = styled.div` flex-grow: 1; diff --git a/packages/redux-devtools-ui/src/Toolbar/styles/Toolbar.ts b/packages/redux-devtools-ui/src/Toolbar/styles/Toolbar.ts index 5ca7c7c7..80c9231b 100644 --- a/packages/redux-devtools-ui/src/Toolbar/styles/Toolbar.ts +++ b/packages/redux-devtools-ui/src/Toolbar/styles/Toolbar.ts @@ -1,4 +1,4 @@ -import styled, { ThemedStyledInterface } from 'styled-components'; +import styled from '@emotion/styled'; import type { Base16Theme } from 'react-base16-styling'; import * as CSS from 'csstype'; @@ -11,11 +11,9 @@ export interface Props { noBorder?: boolean; } -const Toolbar = ( - styled as ThemedStyledInterface< - Base16Theme & { fontFamily?: CSS.Property.FontFamily } - > -).div` +const Toolbar = styled.div< + Props & { theme?: Base16Theme & { fontFamily?: CSS.Property.FontFamily } } +>` display: flex; flex-shrink: 0; box-sizing: border-box; @@ -30,11 +28,11 @@ const Toolbar = ( position: relative; ${({ borderPosition, theme }) => borderPosition && `border-${borderPosition}: 1px solid ${theme.base02};`} - + & > div { margin: auto ${(props) => (props.noBorder ? '0' : '1px;')}; } - + & button { border-radius: 0; ${(props) => props.noBorder && 'border-color: transparent;'} @@ -47,7 +45,7 @@ const Toolbar = ( text-align: left; margin: auto 1px; flex-grow: 1; - + .Select-control { cursor: pointer; border-radius: 0 !important; diff --git a/packages/redux-devtools-ui/src/utils/animations.ts b/packages/redux-devtools-ui/src/utils/animations.ts index da6db22b..f1d60830 100644 --- a/packages/redux-devtools-ui/src/utils/animations.ts +++ b/packages/redux-devtools-ui/src/utils/animations.ts @@ -1,4 +1,4 @@ -import { css, keyframes } from 'styled-components'; +import { css, keyframes } from '@emotion/react'; import { Theme } from '../themes/default'; export const spin = keyframes` diff --git a/packages/redux-devtools-ui/src/utils/createStyledComponent.ts b/packages/redux-devtools-ui/src/utils/createStyledComponent.ts index 5f44632e..c2f2d2b9 100644 --- a/packages/redux-devtools-ui/src/utils/createStyledComponent.ts +++ b/packages/redux-devtools-ui/src/utils/createStyledComponent.ts @@ -1,53 +1,29 @@ import React from 'react'; import styled, { - InterpolationFunction, + FunctionInterpolation, StyledComponent, - StyledComponentPropsWithRef, - ThemedStyledInterface, - ThemedStyledProps, -} from 'styled-components'; +} from '@emotion/styled'; +import { PropsOf } from '@emotion/react'; import type { Base16Theme } from 'react-base16-styling'; import getDefaultTheme, { Theme } from '../themes/default'; import { ThemeFromProvider } from './theme'; -type StyleFunction< - C extends keyof React.JSX.IntrinsicElements | React.ComponentType, - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - O extends object = {}, -> = InterpolationFunction< - ThemedStyledProps & O, Theme> ->; +type StyleFunction = FunctionInterpolation; -interface StylesObject< - C extends keyof React.JSX.IntrinsicElements | React.ComponentType, - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - O extends object = {}, -> { - [type: string]: StyleFunction; +interface StylesObject { + [type: string]: StyleFunction; } -type Styles< - C extends keyof React.JSX.IntrinsicElements | React.ComponentType, - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - O extends object = {}, -> = StylesObject | StyleFunction; +type Styles = StylesObject | StyleFunction; -function isStylesObject< - C extends keyof React.JSX.IntrinsicElements | React.ComponentType, - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - O extends object = {}, ->(styles: Styles): styles is StylesObject { +function isStylesObject( + styles: Styles, +): styles is StylesObject { return typeof styles === 'object'; } -const getStyle = < - C extends keyof React.JSX.IntrinsicElements | React.ComponentType, - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - O extends object = {}, ->( - styles: Styles, - type: string, -) => (isStylesObject(styles) ? styles[type] || styles.default : styles); +const getStyle = (styles: Styles, type: string) => + isStylesObject(styles) ? styles[type] || styles.default : styles; function isThemeFromProvider( theme: Theme | Base16Theme, @@ -57,14 +33,15 @@ function isThemeFromProvider( export default function createStyledComponent< C extends keyof React.JSX.IntrinsicElements | React.ComponentType, - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - O extends object = {}, + O extends object, >( - styles: Styles, + styles: Styles & O & { theme: Theme }>, component?: C, -): StyledComponent { - return (styled as ThemedStyledInterface)((component || 'div') as C)` - ${(props: ThemedStyledProps & O, Theme>) => +): StyledComponent & O & { theme?: Theme | Base16Theme }> { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return styled((component || 'div') as C)` + ${(props: PropsOf & { theme: Theme | Base16Theme }) => isThemeFromProvider(props.theme as Theme | Base16Theme) ? getStyle(styles, props.theme.type as string) : // used outside of container (theme provider) @@ -75,7 +52,7 @@ export default function createStyledComponent< ...props, theme: getDefaultTheme(props.theme as Base16Theme), })} - ` as StyledComponent; + ` as StyledComponent & O & { theme?: Theme | Base16Theme }>; } // TODO: memoize it? diff --git a/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx b/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx index 02ec5f01..f6afcefe 100644 --- a/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx +++ b/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { withTheme } from 'styled-components'; +import { withTheme } from '@emotion/react'; import type { Base16Theme } from 'react-base16-styling'; import getDefaultTheme, { Theme } from '../themes/default'; @@ -8,10 +8,14 @@ export default >( ? C : never, ) => { - return withTheme((props) => { + return withTheme((props: { theme?: Theme }) => { return props.theme && props.theme.type ? ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore ) : ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore =16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + '@emotion/stylis@0.8.5': resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==} @@ -11626,6 +11636,21 @@ snapshots: '@emotion/sheet@1.4.0': {} + '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.6)(react@19.1.0))(@types/react@19.1.6)(react@19.1.0)': + dependencies: + '@babel/runtime': 7.27.1 + '@emotion/babel-plugin': 11.13.5 + '@emotion/is-prop-valid': 1.3.1 + '@emotion/react': 11.14.0(@types/react@19.1.6)(react@19.1.0) + '@emotion/serialize': 1.3.3 + '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.0) + '@emotion/utils': 1.4.2 + react: 19.1.0 + optionalDependencies: + '@types/react': 19.1.6 + transitivePeerDependencies: + - supports-color + '@emotion/stylis@0.8.5': {} '@emotion/unitless@0.10.0': {}