wip - replacing base-16 inline styles with css/scss

Author: gtk-grafana

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Change Log
 
+## 0.30.0 - gtk-grafana FORK
+Removing base-16 styles and lodash dependencies
+
 ## 0.20.0
 
 ### Minor Changes

README.md

@@ -32,65 +32,19 @@ Check out [examples](examples) directory for more details.
 
 ### Theming
 
-This component now uses [react-base16-styling](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-base16-styling) module, which allows to customize component via `theme` property, which can be the following:
-
-- [base16](https://github.com/chriskempson/base16) theme data. [The example theme data can be found here](https://github.com/gaearon/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes).
-- object that contains style objects, strings (that treated as classnames) or functions. A function is used to extend its first argument `{ style, className }` and should return an object with the same structure. Other arguments depend on particular context (and should be described here). See [createStylingFromTheme.js](https://github.com/reduxjs/redux-devtools/blob/main/packages/react-json-tree/src/createStylingFromTheme.ts) for the list of styling object keys. Also, this object can extend `base16` theme via `extend` property.
-
-Every theme has a light version, which is enabled with `invertTheme` prop.
-
-```jsx
-const theme = {
-  scheme: 'monokai',
-  author: 'wimer hazenberg (http://www.monokai.nl)',
-  base00: '#272822',
-  base01: '#383830',
-  base02: '#49483e',
-  base03: '#75715e',
-  base04: '#a59f85',
-  base05: '#f8f8f2',
-  base06: '#f5f4f1',
-  base07: '#f9f8f5',
-  base08: '#f92672',
-  base09: '#fd971f',
-  base0A: '#f4bf75',
-  base0B: '#a6e22e',
-  base0C: '#a1efe4',
-  base0D: '#66d9ef',
-  base0E: '#ae81ff',
-  base0F: '#cc6633',
-};
+Style with CSS. @todo base styles
 
 <div>
-  <JSONTree data={data} theme={theme} invertTheme={false} />
+  <JSONTree data={data} />
 </div>;
 ```
 
-#### Result (Monokai theme, dark background):
-
-![](http://cl.ly/image/330o2L1J3V0h/screenshot%202015-08-26%20at%2010.48.24%20AM.png)
-
 #### Advanced Customization
 
 ```jsx
 <div>
   <JSONTree
     data={data}
-    theme={{
-      extend: theme,
-      // underline keys for literal values
-      valueLabel: {
-        textDecoration: 'underline',
-      },
-      // switch key for objects to uppercase when object is expanded.
-      // `nestedNodeLabel` receives additional argument `expandable`
-      nestedNodeLabel: ({ style }, keyPath, nodeType, expanded) => ({
-        style: {
-          ...style,
-          textTransform: expanded ? 'uppercase' : style.textTransform,
-        },
-      }),
-    }}
   />
 </div>
 ```

examples/package-lock.json

@@ -22,7 +22,6 @@
     "immutable": "^4.3.7",
     "react-json-tree": "file:..",
     "react": "^18.3.1",
-    "react-base16-styling": "^0.10.0",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {

examples/package.json

@@ -1,21 +1,6 @@
 import React from 'react';
 import { Map } from 'immutable';
-import { JSONTree, StylingValue } from 'react-json-tree';
-
-const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({
-  style: {
-    ...style,
-    textTransform: expanded ? 'uppercase' : style!.textTransform,
-  },
-});
-
-const getBoolStyle: StylingValue = ({ style }, nodeType) => ({
-  style: {
-    ...style,
-    border: nodeType === 'Boolean' ? '1px solid #DD3333' : style!.border,
-    borderRadius: nodeType === 'Boolean' ? 3 : style!.borderRadius,
-  },
-});
+import { JSONTree } from 'react-json-tree';
 
 const getItemString = (type: string) => (
   <span>
@@ -24,17 +9,6 @@ const getItemString = (type: string) => (
   </span>
 );
 
-const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({
-  style: {
-    ...style,
-    color:
-      !Number.isNaN((keyPath as unknown[])[0]) &&
-      !(parseInt(keyPath as string, 10) % 2)
-        ? '#33F'
-        : style!.color,
-  },
-});
-
 const longString =
   'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.'; // eslint-disable-line max-len
 
@@ -104,42 +78,13 @@ const data = {
   longString,
 };
 
-const theme = {
-  scheme: 'monokai',
-  author: 'wimer hazenberg (http://www.monokai.nl)',
-  base00: '#272822',
-  base01: '#383830',
-  base02: '#49483e',
-  base03: '#75715e',
-  base04: '#a59f85',
-  base05: '#f8f8f2',
-  base06: '#f5f4f1',
-  base07: '#f9f8f5',
-  base08: '#f92672',
-  base09: '#fd971f',
-  base0A: '#f4bf75',
-  base0B: '#a6e22e',
-  base0C: '#a1efe4',
-  base0D: '#66d9ef',
-  base0E: '#ae81ff',
-  base0F: '#cc6633',
-};
-
 const App = () => (
   <div>
-    <JSONTree data={data} theme={theme} invertTheme />
+    <JSONTree data={data} />
     <br />
     <h3>Dark Theme</h3>
-    <JSONTree data={data} theme={theme} invertTheme={false} />
-    <br />
-    <h3>Hidden Root</h3>
-    <JSONTree data={data} theme={theme} hideRoot />
-    <br />
-    <h3>Base16 Greenscreen Theme</h3>
-    <JSONTree data={data} theme="greenscreen" invertTheme={false} />
-    <h4>Inverted Theme</h4>
-    <JSONTree data={data} theme="greenscreen" invertTheme />
-    <br />
+    <JSONTree data={data} />
+
     <h3>Style Customization</h3>
     <ul>
       <li>
@@ -155,12 +100,6 @@ const App = () => (
     <div>
       <JSONTree
         data={data}
-        theme={{
-          extend: theme,
-          nestedNodeLabel: getLabelStyle,
-          value: getBoolStyle,
-          valueLabel: getValueLabelStyle,
-        }}
         getItemString={getItemString}
       />
     </div>
@@ -171,7 +110,6 @@ const App = () => (
     <div>
       <JSONTree
         data={data}
-        theme={theme}
         labelRenderer={([raw]) => <span>(({raw})):</span>}
         valueRenderer={(raw) => (
           <em>
@@ -190,13 +128,12 @@ const App = () => (
       Sort object keys with <code>sortObjectKeys</code> prop.
     </p>
     <div>
-      <JSONTree data={data} theme={theme} sortObjectKeys />
+      <JSONTree data={data} sortObjectKeys />
     </div>
     <p>Collapsed root node</p>
     <div>
       <JSONTree
         data={data}
-        theme={theme}
         shouldExpandNodeInitially={() => false}
       />
     </div>

examples/src/App.tsx

@@ -2,7 +2,7 @@ import * as path from 'path';
 import * as webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-import BundleAnalyzerPlugin from 'webpack-bundle-analyzer';
+// import BundleAnalyzerPlugin from 'webpack-bundle-analyzer';
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const config: webpack.Configuration = {
@@ -13,7 +13,7 @@ const config: webpack.Configuration = {
     static: './dist',
   },
   plugins: [
-    new BundleAnalyzerPlugin.BundleAnalyzerPlugin(),
+    // new BundleAnalyzerPlugin.BundleAnalyzerPlugin(),
     new HtmlWebpackPlugin({
       template: './index.html',
     }),