@basiq/connect-auth 0.1.78 → 0.1.79

package/src/components/pages/AuthScreen.tsx

@@ -0,0 +1,96 @@
+import React, { ChangeEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Page, { IButton } from './Page';
+import { DivAsLink, InputContainer, InputStyled, PageConnectFooterControl, PageConnectFooterText, StatusMessage } from '../../styledComponents';
+import { InnerContainer } from '../../styledComponents/pages/start';
+import { LoadingModal } from '../modals';
+import { authUser, verifySmsCode } from '../../actions/actions';
+
+interface IProps {
+	shadow: boolean;
+	onBack: () => void;
+	number: string;
+	authId: string;
+}
+
+function AuthScreen({ onBack, number, authId, shadow }: IProps) {
+	const { t } = useTranslation();
+	const [error, setError] = useState('');
+	const [code, setCode] = useState('');
+	const [resend, setResend] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const handleCodeApply = async () => {
+		setLoading(true);
+		const response = await verifySmsCode(authId, code);
+		setLoading(false);
+		if (response?.data?.access_token) {
+			window.open(`https://consent.basiq.io/home?token=${response?.data?.access_token}`);
+		}
+		if (response?.error) {
+			setError(t('this_code_doesnt_appear_to_be_valid'));
+		}
+	};
+	const buttons: IButton[] = [
+		{
+			label: t('continue'),
+			onClick: () => handleCodeApply()
+		}
+	];
+
+	const handleResend = async () => {
+		setError('');
+		setCode('');
+		setLoading(true);
+		const response = await authUser(authId);
+		setLoading(false);
+		if (response.error) {
+			setError(t('failed_to_send_sms'));
+		} else {
+			setResend(true);
+		}
+	};
+	const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+		setError('');
+		setResend(false);
+		setCode(e.target.value);
+	};
+	return (
+		<Page
+			title={t('verify_your_mobile_number')}
+			subTitle={t('please_enter_the_sms_code_sent_to_your_mobile_number', { number })}
+			shadow={shadow}
+			buttons={buttons}
+			onBack={onBack}
+		>
+			<InnerContainer>
+				<InputContainer>
+					<InputStyled
+						pattern="\d{4}"
+						inputMode="numeric"
+						autoComplete="one-time-code"
+						type="text"
+						maxLength={4}
+						onChange={handleInput}
+						value={code}
+						filled={code.length === 4}
+						error={!!error}
+					/>
+				</InputContainer>
+				<PageConnectFooterControl>
+					{resend && <StatusMessage>{t<string>('new_sms_code_has_been_sent')}</StatusMessage>}
+					{!!error && <StatusMessage error>{error}</StatusMessage>}
+					<PageConnectFooterText>
+						<span>
+							<>
+							{t('didnt_receive_the_code')} <DivAsLink onClick={() => handleResend()}>{t<string>('resend_sms')}</DivAsLink>
+							</>
+						</span>
+					</PageConnectFooterText>
+				</PageConnectFooterControl>
+				<LoadingModal isOpen={loading} />
+			</InnerContainer>
+		</Page>
+	);
+}
+
+export default AuthScreen;

package/src/components/pages/NotFound.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+	PageControlsSection,
+	PageShadowWrapper,
+	PageStatusScreenContent,
+	PageStatusScreenMain,
+	PageStyled,
+	StatusScreenCircleContainer,
+	StatusScreenErrorCode
+} from '../../styledComponents';
+import Icon from '../ui/icon';
+import Page from './Page';
+import err from '../../images/error.svg';
+
+interface IProps {
+	messageCode?: string;
+}
+
+function NotFound({ messageCode = '404' }: IProps) {
+	const { t } = useTranslation();
+	return (
+		<Page shadow={false}>
+			<PageStyled>
+				<PageStatusScreenMain>
+					<PageStyled>
+						<PageStatusScreenContent>
+							<StatusScreenCircleContainer type="warning">
+								<Icon img={err} rotating={false} />
+							</StatusScreenCircleContainer>
+							<span>{t<string>('page_not_found')}</span>
+							<StatusScreenErrorCode>{`${t('error')}: ${messageCode}`}</StatusScreenErrorCode>
+						</PageStatusScreenContent>
+					</PageStyled>
+				</PageStatusScreenMain>
+				<PageControlsSection notEmpty={false}>
+					<PageShadowWrapper />
+				</PageControlsSection>
+			</PageStyled>
+		</Page>
+	);
+}
+
+export default NotFound;

package/src/components/pages/Page.tsx

@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../ui';
+import { PageControlsSection, PageMainContainer, PageShadow, PageShadowWrapper, PageStyled, PageSubtitle } from '../../styledComponents';
+import { ButtonType } from '../ui/Button';
+
+interface IProps {
+	buttons?: IButton[];
+	children: ReactElement;
+	title?: string | ReactElement;
+	subTitle?: string;
+	shadow: boolean;
+	onBack?: () => void;
+}
+
+export interface IButton {
+	label: string;
+	onClick: () => void;
+	buttonType?: ButtonType;
+	disabled?: boolean;
+}
+
+function Page(props: IProps) {
+	const { buttons, children, title, subTitle, shadow, onBack } = props;
+
+	const { t } = useTranslation();
+
+	return (
+		<PageStyled buttonCount={buttons?.length}>
+			{onBack && <Button onClick={onBack} label={t('back')} buttonType="back" />}
+			{title && <h3>{title}</h3>}
+			{subTitle && <PageSubtitle>{subTitle}</PageSubtitle>}
+			<PageMainContainer>{children}</PageMainContainer>
+			<PageControlsSection notEmpty={(buttons?.length ?? 0) > 0}>
+				<PageShadowWrapper>
+					{shadow && <PageShadow />}
+					{buttons?.map((b, index) => (
+						<Button key={index} onClick={b.onClick} label={b.label} buttonType={b.buttonType} disabled={b.disabled} />
+					))}
+				</PageShadowWrapper>
+			</PageControlsSection>
+		</PageStyled>
+	);
+}
+
+export default Page;

package/src/components/pages/StartScreen.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import Page, { IButton } from './Page';
+import { H4Styled, Spacer, InnerContainer } from '../../styledComponents';
+import { authUser } from '../../actions/actions';
+import { LoadingModal } from '../modals';
+
+interface IProps {
+	onContinue: () => void;
+	showErrorScreen: (code:string) => void;
+	shadow: boolean;
+	appName: string;
+	authId?: string;
+}
+
+function StartScreen(props: IProps) {
+	const { onContinue, appName, shadow, authId } = props;
+	const [loading, setLoading] = useState(false);
+	const { t } = useTranslation();
+	const handleContinue = async () => {
+		setLoading(true);
+		if(!!authId){
+			const response = await authUser(authId);
+			if (response?.data?.status === 'code-sent') {
+				setLoading(false);
+				onContinue();
+			}
+		}
+
+	};
+	const buttons: IButton[] = [
+		{
+			label: t('continue'),
+			onClick: () => handleContinue()
+		}
+	];
+	return (
+		<Page
+			title={
+				appName ? (
+					<Trans t={t} i18nKey="use_basiq_to_connect_your_accounts" values={{ name: appName }} components={{ bold: <strong /> }} />
+				) : (
+					<Trans t={t} i18nKey="we_use_basiq_to_connect_your_accounts" components={{ bold: <strong /> }} />
+				)
+			}
+			shadow={shadow}
+			buttons={buttons}
+		>
+			<InnerContainer>
+				<Spacer />
+				<H4Styled>{t<string>('to_do_this_we_will_ask_you_to')}</H4Styled>
+				<ul>
+					<li>
+						<Trans t={t} i18nKey="verify_your_mobile_number_bold" components={{ bold: <strong /> }} />
+					</li>
+					<li>
+						<Trans t={t} i18nKey="consent_to_share_your_data_with_us" components={{ bold: <strong /> }} />
+					</li>
+					<li>
+						<Trans t={t} i18nKey="share_your_financial_data" components={{ bold: <strong /> }} />
+					</li>
+				</ul>
+				<H4Styled>{t<string>('things_you_should_know')}</H4Styled>
+				<ul>
+					<li>{t<string>('we_dont_share_your_data_without_your_consent')}</li>
+					<li>{t<string>('you_can_easily_stop_sharing_your_data_at_any_time')}</li>
+					<li>{t<string>('you_can_choose_to_delete_shared_data_when_we_no_longer_need_it')}</li>
+				</ul>
+				<Spacer />
+				<span>
+					<>
+					{t('by_proceeding_you_agree_to_the')}{' '}
+						<a href="https://docs.basiq.io/en/articles/415750-basiq-terms-of-service">{t<string>('terms_of_service')}</a> {t('and')}{' '}
+						<a href="https://docs.basiq.io/en/articles/382581-basiq-privacy-policy">{t<string>('privacy_notice')}</a>
+					</>
+				</span>
+				<LoadingModal isOpen={loading} />
+			</InnerContainer>
+		</Page>
+	);
+}
+
+export default StartScreen;

package/src/components/pages/index.ts

@@ -0,0 +1,4 @@
+export { default as Page } from './Page';
+export { default as NotFound } from './NotFound';
+export { default as StartScreen } from './StartScreen';
+export { default as AuthScreen } from './AuthScreen';

package/src/components/ui/Button.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ButtonLabel, ButtonStyled } from '../../styledComponents';
+import back from '../../images/back.svg';
+
+export type ButtonType = 'secondary' | 'tiny' | 'link' | 'back';
+
+interface Props {
+	onClick: () => void;
+	label: string;
+	buttonType?: ButtonType;
+	disabled?: boolean;
+}
+
+function Button(props: Props) {
+	const { onClick, label, buttonType, disabled } = props;
+	return (
+		<ButtonStyled buttonType={buttonType} disabled={disabled || false} onClick={onClick}>
+			{buttonType === 'back' && <img src={back} alt="" />}
+			<ButtonLabel> {label || ''}</ButtonLabel>
+		</ButtonStyled>
+	);
+}
+
+export default Button;

package/src/components/ui/Modal.tsx

@@ -0,0 +1,29 @@
+import React, { ReactElement, SyntheticEvent } from 'react';
+import { ModalStyled } from '../../styledComponents';
+
+interface IProps {
+	children: ReactElement;
+	onClose?: () => void;
+	isOpen: boolean;
+	disableTransparency: boolean;
+}
+
+function Modal(props: IProps) {
+	const { children, onClose, isOpen, disableTransparency } = props;
+	const handleOutsideClick = (e: SyntheticEvent<HTMLElement>) => {
+		if (onClose && (e.target as HTMLElement).id === 'ui-modal') {
+			onClose();
+		}
+	};
+	return (
+		<>
+			{isOpen ? (
+				<ModalStyled id="ui-modal" disableTransparency={disableTransparency} onClick={handleOutsideClick}>
+					{children}
+				</ModalStyled>
+			) : null}
+		</>
+	);
+}
+
+export default Modal;

package/src/components/ui/icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconWrapper } from '../../styledComponents';
+
+interface IProps {
+	rotating: boolean;
+	img: string;
+}
+
+function Icon(props: IProps) {
+	const { rotating, img } = props;
+	return (
+		<IconWrapper rotating={rotating}>
+			<img src={img} alt="" />
+		</IconWrapper>
+	);
+}
+
+export default Icon;

package/src/components/ui/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button';

package/src/custom.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg?inline' {
+    const content: any
+    export default content
+}
+
+declare module '*.svg' {
+    const content: any
+    export default content
+}

package/src/fonts.d.ts

@@ -0,0 +1 @@
+declare module '*.otf';

package/src/helpers/constants.ts

@@ -0,0 +1,2 @@
+// export const DASHBOARD_API_URL = 'https://c9joivz12f.execute-api.ap-southeast-2.amazonaws.com/Development/';
+export const DASHBOARD_API_URL = 'https://p4c8zn20r9.execute-api.ap-southeast-2.amazonaws.com/Production_v1/';

package/src/helpers/hookUtils.ts

@@ -0,0 +1,8 @@
+import { useRef } from 'react';
+
+export const useFocus = () => {
+	const htmlElRef = useRef<HTMLInputElement>(null);
+	const setFocus = () => htmlElRef.current && htmlElRef.current.focus();
+
+	return [htmlElRef, setFocus];
+};

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './hookUtils';
+export * from './utils';
+export * from './constants';

package/src/helpers/utils.ts

@@ -0,0 +1,12 @@
+import { SyntheticEvent } from 'react';
+
+export function detectScrollToBottom(event: SyntheticEvent<HTMLDivElement>) {
+	const { scrollHeight, scrollTop, clientHeight } = event.currentTarget;
+	return scrollHeight - scrollTop > clientHeight;
+}
+
+export const hexToRGBa = (hex: string, opacity: number) => {
+	const hexToRGBA = hex.match(/[A-Za-z0-9]{2}/g)?.map((v) => parseInt(v, 16));
+	const opp = opacity > 1 && opacity < 0 ? 1 : opacity;
+	return `rgba(${hexToRGBA?.concat(opp).join()})`;
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export {BasiqConnect} from './BasiqConnect'

package/src/locales/en/translation.json

@@ -0,0 +1,29 @@
+{
+	"back": "Back",
+	"error": "Error",
+	"loading": "Loading",
+	"continue": "Continue",
+	"to_do_this_we_will_ask_you_to": "To do this we will ask you to",
+	"verify_your_mobile_number_bold": "<strong>Verify</strong> your mobile number",
+	"verify_your_mobile_number": "Verify your mobile number",
+	"consent_to_share_your_data_with_us": "<strong>Consent</strong> to share your data with us",
+	"share_your_financial_data": "<strong>Share</strong> your financial data",
+	"things_you_should_know": "Things you should know",
+	"we_dont_share_your_data_without_your_consent": "We don’t share your data without your consent",
+	"you_can_easily_stop_sharing_your_data_at_any_time": "You can easily stop sharing your data at any time",
+	"you_can_choose_to_delete_shared_data_when_we_no_longer_need_it": "You can choose to delete shared data when we no longer need it",
+	"by_proceeding_you_agree_to_the": "By proceeding, you agree to the",
+	"terms_of_service": "Terms of service",
+	"privacy_notice": "Privacy notice",
+	"and": "and",
+	"use_basiq_to_connect_your_accounts": "${name} use <strong>Basiq</strong> to connect your accounts",
+	"we_use_basiq_to_connect_your_accounts": "We use <strong>Basiq</strong> to connect your accounts",
+	"please_enter_the_sms_code_sent_to_your_mobile_number": "Please enter the SMS code sent to your mobile number (ending in xxx${number}).",
+	"new_sms_code_has_been_sent": "New SMS code has been sent.",
+	"this_code_doesnt_appear_to_be_valid": "This code doesn't appear to be valid.",
+	"didnt_receive_the_code": "Didn’t receive the code?",
+	"resend_sms": "Resend SMS",
+	"failed_to_send_sms": "Failed to send SMS.",
+	"page_not_found": "Page not found",
+	"missing_authentication_token": "Missing Authentication Token"
+}

package/src/locales/i18n.ts

@@ -0,0 +1,27 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translationEN from './en/translation.json';
+
+export const defaultNS = 'ns1';
+
+// the translations
+export const resources = {
+	en: {
+		ns1: translationEN
+	}
+} as const;
+
+i18n.use(initReactI18next) // passes i18n down to react-i18next
+	.init({
+		resources,
+		lng: 'en',
+		ns: ['ns1'],
+		interpolation: {
+			escapeValue: false, // react already safes from xss
+			prefix: '${',
+			suffix: '}'
+		}
+	});
+
+export default i18n;

package/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/react-i18next.d.ts

@@ -0,0 +1,9 @@
+import { resources, defaultNS } from './locales/i18n';
+
+// react-i18next versions higher than 11.11.0
+declare module 'react-i18next' {
+	interface CustomTypeOptions {
+		defaultNS: typeof defaultNS;
+		resources: typeof resources['en'];
+	}
+}

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/styled.d.ts

@@ -0,0 +1,6 @@
+import 'styled-components';
+import { ThemeType } from './styledComponents';
+
+declare module 'styled-components' {
+	export interface DefaultTheme extends ThemeType {}
+}

package/src/styledComponents/base.ts

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import { devices } from './breakpoints';
+
+export const Root = styled.div`
+	white-space: pre-line;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 50%;
+	left: 0;
+	right: 0;
+	transform: translate(0, -50%);
+	height: 100%;
+	max-height: 812px;
+
+	a {
+		text-decoration: none;
+		color: ${({ theme }) => theme.color.endeavour};
+	}
+	h3 {
+		font-weight: normal;
+		${({ theme }) => theme.mixin.title()};
+		strong {
+			${({ theme }) => theme.mixin.title()};
+		}
+	}
+	${devices.phone} {
+		width: 100%;
+		height: 100%;
+		max-height: none;
+		padding: 0;
+	}
+`;
+export const AppContainer = styled.div`
+	width: 539px;
+	background-color: ${({ theme }) => theme.color.white};
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 16px;
+	box-sizing: border-box;
+	height: 100%;
+
+	${devices.phone} {
+		width: 100%;
+	}
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	overflow-y: scroll;
+`;
+export const AppContainerWrapper = styled.div`
+	height: 100%;
+	position: relative;
+	border: 1px solid ${({ theme }) => theme.color.porcelain};
+	border-radius: 8px;
+	overflow: hidden;
+	${devices.phone} {
+		width: 100%;
+		border-radius: unset;
+		border: unset;
+	}
+`;
+export const AppContainerPage = styled.div`
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+`;

package/src/styledComponents/breakpoints.ts

@@ -0,0 +1,32 @@
+const breakpoints = {
+	mobileS: '320px',
+	mobileL: '480px',
+	tabletMinus: '767px',
+	tabletH: '781px',
+	tablet: '768px',
+	tabletL: '992px',
+	laptop: '1024px',
+	laptopH: '1080px',
+	laptopXS: '1110px',
+	laptopS: '1280px',
+	laptopM: '1366px',
+	laptopL: '1440px',
+	laptopXL: '1540px',
+	desktopS: '1800px',
+	desktop: '2560px'
+};
+export const devices = {
+	fold: `@media only screen and (max-width: ${breakpoints.mobileS})`,
+	phoneXs: `@media only screen and (max-width: ${breakpoints.mobileL})`,
+	phone: `@media only screen and (max-width: ${breakpoints.tabletMinus})`,
+	phoneLandscape: `@media only screen and (max-width: ${breakpoints.mobileL})`,
+	tabletOnly: `@media only screen and (min-width: ${breakpoints.tablet})  and (max-width: ${breakpoints.tabletL})`,
+	iPadProLandscape: `@media only screen and (height: ${breakpoints.laptop}) and (width: ${breakpoints.laptopM})`,
+	iPadProPortrait: `@media only screen and (max-width: ${breakpoints.laptop}) and (max-height: ${breakpoints.laptopM})`,
+	iPad: `@media only screen and (max-width: ${breakpoints.laptop}) and (max-height: ${breakpoints.tablet}) `,
+	tablet: `@media only screen and (max-width: ${breakpoints.tabletL}) `,
+	desktop: `@media only screen and (min-height: ${breakpoints.tabletH} ) and (min-width: ${breakpoints.laptopS} ) `,
+	laptop: `@media only screen and (max-width: ${breakpoints.laptopS}) `,
+	laptopRegularScreenWidth: `@media only screen (max-height: ${breakpoints.laptopXS}) and and (max-width: ${breakpoints.laptopXL}) `,
+	bigDesktop: `@media only screen and (min-width: ${breakpoints.desktopS}) and (min-height: ${breakpoints.laptopH})) `
+};

package/src/styledComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './ui';
+export * from './theme';
+export * from './pages';
+export * from './base';