Write a changeset

Author: hasparus

.changeset/lovely-feet-float.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Extract Tabs component from Nextra

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

@@ -69,6 +69,8 @@ export const Tabs = ({
 }: TabsProps) => {
   const id = useId();
 
+  storageKey ??= `tabs-${id}`;
+
   let [selectedIndex, setSelectedIndex] = useState<number>(defaultIndex);
   if (_selectedIndex !== undefined) {
     selectedIndex = _selectedIndex;
@@ -84,13 +86,7 @@ export const Tabs = ({
     id,
   );
 
-  useActiveTabFromStorage(
-    storageKey ?? id,
-    items,
-    setSelectedIndex,
-    tabIndexFromSearchParams !== -1,
-    id,
-  );
+  useActiveTabFromStorage(storageKey, items, setSelectedIndex, tabIndexFromSearchParams !== -1, id);
 
   const handleChange = (index: number) => {
     onChange?.(index);
@@ -209,8 +205,6 @@ function useActiveTabFromURL(
     tabsInSearchParams.includes(getTabKey(items, index, id)),
   );
 
-  console.log({ tabIndexFromSearchParams, tabsInSearchParams });
-
   useIsomorphicLayoutEffect(() => {
     const tabPanel = hash
       ? tabPanelsRef.current?.querySelector(`[role=tabpanel]:has([id="${hash}"])`)

packages/components/src/components/tabs/tabs.stories.tsx

@@ -454,6 +454,13 @@ export const TabsSyncedWithStorageEvents: Story = {
             <Tabs.Tab key={item}>{item}</Tabs.Tab>
           ))}
         </Tabs>
+        <hr className="my-8" />
+        This one doesn't have a `storageKey`, so it's not connected:
+        <Tabs items={['pnpm', 'npm', 'yarn']}>
+          {['pnpm', 'npm', 'yarn'].map(item => (
+            <Tabs.Tab key={item}>{item}</Tabs.Tab>
+          ))}
+        </Tabs>
       </div>
     );
   },