rightoneducation · drewjhart · Sep 18, 2024 · Sep 19, 2024 · Oct 3, 2024 · Oct 3, 2024
diff --git a/central_v2/.gitignore b/central_v2/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*storybook.log
diff --git a/central_v2/.storybook/main.ts b/central_v2/.storybook/main.ts
@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;
diff --git a/central_v2/.storybook/preview-head.html b/central_v2/.storybook/preview-head.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Karla&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Karla:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body></body>
+</html>
diff --git a/central_v2/.storybook/preview.ts b/central_v2/.storybook/preview.ts
@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+    },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    layout: 'fullscreen',
+  },
+};
+
+export default preview;
diff --git a/central_v2/package.json b/central_v2/package.json
@@ -6,6 +6,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.16.7",
+    "@storybook/addon-viewport": "^8.3.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -14,12 +15,15 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.34",
+    "chromatic": "^11.11.0",
+    "init": "^0.1.2",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-scripts": "5.0.1",
+    "storybook": "^8.3.5",
     "swiper": "^11.1.1",
     "typescript": "^4.4.2",
     "uuid": "^10.0.0",
@@ -29,7 +33,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token 99c8d45b7b98"
   },
   "prettier": {
     "singleQuote": true
@@ -46,7 +53,8 @@
       "airbnb-typescript",
       "prettier",
       "plugin:@typescript-eslint/recommended",
-      "plugin:import/typescript"
+      "plugin:import/typescript",
+      "plugin:storybook/recommended"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
@@ -114,13 +122,26 @@
     ]
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/preset-create-react-app": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@types/lodash": "^4.17.7",
     "@typescript-eslint/parser": "^8.1.0",
     "eslint": "^9.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.3.3"
+    "eslint-plugin-storybook": "^0.9.0",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
+    "webpack": "^5.95.0"
   }
 }
diff --git a/central_v2/src/.storybook/main.ts b/central_v2/src/.storybook/main.ts
@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-viewport'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;
diff --git a/central_v2/src/.storybook/preview-head.html b/central_v2/src/.storybook/preview-head.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Karla&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Karla:wght@800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body></body>
+</html>
diff --git a/central_v2/src/.storybook/preview.ts b/central_v2/src/.storybook/preview.ts
@@ -0,0 +1,24 @@
+// import type { Preview } from '@storybook/react';
+
+// const preview: Preview = {
+//   parameters: {
+//     actions: { argTypesRegex: '^on[A-Z].*' },
+//     controls: {
+//       matchers: {
+//         color: /(background|color)$/i,
+//         date: /Date$/,
+//       },
+//     },
+//     backgrounds: {
+//       default: 'dark',
+//     },
+//     options: {
+//       storySort: {
+//         method: 'alphabetical',
+//       },
+//     },
+//     layout: 'fullscreen',
+//   },
+// };
+
+// export default preview;
diff --git a/central_v2/src/components/CardCarousal.tsx b/central_v2/src/components/CardCarousal.tsx
@@ -1,13 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { Box, Grow, Fade, Skeleton } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 import { APIClients, IGameTemplate } from '@righton/networking';
 import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/pagination';
-import { useTheme } from '@mui/material/styles';
+import { v4 as uuidv4 } from 'uuid';
 import StyledGameCard from './GameCard';
 import placeHolder from '../images/placeHolder.svg';
-
+import SkeletonGameCard from './SkeletonGameCard';
+import 'swiper/css';
+import 'swiper/css/pagination';
 
 interface GameCardCarouselProps {
     apiClients: APIClients;
@@ -17,8 +19,7 @@ interface GameCardCarouselProps {
 export default function GameCardCarousel({ apiClients, recommendedGames }: GameCardCarouselProps) {
     const theme = useTheme();
     const swiperRef = useRef<SwiperRef>(null);
-
-
+    const maxSlides = 12;
     return (
         <Swiper
             style={{ width: '100%' }}
@@ -34,6 +35,7 @@ export default function GameCardCarousel({ apiClients, recommendedGames }: GameC
             }}
             ref={swiperRef}
             spaceBetween={theme.sizing.smPadding}
+            updateOnWindowResize
             centeredSlides
             loop
             navigation
@@ -45,22 +47,30 @@ export default function GameCardCarousel({ apiClients, recommendedGames }: GameC
                     slidesPerView: 1.8,
                 },
                 '1500': {
-                    slidesPerView: 3.3,
+                    slidesPerView: 3.5,
+
                 },
             }}
         >
-            {recommendedGames.map((game) => (
-                <SwiperSlide key={game.id}>
-                    <StyledGameCard
-                        id={game.id || 'no id given'}
-                        title={game.title || 'Untitled Game'}
-                        description={game.description || 'No description available'}
-                        image={game.imageUrl || placeHolder}
-                        apiClients={apiClients}
-                        game={game}
-                    />
-                </SwiperSlide>
-            ))}
+            {Array.from({ length: maxSlides }).map((_, index) => {
+                const game = recommendedGames[index];
+                return (
+                    <SwiperSlide key={index}> {/* eslint-disable-line */}
+                        {game ? (
+                            <StyledGameCard
+                                game={game}
+                                id={game.id}
+                                title={game.title}
+                                description={game.description}
+                                image={game.imageUrl || placeHolder}
+                                apiClients={apiClients}
+                            />
+                        ) : (
+                            <SkeletonGameCard index={index} />
+                        )}
+                    </SwiperSlide>
+                );
+            })} 
         </Swiper>
     );
 }
diff --git a/central_v2/src/components/EGHeader.tsx b/central_v2/src/components/EGHeader.tsx
@@ -9,7 +9,7 @@ import profile from '../images/profileplaceholder.svg';
 import hamburger from '../images/hamburger.svg';
 import hamburgerX from '../images/hamburgerX.svg';
 import plus from '../images/plus.svg';
-import { ScreenSize } from '../lib/HostModels';
+import { ScreenSize } from '../lib/CentralModels';
 import { SelectedCentralPages } from '../lib/ScreenEnums';
 
 interface EGHeaderProps {