@mindly/ui-components 3.1.4 → 3.1.5

package/dist/lib/Filters/Toggle/Toggle.style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const ToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const ToggleTitle = styled.h3`
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+  color: #1d201f;
+`;

package/dist/lib/Filters/Toggle/Toggle.tsx

@@ -0,0 +1,26 @@
+import { IonToggle } from '@ionic/react';
+import React, { FC } from 'react';
+import { ToggleTitle, ToggleWrapper } from './Toggle.style';
+
+type ToggleProps = {
+  title: string;
+  checked?: boolean;
+  onChange: (checked: boolean) => void;
+};
+
+export const Toggle: FC<ToggleProps> = ({
+  title,
+  checked = false,
+  onChange,
+}) => {
+  return (
+    <ToggleWrapper>
+      <ToggleTitle>{title}</ToggleTitle>
+      <IonToggle
+        mode="ios"
+        checked={checked}
+        onIonChange={(e) => onChange(e.detail.checked)}
+      />
+    </ToggleWrapper>
+  );
+};

package/dist/lib/Filters/Toggle/index.ts

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

package/dist/lib/HorisontalCalendar/HorizontalCalendar.styled.ts

@@ -0,0 +1,117 @@
+import styled from 'styled-components';
+
+const HorizontalCalendarStyled = styled.div`
+  --contrastColor: #21abd2;
+  --highlightColor: #d6f2f9;
+  user-select: none;
+
+  ul {
+    list-style: none;
+    display: flex;
+    gap: 9px;
+    overflow: scroll;
+    width: 100%;
+    white-space: nowrap;
+    padding: 0;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    li {
+      display: inline-block;
+      height: 70px;
+      width: 44px;
+      border-radius: 8px;
+      padding: 6px;
+
+      .day {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-content: center;
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 700;
+
+        .title {
+          font-size: 10px;
+          line-height: 14px;
+          text-transform: uppercase;
+        }
+
+        .tags {
+          height: 11px;
+        }
+
+        .day-content {
+          font-size: 16px;
+          line-height: 16px;
+          height: 32px;
+          width: 32px;
+          border: 1px solid var(--contrastColor);
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          justify-items: center;
+          align-items: center;
+          align-content: center;
+        }
+      }
+
+      &.selected {
+        background-color: var(--highlightColor);
+      }
+
+      &.has-consultation .day .day-content {
+        background-color: var(--contrastColor);
+        color: #fff;
+      }
+
+      &.has-my-note .day .tags,
+      &.has-tome-notes .day .tags {
+        position: relative;
+
+        .draw {
+          position: absolute;
+          width: 5px;
+          height: 5px;
+          left: -2px;
+          top: 1px;
+          border-radius: 3px;
+          background: #21ABD2;
+        }
+      }
+
+      &.has-tome-notes .day .tags .draw {
+        width: 15px;
+        left: -7px
+      }
+
+      .day.skeleton {
+        .title .sk {
+          width: 15px;
+          height: 14px;
+          border-radius: 4px;
+        }
+
+        .tags {
+          height: 5px;
+        }
+
+        .day-content {
+          border: none;
+
+          .sk {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default HorizontalCalendarStyled;

package/dist/lib/HorisontalCalendar/HorizontalCalendar.tsx

@@ -0,0 +1,213 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import HorizontalCalendarStyled from './HorizontalCalendar.styled';
+import { IonSkeletonText, useIonViewDidEnter } from '@ionic/react';
+
+export type HorizontalCalendarProps = {
+  consultationDatesSeconds?: number[],
+  myNotesDatesSeconds?: number[],
+  toMeNotesDatesSeconds?: number[],
+  /**
+   * Days to be rendered. e.g. 15 - means 7 before today and 7 after today
+   */
+  daysToRender?: number,
+  value?: DayToRender | Date,
+  onChange?: (value: DayToRender) => void
+  /**
+   * date from which a component should start coordinates.
+   * e.g. startFrom = "15.01.2022", daysToRender=5
+   * return ["13.02.2022", "14.01.2022", "15.01.2022", "16.01.2022", "17.01.2022"]
+   *
+   */
+  startFrom?: Date;
+  showSkeleton?: boolean;
+};
+
+enum DayOfWeek {
+  SUN = 'Нд',
+  MON = 'Пн',
+  TUE = 'Вт',
+  WED = 'Ср',
+  THU = 'Чт',
+  FRI = 'Пт',
+  SAT = 'Сб'
+}
+
+function dateToDayOfWeek(date: Date): DayOfWeek {
+  const day = date.getDay();
+  switch (day) {
+    default:
+    case 0:
+      return DayOfWeek.SUN;
+    case 1:
+      return DayOfWeek.MON;
+    case 2:
+      return DayOfWeek.TUE;
+    case 3:
+      return DayOfWeek.WED;
+    case 4:
+      return DayOfWeek.THU;
+    case 5:
+      return DayOfWeek.FRI;
+    case 6:
+      return DayOfWeek.SAT;
+  }
+}
+
+function dateToShortDate(d: Date): string {
+  return d.toDateString();
+}
+
+export type DayToRender = {
+  /**
+   * e.g. "2.2.122", "24.4.122"
+   */
+  shortDate: string;
+  dayOfMonth: number;
+  dayOfWeek: DayOfWeek;
+  date: Date;
+};
+
+const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
+
+function getDaysToRender(daysToRender = 15, startFrom: Date = new Date()): DayToRender[] {
+  const daysAroundTodayCount = Math.floor(daysToRender / 2);
+  const days: DayToRender[] = [];
+
+  const startingDate = startFrom.valueOf() - (MILLISECONDS_IN_DAY * daysAroundTodayCount);
+
+  for (let i = 0, currentDate = startingDate;
+    i < daysToRender;
+    i++, currentDate += MILLISECONDS_IN_DAY) {
+    const date = new Date(currentDate);
+    days.push({
+      shortDate: dateToShortDate(date),
+      dayOfWeek: dateToDayOfWeek(date),
+      dayOfMonth: date.getDate(),
+      date: date,
+    });
+  }
+
+  return days;
+}
+
+function secondsToShortDate(seconds: number): string {
+  const date = new Date(seconds * 1000);
+  return dateToShortDate(date);
+}
+
+function secondsArrayToShortDatesSet(secondsArray: number[] = []): Set<string> {
+  if (!Array.isArray(secondsArray)) return new Set<string>();
+  const shortDatesArray = secondsArray.map(sec => secondsToShortDate(sec));
+  const set = new Set(shortDatesArray);
+  return set;
+}
+
+export const HorizontalCalendar: React.FC<HorizontalCalendarProps> = (props) => {
+  const dateNow = new Date();
+  const [daysToRender, setDaysToRender] = useState<DayToRender[]>([]);
+  const currentShortDate = dateToShortDate(dateNow);
+  const todayRef = useRef<HTMLDivElement | null>(null);
+  const consultationsShortDatesSet = useMemo<Set<string>>(() => {
+    return secondsArrayToShortDatesSet(props.consultationDatesSeconds);
+  }, [props.consultationDatesSeconds]);
+
+  const myNotesDatesSet = useMemo<Set<string>>(() => {
+    return secondsArrayToShortDatesSet(props.myNotesDatesSeconds);
+  }, [props.myNotesDatesSeconds]);
+
+  const toMeNotesDatesSet = useMemo<Set<string>>(() => {
+    return secondsArrayToShortDatesSet(props.toMeNotesDatesSeconds);
+  }, [props.toMeNotesDatesSeconds]);
+
+  useEffect(() => {
+    const toRender = getDaysToRender(props.daysToRender, props.startFrom);
+    setDaysToRender(toRender);
+  }, [props.daysToRender, dateNow.getDate(), props.startFrom]);
+
+  const scrollToSelectedDay = useCallback(() => {
+    if (props.showSkeleton) return;
+    if (!todayRef.current) return;
+    todayRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+  }, [todayRef.current, props.showSkeleton]);
+
+  useEffect(() => {
+    scrollToSelectedDay();
+  }, [todayRef.current, props.showSkeleton]);
+
+  useEffect(() => {
+    // eslint-disable-next-line no-restricted-globals
+    const S = self;
+    const handler = () => {
+      scrollToSelectedDay();
+    };
+    S.addEventListener('calendar_scroll', handler);
+    return () => {
+      S.removeEventListener('calendar_scroll', handler);
+    };
+  }, []);
+
+  useIonViewDidEnter(scrollToSelectedDay);
+
+
+  const valueShortDate = props.value && (
+    props.value instanceof Date ?
+      dateToShortDate(props.value)
+      : props.value?.shortDate
+  );
+
+
+  return (<HorizontalCalendarStyled>
+    <ul>
+      {daysToRender.map(day => {
+        if (props.showSkeleton) {
+          return (<li
+            key={day.shortDate}
+          >
+            <div className="day skeleton">
+              <div className="title">
+                <IonSkeletonText className="sk" animated/>
+              </div>
+              <div className="tags"></div>
+              <div className="day-content">
+                <IonSkeletonText className="sk" animated/>
+              </div>
+            </div>
+          </li>);
+        }
+
+        const isToday = day.shortDate === currentShortDate;
+        const hasConsultations = consultationsShortDatesSet.has(day.shortDate);
+        const isSelected = props.value ? (valueShortDate === day.shortDate) : isToday;
+        const hasMyNote = myNotesDatesSet.has(day.shortDate);
+        const hasToMeNotes = toMeNotesDatesSet.has(day.shortDate);
+
+        const classList = [];
+        if (isSelected) classList.push('selected');
+        if (isToday) classList.push('today');
+        if (hasConsultations) classList.push('has-consultation');
+        if (hasMyNote) classList.push('has-my-note');
+        if (hasToMeNotes) classList.push('has-tome-notes');
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const attributes: any = {};
+        if (classList.length) {
+          attributes.className = classList.join(' ');
+        }
+
+        return (<li
+          key={day.shortDate}
+          onClick={() => {
+            props.onChange && props.onChange(day);
+          }}
+          {...attributes}
+        >
+          <div className="day" ref={isToday ? todayRef : null}>
+            <div className="title">{isToday ? 'Зараз' : day.dayOfWeek}</div>
+            <div className="tags"><span className="draw"></span></div>
+            <div className="day-content">{day.dayOfMonth}</div>
+          </div>
+        </li>);
+      })}
+    </ul>
+  </HorizontalCalendarStyled>);
+};

package/dist/lib/HorisontalCalendar/index.ts

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

package/dist/lib/ImageWithFallback/ImageWithFallback.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useCallback, useEffect } from 'react';
+
+export type ImageWithFallbackProps = JSX.IntrinsicElements["img"] & ({
+  onErrorContent: React.ReactElement;
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function filterImgProps(props: any): JSX.IntrinsicElements["img"]{
+  const props2 = { ...props };
+  delete props2.onErrorContent;
+  return props2 as JSX.IntrinsicElements["img"];
+}
+
+const ImageWithFallback : React.FC<ImageWithFallbackProps> = (props)=>{
+  const [hasError, setHasError] = useState<boolean>(false);
+  const innerProps = filterImgProps(props);
+
+  useEffect(()=>{
+    setHasError(false);
+  }, [props.src]);
+
+  const onErrorHandler = useCallback((e)=>{
+      setHasError(!!e);
+  }, []);
+
+
+  if (hasError) {
+    return props.onErrorContent;
+  }
+
+  return (
+    <img {...innerProps} onError={onErrorHandler}/>
+  );
+
+};
+
+export default ImageWithFallback;

package/dist/lib/LetterAvatar/LetterAvatar.styled.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+type LetterAvatarStyledProps = {
+  dimensions: number;
+};
+
+const LetterAvatarStyled = styled.div<LetterAvatarStyledProps>`
+  display: inline-block;
+  text-align: center;
+
+  height: ${({ dimensions }) => dimensions}px;
+  width: ${({ dimensions }) => dimensions}px;
+  border-radius: 50%;
+  background: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.8),
+      rgba(255, 255, 255, 0.8)
+    ),
+    #21abd2;
+  color: #21abd2;
+
+  font-size: 22.4px;
+  line-height: 56px;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default LetterAvatarStyled;

package/dist/lib/LetterAvatar/LetterAvatar.tsx

@@ -0,0 +1,23 @@
+import React, { CSSProperties } from 'react';
+import LetterAvatarStyled from './LetterAvatar.styled';
+
+export type LetterAvatarProps = {
+  letter: string;
+  dimensions?: number;
+  className?: string;
+  style?: CSSProperties;
+};
+
+const LetterAvatar: React.FC<LetterAvatarProps> = (props) => {
+  return (
+    <LetterAvatarStyled
+      dimensions={props.dimensions ?? 56}
+      className={props.className}
+      style={props.style}
+    >
+      {props.letter}
+    </LetterAvatarStyled>
+  );
+};
+
+export default React.memo<LetterAvatarProps>(LetterAvatar);

package/dist/lib/Modal/Modal.style.ts

@@ -0,0 +1,12 @@
+import { IonModal } from '@ionic/react';
+import styled from 'styled-components';
+import { maxContainerWidth } from '../Theme/mindly_constants';
+
+type ModalStyledProps = {
+  isFullWidth: boolean;
+};
+
+export const ModalStyled = styled(IonModal)<ModalStyledProps>`
+  --max-width: ${({ isFullWidth }) =>
+    isFullWidth ? maxContainerWidth : '100%'};
+`;

package/dist/lib/Modal/Modal.tsx

@@ -0,0 +1,30 @@
+import { isPlatform } from '@ionic/react';
+import React, { FC } from 'react';
+import { ModalStyled } from './Modal.style';
+
+interface ModalProps {
+  fullwidth?: boolean;
+  isOpen: boolean;
+  onDidDismiss: () => void;
+}
+
+const Modal: FC<ModalProps> = ({
+  fullwidth = false,
+  isOpen,
+  onDidDismiss,
+  children,
+}) => {
+  return (
+    <ModalStyled
+      isFullWidth={
+        !fullwidth && (isPlatform('desktop') || isPlatform('tablet'))
+      }
+      isOpen={isOpen}
+      onDidDismiss={onDidDismiss}
+    >
+      {children}
+    </ModalStyled>
+  );
+};
+
+export default Modal;

package/dist/lib/Modal/index.ts

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

package/dist/lib/ModalCalendar/ModalCalendar.styled.ts

@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+
+export const ModalCalendarStyled = styled.div`
+  --rdp-background-color: #fff;
+  --rdp-accent-color: none;
+  --rdp-outline: none;
+  --rdp-outline-selected: none;
+  --rdp-cell-size: 48px;
+  font-family: 'Inter', sans-serif;
+
+  & .rdp {
+    margin: 0;
+  }
+
+  & .rdp-month {
+    width: 100%;
+  }
+
+  & .rdp-table {
+    /* max-width: 100%;
+    width: 100%; */
+    td {
+      /* width: 44px; */
+      height: 70px;
+      text-align: center;
+      vertical-align: top;
+    }
+
+    th {
+      height: 20px;
+      text-align: center;
+      vertical-align: top;
+    }
+  }
+
+  & .rdp-caption {
+    margin-bottom: 24px;
+  }
+
+  & .rdp-head_cell span {
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 14px;
+    color: #1d201f;
+  }
+
+  & button.rdp-day {
+    width: 44px;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  & .rdp-caption_label {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    color: #1d201f;
+    text-transform: capitalize;
+  }
+`;
+
+type CustomDayWrapperProps = {
+  isActive?: boolean;
+};
+
+export const CustomDayWrapper = styled.div<CustomDayWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: ${({ isActive }) => (isActive ? '#D6F2F9' : 'transparent')};
+  border-radius: 8px;
+  position: relative;
+  & span {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+  }
+  & span.today-active {
+    display: inline-block;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 14px;
+    color: #1d201f;
+    text-transform: uppercase;
+    position: absolute;
+    top: 6px;
+  }
+`;
+
+type CustomDayProps = {
+  isActive?: boolean;
+};
+
+export const CustomDayStyled = styled.div<CustomDayProps>`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: ${({ isActive }) => (isActive ? '#21ABD2;' : 'transparent')};
+  color: ${({ isActive }) => (isActive ? '#fff' : '#1D201F')};
+  margin-bottom: 7px;
+  margin-top: 4px;
+`;
+
+export const DotStyled = styled.div`
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #21abd2;
+`;
+
+export const NoteStyled = styled.div`
+  width: 15px;
+  height: 4px;
+  background: #21abd2;
+  border-radius: 3px;
+`;