@mindly/ui-components 0.1.2 → 0.1.3

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;
-    }
-`;

package/src/lib/therapist-card/TherapistCard.tsx

@@ -1,97 +0,0 @@
-import React, {useState} from 'react';
-import {timeOutline, cardOutline, briefcaseOutline} from 'ionicons/icons';
-import {
-    PsychologistCardIonCardContent,
-    PsychologistCardIonCardHeader,
-    PsychologistCardIonCardSubtitle,
-    PsychologistCardIonCardTitle,
-    PsychologistCardIcons,
-    PsychologistCardIonCard,
-    IconsContainer,
-    Container,
-    Skeleton,
-    Hide,
-    InfoContainer,
-    SkeletonText,
-} from './TherapistCard.style';
-import {isPlatform} from '@ionic/react';
-
-interface TherapistCardProps {
-    psychologistName: string
-    psychologistLastName: string
-    psychologistType: string
-    psychologistPhoto: string
-    psychologistPrice: number
-    psychologistDuration: number
-    psychologistExperience: number
-    handleClick: React.MouseEventHandler,
-}
-
-
-const TherapistCard: React.FC<TherapistCardProps> = ({
-    psychologistName,
-    psychologistLastName,
-    psychologistType,
-    psychologistPhoto,
-    psychologistPrice,
-    psychologistDuration,
-    psychologistExperience,
-    handleClick,
-}) => {
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    return (
-        <Container isIos={isPlatform('ios')}>
-            <PsychologistCardIonCard onClick={handleClick}>
-                <Hide isLoading={isLoading}>
-                    <img src={psychologistPhoto}
-                        onLoad={() => setIsLoading(false)}
-                        alt='psychologistPhoto'
-                    />
-                    <PsychologistCardIonCardHeader>
-                        <PsychologistCardIonCardTitle>
-                            <h1 className='bold'>
-                                {`${psychologistName} ${psychologistLastName}`}
-                            </h1>
-                        </PsychologistCardIonCardTitle>
-                        <PsychologistCardIonCardSubtitle>
-                            <h3 className='semiBold'>
-                                {psychologistType}
-                            </h3>
-                        </PsychologistCardIonCardSubtitle>
-                    </PsychologistCardIonCardHeader>
-                    <PsychologistCardIonCardContent>
-                        <InfoContainer>
-                            <IconsContainer>
-                                <PsychologistCardIcons icon={timeOutline} />
-                                <p className='semiBold'>{`${psychologistDuration} минут`}</p>
-                            </IconsContainer>
-                            <IconsContainer>
-                                <PsychologistCardIcons icon={cardOutline} />
-                                <p className='semiBold'>{`${psychologistPrice} грн`}</p>
-                            </IconsContainer>
-                            <IconsContainer>
-                                <PsychologistCardIcons icon={briefcaseOutline} />
-                                <p className='semiBold'>
-                                    {psychologistExperience >= 5 ?
-                                        `${psychologistExperience} лет опыта` :
-                                        psychologistExperience === 1 ?
-                                            `${psychologistExperience} год опыта` :
-                                            `${psychologistExperience} года опыта`}
-                                </p>
-                            </IconsContainer>
-                        </InfoContainer>
-                    </PsychologistCardIonCardContent>
-                </Hide>
-
-                <Skeleton isLoading={isLoading}>
-                    <SkeletonText height={222} animated/>
-                    <SkeletonText animated height={60} />
-                    <SkeletonText animated height={22} />
-                </Skeleton>
-            </PsychologistCardIonCard>
-        </Container>
-    );
-};
-
-export default TherapistCard;

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

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

package/src/stories/Button.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Button } from './Button';
-
-export default {
-  title: 'Example/Button',
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};

package/src/stories/Button.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};

package/src/stories/Header.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Header } from './Header';
-
-export default {
-  title: 'Example/Header',
-  component: Header,
-} as ComponentMeta<typeof Header>;
-
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};