Bring Tabs and useHash from Nextra

Author: hasparus

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

@@ -2,7 +2,7 @@
 
 import { isValidElement, ReactElement, useMemo, useState } from 'react';
 import fuzzy from 'fuzzy';
-import { Tabs } from 'nextra/components';
+import { Tabs } from './tabs';
 import { cn } from '../cn';
 import { IMarketplaceListProps, IMarketplaceSearchProps } from '../types/components';
 import { Heading } from './heading';

packages/components/src/components/tabs/index.client.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { FC, Fragment, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
+import cn from 'clsx';
+import {
+  Tab as HeadlessTab,
+  TabProps as HeadlessTabProps,
+  TabGroup,
+  TabGroupProps,
+  TabList,
+  TabListProps,
+  TabPanel,
+  TabPanelProps,
+  TabPanels,
+  // this component is almost verbatim copied from Nextra, so keep @headlessui/react to guarantee it works the same
+} from '@headlessui/react';
+import { useHash } from '../use-hash';
+
+type TabItem = string | ReactElement;
+
+type TabObjectItem = {
+  label: TabItem;
+  disabled: boolean;
+};
+
+function isTabObjectItem(item: unknown): item is TabObjectItem {
+  return !!item && typeof item === 'object' && 'label' in item;
+}
+
+export interface TabsProps
+  extends Pick<TabGroupProps, 'defaultIndex' | 'selectedIndex' | 'onChange'> {
+  items: (TabItem | TabObjectItem)[];
+  children: ReactNode;
+  /** LocalStorage key for persisting the selected tab. */
+  storageKey?: string;
+  /** Tabs CSS class name. */
+  className?: TabListProps['className'];
+  /** Tab CSS class name. */
+  tabClassName?: HeadlessTabProps['className'];
+}
+
+export const Tabs = ({
+  items,
+  children,
+  storageKey,
+  defaultIndex = 0,
+  selectedIndex: _selectedIndex,
+  onChange,
+  className,
+  tabClassName,
+}: TabsProps) => {
+  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
+  const hash = useHash();
+  const tabPanelsRef = useRef<HTMLDivElement>(null!);
+
+  useEffect(() => {
+    if (_selectedIndex !== undefined) {
+      setSelectedIndex(_selectedIndex);
+    }
+  }, [_selectedIndex]);
+
+  useEffect(() => {
+    if (!hash) return;
+    const tabPanel = tabPanelsRef.current.querySelector(`[role=tabpanel]:has([id="${hash}"])`);
+    if (!tabPanel) return;
+
+    for (const [index, el] of Object.entries(tabPanelsRef.current.children)) {
+      if (el === tabPanel) {
+        setSelectedIndex(Number(index));
+        // Clear hash first, otherwise page isn't scrolled
+        location.hash = '';
+        // Execute on next tick after `selectedIndex` update
+        requestAnimationFrame(() => {
+          location.hash = `#${hash}`;
+        });
+      }
+    }
+  }, [hash]);
+
+  useEffect(() => {
+    if (!storageKey) {
+      // Do not listen storage events if there is no storage key
+      return;
+    }
+
+    function fn(event: StorageEvent) {
+      if (event.key === storageKey) {
+        setSelectedIndex(Number(event.newValue));
+      }
+    }
+
+    const index = Number(localStorage.getItem(storageKey));
+    setSelectedIndex(Number.isNaN(index) ? 0 : index);
+
+    window.addEventListener('storage', fn);
+    return () => {
+      window.removeEventListener('storage', fn);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
+
+  const handleChange = (index: number) => {
+    if (storageKey) {
+      const newValue = String(index);
+      localStorage.setItem(storageKey, newValue);
+
+      // the storage event only get picked up (by the listener) if the localStorage was changed in
+      // another browser's tab/window (of the same app), but not within the context of the current tab.
+      window.dispatchEvent(new StorageEvent('storage', { key: storageKey, newValue }));
+      return;
+    }
+    setSelectedIndex(index);
+    onChange?.(index);
+  };
+
+  return (
+    <TabGroup
+      selectedIndex={selectedIndex}
+      defaultIndex={defaultIndex}
+      onChange={handleChange}
+      as={Fragment}
+    >
+      <TabList
+        className={args =>
+          cn(
+            'nextra-scrollbar x:overflow-x-auto x:overscroll-x-contain x:overflow-y-hidden',
+            'x:mt-4 x:flex x:w-full x:gap-2 x:border-b x:border-gray-200 x:pb-px x:dark:border-neutral-800',
+            'x:focus-visible:nextra-focus',
+            typeof className === 'function' ? className(args) : className,
+          )
+        }
+      >
+        {items.map((item, index) => (
+          <HeadlessTab
+            key={index}
+            disabled={isTabObjectItem(item) && item.disabled}
+            className={args => {
+              const { selected, disabled, hover, focus } = args;
+              return cn(
+                focus && 'x:nextra-focus x:ring-inset',
+                'x:whitespace-nowrap x:cursor-pointer',
+                'x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors',
+                'x:-mb-0.5 x:select-none x:border-b-2',
+                selected
+                  ? 'x:border-current x:outline-none'
+                  : hover
+                    ? 'x:border-gray-200 x:dark:border-neutral-800'
+                    : 'x:border-transparent',
+                selected
+                  ? 'x:text-primary-600'
+                  : disabled
+                    ? 'x:text-gray-400 x:dark:text-neutral-600 x:pointer-events-none'
+                    : hover
+                      ? 'x:text-black x:dark:text-white'
+                      : 'x:text-gray-600 x:dark:text-gray-200',
+                typeof tabClassName === 'function' ? tabClassName(args) : tabClassName,
+              );
+            }}
+          >
+            {isTabObjectItem(item) ? item.label : item}
+          </HeadlessTab>
+        ))}
+      </TabList>
+      <TabPanels ref={tabPanelsRef}>{children}</TabPanels>
+    </TabGroup>
+  );
+};
+
+export const Tab: FC<TabPanelProps> = ({
+  children,
+  // For SEO display all the Panel in the DOM and set `display: none;` for those that are not selected
+  unmount = false,
+  className,
+  ...props
+}) => {
+  return (
+    <TabPanel
+      {...props}
+      unmount={unmount}
+      className={args =>
+        cn(
+          'x:rounded x:mt-[1.25em]',
+          args.focus && 'x:nextra-focus',
+          typeof className === 'function' ? className(args) : className,
+        )
+      }
+    >
+      {children}
+    </TabPanel>
+  );
+};

packages/components/src/components/tabs/index.tsx

@@ -0,0 +1,53 @@
+'use no memo';
+
+import { ComponentProps } from 'react';
+import { Tabs as _Tabs, Tab } from './index.client';
+
+// Workaround to fix
+// Error: Cannot access Tab.propTypes on the server. You cannot dot into a client module from a
+// server component. You can only pass the imported name through.
+/**
+ * A built-in component for creating tabbed content, helping organize related information in a
+ * compact, interactive layout.
+ *
+ * @example
+ * <Tabs items={['pnpm', 'npm', 'yarn']}>
+ *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+ *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+ *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+ * </Tabs>
+ *
+ * @usage
+ * ```mdx
+ * import { Tabs } from '@theguild/components'
+ *
+ * <Tabs items={['pnpm', 'npm', 'yarn']}>
+ *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+ *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+ *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+ * </Tabs>
+ * ```
+ *
+ * ### Default Selected Index
+ *
+ * You can use the `defaultIndex` prop to set the default tab index:
+ *
+ * ```mdx /defaultIndex="1"/
+ * import { Tabs } from '@theguild/components'
+ *
+ * <Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
+ *   ...
+ * </Tabs>
+ * ```
+ *
+ * And you will have `npm` as the default tab:
+ *
+ * <Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
+ *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+ *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+ *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+ * </Tabs>
+ */
+export const Tabs = Object.assign((props: ComponentProps<typeof _Tabs>) => <_Tabs {...props} />, {
+  Tab,
+});

packages/components/src/components/use-hash.ts

@@ -0,0 +1,20 @@
+'use client';
+
+// don't need to memoize string `hash` value
+'use no memo';
+
+import { useEffect, useState } from 'react';
+
+export function useHash() {
+  const [hash, setHash] = useState('');
+
+  useEffect(() => {
+    const handleHashChange = () => setHash(location.hash.replace('#', ''));
+    handleHashChange();
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  return hash;
+}