@wayke-se/components-react 3.0.0-beta.11 → 3.0.0-beta.13

package/src/components/ThreeSixty/ThreeSixtLightbox.tsx

@@ -1,34 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Item, Img } from '../Lightbox/wrapper';
-import MediaButton from '../Gallery/MediaButton';
-import Rotation from './Rotation';
-
-type PropsType = {
-  urls: string[];
-};
-
-const ThreeSixtyLightbox = ({ urls }: PropsType) => {
-  const [started, setStarted] = useState(false);
-
-  const onStart = useCallback(() => setStarted(true), []);
-
-  if (!started) {
-    return (
-      <Item>
-        <Img src={urls[0]} alt="alt" />
-        <MediaButton text="Starta 360° exteriört" onClick={onStart} />
-      </Item>
-    );
-  }
-
-  return (
-    <Rotation>
-      {urls.map((image, i) => (
-        <Img key={image} src={image} alt={`Bild ${i + 1}`} />
-      ))}
-    </Rotation>
-  );
-};
-
-export default ThreeSixtyLightbox;

package/src/components/ThreeSixty/ThreeSixty.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { Image } from '../Gallery/wrapper';
-import MediaButton from '../Gallery/MediaButton';
-import Rotation from './Rotation';
-
-const onMediaClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, func: () => void) => {
-  e.stopPropagation();
-  e.preventDefault();
-  func();
-};
-
-type PropsType = {
-  urls: string[];
-  navigationDisabled: boolean;
-  visible: boolean;
-  onDisableNavigation: () => void;
-};
-
-const ThreeSixty = ({ urls, visible, onDisableNavigation, navigationDisabled }: PropsType) => {
-  if (!visible || (!navigationDisabled && visible)) {
-    return (
-      <>
-        <Image src={urls[0]} alt="alt" />
-        <MediaButton
-          text="Starta 360° exteriört"
-          onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void =>
-            onMediaClick(e, onDisableNavigation)
-          }
-        />
-      </>
-    );
-  }
-  if (navigationDisabled && visible) {
-    return (
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-      >
-        <Rotation>
-          {urls.map((image, i) => (
-            <Image key={image} src={image} alt={`Bild ${i + 1}`} />
-          ))}
-        </Rotation>
-      </div>
-    );
-  }
-  return null;
-};
-
-export default ThreeSixty;

package/src/components/UspList/index.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { List, Item, Box, ItemSection, Action } from './wrapper';
-import { IconInfo } from '../Icon/index';
-
-export interface ItemProps {
-  title: string | number | null;
-  onClick?: () => void;
-}
-
-export interface Props {
-  items?: ItemProps[];
-  small?: boolean;
-}
-
-const UspItem = ({ title, onClick }: ItemProps) => {
-  return (
-    <Item>
-      <Box>
-        <ItemSection>{title}</ItemSection>
-        {onClick && (
-          <ItemSection>
-            <Action onClick={onClick}>
-              <IconInfo block />
-            </Action>
-          </ItemSection>
-        )}
-      </Box>
-    </Item>
-  );
-};
-
-const UspList = ({ items, small }: Props) => {
-  if (!items) {
-    return null;
-  }
-
-  return (
-    <List isSmall={small}>
-      {items.map((item, index) => (
-        <UspItem key={`${item.title}-${index}`} title={item.title} onClick={item.onClick} />
-      ))}
-    </List>
-  );
-};
-
-export default UspList;

package/src/components/UspList/wrapper.tsx

@@ -1,92 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const Item = styled.li`
-  padding: ${size(0.5)};
-`;
-
-export const Box = styled.div`
-  display: flex;
-  align-items: center;
-  background-color: ${(props) => props.theme.color.accentDark};
-  padding: ${size(1)} ${size(1.5)};
-  border-radius: 3px;
-  font-size: 0.875rem;
-  overflow-wrap: break-word;
-  hyphens: auto;
-`;
-
-export const ItemSection = styled.div`
-  & + & {
-    margin-left: ${size(1)};
-  }
-`;
-
-export const Action = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
-  position: relative;
-  display: block;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-0.5)};
-    bottom: ${size(-0.5)};
-    left: ${size(-0.5)};
-    right: ${size(-0.5)};
-    background-color: ${(props) => props.theme.color.accent};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-
-export const List = styled.ul`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-0.5)};
-
-  ${({ isSmall }: { isSmall?: boolean }) =>
-    isSmall &&
-    css`
-      margin: ${size(-0.25)};
-
-      ${Item} {
-        padding: ${size(0.25)};
-      }
-
-      ${Box} {
-        padding: ${size(0.5)} ${size(1)};
-        font-size: 0.75rem;
-      }
-
-      ${ItemSection} {
-        & + & {
-          margin-left: ${size(0.5)};
-        }
-      }
-    `}
-`;

package/src/components/Utility/index.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-export const UtilityTextRight = styled.div`
-  text-align: right;
-`;
-
-export const UtilityFontSizeSmall = styled.span`
-  font-size: 0.875rem;
-`;
-
-export const UtilityTextPrimary = styled.span.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))``;
-
-export const UtilityTextBold = styled.span.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))``;

package/src/components/Video/CustomPlayer.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Wrapper } from './wrapper';
-import Video from './Video';
-
-type PropsType = {
-  url?: string;
-  modal?: boolean;
-  controls?: boolean;
-  ratio?: string;
-  isPreview?: boolean;
-};
-
-const CustomPlayer = ({ url, controls, modal, ratio = '56.25%', isPreview }: PropsType) => {
-  return (
-    <Wrapper ratio={ratio} isPreview={isPreview}>
-      <Video
-        key={url}
-        modal={modal}
-        preload="metadata"
-        controls={controls}
-        width="100%"
-        height="100%"
-        src={url}
-      />
-    </Wrapper>
-  );
-};
-export default CustomPlayer;

package/src/components/Video/EmbeddedVideoLightbox.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import YouTubePlayer from './YoutubePlayer';
-import VimeoPlayer from './VimeoPlayer';
-import CustomPlayer from '../Video/CustomPlayer';
-
-const ytNames = ['youtube.com', 'youtu.be'];
-const isYouTubeVideo = (url: string): boolean =>
-  ytNames.some((host: string): boolean => url.indexOf(host) >= 0);
-
-const vNames = ['vimeo.com'];
-const isVimeoVideo = (url: string): boolean =>
-  vNames.some((host: string): boolean => url.indexOf(host) >= 0);
-
-type PropsType = {
-  url: string;
-  autoplay?: boolean;
-  controls?: boolean;
-};
-
-const VideoPlayer = ({ url, autoplay = false, controls = true }: PropsType) => {
-  if (!url) return null;
-
-  if (isYouTubeVideo(url)) return <YouTubePlayer url={url} autoplay={autoplay} />;
-
-  if (isVimeoVideo(url)) return <VimeoPlayer url={url} autoplay={autoplay} />;
-
-  return <CustomPlayer ratio="56.25%" controls={controls} url={url} />;
-};
-
-export default VideoPlayer;

package/src/components/Video/EmbededVideo.tsx

@@ -1,72 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import useThumbnail from './useThumbnail';
-import { ImageFull } from '../Gallery/wrapper';
-import MediaButton from '../Gallery/MediaButton';
-import Modal from '../Modal/index';
-import VideoPlayer from './EmbeddedVideoLightbox';
-import { onImageLoad, onImageError } from './utils';
-import CustomPlayer from '../Video/CustomPlayer';
-
-interface GalleryEmbed {
-  src: string;
-  index: number;
-  controls?: boolean;
-}
-
-const GalleryEmbed = ({ src, index }: GalleryEmbed) => {
-  const [modal, setModal] = useState<string>();
-  const thumbnail = useThumbnail(src);
-
-  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    setModal(src);
-  };
-
-  const onCloseModal = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
-    e.stopPropagation();
-    setModal(undefined);
-  };
-
-  const onError = useCallback(
-    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageError(e, thumbnail),
-    [thumbnail]
-  );
-
-  const onLoad = useCallback(
-    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageLoad(e, thumbnail),
-    [thumbnail]
-  );
-
-  const customVideo = src.toLowerCase().endsWith('.mp4');
-
-  if (thumbnail?.length && !customVideo) {
-    return (
-      <>
-        <ImageFull onLoad={onLoad} src={thumbnail[0]} onError={onError} alt={`Bild ${index + 1}`} />
-        <MediaButton text="Spela video" onClick={onClick} />
-        {modal && (
-          <Modal title="Video" onClose={onCloseModal}>
-            <VideoPlayer url={modal} />
-          </Modal>
-        )}
-      </>
-    );
-  }
-
-  if (customVideo)
-    return (
-      <>
-        <CustomPlayer ratio="66.66%" isPreview controls={false} url={src} />
-        <MediaButton text="Spela video" onClick={onClick} />
-        {modal && (
-          <Modal title="Video" onClose={onCloseModal}>
-            <VideoPlayer url={modal} />
-          </Modal>
-        )}
-      </>
-    );
-  return null;
-};
-
-export default GalleryEmbed;

package/src/components/Video/QuickNavEmbeded.tsx

@@ -1,35 +0,0 @@
-import React, { useCallback } from 'react';
-
-import useThumbnail from './useThumbnail';
-import { QuickNavImg } from '../Gallery/wrapper';
-import { onImageLoad, onImageError } from './utils';
-import CustomPlayer from '../Video/CustomPlayer';
-
-interface QuickNavEmbededProps {
-  src?: string;
-  index: number;
-}
-
-const QuickNavEmbeded = ({ src, index }: QuickNavEmbededProps) => {
-  const thumbnail = useThumbnail(src);
-  const onError = useCallback(
-    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageError(e, thumbnail),
-    [thumbnail]
-  );
-
-  const onLoad = useCallback(
-    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageLoad(e, thumbnail),
-    [thumbnail]
-  );
-
-  const customVideo = src?.toLowerCase().endsWith('.mp4');
-
-  if (thumbnail?.length && !customVideo)
-    return (
-      <QuickNavImg onLoad={onLoad} src={thumbnail[0]} onError={onError} alt={`Bild ${index + 1}`} />
-    );
-  if (customVideo) return <CustomPlayer key={index} url={src} ratio="66.66%" />;
-  return null;
-};
-
-export default QuickNavEmbeded;

package/src/components/Video/QuickNavVideo.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import CustomPlayer from './CustomPlayer';
-
-interface QuickNavVideo {
-  src?: string;
-  index: number;
-}
-
-const QuickNavVideo = ({ src, index }: QuickNavVideo) => {
-  return <CustomPlayer key={index} url={src} ratio="66.666%" />;
-};
-
-export default QuickNavVideo;

package/src/components/Video/Video.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-type VideoProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLVideoElement>,
-  HTMLVideoElement
-> & {
-  modal?: boolean;
-};
-
-const Video = styled.video<VideoProps>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  object-fit: ${({ modal }) => (modal ? 'contain' : 'cover')};
-`;
-
-export default Video;

package/src/components/Video/VimeoPlayer.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { getVimeoId } from './utils';
-
-import { Wrapper, Iframe } from './wrapper';
-
-type PropsType = {
-  url: string;
-  autoplay: boolean;
-};
-
-const VimeoPlayer = ({ url, autoplay }: PropsType) => (
-  <Wrapper>
-    <Iframe
-      src={`https://player.vimeo.com/video/${getVimeoId(url)}?${
-        autoplay ? '&autoplay=1' : ''
-      }&loop=0&autopause=0`}
-    />
-  </Wrapper>
-);
-
-export default VimeoPlayer;

package/src/components/Video/YoutubePlayer.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { getYouTubeId } from './utils';
-
-import { Wrapper, Iframe } from './wrapper';
-
-type PropsType = {
-  url: string;
-  autoplay: boolean;
-};
-
-const YouTubePlayer = ({ url, autoplay }: PropsType) => (
-  <Wrapper>
-    <Iframe
-      src={`https://www.youtube.com/embed/${getYouTubeId(url)}?&enablejsapi=1&?rel=0${
-        autoplay ? '&autoplay=1' : ''
-      }`}
-    />
-  </Wrapper>
-);
-
-export default YouTubePlayer;

package/src/components/Video/useThumbnail.ts

@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getVimeoId, getYoutubeThumbnail } from './utils';
-import useVimeoThumbnail from '../../hooks/useVimeoThumbnail';
-
-const useThumbnail = (url?: string | null, small?: boolean) => {
-  if (url?.toLowerCase().endsWith('.mp4')) return;
-
-  const [thumbnail, setThumbnail] = useState<string[]>();
-  const vimeoId = url ? getVimeoId(url) : undefined;
-  const vimeoThumbnail = useVimeoThumbnail(vimeoId, small);
-
-  useEffect(() => {
-    if (url) {
-      const youtubeThumbnail = getYoutubeThumbnail(url);
-      if (youtubeThumbnail) {
-        if (small) {
-          setThumbnail([youtubeThumbnail.mqdefault]);
-        } else {
-          setThumbnail([youtubeThumbnail.maxresdefault, youtubeThumbnail.hqdefault]);
-        }
-      }
-    }
-  }, [url]);
-
-  return vimeoThumbnail ? [vimeoThumbnail] : thumbnail;
-};
-
-export default useThumbnail;

package/src/components/Video/utils.ts

@@ -1,47 +0,0 @@
-export const getVimeoId = (url: string): string => {
-  const regExp = /\/(\d+)/;
-  const match = url.match(regExp);
-  return match && match[1].length > 3 ? match[1] : '';
-};
-
-export const getYouTubeId = (url: string): string => {
-  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-  const match = url.match(regExp);
-  return match && match[7].length === 11 ? match[7] : '';
-};
-
-const youtubeBase = 'https://img.youtube.com/vi/';
-export const getYoutubeThumbnail = (url: string) => {
-  const id = getYouTubeId(url);
-  if (!id) {
-    return undefined;
-  }
-  return {
-    maxresdefault: `${youtubeBase}${id}/maxresdefault.jpg`,
-    hqdefault: `${youtubeBase}${id}/hqdefault.jpg`,
-    mqdefault: `${youtubeBase}${id}/mqdefault.jpg`,
-  };
-};
-
-export const onImageLoad = (
-  e: React.SyntheticEvent<HTMLImageElement, Event>,
-  thumbnail?: string[]
-) => {
-  if (
-    thumbnail?.length === 2 &&
-    e.currentTarget.src === thumbnail[0] &&
-    e.currentTarget.naturalWidth === 120 &&
-    e.currentTarget.naturalHeight === 90
-  ) {
-    e.currentTarget.src = thumbnail[1];
-  }
-};
-
-export const onImageError = (
-  e: React.SyntheticEvent<HTMLImageElement, Event>,
-  thumbnail?: string[]
-) => {
-  if (thumbnail?.length === 2) {
-    e.currentTarget.src = thumbnail[1];
-  }
-};

package/src/components/Video/wrapper.tsx

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-type WrapperProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
-> & {
-  ratio?: string;
-  isPreview?: boolean;
-};
-
-export const Wrapper = styled.div<WrapperProps>`
-  position: relative;
-  width: 100%;
-  height: ${(props) => (props.isPreview ? '100%' : 0)};
-  padding-bottom: ${(props): string => (props.ratio ? props.ratio : '56.25%')};
-`;
-
-export const Iframe = styled.iframe.attrs(() => ({
-  width: '100%',
-  height: '100%',
-  allowFullScreen: true,
-  frameBorder: '0',
-}))`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;

package/src/hooks/useFetch.ts

@@ -1,88 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-
-const cache: { [key: string]: unknown | undefined } = {};
-
-const getCachedResult = <T>(key: string) => (cache?.[key] as T) || undefined;
-const setCachedResult = <T>(key: string, value: T) => {
-  cache[key] = value;
-};
-
-/**
- * Reusing already fired request by attaching to same promise.
- * Usefull if multiple request is fetching from same endpoint, while
- * the first request has not been finished (so no cache exist yet).
- */
-
-let pendingPromise: { [key: string]: Promise<globalThis.Response> } = {};
-const isPendingPromise = (url: string) => !!pendingPromise[url];
-const setPendingPromise = (url: string, promise: Promise<globalThis.Response>) => {
-  pendingPromise = {
-    ...pendingPromise,
-    [url]: promise,
-  };
-};
-const clearPendingPromise = (url: string) => {
-  delete pendingPromise[url];
-};
-
-interface Response<T> {
-  loading: boolean;
-  data?: T;
-  error: boolean;
-}
-
-const useFetch = <T>(
-  path: RequestInfo,
-  options?: RequestInit,
-  skip?: boolean,
-  promiseCache?: boolean
-): Response<T> => {
-  const [data, setData] = useState<T | undefined>();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(false);
-
-  const doFetch = useCallback(async () => {
-    const key = path.toString();
-    const cached = getCachedResult<T>(key);
-    setError(false);
-    if (cached) {
-      setData(cached);
-      return;
-    }
-    setLoading(true);
-    try {
-      const reusePromise = promiseCache && isPendingPromise(key);
-      const request = reusePromise ? pendingPromise[key] : fetch(path, options);
-      if (promiseCache) {
-        setPendingPromise(key, request);
-      }
-
-      const result = await request;
-      if (result.ok) {
-        const json = await result.clone().json();
-        setCachedResult(key, json);
-        setData(json);
-      }
-    } catch (e) {
-      setError(true);
-    } finally {
-      setLoading(false);
-      clearPendingPromise(key);
-    }
-    return;
-  }, [path, options]);
-
-  useEffect(() => {
-    if (!skip) {
-      doFetch();
-    }
-  }, [path, skip]);
-
-  return {
-    loading,
-    data,
-    error,
-  };
-};
-
-export default useFetch;