fix: tabs, finally 😅

Author: shairez

.npmrc

@@ -1 +1,2 @@
-save-exact = true
+save-exact = true
+public-hoist-pattern[]=@types*

apps/website/src/routes/test/index.tsx

@@ -15,20 +15,20 @@ export default component$(() => {
       <Tabs behavior="automatic">
         <h3 id="tablist-1">Danish Composers</h3>
         <TabList>
-          <Tab for="maria">Maria Ahlefeldt</Tab>
-          <Tab for="carl">Carl Andersen</Tab>
-          <Tab for="ida">Ida Henriette da Fonseca</Tab>
+          <Tab>Maria Ahlefeldt</Tab>
+          <Tab>Carl Andersen</Tab>
+          <Tab>Ida Henriette da Fonseca</Tab>
         </TabList>
-        <TabPanel id="maria">
+        <TabPanel>
           <p>
             Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a
             ...
           </p>
         </TabPanel>
-        <TabPanel id="carl">
+        <TabPanel>
           <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
         </TabPanel>
-        <TabPanel id="ida">
+        <TabPanel>
           <p>
             Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
           </p>

package.json

@@ -27,12 +27,12 @@
     "@floating-ui/dom": "1.0.10",
     "@jscutlery/semver": "^2.30.1",
     "@k11r/nx-cloudflare-wrangler": "^2.0.0",
-    "@nx/workspace": "16.0.3",
-    "@nx/linter": "16.0.3",
     "@nx/cypress": "16.0.3",
-    "@nx/storybook": "16.0.3",
     "@nx/eslint-plugin": "16.0.3",
+    "@nx/linter": "16.0.3",
+    "@nx/storybook": "16.0.3",
     "@nx/vite": "16.0.3",
+    "@nx/workspace": "16.0.3",
     "@storybook/addon-a11y": "7.0.8",
     "@storybook/addon-essentials": "7.0.8",
     "@storybook/addon-interactions": "7.0.8",
@@ -46,6 +46,7 @@
     "@storybook/testing-library": "0.1.0",
     "@types/eslint": "8.37.0",
     "@types/node": "18.16.1",
+    "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "5.59.1",
     "@typescript-eslint/parser": "5.59.1",
     "@vitest/coverage-c8": "~0.28.5",

packages/kit-headless/.storybook/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
 
   "exclude": [

packages/kit-headless/src/components/tabs/tab.tsx

@@ -7,28 +7,20 @@ import {
   useComputed$,
   useTask$,
   $,
-  useVisibleTask$,
-  useSignal,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
 
 export interface TabProps {
-  for: string;
   onClick?: PropFunction<() => void>;
   class?: string;
   selectedClassName?: string;
 }
 
-// Tab button inside of a tab list
 export const Tab = component$((props: TabProps) => {
   const contextService = useContext(tabsContextId);
 
   const uniqueId = useId();
 
-  const currentTabIndex = useSignal(0);
-
-  const isSelectedSignal = useSignal(false);
-
   useTask$(({ cleanup }) => {
     contextService.tabsChanged$();
 
@@ -37,24 +29,25 @@ export const Tab = component$((props: TabProps) => {
     });
   });
 
-  useTask$(({ track }) => {
-    track(contextService.indexByTabId);
-    console.log('contextService.indexByTabId', contextService.indexByTabId);
-    currentTabIndex.value = contextService.indexByTabId[uniqueId];
+  const isSelectedSignal = useComputed$(() => {
+    return (
+      contextService.selectedIndex.value ===
+      contextService.tabsMap[uniqueId]?.index
+    );
   });
 
-  useVisibleTask$(() => {
-    console.log(
-      'contextService.selectedIndex.value',
-      contextService.selectedIndex.value
-    );
-    console.log('currentTabIndex.value', currentTabIndex.value);
-    isSelectedSignal.value =
-      contextService.selectedIndex.value === currentTabIndex.value;
+  // TODO: Figure out a way to fix this shitty hack :)
+  useTask$(({ track }) => {
+    track(() => isSelectedSignal.value);
+
+    if (isSelectedSignal.value) {
+      contextService.showTabs$();
+    }
   });
 
   const selectTab$ = $(() => {
-    contextService.selectedIndex.value = currentTabIndex.value;
+    contextService.selectedIndex.value =
+      contextService.tabsMap[uniqueId]?.index || 0;
   });
 
   const selectIfAutomatic$ = $(() => {
@@ -65,19 +58,19 @@ export const Tab = component$((props: TabProps) => {
 
   return (
     <button
-      data-for={props.for}
+      id={'tab-' + uniqueId}
       data-tab-id={uniqueId}
       type="button"
       role="tab"
       onFocus$={selectIfAutomatic$}
       onMouseEnter$={selectIfAutomatic$}
       aria-selected={isSelectedSignal.value}
-      aria-controls={'tabpanel-' + props.for}
-      class={`${isSelectedSignal ? `selected ${props.selectedClassName}` : ''}${
-        props.class ? ` ${props.class}` : ''
-      }`}
-      onClick$={async () => {
-        await selectTab$();
+      aria-controls={'tabpanel-' + contextService.tabsMap[uniqueId]?.tabPanelId}
+      class={`${
+        isSelectedSignal.value ? `selected ${props.selectedClassName}` : ''
+      }${props.class ? ` ${props.class}` : ''}`}
+      onClick$={() => {
+        selectTab$();
         if (props.onClick) {
           props.onClick();
         }

packages/kit-headless/src/components/tabs/tabs-context.type.ts

@@ -1,13 +1,14 @@
 import { Signal, QRL } from '@builder.io/qwik';
 import { Behavior } from './behavior.type';
+import { TabInfo } from './tabs';
 
 export interface TabsContext {
   selectedIndex: Signal<number>;
   selectedTabId: Signal<string>;
-  selectedTabPanelId: Signal<string>;
   selectTab$: QRL<(tabId: string) => void>;
+  showTabs$: QRL<() => void>;
   tabsChanged$: QRL<() => void>;
-  indexByTabId: { [key: string]: number };
-  indexByTabPanelId: { [key: string]: number };
+  tabsMap: { [key: string]: TabInfo };
+  tabPanelsMap: { [key: string]: TabInfo };
   behavior: Behavior;
 }

packages/kit-headless/src/components/tabs/tabs-panel.tsx

@@ -1,8 +1,6 @@
 import {
   component$,
   useContext,
-  useSignal,
-  useVisibleTask$,
   useId,
   Slot,
   useTask$,
@@ -11,19 +9,15 @@ import {
 import { tabsContextId } from './tabs-context-id';
 
 export interface TabPanelProps {
-  id: string;
   class?: string;
 }
 
-// Tab Panel implementation
 export const TabPanel = component$(({ ...props }: TabPanelProps) => {
   const contextService = useContext(tabsContextId);
-  const uniqueId = useId();
+  const panelUID = useId();
 
-  const currentPanelIndex = useSignal(0);
-
-  const isSelectedSignal = useComputed$(
-    () => contextService.selectedIndex.value === currentPanelIndex.value
+  const matchedTabId = useComputed$(
+    () => contextService.tabPanelsMap[panelUID]?.index
   );
 
   useTask$(({ cleanup }) => {
@@ -34,25 +28,25 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
     });
   });
 
-  useTask$(({ track }) => {
-    track(contextService.indexByTabPanelId);
-    currentPanelIndex.value = contextService.indexByTabPanelId[uniqueId];
+  const isSelectedSignal = useComputed$(() => {
+    return (
+      contextService.selectedIndex.value ===
+      contextService.tabPanelsMap[panelUID]?.index
+    );
   });
 
   return (
     <div
-      data-tabpanel-id={uniqueId}
-      id={'tabpanel-' + props.id}
+      data-tabpanel-id={panelUID}
+      id={'tabpanel-' + panelUID}
       role="tabpanel"
       tabIndex={0}
-      aria-labelledby={`tab-${currentPanelIndex}`}
+      aria-labelledby={`tab-${matchedTabId}`}
       class={`${isSelectedSignal.value ? 'is-hidden' : ''}${
         props.class ? ` ${props.class}` : ''
       }`}
       style={isSelectedSignal.value ? 'display: block' : 'display: none'}
     >
-      <p>thisPanelIndex.value: {currentPanelIndex.value} </p>
-      <p>contextService.selectedIndex: {contextService.selectedIndex} </p>
       <Slot />
     </div>
   );

packages/kit-headless/src/components/tabs/tabs.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from 'storybook-framework-qwik';
-import { Tab, TabList, TabPanel, Tabs, TabsProps } from './tabs';
+import { Tab, TabList, TabPanel, Tabs, TabsProps } from './';
 import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -28,10 +28,12 @@ export const Primary: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const tab2 = canvas.getByRole('tab', { name: 'Tab 2' });
-    await userEvent.click(tab2);
+    const tabs = await canvas.findAllByRole('tab');
+    await userEvent.click(tabs[1]);
 
-    // const tabPanel2 = canvas.getByRole('tabpanel');
-    // await expect(tabPanel2).toContain('Panel 2');
+    const tabPanel = await canvas.findByRole('tabpanel');
+
+    // await expect(tabPanel).toBeInTheDocument();
+    // await expect(tabPanel).toContain('Panel 2');
   },
 };