fix: upgrade storybook version

cratebind · Dec 21, 2021 · 642452e · 642452e
1 parent 128d336
commit 642452e
Show file tree

Hide file tree

Showing 11 changed files with 1,142 additions and 581 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,29 +1,22 @@
 module.exports = {
-  extends: [
-    'cratebind',
-    'react-app',
-    'prettier/@typescript-eslint',
-    'plugin:prettier/recommended',
-    "plugin:mdx/recommended"
-  ],
+  extends: ["cratebind", "react-app", "prettier/@typescript-eslint", "plugin:prettier/recommended", "plugin:mdx/recommended", "plugin:storybook/recommended"],
   rules: {
-    'import/no-unresolved': [2, { ignore: ['minerva-ui', '@docusaurus', '@theme'] }],
-    "import/no-unused-modules": [
-      1,
-      {
-        "unusedExports": true,
-      }
-    ],
+    'import/no-unresolved': [2, {
+      ignore: ['minerva-ui', '@docusaurus', '@theme']
+    }],
+    "import/no-unused-modules": [1, {
+      "unusedExports": true
+    }],
     'react/display-name': 1,
-    'react/react-in-jsx-scope': 0,
+    'react/react-in-jsx-scope': 0
   },
   settings: {
     "import/resolver": {
       "node": {
         "extensions": [".js", ".jsx", ".ts", ".tsx", ".mdx"],
-        moduleDirectory: ['node_modules', 'src/'],
+        moduleDirectory: ['node_modules', 'src/']
       },
-      "typescript": {},
+      "typescript": {}
     }
   }
 };
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -17,7 +17,7 @@ module.exports = {
     return config;
   },
   reactOptions: {
-    fastRefresh: true,
+    // fastRefresh: true,
     strictMode: true,
   },
 }
diff --git a/docs/pages/components/Icon.mdx b/docs/pages/components/Icon.mdx
@@ -31,8 +31,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>

diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx
@@ -8,7 +8,9 @@ Built on top of the [Reach UI Menu Button](https://reacttraining.com/reach-ui/me
 
 When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application).
 
-<Callout emoji="⚠️">Do _not_ use this if you need to store a value. Use a `<select />` component instead.
+<Callout emoji="⚠️">
+  Do _not_ use this if you need to store a value. Use a `<select />` component
+  instead.
 </Callout>
 
 ```js

diff --git a/docs/pages/examples/Buttons.mdx b/docs/pages/examples/Buttons.mdx
@@ -23,7 +23,7 @@ render(
 <Stack horizontal>
   <Button>
     <Icon name="mail" mr={2} size="16px" /> Inbox
-    </Button>
+  </Button>
   <Button>
     Save <Icon name="save" ml={2} size="16px" />
   </Button>

diff --git a/docs/pages/examples/Forms.mdx b/docs/pages/examples/Forms.mdx
@@ -181,64 +181,66 @@ Recreated from [Tailwind CSS example](https://tailwindcss.com/components/forms)
   return (
     <Stack>
       {items.map(plan => (
-      <Button
-        flexDirection="row"
-        width="100%"
-        borderWidth={0}
-        borderBottomWidth={1}
-        borderBottomStyle="solid"
-        borderBottomColor="gray.300"
-        pr={3}
-        pl={3}
-        overflow="hidden"
-        alignItems="center"
-        onClick={() => setSelected(plan)}
-      >
-        <Flex
-          width={4}
-          height={4}
-          backgroundColor={selected.id === plan.id ? '#5850ec' : 'transparent'}
-          mr={4}
-          borderRadius={100}
-          borderColor="#5850ec"
-          borderWidth={1}
-          borderStyle="solid"
-          justifyContent="center"
+        <Button
+          flexDirection="row"
+          width="100%"
+          borderWidth={0}
+          borderBottomWidth={1}
+          borderBottomStyle="solid"
+          borderBottomColor="gray.300"
+          pr={3}
+          pl={3}
+          overflow="hidden"
           alignItems="center"
+          onClick={() => setSelected(plan)}
         >
-          <Box
-            width={1}
-            height={1}
-            backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
-            borderRadius={50}
-            borderColor="#fff"
+          <Flex
+            width={4}
+            height={4}
+            backgroundColor={
+              selected.id === plan.id ? '#5850ec' : 'transparent'
+            }
+            mr={4}
+            borderRadius={100}
+            borderColor="#5850ec"
             borderWidth={1}
             borderStyle="solid"
-          />
-        </Flex>
-        <Flex
-          width="100%"
-          flexDirection="row"
-          justifyContent="space-between"
-          px={1}
-          py={4}
-        >
-          <Flex flexDirection="column" alignItems="flex-start">
-            <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
-              {plan.title}
-            </Text>
-            <Text color="gray.400">{plan.description}</Text>
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Box
+              width={1}
+              height={1}
+              backgroundColor={selected.id === plan.id ? '#fff' : 'transparent'}
+              borderRadius={50}
+              borderColor="#fff"
+              borderWidth={1}
+              borderStyle="solid"
+            />
           </Flex>
-          <Flex>
-            <Text fontSize="2xl" py={2}>
-              {plan.cost}/mo
-            </Text>
+          <Flex
+            width="100%"
+            flexDirection="row"
+            justifyContent="space-between"
+            px={1}
+            py={4}
+          >
+            <Flex flexDirection="column" alignItems="flex-start">
+              <Text fontWeight="bold" fontSize="xl" mb={1} color="gray.700">
+                {plan.title}
+              </Text>
+              <Text color="gray.400">{plan.description}</Text>
+            </Flex>
+            <Flex>
+              <Text fontSize="2xl" py={2}>
+                {plan.cost}/mo
+              </Text>
+            </Flex>
           </Flex>
-        </Flex>
-      </Button>
-    ))}
-  </Stack>
-  )
+        </Button>
+      ))}
+    </Stack>
+  );
 };
 ```
 

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -69,8 +69,8 @@ const customTheme = {
   icons: {
     // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
     warning: Warning,
-  }
-}
+  },
+};
 
 const App = () => (
   <ThemeProvider>

diff --git a/docs/theme/index.js b/docs/theme/index.js
@@ -232,6 +232,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
               className="text-current p-2 -mr-2"
               href={config.github}
               target="_blank"
+              rel="noreferrer"
             >
               <GitHubIcon height={28} />
             </a>
@@ -304,6 +305,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
                           filepathWithName
                         }
                         target="_blank"
+                        rel="noreferrer"
                       >
                         Edit this page on GitHub
                       </a>

diff --git a/package.json b/package.json
@@ -47,11 +47,11 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@cypress/react": "^4.16.4",
-    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/react": "^6.4.9",
     "@types/jest": "^25.1.4",
     "@types/jest-axe": "^3.2.1",
     "@types/react": "^17.0.0",
@@ -69,6 +69,7 @@
     "eslint-plugin-flowtype": "^4.7.0",
     "eslint-plugin-mdx": "^1.6.8",
     "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-storybook": "^0.5.5",
     "faker": "^5.1.0",
     "fork-ts-checker-webpack-plugin": "^6.0.3",
     "husky": "^3.0.9",

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -20,7 +20,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<ButtonProps> = (args: Omit<ButtonProps, 'as'>) => <Button {...args} />;
+const Template: Story<ButtonProps> = (args: Omit<ButtonProps, 'as'>) => (
+  <Button {...args} />
+);
 
 export const Default = Template.bind({});
 Default.args = {