@mindly/ui-components 3.1.4 → 3.1.5

package/dist/lib/list-button/ListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../Theme/global.css';
+import { Container, CustomIonIcon } from './ListButton.style';
+
+export interface ListButtonProps {
+  /*
+   * Text inside the button (default React children)
+   */
+  children: React.ReactNode;
+
+  /*
+   * Link on icon
+   */
+  icon: string;
+
+  /*
+   * Default React onClick
+   */
+  onClick: (props?: React.SyntheticEvent) => void;
+  ['data-testid']?: string;
+}
+
+export const ListButton: React.FC<ListButtonProps> = (props) => {
+  return (
+    <Container data-testid={props['data-testid']} onClick={props.onClick}>
+      <h4>{props.children}</h4>
+      <CustomIonIcon src={props.icon} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,81 @@
+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 16px' : '40px 16px 16px'};
+  background: #ffffff;
+  position: fixed;
+  z-index: 1000;
+  min-height: ${(props) => (props.isInternetConnected ? '44px' : '74px')};
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+  color: ${colorConstants.secondaryTextColor};
+
+  @media (min-width: 600px) {
+    padding-left: calc((100vw - 468px) / 2);
+    padding-right: calc((100vw - 468px) / 2);
+  }
+
+  @media (min-width: 1024px) {
+    padding-left: calc((100vw - 960px) / 2);
+    padding-right: calc((100vw - 960px) / 2);
+  }
+
+  .left {
+    cursor: pointer;
+    position: absolute;
+    color: ${colorConstants.primaryColor};
+    left: 0;
+  }
+
+  .right {
+    cursor: pointer;
+    color: ${colorConstants.primaryColor};
+    position: absolute;
+    right: 0;
+  }
+
+  &:after {
+    background-image: none;
+  }
+
+  ${(props: ContainerProps) =>
+    props.isIos &&
+    css`
+      padding: ${props.isInternetConnected
+        ? '54px 16px 10px'
+        : '64px 16px 10px'};
+      min-height: ${props.isInternetConnected ? '88px' : '98px'};
+
+      .left {
+        position: absolute;
+        left: 0;
+      }
+
+      .right {
+        position: absolute;
+        right: 0;
+      }
+    `}
+`;
+
+export const PositionRelative = styled.div`
+  position: relative;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+
+  @media (min-width: 600px) {
+    width: 468px;
+  }
+
+  @media (min-width: 1024px) {
+    width: 960px;
+  }
+`;

package/dist/lib/navigation-bar/NavigationBar.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { NavigationBar } from './NavigationBar';
+
+describe('Test navigation bar', () => {
+  test('Smoke test', () => {
+    render(
+      <NavigationBar isInternetConnected isIos>
+        <h3 className="left">first</h3>
+        <h3>second</h3>
+        <h3 className="right">third</h3>
+      </NavigationBar>
+    );
+  });
+});

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

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { Container, PositionRelative } from './NavigationBar.style';
+import '../Theme/global.css';
+
+export interface NavigationBarProps {
+  /*
+   * If internet connected, set this props true. Changes the appearance of a component
+   */
+  isInternetConnected: boolean;
+
+  /*
+   * Here you pass the special HTML structure. All variations can be viewed in the storybook
+   */
+  children?: ReactNode;
+
+  /*
+   * If platform === ios set this props true
+   */
+  isIos: boolean;
+}
+
+export const NavigationBar: React.FC<NavigationBarProps> = (props) => {
+  return (
+    <Container
+      isIos={props.isIos}
+      isInternetConnected={props.isInternetConnected}
+    >
+      <PositionRelative>{props.children}</PositionRelative>
+    </Container>
+  );
+};

package/dist/lib/no-internet-connection/NoInternetConnection.style.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isInternetConnected: boolean;
+  isIos: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  z-index: 999;
+  position: fixed;
+  box-sizing: border-box;
+  background: ${colorConstants.AccentCross};
+  width: 100%;
+  display: ${(props) => (props.isInternetConnected ? 'none' : 'flex')};
+  justify-content: center;
+  align-items: center;
+  padding: ${(props) => (props.isIos ? '32px 0 8px' : '8px 0')};
+
+  span {
+    font-size: 10px;
+    line-height: 14px;
+    margin-left: 8px;
+    color: ${colorConstants.White};
+  }
+`;

package/dist/lib/no-internet-connection/NoInternetConnection.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 13.5625C3.38158 13.5625 0.4375 10.6184 0.4375 7C0.4375 3.38158 3.38158 0.4375 7 0.4375C10.6184 0.4375 13.5625 3.38158 13.5625 7C13.5625 10.6184 10.6184 13.5625 7 13.5625Z" fill="#F1646F"/>
+    <path d="M7 14C3.14008 14 0 10.8599 0 7C0 3.14008 3.14008 0 7 0C10.8599 0 14 3.14008 14 7C14 10.8599 10.8599 14 7 14ZM7 0.875C3.6225 0.875 0.875 3.6225 0.875 7C0.875 10.3775 3.6225 13.125 7 13.125C10.3775 13.125 13.125 10.3775 13.125 7C13.125 3.6225 10.3775 0.875 7 0.875Z" fill="white"/>
+    <path d="M11.509 6.25341C11.3976 6.25341 11.285 6.21083 11.1999 6.12566C10.9362 5.86199 10.6492 5.62458 10.3476 5.41924C10.1475 5.28391 10.095 5.01208 10.2315 4.81199C10.3663 4.61191 10.6381 4.55824 10.8388 4.69591C11.1859 4.93099 11.5155 5.20399 11.8188 5.50616C11.9897 5.67708 11.9897 5.95416 11.8194 6.12566C11.7336 6.21024 11.6216 6.25341 11.509 6.25341Z" fill="white"/>
+    <path d="M2.49085 6.25316C2.37943 6.25316 2.26743 6.21058 2.18226 6.12541C2.01076 5.95508 2.0096 5.67799 2.18051 5.50649C3.7911 3.88949 6.0311 3.17666 8.36735 3.63574C8.60418 3.68241 8.75876 3.91283 8.71268 4.14966C8.66601 4.38649 8.43618 4.53758 8.19876 4.49499C6.1466 4.09074 4.2041 4.71433 2.80001 6.12424C2.71485 6.20999 2.60285 6.25316 2.49085 6.25316Z" fill="white"/>
+    <path d="M9.93993 7.82829C9.82851 7.82829 9.71593 7.7857 9.63076 7.70054C9.37351 7.44329 9.08359 7.22395 8.77034 7.04954C8.55918 6.9317 8.48393 6.66512 8.60118 6.45395C8.71843 6.24279 8.98501 6.16695 9.19676 6.28479C9.58001 6.49887 9.93468 6.76662 10.2497 7.08045C10.4206 7.25137 10.4206 7.52845 10.2503 7.69995C10.1645 7.7857 10.0519 7.82829 9.93993 7.82829Z" fill="white"/>
+    <path d="M4.06016 7.82864C3.94816 7.82864 3.83616 7.78606 3.75099 7.70031C3.58007 7.52939 3.58007 7.25172 3.75099 7.08139C4.37632 6.45664 5.14691 6.03022 5.97932 5.84939C6.21499 5.79747 6.44891 5.94739 6.50024 6.18306C6.55216 6.41931 6.40224 6.65264 6.16657 6.70397C5.49749 6.84981 4.87624 7.19456 4.36991 7.70031C4.28416 7.78606 4.17157 7.82864 4.06016 7.82864Z" fill="white"/>
+    <path d="M6.99999 10.4997C6.42599 10.4997 5.92258 10.1135 5.77733 9.56109C5.71608 9.32776 5.85608 9.08801 6.08941 9.02676C6.32099 8.96726 6.56249 9.10492 6.62374 9.33884C6.66866 9.50976 6.81974 9.62467 6.99999 9.62467C7.21874 9.62467 7.39666 9.44676 7.39666 9.22801C7.39666 9.04776 7.28174 8.89726 7.11082 8.85176C6.87749 8.79051 6.73691 8.55076 6.79874 8.31742C6.85999 8.08351 7.10266 7.94642 7.33307 8.00534C7.88549 8.15059 8.27166 8.65284 8.27166 9.22801C8.27166 9.92917 7.70116 10.4997 6.99999 10.4997Z" fill="white"/>
+    <path d="M2.36069 12.0764C2.24869 12.0764 2.13669 12.0339 2.05153 11.9481C1.88061 11.7772 1.88061 11.5001 2.05153 11.3292L11.33 2.05128C11.5009 1.88037 11.778 1.88037 11.9489 2.05128C12.1199 2.2222 12.1199 2.49928 11.9489 2.6702L2.66986 11.9481C2.58469 12.0339 2.47269 12.0764 2.36069 12.0764Z" fill="white"/>
+</svg>

package/dist/lib/no-internet-connection/NoInternetConnection.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { NoInternetConnection } from './NoInternetConnection';
+
+describe('Test no internet connection', () => {
+  test('Smoke test', () => {
+    render(<NoInternetConnection isInternetConnected isIos />);
+  });
+});

package/dist/lib/no-internet-connection/NoInternetConnection.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ReactComponent as Icon } from './NoInternetConnection.svg';
+import { Container } from './NoInternetConnection.style';
+import '../Theme/global.css';
+
+export interface NoInternetConnectionProps {
+  /*
+   * If internet connected, set this props true. Changes the appearance of a component
+   */
+  isInternetConnected: boolean;
+
+  /*
+   * If platform === ios set this props true
+   */
+  isIos: boolean;
+}
+
+export const NoInternetConnection: React.FC<NoInternetConnectionProps> = (
+  props
+) => {
+  return (
+    <Container
+      isInternetConnected={props.isInternetConnected}
+      isIos={props.isIos}
+    >
+      <Icon />
+      <span>Інтернет підключення відсутнє</span>
+    </Container>
+  );
+};

package/dist/lib/notes-card-text/NotesCardText.style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const StyledNotesCardPre = styled.pre`
+  overflow-y: hidden;
+  overflow-x: auto;
+
+  white-space: pre-wrap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #1d201f;
+`;

package/dist/lib/notes-card-text/NotesCardText.tsx

@@ -0,0 +1,32 @@
+import { StyledNotesCardPre } from './NotesCardText.style';
+import React, { useCallback } from 'react';
+
+export type NotesCardTextProps = {
+  text: string
+}
+
+const NotesCardText: React.FC<NotesCardTextProps> = ({ text }) => {
+  const matchAndReplaceLinkToATag = useCallback(
+    () => {
+      const expression =
+        // eslint-disable-next-line max-len
+        /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
+      const regex = RegExp(expression);
+
+      return text.split(regex).map((textPart) =>
+        regex.test(textPart) ? (
+          <a className="text-link" href={textPart}>
+            {textPart}
+          </a>
+        ) : (
+          textPart
+        )
+      );
+    },
+    [text]
+  );
+
+  return (<StyledNotesCardPre>{matchAndReplaceLinkToATag()}</StyledNotesCardPre>);
+};
+
+export default NotesCardText;

package/dist/lib/notes-card-text/index.ts

@@ -0,0 +1 @@
+export * from './NotesCardText';

package/dist/lib/notes-editor/NotesEditor.styled.ts

@@ -0,0 +1,24 @@
+import { IonTextarea } from '@ionic/react';
+import styled from 'styled-components';
+
+export const StyledIonTextarea = styled(IonTextarea)`
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  --padding-bottom: 20px !important;
+  --padding-end: 16px !important;
+  --padding-start: 16px !important;
+  --padding-top: 0 !important;
+
+  textarea {
+    min-height: 300px !important;
+
+    overflow: hidden !important;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+`;

package/dist/lib/notes-editor/NotesEditor.tsx

@@ -0,0 +1,16 @@
+import React, { forwardRef, HTMLAttributes, RefAttributes } from 'react';
+import { JSX } from '@ionic/core/components';
+import { StyledIonTextarea } from './NotesEditor.styled';
+
+export type NotesEditorProps = JSX.IonTextarea &
+  HTMLAttributes<HTMLIonTextareaElement> &
+  RefAttributes<HTMLIonTextareaElement>;
+
+const NotesEditor = forwardRef<HTMLIonTextareaElement, NotesEditorProps>(
+  (props, ref) => {
+    return <StyledIonTextarea autoGrow ref={ref} {...props} />;
+  }
+);
+NotesEditor.displayName = 'NotesEditor';
+
+export default NotesEditor;

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);
+  });
+});