@mindly/ui-components 3.1.5 → 3.1.7

package/dist/lib/Filters/ListSelect/ListSelect.tsx

@@ -1,48 +0,0 @@
-import { IonIcon, IonList } from '@ionic/react';
-import { checkmarkOutline } from 'ionicons/icons';
-import React, { FC, ReactText } from 'react';
-import { ListTitle, IonItemStyled, IonLabelStyled } from './ListSelect.style';
-
-export type ListItemType = {
-  id: ReactText;
-  label: string;
-};
-
-type ListSelectProps = {
-  title: string;
-  listItems: ListItemType[];
-  selected?: ReactText;
-  onChange: (item: ListItemType) => void;
-};
-
-export const ListSelect: FC<ListSelectProps> = ({
-  title,
-  listItems,
-  onChange,
-  selected,
-}) => {
-  return (
-    <>
-      <ListTitle>{title}</ListTitle>
-      <IonList lines="none" mode="ios">
-        {listItems.map((item) => (
-          <IonItemStyled
-            key={item.id}
-            mode="ios"
-            button
-            detail={false}
-            onClick={() => onChange(item)}
-            fill="solid"
-          >
-            <IonLabelStyled color={selected === item.id ? 'primary' : 'medium'}>
-              {item.label}
-            </IonLabelStyled>
-            {selected === item.id && (
-              <IonIcon icon={checkmarkOutline} slot="end" />
-            )}
-          </IonItemStyled>
-        ))}
-      </IonList>
-    </>
-  );
-};

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

@@ -1,41 +0,0 @@
-import { IonRange } from '@ionic/react';
-import styled from 'styled-components';
-
-export const RangeStyled = styled(IonRange)`
-  --bar-background-active: #21abd2;
-  --bar-height: 3px;
-  /* --knob-background: transparent; */
-  --knob-box-shadow: none;
-  --knob-size: 22px;
-  --height: 22px;
-  padding: 0 17px 0 11px;
-  ::part(knob) {
-    border: 3px solid #21abd2;
-    top: 8px;
-  }
-
-  .range-knob-b {
-    left: 100%;
-  }
-`;
-
-export const RangeHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-
-  & h3 {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    color: #1d201f;
-  }
-
-  & span {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    color: #21abd2;
-  }
-`;

package/dist/lib/Filters/Range/Range.tsx

@@ -1,48 +0,0 @@
-import React, { FC, useCallback, useState } from 'react';
-import { RangeHeader, RangeStyled } from './Range.style';
-
-export type RangeValue = {
-  lower: number;
-  upper: number;
-};
-
-type RangeProps = {
-  title: string;
-  rangeTitleValues?: string;
-  initialValue: RangeValue;
-  onChange?: (value: RangeValue) => void;
-  onKnobMoveEnd?: (value: RangeValue) => void;
-};
-
-export const Range: FC<RangeProps> = ({
-  title,
-  rangeTitleValues = '',
-  initialValue,
-  onKnobMoveEnd,
-}) => {
-  const [value, setValue] = useState(initialValue);
-
-  const handleKnobMoveEnd = useCallback((e) => {
-    const eventValue = e.detail.value;
-    setValue(eventValue);
-    onKnobMoveEnd?.(eventValue);
-  }, []);
-
-  return (
-    <>
-      <RangeHeader>
-        <h3>{title}</h3>
-        <span>{`${rangeTitleValues}${value.lower}-${value.upper}`}</span>
-      </RangeHeader>
-      <RangeStyled
-        min={initialValue.lower}
-        max={initialValue.upper}
-        step={1}
-        dualKnobs={true}
-        value={value}
-        mode="ios"
-        onIonKnobMoveEnd={handleKnobMoveEnd}
-      />
-    </>
-  );
-};

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

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const RowWrapper = styled.div`
-  display: flex;
-  gap: 21px;
-  align-items: centers;
-  padding-left: 7px;
-`;
-
-type RowButtonProps = {
-  selected: boolean;
-};
-
-export const RowButton = styled.button<RowButtonProps>`
-  background: transparent;
-  font-weight: 600;
-  font-size: ${({ selected }) => (selected ? 28 : 24)}px;
-  line-height: 32px;
-  color: ${({ selected }) => (selected ? '#21ABD2' : '#c1c1c1')};
-  padding: 0;
-  border: none;
-`;
-
-export const RowTitle = styled.h3`
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 24px;
-  color: #1d201f;
-  margin-bottom: 18px;
-`;

package/dist/lib/Filters/RowSelect/RowSelect.tsx

@@ -1,38 +0,0 @@
-import React, { FC, ReactText } from 'react';
-import { RowButton, RowTitle, RowWrapper } from './RowSelect.style';
-
-export type RowItemType = {
-  id: ReactText;
-  label: string;
-};
-
-type RowSelectProps = {
-  title: string;
-  rowItems: RowItemType[];
-  selected?: ReactText;
-  onChange: (value: RowItemType) => void;
-};
-
-export const RowSelect: FC<RowSelectProps> = ({
-  title,
-  rowItems,
-  selected,
-  onChange,
-}) => {
-  return (
-    <>
-      <RowTitle>{title}</RowTitle>
-      <RowWrapper>
-        {rowItems.map((item) => (
-          <RowButton
-            key={item.id}
-            selected={selected === item.id}
-            onClick={() => onChange(item)}
-          >
-            {item.label}
-          </RowButton>
-        ))}
-      </RowWrapper>
-    </>
-  );
-};

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

@@ -1,14 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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/HorisontalCalendar/HorizontalCalendar.styled.ts

@@ -1,117 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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%'};
-`;