Merge branch 'main' into to-css-vars

Author: maiieul

.github/workflows/release.yml

@@ -4,31 +4,31 @@ on:
   - workflow_dispatch
 
 jobs:
-  # test:
-  #   runs-on: ubuntu-latest
+  test:
+    runs-on: ubuntu-latest
 
-  #   strategy:
-  #     matrix:
-  #       node_version: [16, 18, 20, 21]
+    strategy:
+      matrix:
+        node_version: [16, 18, 20, 21]
 
-  #   steps:
-  #     - uses: actions/checkout@v3
-  #     - name: Setup
-  #       uses: ./.github/actions/setup
-  #       with:
-  #         node_version: ${{ matrix.node_version }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup
+        uses: ./.github/actions/setup
+        with:
+          node_version: ${{ matrix.node_version }}
 
-  #     - name: Test
-  #       uses: ./.github/actions/test
-  #       with:
-  #         codecov_token: ${{ secrets.CODECOV_TOKEN }}
+      - name: Test
+        uses: ./.github/actions/test
+        with:
+          codecov_token: ${{ secrets.CODECOV_TOKEN }}
 
   release:
     runs-on: ubuntu-latest
 
     if: github.ref == 'refs/heads/main'
 
-    # needs: [test]
+    needs: [test]
 
     steps:
       - uses: actions/checkout@v3

package.json

@@ -28,8 +28,8 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@builder.io/qwik": "github:BuilderIO/qwik-build#decd924161c22323caecc64628b736d1d6d6e3fc",
-    "@builder.io/qwik-city": "github:BuilderIO/qwik-city-build#58208e2036d6907d18d01980a3da26d10b84c85e",
+    "@builder.io/qwik": "^1.3.0",
+    "@builder.io/qwik-city": "^1.3.0",
     "@builder.io/vite-plugin-macro": "~0.0.7",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-angular": "^17.7.0",
@@ -89,7 +89,7 @@
     "eslint": "^8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-qwik": "^1.2.19",
+    "eslint-plugin-qwik": "^1.3.0",
     "eslint-plugin-storybook": "^0.6.13",
     "focus-trap": "7.5.3",
     "husky": "^8.0.3",

packages/kit-headless/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "rules": {
+    "qwik/valid-lexical-scope": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       // allow unused vars starting with _
@@ -28,7 +29,7 @@
     }
   },
   "plugins": ["@typescript-eslint"],
-  "ignorePatterns": ["!**/*", "**/.storybook/*"],
+  "ignorePatterns": ["!**/*", "cypress.config.ts", "**/.storybook/*"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

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

@@ -1,17 +1,17 @@
 import {
   $,
-  component$,
   Slot,
+  component$,
   useContextProvider,
   useSignal,
   useTask$,
-  type QwikIntrinsicElements,
-  type PropFunction,
   useVisibleTask$,
+  type PropFunction,
+  type QwikIntrinsicElements,
 } from '@builder.io/qwik';
 
-import { type AccordionRootContext } from './accordion-context.type';
 import { accordionRootContextId } from './accordion-context-id';
+import { type AccordionRootContext } from './accordion-context.type';
 
 export type AccordionRootProps = {
   behavior?: 'single' | 'multi';
@@ -40,6 +40,7 @@ export const AccordionRoot = component$(
 
     useTask$(({ track }) => {
       track(() => currSelectedTriggerIndexSig.value);
+
       if (onSelectedIndexChange$) {
         onSelectedIndexChange$(currSelectedTriggerIndexSig.value);
       }

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

@@ -117,7 +117,7 @@ type ControlContext = {
   id: string;
 };
 
-type ControlsProps = QwikIntrinsicElements['div'];
+type ControlsProps = QwikIntrinsicElements['nav'];
 
 export const controlContext = createContextId<ControlContext>('carousel-control-root');
 

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

@@ -26,7 +26,7 @@ export type CheckboxProps = QwikIntrinsicElements['input'] & {
   id?: string;
   value?: string;
   tabIndex?: number;
-  onChange?: PropFunction<
+  onChange$?: PropFunction<
     (event: QwikChangeEvent<HTMLInputElement>, element: HTMLInputElement) => void
   >;
 };
@@ -40,7 +40,7 @@ export const Root = component$(
     id,
     value,
     tabIndex,
-    onChange,
+    onChange$,
     ...props
   }: CheckboxProps) => {
     return (
@@ -56,8 +56,8 @@ export const Root = component$(
         value={value}
         tabIndex={tabIndex}
         onChange$={(event, element) => {
-          if (onChange) {
-            onChange(event, element);
+          if (onChange$) {
+            onChange$(event, element);
           }
         }}
         {...props}

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

@@ -51,6 +51,7 @@ describe('Critical Functionality', () => {
 
   it('GIVEN invalid orientation prop THEN console.warn is called', () => {
     const consoleSpy = cy.spy(console, 'warn');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     cy.mount(<Separator orientation={'invalid' as any} />);
 
     cy.wrap(consoleSpy).should('have.been.calledWithMatch', /Invalid prop 'orientation'/);

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

@@ -70,9 +70,7 @@ export type TabInfo = {
 // unchanged so signals keep working
 export const Tabs: FunctionComponent<TabsProps> = (props) => {
   const { children: myChildren, tabClass, panelClass, ...rest } = props;
-  const childrenToProcess = (
-    Array.isArray(myChildren) ? [...myChildren] : [myChildren]
-  ) as JSXNode[];
+  const childrenToProcess = Array.isArray(myChildren) ? [...myChildren] : [myChildren];
   let tabListComponent: JSXNode | undefined;
   const tabComponents: JSXNode[] = [];
   const panelComponents: JSXNode[] = [];
@@ -82,7 +80,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
 
   // Extract the Tab related components from the children
   while (childrenToProcess.length) {
-    const child = childrenToProcess.shift();
+    const child = childrenToProcess.shift() as JSXNode;
     if (!child) {
       continue;
     }
@@ -111,12 +109,12 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
         break;
       }
       case TabPanel: {
-        const { label, selected } = child.props;
+        const { label, selected } = child.props as TabPanelProps;
         // The consumer must provide a key if they change the order
         const matchedTabComponent = tabComponents[panelIndex];
         const tabIdFromTabMaybe =
-          matchedTabComponent?.props.tabId || matchedTabComponent?.key;
-        const tabId = tabIdFromTabMaybe || child.key || `${panelIndex}`;
+          (matchedTabComponent?.props as TabProps).tabId || matchedTabComponent?.key;
+        const tabId: string = tabIdFromTabMaybe || child.key || `${panelIndex}`;
 
         if (label) {
           tabComponents.push(<Tab>{label}</Tab>);
@@ -136,6 +134,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
         tabInfoList.push({
           tabId,
           index: panelIndex,
+          tabProps: {},
           panelProps: child.props,
         } as TabInfo);
         panelIndex++;
@@ -165,7 +164,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
     ) {
       tab.props.disabled = tabInfoList[index].panelProps.disabled;
     }
-    tabInfoList[index].tabProps = tab.props;
+    tabInfoList[index].tabProps = tab.props as TabProps;
   });
 
   if (tabListComponent) {

packages/kit-headless/src/utils/clsq.ts

@@ -12,7 +12,7 @@ export type MaterialButtonProps = {
 export type ButtonProps = HTMLButtonProps & MaterialButtonProps;
 
 export const Button = component$((props: ButtonProps) => {
-  const { class: classNames, disabled, floating, flat, size = 'medium', ...rest } = props;
+  const { disabled, floating, flat, size = 'medium', ...rest } = props;
 
   return (
     <button