Merge pull request #1 from gtk-grafana/gtk-grafana/react-vite-component-template

Reduce module size and repackage outside of redux-devtools monorepo

Author: gtk-grafana

.gitignore

@@ -1,3 +1,5 @@
 .idea
 node_modules
 lib
+dist
+*.tgz

README.md

@@ -24,19 +24,10 @@ const json = {
 <JSONTree data={json} />;
 ```
 
-#### Result:
-
-![](https://i.ibb.co/0KSYRJg/example-result.png)
-
-Check out [examples](examples) directory for more details.
-
 ### Theming
 
-Style with CSS. @todo base styles
+TODO/In progress. All base styles are a single css class of specificity, and can be overwritten in the consuming application.
 
-<div>
-  <JSONTree data={data} />
-</div>;
 ```
 
 #### Advanced Customization
@@ -110,7 +101,7 @@ Their full signatures are:
 - Improved and maintained by [Alexander Kuznetsov](https://github.com/alexkuz). The repository was merged into [`redux-devtools` monorepo](https://github.com/reduxjs/redux-devtools) from [`alexkuz/react-json-tree`](https://github.com/alexkuz/react-json-tree).
 
 ### Similar Libraries
-
+- [original react-json-tree](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-json-tree)
 - [react-treeview](https://github.com/chenglou/react-treeview)
 - [react-json-inspector](https://github.com/Lapple/react-json-inspector)
 - [react-object-inspector](https://github.com/xyc/react-object-inspector)

eslint.config.js

@@ -1,12 +1,29 @@
-import eslintJs from './.config/eslint.js.config.base.mjs';
-import eslintTsReact from './.config/eslint.ts.react.config.base.mjs';
-import eslintTsReactJest from './.config/eslint.ts.react.jest.config.base.mjs';
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
 
-export default [
-  ...eslintJs,
-  ...eslintTsReact(import.meta.dirname),
-  ...eslintTsReactJest(import.meta.dirname),
+export default tseslint.config(
+  { ignores: ['dist'] },
   {
-    ignores: ['examples', 'lib'],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended, eslintConfigPrettier],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
   },
-];
+  {
+    files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+  }
+)

examples/README.md

@@ -12,14 +12,14 @@ yarn link
 
 And in this package, run 
 ```
-npm link react
+yarn link react
 ```
 
 Then start and install the examples:
 
 ```
-npm install
-npm start
+yarn install
+yarn start
 ```
 
 Now edit `src/App.js`.