@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/care/interfaces/constants.ts

@@ -1,75 +0,0 @@
-import { LocaleType } from 'interfaces/types'
-
-import { CareLocaleType, LocalizedSlugsType } from './types'
-
-export const basePath = '/care'
-
-export const LOCALE_COUNTRY: {
-  [key in LocaleType]?: {
-    [key: string]: string | number
-  }
-} = {
-  'vi-VN': { id: 1, name: 'Vietnam' },
-  'id-ID': { id: 2, name: 'Indonesia' },
-  'ms-MY': { id: 3, name: 'Malaysia' },
-  'km-KH': { id: 4, name: 'Cambodia' },
-  'en-PH': { id: 5, name: 'Philippines' },
-  'th-TH': { id: 6, name: 'Thai Lan' },
-  'my-MM': { id: 7, name: 'Myanmar' },
-  'zh-TW': { id: 8, name: 'Taiwan' },
-  'hi-IN': { id: 9, name: 'India' },
-}
-
-export const LOCALIZED_SLUGS: {
-  [key in CareLocaleType]: {
-    [key in LocalizedSlugsType]: string
-  }
-} = {
-  'en-PH': {
-    ALL: 'all',
-    HOSPITAL: 'hospital',
-    SERVICE: 'service',
-    DOCTOR: 'doctor',
-    SEARCH: 'search',
-    SPECIALTIES: 'specialties',
-    CURRENT: 'current-location',
-  },
-  'tl-PH': {
-    ALL: 'all',
-    HOSPITAL: 'hospital',
-    SERVICE: 'service',
-    DOCTOR: 'doctor',
-    SEARCH: 'search',
-    SPECIALTIES: 'specialties',
-    CURRENT: 'current-location',
-  },
-  'zh-TW': {
-    ALL: 'all',
-    HOSPITAL: 'hospital',
-    SERVICE: 'service',
-    DOCTOR: 'doctor',
-    SEARCH: 'search',
-    SPECIALTIES: 'specialties',
-    CURRENT: 'current-location',
-  },
-  'vi-VN': {
-    ALL: 'tat-ca',
-    HOSPITAL: 'benh-vien',
-    SERVICE: 'dich-vu',
-    DOCTOR: 'bac-si',
-    SEARCH: 'tim-kiem',
-    SPECIALTIES: 'chuyen-khoa',
-    CURRENT: 'vi-tri-hien-tai',
-  },
-  'id-ID': {
-    ALL: 'semua',
-    HOSPITAL: 'rumah-sakit',
-    SERVICE: 'layanan',
-    DOCTOR: 'dokter',
-    SEARCH: 'cari',
-    SPECIALTIES: 'spesialisasi',
-    CURRENT: 'posisi-saya-saat-ini',
-  },
-}
-
-export const ID_OPTION_CURRENT_LOCATION = -1

package/src/care/interfaces/types.ts

@@ -1,258 +0,0 @@
-import { LocaleType } from 'interfaces/types'
-
-type Extends<T, U extends T> = U
-
-export type CareLocaleType = Extends<
-  LocaleType,
-  'en-PH' | 'vi-VN' | 'id-ID' | 'zh-TW' | 'tl-PH'
->
-
-export enum RedirectType {
-  'SPECIALTY' = 1,
-  'DOCTOR' = 2,
-  'CLINIC' = 3,
-  'SERVICE' = 4,
-}
-
-export type City = {
-  name: string
-  country?: string
-  id: number
-  slug: string
-}
-
-export type Services = {
-  id: number | string
-  name: string
-  email: string
-  phone: string
-  logo: string
-  price: string
-  priceUnit: string
-  description: string
-}
-
-export type Doctor = {
-  name: string
-  description: string
-  avatar: string
-  price: number | string
-  phone: string
-  priceUnit: string
-  provideCare: number | null
-  distance?: string
-  id: number
-  priceDescription: string
-  hospital?: Hospital | null
-  experiences: Experiences
-  isActive?: boolean
-  organization: OrganizationInfoApi
-  specialties:
-    | string[]
-    | {
-        id: number
-        name: string
-      }[]
-  slug: string
-  cityName: string
-}
-export type Service = {
-  id: number
-  logoService: string
-  hospitalId: number
-  hospitalBranchId: number
-  serviceId: number
-  name: string
-  email: string
-  phone: string
-  price: string
-  priceUnit: string
-  description: string
-  status: number
-  createdAt: string
-  hospitalBranch: Hospital
-  distance: string
-  slug?: string
-}
-
-export type Hospital = {
-  id: number
-  name: string
-  slug: string
-  description: string
-  logo: string
-  cityId: number
-  // distance: string
-  phone: string
-  longitude: string
-  latitude: string
-  address: string
-  openAt: string | null
-  closeAt: string | null
-  insurances: Insurance[]
-  specialties?: Specialty[]
-  medicalFacilities: string[]
-  about: string
-  weekDayHours: string
-  weekendHours: string
-  images: {
-    imageOne: string
-    imageTwo: string
-    imageThree: string
-    imageFour: string
-    imageFive: string
-  }
-  services: ServiceInfoApi[]
-  workingTimes: {
-    [key: string]: string[]
-  } | null
-}
-
-export type Insurance = {
-  id: number | string
-  name: string
-  logo: string
-  created_at: string
-}
-
-export type Specialty = {
-  name: string
-  id: number
-  thumbnail: string
-  total_doctor: number
-  slug: string
-}
-
-export type ServiceInfoApi = {
-  id: number
-  logo: string
-  hospital_id: number
-  hospital_branch_id: number
-  service_id: number
-  name: string
-  email: string
-  phone: string
-  price: string
-  price_unit: string
-  description: string
-  status: number
-  created_at: string
-  hospital_branch: HospitalApi
-  distance: string
-  avatar: string
-}
-
-export type DoctorInfoApi = {
-  name: string
-  description: string
-  avatar: string
-  price: number | string
-  phone: string
-  price_unit: string
-  provide_care: number
-  distance?: string
-  id: number
-  price_description: string
-  hospital_branch?: HospitalApi
-  experiences: Experiences
-  organization: OrganizationInfoApi
-  specialties:
-    | string[]
-    | {
-        id: number
-        name: string
-      }[]
-  slug: string
-}
-
-export type OrganizationInfoApi = {
-  id: number | string
-  name: string
-  logo?: string
-}
-
-export type HospitalApi = {
-  id: number
-  hospital_id: number
-  name: string
-  phone: string
-  logo: string
-  // distance: string
-  city_id: number
-  longitude: string
-  latitude: string
-  address: string
-  open_at?: string
-  close_at?: string
-  insurances?: Insurance[]
-  specialties?: Specialty[]
-  medical_facilities: string
-  description: string
-  about: string
-  weekday_hours: string
-  weekend_hours: string
-  images: {
-    image_0: string
-    image_1: string
-    image_2: string
-    image_3: string
-    image_4: string
-  }
-  services: ServiceInfoApi[]
-  working_times: {
-    [key: string]: {
-      day: string
-      start_at: string
-      end_at: string
-    }[]
-  }
-  city: City
-}
-
-export type Experiences = Array<{
-  description: string
-}>
-
-export type Clinic = {
-  name: string
-  id: number
-  slug: string
-}
-
-export type LocalizedSlugsType =
-  | 'HOSPITAL'
-  | 'SERVICE'
-  | 'DOCTOR'
-  | 'ALL'
-  | 'SEARCH'
-  | 'SPECIALTIES'
-  | 'CURRENT'
-
-export type SearchDataBookingApi = {
-  hospitals: HospitalApi[]
-  doctors: DoctorInfoApi[]
-  specialties: Specialty[] & { total_hospital_service: number }
-}
-
-export type SearchBarSectionItemApi = {
-  id: number
-  name: string
-  slug: string
-  avatar?: string
-  logo?: string
-  thumbnail?: string
-}
-
-export type SearchBarSectionApi = {
-  type: 'doctors' | 'specialties' | 'services' | 'hospitals'
-  results: SearchBarSectionItemApi[]
-}
-
-export type SearchCityByGeoIpApi = {
-  cities: City[]
-  default: City
-}
-
-export type SearchCityByKeywordApi = {
-  cities: City[]
-}

package/src/components/atoms/alert/__snapshots__/index.test.tsx.snap

@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c2 {
-  --text-color: var( --custom-color, #262626 );
-  color: var(--text-color);
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.c3 {
-  --text-color: var( --custom-color, #262626 );
-  color: var(--text-color);
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 18px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  overflow: auto;
-  width: 100%;
-  box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-left: 4px solid #00b16a;
-  background: #e0f8ee;
-}
-
-.c0[data-alert-type='danger'] {
-  border-left-color: #ff5331;
-  background: #fae9e8;
-}
-
-.c0[data-alert-type='warning'] {
-  border-left-color: #fe921d;
-  background: #fff8e2;
-}
-
-.c0[data-alert-type='blue'] {
-  border-left-color: #2b94ff;
-  background: #e3f2ff;
-}
-
-.c1 .icon-title {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 svg,
-.c1 img {
-  margin-right: 8px;
-}
-
-.c4 {
-  cursor: pointer;
-}
-
-@media (min-width:1024px) {
-
-}
-
-@media (min-width:1024px) {
-  .c3 {
-    font-size: 14px;
-    line-height: 24px;
-  }
-}
-
-<div
-  class="c0"
-  data-alert-type="success"
->
-  <div
-    class="c1"
-  >
-    <div
-      class="icon-title"
-    >
-      <img
-        src="https://source.unsplash.com/random/16x16"
-      />
-      <p
-        class="c2"
-        data-size="label1"
-        data-type="bold"
-      >
-        This is an alert
-      </p>
-    </div>
-    <p
-      class="c3"
-      data-size="p3"
-      data-type="regular"
-    />
-  </div>
-  <div
-    class="c4"
-  >
-    <img
-      src="https://source.unsplash.com/random/16x16"
-    />
-  </div>
-</div>
-`;

package/src/components/atoms/alert/index.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Alert, Props } from './index'
-
-export default {
-  component: Alert,
-  title: 'Atoms/Alert',
-}
-
-const Template: Story<Props> = (args) => <Alert {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  text: 'This is an alert',
-  type: 'success',
-  contentIcon: <img src="https://source.unsplash.com/random/16x16" />,
-  closeIcon: <img src="https://source.unsplash.com/random/16x16" />,
-}

package/src/components/atoms/alert/index.styled.tsx

@@ -1,44 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledAlert = styled.div`
-  display: flex;
-  overflow: auto;
-  width: 100%;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-left: 4px solid ${(props: ThemeProps) => props.theme.colors.success};
-  background: ${(props: ThemeProps) => props.theme.colors.green50};
-
-  &[data-alert-type='danger'] {
-    border-left-color: ${(props: ThemeProps) => props.theme.colors.red500};
-    background: ${(props: ThemeProps) => props.theme.colors.red50};
-  }
-
-  &[data-alert-type='warning'] {
-    border-left-color: ${(props: ThemeProps) => props.theme.colors.yellow500};
-    background: ${(props: ThemeProps) => props.theme.colors.yellow50};
-  }
-
-  &[data-alert-type='blue'] {
-    border-left-color: ${(props: ThemeProps) => props.theme.colors.blue500};
-    background: ${(props: ThemeProps) => props.theme.colors.blue50};
-  }
-`
-export const StyledContent = styled.div`
-  .icon-title {
-    display: flex;
-    align-items: center;
-  }
-
-  svg,
-  img {
-    margin-right: 8px;
-  }
-`
-
-export const StyledClose = styled.div`
-  cursor: pointer;
-`

package/src/components/atoms/alert/index.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { Alert } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const alert = render(
-    <MockTheme>
-      <Alert
-        text="This is an alert"
-        type="success"
-        contentIcon={<img src="https://source.unsplash.com/random/16x16" />}
-        closeIcon={<img src="https://source.unsplash.com/random/16x16" />}
-      />
-    </MockTheme>,
-  )
-
-  const self = alert.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toHaveAttribute('data-alert-type', 'success')
-})

package/src/components/atoms/alert/index.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import { CSSProperties } from 'styled-components'
-
-import { Text } from '../text'
-import { StyledAlert, StyledClose, StyledContent } from './index.styled'
-
-export type Props = {
-  type: 'success' | 'danger' | 'warning' | 'info'
-  contentIcon: JSX.Element
-  closeIcon: JSX.Element
-  text: string
-  description?: string
-  className?: string
-  style?: CSSProperties
-  onClose?: () => void
-}
-
-const Alert = ({
-  style,
-  onClose,
-  text,
-  type,
-  contentIcon,
-  closeIcon,
-  className,
-  description,
-}: Props) => {
-  return (
-    <StyledAlert style={style} data-alert-type={type} className={className}>
-      <StyledContent>
-        <div className="icon-title">
-          {contentIcon}
-          <Text type="bold" size="label1">
-            {text}
-          </Text>
-        </div>
-        <Text type="regular" size="p3">
-          {description}
-        </Text>
-      </StyledContent>
-      <StyledClose onClick={onClose}>{closeIcon}</StyledClose>
-    </StyledAlert>
-  )
-}
-
-export { Alert }

package/src/components/atoms/avatar/index.stories.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Avatar, Props } from '.'
-
-export default {
-  component: Avatar,
-  title: 'Atoms/Avatar',
-}
-
-const Template: Story<Props> = (args) => <Avatar {...args} />
-
-export const Square = Template.bind({})
-Square.args = {
-  avatarImg: <img src="https://source.unsplash.com/random/74x74" />,
-}
-
-export const Rounded = Template.bind({})
-Rounded.args = {
-  avatarImg: <img src="https://source.unsplash.com/random/74x74" />,
-  type: 'rounded',
-}
-
-export const WithCustomCSS = Template.bind({})
-WithCustomCSS.args = {
-  avatarImg: <img src="https://source.unsplash.com/random/74x74" />,
-  type: 'rounded',
-  style: { border: 'solid 1px red' },
-}
-
-export const WithBrokenImageFallback = Template.bind({})
-WithBrokenImageFallback.args = {
-  avatarUrl: 'https://some-broken-url',
-  type: 'rounded',
-  firstLetter: 'A',
-  backgroundColor: 'black',
-  size: 'medium',
-}
-
-export const WithAvatarUrl = Template.bind({})
-WithAvatarUrl.args = {
-  avatarUrl:
-    'https://i.natgeofe.com/k/59ccd67f-c57c-4946-99bd-f957a38dafaa/hippopotamus-closeup-water_3x4.jpg',
-  type: 'rounded',
-  firstLetter: 'H',
-  backgroundColor: 'black',
-  size: 'medium',
-}