Few minor improvements (#351)

Signed-off-by: Nik Nasr <[email protected]>

Author: nikrooz

libs/ui/icons/src/lib/Icons.tsx

@@ -47,6 +47,8 @@ import {
   Radio,
   ClockAlert,
   Play,
+  Code,
+  ChartNoAxesColumn,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { tv } from '@restate/util/styles';
@@ -136,6 +138,8 @@ export const enum IconName {
   Eye = 'Eye',
   ClockAlert = 'ClockAlert',
   Play = 'Play',
+  Code = 'Code',
+  Usage = 'Usage',
 }
 export interface IconsProps {
   name: IconName;
@@ -210,6 +214,8 @@ const ICONS: Record<IconName, LucideIcon> = {
   [IconName.ClockAlert]: ClockAlert,
   [IconName.Eye]: Eye,
   [IconName.Play]: Play,
+  [IconName.Code]: Code,
+  [IconName.Usage]: ChartNoAxesColumn,
 };
 
 const styles = tv({

libs/ui/nav/src/lib/Nav.tsx

@@ -15,24 +15,46 @@ import {
   DropdownPopover,
   DropdownTrigger,
 } from '@restate/ui/dropdown';
-import { NavItem } from './NavItem';
+import { NavItem, NavSearchItem, useGetHrefFromSearch } from './NavItem';
 import { Button } from '@restate/ui/button';
 import { useLocation } from 'react-router';
 import { Icon, IconName } from '@restate/ui/icons';
 
 interface NavProps {
   className?: string;
   ariaCurrentValue?: AriaAttributes['aria-current'];
-  children: ReactElement<ComponentProps<typeof NavItem>>[];
+  children: ReactElement<
+    ComponentProps<typeof NavItem | typeof NavSearchItem>
+  >[];
+  layout?: 'vertical' | 'horizontal';
 }
 
 const styles = tv({
   base: 'flex items-center gap-0',
+  slots: {
+    indicator:
+      'absolute rounded-xl border border-black/10 bg-white shadow-xs transition-all duration-300 ease-in-out [&:not(:has(+ul>li>*[data-active=true]))]:hidden',
+  },
+  variants: {
+    layout: {
+      vertical: { base: 'flex-col [&>*]:w-full', indicator: 'left-0 w-full' },
+      horizontal: {
+        base: '',
+        indicator: 'top-0 h-full',
+      },
+    },
+  },
 });
 
-export function Nav({ children, className, ariaCurrentValue }: NavProps) {
+export function Nav({
+  children,
+  className,
+  ariaCurrentValue,
+  layout = 'horizontal',
+}: NavProps) {
   const containerElementRef = useRef<HTMLDivElement | null>(null);
   const activeIndicatorElement = useRef<HTMLDivElement | null>(null);
+  const { base, indicator } = styles({ layout });
 
   useEffect(() => {
     const updateStyle = (activeElement: Node | null) => {
@@ -41,8 +63,13 @@ export function Nav({ children, className, ariaCurrentValue }: NavProps) {
         activeElement.dataset.active === 'true' &&
         activeIndicatorElement.current
       ) {
-        activeIndicatorElement.current.style.width = `${activeElement.clientWidth}px`;
-        activeIndicatorElement.current.style.left = `${activeElement.offsetLeft}px`;
+        if (layout === 'vertical') {
+          activeIndicatorElement.current.style.height = `${activeElement.clientHeight}px`;
+          activeIndicatorElement.current.style.top = `${activeElement.offsetTop}px`;
+        } else {
+          activeIndicatorElement.current.style.width = `${activeElement.clientWidth}px`;
+          activeIndicatorElement.current.style.left = `${activeElement.offsetLeft}px`;
+        }
       }
     };
     const callback: MutationCallback = (mutationList) => {
@@ -86,21 +113,19 @@ export function Nav({ children, className, ariaCurrentValue }: NavProps) {
       detailsElement?.removeEventListener('toggle', updateStyleWithDetails);
       window.removeEventListener('resize', updateStyleWithDetails);
     };
-  }, []);
+  }, [layout]);
 
   const location = useLocation();
+  const getHref = useGetHrefFromSearch();
 
   return (
     <NavContext.Provider value={{ value: ariaCurrentValue }}>
       <div
         className="relative hidden rounded-xl border-[0.5px] border-transparent lg:block [&:has(a:focus)]:border-[0.5px] [&:has(a:focus)]:border-zinc-800/5 [&:has(a:focus)]:bg-black/3 [&:has(a:focus)]:shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)] [&:has(a:hover)]:border-[0.5px] [&:has(a:hover)]:border-zinc-800/5 [&:has(a:hover)]:bg-black/3 [&:has(a:hover)]:shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]"
         ref={containerElementRef}
       >
-        <div
-          className="absolute top-0 h-full rounded-xl border border-black/10 bg-white shadow-xs transition-all duration-300 ease-in-out [&:not(:has(+ul>li>a[data-active=true]))]:hidden"
-          ref={activeIndicatorElement}
-        />
-        <ul className={styles({ className })}>{children}</ul>
+        <div className={indicator()} ref={activeIndicatorElement} />
+        <ul className={base({ className })}>{children}</ul>
       </div>
       <div className="lg:hidden">
         <Dropdown>
@@ -112,9 +137,13 @@ export function Nav({ children, className, ariaCurrentValue }: NavProps) {
               {Children.map(children, (child) => (
                 <span
                   className={
-                    location.pathname.startsWith(child.props.href)
-                      ? ''
-                      : 'hidden'
+                    'href' in child.props
+                      ? location.pathname.startsWith(child.props.href)
+                        ? ''
+                        : 'hidden'
+                      : location.search.includes(child.props.search)
+                        ? ''
+                        : 'hidden'
                   }
                 >
                   {child.props.children}
@@ -138,7 +167,18 @@ export function Nav({ children, className, ariaCurrentValue }: NavProps) {
                 .filter((href) => location.pathname.startsWith(href))}
             >
               {Children.map(children, (child) => (
-                <DropdownItem href={child.props.href} value={child.props.href}>
+                <DropdownItem
+                  href={
+                    'href' in child.props
+                      ? child.props.href
+                      : getHref(child.props.search).href
+                  }
+                  value={
+                    'href' in child.props
+                      ? child.props.href
+                      : child.props.search
+                  }
+                >
                   {child.props.children}
                 </DropdownItem>
               ))}

libs/ui/nav/src/lib/NavItem.tsx

@@ -1,7 +1,7 @@
 import { useLocation, useNavigation } from 'react-router';
 import { focusRing } from '@restate/ui/focus';
 import { Link } from '@restate/ui/link';
-import { PropsWithChildren, useContext, useMemo } from 'react';
+import { PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 import { tv } from '@restate/util/styles';
 import { NavContext } from './NavContext';
 import { Button } from '@restate/ui/button';
@@ -16,7 +16,7 @@ const styles = tv({
   base: 'group isolate flex cursor-default rounded-xl px-3 py-1.5 text-center text-sm no-underline transition hover:bg-black/3 pressed:bg-gray-200',
   variants: {
     isCurrent: {
-      true: 'text-gray-800',
+      true: 'font-medium text-gray-700',
       false: 'text-gray-500',
     },
   },
@@ -51,7 +51,7 @@ export function NavItem({
   return (
     <li>
       <Link
-        className={styles()}
+        className={styles({ isCurrent: isActive })}
         href={preserveSearchParams ? `${href}${search}${location.hash}` : href}
         data-active={isActive}
         {...(isActive && { 'aria-current': value })}
@@ -65,40 +65,56 @@ export function NavItem({
 interface NavSearchItemProps {
   search: string;
 }
-export function NavSearchItem({
-  children,
-  search,
-}: PropsWithChildren<NavSearchItemProps>) {
+
+export function useGetHrefFromSearch() {
   const currentLocation = useLocation();
   const { location: nextLocation, state } = useNavigation();
   const location = state === 'loading' ? nextLocation : currentLocation;
-  const currentSearchParams = new URLSearchParams(location.search);
-  currentSearchParams.sort();
-  const targetSearchParams = new URLSearchParams(search);
-  const keys = Array.from(targetSearchParams.keys());
-  const excludingNewParams = keys.reduce((search, key) => {
-    search.delete(key);
-    return search;
-  }, new URLSearchParams(location.search));
-  const withNewParams = new URLSearchParams([
-    ...excludingNewParams,
-    ...new URLSearchParams(search),
-  ]);
-  const withNewParamsSorted = new URLSearchParams(withNewParams);
-  withNewParamsSorted.sort();
 
-  const isActive =
-    currentSearchParams.toString() === withNewParamsSorted.toString();
-  const targetSearch =
-    targetSearchParams.size > 0 ? `?${withNewParams.toString()}` : '';
+  const getHref = useCallback(
+    (search: string) => {
+      const currentSearchParams = new URLSearchParams(location.search);
+      currentSearchParams.sort();
+      const targetSearchParams = new URLSearchParams(search);
+      const keys = Array.from(targetSearchParams.keys());
+      const excludingNewParams = keys.reduce((search, key) => {
+        search.delete(key);
+        return search;
+      }, new URLSearchParams(location.search));
+      const withNewParams = new URLSearchParams([
+        ...excludingNewParams,
+        ...new URLSearchParams(search),
+      ]);
+      const withNewParamsSorted = new URLSearchParams(withNewParams);
+      withNewParamsSorted.sort();
+
+      const targetSearch =
+        targetSearchParams.size > 0 ? `?${withNewParams.toString()}` : '';
+      return {
+        href: `${location.pathname}${targetSearch}${location.hash}`,
+        isActive:
+          currentSearchParams.toString() === withNewParamsSorted.toString(),
+      };
+    },
+    [location.hash, location.pathname, location.search],
+  );
+
+  return getHref;
+}
 
+export function NavSearchItem({
+  children,
+  search,
+}: PropsWithChildren<NavSearchItemProps>) {
+  const getHref = useGetHrefFromSearch();
+  const { href, isActive } = getHref(search);
   const { value } = useContext(NavContext);
 
   return (
     <li>
       <Link
         className={styles()}
-        href={`${location.pathname}${targetSearch}${location.hash}`}
+        href={href}
         data-active={isActive}
         {...(isActive && { 'aria-current': value })}
       >

libs/ui/section/src/lib/Section.tsx

@@ -1,74 +1,52 @@
-import { createContext, PropsWithChildren, use } from 'react';
+import { PropsWithChildren } from 'react';
 import { tv } from '@restate/util/styles';
 
 interface SectionProps {
   className?: string;
-  variant?: 'standard' | 'two-cols';
 }
 
-const SectionContext = createContext<{ variant: 'standard' | 'two-cols' }>({
-  variant: 'standard',
-});
-
 const styles = tv({
-  base: 'section',
-  variants: {
-    variant: {
-      standard: 'flex flex-col rounded-xl bg-gray-100 p-0.5',
-      'two-cols': 'grid grid-cols-1 gap-x-10 gap-y-4 sm:grid-cols-[20ch_1fr]',
-    },
-  },
-  defaultVariants: {
-    variant: 'standard',
-  },
+  base: 'section flex flex-col rounded-xl bg-gray-100 p-0.5',
 });
 export function Section({
   children,
   className,
-  variant = 'standard',
 }: PropsWithChildren<SectionProps>) {
-  return (
-    <SectionContext.Provider value={{ variant }}>
-      <section className={styles({ className, variant })}>{children}</section>
-    </SectionContext.Provider>
-  );
+  return <section className={styles({ className })}>{children}</section>;
 }
 
 interface SectionTitleProps {
   className?: string;
+  variant?: 'standard' | 'settings';
 }
 
 const stylesSectionTitle = tv({
   base: '',
   variants: {
     variant: {
       standard: 'px-2 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase',
-      'two-cols':
-        'col-start-1 flex flex-col gap-1 text-base leading-7 font-semibold text-gray-900 sm:pt-3 [&_p]:text-sm [&_p]:leading-6 [&_p]:font-normal [&_p]:text-gray-600',
+      settings:
+        'mb-2 flex flex-col gap-0.5 px-2 text-base leading-7 font-semibold text-gray-900 sm:pt-3 [&_a]:text-gray-500 [&_p]:text-sm [&_p]:leading-6 [&_p]:font-normal [&_p]:text-gray-500',
     },
   },
 });
 export function SectionTitle({
   children,
   className,
+  variant,
 }: PropsWithChildren<SectionTitleProps>) {
-  const { variant } = use(SectionContext);
   return (
     <h3 className={stylesSectionTitle({ className, variant })}>{children}</h3>
   );
 }
 
 const stylesSectionContent = tv({
-  base: '',
+  base: 'rounded-[calc(0.75rem-0.125rem)] p-3 text-sm',
   variants: {
     raised: {
       true: 'border bg-white shadow-xs',
       false: '',
     },
-    variant: {
-      standard: 'rounded-[calc(0.75rem-0.125rem)] p-3 text-sm',
-      'two-cols': 'col-start-1 min-w-0 sm:col-start-2',
-    },
   },
   defaultVariants: {
     raised: true,
@@ -82,10 +60,8 @@ export function SectionContent({
   className?: string;
   raised?: boolean;
 }>) {
-  const { variant } = use(SectionContext);
-
   return (
-    <div className={stylesSectionContent({ className, raised, variant })}>
+    <div className={stylesSectionContent({ className, raised })}>
       {children}
     </div>
   );