Fix import in InfoDialog component so storybook can render successfully

.storybook/main.js

@@ -8,9 +8,9 @@ module.exports = {
     '@storybook/addon-interactions',
     '@storybook/preset-create-react-app',
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
   },
   webpackFinal: async config => {
     config.resolve.plugins = config.resolve.plugins || [];
@@ -21,4 +21,7 @@ module.exports = {
     );
     return config;
   },
+  docs: {
+    autodocs: true,
+  },
 };

package.json

@@ -30,8 +30,8 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src --no-error-on-unmatched-pattern",
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix --no-error-on-unmatched-pattern",
     "fix": "npm run format:write && npm run lint:fix",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006 -s public",
+    "build-storybook": "storybook build -s public",
     "chromatic": "npx chromatic --project-token=chpt_df2240e310a4eff"
   },
   "eslintConfig": {
@@ -63,16 +63,15 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.0.11",
+    "@storybook/addon-essentials": "^7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "^7.0.11",
+    "@storybook/node-logger": "^7.0.11",
+    "@storybook/preset-create-react-app": "^7.0.11",
+    "@storybook/react": "^7.0.11",
+    "@storybook/react-webpack5": "^7.0.11",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -98,6 +97,7 @@
     "msw": "^1.2.1",
     "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
+    "storybook": "^7.0.11",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "webpack": "^5.76.2"
   },

src/features/InfoDialog/InfoDialog.tsx

@@ -1,7 +1,7 @@
 import { Dialog, DialogContent, Tooltip, Zoom } from '@mui/material';
 
 import { findPokeTypeAsset } from 'components/PokemonTypes';
-import { colorTypeGradients } from 'components/PokemonCard/utils';
+import { colorTypeGradients } from 'components/utils';
 import GenderRate from 'components/GenderRate';
 
 export interface InfoDialogProps {

src/features/Pokedex/Pokedex.stories.tsx

@@ -0,0 +1,146 @@
+import { Provider } from 'react-redux';
+import { configureStore, createSlice } from '@reduxjs/toolkit';
+
+import Pokedex, { PokedexProps } from './Pokedex';
+import * as PokemonCardStories from 'components/PokemonCard/PokemonCard.stories';
+import { initialState } from './pokedexSlice';
+import { PokedexStateProps } from './types/slice';
+import { ComponentStory } from '@storybook/react';
+
+const Mockstate = {
+  // Copied from Redux DevTools from browser
+  pokedex: {
+    isLoadingPokemons: true,
+    pokemonCardList: [
+      {
+        id: 1,
+        name: 'bulbasaur',
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+        types: ['grass', 'poison'],
+      },
+      {
+        id: 2,
+        name: 'ivysaur',
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/2.svg',
+        types: ['grass', 'poison'],
+      },
+      {
+        id: 3,
+        name: 'venusaur',
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/3.svg',
+        types: ['grass', 'poison'],
+      },
+      {
+        id: 4,
+        name: 'charmander',
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/4.svg',
+        types: ['fire'],
+      },
+      {
+        id: 5,
+        name: 'charmeleon',
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/5.svg',
+        types: ['fire'],
+      },
+      {
+        id: 6,
+        name: 'charizard',
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/6.svg',
+        types: ['fire', 'flying'],
+      },
+    ],
+  },
+  filter: {
+    regionOptions: [],
+    typeOptions: [],
+    sortOptions: [],
+    selectedRegion: '',
+    selectedType: '',
+    selectedSort: '',
+    searchInput: '',
+  },
+  pokeApi: {
+    queries: {},
+    mutations: {},
+    provided: {},
+    subscriptions: {},
+    config: {
+      online: true,
+      focused: true,
+      middlewareRegistered: false,
+      refetchOnFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMountOrArgChange: false,
+      keepUnusedDataFor: 60,
+      reducerPath: 'pokeApi',
+    },
+  },
+};
+
+interface MockStoreProps {
+  pokedexState: PokedexStateProps;
+  children: React.ReactNode;
+}
+
+const mockSlice = (pokedexState: PokedexStateProps) => {
+  return createSlice({
+    name: 'pokedex',
+    initialState: pokedexState,
+    reducers: {
+      setIsLoadingPokemons: (state, action) => {
+        state.isLoadingPokemons = action.payload;
+      },
+    },
+  });
+};
+
+const mockStore = (pokedexState: PokedexStateProps) => {
+  return configureStore({
+    reducer: {
+      pokedex: mockSlice(pokedexState).reducer,
+    },
+  });
+};
+
+// A super-simple mock of a redux store
+const Mockstore: React.FC<MockStoreProps> = ({ pokedexState, children }) => (
+  <Provider store={mockStore(pokedexState)}>{children}</Provider>
+);
+
+export default {
+  component: Pokedex,
+  title: 'features/Pokedex',
+  decorators: [
+    (story: () => React.ReactNode) => (
+      <div style={{ padding: '3rem' }}>{story()}</div>
+    ),
+  ],
+  tags: ['autodocs'],
+  excludeStories: /.*MockedState$/,
+};
+
+export const Default = {
+  decorators: [
+    (story: () => React.ReactNode) => (
+      <Mockstore pokedexState={initialState}>{story()}</Mockstore>
+    ),
+  ],
+};
+
+// const Template: ComponentStory<typeof Pokedex> = (args: PokedexProps) => (
+//   <Pokedex {...args} />
+// );
+//
+// export const Primary = Template.bind({});
+// Primary.args = {
+//   selectedRegion: 'kanto',
+//   selectedType: 'All Types',
+//   selectedSort: 'id',
+//   searchInput: '',
+// };