feat: add ui devtools #30

feat: add ui devtools

Author: arjunvegda

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintignore

@@ -2,4 +2,6 @@ dist
 node_modules
 build
 .eslintrc.js
-coverage
+coverage
+react-shim.js
+__mocks__/styleMock.js

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
+    'plugin:storybook/recommended',
   ],
   plugins: [
     '@typescript-eslint',
@@ -25,34 +26,50 @@ module.exports = {
     es6: true,
   },
   parserOptions: {
+    project: './tsconfig.json',
     ecmaVersion: 2018,
     sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
   },
   rules: {
     eqeqeq: 'error',
     'no-var': 'error',
     'prefer-const': 'error',
     curly: ['warn', 'multi-line', 'consistent'],
-    'no-console': 'off',
-    'import/no-unresolved': ['error', { commonjs: true, amd: true }],
+    'no-console': ['error', { allow: ['warn', 'info', 'error'] }],
+    'import/no-unresolved': [
+      'error',
+      {
+        commonjs: true,
+        amd: true,
+      },
+    ],
     'import/export': 'error',
     '@typescript-eslint/no-duplicate-imports': ['error'],
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-vars': [
       'warn',
-      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
     ],
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
-    'jest/consistent-test-it': ['error', { fn: 'it', withinDescribe: 'it' }],
+    'jest/consistent-test-it': [
+      'error',
+      {
+        fn: 'it',
+        withinDescribe: 'it',
+      },
+    ],
     'import/order': [
       'error',
       {
-        alphabetize: { order: 'asc', caseInsensitive: true },
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
         groups: [
           'builtin',
           'external',
@@ -73,8 +90,9 @@ module.exports = {
         pathGroupsExcludedImportTypes: ['builtin'],
       },
     ],
-    'react/jsx-uses-react': 'off',
-    'react/react-in-jsx-scope': 'off',
+    // Disable it until we start supporting `react-jsx` again.
+    // 'react/jsx-uses-react': 'off',
+    // 'react/react-in-jsx-scope': 'off',
     'sort-imports': [
       'error',
       {

.nvmrc

@@ -1 +1 @@
-18.13.0
+16.13.2

.storybook/main.ts

@@ -0,0 +1,48 @@
+import { StorybookConfig } from '@storybook/react-webpack5';
+
+const webpack = require('webpack');
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    },
+  },
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+    enableCrashReports: false, // 👈 Appends the crash reports to the telemetry events
+  },
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    config?.plugins?.push(
+      new webpack.DefinePlugin({
+        __DEV__: configType === 'DEVELOPMENT',
+      }),
+    );
+
+    // Return the altered config
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript,typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "files.autoSave": "onFocusChange",
+  "editor.smoothScrolling": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

CHANGELOG.md

@@ -1,3 +1,61 @@
+# [0.3.0-next.4](https://github.com/jotai-labs/jotai-devtools/compare/v0.3.0-next.3...v0.3.0-next.4) (2023-03-02)
+
+### Bug Fixes
+
+- bundle in fonts for better stability
+  ([236cd75](https://github.com/jotai-labs/jotai-devtools/commit/236cd75c82add160635b0ded2fa2e0bfadc60e71))
+- fonts css
+  ([be8c16c](https://github.com/jotai-labs/jotai-devtools/commit/be8c16ccab78a0b9153b2a6c655d4f840547c73c))
+- use JetBrains mono fonts on NavLink
+  ([68cbe5a](https://github.com/jotai-labs/jotai-devtools/commit/68cbe5a4427ed1b5ea1bb968c1554a50f5ce1127))
+
+### Features
+
+- add option to display private atoms
+  ([d1875ee](https://github.com/jotai-labs/jotai-devtools/commit/d1875ee58ca2faa49512e30d1efc17f10b93de3b))
+
+# [0.3.0-next.3](https://github.com/jotai-labs/jotai-devtools/compare/v0.3.0-next.2...v0.3.0-next.3) (2023-02-17)
+
+### Bug Fixes
+
+- infer options type from Jotai
+  ([8ddad63](https://github.com/jotai-labs/jotai-devtools/commit/8ddad63821ce825b8871a14e7a6cc37eb2c93622))
+- use exactOptionalPropertyTypes
+  ([6c9cbdf](https://github.com/jotai-labs/jotai-devtools/commit/6c9cbdffa020e9f15e1e0198d18eefae0b2e4f28))
+
+### Features
+
+- add custom style nonce + remove global normalized styles
+  ([10d3c4a](https://github.com/jotai-labs/jotai-devtools/commit/10d3c4a93494bd27fc16d1607cc42ea3f2e00ae4))
+
+# [0.3.0-next.2](https://github.com/jotai-labs/jotai-devtools/compare/v0.3.0-next.1...v0.3.0-next.2) (2023-02-12)
+
+### Features
+
+- add error boundary
+  ([5667a05](https://github.com/jotai-labs/jotai-devtools/commit/5667a059da325ee8d0452e5d097d4eb14ab97c5e))
+
+# [0.3.0-next.1](https://github.com/jotai-labs/jotai-devtools/compare/v0.3.0-next.0...v0.3.0-next.1) (2023-02-10)
+
+### Bug Fixes
+
+- handle atom containing undefined values
+  ([c086a75](https://github.com/jotai-labs/jotai-devtools/commit/c086a75ed92066c78a3d42f5b3e5b924576bbee5))
+- inject react shim to the build
+  ([a20a235](https://github.com/jotai-labs/jotai-devtools/commit/a20a2355b08193fc4f8cde6dec85602ead7229df))
+
+### Features
+
+- make raw and parse value copyable
+  ([5348337](https://github.com/jotai-labs/jotai-devtools/commit/5348337530177f8db80e53d0d35e339cd78ad84c))
+
+# [0.3.0-next.0](https://github.com/jotai-labs/jotai-devtools/compare/v0.2.0...v0.3.0-next.0) (2023-02-07)
+
+### Features
+
+- **ui-devtools:** initial commit
+  ([7c38133](https://github.com/jotai-labs/jotai-devtools/commit/7c38133a360c0c97db6406becdc1bf939e1001e7))
+
 # [0.2.0](https://github.com/jotai-labs/jotai-devtools/compare/v0.2.0-next.1...v0.2.0) (2023-02-01)
 
 # [0.2.0-next.1](https://github.com/jotai-labs/jotai-devtools/compare/v0.2.0-next.0...v0.2.0-next.1) (2023-01-17)