.storybook/main.js

@@ -8,9 +8,9 @@ module.exports = {
     '@storybook/addon-interactions',
     '@storybook/preset-create-react-app',
   ],
-  framework: {
+  framework: '@storybook/react',
-    name: '@storybook/react-webpack5',
+  core: {
-    options: {},
+    builder: '@storybook/builder-webpack5',
   },
   webpackFinal: async config => {
     config.resolve.plugins = config.resolve.plugins || [];
@@ -21,7 +21,4 @@ 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": "storybook dev -p 6006 -s public",
+    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "storybook build -s public",
+    "build-storybook": "build-storybook -s public",
     "chromatic": "npx chromatic --project-token=chpt_df2240e310a4eff"
   },
   "eslintConfig": {
@@ -63,15 +63,16 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.0.11",
+    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^7.0.11",
+    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^7.0.11",
+    "@storybook/addon-links": "^6.5.16",
-    "@storybook/node-logger": "^7.0.11",
+    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/preset-create-react-app": "^7.0.11",
+    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^7.0.11",
+    "@storybook/node-logger": "^6.5.16",
-    "@storybook/react-webpack5": "^7.0.11",
+    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -97,7 +98,6 @@
     "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/utils';
+import { colorTypeGradients } from 'components/PokemonCard/utils';
 import GenderRate from 'components/GenderRate';
 
 export interface InfoDialogProps {

src/features/Pokedex/Pokedex.stories.tsx

@@ -1,146 +0,0 @@
-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: '',
-// };