@fox-dls/carousels 0.0.1 → 1.0.0

package/src/lib/pagination/index.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable unused-imports/no-unused-vars */
+import React, { useRef } from 'react';
+
+import SwiperCore, { Navigation, Pagination } from 'swiper';
+import { SwiperSlide } from 'swiper/react';
+
+import { CarouselSwiper, CarouselPillSvg, CarouselPill } from './styles';
+
+SwiperCore.use([Navigation, Pagination]);
+
+export const PaginationCarousel: React.FC<any> = ({
+  children,
+  navigation,
+  title,
+  controls,
+  ...props
+}) => {
+  const prevRef = useRef<HTMLDivElement>(null);
+  const nextRef = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <div
+        css={`
+          @keyframes fadein {
+            0% {
+              opacity: 0;
+            }
+
+            100% {
+              opacity: 1;
+            }
+          }
+          position: absolute !important;
+          top: 50% !important;
+          pointer-events: auto !important;
+          transform: translateY(-50%) !important;
+          left: 8px !important;
+          animation-duration: 0.3s !important;
+          animation-name: fadein !important;
+          z-index: 180 !important;
+          opacity: 0 !important;
+          :hover {
+            opacity: 1 !important;
+          }
+        `}
+      >
+        <CarouselPill ref={prevRef}>
+          <span
+            css={`
+              position: relative !important;
+            `}
+          >
+            <CarouselPillSvg
+              viewBox="0 0 16 16"
+              role="presentation"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path d="m10.8 16c-.4 0-.7-.1-.9-.4l-6.8-6.7c-.5-.5-.5-1.3 0-1.8l6.8-6.7c.5-.5 1.2-.5 1.7 0s .5 1.2 0 1.7l-5.8 5.9 5.8 5.9c.5.5.5 1.2 0 1.7-.2.3-.5.4-.8.4" />
+            </CarouselPillSvg>
+          </span>
+        </CarouselPill>
+      </div>
+      <div
+        css={`
+          @keyframes fadein {
+            0% {
+              opacity: 0;
+            }
+
+            100% {
+              opacity: 1;
+            }
+          }
+          position: absolute !important;
+          top: 50% !important;
+          pointer-events: auto !important;
+          transform: translateY(-50%) !important;
+          right: 8px !important;
+          animation-duration: 0.3s !important;
+          animation-name: fadein !important;
+          z-index: 180 !important;
+          opacity: 0 !important;
+          :hover {
+            opacity: 1 !important;
+          }
+        `}
+      >
+        <CarouselPill ref={nextRef}>
+          <span
+            css={`
+              position: relative !important;
+            `}
+          >
+            <CarouselPillSvg
+              viewBox="0 0 16 16"
+              role="presentation"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path d="m5.3 16c .3 0 .6-.1.8-.4l6.8-6.7c.5-.5.5-1.3 0-1.8l-6.8-6.7c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l5.8 5.9-5.8 5.9c-.5.5-.5 1.2 0 1.7.2.3.5.4.9.4" />
+            </CarouselPillSvg>
+          </span>
+        </CarouselPill>
+      </div>
+      <CarouselSwiper
+        {...props}
+        pagination={{
+          dynamicBullets: true
+        }}
+        onInit={swiper => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.prevEl = prevRef.current;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.nextEl = nextRef.current;
+          swiper.navigation.init();
+          swiper.navigation.update();
+          // console.log("Swiper", swiper);
+        }}
+      >
+        {React.Children.map(children, child =>
+          React.cloneElement(<SwiperSlide>{child}</SwiperSlide>, {
+            ...props
+          })
+        )}
+      </CarouselSwiper>
+    </>
+  );
+};

package/src/lib/pagination/styles/index.tsx

@@ -0,0 +1,79 @@
+import ButtonUnstyled from '@mui/core/ButtonUnstyled';
+import styled from 'styled-components';
+import { Swiper } from 'swiper/react';
+
+export const CarouselContainer = styled.div``;
+
+export const CarouselSwiper = styled(Swiper)`
+  height: 100%;
+  .swiper-pagination {
+    .swiper-pagination-bullet-active {
+      background-color: #fff;
+    }
+    .swiper-pagination-bullet-active-next {
+      background-color: #ffffff;
+    }
+    .swiper-pagination-bullet {
+      background-color: #ffffff;
+    }
+  }
+`;
+
+export const CarouselPill = styled(ButtonUnstyled)`
+  :hover {
+    border-color: rgba(0, 0, 0, 0.08) !important;
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,
+      0px 6px 16px rgb(0 0 0 / 12%) !important;
+    -webkit-transform: scale(1.04) !important;
+    -ms-transform: scale(1.04) !important;
+    transform: scale(1.04) !important;
+  }
+
+  -webkit-box-pack: center !important;
+  -ms-flex-pack: center !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  display: -webkit-inline-box !important;
+  display: -moz-inline-box !important;
+  display: -ms-inline-flexbox !important;
+  display: -webkit-inline-flex !important;
+  display: inline-flex !important;
+  border-radius: 50% !important;
+  border: 0px !important;
+  outline: none !important;
+  margin: 0px !important;
+  padding: 0px !important;
+  color: #222222 !important;
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  cursor: pointer !important;
+  -ms-touch-action: manipulation !important;
+  touch-action: manipulation !important;
+  -webkit-align-items: center !important;
+  align-items: center !important;
+  -webkit-justify-content: center !important;
+  justify-content: center !important;
+  border-style: solid !important;
+  border-width: 1px !important;
+  background-clip: padding-box !important;
+  border-color: rgba(0, 0, 0, 0.08) !important;
+  box-shadow: 0px 0px 0px 1px transparent, 0px 0px 0px 4px transparent,
+    0px 2px 4px rgb(0 0 0 / 18%) !important;
+  -webkit-transition: -webkit-transform 0.25s ease, transform 0.25s ease !important;
+  -moz-transition: transform 0.25s ease !important;
+  transition: -ms-transform 0.25s ease, -webkit-transform 0.25s ease,
+    transform 0.25s ease !important;
+  width: 32px !important;
+  height: 32px !important;
+`;
+
+export const CarouselPillSvg = styled.svg`
+  height: 10px;
+  width: 10px;
+  display: block;
+  fill: currentcolor;
+`;

package/src/lib/pills/index.tsx

@@ -0,0 +1,207 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable unused-imports/no-unused-vars */
+import React, { useRef, useState } from 'react';
+
+import { css } from 'styled-components';
+import SwiperCore, { Navigation } from 'swiper';
+import { SwiperSlide } from 'swiper/react';
+
+import { CarouselSwiper, CarouselPillContainer, CarouselPill } from './styles';
+
+SwiperCore.use([Navigation]);
+
+export const PillsCarousel: React.FC<any> = ({
+  children,
+  navigation,
+  title,
+  controls,
+  arrows,
+  ...props
+}) => {
+  const prevRef = useRef<any>(null);
+  const nextRef = useRef<any>(null);
+  const [swiperSlides, setSwiperSlides] = useState<any>({
+    progress: 0,
+    isBeginning: true,
+    isEnd: false
+  });
+  const [swiper, setSwiper] = useState<any>(null);
+  return (
+    <div
+      css={`
+        display: flex !important;
+        position: relative !important;
+        min-width: 0px !important;
+      `}
+    >
+      <div
+        css={`
+          position: absolute !important;
+          left: 0px !important;
+          z-index: 3 !important;
+          width: 65px !important;
+          background: linear-gradient(
+            to right,
+            rgb(255, 255, 255) 56.77%,
+            rgba(255, 255, 255, 0) 94.47%
+          ) !important;
+          ${swiperSlides.isBeginning &&
+          css`
+            display: none !important;
+            visibility: hidden !important;
+          `}
+        `}
+      >
+        {arrows && (
+          <CarouselPillContainer>
+            <CarouselPill
+              left={+true}
+              ref={prevRef}
+              aria-label="Previous"
+              type="button"
+              onClick={() => swiper.slidePrev()}
+            >
+              <span
+                css={`
+                  position: relative !important;
+                `}
+              >
+                <svg
+                  viewBox="0 0 32 32"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  role="presentation"
+                  focusable="false"
+                  css={`
+                    display: block;
+                    fill: none;
+                    height: 12px;
+                    width: 12px;
+                    stroke: currentcolor;
+                    stroke-width: 5.33333;
+                    overflow: visible;
+                  `}
+                >
+                  <g fill="none">
+                    <path d="m20 28-11.29289322-11.2928932c-.39052429-.3905243-.39052429-1.0236893 0-1.4142136l11.29289322-11.2928932" />
+                  </g>
+                </svg>
+              </span>
+            </CarouselPill>
+          </CarouselPillContainer>
+        )}
+      </div>
+
+      <CarouselSwiper
+        {...props}
+        cssMode={false}
+        slidesPerView="auto"
+        onInit={(swiper: any) => {
+          setSwiper(swiper);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.prevEl = prevRef.current;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line no-param-reassign
+          swiper.params.navigation.nextEl = nextRef.current;
+          swiper.navigation.init();
+          swiper.navigation.update();
+          setSwiperSlides({
+            progress: swiper.progress,
+            isBeginning: swiper.isBeginning,
+            isEnd: swiper.isEnd
+          });
+          // console.log("Swiper", swiper);
+        }}
+        onSlideChange={swiper => {
+          // console.log("Swiper Change", swiper);
+
+          setSwiperSlides({
+            progress: swiper.progress,
+            isBeginning: swiper.isBeginning,
+            isEnd: swiper.isEnd
+          });
+        }}
+      >
+        {React.Children.map(children, child => (
+          <SwiperSlide>
+            <div
+              css={`
+                display: inline-block !important;
+                white-space: nowrap !important;
+                padding-right: 8px !important;
+                padding-top: 4px !important;
+                padding-bottom: 4px !important;
+              `}
+            >
+              {child}
+            </div>
+          </SwiperSlide>
+        ))}
+      </CarouselSwiper>
+
+      <div
+        css={`
+          -webkit-box-pack: end !important;
+          position: absolute !important;
+          right: 0px !important;
+          z-index: 3 !important;
+          width: 75px !important;
+          display: flex !important;
+          justify-content: flex-end !important;
+          background: linear-gradient(
+            to left,
+            rgb(255, 255, 255) 56.77%,
+            rgba(255, 255, 255, 0) 94.47%
+          ) !important;
+          ${swiperSlides.isEnd &&
+          css`
+            display: none !important;
+            visibility: hidden !important;
+          `}
+        `}
+      >
+        {arrows && (
+          <CarouselPillContainer>
+            <CarouselPill
+              right={+true}
+              aria-label="Next"
+              type="button"
+              ref={nextRef}
+              onClick={() => swiper.slideNext()}
+            >
+              <span
+                css={`
+                  position: relative !important;
+                `}
+              >
+                <svg
+                  viewBox="0 0 32 32"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  role="presentation"
+                  focusable="false"
+                  css={`
+                    display: block;
+                    fill: none;
+                    height: 12px;
+                    width: 12px;
+                    stroke: currentcolor;
+                    stroke-width: 5.33333;
+                    overflow: visible;
+                  `}
+                >
+                  <g fill="none">
+                    <path d="m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932" />
+                  </g>
+                </svg>
+              </span>
+            </CarouselPill>
+          </CarouselPillContainer>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/lib/pills/styles/index.tsx

@@ -0,0 +1,57 @@
+import ButtonUnstyled from '@mui/core/ButtonUnstyled';
+import styled from 'styled-components';
+import { Swiper } from 'swiper/react';
+
+export const CarouselContainer = styled.div``;
+
+export const CarouselSwiper = styled(Swiper)`
+  margin: 0px !important;
+  .swiper-wrapper {
+    .swiper-slide {
+      scroll-snap-align: start !important;
+      width: auto !important;
+    }
+  }
+`;
+
+export const CarouselPillContainer = styled.div`
+  display: inline-block !important;
+  padding-right: 8px !important;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+`;
+
+export const CarouselPill = styled(ButtonUnstyled)<any>`
+  -webkit-box-pack: center !important;
+  -webkit-box-align: center !important;
+  appearance: none !important;
+  display: inline-flex !important;
+  border-radius: 50% !important;
+  border: 1px solid rgb(221, 221, 221) !important;
+  outline: none !important;
+  margin: 0px !important;
+  padding: 0px !important;
+  color: rgb(34, 34, 34) !important;
+  cursor: pointer !important;
+  touch-action: manipulation !important;
+  position: relative !important;
+  background: transparent !important;
+  transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,
+    transform 0.25s ease 0s !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 36px !important;
+  height: 36px !important;
+  ::before {
+    content: '' !important;
+    display: block !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 36px !important;
+    height: 36px !important;
+    border-radius: 50% !important;
+    border: 1px solid rgb(221, 221, 221) !important;
+  }
+`;

package/src/lib/styles/index.tsx

@@ -0,0 +1,168 @@
+import ButtonUnstyled from '@mui/core/ButtonUnstyled';
+import styled from 'styled-components';
+
+export const CarouselContainer = styled.div`
+  position: relative !important;
+  z-index: 0 !important;
+`;
+
+export const CarouselNavbar = styled.div`
+  -webkit-box-pack: justify !important;
+  -ms-flex-pack: justify !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  color: #222222 !important;
+  display: -webkit-box !important;
+  display: -moz-box !important;
+  display: -ms-flexbox !important;
+  display: -webkit-flex !important;
+  display: flex !important;
+  -webkit-align-items: center !important;
+  align-items: center !important;
+  -webkit-justify-content: space-between !important;
+  justify-content: space-between !important;
+  margin-bottom: 16px !important;
+`;
+
+export const NavbarTitleContainer = styled.div`
+  margin-right: 24px !important;
+  width: auto !important;
+`;
+
+export const NavbarTitle = styled.div`
+  @media (min-width: 744px) {
+    font-size: 32px !important;
+    line-height: 36px !important;
+    font-weight: 800 !important;
+    text-align: left !important;
+    color: #222222 !important;
+    margin-bottom: 15px !important;
+  }
+  font-size: 22px !important;
+  line-height: 26px !important;
+  font-weight: 600 !important;
+  margin-bottom: 10px !important;
+`;
+
+export const NavbarControlsContainer = styled.div`
+  display: flex !important;
+  align-items: center !important;
+  margin-left: auto !important;
+`;
+
+export const NavbarControlsQuick = styled.a`
+  @media (max-width: 744px) {
+    display: none !important;
+  }
+  font-size: inherit !important;
+  font-family: inherit !important;
+  font-style: inherit !important;
+  font-variant: inherit !important;
+  line-height: inherit !important;
+  color: #222222 !important;
+  text-decoration: underline !important;
+  border-radius: 4px !important;
+  font-weight: 600 !important;
+  outline: none !important;
+`;
+
+export const NavbarControlsSpace = styled.span`
+  display: inline-block !important;
+  height: 32px !important;
+  width: 1px !important;
+  margin-right: 16px !important;
+  padding: 0px !important;
+  border: none !important;
+`;
+
+export const ArrowsContainer = styled.div`
+  -webkit-box-align: center !important;
+  color: rgb(34, 34, 34) !important;
+  display: flex !important;
+  align-items: center !important;
+  margin-left: auto !important;
+`;
+
+export const ArrowsFlex = styled.div`
+  display: -webkit-box !important;
+  display: -moz-box !important;
+  display: -ms-flexbox !important;
+  display: -webkit-flex !important;
+  display: flex !important;
+`;
+
+export const ArrowsButton = styled(ButtonUnstyled)<any>`
+  -webkit-box-pack: center !important;
+  -webkit-box-align: center !important;
+  appearance: none !important;
+  display: inline-flex !important;
+  border-radius: 50% !important;
+  border: none !important;
+  outline: none !important;
+  margin: 0px !important;
+  padding: 0px !important;
+  color: rgb(34, 34, 34) !important;
+  cursor: pointer !important;
+  touch-action: manipulation !important;
+  position: relative !important;
+  background: transparent !important;
+  transition: -ms-transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s,
+    transform 0.25s ease 0s !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 32px !important;
+  height: 32px !important;
+  :focus {
+    box-shadow: none !important;
+  }
+  ::before {
+    content: '' !important;
+    display: block !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: 50% !important;
+    background: rgb(255, 255, 255) !important;
+    border: 1px solid rgb(221, 221, 221) !important;
+  }
+  :disabled {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+    color: rgb(221, 221, 221) !important;
+    transform: scale(1) !important;
+  }
+  :hover:not([disabled]) {
+    color: rgb(0, 0, 0) !important;
+    transform: scale(1.04) !important;
+  }
+`;
+
+export const ArrowsDivider = styled.span`
+  margin-left: 8px !important;
+`;
+
+export const ArrowsIconClip = styled.span`
+  border: 0px !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(100%) !important;
+  clip-path: inset(100%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0px !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+`;
+
+export const ArrowsSvg = styled.svg`
+  display: block;
+  fill: none;
+  height: 12px;
+  width: 12px;
+  stroke: currentcolor;
+  stroke-width: 4;
+  overflow: visible;
+`;

package/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": ""
+  }
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "noEmit": false,
+    "composite": false,
+    "incremental": true,
+    "paths": {}
+  },
+  "exclude": ["dist"]
+}