@mindly/ui-components 0.1.2 → 0.1.4

package/src/lib/button/Button.style.ts

@@ -1,83 +0,0 @@
-import styled, {css} from 'styled-components';
-import {colorConstants} from '../Theme/mindly_constants';
-
-interface ContainerProps{
-    buttonType: 'primary' | 'secondary' | 'survey' | 'secondaryWithStroke' | 'secondaryCancel',
-    isDisabled: boolean
-}
-
-export const Container = styled.button<ContainerProps>`
-  padding: 8px 0;
-  width: 100%;
-  border-radius: 4px;
-  border: 0;
-  background: ${colorConstants.primaryColor};
-  color: ${colorConstants.White};
-
-  &:hover, &:active {
-    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 -4px 15px rgba(0, 0, 0, 0.2);
-  }
-
-  ${(props: ContainerProps) => props.buttonType === 'secondary' && css`
-    background: inherit;
-    color: ${colorConstants.primaryColor};
-
-    &:hover, &:active {
-      box-shadow: none;
-      color: ${colorConstants.AccentActiveButtonBG};
-    }
-  `}
-
-  ${(props: ContainerProps) => props.buttonType === 'secondaryWithStroke' && css`
-    color: ${colorConstants.primaryColor};
-    background: inherit;
-    box-shadow: none;
-    border: 1px solid ${colorConstants.primaryColor};
-
-    &:hover, &:active {
-      box-shadow: none;
-      color: ${colorConstants.AccentActiveButtonBG};
-      background: inherit;
-      border: 1px solid ${colorConstants.AccentActiveButtonBG};
-    }
-  `}
-
-  ${(props: ContainerProps) => props.buttonType === 'secondaryCancel' && css`
-    color: ${colorConstants.AccentCross};
-    background: inherit;
-    box-shadow: none;
-    border: 0;
-
-    &:hover, &:active {
-      box-shadow: none;
-      color: ${colorConstants.AccentCancelActive};
-      background: inherit;
-      border: 0;
-    }
-  `}
-
-  ${(props: ContainerProps) => props.buttonType === 'survey' && css`
-    color: ${colorConstants.primaryTextColor};
-    background: inherit;
-    box-shadow: none;
-    border: 1px solid ${colorConstants.primaryTextColor};
-
-    &:hover, &:active {
-      box-shadow: none;
-      color: ${colorConstants.primaryColor};
-      background: ${colorConstants.AccentSurveyButton};
-      border: 1px solid ${colorConstants.AccentDisabledColor};
-    }
-  `}
-
-  ${(props: ContainerProps) => props.isDisabled && css`
-    background: ${colorConstants.AccentActiveButtonBG};
-    color: ${colorConstants.White};
-    box-shadow: none;
-
-
-    &:hover, &:active {
-      box-shadow: none;
-    }
-  `}
-`;

package/src/lib/button/Button.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {Container} from './Button.style';
-import '../Theme/global.css';
-
-
-interface ButtonProps {
-    buttonType: 'primary' | 'secondary' | 'survey' | 'secondaryWithStroke' | 'secondaryCancel',
-    isDisabled: boolean,
-    children: React.ReactNode,
-    onClick: (atr: any) => void
-}
-
-
-const Button: React.FC<ButtonProps> = (props) => {
-    return (
-        <Container
-            onClick={props.onClick}
-            disabled={props.isDisabled}
-            isDisabled={props.isDisabled}
-            buttonType={props.buttonType}
-        >
-            <h4>
-                {props.children}
-            </h4>
-        </Container>
-    );
-};
-
-export default Button;

package/src/lib/consultation-card/consultationCard.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import Button from '../button/Button';
-import {timeOutline, cardOutline} from 'ionicons/icons';
-
-interface ConsultationCardProps {
-    eventHandler: () => void,
-    time: string,
-    price: string,
-}
-
-const ConsultationCard: React.FC<ConsultationCardProps> = (props)=> {
-    return (
-        <Container>
-        </Container>
-    );
-};
-
-export default ConsultationCard;

package/src/lib/floating-button/floating button.svg

@@ -1,6 +0,0 @@
-<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="54" height="54" fill="#21ABD2"/>
-<path d="M27.0002 15C21.9405 15 17.8237 19.1168 17.8237 24.1765V32.647C17.8237 33.8148 18.7737 34.7648 19.9413 34.7648C21.1092 34.7648 22.0591 33.8148 22.0591 32.647V25.5883C22.0591 24.4206 21.1092 23.4706 19.9413 23.4706C19.7037 23.4706 19.4788 23.5188 19.2651 23.5913C19.5663 19.5829 22.9168 16.4117 27.0002 16.4117C31.0815 16.4117 34.431 19.58 34.735 23.5856C34.5226 23.5129 34.2964 23.4706 34.0591 23.4706C32.8913 23.4706 31.9413 24.4206 31.9413 25.5883V32.647C31.9413 33.8148 32.8913 34.7648 34.0591 34.7648C34.3078 34.7648 34.5431 34.7139 34.765 34.6348V35.4706C34.765 35.8601 34.4479 36.1765 34.0591 36.1765H28.9879C28.6954 35.3566 27.9192 34.7648 27.0002 34.7648C25.8326 34.7648 24.8826 35.7147 24.8826 36.8824C24.8826 38.05 25.8326 39 27.0002 39C27.9192 39 28.6954 38.408 28.9879 37.5883H34.0591C35.2268 37.5883 36.1768 36.6383 36.1768 35.4706C36.1768 31.2248 36.1768 28.4269 36.1768 24.1765C36.1768 19.1168 32.06 15 27.0002 15V15Z" fill="white"/>
-<path d="M37.5884 25.0122V33.2227C38.4081 32.9304 39.0001 32.1542 39.0001 31.235V26.9998C39.0001 26.0808 38.4081 25.3046 37.5884 25.0122Z" fill="white"/>
-<path d="M15 26.9998V31.235C15 32.1542 15.592 32.9304 16.4117 33.2227V25.0122C15.592 25.3046 15 26.0808 15 26.9998Z" fill="white"/>
-</svg>

package/src/lib/floating-button/floatingButton.style.ts

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-interface ContainerProps{
-  bottomHeight: number,
-  rightWidth: number
-}
-
-export const Container = styled.a<ContainerProps>`
-  display: block;
-  width: 54px;
-  height: 54px;
-  position: fixed;
-  bottom: ${(props) => props.bottomHeight}px;
-  right: ${(props) => props.rightWidth}px;
-  z-index: 100000000;
-  
-  img {
-    background: none;
-    border-radius: 50%;
-  }
-`;

package/src/lib/floating-button/floatingButton.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {Container} from './floatingButton.style';
-import img from './floating button.svg';
-
-interface FloatingButtonType {
-    bottomHeight: number;
-    rightWidth: number;
-}
-
-const FloatingButton: React.FC<FloatingButtonType> = (
-    {
-        bottomHeight = 0,
-        rightWidth = 0,
-    }) => {
-    return (
-        <Container
-            href="https://t.me/MindlySupport"
-            bottomHeight={bottomHeight}
-            rightWidth={rightWidth}
-        >
-            <img
-                src={img}
-                alt="support mindly"
-            />
-        </Container>
-    );
-};
-
-export default FloatingButton;

package/src/lib/footer-for-booking/FooterForBooking.style.ts

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import {IonIcon} from '@ionic/react';
-import {colorConstants} from '../Theme/mindly_constants';
-
-interface ContainerProps {
-    isIos: boolean;
-}
-
-export const Container = styled.div<ContainerProps>`
-  padding: ${(props) => props.isIos ? '16px 24px 50px' : '16px 24px'};
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
-  display: flex;
-  position: fixed;
-  bottom: 0;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-
-  button {
-    height: 44px;
-    width: 132px;
-  }
-`;
-
-export const InfoContainer = styled.div`
-  h4 {
-    color: ${colorConstants.secondaryTextColor};
-  }
-
-  h4:first-child {
-    margin-bottom: 4px;
-  }
-`;
-
-export const SmallIcon = styled(IonIcon)`
-  margin: 0 5px -4px 0;
-  font-size: 18px;
-
-  &.ion-color {
-    --ion-color-base: ${colorConstants.primaryColor} !important;
-  }
-`;

package/src/lib/footer-for-booking/FooterForBooking.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import {Container, InfoContainer, SmallIcon} from './FooterForBooking.style';
-import Button from '../button/Button';
-import {timeOutline, cardOutline} from 'ionicons/icons';
-import {isPlatform} from '@ionic/react';
-
-interface FooterForBookingProps {
-    eventHandler: () => void,
-    time: string,
-    price: string,
-}
-
-const FooterForBooking: React.FC<FooterForBookingProps> = (props)=> {
-    return (
-        <Container isIos={isPlatform('ios')}>
-            <InfoContainer>
-                <h4>
-                    <SmallIcon icon={timeOutline} color='primary' />
-                    <>
-                        {props.time}
-                    </>
-                </h4>
-                <h4>
-                    <SmallIcon icon={cardOutline} color='primary' />
-                    <>
-                        {props.price}
-                    </>
-                </h4>
-            </InfoContainer>
-            <Button
-                buttonType={'primary'}
-                isDisabled={false}
-                onClick={props.eventHandler}
-            >
-                <h4 className='semiBold'>
-                Записаться
-                </h4>
-            </Button>
-        </Container>
-    );
-};
-
-export default FooterForBooking;

package/src/lib/index.tsx

@@ -1,9 +0,0 @@
-import Button from './button/Button';
-import ConsultationCard from './consultation-card/consultationCard';
-import FloatingButton from './floating-button/floatingButton';
-import FooterForBooking from './footer-for-booking/FooterForBooking';
-import ListButton from './list-button/listButton';
-import NavigationBar from './navigation-bar/NavigationBar';
-import {TabBar} from './tab-bar/tabBar';
-
-export {Button, ConsultationCard, FloatingButton, FooterForBooking, ListButton, NavigationBar, TabBar};

package/src/lib/list-button/listButton.style.ts

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-import {colorConstants} from '../Theme/mindly_constants';
-import {IonIcon} from '@ionic/react';
-
-export const Container = styled.button`
-  display: flex;
-  justify-content: space-between;
-  color: ${colorConstants.secondaryTextColor};
-  border: 0;
-  border-bottom: 1px solid ${colorConstants.AccentDivider};
-  width: 100%;
-  padding: 10px 16px;
-  background: inherit;
-`;
-
-export const Image = styled(IonIcon)`
-  width: 21px;
-  height: 21px;
-`;

package/src/lib/list-button/listButton.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import '../Theme/global.css';
-import {Container, Image} from './listButton.style';
-
-interface ListButtonProps {
-    text: string,
-    icon: string,
-}
-
-const ListButton: React.FC<ListButtonProps> = (props) => {
-    return (
-        <Container>
-            <h4>{props.text}</h4>
-            <Image icon={props.icon}/>
-        </Container>
-    );
-};
-
-export default ListButton;

package/src/lib/navigation-bar/NavigationBar.style.ts

@@ -1,56 +0,0 @@
-import styled, {css} from 'styled-components';
-import {IonHeader} from '@ionic/react';
-import {colorConstants} from '../Theme/mindly_constants';
-
-interface ContainerProps {
-  isIos: boolean
-  isInternetConnected: boolean
-}
-
-export const Container = styled(IonHeader)<ContainerProps>`
-  padding: ${(props) => props.isInternetConnected ? '10px' : '40px 10px 10px'};
-  background: #ffffff;
-  position: fixed;
-  display: flex;
-  z-index: 1000;
-  text-align: center;
-  justify-content: center;
-  min-height: ${(props) => props.isInternetConnected ? '44px' : '74px'};
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
-  color: ${colorConstants.primaryTextColor};
-
-  .left {
-    position: absolute;
-    color: ${colorConstants.primaryColor};
-    left: 10px;
-    top: ${(props: ContainerProps) => props.isInternetConnected ? 'calc(50% - 12px)' : 'calc(50% + 3px)'};
-  }
-
-  .right {
-    color: ${colorConstants.primaryColor};
-    position: absolute;
-    right: 10px;
-    top: ${(props: ContainerProps) => props.isInternetConnected ? 'calc(50% - 12px)' : 'calc(50% + 3px)'};
-  }
-  
-  &:after {
-    background-image: none;
-  }
-
-  ${(props: ContainerProps) => props.isIos && css`
-    padding: ${props.isInternetConnected ? '54px 10px 10px' : '64px 10px 10px'};
-    min-height: ${props.isInternetConnected ? '88px' : '98px'};
-
-    .left {
-      position: absolute;
-      left: 10px;
-      top: ${props.isInternetConnected ? 'calc(50% + 10px)' : 'calc(50% + 15px)'};
-    }
-
-    .right {
-      position: absolute;
-      right: 10px;
-      top: ${props.isInternetConnected ? 'calc(50% + 10px)' : 'calc(50% + 15px)'};
-    }
-  `}
-`;

package/src/lib/navigation-bar/NavigationBar.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import {Container} from './NavigationBar.style';
-import '../Theme/global.css';
-import {isPlatform} from '@ionic/react';
-
-interface NavigationBar {
-    isInternetConnected: boolean,
-}
-
-const NavigationBar: React.FC<NavigationBar> = (props) => {
-    return (
-        <Container isIos={isPlatform('ios')} isInternetConnected={props.isInternetConnected}>
-            <h4 className='left'>
-                first
-            </h4>
-            <h4 className='second'>
-                second
-            </h4>
-            <h4 className='right'>
-                 third
-            </h4>
-        </Container>
-    );
-};
-
-export default NavigationBar;

package/src/lib/tab-bar/tabBar.style.ts

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-import {IonTabBar} from '@ionic/react';
-
-interface ContainerProps {
-  isIos: boolean
-}
-
-export const Container = styled(IonTabBar)<ContainerProps>`
-  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.08);
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  border: none;
-  padding-bottom: ${(props) => props.isIos ? '34px' : '0'};
-`;

package/src/lib/tab-bar/tabBar.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import {IonTabButton, IonIcon, IonLabel, IonBadge, isPlatform} from '@ionic/react';
-import {calendar, personCircle, map, informationCircle} from 'ionicons/icons';
-import {Container} from './tabBar.style';
-
-export const TabBar: React.FC = () => (
-    <>
-        <Container isIos={isPlatform('ios')} slot="bottom">
-            <IonTabButton tab="schedule">
-                <IonIcon icon={calendar} />
-                <IonLabel>Schedule</IonLabel>
-                <IonBadge>6</IonBadge>
-            </IonTabButton>
-
-            <IonTabButton tab="speakers">
-                <IonIcon icon={personCircle} />
-                <IonLabel>Speakers</IonLabel>
-            </IonTabButton>
-
-            <IonTabButton tab="map">
-                <IonIcon icon={map} />
-                <IonLabel>Map</IonLabel>
-            </IonTabButton>
-
-            <IonTabButton tab="about">
-                <IonIcon icon={informationCircle} />
-                <IonLabel>About</IonLabel>
-            </IonTabButton>
-        </Container>
-    </>
-);

package/src/lib/therapist-card/TherapistCard.style.ts

@@ -1,140 +0,0 @@
-import {
-    IonCard,
-    IonCardContent,
-    IonCardHeader,
-    IonCardSubtitle,
-    IonCardTitle,
-    IonCol,
-    IonIcon, IonSkeletonText,
-} from '@ionic/react';
-import styled from 'styled-components';
-import {colorConstants} from '../Theme/mindly_constants';
-
-export const IonColWithoutPadding = styled(IonCol)`
-  padding: 0;
-  margin: 0;
-`;
-
-interface ContainerProps {
-    isIos: boolean
-}
-
-export const Container = styled.div<ContainerProps>`
-  margin: 0 16px 24px;
-  border-radius: 8px;
-  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
-
-  &:first-child {
-    margin-top: ${(props) => (props.isIos ? '28px' : '20px')};
-  }
-
-  &:last-of-type {
-    margin-bottom: 80px;
-  }
-`;
-
-type SkeletonProps = {
-    isLoading: boolean
-}
-
-export const Skeleton = styled.div<SkeletonProps>`
-  visibility: ${(props) => (props.isLoading ? 'visible' : 'hidden')};
-  position: absolute;
-  width: 100%;
-  top: 0;
-`;
-
-type HideProps = {
-    isLoading: boolean
-}
-
-export const Hide = styled.div<HideProps>`
-  visibility: ${(props) => (props.isLoading ? 'hidden' : 'visible')};
-`;
-
-export const PsychologistCardIonCard = styled(IonCard)`
-  height: 100%;
-  border-radius: 8px;
-  margin: 0;
-  position: relative;
-  box-shadow: none;
-
-  img {
-    height: 222px;
-    width: 100%;
-    object-fit: cover;
-  }
-`;
-
-export const PsychologistCardIonCardHeader = styled(IonCardHeader)`
-  padding: 16px 16px 0;
-`;
-
-export const PsychologistCardIonCardSubtitle = styled(IonCardSubtitle)`
-  display: flex;
-  align-items: flex-start;
-  text-transform: none;
-  letter-spacing: 0;
-  margin: 4px 0 16px;
-  color: ${colorConstants.primaryTextColor};
-`;
-
-export const PsychologistCardIonCardTitle = styled(IonCardTitle)`
-  color: ${colorConstants.secondaryTextColor};
-  margin: 0;
-`;
-
-export const PsychologistCardIonCardContent = styled(IonCardContent)`
-  padding: 0 16px 16px;
-`;
-
-export const PsychologistCardIcons = styled(IonIcon)`
-  color: ${colorConstants.primaryColor};
-  width: 20px;
-  height: 20px;
-  margin: 0;
-    
-  @media (max-width: 320px) {
-    width: 19px;
-  }
-`;
-
-export const IconsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-
-  p {
-    color: ${colorConstants.secondaryTextColor};
-    font-size: 14px;
-    padding-left: 5px;
-    margin: 0;
-      
-    @media (max-width: 320px) {
-      font-size: 11.5px;
-    }
-  }
-`;
-
-export const InfoContainer = styled.div`
-  display: flex;
-    justify-content: space-between;
-`;
-
-interface SkeletonTextProps{
-    height: number
-}
-
-export const SkeletonText = styled(IonSkeletonText)<SkeletonTextProps>`
-    width: 100%;
-    height: ${(props) => props.height + 'px'};
-    
-    &:first-child {
-        margin-bottom: 16px;
-    }
-    
-    &:last-child{
-        margin-top: 16px;
-    }
-`;