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

package/src/components/molecules/dateRangePicker/calendar/index.tsx

@@ -1,247 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-
-import {
-  addMonths,
-  format,
-  getDaysInMonth,
-  isAfter,
-  isBefore,
-  isPast,
-  isSameDay,
-  isToday,
-  isWithinInterval,
-  startOfMonth,
-  subMonths,
-} from 'date-fns'
-import enUS from 'date-fns/locale/en-US'
-import id from 'date-fns/locale/id'
-import vi from 'date-fns/locale/vi'
-import zhTW from 'date-fns/locale/zh-TW'
-import { Button } from 'src/components/atoms'
-import { useTranslations } from 'src/core'
-import { useScreenSize } from 'src/hooks/useScreenSize'
-import { LocaleType } from 'src/interfaces/types'
-
-import arrowLeftIcon from '../../../../assets/svg/calendarArrowLeft.svg'
-import arrowRightIcon from '../../../../assets/svg/calendarArrowRight.svg'
-import { DateRangeInterval } from '../types'
-import { handleClickDay } from '../utils'
-import {
-  StyledCalendarCellsWrapper,
-  StyledCalendarDateGrid,
-  StyledCalendarDayLabel,
-  StyledCalendarDayNumber,
-  StyledCalendarDayNumberWrapper,
-  StyledCalendarDaysOfWeek,
-  StyledCalendarDaysWrapper,
-  StyledCalendarHead,
-  StyledCalendarMonthSeparator,
-  StyledCalendarMonthWrapper,
-  StyledCalendarWrapper,
-} from './index.styled'
-
-export type Props = {
-  value?: DateRangeInterval | null
-  onChange: (value: DateRangeInterval | null) => void
-  minDate?: Date
-  maxDate?: Date
-}
-
-const dateLocaleByLocale: { [key in LocaleType]?: typeof enUS } = {
-  'en-PH': enUS,
-  'vi-VN': vi,
-  'zh-TW': zhTW,
-  'id-ID': id,
-}
-
-export function DateRangePickerCalendar(props: Props) {
-  const { value = { from: null, to: null } } = props
-
-  const { isMobile } = useScreenSize()
-  const [range, setRange] = useState(() => value)
-  const [date, setDate] = useState(() => startOfMonth(value.from ?? new Date()))
-
-  const nextMonth = useMemo(() => addMonths(date, 1), [date])
-
-  function goToPreviousMonth() {
-    setDate((d) => subMonths(d, 1))
-  }
-
-  function goToNextMonth() {
-    setDate((d) => addMonths(d, 1))
-  }
-
-  const monthProps = {
-    ...props,
-    goToNextMonth,
-    goToPreviousMonth,
-    range,
-    setRange,
-  }
-
-  return (
-    <>
-      <DateRangePickerCalendarMonth {...monthProps} date={date} />
-      {!isMobile && <StyledCalendarMonthSeparator />}
-      {!isMobile && (
-        <DateRangePickerCalendarMonth {...monthProps} date={nextMonth} />
-      )}
-    </>
-  )
-}
-
-type DateRangePickerCalendarMonthProps = Props & {
-  date: Date
-  goToPreviousMonth: () => void
-  goToNextMonth: () => void
-  range: DateRangeInterval
-  setRange: React.Dispatch<React.SetStateAction<DateRangeInterval>>
-}
-
-function DateRangePickerCalendarMonth({
-  date,
-  // value,
-  range,
-  setRange,
-  onChange,
-  goToPreviousMonth,
-  goToNextMonth,
-  minDate,
-  maxDate,
-}: DateRangePickerCalendarMonthProps) {
-  const { locale } = useTranslations()
-  // const [hoverDay, setHoverDay] = useState<Date | null>(null)
-
-  const dateLocale = useMemo(
-    () => dateLocaleByLocale[locale] ?? dateLocaleByLocale['en-PH'],
-    [locale],
-  )
-  const monthLabel = useMemo(
-    () => format(date, 'MMMM', { locale: dateLocale }),
-    [date, dateLocale],
-  )
-
-  const weekDays = useMemo(() => {
-    if (!dateLocale) {
-      return []
-    }
-    return [1, 2, 3, 4, 5, 6, 0].map((i) =>
-      dateLocale.localize.day(i, { width: 'narrow' }),
-    )
-  }, [dateLocale])
-
-  useEffect(() => {
-    if (range.from && range.to) {
-      onChange(range)
-    }
-  }, [range])
-
-  function renderWeekDays() {
-    return (
-      <StyledCalendarDaysOfWeek>
-        {weekDays.map((d, i) => (
-          <StyledCalendarDayLabel key={`${d}-${i}`}>{d}</StyledCalendarDayLabel>
-        ))}
-      </StyledCalendarDaysOfWeek>
-    )
-  }
-
-  function renderMonth() {
-    const year = date.getFullYear()
-    const monthIndex = date.getMonth()
-    const daysInMonth = getDaysInMonth(date)
-    const days: (Date | null)[] = []
-    for (let i = 1; i <= daysInMonth; i++) {
-      days.push(new Date(year, monthIndex, i))
-    }
-    const weekDayIndex = days[0] ? days[0].getDay() : 0
-    if (weekDayIndex !== 1) {
-      const idx = weekDayIndex === 0 ? 6 : weekDayIndex - 1
-      for (let i = 0; i < idx; i++) {
-        days.unshift(null)
-      }
-    }
-    return (
-      <StyledCalendarMonthWrapper
-        key={`month-${monthIndex}`}
-        data-month-index={monthIndex}
-      >
-        <StyledCalendarDaysWrapper>
-          <StyledCalendarDateGrid>{days.map(renderDay)}</StyledCalendarDateGrid>
-        </StyledCalendarDaysWrapper>
-      </StyledCalendarMonthWrapper>
-    )
-  }
-
-  function renderDay(d: Date | null, index: number) {
-    if (d === null) {
-      return <StyledCalendarDayNumberWrapper key={`idx-${index}`} />
-    }
-    const day = d.getDate()
-    const isDateToday = isToday(d)
-    const isFrom = range.from ? isSameDay(range.from, d) : false
-    const isTo = range.to ? isSameDay(range.to, d) : false
-    const isSelected = isFrom || isTo
-
-    let isDisabled = false
-    if (minDate && maxDate) {
-      isDisabled = !isWithinInterval(d, { start: minDate, end: maxDate })
-    } else if (minDate) {
-      isDisabled = isBefore(d, minDate)
-    } else if (maxDate) {
-      isDisabled = isAfter(d, maxDate)
-    }
-    return (
-      <StyledCalendarDayNumberWrapper
-        key={day}
-        data-is-today={isDateToday}
-        data-is-past={!isDateToday && isPast(d)}
-        data-is-selected={isSelected}
-        data-is-disabled={isDisabled}
-        // onMouseEnter={() => {
-        //   setHoverDay(d)
-        // }}
-        onClick={() => {
-          if (isDisabled) {
-            return
-          }
-          setRange((r) => {
-            return handleClickDay(d, r)
-          })
-        }}
-        // onMouseLeave={() => setHoverDay(null)}
-      >
-        <StyledCalendarDayNumber onClick={() => undefined}>
-          <p>{day}</p>
-        </StyledCalendarDayNumber>
-      </StyledCalendarDayNumberWrapper>
-    )
-  }
-
-  return (
-    <StyledCalendarWrapper className="calendar-wrapper">
-      <StyledCalendarHead>
-        <Button
-          onClick={goToPreviousMonth}
-          size="md"
-          color="ghost"
-          icon={<img src={arrowLeftIcon} />}
-        />
-        <div className="calendar-month">
-          {monthLabel}
-          <strong>{format(date, 'yyyy')}</strong>
-        </div>
-        <Button
-          onClick={goToNextMonth}
-          size="md"
-          color="ghost"
-          icon={<img src={arrowRightIcon} />}
-        />
-      </StyledCalendarHead>
-      <StyledCalendarCellsWrapper>
-        <div>{renderWeekDays()}</div>
-        <div>{renderMonth()}</div>
-      </StyledCalendarCellsWrapper>
-    </StyledCalendarWrapper>
-  )
-}

package/src/components/molecules/dateRangePicker/index.stories.tsx

@@ -1,45 +0,0 @@
-import React, { useState } from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-import { addDays, subDays } from 'date-fns/esm'
-
-import { DateRangePicker, Props } from './index'
-import { DateRangeInterval } from './types'
-
-export default {
-  component: DateRangePicker,
-  title: 'Molecules/DateRangePicker',
-}
-
-const Template: Story<Props> = (args) => {
-  const [val, setVal] = useState<DateRangeInterval | null>(null)
-  return <DateRangePicker {...args} value={val} onChange={(v) => setVal(v)} />
-}
-
-export const Default = Template.bind({})
-
-Default.args = {
-  name: 'test-date-range',
-}
-
-const minDate = subDays(new Date(), 3)
-const maxDate = addDays(new Date(), 20)
-
-export const WithMinDate = Template.bind({})
-WithMinDate.args = {
-  name: 'test-date-range',
-  minDate,
-}
-
-export const WithMaxDate = Template.bind({})
-WithMaxDate.args = {
-  name: 'test-date-range',
-  maxDate,
-}
-
-export const WithMinAndMaxDates = Template.bind({})
-WithMinAndMaxDates.args = {
-  name: 'test-date-range',
-  minDate,
-  maxDate,
-}

package/src/components/molecules/dateRangePicker/index.styled.ts

@@ -1,36 +0,0 @@
-import { MediaQueries, ThemeProps } from 'src/core'
-import styled from 'styled-components'
-
-export const StyledWrapper = styled.div`
-  display: block;
-  position: relative;
-  width: 270px;
-  input {
-    pointer-events: none;
-    caret-color: transparent;
-  }
-  ${MediaQueries.mbDown} {
-    width: 100%;
-  }
-`
-
-export const StyledCalendarWrapper = styled.div`
-  display: flex;
-  position: absolute;
-  top: 46px;
-  left: 0;
-  width: 684px;
-  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-  filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
-    drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
-    drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-  border-radius: 6px;
-  background-color: white;
-  z-index: 100;
-  padding-bottom: 16px;
-  align-items: stretch;
-  user-select: none;
-  ${MediaQueries.mbDown} {
-    width: 100%;
-  }
-`

package/src/components/molecules/dateRangePicker/index.tsx

@@ -1,103 +0,0 @@
-import React, { useMemo, useRef, useState } from 'react'
-
-import { format, isSameDay } from 'date-fns'
-import {
-  PureInput,
-  Props as PureInputProps,
-} from 'src/components/atoms/pureInput'
-import { useOutsideClick } from 'src/hooks/useOutsideClick'
-
-import calendarIcon from '../../../assets/svg/calendar.svg'
-import { DateRangePickerCalendar } from './calendar'
-import { StyledCalendarWrapper, StyledWrapper } from './index.styled'
-import { DateRangeInterval } from './types'
-
-export type DateRangePickerProps = {
-  value: DateRangeInterval | null
-  onChange: (value: DateRangeInterval | null) => void
-  inputSize?: PureInputProps['size']
-  name?: string
-  minDate?: Date
-  maxDate?: Date
-  className?: string
-}
-
-export function DateRangePicker({
-  inputSize = 'md',
-  name = 'date-range-picker',
-  value,
-  minDate,
-  maxDate,
-  onChange,
-  className,
-}: DateRangePickerProps) {
-  if (!value) {
-    value = { from: null, to: null }
-  }
-
-  const [opened, setOpened] = useState(false)
-
-  const ref = useRef<HTMLInputElement>(null)
-
-  useOutsideClick(ref, () => {
-    setOpened(false)
-  })
-
-  function handleChange(nextValue: DateRangeInterval) {
-    if (onChange) {
-      onChange(nextValue)
-    }
-    setOpened(false)
-  }
-
-  function formatDate(d: Date): string {
-    return format(d, 'dd/MM/yyyy')
-  }
-
-  const fieldValue = useMemo(() => {
-    if (value.from && value.to) {
-      if (isSameDay(value.from, value.to)) {
-        return formatDate(value.from)
-      }
-      return `${formatDate(value.from)} - ${formatDate(value.to)}`
-    }
-    return ''
-  }, [value.from, value.to])
-
-  function renderCalendar() {
-    return (
-      <DateRangePickerCalendar
-        onChange={handleChange}
-        minDate={minDate}
-        maxDate={maxDate}
-      />
-    )
-  }
-
-  return (
-    <StyledWrapper
-      className={[className, opened && 'focused'].filter(Boolean).join(' ')}
-      ref={ref}
-    >
-      <label htmlFor={name}>
-        <PureInput
-          size={inputSize}
-          value={fieldValue}
-          name={name}
-          actionIcon={<img src={calendarIcon} />}
-          autoFocus={false}
-          onFocus={() => setOpened(true)}
-        />
-      </label>
-      {opened ? (
-        <StyledCalendarWrapper
-          onMouseDown={(e) => {
-            e.stopPropagation()
-          }}
-        >
-          {renderCalendar()}
-        </StyledCalendarWrapper>
-      ) : null}
-    </StyledWrapper>
-  )
-}

package/src/components/molecules/dateRangePicker/types.ts

@@ -1,4 +0,0 @@
-export type DateRangeInterval = {
-  from: Date | null
-  to: Date | null
-}

package/src/components/molecules/dateRangePicker/utils.ts

@@ -1,26 +0,0 @@
-import { isBefore } from 'date-fns'
-
-import { DateRangeInterval } from './types'
-
-export function handleClickDay(
-  d: Date,
-  range: DateRangeInterval,
-): DateRangeInterval {
-  if (!range.from && !range.to) {
-    return { ...range, from: d }
-  }
-
-  if (range.from && range.to) {
-    return { from: d, to: null }
-  }
-
-  if (range.from) {
-    if (isBefore(d, range.from)) {
-      return { ...range, from: d }
-    } else {
-      return { ...range, to: d }
-    }
-  }
-
-  return range
-}

package/src/components/molecules/doctorInfo/index.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { DoctorInfo, Props } from './index'
-
-export default {
-  component: DoctorInfo,
-  title: 'Molecules/DoctorInfo',
-}
-
-const Template: Story<Props> = (args) => <DoctorInfo {...args} />
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  name: 'Dr. Monica De Lange',
-  description: 'Dentist in Jansen clinic',
-  image: <img src="//unsplash.it/128" alt="Dr Monica De Lange" />,
-}

package/src/components/molecules/doctorInfo/index.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import { Text } from 'components/atoms'
-import styled from 'styled-components'
-
-type Props = {
-  image: JSX.Element
-  name: string
-  description: string
-  isDescriptionHidden?: boolean
-}
-
-const StyledDoctorInfo = styled.figure`
-  display: flex;
-
-  > img,
-  svg,
-  picture {
-    width: 40px;
-    height: 40px;
-    margin-right: 1rem;
-    border-radius: 6px;
-    object-fit: cover;
-  }
-
-  > figcaption {
-    p + p {
-      margin-top: 2px;
-    }
-  }
-`
-
-const DoctorInfo = ({
-  name,
-  description,
-  image,
-  isDescriptionHidden,
-}: Props) => {
-  return (
-    <StyledDoctorInfo>
-      {image}
-      {!isDescriptionHidden && (
-        <figcaption>
-          <Text size="p4" type="bold">
-            {name}
-          </Text>
-          <Text size="p4">{description}</Text>
-        </figcaption>
-      )}
-    </StyledDoctorInfo>
-  )
-}
-
-export { DoctorInfo }

package/src/components/molecules/dropdown/__snapshots__/index.test.tsx.snap

@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0 {
-  --dropdown-padding: 12px 18px 12px 16px;
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid #d9d9d9;
-  background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat;
-  background-position: right 16px center;
-  border-radius: 6px;
-}
-
-.c0[data-disabled='true'],
-.c0:disabled {
-  background-color: #f2f2f2;
-  cursor: not-allowed;
-}
-
-.c0[data-size='sm'] {
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.c0[data-size='md'] {
-  font-size: 14px;
-  line-height: 21px;
-}
-
-.c0[data-size='lg'] {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.c0[data-has-icons='true'] {
-  border: none;
-  background: #f2f2f2;
-}
-
-.c0[data-has-icons='true'] img,
-.c0[data-has-icons='true'] svg {
-  display: inline-block;
-  max-width: 16px;
-  margin-right: 6px;
-}
-
-.c0[data-has-icons='true'] span {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.c0[data-has-icons='true']:hover {
-  box-shadow: none;
-}
-
-.c0[data-has-icons='true'] > div {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0[data-has-icons='true'] > div::after {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  width: 10px;
-  height: 8px;
-  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  background-repeat: no-repeat;
-  content: '';
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c0:hover {
-  box-shadow: 0 0 2px 2px #91caff;
-}
-
-.c0[data-is-native='true'] {
-  padding: var(--dropdown-padding);
-  line-height: 24px;
-}
-
-.c0[data-is-native='true']:focus {
-  box-shadow: 0px 0px 2px 2px #91caff;
-}
-
-.c1 {
-  padding: var(--dropdown-padding);
-  cursor: pointer;
-}
-
-.c1.with-label {
-  padding-top: 34px;
-  padding-bottom: 12px;
-}
-
-.c1[data-dropdown-open] {
-  padding: 11px 15px 11px 15px;
-  border: 1px solid #2d87f3;
-  border-radius: 6px;
-  box-shadow: 0 0 2px 2px #91caff;
-}
-
-<div
-  class="c0"
-  data-has-icons="true"
-  data-size="lg"
-  id="dropdown1"
-  tabindex="0"
->
-  <div
-    class="c1"
-  >
-    <img
-      src="//unsplash.it/16"
-    />
-     
-    <span>
-      Dropdown
-    </span>
-  </div>
-</div>
-`;