test(headless): add tabs stories and todolist

Co-authored-by: Adam <[email protected]>

Author: shairez

package.json

@@ -11,7 +11,8 @@
     "commit": "git-cz",
     "format:fix": "pretty-quick --staged",
     "prepare": "husky install",
-    "test:headless": "nx component-test headless --watch"
+    "test:headless": "nx storybook headless",
+    "website": "nx serve website"
   },
   "devDependencies": {
     "@builder.io/qwik": "0.101.0",

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

@@ -15,6 +15,7 @@ export const Primary: Story = {
   render: () => (
     <Accordion>
       <AccordionItem label="Item 1">This is a test</AccordionItem>
+      <AccordionItem label="Item 2">This is a test 2</AccordionItem>
     </Accordion>
   ),
   play: async ({ canvasElement }) => {
@@ -23,5 +24,7 @@ export const Primary: Story = {
     await userEvent.click(canvas.getByText('Item 1'));
 
     await expect(canvas.getByText('This is a test')).toBeInTheDocument();
+    await userEvent.click(canvas.getByText('Item 2'));
+    await expect(canvas.getByText('This is a test 2')).toBeInTheDocument();
   },
 };

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

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from 'storybook-framework-qwik';
+import { Tab, TabList, TabPanel, Tabs, TabsProps } from './tabs';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<TabsProps> = {
+  component: Tabs,
+};
+
+export default meta;
+
+type Story = StoryObj<TabsProps>;
+
+export const Primary: Story = {
+  render: () => (
+    <Tabs>
+      <TabList>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+      </TabList>
+
+      <TabPanel>Panel 1</TabPanel>
+      <TabPanel>Panel 2</TabPanel>
+      <TabPanel>Panel 3</TabPanel>
+    </Tabs>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const tab2 = canvas.getByRole('tab', { name: 'Tab 2' });
+    await userEvent.click(tab2);
+
+    // const tabPanel2 = canvas.getByRole('tabpanel');
+    // await expect(tabPanel2).toContain('Panel 2');
+  },
+};

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

@@ -11,19 +11,49 @@ import {
   useTask$,
   useSignal,
   useVisibleTask$,
+  useId,
 } from '@builder.io/qwik';
 
+/**
+ * TABS TODOs
+ * - Get storybook testing to work
+ * 
+ * - selectedIndex / default
+ * - Orientation
+ * - aria-label https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby
+ * - NOTE: Radix manually handle the value/id for each tab while we calculate it behind the scenes
+ *    If we end up implementing this, we need to expose a way to set this value in the root
+ * - keyboard interactions (arrowDown, ARrowRight, ArrowUp, ArrowLeft, Home, End, PageUp, PageDown)
+ *    Support Loop 
+ * - expose selectedIndex in the root
+ * - onValueChange
+ * POST V1:
+ * - RTL
+ 
+ * 
+ * TAB
+ *  Disable
+ *  NOTE: radix / headlessui: expose data-state data-disable data-orientation
+ *  NOTE: Headless UI: explorer the render props
+ *  NOTE: remove tab, switch position
+ *  NOTE: scrolling support? or multiple lines? (probably not for headless but for tailwind / material )
+ * 
+ * PANEL
+ * 
+ * aria Tabs Pattern https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * a11y lint plugin https://www.npmjs.com/package/eslint-plugin-jsx-a11y
+ * 
+ */
 export type Behavior = 'automatic' | 'manual';
 
 interface TabsContext {
   selectedIndex: Signal<number>;
   getNextTabIndex: QRL<() => number>;
   getNextPanelIndex: QRL<() => number>;
-  tabsHash: string;
   behavior: Behavior;
 }
 
-export const tabsContext = createContextId<TabsContext>('tabList');
+export const tabsContextId = createContextId<TabsContext>('qui--tabList');
 
 export interface TabsProps {
   behavior?: Behavior;
@@ -35,8 +65,6 @@ export const Tabs = component$((props: TabsProps) => {
   const lastTabIndex = useSignal(0);
   const lastPanelIndex = useSignal(0);
 
-  const tabsHash = `${Math.random() * 1000}`;
-
   const getNextTabIndex = $(() => {
     return lastTabIndex.value++;
   });
@@ -51,11 +79,10 @@ export const Tabs = component$((props: TabsProps) => {
     selectedIndex: selected,
     getNextTabIndex,
     getNextPanelIndex,
-    tabsHash,
     behavior,
   };
 
-  useContextProvider(tabsContext, contextService);
+  useContextProvider(tabsContextId, contextService);
 
   return (
     <div {...props}>
@@ -89,12 +116,15 @@ interface TabProps {
 // Tab button inside of a tab list
 export const Tab = component$(
   ({ selectedClassName, onClick, ...props }: TabProps) => {
-    const contextService = useContext(tabsContext);
+    const contextService = useContext(tabsContextId);
     const thisTabIndex = useSignal(0);
 
-    useTask$(async () => {
+    useVisibleTask$(async () => {
       thisTabIndex.value = await contextService.getNextTabIndex();
+      console.log('useVisibleTask$', thisTabIndex.value);
     });
+
+    // TODO: Ask Manu about this 😊
     const isSelected = () =>
       thisTabIndex.value === contextService.selectedIndex.value;
 
@@ -106,7 +136,7 @@ export const Tab = component$(
 
     return (
       <button
-        id={`${contextService.tabsHash}-tab-${thisTabIndex.value}`}
+        id={useId()}
         type="button"
         role="tab"
         onFocus$={selectIfAutomatic}
@@ -136,7 +166,7 @@ interface TabPanelProps {
 // Tab Panel implementation
 export const TabPanel = component$(({ ...props }: TabPanelProps) => {
   const { class: classNames, ...rest } = props;
-  const contextService = useContext(tabsContext);
+  const contextService = useContext(tabsContextId);
   const thisPanelIndex = useSignal(0);
   const isSelected = () =>
     thisPanelIndex.value === contextService.selectedIndex.value;
@@ -145,7 +175,7 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
   });
   return (
     <div
-      id={`${contextService.tabsHash}-tabpanel-${thisPanelIndex}`}
+      id={useId()}
       role="tabpanel"
       tabIndex={0}
       aria-labelledby={`tab-${thisPanelIndex}`}
@@ -155,6 +185,8 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
       style={isSelected() ? 'display: block' : 'display: none'}
       {...rest}
     >
+      <p>thisPanelIndex.value: {thisPanelIndex.value} </p>
+      <p>contextService.selectedIndex: {contextService.selectedIndex} </p>
       <Slot />
     </div>
   );