fix: small fixes to the menu list

package.json

@@ -66,19 +66,20 @@
     "@mdx-js/loader": "^2.2.1",
     "@mdx-js/mdx": "^2.2.1",
     "@mdx-js/react": "^2.2.1",
-    "@next/mdx": "^13.0.7",
+    "@next/font": "^13.1.0",
+    "@next/mdx": "^13.1.0",
     "@stitches/react": "^1.2.8",
     "@types/glob": "^8.0.0",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.11.17",
     "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.30.0",
-    "eslint-config-next": "^13.0.7",
+    "eslint-config-next": "^13.1.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.26.0",
@@ -91,7 +92,7 @@
     "husky": "^8.0.1",
     "jest": "^29.0.3",
     "lint-staged": "^13.1.0",
-    "next": "^13.0.7",
+    "next": "^13.1.0",
     "next-seo": "^5.15.0",
     "pinst": "^3.0.0",
     "postcss": "^8.4.20",
@@ -112,7 +113,7 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
     "typescript-plugin-css-modules": "^4.1.1",
-    "vite": "^4.0.2",
+    "vite": "^4.0.3",
     "vite-plugin-static-copy": "^0.13.0"
   },
   "peerDependencies": {

src/lib/menu-list/menu-list.tsx

@@ -20,12 +20,15 @@ export const MenuList = ({ flow = 'column', className, ...props }: MenuListProps
   );
 };
 
-type MenuListItemProps<C extends ElementType> = PolyProps<C, ListItemVariants & { disabled?: boolean }>;
+type MenuListItemProps<C extends ElementType> = PolyProps<
+  C,
+  ListItemVariants & { disabled?: boolean; active?: boolean }
+>;
 type MenuListItemComponent = <C extends ElementType = 'span'>(props: MenuListItemProps<C>) => ReactElement | null;
 
 export const Item: MenuListItemComponent = forwardRef(
   <C extends ElementType = 'a'>(
-    { as, className, disabled, onKeyDown, 'aria-current': active, ...props }: MenuListItemProps<C>,
+    { as, className, disabled, onKeyDown, active, ...props }: MenuListItemProps<C>,
     ref: PolyRef<C>
   ) => {
     const Component = as || 'a';

src/lib/theme-provider/default-theme.cjs

@@ -31,7 +31,7 @@ const defaultTheme = {
     'inverse-surface': 'hsl(225 4.1% 19.2%)',
     'inverse-on-surface': 'hsl(255 15.4% 94.9%)',
     'disabled': 'hsl(0deg 0% 90%)',
-    'on-disabled': 'hsl(204 9.1% 30%)',
+    'on-disabled': 'hsl(204 9.1% 26%)',
   },
   // Tailwind default + xs and popper
   boxShadow: {

src/lib/theme-provider/theme-provider.tsx

@@ -13,41 +13,50 @@ import { Direction, DirectionProvider } from '@radix-ui/react-direction';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { clsx } from 'clsx';
 
-import { useForkRef } from '../utils/hooks';
+import { useForkRef, useId } from '../utils/hooks';
 import type { Theme } from './types';
 
 import styles from './theme-provider.module.css';
-import { createThemeVariables } from './utils';
-import defaultTheme from './default-theme.cjs';
+import { createThemeVariables, mergeTheme } from './utils';
 
 type Props = {
   children?: ReactNode;
   theme?: Theme;
 } & ComponentProps<'div'>;
 
-const ThemeProvider = forwardRef<HTMLDivElement, Props>(({ theme = defaultTheme, className, ...props }, propRef) => {
+const ThemeProvider = forwardRef<HTMLDivElement, Props>(({ theme = {}, className, children, ...props }, propRef) => {
   const rootRef = useFxtrotRootRef();
   const ref = useRef<HTMLDivElement>(null);
   const [direction, directionRef] = useDirection();
   const refs = useForkRef<HTMLElement>(ref, directionRef, propRef);
+  // slice :r0: -> r0
+  const themeClassName = `fxtrot-ui-${useId().slice(1, -1)}`;
+  const css = createThemeCssText(themeClassName, theme);
 
   return (
     <rootRefContext.Provider value={rootRef.current ? rootRef : ref}>
       <DirectionProvider dir={direction}>
         <TooltipProvider delayDuration={400}>
-          <div
-            {...props}
-            // @ts-expect-error
-            style={{ ...Object.fromEntries(createThemeVariables(theme)), ...props.style }}
-            className={clsx(styles['fxtrot-ui-theme'], className)}
-            ref={refs}
-          />
+          <>
+            <style dangerouslySetInnerHTML={{ __html: css }} />
+            <div {...props} className={clsx(styles['fxtrot-ui-theme'], themeClassName, className)} ref={refs}>
+              {children}
+            </div>
+          </>
         </TooltipProvider>
       </DirectionProvider>
     </rootRefContext.Provider>
   );
 });
 
+function createThemeCssText(className: string, theme: Theme) {
+  const fullTheme = mergeTheme(theme);
+  const css = `.${className} {${createThemeVariables(fullTheme)
+    .map((entry) => entry.join(':'))
+    .join(';')};}`.trim();
+  return css;
+}
+
 const rootRefContext = createContext<RefObject<HTMLElement>>({ current: null });
 export const useFxtrotRootRef = () => useContext(rootRefContext);
 

src/lib/theme-provider/types.d.ts

@@ -6,6 +6,7 @@ export function createTailwindFontVariables(fontSize: NonNullable<Theme['fontSiz
   fontSize: Record<keyof Theme['fontSize'], string>;
   lineHeight: Record<keyof Theme['fontSize'], string>;
 };
+export function toToken(themeConfig: string, name: string): `--fx-${string}-${string}`;
 
 export function createTailwindVariables(theme: Theme): import('tailwindcss').Config;
 
@@ -135,7 +136,7 @@ export type Theme = {
   fontSize?: {
     'xs'?: ['0.75rem', '1rem'];
     'sm'?: ['0.875rem', '1.25rem'];
-    'base'?: ['1rem', '1.5rem'];
+    'md'?: ['1rem', '1.5rem'];
     'lg'?: ['1.125rem', '1.75rem'];
     'xl'?: ['1.25rem', '1.75rem'];
     '2xl'?: ['1.5rem', '2rem'];

src/lib/theme-provider/utils.ts

@@ -1,5 +1,6 @@
 import type { ThemeColor, Theme } from './types';
 import { toToken } from '../utils.cjs';
+import defaultTheme from './default-theme.cjs';
 
 /**
  * Transforms passed theme colors into CSS variables map that are consumed by the components.
@@ -68,3 +69,27 @@ export function createThemeVariables(theme: Theme): ThemeVariableEntry[] {
 }
 
 type ThemeVariableEntry = [`--fxtrot-${string}-${string}`, string];
+
+/**
+ * Takes partial theme and merges it with the default one.
+ */
+export function mergeTheme(theme: Theme): DeepRequired<Theme> {
+  const resultingTheme = { ...defaultTheme };
+  Object.keys(theme).forEach((themeKey) => {
+    const themeConfig = theme[themeKey as ThemeKey];
+    if (!themeConfig) return;
+    // @ts-expect-error 2022 can't type Object.keys properly in TypeScript :/
+    resultingTheme[themeKey] = { ...defaultTheme[themeKey] };
+    Object.keys(themeConfig).forEach((configKey) => {
+      // @ts-expect-error
+      resultingTheme[themeKey][configKey] = themeConfig[configKey];
+    });
+  });
+  // @ts-expect-error defaultTheme has colors as strings and not HSL, as JSDoc doesn't support @satisfies yet
+  return resultingTheme;
+}
+
+type ThemeKey = NonNullable<keyof Theme>;
+type DeepRequired<T> = {
+  [K in keyof T]: Required<DeepRequired<T[K]>>;
+};

src/lib/utils.cjs

@@ -1,7 +1,5 @@
 /**
- * @param {string} themeConfig - Type of the token: color, scale, fontSize
- * @param {string} name - Name of the token
- * @return {string}
+ * @type {import('./theme-provider/types').toToken}
  */
 function toToken(themeConfig, name) {
   return `--fx-${themeConfig}-${name.split('.').join('\\.')}`;

src/pages-helpers/MainLayout/SideNav.tsx

@@ -45,7 +45,7 @@ const LinksList = ({ links }: { links: DocEntry[] }) => {
       {links.map((item) => {
         return (
           <Link href={item.href} passHref legacyBehavior key={item.title}>
-            <MenuList.Item aria-current={item.href === router.pathname}>{item.title}</MenuList.Item>
+            <MenuList.Item active={item.href === router.pathname}>{item.title}</MenuList.Item>
           </Link>
         );
       })}

src/pages-helpers/MultilineCode.tsx

@@ -17,7 +17,7 @@ export const MultilineCode = ({ code, language }: Props) => {
             {tokens.map((line, i) => {
               const lineProps = getLineProps({ line, key: i });
               return (
-                <line {...lineProps} className={clsx('table-row text-sm', lineProps.className)} key={i}>
+                <line {...lineProps} className={clsx('table-row text-sm', lineProps.className)}>
                   <span className="table-cell select-none text-end opacity-50 pr-4">{i + 1}</span>
                   <span className="table-cell">
                     {line.map((token, key) => (

src/pages/_app.tsx

@@ -1,11 +1,18 @@
 import './globals.css';
+import localFont from '@next/font/local';
 
 import { NextSeo } from 'next-seo';
 import { ThemeProvider } from '@fxtrot/ui';
 
 import { MdxProvider } from 'src/pages-helpers/MdxProvider';
 import type { AppProps } from 'next/dist/shared/lib/router/router';
 
+const Inter = localFont({
+  src: '../../public/fonts/Inter-VariableFont_slnt,wght.ttf',
+  fallback: ['-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif'],
+  weight: 'variable',
+});
+
 export default function App(props: AppProps) {
   const { Component, pageProps } = props;
   return (
@@ -39,7 +46,7 @@ export default function App(props: AppProps) {
           },
         ]}
       />
-      <ThemeProvider>
+      <ThemeProvider theme={{ fontFamily: { sans: Inter.style.fontFamily } }}>
         <MdxProvider>
           <Component {...pageProps} />
         </MdxProvider>

src/pages/components/MenuList.mdx

@@ -33,7 +33,7 @@ title: MenuList
           ].map(({ icon, label, disabled, className }) => (
             <MenuList.Item
               key={label}
-              selected={selected === label}
+              active={selected === label}
               disabled={disabled}
               onClick={() => setSelected(label)}
               className={className}