Code review fixes

packages/components/package.json

@@ -59,6 +59,7 @@
   },
   "peerDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
+    "@theguild/tailwind-config": "0.5.0",
     "next": "^13 || ^14 || ^15.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -67,11 +68,10 @@
     "@giscus/react": "3.0.0",
     "@next/bundle-analyzer": "15.0.2",
     "@radix-ui/react-navigation-menu": "^1.2.0",
-    "@theguild/tailwind-config": "0.5.0",
     "clsx": "2.1.1",
     "fuzzy": "0.1.3",
     "next-videos": "1.5.0",
-    "nextra": "3.2.0",
+    "nextra": "3.2.3",
     "nextra-theme-docs": "3.2.0",
     "react-paginate": "8.2.0",
     "react-player": "2.16.0",
@@ -82,6 +82,7 @@
   "devDependencies": {
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@theguild/editor": "workspace:*",
+    "@theguild/tailwind-config": "0.5.0",
     "@types/dedent": "0.7.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",

packages/components/src/components/marketplace-list.tsx

@@ -188,31 +188,18 @@ export function MarketplaceListItem({ item, ...rest }: MarketplaceListItemProps)
 function moveFocusOnArrowKeys(event: React.KeyboardEvent<HTMLAnchorElement>, columns: number) {
   let listItem: Element | null | undefined;
 
-  let move: 'left' | 'right' | 'down' | 'up' | undefined;
-
-  switch (event.key) {
-    case 'ArrowDown':
-      move = 'down';
-      break;
-    case 'ArrowUp':
-      move = 'up';
-      break;
-    case 'ArrowRight':
-      move = 'right';
-      break;
-    case 'ArrowLeft':
-      move = 'left';
-      break;
-  }
+  const move = ({ ArrowDown: '⬇', ArrowUp: '⬆', ArrowRight: '➡️', ArrowLeft: '⬅️' } as const)[
+    event.key
+  ];
 
   if (!move) return;
 
-  if (move === 'left') {
+  if (move === '⬅️') {
     const parent = event.currentTarget.parentElement;
     if (parent) {
       listItem = parent.previousElementSibling;
     }
-  } else if (move === 'right') {
+  } else if (move === '➡️') {
     const parent = event.currentTarget.parentElement;
     if (parent) {
       listItem = parent.nextElementSibling;
@@ -221,10 +208,10 @@ function moveFocusOnArrowKeys(event: React.KeyboardEvent<HTMLAnchorElement>, col
     listItem = event.currentTarget.parentElement;
 
     while (columns > 0 && listItem) {
-      if (move === 'up') {
+      if (move === '⬆') {
         columns--;
         listItem = listItem.previousElementSibling;
-      } else if (move === 'down') {
+      } else if (move === '⬇') {
         columns--;
         listItem = listItem.nextElementSibling;
       }

packages/components/src/components/marketplace-search.css

@@ -17,50 +17,3 @@
     }
   }
 }
-
-/* nextra Tabs don't accept className props */
-.MarketplaceSearchTabs [role='tablist'] {
-  @apply grid grid-cols-2 gap-1 rounded-2xl border-none bg-neutral-800 [&.green]:bg-green-900;
-
-  /* dark mode prefix interfers with css modules */
-  .light & {
-    @apply bg-neutral-100;
-  }
-
-  .green & {
-    @apply bg-green-900;
-  }
-
-  & button {
-    @apply rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 sm:p-4 sm:text-base;
-
-    .light & {
-      @apply bg-neutral-100 text-neutral-800;
-    }
-
-    .green & {
-      @apply bg-green-900 text-green-200;
-    }
-
-    &:hover {
-      @apply bg-neutral-700/50 text-white;
-
-      .light & {
-        @apply bg-neutral-200/80 text-neutral-900;
-      }
-
-      .green & {
-        @apply bg-green-700/25 text-green-100;
-      }
-    }
-
-    &[aria-selected='true'],
-    &[aria-selected='true']:hover {
-      @apply cursor-default bg-[--fg] text-[--bg];
-
-      .green & {
-        @apply bg-green-300 text-green-800;
-      }
-    }
-  }
-}

packages/components/src/components/marketplace-search.tsx

@@ -16,7 +16,6 @@ import './marketplace-search.css';
  */
 const classes = {
   marketplace: 'MarketplaceSearch',
-  tabs: 'MarketplaceSearchTabs',
 };
 
 const renderQueryPlaceholder = (placeholder: string | ReactElement, query: string) => {
@@ -175,8 +174,12 @@ function MarketplaceSearchTabs({
   );
 
   return (
-    <div className={cn(classes.tabs, className)}>
-      <Tabs items={items.map(list => list.title)}>
+    <div className={className}>
+      <Tabs
+        items={items.map(list => list.title)}
+        className="grid grid-cols-2 gap-1 rounded-2xl border-none bg-neutral-800 [.green_&]:bg-green-900 [.light_&]:text-green-200"
+        tabClassName="rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 hover:bg-neutral-700/50 hover:text-white aria-selected:cursor-default aria-selected:bg-[--fg] aria-selected:text-[--bg] sm:p-4 sm:text-base [.green_&]:bg-green-900 [.green_&]:text-green-200 [.green_&]:hover:bg-green-700/25 [.green_&]:hover:text-green-100 [.green_&]:aria-selected:bg-green-300 [.green_&]:aria-selected:text-green-800 [.light_&]:bg-neutral-100 [.light_&]:text-neutral-800 [.light_&]:hover:bg-neutral-200/80 [.light_&]:hover:text-neutral-900"
+      >
         {items.map((list, i) => (
           <Tabs.Tab tabIndex={-1} key={i}>
             <MarketplaceList

packages/components/style.css

@@ -5,8 +5,6 @@
 @import 'tailwindcss/components' layer(l-components);
 @import 'tailwindcss/utilities';
 
-@import './dist/index.css';
-
 .nextra-banner-container._bg-neutral-900._flex {
   @apply bg-[#48224e] bg-none;
 }

packages/remark-mermaid/package.json

@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@types/mdast": "4.0.4",
-    "nextra": "3.2.0",
+    "nextra": "3.2.3",
     "react": "18.3.1",
     "unified": "11.0.5"
   },

packages/remark-npm2yarn/package.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/mdast": "4.0.4",
-    "nextra": "3.2.0",
+    "nextra": "3.2.3",
     "unified": "11.0.5"
   },
   "publishConfig": {