refactor: storybook & linter (#268)

* update some libs

* sort out `no-extraneous-dependencies` rule

added this rule into `.eslintrc`
removed ignore comments for this rule

Author: snqb

.eslintrc

@@ -24,6 +24,12 @@
     }
   },
   "rules": {
+    /* quartz is a library with peer dependencies, so we do not need this rule to trigger on extraneous deps specified in `package.json/peerDependencies` */
+    "import/no-extraneous-dependencies": [
+      "error",
+      { "peerDependencies": false }
+    ],
+    
     "react-hooks/exhaustive-deps": "error",
     "space-before-function-paren": 0,
     "react/prop-types": 0,

package.json

@@ -44,10 +44,10 @@
     "@semantic-release/github": "^8.0.2",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/react": "^6.4.19",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/react": "^6.5.9",
     "@types/node": "^12.12.38",
     "@types/ramda": "^0.28.1",
     "@types/rc-slider": "^8.6.6",
@@ -56,8 +56,8 @@
     "@types/react-dom": "^16.9.14",
     "@types/rebass": "^4.0.10",
     "@types/rebass__forms": "^4.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "chromatic": "^5.10.2",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",

src/components/alternative-header/alternative-header.stories.tsx

@@ -139,7 +139,6 @@ Default.argTypes = {
     control: {
       type: 'text',
     },
-
     type: {
       summary: 'Card width (string or number px, %)',
     },

src/components/button/button.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/callout/callout.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import { Box } from 'rebass';
 import Callout, { ICalloutProps, CalloutTypes } from './index';

src/components/card-header/card-header.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 
 import { Box, Button } from 'rebass';

src/components/card/card.stories.tsx

@@ -1,9 +1,6 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { ArgTypes } from '@storybook/addons';
 import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { Story, Meta, ArgTypes } from '@storybook/react/types-6-0';
 
 import Card, { CardProps } from '.';
 import Button from '../button';

src/components/code-input/index.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';

src/components/dropdown/dropdown.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Box } from 'rebass';

src/components/editableSelect/editableSelect.stories.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import { Box } from 'rebass';
 

src/components/file-button/file-button.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/file-loader/file-loader.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 

src/components/file-system-explorer/file-system-explorer.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/file-system-explorer/file/file-explorer.stories.tsx

@@ -1,4 +1,3 @@
-// // eslint-disable-next-line import/no-extraneous-dependencies
 // import React from 'react';
 // import { Story, Meta } from '@storybook/react/types-6-0';
 //

src/components/file-system-explorer/folder/folder-explorer.stories.tsx

@@ -1,4 +1,3 @@
-// // eslint-disable-next-line import/no-extraneous-dependencies
 // import React from 'react';
 // import { Story, Meta } from '@storybook/react/types-6-0';
 //

src/components/footer-button/footer-button.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/form-tabs/form-tabs.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { Box } from 'rebass';

src/components/form-tabs/index.tsx

@@ -7,7 +7,6 @@ import React, {
   useState,
 } from 'react';
 import { Box, Flex } from 'rebass';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import ResizeObserver from 'resize-observer-polyfill';
 import {
   summaryContainerStyles,

src/components/form-tabs/tab/tab.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/icon-button/icon-button.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import { Story, Meta } from '@storybook/react/types-6-0';
 

src/components/input/input.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';

src/components/label/label.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 

src/components/navigation/navigation.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Box } from 'rebass';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import { Story, Meta } from '@storybook/react/types-6-0';
 

src/components/pagination/pagination.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/performance-bar/performance-bar.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import PerformanceBar, { PerformanceBarProps } from '.';

src/components/performance-card/performance-card.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import Labeling from '../typography/labeling';

src/components/popup/popup.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/row/row.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box } from 'rebass';
 import { Story, Meta } from '@storybook/react/types-6-0';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import Row, { RowProps } from './container';
 import RowGroup, { RowGroupProps } from './group';

src/components/select/select.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/select2/select.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';

src/components/spinner/spinner.stories.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import Spinner, { SpinnerProps } from '.';