@mindly/ui-components 3.1.4 → 3.1.6

package/dist/lib/scroll-tabs/ScrollTabs.style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { IonSegment, IonSegmentButton } from '@ionic/react';
+import { colorConstants } from '../Theme/mindly_constants';
+
+export const Container = styled(IonSegment)`
+  --background: ${colorConstants.AccentTabsBgColor};
+`;
+
+export const Button = styled(IonSegmentButton)`
+  --background-checked: ${colorConstants.White};
+  --background-focused: ${colorConstants.White};
+  --background-hover: ${colorConstants.White};
+  --color: ${colorConstants.primaryTextColor};
+  --color-checked: ${colorConstants.primaryTextColor};
+  --color-focused: ${colorConstants.primaryTextColor};
+  --color-hover: ${colorConstants.primaryTextColor};
+  --transition: 0;
+  --indicator-transform: 0;
+`;

package/dist/lib/scroll-tabs/ScrollTabs.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ScrollTabs } from './ScrollTabs';
+
+describe('Test scroll tabs', () => {
+  test('Smoke test', () => {
+    render(<ScrollTabs setActiveTab={() => false} value="video" />);
+  });
+});

package/dist/lib/scroll-tabs/ScrollTabs.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+import { Button, Container } from './ScrollTabs.style';
+import '../Theme/global.css';
+
+export interface ScrollTabsProps {
+  /*
+   * Assumes passing a setter for the active tab value
+   */
+  setActiveTab: (e?: string) => void;
+
+  /*
+   * Active tab value
+   */
+  value: 'profile' | 'video' | 'articles';
+}
+
+export const ScrollTabs: React.FC<ScrollTabsProps> = (props) => {
+  return (
+    <Container
+      value={props.value}
+      mode="ios"
+      onIonChange={(e) => props.setActiveTab(e.detail.value)}
+    >
+      <Button value="profile" data-testid="profile">
+        <IonLabel>
+          <h5>Профіль</h5>
+        </IonLabel>
+      </Button>
+      <Button value="video" data-testid="video">
+        <IonLabel>
+          <h5>Відео</h5>
+        </IonLabel>
+      </Button>
+      <Button value="articles" data-testid="articles">
+        <IonLabel>
+          <h5>Статті</h5>
+        </IonLabel>
+      </Button>
+    </Container>
+  );
+};

package/dist/lib/tab-bar/TabBar.style.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isIos: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  display: flex;
+  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.08);
+  position: fixed;
+  bottom: -1px;
+  width: 100vw;
+  border: none;
+  padding-bottom: ${(props) => (props.isIos ? '34px' : '10px')};
+  color: ${colorConstants.secondaryTextColor};
+  padding-top: 10px;
+  justify-content: center;
+  background: white;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 150px;
+    flex-grow: 1;
+    flex-basis: 0;
+    cursor: pointer;
+  }
+
+  ion-icon {
+    font-size: 28px;
+    margin: 0;
+  }
+
+  ion-label {
+    font-weight: 700;
+    font-size: 10px;
+    margin: 0;
+    line-height: 14px;
+    font-family: 'Lato Bold', sans-serif;
+  }
+`;

package/dist/lib/tab-bar/TabBar.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { Container } from './TabBar.style';
+
+export interface TabBarProps {
+  children: ReactNode;
+  isIos: boolean;
+}
+
+export const TabBar: React.FC<TabBarProps> = (props) => {
+  return <Container isIos={props.isIos}>{props.children}</Container>;
+};

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

@@ -0,0 +1,104 @@
+import { IonIcon } from '@ionic/react';
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+export const Container = styled.div`
+  cursor: pointer;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
+  position: relative;
+  padding: 11px;
+
+  @media (min-width: 600px) {
+    max-width: 452px;
+  }
+`;
+
+export const Card = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+
+  .img-container {
+    max-height: 102px;
+    max-width: 102px;
+    flex: 1 0;
+  }
+  
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  
+  .img {
+    width: 102px;
+    height: 102px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+
+  h1 {
+    margin: 0px 16px 0;
+    color: ${colorConstants.primaryTextColor};
+    font-size: 16px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  h3 {
+    margin: 4px 16px 0;
+    color: ${colorConstants.secondaryTextColor};
+    font-size: 14px;
+    line-height: 16px;
+  }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const PsychologistCardIcons = styled<any>(IonIcon)`
+  // #skipcq
+  color: ${colorConstants.primaryColor};
+  font-size: 20px;
+  margin: 0;
+
+  @media (max-width: 320px) {
+    font-size: 19px;
+  }
+`;
+
+export const IconsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin-right: 12px;
+  margin-top: 4px;
+
+  .color-green {
+    // #skipcq
+    color: ${colorConstants.AccentTickColor};
+  }
+  
+  p {
+    color: ${colorConstants.primaryTextColor};
+    font-size: 12px;
+    line-height: 16px;
+    padding-left: 4px;
+    margin: 0;
+    font-family: 'Lato Regular', sans-serif;
+    white-space: nowrap;
+
+    @media (max-width: 320px) {
+      font-size: 10.5px;
+      line-height: 14px;
+    }
+  }
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  margin-left: 16px;
+  flex-wrap: wrap;
+`;

package/dist/lib/therapist-card/TherapistCard.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { TherapistCard } from './TherapistCard';
+
+describe('Test therapist card', () => {
+  test('Smoke test', () => {
+    render(
+      <TherapistCard
+        handleClick={() => false}
+        psychologistDuration={50}
+        psychologistExperience={11}
+        psychologistLastName="Test"
+        psychologistName="User"
+        psychologistPhoto=""
+        psychologistPrice={500}
+        psychologistType="Therapist"
+      />
+    );
+  });
+
+  test('Try click on card', () => {
+    const handleClick = jest.fn();
+    expect(handleClick).toHaveBeenCalledTimes(0);
+    render(
+      <TherapistCard
+        handleClick={handleClick}
+        psychologistDuration={50}
+        psychologistExperience={11}
+        psychologistLastName="Test"
+        psychologistName="User"
+        psychologistPhoto=""
+        psychologistPrice={500}
+        psychologistType="Therapist"
+        data-testid="container"
+      />
+    );
+    screen.getByTestId('container').click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { IonSkeletonText } from '@ionic/react';
+import { timeOutline, cardOutline, briefcaseOutline } from 'ionicons/icons';
+import {
+  PsychologistCardIcons,
+  IconsContainer,
+  Container,
+  InfoContainer,
+  Card,
+} from './TherapistCard.style';
+
+export interface TherapistCardProps {
+  psychologistName: string;
+  psychologistLastName: string;
+
+  /*
+   * The direction of psychologist work
+   */
+  psychologistType: string;
+
+  /*
+   * Link to psychologist photo
+   */
+  psychologistPhoto: string;
+
+  /*
+   * Consultation price
+   */
+  psychologistPrice: number;
+
+  /*
+   * Duration of consultation
+   */
+  psychologistDuration: number;
+  psychologistExperience: number;
+
+  /*
+   * The function that is called when clicking on the card
+   */
+  handleClick: (props?: React.SyntheticEvent) => void;
+  ['data-testid']?: string;
+}
+
+export const TherapistCard: React.FC<TherapistCardProps> = (props) => {
+  const [imageLoaded, setImageLoaded] = React.useState(false);
+
+  return (
+    <Container data-testid={props['data-testid']} onClick={props.handleClick}>
+      <Card>
+        <div className="img-container">
+        <img
+          className="img"
+          src={props.psychologistPhoto}
+          alt="psychologistPhoto"
+          onLoad={() => setImageLoaded(true)}
+          style={{ display: imageLoaded ? 'block' : 'none' }}
+        />
+
+        <IonSkeletonText
+          animated
+          className="img"
+          style={{ display: imageLoaded ? 'none' : 'block' }}
+        />
+        </div>
+
+        <div className="card-content">
+        <h1 className="bold">
+          {`${props.psychologistName} ${props.psychologistLastName}`}
+        </h1>
+        <h3 className="semiBold">{props.psychologistType}</h3>
+        <InfoContainer>
+          <IconsContainer>
+            <PsychologistCardIcons icon={timeOutline} />
+            <p className="semiBold">{`${props.psychologistDuration} хвилин`}</p>
+          </IconsContainer>
+          <IconsContainer>
+            <PsychologistCardIcons icon={briefcaseOutline} />
+            <p className="semiBold">
+              {props.psychologistExperience >= 5
+                ? `${props.psychologistExperience} років досвіду`
+                : props.psychologistExperience === 1
+                ? `${props.psychologistExperience} рік досвіду`
+                : `${props.psychologistExperience} роки досвіду`}
+            </p>
+          </IconsContainer>
+          <IconsContainer>
+            <PsychologistCardIcons icon={cardOutline} className="color-green" />
+            <p className="semiBold color-green">{`${props.psychologistPrice} грн`}</p>
+          </IconsContainer>
+        </InfoContainer>
+        </div>
+
+      </Card>
+    </Container>
+  );
+};

package/dist/lib/therapist-information-component/TherapistInformationComponent.style.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  img {
+    width: 100%;
+    height: 222px;
+    border-radius: 8px;
+    object-fit: cover;
+
+    @media (min-width: 600px) {
+      height: auto;
+    }
+
+    @media (min-width: 1024px) {
+      height: auto;
+    }
+  }
+`;
+
+export const Info = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+
+  h3 {
+    color: ${colorConstants.primaryTextColor};
+    display: flex;
+    align-items: center;
+
+    ion-icon {
+      margin-right: 4px;
+      font-size: 24px;
+    }
+  }
+`;

package/dist/lib/therapist-information-component/TherapistInformationComponent.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { TherapistInformationComponent } from './TherapistInformationComponent';
+
+describe('Test therapist information component', () => {
+  test('Smoke test', () => {
+    render(
+      <TherapistInformationComponent
+        price="1200 грн"
+        avatar=""
+        duration="50 хв"
+        experience="4 роки"
+      />
+    );
+  });
+});

package/dist/lib/therapist-information-component/TherapistInformationComponent.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Container, Info } from './TherapistInformationComponent.style';
+import { timeOutline, cardOutline, briefcaseOutline } from 'ionicons/icons';
+import { IonIcon } from '@ionic/react';
+import '../Theme/global.css';
+
+export interface TherapistInformationComponentProps {
+  /*
+   * Link to psychologist avatar
+   */
+  avatar: string;
+
+  /*
+   * Psychologist's experience
+   */
+  experience: string;
+
+  /*
+   * Consultation duration
+   */
+  duration: string;
+
+  /*
+   * Consultation cost
+   */
+  price: string;
+  ['data-testid']?: string;
+}
+
+export const TherapistInformationComponent: React.FC<TherapistInformationComponentProps> =
+  (props) => {
+    return (
+      <Container data-testid={props['data-testid']}>
+        <img src={props.avatar} alt="therapist avatar" />
+        <Info>
+          <h3 className="semiBold">
+            <IonIcon icon={briefcaseOutline} color="primary" />
+            {props.experience}
+          </h3>
+          <h3 className="semiBold">
+            <IonIcon icon={timeOutline} color="primary" />
+            {props.duration}
+          </h3>
+          <h3 className="semiBold">
+            <IonIcon icon={cardOutline} color="primary" />
+            {props.price}
+          </h3>
+        </Info>
+      </Container>
+    );
+  };

package/dist/lib/toast/index.css

@@ -0,0 +1,13 @@
+.toast_classes {
+  color: #ffffff;
+  --background: #1d201f;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  margin-top: 30px;
+  border-radius: 4px;
+}
+
+.toast_classes_ios {
+  top: -36px;
+}

package/dist/lib/toast/toast.ts

@@ -0,0 +1,17 @@
+import './index.css';
+import { isPlatform } from '@ionic/react';
+/**
+ * Toast that work line an API, we can call it anywhere, need message text and duration(default 3 seconds)
+ */
+export const toast = (message: string, duration = 4500): Promise<void> => {
+  const toastMessage = document.createElement('ion-toast');
+  toastMessage.message = message;
+  toastMessage.duration = duration;
+  toastMessage.position = 'top';
+  toastMessage.cssClass = isPlatform('ios')
+    ? 'toast_classes toast_classes_ios'
+    : 'toast_classes';
+
+  document.getElementById('root')?.appendChild(toastMessage);
+  return toastMessage.present();
+};