chore: wip, fix tests

Author: gtk-grafana

.gitignore

@@ -1,3 +1,4 @@
 .idea
 node_modules
 lib
+dist

README.md

@@ -1,121 +1,39 @@
-# react-json-tree
+# react-vite-component-template
 
-React JSON Viewer Component, Extracted from [redux-devtools](https://github.com/reduxjs/redux-devtools). Supports [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable) objects, such as [Immutable.js](https://facebook.github.io/immutable-js/).
+Template for building a **React component library**, with **Vite**, **TypeScript** and **Storybook**.
 
-![](https://img.shields.io/npm/v/react-json-tree.svg)
+Check my post about this repository [here](https://victorlillo.dev/blog/react-typescript-vite-component-library).
 
-### Usage
+## Features
 
-```jsx
-import { JSONTree } from 'react-json-tree';
-// If you're using Immutable.js: `npm i --save immutable`
-import { Map } from 'immutable';
+- ⚛️ **React** component library with **TypeScript**.
 
-// Inside a React component:
-const json = {
-  array: [1, 2, 3],
-  bool: true,
-  object: {
-    foo: 'bar',
-  },
-  immutable: Map({ key: 'value' }),
-};
+- 🏗️ **Vite** as development environment.
 
-<JSONTree data={json} />;
-```
+- 🌳 **Tree shaking**, for not distributing dead-code.
 
-#### Result:
+- 📚 **Storybook** for live viewing the components.
 
-![](https://i.ibb.co/0KSYRJg/example-result.png)
+- 🎨 **PostCSS** for processing our CSS.
 
-Check out [examples](examples) directory for more details.
+- 🖌️ **CSS Modules** in development, compiled CSS for production builds.
 
-### Theming
+- 🧪 Testing with **Vitest** and **React Testing Library**.
 
-Style with CSS. @todo base styles
+- ✅ Code quality tools with **ESLint**, **Prettier** and **Stylelint**.
 
-<div>
-  <JSONTree data={data} />
-</div>;
-```
+## 🤖 Scripts
 
-#### Advanced Customization
-
-```jsx
-<div>
-  <JSONTree
-    data={data}
-  />
-</div>
-```
-
-#### Customize Labels for Arrays, Objects, and Iterables
-
-You can pass `getItemString` to customize the way arrays, objects, and iterable nodes are displayed (optional).
-
-By default, it'll be:
-
-```jsx
-<JSONTree getItemString={(type, data, itemType, itemString, keyPath)
-  => <span>{itemType} {itemString}</span>}
-```
-
-But if you pass the following:
-
-```jsx
-const getItemString = (type, data, itemType, itemString, keyPath)
-  => (<span> // {type}</span>);
-```
-
-Then the preview of child elements now look like this:
-
-![](http://cl.ly/image/1J1a0b0T0K3c/screenshot%202015-10-07%20at%203.44.31%20PM.png)
-
-#### Customize Rendering
-
-You can pass the following properties to customize rendered labels and values:
-
-```jsx
-<JSONTree
-  labelRenderer={([key]) => <strong>{key}</strong>}
-  valueRenderer={(raw) => <em>{raw}</em>}
-/>
-```
-
-In this example the label and value will be rendered with `<strong>` and `<em>` wrappers respectively.
-
-For `labelRenderer`, you can provide a full path - [see this PR](https://github.com/chibicode/react-json-tree/pull/32).
-
-Their full signatures are:
-
-- `labelRenderer: function(keyPath, nodeType, expanded, expandable)`
-- `valueRenderer: function(valueAsString, value, ...keyPath)`
-
-#### More Options
-
-- `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default)
-- `hideRoot: boolean` - if `true`, the root node is hidden.
-- `sortObjectKeys: boolean | function(a, b)` - sorts object keys with compare function (optional). Isn't applied to iterable maps like `Immutable.Map`.
-- `postprocessValue: function(value)` - maps `value` to a new `value`
-- `isCustomNode: function(value)` - overrides the default object type detection and renders the value as a single value
-- `collectionLimit: number` - sets the number of nodes that will be rendered in a collection before rendering them in collapsed ranges
-- `keyPath: (string | number)[]` - overrides the initial key path for the root node (defaults to `[root]`)
-
-### Credits
-
-- All credits to [Dave Vedder](http://www.eskimospy.com/) ([[email protected]](mailto:[email protected])), who wrote the original code as [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/).
-- Extracted from [redux-devtools](https://github.com/gaearon/redux-devtools), which contained ES6 + inline style port of [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/) by [Daniele Zannotti](http://www.github.com/dzannotti) ([[email protected]](mailto:[email protected]))
-- [Iterable support](https://github.com/gaearon/redux-devtools/pull/79) thanks to [Daniel K](https://github.com/FredyC).
-- npm package created by [Shu Uesugi](http://github.com/chibicode) ([[email protected]](mailto:[email protected])) per [this issue](https://github.com/gaearon/redux-devtools/issues/85).
-- 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
-
-- [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)
-- [react-json-view](https://github.com/mac-s-g/react-json-view)
-
-### License
-
-MIT
+|      Script       | Function                                                                           |
+| :---------------: | ---------------------------------------------------------------------------------- |
+|      `build`      | Build the `dist`, with types declarations, after checking types with TypeScript.   |
+|      `lint`       | Lint the project with **Eslint**.                                                  |
+|    `lint:fix`     | Lint and fix the project with **Eslint**.                                          |
+|     `format`      | Check the project format with **Prettier**.                                        |
+|   `format:fix`    | Format the project code with **Prettier**.                                         |
+|    `stylelint`    | Lint the styles code with **Stylelint**.                                           |
+|  `stylelint:fix`  | Lint and fix the styles code with **Stylelint**.                                   |
+|    `storybook`    | Start a Storybook development server.                                              |
+| `build-storybook` | Build the Storybook `dist`.                                                        |
+|      `test`       | Run the tests with **Vitest** using `jsdom` and starts a **Vitest UI** dev server. |
+|    `coverage`     | Generate a coverage report, with **v8**.                                           |

eslint.config.js

@@ -1,12 +1,31 @@
-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'
+import storybook from 'eslint-plugin-storybook'
 
-export default [
-  ...eslintJs,
-  ...eslintTsReact(import.meta.dirname),
-  ...eslintTsReactJest(import.meta.dirname),
+export default tseslint.config(
+  { ignores: ['dist', '.storybook'] },
   {
-    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)'],
+    extends: [...storybook.configs['flat/recommended']],
+  }
+)