Merge branch 'feat/aws' of github.com:coingaming/moon-light into feat…

…/aws
coingaming · Dec 19, 2023 · 53bfc4d · 53bfc4d
2 parents 2f3e521 + f5a392d
commit 53bfc4d
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 115 deletions.
diff --git a/docs/components/MDX.tsx b/docs/components/MDX.tsx
@@ -1,8 +1,33 @@
 import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
+import { ReactNode, ComponentProps, HTMLProps } from "react";
+
+const defaultComponents: ComponentProps<any> = {
+  a: (props: HTMLProps<HTMLAnchorElement>) => (
+    <a {...props} className="transition-colors underline hover:text-piccolo">
+      {props.children}
+    </a>
+  ),
+  strong: (props: HTMLProps<HTMLSpanElement>) => (
+    <span {...props} className="font-medium">
+      {props.children}
+    </span>
+  ),
+  ul: (props: HTMLProps<HTMLUListElement>) => (
+    <ul {...props} className="list-disc ps-8">
+      {props.children}
+    </ul>
+  ),
+};
 
 export function MDX({
   markdown,
   ...rest
 }: { markdown: string } & Omit<MDXRemoteProps, "source">) {
-  return <MDXRemote {...rest} source={markdown} />;
+  return (
+    <MDXRemote
+      {...rest}
+      source={markdown}
+      components={rest.components || defaultComponents}
+    />
+  );
 }
diff --git a/docs/components/MainLayout.tsx b/docs/components/MainLayout.tsx
@@ -28,7 +28,7 @@ export const MainLayout = ({
         <Breadcrumbs />
       </Header>
       <Sidebar />
-      <main className="min-h-screen ms-80 me-0 lg:me-72 bg-goku flex-1 flex flex-col px-5 xl:px-20 2xl:px-32 pt-12 xl:pb-52">
+      <main className="min-h-screen ms-80 me-0 lg:me-72 bg-goku text-bulma flex-1 flex flex-col rounded-ss-3xl px-5 xl:px-20 2xl:px-32 pt-12 xl:pb-52">
         {children}
       </main>
       {componentName && contentSidebar && (

diff --git a/docs/components/settings/BrandSwitcher.tsx b/docs/components/settings/BrandSwitcher.tsx
@@ -1,18 +1,19 @@
 "use client";
 
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useLayoutEffect, useState } from "react";
 import MenuItem from "@heathmont/moon-core-tw/lib/es/menuItem/MenuItem";
-import useTheme, { Brand, themes } from "./utils/useThemes";
+import useTheme, { type Brand } from "./utils/useThemes";
+import { themes } from "@/constants";
 
-const THEMES = Object.keys(themes);
+const THEMES = Object.keys(themes) as Brand[];
 
 const BrandSwitcher = () => {
   const { setBrand, getBrand } = useTheme();
-  const [theme, setTheme] = useState(getBrand);
+  const [theme, setTheme] = useState(getBrand());
   const onClickSetTheme = useCallback(
-    (value: string) => () => {
+    (value: Brand) => () => {
       setTheme(value);
-      setBrand(value as Brand);
+      setBrand(value);
     },
     [setTheme, setBrand],
   );

diff --git a/docs/components/settings/Settings.tsx b/docs/components/settings/Settings.tsx
@@ -16,11 +16,17 @@ import BrandSwitcher from "./BrandSwitcher";
 import { useRtl } from "@/components/settings/utils/RTLProvider";
 import useTheme from "@/components/settings/utils/useThemes";
 import { isLocalhost } from "./utils/isLocalhost";
+import { useLayoutEffect } from "react";
 
 const Settings = () => {
-  const { toggleDarkLightMode, isDarkThemeEnabled } = useTheme();
+  const { apply, toggleDarkLightMode, isDarkThemeEnabled } = useTheme();
   const { isRTLEnabled, toggleRTL } = useRtl();
 
+  // Apply the current theme from localStorage when loaded
+  useLayoutEffect(() => {
+    apply();
+  }, []);
+
   return (
     <Popover
       className="fixed z-50 bottom-4 lg:bottom-20 end-4"

diff --git a/docs/components/settings/utils/useThemes.tsx b/docs/components/settings/utils/useThemes.tsx
@@ -1,97 +1,13 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React from "react";
 import isStorageAvailable from "./isStorageAvailable";
 
-type ColorModes = {
-  dark: string;
-  light: string;
-};
-
-type Themes = {
-  betadda: ColorModes;
-  bitcasino: ColorModes;
-  bombay: ColorModes;
-  // TODO don't need comms
-  // comms: ColorModes;
-  empire: ColorModes;
-  hub88: ColorModes;
-  lab: ColorModes;
-  livecasino: ColorModes;
-  moonDesign: ColorModes;
-  partners: ColorModes;
-  sportsbet: ColorModes;
-  tradeart: ColorModes;
-  tradeartMiniBetting: ColorModes;
-  travel: ColorModes;
-  pay: ColorModes;
-};
-
-export const themes: Themes = {
-  betadda: {
-    dark: "theme-betadda-dark",
-    light: "theme-betadda-light",
-  },
-  bitcasino: {
-    dark: "theme-bitcasino-dark",
-    light: "theme-bitcasino-light",
-  },
-  bombay: {
-    dark: "theme-bombay-club",
-    light: "theme-bombay-club",
-  },
-  // comms: {
-  //   dark: 'theme-comms-dark',
-  //   light: 'theme-comms-light',
-  // },
-  empire: {
-    dark: "theme-empire-dark",
-    light: "theme-empire-light",
-  },
-  hub88: {
-    dark: "theme-hub88-light",
-    light: "theme-hub88-light",
-  },
-  lab: {
-    dark: "theme-lab-light",
-    light: "theme-lab-light",
-  },
-  livecasino: {
-    dark: "theme-livecasino-dark",
-    light: "theme-livecasino-light",
-  },
-  moonDesign: {
-    dark: "theme-moon-dark",
-    light: "theme-moon-light",
-  },
-  partners: {
-    dark: "theme-partners-light",
-    light: "theme-partners-light",
-  },
-  sportsbet: {
-    dark: "theme-sb-dark",
-    light: "theme-sb-light",
-  },
-  tradeart: {
-    dark: "theme-tradeart-dark",
-    light: "theme-tradeart-light",
-  },
-  tradeartMiniBetting: {
-    dark: "theme-tradeart-mini-betting",
-    light: "theme-tradeart-mini-betting",
-  },
-  travel: {
-    dark: "theme-travel-light",
-    light: "theme-travel-light",
-  },
-  pay: {
-    dark: "theme-pay-light",
-    light: "theme-pay-light",
-  },
-} as const;
+import type { ThemeColorModes, Themes } from "@/types";
+import { themes } from "@/constants";
 
 export type Brand = keyof Themes;
-export type Mode = keyof ColorModes;
+export type Mode = keyof ThemeColorModes;
 
 const useTheme = () => {
   const [themeState, setThemeState] = React.useState({
@@ -117,18 +33,16 @@ const useTheme = () => {
     localStorage.setItem("theme", className);
   };
 
-  const getTheme = () => {
+  const getBrand = (): Brand => {
     if (!isStorageAvailable("localStorage")) {
-      return "";
+      return "moonDesign";
     }
-    return localStorage.getItem("theme");
-  };
-
-  const getBrand = () => {
-    if (!isStorageAvailable("localStorage")) {
-      return "";
+    const themeFromStorage = localStorage.getItem("brand") as Brand;
+    if (Object.keys(themes).includes(themeFromStorage)) {
+      return themeFromStorage;
+    } else {
+      return "moonDesign";
     }
-    return localStorage.getItem("brand");
   };
 
   const setBrand = (brand: Brand) => {
@@ -163,14 +77,28 @@ const useTheme = () => {
     if (!isStorageAvailable("localStorage")) {
       return "";
     }
-    return localStorage.getItem("themeMode") || "light";
+    const modeFromLocalStorage = localStorage.getItem("themeMode") || "";
+    if (["dark", "light"].includes(modeFromLocalStorage)) {
+      return modeFromLocalStorage;
+    }
+    return "light";
+  };
+
+  const apply = () => {
+    const brand = getBrand();
+    const theme = getMode() as Mode;
+    setThemeState((prev) => ({
+      ...prev,
+      colorMode: theme,
+    }));
+    setBrand(brand);
   };
 
   return {
+    apply,
     setBrand,
     getBrand,
     toggleDarkLightMode: toggleMode,
-    getTheme,
     getMode,
     isDarkThemeEnabled: getMode() === "dark",
   };

diff --git a/docs/constants/index.ts b/docs/constants/index.ts
@@ -1,2 +1,4 @@
 // Playwright constants
 export * from "./playwright";
+// Themes
+export * from "./themes";
diff --git a/docs/constants/themes.ts b/docs/constants/themes.ts
@@ -0,0 +1,64 @@
+import type { Themes } from "@/types";
+
+export const themes: Themes = {
+  betadda: {
+    dark: "theme-betadda-dark",
+    light: "theme-betadda-light",
+  },
+  bitcasino: {
+    dark: "theme-bitcasino-dark",
+    light: "theme-bitcasino-light",
+  },
+  bombay: {
+    dark: "theme-bombay-club",
+    light: "theme-bombay-club",
+  },
+  // comms: {
+  //   dark: 'theme-comms-dark',
+  //   light: 'theme-comms-light',
+  // },
+  empire: {
+    dark: "theme-empire-dark",
+    light: "theme-empire-light",
+  },
+  hub88: {
+    dark: "theme-hub88-light",
+    light: "theme-hub88-light",
+  },
+  lab: {
+    dark: "theme-lab-light",
+    light: "theme-lab-light",
+  },
+  livecasino: {
+    dark: "theme-livecasino-dark",
+    light: "theme-livecasino-light",
+  },
+  moonDesign: {
+    dark: "theme-moon-dark",
+    light: "theme-moon-light",
+  },
+  partners: {
+    dark: "theme-partners-light",
+    light: "theme-partners-light",
+  },
+  sportsbet: {
+    dark: "theme-sb-dark",
+    light: "theme-sb-light",
+  },
+  tradeart: {
+    dark: "theme-tradeart-dark",
+    light: "theme-tradeart-light",
+  },
+  tradeartMiniBetting: {
+    dark: "theme-tradeart-mini-betting",
+    light: "theme-tradeart-mini-betting",
+  },
+  travel: {
+    dark: "theme-travel-light",
+    light: "theme-travel-light",
+  },
+  pay: {
+    dark: "theme-pay-light",
+    light: "theme-pay-light",
+  },
+} as const;
diff --git a/docs/middleware.ts b/docs/middleware.ts
@@ -2,8 +2,8 @@ import { NextResponse } from "next/server";
 import { NextRequest } from "next/server";
 
 export function middleware(request: NextRequest) {
-  console.log("intercepted", request.url);
-  let isPlaywright = !!request.headers.get("x-playwright");
+  // console.log("intercepted", request.url);
+  // let isPlaywright = !!request.headers.get("x-playwright");
   // if (!isPlaywright) {
   //   return NextResponse.next()
   // }

diff --git a/docs/scripts/cli.mjs b/docs/scripts/cli.mjs
@@ -19,9 +19,9 @@ export const ${name} = () => {
 
 export default ${name}
 `;
-  const _e2e = `test('${name}: should render and match screenshot', async ({ page }) => {
+  const _e2e = `\ntest('${name}: should render and match screenshot', async ({ page }) => {
     await expect(page).toHaveScreenshot(\`${component}-${name}.png\`, {
-        maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO
+        maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO
     })
 })
 `;

diff --git a/docs/types/index.ts b/docs/types/index.ts
@@ -1,2 +1,3 @@
-export { type PropsTableProp, type PropsTablePropTypes } from "./propsTable";
-export { type NonEmptyArray } from "./utils";
+export type { PropsTableProp, PropsTablePropTypes } from "./propsTable";
+export type { NonEmptyArray } from "./utils";
+export type { ThemeColorModes, Themes } from "./theme";
diff --git a/docs/types/theme.ts b/docs/types/theme.ts
@@ -0,0 +1,23 @@
+export type ThemeColorModes = {
+  dark: string;
+  light: string;
+};
+
+export type Themes = {
+  moonDesign: ThemeColorModes;
+  betadda: ThemeColorModes;
+  bitcasino: ThemeColorModes;
+  bombay: ThemeColorModes;
+  // TODO don't need comms
+  // comms: ThemeColorModes;
+  empire: ThemeColorModes;
+  hub88: ThemeColorModes;
+  lab: ThemeColorModes;
+  livecasino: ThemeColorModes;
+  partners: ThemeColorModes;
+  sportsbet: ThemeColorModes;
+  tradeart: ThemeColorModes;
+  tradeartMiniBetting: ThemeColorModes;
+  travel: ThemeColorModes;
+  pay: ThemeColorModes;
+};
diff --git a/docs/utils/getExamples.ts b/docs/utils/getExamples.ts
@@ -28,7 +28,7 @@ export async function isEmptyDirectory(_path: string) {
     return files.length === 0;
   } catch (err) {
     if (err instanceof Error) {
-      console.log("Error checking directory Empty:", err.message);
+      console.error("Error checking directory Empty:", err.message);
       throw err;
     }
   }

diff --git a/words.txt b/words.txt
@@ -16,3 +16,15 @@ frieza
 libc
 compat
 corepack
+betadda
+bitcasino
+bombay
+hub88
+lab
+livecasino
+moonDesign
+sportsbet
+tradeart
+goku
+bulma
+sportsbet