@mindly/ui-components 3.1.4 → 3.1.6

package/dist/lib/floating-button/floating button.svg

@@ -0,0 +1,6 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="54" height="54" fill="#21ABD2"/>
+<path d="M27.0002 15C21.9405 15 17.8237 19.1168 17.8237 24.1765V32.647C17.8237 33.8148 18.7737 34.7648 19.9413 34.7648C21.1092 34.7648 22.0591 33.8148 22.0591 32.647V25.5883C22.0591 24.4206 21.1092 23.4706 19.9413 23.4706C19.7037 23.4706 19.4788 23.5188 19.2651 23.5913C19.5663 19.5829 22.9168 16.4117 27.0002 16.4117C31.0815 16.4117 34.431 19.58 34.735 23.5856C34.5226 23.5129 34.2964 23.4706 34.0591 23.4706C32.8913 23.4706 31.9413 24.4206 31.9413 25.5883V32.647C31.9413 33.8148 32.8913 34.7648 34.0591 34.7648C34.3078 34.7648 34.5431 34.7139 34.765 34.6348V35.4706C34.765 35.8601 34.4479 36.1765 34.0591 36.1765H28.9879C28.6954 35.3566 27.9192 34.7648 27.0002 34.7648C25.8326 34.7648 24.8826 35.7147 24.8826 36.8824C24.8826 38.05 25.8326 39 27.0002 39C27.9192 39 28.6954 38.408 28.9879 37.5883H34.0591C35.2268 37.5883 36.1768 36.6383 36.1768 35.4706C36.1768 31.2248 36.1768 28.4269 36.1768 24.1765C36.1768 19.1168 32.06 15 27.0002 15V15Z" fill="white"/>
+<path d="M37.5884 25.0122V33.2227C38.4081 32.9304 39.0001 32.1542 39.0001 31.235V26.9998C39.0001 26.0808 38.4081 25.3046 37.5884 25.0122Z" fill="white"/>
+<path d="M15 26.9998V31.235C15 32.1542 15.592 32.9304 16.4117 33.2227V25.0122C15.592 25.3046 15 26.0808 15 26.9998Z" fill="white"/>
+</svg>

package/dist/lib/footer-for-booking/FooterForBooking.style.ts

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { IonIcon } from '@ionic/react';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isIos: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  padding: ${(props) => (props.isIos ? '16px 24px 50px' : '16px 24px')};
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
+  display: flex;
+  position: fixed;
+  z-index: 10000000000000;
+  background: ${colorConstants.White};
+  bottom: -1px;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  @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);
+  }
+
+  button {
+    min-height: 44px !important;
+    width: 132px;
+  }
+`;
+
+export const InfoContainer = styled.div`
+  h4 {
+    color: ${colorConstants.primaryTextColor};
+  }
+
+  h4:first-child {
+    margin-bottom: 4px;
+  }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const SmallIcon = styled<any>(IonIcon)`
+  // #skipcq
+  margin: 0 5px -4px 0;
+  font-size: 18px;
+
+  &.ion-color {
+    --ion-color-base: ${colorConstants.primaryColor} !important;
+  }
+`;

package/dist/lib/footer-for-booking/FooterForBooking.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { FooterForBooking } from './FooterForBooking';
+
+describe('Test floating button', () => {
+  test('Smoke test', () => {
+    render(
+      <FooterForBooking
+        eventHandler={() => undefined}
+        price="1250 грн"
+        duration={50}
+        isIos
+      />
+    );
+  });
+
+  test('Smoke test', () => {
+    const handleEvent = jest.fn();
+    render(
+      <FooterForBooking
+        eventHandler={handleEvent}
+        price="1250 грн"
+        duration={50}
+        isIos
+      />
+    );
+    screen.getByText('Записатися').click();
+    expect(handleEvent).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/lib/footer-for-booking/FooterForBooking.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Container, InfoContainer, SmallIcon } from './FooterForBooking.style';
+import { Button } from '../button/Button';
+import { timeOutline, cardOutline } from 'ionicons/icons';
+import '../Theme/global.css';
+
+export interface FooterForBookingProps {
+  /*
+   * Function to switch on booking system
+   */
+  eventHandler: (props?: React.SyntheticEvent) => void;
+
+  /*
+   * Duration of consultation (in mn)
+   */
+  duration: number;
+
+  /*
+   * Consultation cost. You need to transfer it together with the type of currency
+   */
+  price: string;
+
+  /*
+   * If platform === ios set this props true
+   */
+  isIos: boolean;
+  ['data-testid']?: string;
+}
+
+export const FooterForBooking: React.FC<FooterForBookingProps> = (props) => {
+  return (
+    <Container isIos={props.isIos}>
+      <InfoContainer>
+        <h4>
+          <SmallIcon icon={timeOutline} color="primary" />
+          <>{props.duration} хв</>
+        </h4>
+        <h4>
+          <SmallIcon icon={cardOutline} color="primary" />
+          {props.price}
+        </h4>
+      </InfoContainer>
+      <Button
+        buttonType={'primary'}
+        isDisabled={false}
+        data-testid={props['data-testid']}
+        onClick={props.eventHandler} // #skipcq
+      >
+        Записатися
+      </Button>
+    </Container>
+  );
+};

package/dist/lib/input/Input.style.ts

@@ -0,0 +1,37 @@
+import { IonIcon, IonInput } from '@ionic/react';
+import { colorConstants } from '../Theme/mindly_constants';
+import styled from 'styled-components';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const InputIonIcon = styled<any>(IonIcon)`
+  // skipcq JS-0323
+  width: 20px;
+  z-index: 3;
+  height: 20px;
+  position: absolute;
+  top: calc(50% - 10px);
+  left: 20px;
+  color: ${colorConstants.primaryTextColor} !important;
+`;
+
+interface CustomIonInputProps {
+  isActive: boolean;
+}
+
+export const CustomIonInput = styled(IonInput)<CustomIonInputProps>`
+  position: relative;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: 'Lato Regular', sans-serif;
+  --padding-start: 55px !important;
+  --background: ${colorConstants.AccentInputBgColor} !important;
+  min-height: 36px;
+  line-height: 20px;
+  color: ${(props) =>
+    props.isActive
+      ? colorConstants.primaryTextColor
+      : colorConstants.AccentDisabledColor};
+  --placeholder-color: ${colorConstants.AccentDisabledColor};
+  --placeholder-opacity: 1;
+`;

package/dist/lib/input/Input.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Input } from './Input';
+import { personOutline } from 'ionicons/icons';
+
+describe('Test input', () => {
+  test('Smoke test', () => {
+    render(
+      <Input
+        data-cy="input"
+        icon={personOutline}
+        isActive
+        name={'input'}
+        onIonChange={() => undefined}
+        placeholder={'input'}
+        type="text"
+        value=""
+      />
+    );
+  });
+});

package/dist/lib/input/Input.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { CustomIonInput, InputIonIcon } from './Input.style';
+import '../Theme/global.css';
+
+export interface InputProps {
+  /*
+   *  Toggles the color of text in the input (value !== '')
+   */
+  isActive: boolean;
+
+  /*
+   * Default react input name
+   */
+  name: string;
+
+  /*
+   * Default input type
+   */
+  type:
+    | 'date'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'url'
+    | 'time'
+    | 'week'
+    | 'month'
+    | 'datetime-local';
+
+  /*
+   * Default input placeholder
+   */
+  placeholder: string;
+
+  /*
+   * Default input value
+   */
+  value: string;
+
+  /*
+   * Data test id for cypress
+   */
+  ['data-testid']?: string;
+
+  /*
+   * Default onIonChange
+   */
+  onIonChange: (e: CustomEvent) => void;
+
+  /*
+   * Link on icon
+   */
+  icon: string;
+}
+
+export const Input: React.FC<InputProps> = (props) => {
+  return (
+    <CustomIonInput
+      name={props.name}
+      placeholder={props.placeholder}
+      value={props.value}
+      data-testid={props['data-testid']}
+      onIonChange={(e) => props.onIonChange(e)}
+      isActive={props.isActive}
+      type={props.type}
+    >
+      <InputIonIcon icon={props.icon} />
+    </CustomIonInput>
+  );
+};

package/dist/lib/list-button/ListButton.style.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+import { IonIcon } from '@ionic/react';
+
+export const Container = styled.button`
+  display: flex;
+  justify-content: space-between;
+  color: ${colorConstants.primaryTextColor};
+  border: 0;
+  border-bottom: 1px solid ${colorConstants.AccentDivider};
+  width: 100%;
+  padding: 10px 16px;
+  background: inherit;
+  align-items: center;
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const CustomIonIcon = styled<any>(IonIcon)`
+  // #skipcq
+  font-size: 24px;
+`;

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

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ListButton } from './ListButton';
+import { personOutline } from 'ionicons/icons';
+
+describe('Test list button', () => {
+  test('Smoke test', () => {
+    render(
+      <ListButton onClick={() => false} icon={personOutline}>
+        Кнопка
+      </ListButton>
+    );
+  });
+
+  test('Smoke test', () => {
+    const handleEvent = jest.fn();
+    render(
+      <ListButton onClick={handleEvent} icon={personOutline}>
+        Кнопка
+      </ListButton>
+    );
+    const listButton = screen.getByText('Кнопка');
+    listButton.click();
+    expect(handleEvent).toHaveBeenCalledTimes(1);
+  });
+});

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;