playbook_ui 10.21.0.pre.alpha.jg1 → 10.21.0.pre.alpha.lightbox

data/app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss

@@ -0,0 +1,110 @@
+.Lightbox {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color: black;
+    z-index: 1;
+    overflow: hidden;
+  }
+  
+  .Slides {
+    display: flex;
+    flex-grow: 1;
+    height: calc(100% - 100px);
+    width: 100%;
+    z-index: 1;
+  
+    [class^="react-transform-wrapper"] {
+      flex-shrink: 0;
+      width: 100%;
+      height: 100%;
+    }
+  
+    [class^="react-transform-content"] {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .Slide,
+  .Thumbnail {
+    flex-shrink: 0;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+  }
+  
+  .Slide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  
+    img {
+      width: 100vw;
+      height: 100vh;
+      object-fit: contain;
+    }
+  }
+  
+  .BackBtn,
+  .NextBtn {
+    z-index: 2;
+    color: black;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: calc(50vh - 5px);
+    border: none;
+    border-radius: 50%;
+    background-color: white;
+  }
+  
+  .BackBtn::before,
+  .NextBtn::before {
+    content: "▸";
+  }
+  
+  .BackBtn {
+    left: 30px;
+    transform: rotate(180deg);
+  }
+  
+  .NextBtn {
+    right: 30px;
+  }
+  
+  .Thumbnails {
+    display: flex;
+    padding: 3px;
+  }
+  
+  .Thumbnails.draggable {
+    align-self: flex-start;
+  }
+  
+  .Thumbnail {
+    padding: 3px;
+    height: 100%;
+  
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .Thumbnail.active {
+    padding: 6px;
+    background-color: white;
+    box-shadow: 0 0 6px white;
+  }
+  

data/app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js

@@ -0,0 +1,66 @@
+// @flow
+
+import { noop } from 'lodash'
+import { useEffect, useState } from 'react'
+import { useAnimation } from 'framer-motion'
+import { useWindowSize } from '../hooks/useWindowSize'
+
+const cycleIndex = (current: number, min: number, max: number): number => {
+  if (current < min) return max
+  if (current > max) return min
+  return current
+}
+
+const swipeConfidenceThreshold = 10000
+const swipePower = (offset: number, velocity: number) => {
+  return Math.abs(offset) * velocity
+}
+
+export default function useSlides({
+  current = 0,
+  pagesCount = 0,
+  onChange = noop,
+}) {
+  const controls = useAnimation()
+  const viewportSize = useWindowSize()
+  const [currentIndex, setCurrentIndex] = useState(current)
+  const dragConstraints = {
+    left: -viewportSize.width * (pagesCount - 1),
+    right: 0,
+  }
+
+  const paginate = (newDirection: number) => {
+    const nextIndex = currentIndex + newDirection
+    const cycledNextIndex = cycleIndex(nextIndex, 0, pagesCount - 1)
+    setCurrentIndex(cycledNextIndex)
+    return cycledNextIndex
+  }
+
+  const handleDragEnd = (e, { offset, velocity }) => {
+    let nextIndex = currentIndex
+    const swipe = swipePower(offset.x, velocity.x)
+
+    if (swipe < -swipeConfidenceThreshold) {
+      nextIndex = paginate(1)
+    } else if (swipe > swipeConfidenceThreshold) {
+      nextIndex = paginate(-1)
+    }
+
+    controls.start({ x: -viewportSize.width * nextIndex })
+
+    if (nextIndex !== currentIndex) {
+      onChange(nextIndex)
+    }
+  }
+
+  useEffect(() => {
+    controls.set({ x: -viewportSize.width * current })
+    setCurrentIndex(current)
+  }, [controls, current, viewportSize.width])
+
+  return {
+    controls,
+    dragConstraints,
+    handleDragEnd,
+  }
+}

data/app/pb_kits/playbook/pb_lightbox/_lightbox.jsx

@@ -0,0 +1,112 @@
+/* eslint-disable no-unused-vars */
+/* @flow */
+
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props.js'
+import { globalProps } from '../utilities/globalProps.js'
+import Icon from '../pb_icon/_icon'
+import LightboxHeader from './_lightbox_header'
+import { LightboxContext } from './_lightbox_context'
+
+import Carousel from './Carousel/index.jsx'
+
+type LightboxType = {
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  data?: object,
+  description?: string,
+  id?: string,
+  photos: [],
+  initialPhoto: string,
+  onClose: Function,
+  opened: boolean,
+  icon: string,
+  iconSize: number,
+  trigger?: string,
+}
+
+const Lightbox = (props: LightboxType) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    description,
+    id = '',
+    photos,
+    initialPhoto,
+    onClose,
+    opened,
+    icon,
+    iconSize,
+    trigger,
+  } = props
+  const [activePhoto, setActivePhoto] = useState(initialPhoto)
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_lightbox_kit'),
+    globalProps(props),
+    className
+  )
+
+  const handleOnSlide = (index) => {
+    setActivePhoto(photos[index])
+  }
+
+  const api = {
+    onClose: trigger
+      ? function () {
+        setTriggerOpened(false)
+      }
+      : onClose,
+  }
+
+  const [triggerOpened, setTriggerOpened] = useState(false),
+    modalIsOpened = trigger ? triggerOpened : opened
+
+  if (trigger) {
+    const modalTrigger = document.querySelector(trigger)
+    modalTrigger.addEventListener(
+      'click',
+      () => {
+        setTriggerOpened(true)
+        document
+          .querySelector('#cancel-button')
+          .addEventListener('click', () => {
+            setTriggerOpened(false)
+          })
+      },
+      { once: true }
+    )
+  }
+  return (
+    <LightboxContext.Provider value={api}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+      >
+        <div className="carousel">
+          <Lightbox.Header>{children}</Lightbox.Header>
+          <Carousel
+              current={photos.indexOf(initialPhoto)}
+              onChange={handleOnSlide}
+              photos={photos.map((photo) => ({
+              url: photo,
+              thumbnail: photo,
+            }))}
+          />
+        </div>
+      </div>
+    </LightboxContext.Provider>
+  )
+}
+
+Lightbox.Header = LightboxHeader
+
+export default Lightbox

data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.jsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const LightboxContext = React.createContext()

data/app/pb_kits/playbook/pb_lightbox/_lightbox_header.jsx

@@ -0,0 +1,71 @@
+/* @flow */
+import React, { useContext } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { LightboxContext } from './_lightbox_context'
+import { LightboxHeaderIcon } from './_lightbox_header_icon'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
+
+type LightboxHeaderProps = {
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  closeable: boolean,
+  data?: object,
+  icon?: string,
+  iconSize?: string,
+  id?: string,
+  padding?: string,
+  spacing?: string,
+  text?: string,
+  title?: string,
+}
+
+const LightboxHeader = (props: LightboxHeaderProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    padding = 'sm',
+    spacing = 'between',
+    closeable = true,
+    icon = 'times',
+    iconSize = '2x',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const api = useContext(LightboxContext)
+  const headerCSS = buildCss('lightbox_header')
+  const headerSpacing = globalProps(props, { padding })
+
+  /* eslint-disable react/jsx-handler-names */
+
+  return (
+    <div className="carousel-header">
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
+      >
+        <If condition={closeable}>
+          <FlexItem flex={1}>
+            <LightboxHeaderIcon
+                className="close-icon"
+                icon={icon}
+                iconSize={iconSize}
+                onClose={api.onClose}
+            />
+          </FlexItem>
+        </If>
+        {children}
+      </Flex>
+    </div>
+  )
+}
+
+export default LightboxHeader

data/app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.jsx

@@ -0,0 +1,26 @@
+/* @flow */
+
+import React from 'react'
+import Icon from '../pb_icon/_icon'
+
+type LightboxHeaderIconProps = {
+  onClose: () => mixed,
+  icon: string,
+  iconSize: string,
+}
+
+export const LightboxHeaderIcon = (props: LightboxHeaderIconProps) => {
+  const { onClose, icon, iconSize } = props
+  return (
+    <div
+        className="close-icon"
+        onClick={onClose}
+    >
+      <Icon
+          fixedWidth
+          icon={icon}
+          size={iconSize}
+      />
+    </div>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -0,0 +1,95 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Caption, Flex, FlexItem, Image, Title } from '../../'
+import Lightbox from '../_lightbox'
+
+const LightboxCompoundComponent = (props) => {
+  const photos = [
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
+    'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
+  ]
+  const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
+  const [showLightbox, toggleShowLightbox] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photo)
+  }
+
+  return (
+    <>
+      <div>
+        {showLightbox ? (
+          <Lightbox
+              icon="times"
+              iconSize="2x"
+              initialPhoto={selectedPhoto}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          >
+            <Lightbox.Header>
+              <FlexItem flex={5}>
+                <Flex justify="center">
+                  <Flex
+                      align="center"
+                      orientation="column"
+                  >
+                    <Title
+                        dark
+                        paddingBottom="xs"
+                        size={4}
+                        text="Windows, Sidings, & Gutters"
+                    />
+
+                    <Caption dark>{'Dyamic Count goes here.'}</Caption>
+                  </Flex>
+                </Flex>
+              </FlexItem>
+              <FlexItem flex={1}>
+                <Flex justify="end">
+                  <Title
+                      dark
+                      size={4}
+                      text="All Photos"
+                  />
+                </Flex>
+              </FlexItem>
+            </Lightbox.Header>
+          </Lightbox>
+        ) : (
+          <div className="PhotoViewer">
+            <Flex>
+              {photos.map((photo, index) => {
+                return (
+                  <div
+                      key={photo[index]}
+                      onClick={() => onPhotoClick(photo)}
+                  >
+                    <Image
+                        marginRight="xl"
+                        rounded
+                        size="lg"
+                        url={photo}
+                    />
+
+                    <div className="overlay" />
+                  </div>
+                )
+              })}
+            </Flex>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default LightboxCompoundComponent

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -0,0 +1,64 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image } from '../../'
+import Lightbox from '../_lightbox'
+
+const LightboxDefault = (props) => {
+  const photos = [
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+  ]
+  const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
+  const [showLightbox, toggleShowLightbox] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photo)
+  }
+
+  return (
+    <>
+      <div>
+        {showLightbox ? (
+          <Lightbox
+              icon="times"
+              iconSize="2x"
+              initialPhoto={selectedPhoto}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          />
+        ) : (
+          <div className="PhotoViewer">
+            <Flex>
+              {photos.map((photo, index) => {
+                return (
+                  <div
+                      key={photo[index]}
+                      onClick={() => onPhotoClick(photo)}
+                  >
+                    <Image
+                        marginRight="xl"
+                        rounded
+                        size="lg"
+                        url={photo}
+                    />
+
+                    <div className="overlay" />
+                  </div>
+                )
+              })}
+            </Flex>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default LightboxDefault

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md

@@ -0,0 +1 @@
+Lightbox contains 5 props: `photos` (an array of urls), `initialPhoto` (a number ), an `onClose` callback function, an `icon` prop that matches to our `Icon` kit, and an `iconSize` prop that also corresponds to our icon kit. 

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -0,0 +1,64 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image } from '../../'
+import Lightbox from '../_lightbox.jsx'
+
+const LightboxMultiple = (props) => {
+  const photos = [
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+  ]
+  const [selectedPhoto, setSelectedPhoto] = useState(photos[0])
+  const [light, toggleLight] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleLight(!light)
+    setSelectedPhoto(photo)
+  }
+
+  return (
+    <div>
+      {light ? (
+        <Lightbox
+            icon="times"
+            iconSize="2x"
+            initialPhoto={selectedPhoto}
+            onClose={handleCloseLightbox}
+            photos={photos}
+            {...props}
+        />
+      ) : (
+        <div className="PhotoViewer">
+          <Flex>
+            {photos.map((photo, index) => {
+              return (
+                <div
+                    key={photos[index]}
+                    onClick={() => onPhotoClick(photo)}
+                >
+                  <Image
+                      marginRight="xl"
+                      rounded
+                      size="lg"
+                      url={photo}
+                  />
+
+                  <div className="overlay" />
+                </div>
+              )
+            })}
+          </Flex>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LightboxMultiple

data/app/pb_kits/playbook/pb_lightbox/docs/example.yml

@@ -0,0 +1,7 @@
+examples:
+  
+  react:
+  - lightbox_default: Default
+  - lightbox_multiple: Multiple
+  - lightbox_compound_component: Compound Component
+  

data/app/pb_kits/playbook/pb_lightbox/docs/index.js

@@ -0,0 +1,3 @@
+export { default as LightboxDefault } from './_lightbox_default.jsx'
+export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
+export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -0,0 +1,21 @@
+import { debounce } from 'lodash'
+import { useCallback, useMemo, useState } from 'react'
+
+export default function useVisibility(initialState = false) {
+  const [visible, setVisible] = useState(initialState)
+  const hide = useCallback(() => setVisible(false), [])
+  const show = useCallback(({ afterDelay = 0 } = {}) => {
+    debounce(() => setVisible(true), afterDelay)()
+  }, [])
+  const toggle = useCallback(() => setVisible((current) => !current), [])
+
+  return useMemo(
+    () => ({
+      hide,
+      show,
+      toggle,
+      visible,
+    }),
+    [hide, show, toggle, visible]
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    handleResize()
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return size
+}