playbook_ui 10.21.0.pre.alpha.lightbox.2 → 10.21.0.pre.alpha.na1

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

@@ -1,66 +0,0 @@
-// @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

@@ -1,112 +0,0 @@
-/* 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

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

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

@@ -1,71 +0,0 @@
-/* @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

@@ -1,26 +0,0 @@
-/* @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

@@ -1,95 +0,0 @@
-/* @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

@@ -1,64 +0,0 @@
-/* @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

@@ -1 +0,0 @@
-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

@@ -1,64 +0,0 @@
-/* @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

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

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

@@ -1,3 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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
-}