Merge pull request #318 from shairez/pr-tabs-pagination

Author: shairez

.gitignore

@@ -56,7 +56,7 @@ lerna-debug.log*
 # misc
 /.sass-cache
 /connect.lock
-/coverage
+coverage
 /libpeerconnection.log
 testem.log
 /typings

.npmrc

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

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

@@ -18,16 +18,16 @@ export const Example01 = component$(() => {
           </TabList>
           <TabPanel>
             <p>
-              Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was
+              Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
               a ...
             </p>
           </TabPanel>
           <TabPanel>
-            <p>Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a ...</p>
+            <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
           </TabPanel>
           <TabPanel>
             <p>
-              Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a ...
+              Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
             </p>
           </TabPanel>
         </Tabs>

apps/website/src/routes/docs/tailwind/(components)/pagination/index.tsx

@@ -119,6 +119,25 @@ export default component$(() => {
           boundaryCount={boundaryCount.value}
         />
       </div>
+
+      <div class="flex flex-col gap-8">
+        <Pagination
+          pages={pages.value}
+          page={page.value}
+          onPaging$={(newValue: number) => {
+            page.value = newValue;
+          }}
+          showFirstButton={showFirstButton.value}
+          showLastButton={showLastButton.value}
+          hideNextButton={hideNextButton.value}
+          hidePrevButton={hidePrevButton.value}
+          siblingCount={siblingCount.value}
+          boundaryCount={boundaryCount.value}
+          activeClass="!bg-cyan-500"
+          defaultClass="bg-cyan-200"
+          labels={{ prev: '⬅️', next: '➡️', first: 'START', last: 'END' }}
+        />
+      </div>
     </div>
   );
 });

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

@@ -0,0 +1,12 @@
+.tabs-example [role='tab'] {
+  width: 250px;
+  background: lightgreen;
+}
+
+.tabs-example [role='tab'].selected {
+  background: magenta;
+}
+
+.tabs-example [role='tablist'] {
+  border: 1px solid;
+}

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

@@ -0,0 +1,39 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import {
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+} from '../../../../../packages/kit-headless/src';
+
+import styles from './index.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="tabs-example">
+      <Tabs behavior="automatic">
+        <h3 id="tablist-1">Danish Composers</h3>
+        <TabList>
+          <Tab>Maria Ahlefeldt</Tab>
+          <Tab>Carl Andersen</Tab>
+          <Tab>Ida Henriette da Fonseca</Tab>
+        </TabList>
+        <TabPanel>
+          <p>
+            Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a
+            ...
+          </p>
+        </TabPanel>
+        <TabPanel>
+          <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
+        </TabPanel>
+        <TabPanel>
+          <p>
+            Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
+          </p>
+        </TabPanel>
+      </Tabs>
+    </div>
+  );
+});

package.json

@@ -12,7 +12,9 @@
     "format:fix": "pretty-quick --staged",
     "prepare": "husky install",
     "test:headless": "nx component-test headless --watch",
-    "story:headless": "nx build-storybook headless"
+    "story:build:headless": "nx build-storybook headless",
+    "story:headless": "nx storybook headless",
+    "website": "nx serve website"
   },
   "devDependencies": {
     "@builder.io/qwik": "1.0.0",
@@ -25,13 +27,14 @@
     "@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-coverage": "0.0.8",
     "@storybook/addon-essentials": "7.0.8",
     "@storybook/addon-interactions": "7.0.8",
     "@storybook/addon-links": "7.0.8",
@@ -44,6 +47,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,14 +1,15 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
-
   "exclude": [
     "../**/*.spec.ts",
     "../**/*.test.ts",
     "../**/*.spec.tsx",
-    "../**/*.test.tsx"
+    "../**/*.test.tsx",
+    "../cypress.config.ts"
   ],
   "include": [
     "../src/**/*.stories.ts",

packages/kit-headless/project.json

@@ -97,8 +97,8 @@
     "test-storybook": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "pnpm test-storybook --url http://localhost:4400",
-        "cwd": "packages/headless"
+        "command": "pnpm test-storybook --url http://localhost:4400 --coverage",
+        "cwd": "packages/kit-headless"
       }
     },
     "component-test": {

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

@@ -1,6 +1,26 @@
 import { $, component$, PropFunction, Component } from '@builder.io/qwik';
 import { Button as HeadlessButton } from '@qwik-ui/primitives';
 
+/**
+ * PAGINATION TODOs
+ * - Get storybook testing to work
+ *
+ * PROPS
+ * pageIndex: default pagination value
+ * V activeStyles: The styles of the active page button
+ * V normalStyles: The styles of the inactive page buttons
+ * V customArrowTexts: { previous, next }
+ * disabled: enable/disable paginator
+ * color: primary | secondary
+ * variant: outlined (show border without bg)
+ * shape: rounded | square
+ * size: 'sm' | 'md' | 'lg'
+ * paginationRange (see https://mui.com/material-ui/react-pagination/#pagination-ranges)
+ *
+ * EVENTS
+ * onPageChange
+ *
+ */
 export interface IPaginationProps extends IGetPaginationItemsOptions {
   pages: number;
   page: number;
@@ -16,8 +36,18 @@ export interface IRenderPaginationItemProps {
   'aria-current'?: boolean;
   value: TPaginationItemValue;
   key?: string | number;
+  activeClass?: string;
+  defaultClass?: string;
+  labels?: TPaginationLabels;
 }
 
+export type TPaginationLabels = {
+  first?: string;
+  last?: string;
+  next?: string;
+  prev?: string;
+};
+
 export type TPaginationItemValue =
   | 'prev'
   | 'next'
@@ -55,11 +85,15 @@ export interface IGetPaginationItemsOptions {
   hideNextButton?: boolean;
   showFirstButton?: boolean;
   showLastButton?: boolean;
+  activeClass?: string;
+  defaultClass?: string;
+  labels?: TPaginationLabels;
 }
 
 export const getPaginationItems = (
   page: IGetPaginationItems['page'],
   count: IGetPaginationItems['count'],
+  labels: TPaginationLabels | undefined,
   {
     boundaryCount = 1,
     siblingCount = 1,
@@ -159,9 +193,12 @@ export const Pagination = component$(
     onPaging$,
     page,
     pages,
+    activeClass,
+    defaultClass,
+    labels,
     ...rest
   }: IPaginationProps) => {
-    const pagi = getPaginationItems(page, pages, rest);
+    const pagi = getPaginationItems(page, pages, labels, rest);
 
     const _onPaging$ = $((page: number) => {
       if (page < 1 || page > pages) return;
@@ -177,7 +214,10 @@ export const Pagination = component$(
                 <RenderDivider key={i} />
               ) : (
                 <RenderItem
+                  activeClass={activeClass}
+                  defaultClass={defaultClass}
                   key={i}
+                  labels={labels}
                   onClick$={() =>
                     _onPaging$(
                       (() => {