chore: change naming of swiper hook

WTTJ · Aug 7, 2023 · 3266e28 · 3266e28
1 parent 7bac9b7
commit 3266e28
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 103 deletions.
diff --git a/docs/pages/components/swiper.mdx b/docs/pages/components/swiper.mdx
@@ -19,10 +19,10 @@ import {
 
 ```jsx
 function() {
-  const state = useSwiperState({ spaceBetween: 0 })
+  const swiper = useSwiper({ spaceBetween: 0 })
 
   return (
-    <Swiper state={state} h="400">
+    <Swiper store={swiper} h="400">
       <img
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
         src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -46,10 +46,10 @@ Providing `slidesPerView` with `{ mobile: 1, tablet: 1, desktop: 2 }` will show
 
 ```jsx
 function() {
-  const state = useSwiperState({ slidesPerView: { mobile: 1, tablet: 1, desktop: 2 } })
+  const swiper = useSwiper({ slidesPerView: { mobile: 1, tablet: 1, desktop: 2 } })
 
   return (
-    <Swiper state={state} h={400}>
+    <Swiper store={swiper} h={400}>
       <img
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
         src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -73,10 +73,10 @@ By providing `firstSlideToShow` with `2`, the swiper will begin on the second sl
 
 ```jsx
 function() {
-  const state = useSwiperState({ firstSlideToShow: 2 })
+  const swiper = useSwiper({ firstSlideToShow: 2 })
 
   return (
-    <Swiper state={state} h={400}>
+    <Swiper store={swiper} h={400}>
       <img
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
         src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -100,10 +100,10 @@ By providing `centeredSlides`, the swiper will begin on the middle slide, `first
 
 ```jsx
 function() {
-  const state = useSwiperState({ firstSlideToShow: 2, centeredSlides: true })
+  const swiper = useSwiper({ firstSlideToShow: 2, centeredSlides: true })
 
   return (
-    <Swiper state={state} h={400}>
+    <Swiper store={swiper} h={400}>
       <img
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
         src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -127,10 +127,10 @@ Providing `autoplay` lets the slides advance automatically. Pass `duration` to c
 
 ```jsx
 function() {
-  const state = useSwiperState({ autoplay: true, loop: true })
+  const swiper = useSwiper({ autoplay: true, loop: true })
 
   return (
-    <Swiper state={state} h={400}>
+    <Swiper store={swiper} h={400}>
       <img
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
         src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -154,10 +154,10 @@ By providing the optional `withPagination` with `{ mobile: true, desktop: true }
 
 ```jsx
 function() {
-  const state = useSwiperState({ withPagination: { mobile: true, desktop: true } })
+  const swiper = useSwiper({ withPagination: { mobile: true, desktop: true } })
 
   return (
-    <Swiper state={state} h={400}>
+    <Swiper store={swiper} h={400}>
       <img
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
         src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -181,10 +181,10 @@ By providing the optional `withNavigation` with `{ mobile: false, desktop: false
 
 ```jsx
 function() {
-  const state = useSwiperState({ withNavigation: { mobile: false, desktop: false }})
+  const swiper = useSwiper({ withNavigation: { mobile: false, desktop: false }})
 
   return (
-    <Swiper state={state} h={400}>
+    <Swiper store={swiper} h={400}>
       <img
         style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
         src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
@@ -208,10 +208,10 @@ Use dark (black) colors for the pagination and arrows in case of slides too brig
 
 ```jsx
 function() {
-  const state = useSwiperState({ withPagination: { mobile: true, desktop: true }, withDarkUI: true })
+  const swiper = useSwiper({ withPagination: { mobile: true, desktop: true }, withDarkUI: true })
 
   return (
-    <Swiper state={state} h={350}>
+    <Swiper store={swiper} h={350}>
       {[...Array(6)].map(item => (
         <Box border="1px solid" borderColor="dark-100" h={300} key={item} />
       ))}

diff --git a/docs/pages/upgrade.mdx b/docs/pages/upgrade.mdx
@@ -362,6 +362,18 @@ We rework the swiper component:
 - `slidesToShow` option become `slidesPerView` and now takes an object to define the number of slides per device `{ mobile: 1, tablet: 1, desktop: 1 }`
 - `renderPaginationItem`, `nextButton`, `prevButton` and `slidesToSwipe` options have been removed
 
+Now we pass the component state from `useSwiper` on the `store` property:
+
+```diff live=false
+- const state = useSwiperState()
++ const swiper = useSwiper()
+
+- <Swiper state={state}>
++ <Swiper store={swiper}>
+=     ...
+= </Swiper>
+```
+
 ## Other versions
 
 - [Version 4](upgrades/v4)

diff --git a/packages/Swiper/src/index.tsx b/packages/Swiper/src/index.tsx
@@ -8,7 +8,7 @@ import { CreateWuiProps } from '@welcome-ui/system'
 import { useInterval } from './use-interval'
 import * as S from './styles'
 
-export interface SwiperOptions {
+export interface UseSwiperProps {
   autoplay?: boolean
   /** If true the swiper will begin at the middle */
   centeredSlides?: boolean
@@ -42,7 +42,7 @@ export interface SwiperOptions {
   }
 }
 
-export const useSwiperState = (options: SwiperOptions = {}) => {
+export const useSwiper = (options: UseSwiperProps = {}) => {
   const {
     centeredSlides = false,
     firstSlideToShow = 0,
@@ -107,17 +107,17 @@ export const useSwiperState = (options: SwiperOptions = {}) => {
   }
 }
 
-export type SwiperState = ReturnType<typeof useSwiperState>
+export type UseSwiper = ReturnType<typeof useSwiper>
 
 export type SwiperInitialProps = {
   children: JSX.Element | JSX.Element[]
   dataTestId?: string
-  state: SwiperState
+  store: UseSwiper
 }
 
 export type SwiperProps = CreateWuiProps<'div', SwiperInitialProps>
 
-export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) => {
+export const Swiper = ({ children, dataTestId, store, ...rest }: SwiperProps) => {
   const {
     autoplay,
     centeredSlides,
@@ -140,7 +140,7 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
     withDarkUI,
     withNavigation,
     withPagination,
-  } = state
+  } = store
 
   const slides = Children.map(children, (child, i) => {
     const key = `${id}-${i}`

diff --git a/packages/Swiper/src/styles.ts b/packages/Swiper/src/styles.ts
@@ -2,7 +2,7 @@ import styled, { css, system, th } from '@xstyled/styled-components'
 import { Button } from '@welcome-ui/button'
 import { CreateWuiProps } from '@welcome-ui/system'
 
-import { SwiperState } from '.'
+import { UseSwiper } from '.'
 
 const getSlideWidth = (slidesPerView = 3, spaceBetween: number, toRem: (px: number) => void) => {
   if (spaceBetween === 0) {
@@ -25,7 +25,7 @@ export const Swiper = styled.div<CreateWuiProps<'div'>>`
 `
 
 export const Arrow = styled(Button)<
-  { disabled: boolean } & Pick<SwiperState, 'withNavigation' | 'withDarkUI'>
+  { disabled: boolean } & Pick<UseSwiper, 'withNavigation' | 'withDarkUI'>
 >(
   ({ disabled, withDarkUI, withNavigation: { desktop, mobile } }) => css`
     top: 50%;
@@ -55,7 +55,7 @@ export const Arrow = styled(Button)<
   `
 )
 
-export const Pagination = styled.div<Pick<SwiperState, 'withPagination'>>(
+export const Pagination = styled.div<Pick<UseSwiper, 'withPagination'>>(
   ({ withPagination: { desktop, mobile } }) => css`
     justify-content: center;
     position: absolute;
@@ -73,7 +73,7 @@ export const Pagination = styled.div<Pick<SwiperState, 'withPagination'>>(
   `
 )
 
-export const Bullet = styled.div<{ active: boolean } & Pick<SwiperState, 'withDarkUI'>>(
+export const Bullet = styled.div<{ active: boolean } & Pick<UseSwiper, 'withDarkUI'>>(
   ({ active, withDarkUI }) => css`
     height: 10;
     width: 10;
@@ -89,87 +89,87 @@ export const Bullet = styled.div<{ active: boolean } & Pick<SwiperState, 'withDa
   `
 )
 
-export const Container = styled.ul<
-  Pick<SwiperState, 'slidesPerView' | 'spaceBetween' | 'fullWidth'>
->(({ fullWidth, slidesPerView: { desktop, mobile, tablet }, spaceBetween, theme }) => {
-  return css`
-    scroll-snap-type: x mandatory;
-    display: flex;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: scroll;
-
-    /* Hide scrollbar */
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    height: 100%;
-    padding: 0;
-
-    > * {
-      list-style-type: none;
-      margin-right: ${spaceBetween};
-      min-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
-      flex: 1;
-
-      &:last-child {
-        margin-right: 0;
+export const Container = styled.ul<Pick<UseSwiper, 'slidesPerView' | 'spaceBetween' | 'fullWidth'>>(
+  ({ fullWidth, slidesPerView: { desktop, mobile, tablet }, spaceBetween, theme }) => {
+    return css`
+      scroll-snap-type: x mandatory;
+      display: flex;
+      -webkit-overflow-scrolling: touch;
+      overflow-x: scroll;
+
+      /* Hide scrollbar */
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
       }
-    }
+      height: 100%;
+      padding: 0;
 
-    @media (min-width: sm) {
-      ${mobile &&
-      css`
-        > * {
-          min-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
+      > * {
+        list-style-type: none;
+        margin-right: ${spaceBetween};
+        min-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
+        flex: 1;
 
-          &:nth-of-type(${mobile}n + 1) {
-            scroll-snap-align: start;
-          }
+        &:last-child {
+          margin-right: 0;
         }
-      `}
-    }
+      }
 
-    @media (min-width: md) {
-      ${tablet &&
-      css`
-        > * {
-          min-width: ${getSlideWidth(tablet, spaceBetween, theme.toRem)};
+      @media (min-width: sm) {
+        ${mobile &&
+        css`
+          > * {
+            min-width: ${getSlideWidth(mobile, spaceBetween, theme.toRem)};
 
-          &:nth-of-type(${tablet}n + 1) {
-            scroll-snap-align: start;
+            &:nth-of-type(${mobile}n + 1) {
+              scroll-snap-align: start;
+            }
           }
-        }
-      `}
-    }
+        `}
+      }
 
-    @media (min-width: lg) {
-      ${desktop &&
-      css`
-        > * {
-          min-width: ${getSlideWidth(desktop, spaceBetween, theme.toRem)};
-          scroll-snap-align: unset;
+      @media (min-width: md) {
+        ${tablet &&
+        css`
+          > * {
+            min-width: ${getSlideWidth(tablet, spaceBetween, theme.toRem)};
 
-          &:nth-of-type(${desktop}n + 1) {
-            scroll-snap-align: start;
+            &:nth-of-type(${tablet}n + 1) {
+              scroll-snap-align: start;
+            }
           }
+        `}
+      }
 
-          &:not(:nth-of-type(${desktop}n + 1)) {
+      @media (min-width: lg) {
+        ${desktop &&
+        css`
+          > * {
+            min-width: ${getSlideWidth(desktop, spaceBetween, theme.toRem)};
             scroll-snap-align: unset;
+
+            &:nth-of-type(${desktop}n + 1) {
+              scroll-snap-align: start;
+            }
+
+            &:not(:nth-of-type(${desktop}n + 1)) {
+              scroll-snap-align: unset;
+            }
           }
-        }
-      `}
-    }
+        `}
+      }
 
-    @media (min-width: 1920px) {
-      ${desktop &&
-      fullWidth &&
-      css`
-        > * {
-          min-width: ${getSlideWidth(desktop + 2, spaceBetween, theme.toRem)};
-        }
-      `}
-    }
-  `
-})
+      @media (min-width: 1920px) {
+        ${desktop &&
+        fullWidth &&
+        css`
+          > * {
+            min-width: ${getSlideWidth(desktop + 2, spaceBetween, theme.toRem)};
+          }
+        `}
+      }
+    `
+  }
+)