@mindly/ui-components 3.1.3 → 3.1.5

package/dist/{esm/types/index.d.ts → index.ts}

@@ -19,13 +19,22 @@ import { DayToRender, HorizontalCalendar } from './lib/HorisontalCalendar';
 import SelectImpressionEmoji from './lib/SelectImpressionEmoji';
 import SelectImpressionEmojiProps from './lib/SelectImpressionEmoji/SelectImpressionEmojiProps';
 import ImpressionEmojiEnum from './lib/SelectImpressionEmoji/ImpressionEmojiEnum';
-import LetterAvatar, { LetterAvatarProps } from './lib/LetterAvatar/LetterAvatar';
-import ImageWithFallback, { ImageWithFallbackProps } from './lib/ImageWithFallback/ImageWithFallback';
+import LetterAvatar, {
+  LetterAvatarProps,
+} from './lib/LetterAvatar/LetterAvatar';
+import ImageWithFallback, {
+  ImageWithFallbackProps,
+} from './lib/ImageWithFallback/ImageWithFallback';
 import PersonDateTimeCard from './lib/PersonDateTimeCard/PersonDateTimeCard';
 import * as UserAppTypes from './lib/userAppTypes';
-import { UsersPsychologistScrollList, UsersPsychologistScrollListPropsType } from './lib/UsersPsychologistScrollList/UsersPsychologistScrollList';
+import {
+  UsersPsychologistScrollList,
+  UsersPsychologistScrollListPropsType,
+} from './lib/UsersPsychologistScrollList/UsersPsychologistScrollList';
 import NotesEditor from './lib/notes-editor/NotesEditor';
-import NotesCardText, { NotesCardTextProps } from './lib/notes-card-text/NotesCardText';
+import NotesCardText, {
+  NotesCardTextProps,
+} from './lib/notes-card-text/NotesCardText';
 import { ListItemType } from './lib/Filters/ListSelect/ListSelect';
 import ListSelect from './lib/Filters/ListSelect';
 import { RangeValue } from './lib/Filters/Range/Range';
@@ -33,16 +42,65 @@ import Range from './lib/Filters/Range';
 import { RowItemType } from './lib/Filters/RowSelect/RowSelect';
 import RowSelect from './lib/Filters/RowSelect';
 import Toggle from './lib/Filters/Toggle';
-export { ArchivedConsultationCard, DatePicker, Button, FloatingButton, FooterForBooking, ListButton, NavigationBar, ContentCard, TherapistCard, toast, NoInternetConnection, TherapistInformationComponent, Input, ScrollTabs, TabBar, YourLocalTimeBlock, ModalCalendar, HorizontalCalendar, SelectImpressionEmoji, ImpressionEmojiEnum, LetterAvatar, ImageWithFallback, PersonDateTimeCard, UsersPsychologistScrollList, NotesEditor, NotesCardText, ListSelect, Range, RowSelect, Toggle, };
-export type { SelectImpressionEmojiProps, DayToRender, LetterAvatarProps, ImageWithFallbackProps, UserAppTypes, UsersPsychologistScrollListPropsType, NotesCardTextProps, ListItemType, RangeValue, RowItemType, };
+
+export {
+  ArchivedConsultationCard,
+  DatePicker,
+  Button,
+  FloatingButton,
+  FooterForBooking,
+  ListButton,
+  NavigationBar,
+  ContentCard,
+  TherapistCard,
+  toast,
+  NoInternetConnection,
+  TherapistInformationComponent,
+  Input,
+  ScrollTabs,
+  TabBar,
+  YourLocalTimeBlock,
+  ModalCalendar,
+  HorizontalCalendar,
+  SelectImpressionEmoji,
+  ImpressionEmojiEnum,
+  LetterAvatar,
+  ImageWithFallback,
+  PersonDateTimeCard,
+  UsersPsychologistScrollList,
+  NotesEditor,
+  NotesCardText,
+  ListSelect,
+  Range,
+  RowSelect,
+  Toggle,
+};
+
+export type {
+  SelectImpressionEmojiProps,
+  DayToRender,
+  LetterAvatarProps,
+  ImageWithFallbackProps,
+  UserAppTypes,
+  UsersPsychologistScrollListPropsType,
+  NotesCardTextProps,
+  ListItemType,
+  RangeValue,
+  RowItemType,
+};
+
 export * from './lib/EntryNotFound';
 export * from './lib/consultation-card';
 export * from './lib/Avatar';
+
 export { default as AppHeader } from './lib/AppHeader';
 export * from './lib/AppHeader';
+
 export { default as Container } from './lib/Container';
 export * from './lib/Container';
+
 export { default as Segment } from './lib/Segment';
 export * from './lib/Segment';
+
 export { default as Modal } from './lib/Modal';
 export * from './lib/Modal';

package/dist/lib/AppHeader/AppHeader.style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { IonHeader, IonToolbar } from '@ionic/react';
+import { maxContainerWidth } from '../Theme/mindly_constants';
+
+type AppHeaderToolbarProps = {
+  isNotMobile: boolean;
+};
+
+export const AppHeaderContainer = styled(IonHeader)`
+  background: #ffffff;
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.12);
+  display: flex;
+  justify-content: center;
+`;
+
+export const AppHeaderToolbar = styled(IonToolbar)<AppHeaderToolbarProps>`
+  max-width: ${({ isNotMobile }) => (isNotMobile ? maxContainerWidth : '100%')};
+  padding: 0 16px;
+`;

package/dist/lib/AppHeader/AppHeader.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { AppHeaderContainer, AppHeaderToolbar } from './AppHeader.style';
+import { isPlatform } from '@ionic/react';
+
+type AppHeaderProps = {
+  fullwidth?: boolean;
+};
+
+const AppHeader: FC<AppHeaderProps> = ({ fullwidth = false, children }) => {
+  return (
+    <AppHeaderContainer>
+      <AppHeaderToolbar
+        isNotMobile={
+          !fullwidth && (isPlatform('desktop') || isPlatform('tablet'))
+        }
+      >
+        {children}
+      </AppHeaderToolbar>
+    </AppHeaderContainer>
+  );
+};
+
+export default AppHeader;

package/dist/lib/Avatar/Avatar.style.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+type AvatarWrapperProps = {
+  dimensions: number;
+};
+export const AvatarWrapper = styled.div<AvatarWrapperProps>`
+  width: ${({ dimensions }) => dimensions}px;
+  height: ${({ dimensions }) => dimensions}px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;

package/dist/lib/Avatar/Avatar.tsx

@@ -0,0 +1,46 @@
+import React, { CSSProperties, FC, memo } from 'react';
+import { AvatarWrapper } from './Avatar.style';
+import LetterAvatar from '../LetterAvatar/LetterAvatar';
+import ImageWithFallback from '../ImageWithFallback/ImageWithFallback';
+
+export type AvatarProps = {
+  dimensions?: number;
+  src?: string;
+  firstName?: string;
+  style?: CSSProperties;
+  className?: string;
+};
+
+export const Avatar: FC<AvatarProps> = memo(
+  ({
+    src = '',
+    firstName = '',
+    dimensions = 56,
+    style = {},
+    className = '',
+  }) => {
+    const imageFallback = (
+      <LetterAvatar
+        dimensions={dimensions}
+        letter={firstName[0] ?? ''}
+        className={className}
+        style={style}
+      />
+    );
+
+    if (src) {
+      return (
+        <AvatarWrapper
+          dimensions={dimensions}
+          style={style}
+          className={className}
+        >
+          <ImageWithFallback src={src} onErrorContent={imageFallback} />
+        </AvatarWrapper>
+      );
+    }
+
+    return imageFallback;
+  }
+);
+Avatar.displayName = 'Avatar';

package/dist/lib/Container/Container.styled.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { maxContainerWidth } from '../Theme/mindly_constants';
+
+type ContainerStyledProps = {
+  isNotMobile: boolean;
+};
+
+export const ContainerStyled = styled.div<ContainerStyledProps>`
+  margin: auto;
+  max-width: ${({ isNotMobile }) => (isNotMobile ? maxContainerWidth : '100%')};
+  padding: 16px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;

package/dist/lib/Container/Container.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { ContainerStyled } from './Container.styled';
+import { isPlatform } from '@ionic/react';
+
+const Container: FC = ({ children }) => {
+  return (
+    <ContainerStyled
+      isNotMobile={isPlatform('desktop') || isPlatform('tablet')}
+    >
+      {children}
+    </ContainerStyled>
+  );
+};
+
+export default Container;

package/dist/lib/EntryNotFound/EntryNotFound.style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const EntryNodFoundContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const EntryNotFoundTitle = styled.span`
+  font-size: 16px;
+  font-weight: 600;
+  color: #1d201f;
+  margin-top: 20px;
+`;

package/dist/lib/EntryNotFound/EntryNotFound.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { ReactComponent as CalendarIcon } from './calendar.svg';
+import {
+  EntryNodFoundContainer,
+  EntryNotFoundTitle,
+} from './EntryNotFound.style';
+
+export type EntryNotFoundProps = {
+  title?: string;
+};
+
+export const EntryNotFound: FC<EntryNotFoundProps> = ({
+  title = 'Консультацій немає',
+}) => {
+  return (
+    <EntryNodFoundContainer>
+      <CalendarIcon />
+      <EntryNotFoundTitle>{title}</EntryNotFoundTitle>
+    </EntryNodFoundContainer>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { IonItem, IonLabel } from '@ionic/react';
+import styled from 'styled-components';
+
+export const ListTitle = styled.h3`
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+  color: #1d201f;
+  margin-bottom: 16px;
+`;
+
+export const IonItemStyled = styled(IonItem)`
+  --padding-start: 0;
+  --inner-padding-end: 0;
+  --min-height: 32px;
+  --background-hover: transparent;
+  --background-activated: transparent;
+  --background: transparent;
+  margin-bottom: 4px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & ion-icon {
+    margin: 0 8px 0 0;
+    color: #21abd2;
+    font-size: 18px;
+    --ionicon-stroke-width: 48px;
+  }
+`;
+
+export const IonLabelStyled = styled(IonLabel)`
+  margin: 0;
+  font-weight: 600;
+  font-size: 14px !important;
+  line-height: 16px;
+`;

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

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

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

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

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

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

@@ -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/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;