Remaining css

2025-07-26 07:59:48 +03:00 · 2023-12-11 20:59:32 -05:00 · 2023-12-11 20:59:32 -05:00 · 8d5f338688
commit 8d5f338688
parent e85caa5759
8 changed files with 233 additions and 230 deletions
--- a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
@ -6,6 +6,8 @@ import {
  actionListHeaderSearchCss,
  actionListHeaderSelectorCss,
  actionListHeaderWrapperCss,
+  selectorButtonCss,
+  selectorButtonSmallCss,
 } from './utils/createStylingFromTheme';

 const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
@ -54,11 +56,7 @@ const ActionListHeader: FunctionComponent<Props> = ({
                    Sweep: onSweep,
                  })[btn]()
                }
-                {...styling(
-                  ['selectorButton', 'selectorButtonSmall'],
-                  false,
-                  true,
-                )}
+                css={[selectorButtonCss, selectorButtonSmallCss]}
              >
                {btn}
              </div>
--- a/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx
@ -15,6 +15,9 @@ import {
  actionListItemSelectorCss,
  actionListItemSkippedCss,
  actionListItemTimeCss,
+  selectorButtonCss,
+  selectorButtonSelectedCss,
+  selectorButtonSmallCss,
 } from './utils/createStylingFromTheme';

 const BUTTON_SKIP = 'Skip';
@ -131,15 +134,11 @@ export default class ActionListRow<
                      <div
                        key={btn}
                        onClick={(e) => this.handleButtonClick(btn, e)}
-                        {...styling(
-                          [
-                            'selectorButton',
-                            isButtonSelected(btn) && 'selectorButtonSelected',
-                            'selectorButtonSmall',
-                          ],
-                          isButtonSelected(btn),
-                          true,
-                        )}
+                        css={[
+                          selectorButtonCss,
+                          isButtonSelected(btn) && selectorButtonSelectedCss,
+                          selectorButtonSmallCss,
+                        ]}
                      >
                        {btn}
                      </div>
--- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
@ -10,7 +10,12 @@ import ActionPreviewHeader from './ActionPreviewHeader';
 import DiffTab from './tabs/DiffTab';
 import StateTab from './tabs/StateTab';
 import ActionTab from './tabs/ActionTab';
-import { actionPreviewCss } from './utils/createStylingFromTheme';
+import {
+  actionPreviewContentCss,
+  actionPreviewCss,
+  stateErrorCss,
+  treeItemPinCss,
+} from './utils/createStylingFromTheme';

 export interface TabComponentProps<S, A extends Action<string>> {
  labelRenderer: LabelRenderer;
@ -128,7 +133,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
          {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}
        />
        {!error && (
-          <div key="actionPreviewContent" {...styling('actionPreviewContent')}>
+          <div key="actionPreviewContent" css={actionPreviewContentCss}>
            <TabComponent
              labelRenderer={this.labelRenderer}
              {...{
@ -152,7 +157,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
            />
          </div>
        )}
-        {error && <div {...styling('stateError')}>{error}</div>}
+        {error && <div css={stateErrorCss}>{error}</div>}
      </div>
    );
  }
@ -164,7 +169,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
      <span>
        <span {...styling('treeItemKey')}>{key}</span>
        <span
-          {...styling('treeItemPin')}
+          css={treeItemPinCss}
          onClick={() =>
            onInspectPath([
              ...inspectedPath.slice(0, inspectedPath.length - 1),
--- a/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx
@ -2,6 +2,15 @@ import React, { FunctionComponent } from 'react';
 import { Action } from 'redux';
 import { StylingFunction } from 'react-base16-styling';
 import { Tab } from './ActionPreview';
+import {
+  inspectedPathCss,
+  inspectedPathKeyCss,
+  inspectedPathKeyLinkCss,
+  previewHeaderCss,
+  selectorButtonCss,
+  selectorButtonSelectedCss,
+  tabSelectorCss,
+} from './utils/createStylingFromTheme';

 interface Props<S, A extends Action<string>> {
  tabs: Tab<S, A>[];
@ -15,31 +24,25 @@ interface Props<S, A extends Action<string>> {
 const ActionPreviewHeader: FunctionComponent<
  Props<unknown, Action<string>>
 > = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
-  <div key="previewHeader" {...styling('previewHeader')}>
-    <div {...styling('tabSelector')}>
+  <div key="previewHeader" css={previewHeaderCss}>
+    <div css={tabSelectorCss}>
      {tabs.map((tab) => (
        <div
          onClick={() => onSelectTab(tab.name)}
          key={tab.name}
-          {...styling(
-            [
-              'selectorButton',
-              tab.name === tabName && 'selectorButtonSelected',
-            ],
-            tab.name === tabName,
-          )}
+          css={[
+            selectorButtonCss,
+            tab.name === tabName && selectorButtonSelectedCss,
+          ]}
        >
          {tab.name}
        </div>
      ))}
    </div>
-    <div {...styling('inspectedPath')}>
+    <div css={inspectedPathCss}>
      {inspectedPath.length ? (
-        <span {...styling('inspectedPathKey')}>
-          <a
-            onClick={() => onInspectPath([])}
-            {...styling('inspectedPathKeyLink')}
-          >
+        <span css={inspectedPathKeyCss}>
+          <a onClick={() => onInspectPath([])} css={inspectedPathKeyLinkCss}>
            {tabName}
          </a>
        </span>
@ -50,10 +53,10 @@ const ActionPreviewHeader: FunctionComponent<
        idx === inspectedPath.length - 1 ? (
          <span key={key}>{key}</span>
        ) : (
-          <span key={key} {...styling('inspectedPathKey')}>
+          <span key={key} css={inspectedPathKeyCss}>
            <a
              onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
-              {...styling('inspectedPathKeyLink')}
+              css={inspectedPathKeyLinkCss}
            >
              {key}
            </a>
--- a/packages/redux-devtools-inspector-monitor/src/RightSlider.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/RightSlider.tsx
@ -1,5 +1,11 @@
 import React, { FunctionComponent } from 'react';
 import { StylingFunction } from 'react-base16-styling';
+import {
+  rightSliderCss,
+  rightSliderRotateCss,
+  rightSliderRotateShownCss,
+  rightSliderShownCss,
+} from './utils/createStylingFromTheme';

 interface Props {
  styling: StylingFunction;
@ -15,12 +21,12 @@ const RightSlider: FunctionComponent<Props> = ({
  rotate,
 }) => (
  <div
-    {...styling([
-      'rightSlider',
-      shown && 'rightSliderShown',
-      rotate && 'rightSliderRotate',
-      rotate && shown && 'rightSliderRotateShown',
-    ])}
+    css={[
+      rightSliderCss,
+      shown && rightSliderShownCss,
+      rotate && rightSliderRotateCss,
+      rotate && shown && rightSliderRotateShownCss,
+    ]}
  >
    {children}
  </div>
--- a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx
@ -7,6 +7,16 @@ import { StylingFunction } from 'react-base16-styling';
 import { Base16Theme } from 'redux-devtools-themes';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
+import {
+  diffAddCss,
+  diffCss,
+  diffRemoveCss,
+  diffUpdateArrowCss,
+  diffUpdateFromCss,
+  diffUpdateToCss,
+  diffWrapCss,
+  stateDiffEmptyCss,
+} from '../utils/createStylingFromTheme';

 function stringifyAndShrink(val: any, isWideLayout?: boolean) {
  if (val === null) {
@ -85,7 +95,7 @@ export default class JSONDiff extends Component<Props, State> {
    const { styling, base16Theme, ...props } = this.props;

    if (!this.state.data) {
-      return <div {...styling('stateDiffEmpty')}>(states are equal)</div>;
+      return <div css={stateDiffEmptyCss}>(states are equal)</div>;
    }

    return (
@ -116,43 +126,36 @@ export default class JSONDiff extends Component<Props, State> {
  valueRenderer = (raw: any, value: any) => {
    const { styling, isWideLayout } = this.props;

-    function renderSpan(name: string, body: string) {
-      return (
-        <span key={name} {...styling(['diff', name])}>
-          {body}
-        </span>
-      );
-    }
-
    if (Array.isArray(value)) {
      switch (value.length) {
        case 1:
          return (
-            <span {...styling('diffWrap')}>
-              {renderSpan(
-                'diffAdd',
-                stringifyAndShrink(value[0], isWideLayout),
-              )}
+            <span css={diffWrapCss}>
+              <span key="diffAdd" css={[diffCss, diffAddCss]}>
+                {stringifyAndShrink(value[0], isWideLayout)}
+              </span>
            </span>
          );
        case 2:
          return (
-            <span {...styling('diffWrap')}>
-              {renderSpan(
-                'diffUpdateFrom',
-                stringifyAndShrink(value[0], isWideLayout),
-              )}
-              {renderSpan('diffUpdateArrow', ' => ')}
-              {renderSpan(
-                'diffUpdateTo',
-                stringifyAndShrink(value[1], isWideLayout),
-              )}
+            <span css={diffWrapCss}>
+              <span key="diffUpdateFrom" css={[diffCss, diffUpdateFromCss]}>
+                {stringifyAndShrink(value[0], isWideLayout)}
+              </span>
+              <span key="diffUpdateArrow" css={[diffCss, diffUpdateArrowCss]}>
+                {' => '}
+              </span>
+              <span key="diffUpdateTo" css={[diffCss, diffUpdateToCss]}>
+                {stringifyAndShrink(value[1], isWideLayout)}
+              </span>
            </span>
          );
        case 3:
          return (
-            <span {...styling('diffWrap')}>
-              {renderSpan('diffRemove', stringifyAndShrink(value[0]))}
+            <span css={diffWrapCss}>
+              <span key="diffRemove" css={[diffCss, diffRemoveCss]}>
+                {stringifyAndShrink(value[0])}
+              </span>
            </span>
          );
      }
--- a/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx
@ -2,6 +2,7 @@ import React from 'react';
 import { isCollection, isIndexed, isKeyed } from 'immutable';
 import { StylingFunction } from 'react-base16-styling';
 import isIterable from '../utils/isIterable';
+import { treeItemHintCss } from '../utils/createStylingFromTheme';

 const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';

@ -79,7 +80,7 @@ const getItemString = (
  isWideLayout: boolean,
  isDiff?: boolean,
 ) => (
-  <span {...styling('treeItemHint')}>
+  <span css={treeItemHintCss}>
    {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
    {dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ''}
    {getText(type, data, isWideLayout, isDiff)}
--- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
+++ b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
@ -201,177 +201,165 @@ export const actionPreviewCss: Interpolation<Theme> = (theme) => ({
  backgroundColor: colorMap(theme).BACKGROUND_COLOR,
 });

-const getSheetFromColorMap = (map: ColorMap) => ({
-  actionPreviewContent: {
-    flex: 1,
-    'overflow-y': 'auto',
-  },
+export const actionPreviewContentCss = css({ flex: 1, overflowY: 'auto' });

-  stateDiff: {
-    padding: '5px 0',
-  },
+export const stateDiffEmptyCss: Interpolation<Theme> = (theme) => ({
+  padding: '10px',

-  stateDiffEmpty: {
-    padding: '10px',
+  color: colorMap(theme).TEXT_PLACEHOLDER_COLOR,
+});

-    color: map.TEXT_PLACEHOLDER_COLOR,
-  },
+export const stateErrorCss: Interpolation<Theme> = (theme) => ({
+  padding: '10px',
+  marginLeft: '14px',
+  fontWeight: 'bold',

-  stateError: {
-    padding: '10px',
-    'margin-left': '14px',
-    'font-weight': 'bold',
+  color: colorMap(theme).ERROR_COLOR,
+});

-    color: map.ERROR_COLOR,
-  },
+export const inspectedPathCss = css({ padding: '6px 0' });

-  inspectedPath: {
-    padding: '6px 0',
-  },
-
-  inspectedPathKey: {
-    '&:not(:last-child):after': {
-      content: '" > "',
-    },
-  },
-
-  inspectedPathKeyLink: {
-    cursor: 'pointer',
-    color: map.LINK_COLOR,
-    '&:hover': {
-      'text-decoration': 'underline',
-      color: map.LINK_HOVER_COLOR,
-    },
-  },
-
-  treeItemPin: {
-    'font-size': '0.7em',
-    'padding-left': '5px',
-    cursor: 'pointer',
-    '&:hover': {
-      'text-decoration': 'underline',
-    },
-
-    color: map.PIN_COLOR,
-  },
-
-  treeItemHint: {
-    color: map.ITEM_HINT_COLOR,
-  },
-
-  previewHeader: {
-    flex: '0 0 30px',
-    padding: '5px 10px',
-    'align-items': 'center',
-    'border-bottom-width': '1px',
-    'border-bottom-style': 'solid',
-
-    'background-color': map.HEADER_BACKGROUND_COLOR,
-    'border-bottom-color': map.HEADER_BORDER_COLOR,
-  },
-
-  tabSelector: {
-    position: 'relative',
-    display: 'inline-flex',
-    float: 'right',
-  },
-
-  selectorButton: {
-    cursor: 'pointer',
-    position: 'relative',
-    padding: '5px 10px',
-    'border-style': 'solid',
-    'border-width': '1px',
-    'border-left-width': 0,
-
-    '&:first-child': {
-      'border-left-width': '1px',
-      'border-top-left-radius': '3px',
-      'border-bottom-left-radius': '3px',
-    },
-
-    '&:last-child': {
-      'border-top-right-radius': '3px',
-      'border-bottom-right-radius': '3px',
-    },
-
-    'background-color': map.TAB_BACK_COLOR,
-
-    '&:hover': {
-      'background-color': map.TAB_BACK_HOVER_COLOR,
-    },
-
-    'border-color': map.TAB_BORDER_COLOR,
-  },
-
-  selectorButtonSmall: {
-    padding: '0px 8px',
-    'font-size': '0.8em',
-  },
-
-  selectorButtonSelected: {
-    'background-color': map.TAB_BACK_SELECTED_COLOR,
-  },
-
-  diff: {
-    padding: '2px 3px',
-    'border-radius': '3px',
-    position: 'relative',
-
-    color: map.TEXT_COLOR,
-  },
-
-  diffWrap: {
-    position: 'relative',
-    'z-index': 1,
-  },
-
-  diffAdd: {
-    'background-color': map.DIFF_ADD_COLOR,
-  },
-
-  diffRemove: {
-    'text-decoration': 'line-through',
-    'background-color': map.DIFF_REMOVE_COLOR,
-  },
-
-  diffUpdateFrom: {
-    'text-decoration': 'line-through',
-    'background-color': map.DIFF_REMOVE_COLOR,
-  },
-
-  diffUpdateTo: {
-    'background-color': map.DIFF_ADD_COLOR,
-  },
-
-  diffUpdateArrow: {
-    color: map.DIFF_ARROW_COLOR,
-  },
-
-  rightSlider: {
-    'font-smoothing': 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591
-    position: 'absolute',
-    right: 0,
-    transform: 'translateX(150%)',
-    transition: 'transform 0.2s ease-in-out',
-  },
-
-  rightSliderRotate: {
-    transform: 'rotateX(90deg)',
-    transition: 'transform 0.2s ease-in-out 0.08s',
-  },
-
-  rightSliderShown: {
-    position: 'static',
-    transform: 'translateX(0)',
-  },
-
-  rightSliderRotateShown: {
-    transform: 'rotateX(0)',
-    transition: 'transform 0.2s ease-in-out 0.18s',
+export const inspectedPathKeyCss = css({
+  '&:not(:last-child):after': {
+    content: '" > "',
  },
 });

+export const inspectedPathKeyLinkCss: Interpolation<Theme> = (theme) => ({
+  cursor: 'pointer',
+  color: colorMap(theme).LINK_COLOR,
+  '&:hover': {
+    textDecoration: 'underline',
+    color: colorMap(theme).LINK_HOVER_COLOR,
+  },
+});
+
+export const treeItemPinCss: Interpolation<Theme> = (theme) => ({
+  fontSize: '0.7em',
+  paddingLeft: '5px',
+  cursor: 'pointer',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+
+  color: colorMap(theme).PIN_COLOR,
+});
+
+export const treeItemHintCss: Interpolation<Theme> = (theme) => ({
+  color: colorMap(theme).ITEM_HINT_COLOR,
+});
+
+export const previewHeaderCss: Interpolation<Theme> = (theme) => ({
+  flex: '0 0 30px',
+  padding: '5px 10px',
+  alignItems: 'center',
+  borderBottomWidth: '1px',
+  borderBottomStyle: 'solid',
+
+  backgroundColor: colorMap(theme).HEADER_BACKGROUND_COLOR,
+  borderBottomColor: colorMap(theme).HEADER_BORDER_COLOR,
+});
+
+export const tabSelectorCss = css({
+  position: 'relative',
+  display: 'inline-flex',
+  float: 'right',
+});
+
+export const selectorButtonCss: Interpolation<Theme> = (theme) => ({
+  cursor: 'pointer',
+  position: 'relative',
+  padding: '5px 10px',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  borderLeftWidth: 0,
+
+  '&:first-child': {
+    borderLeftWidth: '1px',
+    borderTopLeftRadius: '3px',
+    borderBottomLeftRadius: '3px',
+  },
+
+  '&:last-child': {
+    borderTopRightRadius: '3px',
+    borderBottomRightRadius: '3px',
+  },
+
+  backgroundColor: colorMap(theme).TAB_BACK_COLOR,
+
+  '&:hover': {
+    backgroundColor: colorMap(theme).TAB_BACK_HOVER_COLOR,
+  },
+
+  borderColor: colorMap(theme).TAB_BORDER_COLOR,
+});
+
+export const selectorButtonSmallCss = css({
+  padding: '0px 8px',
+  fontSize: '0.8em',
+});
+
+export const selectorButtonSelectedCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).TAB_BACK_SELECTED_COLOR,
+});
+
+export const diffCss: Interpolation<Theme> = (theme) => ({
+  padding: '2px 3px',
+  borderRadius: '3px',
+  position: 'relative',
+
+  color: colorMap(theme).TEXT_COLOR,
+});
+
+export const diffWrapCss = css({ position: 'relative', zIndex: 1 });
+
+export const diffAddCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).DIFF_ADD_COLOR,
+});
+
+export const diffRemoveCss: Interpolation<Theme> = (theme) => ({
+  textDecoration: 'line-through',
+  backgroundColor: colorMap(theme).DIFF_REMOVE_COLOR,
+});
+
+export const diffUpdateFromCss: Interpolation<Theme> = (theme) => ({
+  textDecoration: 'line-through',
+  backgroundColor: colorMap(theme).DIFF_REMOVE_COLOR,
+});
+
+export const diffUpdateToCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).DIFF_ADD_COLOR,
+});
+
+export const diffUpdateArrowCss: Interpolation<Theme> = (theme) => ({
+  color: colorMap(theme).DIFF_ARROW_COLOR,
+});
+
+export const rightSliderCss = css({
+  WebkitFontSmoothing: 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591
+  position: 'absolute',
+  right: 0,
+  transform: 'translateX(150%)',
+  transition: 'transform 0.2s ease-in-out',
+});
+
+export const rightSliderRotateCss = css({
+  transform: 'rotateX(90deg)',
+  transition: 'transform 0.2s ease-in-out 0.08s',
+});
+
+export const rightSliderShownCss = css({
+  position: 'static',
+  transform: 'translateX(0)',
+});
+
+export const rightSliderRotateShownCss = css({
+  transform: 'rotateX(0)',
+  transition: 'transform 0.2s ease-in-out 0.18s',
+});
+
+const getSheetFromColorMap = (map: ColorMap) => ({});
+
 let themeSheet: StyleSheet;

 const getDefaultThemeStyling = (theme: Base16Theme) => {