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

package/dist-src/components/ThreeSixty/ThreeSixtLightbox.js

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Image } from '../Gallery/wrapper';
+import MediaButton from '../Gallery/MediaButton';
+import Rotation from './Rotation';
+const onMediaClick = (e, func) => {
+    e.stopPropagation();
+    e.preventDefault();
+    func();
+};
+const ThreeSixty = ({ urls, visible, onDisableNavigation, navigationDisabled }) => {
+    if (!visible || (!navigationDisabled && visible)) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Image, { src: urls[0], alt: "alt" }),
+            React.createElement(MediaButton, { text: "Starta 360\u00B0 exteri\u00F6rt", onClick: (e) => onMediaClick(e, onDisableNavigation) })));
+    }
+    if (navigationDisabled && visible) {
+        return (React.createElement("div", { onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            } },
+            React.createElement(Rotation, null, urls.map((image, i) => (React.createElement(Image, { key: image, src: image, alt: `Bild ${i + 1}` }))))));
+    }
+    return null;
+};
+export default ThreeSixty;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { List, Item, Box, ItemSection, Action } from './wrapper';
+import { IconInfo } from '../Icon/index';
+const UspItem = ({ title, onClick }) => {
+    return (React.createElement(Item, null,
+        React.createElement(Box, null,
+            React.createElement(ItemSection, null, title),
+            onClick && (React.createElement(ItemSection, null,
+                React.createElement(Action, { onClick: onClick },
+                    React.createElement(IconInfo, { block: true })))))));
+};
+const UspList = ({ items, small }) => {
+    if (!items) {
+        return null;
+    }
+    return (React.createElement(List, { isSmall: small }, items.map((item, index) => (React.createElement(UspItem, { key: `${item.title}-${index}`, title: item.title, onClick: item.onClick })))));
+};
+export default UspList;

package/{src/components/UspList/wrapper.tsx → dist-src/components/UspList/wrapper.js}

@@ -1,13 +1,10 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const Item = styled.li`
+export const Item = styled.li `
   padding: ${size(0.5)};
 `;
-
-export const Box = styled.div`
+export const Box = styled.div `
   display: flex;
   align-items: center;
   background-color: ${(props) => props.theme.color.accentDark};
@@ -17,16 +14,14 @@ export const Box = styled.div`
   overflow-wrap: break-word;
   hyphens: auto;
 `;
-
-export const ItemSection = styled.div`
+export const ItemSection = styled.div `
   & + & {
     margin-left: ${size(1)};
   }
 `;
-
 export const Action = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   position: relative;
   display: block;
   transform-origin: 50% 50%;
@@ -60,8 +55,7 @@ export const Action = styled(ButtonReset).attrs(() => ({
     transform: scale(0.95);
   }
 `;
-
-export const List = styled.ul`
+export const List = styled.ul `
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -69,9 +63,8 @@ export const List = styled.ul`
   padding: 0;
   margin: ${size(-0.5)};
 
-  ${({ isSmall }: { isSmall?: boolean }) =>
-    isSmall &&
-    css`
+  ${({ isSmall }) => isSmall &&
+    css `
       margin: ${size(-0.25)};
 
       ${Item} {

package/dist-src/components/Utility/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/{src/layout/keyframes.tsx → dist-src/layout/keyframes.js}

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