Upgrading storybook from 7.5 to 7.6 (#592)

* refactor: updating deprecated storybook components

* Upgrading storybook from 7.5 to 7.6.10

* fix:updating order of pages

.storybook/preview.js

@@ -11,7 +11,14 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: ['Getting Started', ['Introduction', 'Installation']],
+      order: [
+        'Getting Started',
+        ['Introduction'],
+        'Colors',
+        'Shadows',
+        'Typography',
+        'Doc Components',
+      ],
     },
   },
 };

docs/ThemeColors.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { ColorSwatchGroup } from './components';
 import README from './ThemeColors.mdx';
@@ -14,9 +14,9 @@ export default {
       page: README,
     },
   },
-} as ComponentMeta<typeof ColorSwatchGroup>;
+} as Meta<typeof ColorSwatchGroup>;
 
-const Template: ComponentStory<typeof ColorSwatchGroup> = (args) => {
+const Template: StoryFn<typeof ColorSwatchGroup> = (args) => {
   return (
     <>
       <ColorSwatchGroup {...args} />

package.json

@@ -35,7 +35,6 @@
     "test": "jest",
     "test:watch": "jest --watch"
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.17.0",
     "@babel/preset-env": "^7.23.2",
@@ -47,14 +46,14 @@
     "@metamask/eslint-config-jest": "^9.0.0",
     "@metamask/eslint-config-nodejs": "^9.0.0",
     "@metamask/eslint-config-typescript": "^9.0.1",
-    "@storybook/addon-a11y": "^7.5.0",
-    "@storybook/addon-actions": "^7.5.0",
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-mdx-gfm": "^7.5.0",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-mdx-gfm": "^7.6.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-webpack5": "^7.5.0",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@types/jest": "^26.0.13",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
@@ -78,7 +77,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.54.3",
     "sass-loader": "10.1.1",
-    "storybook": "^7.5.0",
+    "storybook": "^7.6.10",
     "style-loader": "2.0.0",
     "ts-jest": "^26.3.0",
     "typescript": "^4.2.4",