feat(headless/tabs): shortcut for adding tabs

Co-authored-by: Wout Mertens <Wout.Mertens@gmail.com>

Author: shairez

apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

@@ -102,9 +102,9 @@ export const AutomaticBehaviorTabsExample = component$(() => {
  return (
  <PreviewCodeExample>
  <div q:slot="actualComponent" class="tabs-example mr-auto">
+ <h3>Danish Composers</h3>
+ <h4>(Hover over the tabs)</h4>
  <Tabs behavior="automatic">
- <h3>Danish Composers</h3>
- <h4>(Hover over the tabs)</h4>
  <TabList>
  <Tab>Maria Ahlefeldt</Tab>
  <Tab>Carl Andersen</Tab>

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

@@ -1,17 +1,20 @@
 import {
+ QwikIntrinsicElements,
+ Slot,
  component$,
  useContext,
  useId,
- Slot,
- useTask$,
  useSignal,
- useVisibleTask$,
- QwikIntrinsicElements,
+ useTask$,
+ useVisibleTask$
 } from '@builder.io/qwik';
-import { tabsContextId } from './tabs-context-id';
 import { isBrowser, isServer } from '@builder.io/qwik/build';
+import { tabsContextId } from './tabs-context-id';
 
-export type TabPanelProps = QwikIntrinsicElements['div'];
+export type TabPanelProps = {
+ /** @deprecated Internal use only */
+ _key?: string;
+} & QwikIntrinsicElements['div'];
 
 export const TabPanel = component$(({ ...props }: TabPanelProps) => {
  const contextService = useContext(tabsContextId);
@@ -35,9 +38,7 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
  });
 
  useTask$(async function isSelectedPanelTask({ track }) {
- const isSelected = await track(() =>
- contextService.isPanelSelected$(panelUID)
- );
+ const isSelected = await track(() => contextService.isPanelSelected$(panelUID));
 
  if (isServer) {
  isSelectedSig.value = await contextService.isIndexSelected$(
@@ -50,9 +51,7 @@ export const TabPanel = component$(({ ...props }: TabPanelProps) => {
  });
 
  useVisibleTask$(async function matchedPanelIdTask({ track }) {
- matchedTabIdSig.value = await track(() =>
- contextService.getMatchedTabId$(panelUID)
- );
+ matchedTabIdSig.value = await track(() => contextService.getMatchedTabId$(panelUID));
  });
 
  return (

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

@@ -1,24 +1,26 @@
 import {
+ $,
+ Slot,
  component$,
+ useComputed$,
  useContext,
  useId,
- Slot,
- useTask$,
- $,
  useSignal,
+ useTask$,
  useVisibleTask$,
  type QwikIntrinsicElements,
- type QwikMouseEvent,
- useComputed$,
+ type QwikMouseEvent
 } from '@builder.io/qwik';
-import { tabsContextId } from './tabs-context-id';
-import { KeyCode } from '../../utils/key-code.type';
 import { isBrowser, isServer } from '@builder.io/qwik/build';
+import { KeyCode } from '../../utils/key-code.type';
+import { tabsContextId } from './tabs-context-id';
 
 export type TabProps = {
  onClick$?: (event: QwikMouseEvent) => void;
  selectedClassName?: string;
  disabled?: boolean;
+ /** @deprecated Internal use only */
+ _key?: string;
 } & QwikIntrinsicElements['button'];
 
 export const preventedKeys = [
@@ -29,7 +31,7 @@ export const preventedKeys = [
  KeyCode.ArrowDown,
  KeyCode.ArrowUp,
  KeyCode.ArrowLeft,
- KeyCode.ArrowRight,
+ KeyCode.ArrowRight
 ];
 
 export const Tab = component$((props: TabProps) => {
@@ -59,9 +61,7 @@ export const Tab = component$((props: TabProps) => {
  });
 
  useTask$(async function isSelectedTask({ track }) {
- const isTabSelected = await track(() =>
- contextService.isTabSelected$(uniqueTabId)
- );
+ const isTabSelected = await track(() => contextService.isTabSelected$(uniqueTabId));
  if (isServer && !props.disabled) {
  isSelectedSig.value = await contextService.isIndexSelected$(
  serverAssignedIndexSig.value
@@ -117,9 +117,7 @@ export const Tab = component$((props: TabProps) => {
  tabIndex={isSelectedSig.value ? 0 : -1}
  aria-controls={'tabpanel-' + matchedTabPanelIdSig.value}
  class={`${
- isSelectedSig.value
- ? `selected ${selectedClassNameSig.value || ''}`
- : ''
+ isSelectedSig.value ? `selected ${selectedClassNameSig.value || ''}` : ''
  }${props.class ? ` ${props.class}` : ''}`}
  onClick$={(event) => {
  contextService.selectTab$(uniqueTabId);

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

@@ -1,8 +1,8 @@
-import { component$, useSignal, useStore, $ } from '@builder.io/qwik';
+import { $, component$, useSignal, useStore } from '@builder.io/qwik';
 import { Tab } from './tab';
+import { TabPanel } from './tab-panel';
 import { Tabs } from './tabs';
 import { TabList } from './tabs-list';
-import { TabPanel } from './tab-panel';
 
 describe('Tabs', () => {
  it('INIT', () => {
@@ -53,9 +53,7 @@ describe('Tabs', () => {
  <TabList>
  <Tab onClick$={() => (wasSelectedSig.value = true)}>Tab 1</Tab>
  </TabList>
- <TabPanel>
- Custom onClick was called: {`${wasSelectedSig.value}`}
- </TabPanel>
+ <TabPanel>Custom onClick was called: {`${wasSelectedSig.value}`}</TabPanel>
  </Tabs>
  );
  });
@@ -64,10 +62,7 @@ describe('Tabs', () => {
 
  cy.findByRole('tab', { name: /Tab 1/i }).click();
 
- cy.findByRole('tabpanel').should(
- 'contain',
- 'Custom onClick was called: true'
- );
+ cy.findByRole('tabpanel').should('contain', 'Custom onClick was called: true');
  });
 
  describe('Dynamic Tabs', () => {
@@ -121,11 +116,7 @@ describe('Tabs', () => {
  }
 
  const DynamicTabsComponent = component$(
- ({
- tabIndexToDelete = 0,
- tabIndexToAdd = 0,
- tabsLength,
- }: DynamicTabsProps) => {
+ ({ tabIndexToDelete = 0, tabIndexToAdd = 0, tabsLength }: DynamicTabsProps) => {
  const tabNames = Array(tabsLength)
  .fill(1)
  .map((_, index) => `Dynamic Tab ${index + 1}`);
@@ -147,11 +138,7 @@ describe('Tabs', () => {
  <button onClick$={() => tabsState.splice(tabIndexToDelete, 1)}>
  Remove Tab
  </button>
- <button
- onClick$={() =>
- tabsState.splice(tabIndexToAdd, 0, 'new added tab')
- }
- >
+ <button onClick$={() => tabsState.splice(tabIndexToAdd, 0, 'new added tab')}>
  Add Tab
  </button>
  </>
@@ -168,9 +155,7 @@ describe('Tabs', () => {
 
  cy.findAllByRole('tab', { name: /Tab 2/i }).first().click();
 
- cy.findByRole('tabpanel')
- .should('be.visible')
- .should('contain', 'Root Panel 2');
+ cy.findByRole('tabpanel').should('be.visible').should('contain', 'Root Panel 2');
  });
 
  it(`GIVEN tabs inside of tabs
@@ -433,7 +418,7 @@ describe('Tabs', () => {
  <TabList
  style={{
  display: 'flex',
- flexDirection: isVertical ? 'column' : 'row',
+ flexDirection: isVertical ? 'column' : 'row'
  }}
  >
  <Tab>Tab 1</Tab>
@@ -602,9 +587,7 @@ describe('Tabs', () => {
  it(`GIVEN 3 vertical tabs and the second is disabled and the focus is on the first,
  WHEN triggering the down arrow key
  THEN the focus should be on the third tab`, () => {
- cy.mount(
- <PotentiallyDisabledThreeTabs isVertical={true} disabledIndex={1} />
- );
+ cy.mount(<PotentiallyDisabledThreeTabs isVertical={true} disabledIndex={1} />);
 
  cy.findByRole('tab', { name: /Tab 1/i }).type('{downarrow}');
 
@@ -614,9 +597,7 @@ describe('Tabs', () => {
  it(`GIVEN 3 vertical tabs and the second is disabled and the focus is on the third,
  WHEN triggering the up arrow key
  THEN the focus should be on the first tab`, () => {
- cy.mount(
- <PotentiallyDisabledThreeTabs isVertical={true} disabledIndex={1} />
- );
+ cy.mount(<PotentiallyDisabledThreeTabs isVertical={true} disabledIndex={1} />);
 
  cy.findByRole('tab', { name: /Tab 3/i }).type('{uparrow}');
 
@@ -636,16 +617,12 @@ describe('Tabs', () => {
  vertical={!!props.isVertical}
  style={{
  display: 'flex',
- flexDirection: props.isVertical ? 'column' : 'row',
+ flexDirection: props.isVertical ? 'column' : 'row'
  }}
  >
  <TabList>
  <Tab disabled={props.disabledIndex === 0}>Tab 1</Tab>
- <Tab
- disabled={
- props.disabledIndex === 1 || isMiddleDisabledSig.value
- }
- >
+ <Tab disabled={props.disabledIndex === 1 || isMiddleDisabledSig.value}>
  Tab 2
  </Tab>
  <Tab disabled={props.disabledIndex === 2}>Tab 3</Tab>
@@ -656,9 +633,7 @@ describe('Tabs', () => {
  </Tabs>
  {props.showDisableButton && (
  <button
- onClick$={() =>
- (isMiddleDisabledSig.value = !isMiddleDisabledSig.value)
- }
+ onClick$={() => (isMiddleDisabledSig.value = !isMiddleDisabledSig.value)}
  >
  Toggle middle tab disabled
  </button>

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

@@ -1,27 +1,21 @@
+import { expect } from '@storybook/jest';
+import { screen, userEvent, within } from '@storybook/testing-library';
 import { Meta, StoryObj } from 'storybook-framework-qwik';
-import {
- useSignal,
- useStore,
- component$,
- useComputed$,
-} from '@builder.io/qwik';
 import { Tab, TabList, TabPanel, Tabs, TabsProps } from './';
-import { userEvent, within, screen, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
 
 const meta: Meta<TabsProps> = {
  component: Tabs,
  args: {
- behavior: 'automatic',
+ behavior: 'automatic'
  },
  argTypes: {
  behavior: {
  control: {
- type: 'select',
+ type: 'select'
  },
- options: ['automatic', 'manual'],
- },
- },
+ options: ['automatic', 'manual']
+ }
+ }
 };
 
 export default meta;
@@ -55,7 +49,7 @@ export const Primary: Story = {
  const activeTabPanel = await canvas.findByRole('tabpanel');
 
  await expect(activeTabPanel).toHaveTextContent('Panel 2');
- },
+ }
 };
 
 // export const TabsWithMiddleDisabled: Story = {