Configurable developer menu (#1797)

Author: hasparus

.changeset/tender-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Expose `developerMenu` prop from `HiveNavigation`.

packages/components/src/components/hive-navigation/hive-navigation.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryContext, StoryObj } from '@storybook/react';
 import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator';
 import { PRODUCTS } from '../../products';
 import { Anchor } from '../anchor';
-import { CodegenIcon } from '../icons';
+import { CodegenIcon, GitHubIcon, PaperIcon, PencilIcon } from '../icons';
 import { GraphQLConfCard } from './graphql-conf-card';
 import {
   CompanyMenu,
@@ -115,7 +115,7 @@ export const Developer: StoryObj = {
   render() {
     return (
       <NavigationMenu>
-        <DeveloperMenu isHive={false} />
+        <DeveloperMenu isHive={false} developerMenu={undefined} />
       </NavigationMenu>
     );
   },
@@ -158,6 +158,23 @@ export const CodegenNavmenu: StoryObj<HiveNavigationProps> = {
         children: 'Plugins',
       },
     ],
+    developerMenu: [
+      {
+        href: '/docs',
+        icon: PaperIcon,
+        children: 'Documentation',
+      },
+      {
+        href: 'https://the-guild.dev/blog',
+        icon: PencilIcon,
+        children: 'Blog',
+      },
+      {
+        href: 'https://github.com/dotansimha/graphql-code-generator',
+        icon: GitHubIcon,
+        children: 'GitHub',
+      },
+    ],
     productName: PRODUCTS.CODEGEN.name,
     logo: (
       <Anchor href="/" className="hive-focus -m-2 flex items-center gap-3 rounded-md p-2">

packages/components/src/components/hive-navigation/index.tsx

@@ -50,6 +50,7 @@ export interface HiveNavigationProps {
   productName: string;
   logo?: ReactNode;
   navLinks?: { href: string; children: ReactNode }[];
+  developerMenu?: { href: string; icon: React.FC<{ className?: string }>; children: ReactNode }[];
 }
 /**
  *
@@ -70,6 +71,7 @@ export function HiveNavigation({
   productName,
   logo,
   navLinks,
+  developerMenu,
 }: HiveNavigationProps) {
   // `useThemeConfig` doesn't return anything outside of Nextra, and the provider isn't exported
   const themeConfig = useThemeConfig() as ReturnType<typeof useThemeConfig> | undefined;
@@ -122,7 +124,7 @@ export function HiveNavigation({
           <NavigationMenuItem>
             <NavigationMenuTrigger>Developer</NavigationMenuTrigger>
             <NavigationMenuContent>
-              <DeveloperMenu isHive={isHive} />
+              <DeveloperMenu isHive={isHive} developerMenu={developerMenu} />
             </NavigationMenuContent>
           </NavigationMenuItem>
           {!ENTERPRISE_MENU_HIDDEN && (
@@ -267,12 +269,13 @@ export const ProductsMenu = React.forwardRef<HTMLDivElement, ProductsMenuProps>(
                     className="flex flex-row items-center gap-3 px-4 py-2"
                     arrow
                   >
-                    <div className="flex size-8 items-center justify-center rounded bg-beige-200 dark:bg-white/5">
+                    <div className="flex size-8 items-center justify-center rounded bg-beige-200 p-[5px] dark:bg-white/5">
                       <Logo className="size-8 text-green-1000 dark:text-neutral-300" />
                     </div>
                     <div>
                       <p className="text-base font-medium leading-normal text-green-1000 dark:text-neutral-200">
-                        {product.name}
+                        {/* shortened to one word */}
+                        {product.name === PRODUCTS.ESLINT.name ? 'ESLint' : product.name}
                       </p>
                     </div>
                   </NavigationMenuLink>
@@ -318,38 +321,43 @@ MenuContentColumns.displayName = 'MenuContentColumns';
 
 interface DeveloperMenuProps extends React.HTMLAttributes<HTMLDivElement> {
   isHive: boolean;
+  developerMenu:
+    | undefined
+    | { href: string; icon: React.FC<{ className?: string }>; children: ReactNode }[];
 }
 /**
  * @internal
  */
 export const DeveloperMenu = React.forwardRef<HTMLDivElement, DeveloperMenuProps>(
-  ({ isHive, ...rest }, ref) => {
+  ({ isHive, developerMenu, ...rest }, ref) => {
+    developerMenu ||= [
+      {
+        href: isHive ? '/docs' : 'https://the-guild.dev/graphql/hive/docs',
+        icon: PaperIcon,
+        children: 'Documentation',
+      },
+      { href: 'https://status.graphql-hive.com/', icon: TargetIcon, children: 'Status' },
+      {
+        href: isHive ? '/product-updates' : 'https://the-guild.dev/graphql/hive/product-updates',
+        icon: RightCornerIcon,
+        children: 'Product Updates',
+      },
+      { href: 'https://the-guild.dev/blog', icon: PencilIcon, children: 'Blog' },
+      {
+        href: 'https://github.com/dotansimha/graphql-code-generator',
+        icon: GitHubIcon,
+        children: 'GitHub',
+      },
+    ];
+
     return (
       <MenuContentColumns {...rest} ref={ref}>
         <div>
           <ColumnLabel>Developer</ColumnLabel>
           <ul>
-            {(
-              [
-                [
-                  'Documentation',
-                  PaperIcon,
-                  isHive ? '/docs' : 'https://the-guild.dev/graphql/hive/docs',
-                ],
-                ['Status', TargetIcon, 'https://status.graphql-hive.com/'],
-                [
-                  'Product Updates',
-                  RightCornerIcon,
-                  isHive
-                    ? '/product-updates'
-                    : 'https://the-guild.dev/graphql/hive/product-updates',
-                ],
-                ['Blog', PencilIcon, 'https://the-guild.dev/blog'],
-                ['GitHub', GitHubIcon, 'https://github.com/kamilkisiela/graphql-hive'],
-              ] as const
-            ).map(([text, Icon, href], i) => (
-              <MenuColumnListItem key={i} href={href} icon={Icon}>
-                {text}
+            {developerMenu.map(({ href, icon, children }, i) => (
+              <MenuColumnListItem key={i} href={href} icon={icon}>
+                {children}
               </MenuColumnListItem>
             ))}
           </ul>
@@ -388,7 +396,7 @@ function MenuColumnListItem({
 }: {
   children: ReactNode;
   href: string;
-  icon: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
+  icon: React.FC<{ className?: string }>;
 }) {
   return (
     <li>