@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

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

@@ -0,0 +1,247 @@
+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/raw/src/components/molecules/dateRangePicker/index.stories.tsx

@@ -0,0 +1,45 @@
+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/raw/src/components/molecules/dateRangePicker/index.styled.ts

@@ -0,0 +1,36 @@
+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/raw/src/components/molecules/dateRangePicker/index.tsx

@@ -0,0 +1,103 @@
+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/raw/src/components/molecules/dateRangePicker/types.ts

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

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

@@ -0,0 +1,26 @@
+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/raw/src/components/molecules/doctorInfo/index.stories.tsx

@@ -0,0 +1,20 @@
+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/raw/src/components/molecules/doctorInfo/index.tsx

@@ -0,0 +1,54 @@
+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/raw/src/components/molecules/dropdown/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,133 @@
+// 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>
+`;