@wayke-se/components-react 3.0.0-beta.10 → 3.0.0-beta.12

package/dist-src/components/UspList/wrapper.js

@@ -1,85 +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 &&
-    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/dist-src/components/Utility/index.js

@@ -1,13 +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/dist-src/components/Video/CustomPlayer.js

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

package/dist-src/components/Video/EmbeddedVideoLightbox.js

@@ -1,18 +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) => ytNames.some((host) => url.indexOf(host) >= 0);
-const vNames = ['vimeo.com'];
-const isVimeoVideo = (url) => vNames.some((host) => url.indexOf(host) >= 0);
-const VideoPlayer = ({ url, autoplay = false, controls = true }) => {
-    if (!url)
-        return null;
-    if (isYouTubeVideo(url))
-        return React.createElement(YouTubePlayer, { url: url, autoplay: autoplay });
-    if (isVimeoVideo(url))
-        return React.createElement(VimeoPlayer, { url: url, autoplay: autoplay });
-    return React.createElement(CustomPlayer, { ratio: "56.25%", controls: controls, url: url });
-};
-export default VideoPlayer;

package/dist-src/components/Video/EmbededVideo.js

@@ -1,38 +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';
-const GalleryEmbed = ({ src, index }) => {
-    const [modal, setModal] = useState();
-    const thumbnail = useThumbnail(src);
-    const onClick = (e) => {
-        e.stopPropagation();
-        setModal(src);
-    };
-    const onCloseModal = (e) => {
-        e.stopPropagation();
-        setModal(undefined);
-    };
-    const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
-    const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
-    const customVideo = src.toLowerCase().endsWith('.mp4');
-    if (thumbnail?.length && !customVideo) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(ImageFull, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }),
-            React.createElement(MediaButton, { text: "Spela video", onClick: onClick }),
-            modal && (React.createElement(Modal, { title: "Video", onClose: onCloseModal },
-                React.createElement(VideoPlayer, { url: modal })))));
-    }
-    if (customVideo)
-        return (React.createElement(React.Fragment, null,
-            React.createElement(CustomPlayer, { ratio: "66.66%", isPreview: true, controls: false, url: src }),
-            React.createElement(MediaButton, { text: "Spela video", onClick: onClick }),
-            modal && (React.createElement(Modal, { title: "Video", onClose: onCloseModal },
-                React.createElement(VideoPlayer, { url: modal })))));
-    return null;
-};
-export default GalleryEmbed;

package/dist-src/components/Video/QuickNavEmbeded.js

@@ -1,17 +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';
-const QuickNavEmbeded = ({ src, index }) => {
-    const thumbnail = useThumbnail(src);
-    const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
-    const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
-    const customVideo = src?.toLowerCase().endsWith('.mp4');
-    if (thumbnail?.length && !customVideo)
-        return (React.createElement(QuickNavImg, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }));
-    if (customVideo)
-        return React.createElement(CustomPlayer, { key: index, url: src, ratio: "66.66%" });
-    return null;
-};
-export default QuickNavEmbeded;

package/dist-src/components/Video/QuickNavVideo.js

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

package/dist-src/components/Video/Video.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-const Video = styled.video `
-  position: absolute;
-  top: 0;
-  left: 0;
-  object-fit: ${({ modal }) => (modal ? 'contain' : 'cover')};
-`;
-export default Video;

package/dist-src/components/Video/VimeoPlayer.js

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

package/dist-src/components/Video/YoutubePlayer.js

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

package/dist-src/components/Video/useThumbnail.js

@@ -1,25 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getVimeoId, getYoutubeThumbnail } from './utils';
-import useVimeoThumbnail from '../../hooks/useVimeoThumbnail';
-const useThumbnail = (url, small) => {
-    if (url?.toLowerCase().endsWith('.mp4'))
-        return;
-    const [thumbnail, setThumbnail] = useState();
-    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/dist-src/components/Video/utils.js

@@ -1,35 +0,0 @@
-export const getVimeoId = (url) => {
-    const regExp = /\/(\d+)/;
-    const match = url.match(regExp);
-    return match && match[1].length > 3 ? match[1] : '';
-};
-export const getYouTubeId = (url) => {
-    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) => {
-    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, thumbnail) => {
-    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, thumbnail) => {
-    if (thumbnail?.length === 2) {
-        e.currentTarget.src = thumbnail[1];
-    }
-};

package/dist-src/components/Video/wrapper.js

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-export const Wrapper = styled.div `
-  position: relative;
-  width: 100%;
-  height: ${(props) => (props.isPreview ? '100%' : 0)};
-  padding-bottom: ${(props) => (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/dist-src/hooks/useFetch.js

@@ -1,69 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-const cache = {};
-const getCachedResult = (key) => cache?.[key] || undefined;
-const setCachedResult = (key, value) => {
-    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 = {};
-const isPendingPromise = (url) => !!pendingPromise[url];
-const setPendingPromise = (url, promise) => {
-    pendingPromise = {
-        ...pendingPromise,
-        [url]: promise,
-    };
-};
-const clearPendingPromise = (url) => {
-    delete pendingPromise[url];
-};
-const useFetch = (path, options, skip, promiseCache) => {
-    const [data, setData] = useState();
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(false);
-    const doFetch = useCallback(async () => {
-        const key = path.toString();
-        const cached = getCachedResult(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;

package/dist-src/hooks/useHasBeenVisible.js

@@ -1,13 +0,0 @@
-import { useEffect, useState } from 'react';
-import useOnScreen from './useOnScreen';
-const useHasBeenVisible = (ref) => {
-    const isVisible = useOnScreen(ref);
-    const [hasBeenVisible, setHasBeenVisible] = useState(false);
-    useEffect(() => {
-        if (isVisible && !hasBeenVisible) {
-            setHasBeenVisible(true);
-        }
-    }, [isVisible]);
-    return hasBeenVisible;
-};
-export default useHasBeenVisible;

package/dist-src/hooks/useHashGuid.js

@@ -1,28 +0,0 @@
-import { useState, useEffect } from 'react';
-const regexGuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-const HASH_CHANGE = 'hashchange';
-const getGuid = () => {
-    const guid = window.location.hash.substr(1, window.location.hash.length);
-    return regexGuid.test(guid) || !guid ? guid : undefined;
-};
-const useHashGuid = () => {
-    const [id, setId] = useState(() => getGuid());
-    const onHashChange = () => {
-        const guid = window.location.hash.substr(1, window.location.hash.length);
-        if (regexGuid.test(guid) || !guid) {
-            setId(window.location.hash.substr(1, window.location.hash.length));
-        }
-        else {
-            throw 'Invalid Guid';
-        }
-    };
-    useEffect(() => {
-        onHashChange();
-        window.addEventListener(HASH_CHANGE, onHashChange);
-        return () => {
-            window.removeEventListener(HASH_CHANGE, onHashChange);
-        };
-    }, []);
-    return id;
-};
-export default useHashGuid;

package/dist-src/hooks/useInsurance.js

@@ -1,12 +0,0 @@
-import { useQuery } from '@apollo/client';
-import INSURANCE_CALCULATION from '../queries/INSURANCE_CALCULATION';
-const useInsuranceCalculation = (id, branchId, personalNumber, drivingDistance) => useQuery(INSURANCE_CALCULATION, {
-    variables: {
-        id,
-        branch: branchId,
-        personalNumber: personalNumber,
-        drivingDistance: drivingDistance,
-    },
-    skip: personalNumber === undefined || drivingDistance === undefined || branchId === undefined,
-});
-export default useInsuranceCalculation;

package/dist-src/hooks/useLoan.js

@@ -1,12 +0,0 @@
-import { useQuery } from '@apollo/client';
-import LOAN_CALCULATION from '../queries/LOAN_CALCULATION';
-const useLoanCalculation = (id, duration, downPayment, residual) => useQuery(LOAN_CALCULATION, {
-    variables: {
-        id,
-        duration: duration,
-        downPayment: downPayment,
-        residual: residual || 0,
-    },
-    skip: duration === undefined || downPayment === undefined,
-});
-export default useLoanCalculation;

package/dist-src/hooks/useOnScreen.js

@@ -1,15 +0,0 @@
-import { useEffect, useState } from 'react';
-const useOnScreen = (ref) => {
-    const [isIntersecting, setIntersecting] = useState(false);
-    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
-    useEffect(() => {
-        if (ref.current) {
-            observer.observe(ref.current);
-        }
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    return isIntersecting;
-};
-export default useOnScreen;

package/dist-src/hooks/useOutsideClick.js

@@ -1,15 +0,0 @@
-import { useEffect } from 'react';
-const useOutsideClick = (ref, callback) => {
-    const handleClick = (e) => {
-        if (ref.current && e.target && !ref.current.contains(e.target)) {
-            callback();
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('click', handleClick);
-        return () => {
-            document.removeEventListener('click', handleClick);
-        };
-    });
-};
-export default useOutsideClick;

package/dist-src/hooks/usePrevious.js

@@ -1,9 +0,0 @@
-import { useRef, useEffect } from 'react';
-const usePrevious = (value) => {
-    const ref = useRef();
-    useEffect(() => {
-        ref.current = value;
-    });
-    return ref.current;
-};
-export default usePrevious;

package/dist-src/hooks/useSearchItem.js

@@ -1,7 +0,0 @@
-import { useQuery } from '@apollo/client';
-import SEARCH_ITEM_QUERY from '../queries/SEARCH_ITEM_QUERY';
-const useSearchItem = (id) => useQuery(SEARCH_ITEM_QUERY, {
-    variables: { id: id },
-    skip: !id,
-});
-export default useSearchItem;

package/dist-src/hooks/useSearchItemBranch.js

@@ -1,7 +0,0 @@
-import { useQuery } from '@apollo/client';
-import SEARCH_ITEM_BRANCH_QUERY from '../queries/SEARCH_ITEM_BRANCH_QUERY';
-const useSearchItemBranch = (id, branch) => useQuery(SEARCH_ITEM_BRANCH_QUERY, {
-    variables: { id: id, branch: branch },
-    skip: !id || !branch,
-});
-export default useSearchItemBranch;

package/dist-src/hooks/useSessionStorage.js

@@ -1,23 +0,0 @@
-import { useState, useCallback } from 'react';
-const useSessionStorage = (key) => {
-    const [value, setValue] = useState(sessionStorage.getItem(key));
-    const set = useCallback((v) => {
-        sessionStorage.setItem(key, v);
-        setValue(v);
-    }, [key]);
-    const remove = useCallback(() => {
-        sessionStorage.removeItem(key);
-        setValue(null);
-    }, [key]);
-    const clear = useCallback(() => {
-        sessionStorage.clear();
-        setValue(null);
-    }, [key]);
-    return {
-        value,
-        set,
-        remove,
-        clear,
-    };
-};
-export default useSessionStorage;

package/dist-src/hooks/useVimeoThumbnail.js

@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-import useFetch from './useFetch';
-const useVimeoThumbnail = (id, small) => {
-    const [thumbnail, setThumbnail] = useState();
-    const { data } = useFetch(`http://vimeo.com/api/v2/video/${id}.json`, {}, !id || !!thumbnail, true);
-    useEffect(() => {
-        if (data?.[0]) {
-            if (small && data[0].thumbnail_small) {
-                setThumbnail(data[0].thumbnail_small);
-            }
-            else if (data[0].thumbnail_large) {
-                setThumbnail(data[0].thumbnail_large);
-            }
-        }
-    }, [data]);
-    return thumbnail;
-};
-export default useVimeoThumbnail;

package/dist-src/index.js

@@ -1,10 +0,0 @@
-import WaykeSearch from './layouts/search/index';
-import WaykeSearchItem from './layouts/searchItem/index';
-import WaykeProvider from './providers/WaykeProvider';
-import WaykeComposite from './layouts/WaykeCompositeWithProvider';
-import SearchBar from './components/SearchBar/index';
-import WaykeThemeProvider from './providers/themeProvider';
-import WaykeItemProvider from './providers/WaykeItemProvidet';
-import WaykePubSub from './utils/pubsub/pubsub';
-export { WaykeProvider, WaykeItemProvider, WaykeSearch, WaykeSearchItem, SearchBar, WaykeThemeProvider, WaykePubSub, };
-export default WaykeComposite;

package/dist-src/layout/helpers.js

@@ -1,5 +0,0 @@
-import theme from './theme';
-export const size = (multiplier = 1) => {
-    const baseUnit = parseFloat(theme.distances.baseUnit);
-    return `${multiplier * baseUnit}px`;
-};

package/dist-src/layout/keyframes.js

@@ -1,20 +0,0 @@
-import { keyframes } from 'styled-components';
-export const noTransform = keyframes `
-    to {
-        transform: none;
-    }
-`;
-export const fadeIn = keyframes `
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-`;
-export const rotate = keyframes `
-    to {
-        transform: rotate(360deg);
-    }
-`;

package/dist-src/layout/theme.js

@@ -1,57 +0,0 @@
-const _colors = {
-    black: '#000',
-    white: '#fff',
-    gray: '#ddd',
-    grayLight: '#f8f8f8',
-    grayLightTransparent: 'rgba(248, 248, 248, 0)',
-    grayLightDarker: '#ebebeb',
-    grayDark: '#717171',
-    blue: '#1d61ca',
-    ui: {
-        greenLight: '#cdf5c8',
-        green: '#2b8747',
-        redLight: '#ffd0d0',
-        red: '#c71f1f',
-        yellowLight: '#fff4c7',
-        blueLight: '#daf7fc',
-    },
-};
-const theme = {
-    color: {
-        bg: _colors.white,
-        link: _colors.blue,
-        accent: _colors.grayLight,
-        accentTransparent: _colors.grayLightTransparent,
-        accentDark: _colors.grayLightDarker,
-        border: _colors.gray,
-        textDark: _colors.black,
-        textDarkLighten: _colors.grayDark,
-        textLight: _colors.white,
-        hoverOverlay: 'rgba(0, 0, 0, 0.04)',
-        disabledBg: _colors.gray,
-        disabledText: _colors.grayDark,
-        placeholder: _colors.grayDark,
-        ui: {
-            positiveLight: _colors.ui.greenLight,
-            positive: _colors.ui.green,
-            neutralLight: _colors.ui.yellowLight,
-            negativeLight: _colors.ui.redLight,
-            negative: _colors.ui.red,
-            infoLight: _colors.ui.blueLight,
-        },
-    },
-    breakpoint: {
-        Sm: '@media (min-width: 600px)',
-        LtSm: '@media (max-width: 599px)',
-        Md: '@media (min-width: 900px)',
-        LtMd: '@media (max-width: 899px)',
-        Lg: '@media (min-width: 1200px)',
-        LtLg: '@media (max-width: 1199px)',
-    },
-    distances: {
-        baseUnit: '8px',
-        inputHeight: '48px',
-        containerMaxWidth: '1312px',
-    },
-};
-export default theme;