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

package/src/care/interfaces/constants.ts

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+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',
+}