diff --git a/packages/react-base16-styling/src/themes/index.ts b/packages/react-base16-styling/src/themes/index.ts index 8b8950ed..2f0dd810 100644 --- a/packages/react-base16-styling/src/themes/index.ts +++ b/packages/react-base16-styling/src/themes/index.ts @@ -25,6 +25,7 @@ import { default as isotope } from './isotope.js'; import { default as marrakesh } from './marrakesh.js'; import { default as mocha } from './mocha.js'; import { default as monokai } from './monokai.js'; +import { default as nicinabox } from './nicinabox'; import { default as ocean } from './ocean.js'; import { default as paraiso } from './paraiso.js'; import { default as pop } from './pop.js'; @@ -85,6 +86,7 @@ export const base16Themes = { marrakesh, mocha, monokai, + nicinabox, ocean, paraiso, pop, diff --git a/packages/react-base16-styling/src/themes/nicinabox.ts b/packages/react-base16-styling/src/themes/nicinabox.ts new file mode 100644 index 00000000..e688bbab --- /dev/null +++ b/packages/react-base16-styling/src/themes/nicinabox.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'nicinabox', + author: 'nicinabox (http://github.com/nicinabox)', + base00: '#2A2F3A', + base01: '#3C444F', + base02: '#4F5A65', + base03: '#BEBEBE', + base04: '#b0b0b0', // based on ocean theme + base05: '#d0d0d0', // based on ocean theme + base06: '#FFFFFF', + base07: '#f5f5f5', // based on ocean theme + base08: '#fb9fb1', // based on ocean theme + base09: '#FC6D24', + base0A: '#ddb26f', // based on ocean theme + base0B: '#A1C659', + base0C: '#12cfc0', // based on ocean theme + base0D: '#6FB3D2', + base0E: '#D381C3', + base0F: '#deaf8f' // based on ocean theme +}; diff --git a/packages/redux-devtools-chart-monitor/package.json b/packages/redux-devtools-chart-monitor/package.json index 3bafde36..89d1670b 100644 --- a/packages/redux-devtools-chart-monitor/package.json +++ b/packages/redux-devtools-chart-monitor/package.json @@ -40,10 +40,9 @@ }, "dependencies": { "@babel/runtime": "^7.24.1", - "@types/redux-devtools-themes": "^1.0.3", "d3-state-visualizer": "^3.0.0", "deepmerge": "^4.3.1", - "redux-devtools-themes": "^1.0.0" + "react-base16-styling": "^0.9.1" }, "devDependencies": { "@babel/cli": "^7.24.1", diff --git a/packages/redux-devtools-chart-monitor/src/Chart.tsx b/packages/redux-devtools-chart-monitor/src/Chart.tsx index e9797b00..10a13d50 100644 --- a/packages/redux-devtools-chart-monitor/src/Chart.tsx +++ b/packages/redux-devtools-chart-monitor/src/Chart.tsx @@ -1,9 +1,10 @@ import React, { Component, createRef } from 'react'; import { tree } from 'd3-state-visualizer'; import type { Options } from 'd3-state-visualizer'; +import { base16Themes } from 'react-base16-styling'; +import type { Base16Theme } from 'react-base16-styling'; import { Action, Dispatch } from 'redux'; import { LiftedAction, LiftedState } from '@redux-devtools/core'; -import * as themes from 'redux-devtools-themes'; import { ChartMonitorState } from './reducers'; const wrapperStyle = { @@ -17,7 +18,7 @@ export interface Props> dispatch: Dispatch>; preserveScrollTop: boolean; select: (state: S) => unknown; - theme: keyof typeof themes | themes.Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; invertTheme: boolean; state: S | null; diff --git a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx index 27004292..78bdb7e7 100644 --- a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx +++ b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx @@ -1,5 +1,6 @@ import React, { CSSProperties, PureComponent } from 'react'; -import * as themes from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; +import type { Base16Theme } from 'react-base16-styling'; import { ActionCreators, LiftedAction, @@ -25,7 +26,7 @@ const styles: { container: CSSProperties } = { }, }; -function invertColors(theme: themes.Base16Theme) { +function invertColors(theme: Base16Theme) { return { ...theme, base00: theme.base07, @@ -45,7 +46,7 @@ export interface ChartMonitorProps> dispatch: Dispatch>; preserveScrollTop: boolean; select: (state: S) => unknown; - theme: keyof typeof themes | themes.Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; invertTheme: boolean; defaultIsVisible?: boolean; @@ -89,14 +90,18 @@ class ChartMonitor> extends PureComponent< return invertTheme ? invertColors(theme) : theme; } - if (typeof themes[theme] !== 'undefined') { - return invertTheme ? invertColors(themes[theme]) : themes[theme]; + if (typeof base16Themes[theme] !== 'undefined') { + return invertTheme + ? invertColors(base16Themes[theme]) + : base16Themes[theme]; } console.warn( 'DevTools theme ' + theme + ' not found, defaulting to nicinabox', ); - return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox; + return invertTheme + ? invertColors(base16Themes.nicinabox) + : base16Themes.nicinabox; } getChartOptions(props = this.props): Props { diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/package.json b/packages/redux-devtools-inspector-monitor-trace-tab/package.json index 27ecccca..ad48f787 100644 --- a/packages/redux-devtools-inspector-monitor-trace-tab/package.json +++ b/packages/redux-devtools-inspector-monitor-trace-tab/package.json @@ -36,7 +36,7 @@ "anser": "^2.1.1", "html-entities": "^2.5.2", "path-browserify": "^1.0.1", - "redux-devtools-themes": "^1.0.0", + "react-base16-styling": "^0.9.1", "source-map": "^0.5.7" }, "devDependencies": { @@ -57,7 +57,6 @@ "@types/node": "^20.11.30", "@types/path-browserify": "^1.0.2", "@types/react": "^18.2.72", - "@types/redux-devtools-themes": "^1.0.3", "@types/source-map": "0.5.2", "@typescript-eslint/eslint-plugin": "^7.4.0", "@typescript-eslint/parser": "^7.4.0", diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx index 07e81b64..944799c7 100644 --- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx +++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx @@ -6,7 +6,9 @@ */ import React, { Component, CSSProperties, ReactNode } from 'react'; -import { nicinabox as theme } from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; + +const theme = base16Themes.nicinabox; const _collapsibleStyle: CSSProperties = { color: theme.base06, diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx index f5efb144..135ce817 100644 --- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx +++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx @@ -8,11 +8,13 @@ import React, { Component, CSSProperties } from 'react'; import CodeBlock from './StackFrameCodeBlock'; import { getPrettyURL } from '../utils/getPrettyURL'; -import { nicinabox as theme } from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; import type { StackFrame as StackFrameType } from '../utils/stack-frame'; import type { ErrorLocation } from '../utils/parseCompileError'; +const theme = base16Themes.nicinabox; + const linkStyle: CSSProperties = { fontSize: '0.9em', marginBottom: '0.9em', diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx index e599a337..246a137d 100644 --- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx +++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx @@ -13,7 +13,9 @@ import { ScriptLine } from '../utils/stack-frame'; import generateAnsiHTML from '../utils/generateAnsiHTML'; import { codeFrameColumns } from '@babel/code-frame'; -import { nicinabox as theme } from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; + +const theme = base16Themes.nicinabox; interface StackFrameCodeBlockPropsType { lines: ScriptLine[]; diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/generateAnsiHTML.ts b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/generateAnsiHTML.ts index c8a64ff2..39e91fd6 100644 --- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/generateAnsiHTML.ts +++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/generateAnsiHTML.ts @@ -6,9 +6,11 @@ */ import Anser from 'anser'; -import { nicinabox as theme } from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; import { encode } from 'html-entities'; +const theme = base16Themes.nicinabox; + const anserMap = { 'ansi-bright-black': theme.base03, 'ansi-bright-yellow': theme.base0A, diff --git a/packages/redux-devtools-inspector-monitor/demo/package.json b/packages/redux-devtools-inspector-monitor/demo/package.json index ba68919f..94fa9351 100644 --- a/packages/redux-devtools-inspector-monitor/demo/package.json +++ b/packages/redux-devtools-inspector-monitor/demo/package.json @@ -14,10 +14,10 @@ "@redux-devtools/core": "^4.0.0", "@redux-devtools/dock-monitor": "^4.0.0", "@redux-devtools/inspector-monitor": "^6.0.0", - "base16": "^1.0.0", "immutable": "^4.3.5", "lodash.shuffle": "^4.2.0", "react": "^18.2.0", + "react-base16-styling": "^0.9.1", "react-bootstrap": "^2.10.2", "react-dom": "^18.2.0", "react-redux": "^8.1.3", @@ -30,7 +30,6 @@ "@babel/preset-env": "^7.24.3", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@types/base16": "^1.0.5", "@types/lodash.shuffle": "^4.2.9", "@types/node": "^20.11.30", "@types/react": "^18.2.72", diff --git a/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx index 7774a6ed..90fd7d29 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx +++ b/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx @@ -9,7 +9,7 @@ import Form from 'react-bootstrap/Form'; import Col from 'react-bootstrap/Col'; import InputGroup from 'react-bootstrap/InputGroup'; import Row from 'react-bootstrap/Row'; -import * as base16 from 'base16'; +import { base16Themes } from 'react-base16-styling'; import { inspectorThemes } from '@redux-devtools/inspector-monitor'; import { useLocation, useNavigate } from 'react-router-dom'; import getOptions, { Options } from './getOptions'; @@ -92,10 +92,10 @@ const themeOptions = [ label: inspectorThemes[value as keyof typeof inspectorThemes].scheme, })), null, - ...Object.keys(base16) + ...Object.keys(base16Themes) .map((value) => ({ value, - label: base16[value as keyof typeof base16].scheme, + label: base16Themes[value as keyof typeof base16Themes].scheme, })) .filter((opt) => opt.label), ]; diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index 32b57a8d..1f60c842 100644 --- a/packages/redux-devtools-inspector-monitor/package.json +++ b/packages/redux-devtools-inspector-monitor/package.json @@ -41,7 +41,6 @@ "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", "@types/lodash": "^4.17.0", - "@types/redux-devtools-themes": "^1.0.3", "dateformat": "^5.0.3", "hex-rgba": "^1.0.2", "immutable": "^4.3.5", @@ -49,8 +48,7 @@ "jsondiffpatch": "^0.6.0", "lodash.debounce": "^4.0.8", "react-base16-styling": "^0.9.1", - "react-json-tree": "^0.18.0", - "redux-devtools-themes": "^1.0.0" + "react-json-tree": "^0.18.0" }, "devDependencies": { "@babel/cli": "^7.24.1", diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx index 3427fb2d..8d72be33 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import { Action } from 'redux'; import type { LabelRenderer } from 'react-json-tree'; import { PerformAction } from '@redux-devtools/core'; diff --git a/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx b/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx index 0ec2d40d..71a172ce 100644 --- a/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx +++ b/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import { ActionCreators, LiftedAction, diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx index c229a336..b186f508 100644 --- a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx +++ b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx @@ -3,7 +3,7 @@ import { JSONTree } from 'react-json-tree'; import type { LabelRenderer, ShouldExpandNodeInitially } from 'react-json-tree'; import { stringify } from 'javascript-stringify'; import type { Delta } from 'jsondiffpatch'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import { css } from '@emotion/react'; import type { Interpolation, Theme } from '@emotion/react'; import type { JSX } from '@emotion/react/jsx-runtime'; diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/getJsonTreeTheme.ts b/packages/redux-devtools-inspector-monitor/src/tabs/getJsonTreeTheme.ts index 912e3e67..d7d8a9b4 100644 --- a/packages/redux-devtools-inspector-monitor/src/tabs/getJsonTreeTheme.ts +++ b/packages/redux-devtools-inspector-monitor/src/tabs/getJsonTreeTheme.ts @@ -1,5 +1,4 @@ -import { Base16Theme } from 'redux-devtools-themes'; -import { StylingConfig } from 'react-base16-styling'; +import type { Base16Theme, StylingConfig } from 'react-base16-styling'; export default function getJsonTreeTheme( base16Theme: Base16Theme, diff --git a/packages/redux-devtools-inspector-monitor/src/utils/themes.ts b/packages/redux-devtools-inspector-monitor/src/utils/themes.ts index ad15fe2b..3d55f9d5 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/themes.ts +++ b/packages/redux-devtools-inspector-monitor/src/utils/themes.ts @@ -1,6 +1,6 @@ import rgba from 'hex-rgba'; -import { Base16Theme } from 'redux-devtools-themes'; -import * as reduxThemes from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; +import { base16Themes as reduxThemes } from 'react-base16-styling'; import * as inspectorThemes from '../themes'; import { getBase16Theme, invertBase16Theme } from 'react-base16-styling'; diff --git a/packages/redux-devtools-log-monitor/package.json b/packages/redux-devtools-log-monitor/package.json index 9ac18db6..9accd9d6 100644 --- a/packages/redux-devtools-log-monitor/package.json +++ b/packages/redux-devtools-log-monitor/package.json @@ -43,10 +43,9 @@ "dependencies": { "@babel/runtime": "^7.24.1", "@types/lodash.debounce": "^4.0.9", - "@types/redux-devtools-themes": "^1.0.3", "lodash.debounce": "^4.0.8", - "react-json-tree": "^0.18.0", - "redux-devtools-themes": "^1.0.0" + "react-base16-styling": "^0.9.1", + "react-json-tree": "^0.18.0" }, "devDependencies": { "@babel/cli": "^7.24.1", diff --git a/packages/redux-devtools-log-monitor/src/LogMonitor.tsx b/packages/redux-devtools-log-monitor/src/LogMonitor.tsx index a9082bef..5b80055d 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitor.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitor.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { Action, Dispatch } from 'redux'; -import * as themes from 'redux-devtools-themes'; -import { Base16Theme } from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; +import type { Base16Theme } from 'react-base16-styling'; import { ActionCreators, LiftedAction, @@ -48,7 +48,7 @@ interface ExternalProps> { preserveScrollTop: boolean; select: (state: S) => unknown; - theme: keyof typeof themes | Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; expandActionRoot: boolean; expandStateRoot: boolean; markStateDiff: boolean; @@ -57,7 +57,7 @@ interface ExternalProps> { interface DefaultProps { select: (state: unknown) => unknown; - theme: keyof typeof themes | Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; preserveScrollTop: boolean; expandActionRoot: boolean; expandStateRoot: boolean; @@ -70,7 +70,7 @@ export interface LogMonitorProps> preserveScrollTop: boolean; select: (state: S) => unknown; - theme: keyof typeof themes | Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; expandActionRoot: boolean; expandStateRoot: boolean; markStateDiff: boolean; @@ -178,15 +178,15 @@ class LogMonitor> extends PureComponent< return theme; } - if (typeof themes[theme] !== 'undefined') { - return themes[theme]; + if (typeof base16Themes[theme] !== 'undefined') { + return base16Themes[theme]; } // eslint-disable-next-line no-console console.warn( 'DevTools theme ' + theme + ' not found, defaulting to nicinabox', ); - return themes.nicinabox; + return base16Themes.nicinabox; } getRef: React.RefCallback = (node) => { diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorButton.tsx b/packages/redux-devtools-log-monitor/src/LogMonitorButton.tsx index 01924eb9..575617d2 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorButton.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitorButton.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties, ReactNode } from 'react'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import brighten from './brighten'; const styles: { base: CSSProperties } = { diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.tsx b/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.tsx index 551b8894..f20db0b4 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, PureComponent } from 'react'; import { ActionCreators, LiftedAction } from '@redux-devtools/core'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import { Action, Dispatch } from 'redux'; import LogMonitorButton from './LogMonitorButton'; import { LogMonitorAction } from './actions'; diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx b/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx index 853ca117..9ddeb41f 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx @@ -1,7 +1,7 @@ import React, { CSSProperties, MouseEventHandler, PureComponent } from 'react'; import { JSONTree } from 'react-json-tree'; import type { ShouldExpandNodeInitially, StylingValue } from 'react-json-tree'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import { Action } from 'redux'; import LogMonitorEntryAction from './LogMonitorEntryAction'; diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx b/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx index 5a4fac9f..03301bd8 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx @@ -1,7 +1,7 @@ import React, { Component, CSSProperties, MouseEventHandler } from 'react'; import { JSONTree } from 'react-json-tree'; import type { ShouldExpandNodeInitially } from 'react-json-tree'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import { Action } from 'redux'; const styles = { diff --git a/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.tsx b/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.tsx index 76448453..8ff98bc7 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.tsx +++ b/packages/redux-devtools-log-monitor/src/LogMonitorEntryList.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { Action } from 'redux'; import { PerformAction } from '@redux-devtools/core'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import LogMonitorEntry from './LogMonitorEntry'; interface Props> { diff --git a/packages/redux-devtools-rtk-query-monitor/package.json b/packages/redux-devtools-rtk-query-monitor/package.json index 79cf66a6..a6d39baf 100644 --- a/packages/redux-devtools-rtk-query-monitor/package.json +++ b/packages/redux-devtools-rtk-query-monitor/package.json @@ -47,13 +47,11 @@ "@babel/runtime": "^7.24.1", "@redux-devtools/ui": "^1.3.1", "@types/lodash": "^4.17.0", - "@types/redux-devtools-themes": "^1.0.3", "hex-rgba": "^1.0.2", "immutable": "^4.3.5", "lodash.debounce": "^4.0.8", "react-base16-styling": "^0.9.1", - "react-json-tree": "^0.18.0", - "redux-devtools-themes": "^1.0.0" + "react-json-tree": "^0.18.0" }, "devDependencies": { "@babel/cli": "^7.24.1", diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts b/packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts index f9a08ce2..0656307a 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts @@ -1,14 +1,17 @@ -import { getBase16Theme, invertBase16Theme } from 'react-base16-styling'; +import { + base16Themes, + getBase16Theme, + invertBase16Theme, +} from 'react-base16-styling'; import type { Base16Theme, StylingConfig } from 'react-base16-styling'; import rgba from 'hex-rgba'; -import * as reduxThemes from 'redux-devtools-themes'; import { createContext } from 'react'; import { StyleUtils } from '../types'; export function resolveBase16Theme( - theme: keyof typeof reduxThemes | Base16Theme, + theme: keyof typeof base16Themes | Base16Theme, ) { - return getBase16Theme(theme, reduxThemes) ?? reduxThemes.nicinabox; + return getBase16Theme(theme, base16Themes) ?? base16Themes.nicinabox; } /** @@ -49,7 +52,7 @@ declare module '@emotion/react' { } } -export const colorMap = (theme: reduxThemes.Base16Theme) => +export const colorMap = (theme: Base16Theme) => ({ TEXT_COLOR: theme.base06, TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60), @@ -94,12 +97,12 @@ export function createRtkQueryMonitorThemeFromBase16Theme( } export const StyleUtilsContext = createContext({ - base16Theme: reduxThemes.nicinabox, + base16Theme: base16Themes.nicinabox, invertTheme: false, }); export function getJsonTreeTheme( - base16Theme: reduxThemes.Base16Theme, + base16Theme: base16Themes.Base16Theme, ): StylingConfig { return { extend: base16Theme, diff --git a/packages/redux-devtools-rtk-query-monitor/src/types.ts b/packages/redux-devtools-rtk-query-monitor/src/types.ts index 19935884..46f7896e 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/types.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/types.ts @@ -2,8 +2,8 @@ import type { LiftedAction, LiftedState } from '@redux-devtools/core'; import type { createApi, QueryStatus } from '@reduxjs/toolkit/query'; import type { Action, AnyAction, Dispatch } from '@reduxjs/toolkit'; import type { ComponentType } from 'react'; -import type { Base16Theme, StylingFunction } from 'react-base16-styling'; -import type * as themes from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; +import type { Base16Theme } from 'react-base16-styling'; import type { QueryComparators } from './utils/comparators'; import type { QueryFilters } from './utils/filters'; @@ -34,7 +34,7 @@ export interface RtkQueryMonitorState { export interface RtkQueryMonitorProps> extends LiftedState { dispatch: Dispatch>; - theme: keyof typeof themes | Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; invertTheme: boolean; } @@ -56,7 +56,7 @@ export type RtkQueryProvided = RtkQueryApiState['provided']; export interface ExternalProps> { dispatch: Dispatch>; - theme: keyof typeof themes | Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; hideMainButtons?: boolean; invertTheme: boolean; } diff --git a/packages/redux-devtools-slider-monitor/package.json b/packages/redux-devtools-slider-monitor/package.json index cc2e89c5..8908a1fe 100644 --- a/packages/redux-devtools-slider-monitor/package.json +++ b/packages/redux-devtools-slider-monitor/package.json @@ -34,8 +34,7 @@ "dependencies": { "@babel/runtime": "^7.24.1", "@redux-devtools/ui": "^1.3.1", - "@types/redux-devtools-themes": "^1.0.3", - "redux-devtools-themes": "^1.0.0" + "react-base16-styling": "^0.9.1" }, "devDependencies": { "@babel/cli": "^7.24.1", diff --git a/packages/redux-devtools-slider-monitor/src/SliderButton.tsx b/packages/redux-devtools-slider-monitor/src/SliderButton.tsx index 4d7f7c26..15d13be5 100644 --- a/packages/redux-devtools-slider-monitor/src/SliderButton.tsx +++ b/packages/redux-devtools-slider-monitor/src/SliderButton.tsx @@ -1,5 +1,5 @@ import React, { Component, PureComponent } from 'react'; -import { Base16Theme } from 'redux-devtools-themes'; +import type { Base16Theme } from 'react-base16-styling'; import { Button } from '@redux-devtools/ui'; interface Props { diff --git a/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx b/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx index 20ebe299..47836a0b 100644 --- a/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx +++ b/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx @@ -1,7 +1,7 @@ import React, { Component, PureComponent } from 'react'; import { Action, Dispatch } from 'redux'; -import * as themes from 'redux-devtools-themes'; -import { Base16Theme } from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; +import type { Base16Theme } from 'react-base16-styling'; import { ActionCreators, LiftedAction, @@ -25,14 +25,14 @@ interface ExternalProps> { dispatch: Dispatch>; preserveScrollTop: boolean; select: (state: S) => unknown; - theme: keyof typeof themes | Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; keyboardEnabled: boolean; hideResetButton?: boolean; } interface DefaultProps { select: (state: unknown) => unknown; - theme: keyof typeof themes; + theme: keyof typeof base16Themes; preserveScrollTop: boolean; keyboardEnabled: boolean; } @@ -84,10 +84,10 @@ class SliderMonitor> extends (PureComponent || setUpTheme = (): Base16Theme => { let theme; if (typeof this.props.theme === 'string') { - if (typeof themes[this.props.theme] !== 'undefined') { - theme = themes[this.props.theme]; + if (typeof base16Themes[this.props.theme] !== 'undefined') { + theme = base16Themes[this.props.theme]; } else { - theme = themes.nicinabox; + theme = base16Themes.nicinabox; } } else { theme = this.props.theme; diff --git a/packages/redux-devtools-ui/package.json b/packages/redux-devtools-ui/package.json index a1238d51..15680e44 100644 --- a/packages/redux-devtools-ui/package.json +++ b/packages/redux-devtools-ui/package.json @@ -44,17 +44,14 @@ "dependencies": { "@babel/runtime": "^7.24.1", "@rjsf/core": "^4.2.3", - "@types/base16": "^1.0.5", "@types/codemirror": "^5.60.15", "@types/json-schema": "^7.0.15", - "@types/redux-devtools-themes": "^1.0.3", "@types/simple-element-resize-detector": "^1.3.3", - "base16": "^1.0.0", "codemirror": "^5.65.16", "color": "^4.2.3", + "react-base16-styling": "^0.9.1", "react-icons": "^5.0.1", "react-select": "^5.8.0", - "redux-devtools-themes": "^1.0.0", "simple-element-resize-detector": "^1.3.0" }, "devDependencies": { diff --git a/packages/redux-devtools-ui/src/utils/theme.ts b/packages/redux-devtools-ui/src/utils/theme.ts index 5b4981f0..ab82e23d 100644 --- a/packages/redux-devtools-ui/src/utils/theme.ts +++ b/packages/redux-devtools-ui/src/utils/theme.ts @@ -1,11 +1,12 @@ import { useEffect, useMemo, useState } from 'react'; import * as themes from '../themes'; -import { nicinabox as defaultDarkScheme } from 'redux-devtools-themes'; -import * as baseSchemes from 'base16'; +import { base16Themes as baseSchemes } from 'react-base16-styling'; import * as additionalSchemes from '../colorSchemes'; import invertColors from '../utils/invertColors'; import { Theme as ThemeBase } from '../themes/default'; +const defaultDarkScheme = baseSchemes.nicinabox; + export const schemes = { ...baseSchemes, ...additionalSchemes }; export const listSchemes = () => Object.keys(schemes).slice(1).sort(); // remove `__esModule` export const listThemes = () => Object.keys(themes); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6cb936a2..9fb193ea 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1138,18 +1138,15 @@ importers: '@babel/runtime': specifier: ^7.24.1 version: 7.24.1 - '@types/redux-devtools-themes': - specifier: ^1.0.3 - version: 1.0.3 d3-state-visualizer: specifier: ^3.0.0 version: link:../d3-state-visualizer deepmerge: specifier: ^4.3.1 version: 4.3.1 - redux-devtools-themes: - specifier: ^1.0.0 - version: 1.0.0 + react-base16-styling: + specifier: ^0.9.1 + version: link:../react-base16-styling devDependencies: '@babel/cli': specifier: ^7.24.1 @@ -1511,9 +1508,6 @@ importers: '@types/lodash': specifier: ^4.17.0 version: 4.17.0 - '@types/redux-devtools-themes': - specifier: ^1.0.3 - version: 1.0.3 dateformat: specifier: ^5.0.3 version: 5.0.3 @@ -1541,9 +1535,6 @@ importers: react-json-tree: specifier: ^0.18.0 version: link:../react-json-tree - redux-devtools-themes: - specifier: ^1.0.0 - version: 1.0.0 devDependencies: '@babel/cli': specifier: ^7.24.1 @@ -1901,9 +1892,9 @@ importers: path-browserify: specifier: ^1.0.1 version: 1.0.1 - redux-devtools-themes: - specifier: ^1.0.0 - version: 1.0.0 + react-base16-styling: + specifier: ^0.9.1 + version: link:../react-base16-styling source-map: specifier: ^0.5.7 version: 0.5.7 @@ -1959,9 +1950,6 @@ importers: '@types/react': specifier: ^18.2.72 version: 18.2.72 - '@types/redux-devtools-themes': - specifier: ^1.0.3 - version: 1.0.3 '@types/source-map': specifier: 0.5.2 version: 0.5.2 @@ -2028,9 +2016,6 @@ importers: '@redux-devtools/inspector-monitor': specifier: ^6.0.0 version: link:.. - base16: - specifier: ^1.0.0 - version: 1.0.0 immutable: specifier: ^4.3.5 version: 4.3.5 @@ -2040,6 +2025,9 @@ importers: react: specifier: ^18.2.0 version: 18.2.0 + react-base16-styling: + specifier: ^0.9.1 + version: link:../../react-base16-styling react-bootstrap: specifier: ^2.10.2 version: 2.10.2(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0) @@ -2071,9 +2059,6 @@ importers: '@babel/preset-typescript': specifier: ^7.24.1 version: 7.24.1(@babel/core@7.24.3) - '@types/base16': - specifier: ^1.0.5 - version: 1.0.5 '@types/lodash.shuffle': specifier: ^4.2.9 version: 4.2.9 @@ -2216,18 +2201,15 @@ importers: '@types/lodash.debounce': specifier: ^4.0.9 version: 4.0.9 - '@types/redux-devtools-themes': - specifier: ^1.0.3 - version: 1.0.3 lodash.debounce: specifier: ^4.0.8 version: 4.0.8 + react-base16-styling: + specifier: ^0.9.1 + version: link:../react-base16-styling react-json-tree: specifier: ^0.18.0 version: link:../react-json-tree - redux-devtools-themes: - specifier: ^1.0.0 - version: 1.0.0 devDependencies: '@babel/cli': specifier: ^7.24.1 @@ -2374,9 +2356,6 @@ importers: '@types/lodash': specifier: ^4.17.0 version: 4.17.0 - '@types/redux-devtools-themes': - specifier: ^1.0.3 - version: 1.0.3 '@types/styled-components': specifier: ^5.1.34 version: 5.1.34 @@ -2395,9 +2374,6 @@ importers: react-json-tree: specifier: ^0.18.0 version: link:../react-json-tree - redux-devtools-themes: - specifier: ^1.0.0 - version: 1.0.0 styled-components: specifier: ^5.3.11 version: 5.3.11(@babel/core@7.24.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) @@ -2713,15 +2689,12 @@ importers: '@redux-devtools/ui': specifier: ^1.3.1 version: link:../redux-devtools-ui - '@types/redux-devtools-themes': - specifier: ^1.0.3 - version: 1.0.3 '@types/styled-components': specifier: ^5.1.34 version: 5.1.34 - redux-devtools-themes: - specifier: ^1.0.0 - version: 1.0.0 + react-base16-styling: + specifier: ^0.9.1 + version: link:../react-base16-styling styled-components: specifier: ^5.3.11 version: 5.3.11(@babel/core@7.24.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) @@ -2913,39 +2886,30 @@ importers: '@rjsf/core': specifier: ^4.2.3 version: 4.2.3(react@18.2.0) - '@types/base16': - specifier: ^1.0.5 - version: 1.0.5 '@types/codemirror': specifier: ^5.60.15 version: 5.60.15 '@types/json-schema': specifier: ^7.0.15 version: 7.0.15 - '@types/redux-devtools-themes': - specifier: ^1.0.3 - version: 1.0.3 '@types/simple-element-resize-detector': specifier: ^1.3.3 version: 1.3.3 - base16: - specifier: ^1.0.0 - version: 1.0.0 codemirror: specifier: ^5.65.16 version: 5.65.16 color: specifier: ^4.2.3 version: 4.2.3 + react-base16-styling: + specifier: ^0.9.1 + version: link:../react-base16-styling react-icons: specifier: ^5.0.1 version: 5.0.1(react@18.2.0) react-select: specifier: ^5.8.0 version: 5.8.0(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0) - redux-devtools-themes: - specifier: ^1.0.0 - version: 1.0.0 simple-element-resize-detector: specifier: ^1.3.0 version: 1.3.0 @@ -9012,9 +8976,6 @@ packages: '@babel/types': 7.24.0 dev: true - /@types/base16@1.0.5: - resolution: {integrity: sha512-OzOWrTluG9cwqidEzC/Q6FAmIPcnZfm8BFRlIx0+UIUqnuAmi5OS88O0RpT3Yz6qdmqObvUhasrbNsCofE4W9A==} - /@types/body-parser@1.19.5: resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} dependencies: @@ -9600,11 +9561,6 @@ packages: '@types/prop-types': 15.7.12 csstype: 3.1.3 - /@types/redux-devtools-themes@1.0.3: - resolution: {integrity: sha512-KqiQ2+6VTb1Yn02+ZNQsB0XcoJTu/W4AhnIUaeTnkVFie5YWMoeSpW4IOFYJ2/HJ+wi1kLw+PHDgjZ3t+M6IRw==} - dependencies: - '@types/base16': 1.0.5 - /@types/redux-logger@3.0.12: resolution: {integrity: sha512-5vAlwokZi/Unb1eGoZfVVzIBTPNDflwXiDzPLT1SynP6hdJfsOEf+w6ZOySOyboLWciCRYeE5DGYUnwVCq+Uyg==} dependencies: @@ -10919,10 +10875,6 @@ packages: resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} dev: true - /base16@1.0.0: - resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==} - dev: false - /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -18214,12 +18166,6 @@ packages: strip-indent: 3.0.0 dev: true - /redux-devtools-themes@1.0.0: - resolution: {integrity: sha512-hBWqdZX+dioMWnTjf8+uSm0q1wCdYO4kU5gERzHcMMbu0Qg7JDR42TnJ6GHJ6r7k/tIpsCSygc9U0ehAtR24TQ==} - dependencies: - base16: 1.0.0 - dev: false - /redux-logger@3.0.6: resolution: {integrity: sha512-JoCIok7bg/XpqA1JqCqXFypuqBbQzGQySrhFzewB7ThcnysTO30l4VCst86AuB9T9tuT03MAA56Jw2PNhRSNCg==} dependencies: