Merge branch 'main' into feat/SfRatingButton

qwikifiers · Jan 30, 2024 · c3102af · c3102af
2 parents 7875f0d + a1877bd
commit c3102af
Show file tree

Hide file tree

Showing 57 changed files with 318 additions and 222 deletions.
diff --git a/.github/actions/test/action.yml b/.github/actions/test/action.yml
@@ -0,0 +1,21 @@
+name: Storefront UI Cypress tests
+
+description: Storefront UI Cypress tests
+
+inputs:
+  github_token:
+    description: GitHub token
+    required: true
+
+runs:
+  using: composite
+
+  steps:
+    - name: Build Storefront UI
+      shell: bash
+      run: npx nx build qwik-storefront-ui
+
+    - name: Run Storefront UI Cypress tests
+      uses: cypress-io/github-action@v6.6.1
+      with:
+        command: 'npm run test.storefront-ui.ci'
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,38 @@
+name: Test
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - ready_for_review
+
+permissions:
+  pull-requests: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node_version: [21]
+
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        if: github.event_name == 'pull_request'
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/checkout@v3
+      - name: Setup
+        uses: ./.github/actions/setup
+        with:
+          node_version: ${{ matrix.node_version }}
+
+      - name: Test
+        uses: ./.github/actions/test
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/apps/website/src/components/utils/Controls.tsx b/apps/website/src/components/utils/Controls.tsx
@@ -1,10 +1,4 @@
-import {
-  $,
-  QwikChangeEvent,
-  component$,
-  useContext,
-  useSignal,
-} from '@builder.io/qwik';
+import { $, component$, useContext, useSignal } from '@builder.io/qwik';
 import {
   SfButton,
   SfButtonSize,
@@ -26,22 +20,20 @@ export const Controls = component$<any>(() => {
     };
   });
 
-  const handleJsonOnChangeValue = $(
-    (e: QwikChangeEvent<HTMLTextAreaElement>, name: string) => {
-      examplesState.data.state = {
-        ...examplesState.data.state,
-        [name]: JSON.parse(e.target.value),
-      };
-    }
-  );
+  const handleJsonOnChangeValue = $((el: HTMLTextAreaElement, name: string) => {
+    examplesState.data.state = {
+      ...examplesState.data.state,
+      [name]: JSON.parse(el.value),
+    };
+  });
 
   const handleCheckbox = $(
     (
-      e: QwikChangeEvent<HTMLInputElement>,
+      el: HTMLInputElement,
       name: string,
       currentValue: string | boolean | []
     ) => {
-      const { value } = e.target;
+      const { value } = el;
       if (Array.isArray(currentValue)) {
         const newValue: string[] = [...currentValue];
         const valueItemIndex = newValue.indexOf(value);
@@ -161,11 +153,8 @@ export const Controls = component$<any>(() => {
                       <select
                         value={examplesState.data.state[control.modelName]}
                         aria-labelledby={control.modelName}
-                        onChange$={(e) => {
-                          handleOnChangeValue(
-                            control.modelName,
-                            e.target.value
-                          );
+                        onChange$={(_: Event, el: HTMLSelectElement) => {
+                          handleOnChangeValue(control.modelName, el.value);
                         }}
                       >
                         {(
@@ -224,9 +213,12 @@ export const Controls = component$<any>(() => {
                                           2
                                         ) as string
                                       }
-                                      onChange$={(e) => {
+                                      onChange$={(
+                                        _: Event,
+                                        el: HTMLTextAreaElement
+                                      ) => {
                                         handleJsonOnChangeValue(
-                                          e,
+                                          el,
                                           control.modelName
                                         );
                                       }}
@@ -266,18 +258,21 @@ export const Controls = component$<any>(() => {
                                       value={checkboxValue(option)}
                                       type={control.type}
                                       aria-labelledby={control.modelName}
-                                      onChange$={(e) => {
+                                      onChange$={(
+                                        _: Event,
+                                        el: HTMLInputElement
+                                      ) => {
                                         control.type === 'checkbox'
                                           ? handleCheckbox(
-                                              e,
+                                              el,
                                               control.modelName,
                                               examplesState.data.state[
                                                 control.modelName
                                               ]
                                             )
                                           : handleOnChangeValue(
                                               control.modelName,
-                                              e.target.value
+                                              el.value
                                             );
                                       }}
                                       name={`${control.modelName}-${index}`}

diff --git a/apps/website/src/routes/examples/SfCheckbox/index.tsx b/apps/website/src/routes/examples/SfCheckbox/index.tsx
@@ -79,8 +79,8 @@ export default component$(() => {
         );
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
+  const onChange = $((_: Event, el: HTMLInputElement) => {
+    const { value } = el;
     examplesState.data.state =
       examplesState.data.state.checkedValue.indexOf(value) > -1
         ? {

diff --git a/apps/website/src/routes/examples/SfInput/index.tsx b/apps/website/src/routes/examples/SfInput/index.tsx
@@ -96,10 +96,10 @@ export default component$(() => {
     };
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
+  const onChange = $((_: Event, el: HTMLInputElement) => {
     examplesState.data.state = {
       ...examplesState.data.state,
-      value: event.target.value,
+      value: el.value,
     };
   });
   const isAboveLimit = examplesState.data.state.characterLimit

diff --git a/apps/website/src/routes/examples/SfRadio/index.tsx b/apps/website/src/routes/examples/SfRadio/index.tsx
@@ -81,8 +81,8 @@ export default component$(() => {
               checked={examplesState.data.state.checked === value}
               disabled={examplesState.data.state.disabled}
               invalid={examplesState.data.state.invalid}
-              onChange$={(event) => {
-                onChangeHandler(event.target.value);
+              onChange$={(_: Event, el: HTMLInputElement) => {
+                onChangeHandler(el.value);
               }}
             />
             <span class="ml-2 text-base font-normal leading-6 font-body">

diff --git a/apps/website/src/routes/examples/SfSwitch/index.tsx b/apps/website/src/routes/examples/SfSwitch/index.tsx
@@ -1,5 +1,6 @@
 import {
   $,
+  InputHTMLAttributes,
   QwikChangeEvent,
   component$,
   useContext,
@@ -49,8 +50,8 @@ export default component$(() => {
     };
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
+  const onChange = $((_: Event, el: HTMLInputElement) => {
+    const { checked } = el;
     examplesState.data.state = { ...examplesState.data.state, checked };
   });
 

diff --git a/apps/website/src/routes/showcases/Banners/Hero/index.tsx b/apps/website/src/routes/showcases/Banners/Hero/index.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
   return (
     <div class="relative min-h-[600px]">
       <picture>
-        <source srcSet={desktopBackground} media="(min-width: 768px)" />
+        <source src-set={desktopBackground} media="(min-width: 768px)" />
         <img
           src={mobileBackground}
           class="absolute w-full h-full z-[-1] md:object-cover"

diff --git a/apps/website/src/routes/showcases/Chip/ChipWithThumbnail/index.tsx b/apps/website/src/routes/showcases/Chip/ChipWithThumbnail/index.tsx
@@ -4,18 +4,35 @@ import { SfChip, SfThumbnail } from 'qwik-storefront-ui';
 export default component$(() => {
   return (
     <>
-      <SfChip size="sm" class="mr-2" slotPrefix={true}>
-        <div q:slot="prefix">
-          <SfThumbnail class="bg-red-500" size="sm" />
-        </div>
-        Red
-      </SfChip>
-      <SfChip slotPrefix={true}>
-        <div q:slot="prefix">
-          <SfThumbnail class="bg-secondary-400" size="base" />
-        </div>
-        Blue
-      </SfChip>
+      <div>
+        <SfChip size="sm" class="mr-2" slotPrefix={true}>
+          <div q:slot="prefix">
+            <SfThumbnail class="bg-red-500" size="sm" />
+          </div>
+          Red
+        </SfChip>
+        <SfChip slotPrefix={true}>
+          <div q:slot="prefix">
+            <SfThumbnail class="bg-secondary-400" size="base" />
+          </div>
+          Blue
+        </SfChip>
+      </div>
+
+      <div class="my-5">
+        <SfChip size="sm" class="mr-2" slotSuffix={true}>
+          <div q:slot="suffix">
+            <SfThumbnail class="bg-red-500" size="sm" />
+          </div>
+          Red
+        </SfChip>
+        <SfChip slotSuffix={true}>
+          <div q:slot="suffix">
+            <SfThumbnail class="bg-secondary-400" size="base" />
+          </div>
+          Blue
+        </SfChip>
+      </div>
     </>
   );
 });
diff --git a/apps/website/src/routes/showcases/Chip/Deletable/index.tsx b/apps/website/src/routes/showcases/Chip/Deletable/index.tsx
@@ -23,8 +23,8 @@ export default component$(() => {
             class="mr-2"
             inputProps={{
               checked: true,
-              onChange$: $(() => handleRemoveChip(value)),
             }}
+            onChange$={() => handleRemoveChip(value)}
             slotPrefix={true}
             slotSuffix={true}
           >

diff --git a/apps/website/src/routes/showcases/Drawer/Placement/index.tsx b/apps/website/src/routes/showcases/Drawer/Placement/index.tsx
@@ -1,4 +1,3 @@
-import type { QwikChangeEvent } from '@builder.io/qwik';
 import { $, component$, useSignal } from '@builder.io/qwik';
 import type { SfDrawerProps } from 'qwik-storefront-ui';
 import { SfButton, SfDrawer, SfDrawerPlacement } from 'qwik-storefront-ui';
@@ -9,8 +8,8 @@ export default component$(() => {
     SfDrawerPlacement.left
   );
 
-  const changePlacement = $((event: QwikChangeEvent<HTMLSelectElement>) => {
-    placementSignal.value = event.target.value as SfDrawerProps['placement'];
+  const changePlacement = $((_: Event, el: HTMLSelectElement) => {
+    placementSignal.value = el.value as SfDrawerProps['placement'];
   });
 
   return (

diff --git a/apps/website/src/routes/showcases/Filters/Color/index.tsx b/apps/website/src/routes/showcases/Filters/Color/index.tsx
@@ -89,8 +89,8 @@ export default component$(() => {
                   checked={colorListSignal.value.includes(value)}
                   class="appearance-none peer"
                   type="checkbox"
-                  onChange$={(event) => {
-                    handleColorSelection(event.target.value);
+                  onChange$={(_, el) => {
+                    handleColorSelection(el.value);
                   }}
                 />
                 <span class="inline-flex items-center justify-center p-1 transition duration-300 rounded-full cursor-pointer ring-1 ring-neutral-200 ring-inset outline-offset-2 outline-secondary-600 peer-checked:ring-2 peer-checked:ring-primary-700 peer-hover:bg-primary-100 peer-hover:ring-primary-200 peer-active:bg-primary-200 peer-active:ring-primary-300 peer-disabled:cursor-not-allowed peer-disabled:bg-disabled-100 peer-disabled:opacity-50 peer-disabled:ring-1 peer-disabled:ring-disabled-200 peer-disabled:hover:ring-disabled-200 peer-checked:hover:ring-primary-700 peer-checked:active:ring-primary-700 peer-focus:outline">

diff --git a/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx b/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx
@@ -1,4 +1,4 @@
-import { $, QwikChangeEvent, component$, useSignal } from '@builder.io/qwik';
+import { $, component$, useSignal } from '@builder.io/qwik';
 import {
   SfAccordionItem,
   SfButton,
@@ -207,8 +207,8 @@ export default component$(() => {
                           disabled: !counter,
                           checked: selectedFiltersSignal.value.includes(value),
                           onChange$: $(
-                            (event: QwikChangeEvent<HTMLInputElement>) => {
-                              handleFilterSelection(event.target.value);
+                            (_: InputEvent, el: HTMLInputElement) => {
+                              handleFilterSelection(el.value);
                             }
                           ),
                         }}
@@ -239,8 +239,8 @@ export default component$(() => {
                           checked={selectedFiltersSignal.value.includes(value)}
                           class="appearance-none peer"
                           type="checkbox"
-                          onChange$={(event) => {
-                            handleFilterSelection(event.target.value);
+                          onChange$={(_: InputEvent, el: HTMLInputElement) => {
+                            handleFilterSelection(el.value);
                           }}
                         />
                         <span class="inline-flex items-center justify-center p-1 transition duration-300 rounded-full cursor-pointer ring-1 ring-neutral-200 ring-inset outline-offset-2 outline-secondary-600 peer-checked:ring-2 peer-checked:ring-primary-700 peer-hover:bg-primary-100 peer-hover:ring-primary-200 peer-active:bg-primary-200 peer-active:ring-primary-300 peer-disabled:cursor-not-allowed peer-disabled:bg-disabled-100 peer-disabled:opacity-50 peer-disabled:ring-1 peer-disabled:ring-disabled-200 peer-disabled:hover:ring-disabled-200 peer-checked:hover:ring-primary-700 peer-checked:active:ring-primary-700 peer-focus:outline">
@@ -272,8 +272,8 @@ export default component$(() => {
                         disabled={counter === 0}
                         value={value}
                         checked={selectedFiltersSignal.value.includes(value)}
-                        onChange$={(event) => {
-                          handleFilterSelection(event.target?.value);
+                        onChange$={(_: InputEvent, el: HTMLInputElement) => {
+                          handleFilterSelection(el.value);
                         }}
                       />
                     </div>
@@ -302,8 +302,8 @@ export default component$(() => {
                         value={value}
                         name="radio-price"
                         checked={selectedFiltersSignal.value.includes(value)}
-                        onChange$={(event) => {
-                          handleRadioSelection(event.target.value);
+                        onChange$={(_: Event, el: HTMLInputElement) => {
+                          handleRadioSelection(el.value);
                         }}
                       />
                     </div>

diff --git a/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx b/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx
@@ -48,8 +48,8 @@ export default component$(() => {
               : ''
           }`}
           value={valueSignal.value}
-          onChange$={(event) => {
-            valueSignal.value = event.target.value;
+          onChange$={(_: Event, el: HTMLInputElement) => {
+            valueSignal.value = el.value;
           }}
         />
       </label>

diff --git a/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx b/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx
@@ -9,8 +9,8 @@ export default component$(() => {
         <span class="text-sm font-medium">Label</span>
         <SfInput
           value={valueSignal.value}
-          onChange$={(event) => {
-            valueSignal.value = event.target.value;
+          onChange$={(_: Event, el: HTMLInputElement) => {
+            valueSignal.value = el.value;
           }}
           wrapperClass="!bg-disabled-100 !ring-disabled-300 !ring-1"
           readOnly

diff --git a/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx b/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx
@@ -6,7 +6,7 @@ export default component$(() => {
     <div class="flex flex-col gap-y-5">
       <SfInput size="sm" aria-label="Label size sm" />
       <SfInput aria-label="Label size base" />
-      <SfInput size="lg" aria-label="Label size lg" />
+      <SfInput size={'lg'} aria-label="Label size lg" />
     </div>
   );
 });
diff --git a/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx b/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx
@@ -145,7 +145,7 @@ export default component$(() => {
           >
             <picture>
               <source
-                srcSet={'/images/vsf_logo_white.svg'}
+                src-set={'/images/vsf_logo_white.svg'}
                 media="(min-width: 767px)"
               />
               <img