@mindly/ui-components 3.1.3 → 3.1.5

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/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/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;
+`;

package/dist/lib/ModalCalendar/ModalCalendar.tsx

@@ -0,0 +1,71 @@
+import React, { FC, useMemo, useState } from 'react';
+import {
+  ModalCalendarStyled,
+  CustomDayWrapper,
+  CustomDayStyled,
+  DotStyled,
+  NoteStyled,
+} from './ModalCalendar.styled';
+import { DayContent, DayContentProps, DayPicker } from 'react-day-picker';
+import uk from 'date-fns/locale/uk';
+import 'react-day-picker/dist/style.css';
+
+export type ModalCalendarProps = {
+  onDaySelected: (day: Date) => void;
+  consultationDays: Date[];
+  smileDays?: Date[];
+  noteDays?: Date[];
+  selectedDate?: Date;
+};
+
+export const ModalCalendar: React.FC<ModalCalendarProps> = (props) => {
+  const [month, setMonth] = useState<Date>(props.selectedDate ?? new Date());
+
+  const modifiers = useMemo(() => {
+    return {
+      hasConsultation: props.consultationDays,
+      selected: props.selectedDate ?? new Date(),
+      hasSmile: props.smileDays ?? [],
+      hasNote: props.noteDays ?? [],
+    };
+  }, [props.consultationDays]);
+
+  return (
+    <ModalCalendarStyled>
+      <DayPicker
+        mode="single"
+        month={month}
+        onMonthChange={setMonth}
+        modifiers={modifiers}
+        components={{ DayContent: CustomDate }}
+        locale={uk}
+        onSelect={(day: Date | undefined) => {
+          if (day) {
+            const currentDate = new Date();
+            day.setHours(currentDate.getHours());
+            day.setMinutes(currentDate.getMinutes());
+            day.setSeconds(currentDate.getSeconds());
+            props.onDaySelected(day);
+          }
+        }}
+      />
+    </ModalCalendarStyled>
+  );
+};
+
+const CustomDate: FC<DayContentProps> = (props) => {
+  return (
+    <CustomDayWrapper isActive={props.activeModifiers.selected}>
+      {props.activeModifiers.today && (
+        <span className="today-active">зараз</span>
+      )}
+      {props.activeModifiers.hasSmile && !props.activeModifiers.hasNote && (
+        <DotStyled />
+      )}
+      {props.activeModifiers.hasNote && <NoteStyled />}
+      <CustomDayStyled isActive={props.activeModifiers.hasConsultation}>
+        <DayContent {...props} />
+      </CustomDayStyled>
+    </CustomDayWrapper>
+  );
+};

package/dist/lib/PersonDateTimeCard/PersonDateTimeCard.styled.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const PersonDateTimeCardStyled = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  gap: 12px;
+
+  .person-name {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #1d201f;
+  }
+
+  .date-time {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 14px;
+    color: #5b5b5b;
+  }
+
+  & .person-avatar {
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 15px;
+    flex: 0 0 40px;
+  }
+`;
+
+export default PersonDateTimeCardStyled;

package/dist/lib/PersonDateTimeCard/PersonDateTimeCard.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PersonDateTimeCardStyled from './PersonDateTimeCard.styled';
+import { DateTime } from 'luxon';
+import { Avatar } from '../Avatar';
+
+export type PersonDateTimeCardProps = {
+  photoSrc?: string;
+  name: string;
+  dateTime: Date;
+};
+
+const PersonDateTimeCard: React.FC<PersonDateTimeCardProps> = (props) => {
+  const dt = DateTime.fromJSDate(props.dateTime);
+  const label = dt.setLocale('uk').toFormat('dd MMM ! HH:mm').replace('!', 'o');
+
+  return (
+    <PersonDateTimeCardStyled>
+      <Avatar
+        dimensions={40}
+        src={props.photoSrc}
+        firstName={props.name}
+        className="person-avatar"
+      />
+      <div className="right-part">
+        <div className="person-name">{props.name}</div>
+        <div className="date-time">{label}</div>
+      </div>
+    </PersonDateTimeCardStyled>
+  );
+};
+
+export default React.memo(PersonDateTimeCard);

package/dist/lib/Segment/Segment.style.ts

@@ -0,0 +1,14 @@
+import { IonLabel, IonSegment } from '@ionic/react';
+import styled from 'styled-components';
+
+export const SegmentWrapper = styled(IonSegment)`
+  min-height: 32px;
+  --background: #d6f2f9;
+`;
+
+export const SegmentLabel = styled(IonLabel)`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #1d201f;
+`;

package/dist/lib/Segment/Segment.tsx

@@ -0,0 +1,29 @@
+import { IonSegmentButton } from '@ionic/react';
+import React, { FC } from 'react';
+import { SegmentLabel, SegmentWrapper } from './Segment.style';
+import { SegmentType } from './types';
+
+type SegmentProps = {
+  segments: SegmentType[];
+  selected?: string;
+  onChange?: (id: string) => void;
+};
+
+const Segment: FC<SegmentProps> = ({ segments, selected, onChange }) => {
+  return (
+    <SegmentWrapper
+      scrollable
+      mode="ios"
+      value={selected}
+      onIonChange={(e) => onChange?.(e.detail.value as string)}
+    >
+      {segments.map((item) => (
+        <IonSegmentButton key={item.id} value={item.id}>
+          <SegmentLabel>{item.label}</SegmentLabel>
+        </IonSegmentButton>
+      ))}
+    </SegmentWrapper>
+  );
+};
+
+export default Segment;

package/dist/lib/Segment/types.ts

@@ -0,0 +1,4 @@
+export type SegmentType = {
+  id: string;
+  label: string;
+};

package/dist/lib/SelectImpressionEmoji/ImpressionEmojiEnum.ts

@@ -0,0 +1,9 @@
+enum ImpressionEmojiEnum {
+  DEPRESSED = -2,
+  SAD = -1,
+  NEUTRAL = 0,
+  HAPPY = 1,
+  LOVELY = 2
+}
+
+export default ImpressionEmojiEnum;