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

package/raw/src/components/atoms/pagination/index.tsx

@@ -1,286 +0,0 @@
-import React, { useState, useEffect, useMemo, Fragment } from 'react'
-
-import { formatUrlWithPageParam } from 'misc/utils'
-import { CSSProperties } from 'styled-components'
-
-import {
-  StyledPageBlock,
-  StyledPagination,
-  StyledPaginationBlock,
-} from './index.styled'
-
-export type Props = {
-  pagesAmount: number
-  currentPage: number
-  onChange: (p: number) => void
-  onClick?: (e: Event) => void
-  className?: string
-  style?: CSSProperties
-  href?: string
-  queryPageName?: string
-}
-
-type PropsWithDots = {
-  pagesAmount: number
-  activePage: number
-  handlePageChange: (p: number) => void
-  handleClick: (e: any) => void
-  href?: string
-  queryPageName?: string
-}
-
-const RenderPagiWithDots = ({
-  pagesAmount,
-  activePage,
-  handlePageChange,
-  handleClick,
-  href,
-  queryPageName = 'page',
-}: PropsWithDots) => {
-  const pages = [...Array(pagesAmount)].map((__v, i) => i + 1)
-
-  const [visiblePages, setVisiblePages] = useState<Array<number>>(
-    activePage <= 4
-      ? pages.slice(0, 5)
-      : activePage >= pages.length - 3
-      ? pages.slice(pages.length - 5, pages.length)
-      : pages.slice(activePage - 2, activePage + 1),
-  )
-
-  useEffect(() => {
-    if (activePage <= 4) {
-      setVisiblePages(pages.slice(0, 5))
-    } else if (activePage >= pages.length - 3) {
-      setVisiblePages(pages.slice(pages.length - 5, pages.length))
-    } else {
-      setVisiblePages(pages.slice(activePage - 2, activePage + 1))
-    }
-  }, [activePage])
-
-  return (
-    <Fragment>
-      {activePage > 4 && (
-        <Fragment>
-          <StyledPaginationBlock onClick={() => handlePageChange(1)}>
-            {href ? (
-              <a href={href} onClick={handleClick}>
-                {1}
-              </a>
-            ) : (
-              1
-            )}
-          </StyledPaginationBlock>
-
-          <StyledPaginationBlock>...</StyledPaginationBlock>
-        </Fragment>
-      )}
-
-      {visiblePages.map((i) => (
-        <StyledPaginationBlock
-          key={`${'pagination'}+${i}`}
-          data-page-active={i === activePage || undefined}
-          onClick={() => handlePageChange(i)}
-        >
-          {href ? (
-            <a
-              href={formatUrlWithPageParam(href, i, queryPageName)}
-              onClick={handleClick}
-            >
-              {i}
-            </a>
-          ) : (
-            i
-          )}
-        </StyledPaginationBlock>
-      ))}
-
-      {activePage < pages.length - 3 && (
-        <Fragment>
-          <StyledPaginationBlock>...</StyledPaginationBlock>
-
-          <StyledPaginationBlock onClick={() => handlePageChange(pages.length)}>
-            {href ? (
-              <a
-                href={formatUrlWithPageParam(href, pages.length, queryPageName)}
-                onClick={handleClick}
-              >
-                {pages.length}
-              </a>
-            ) : (
-              pages.length
-            )}
-          </StyledPaginationBlock>
-        </Fragment>
-      )}
-    </Fragment>
-  )
-}
-
-const Pagination = ({
-  className,
-  pagesAmount,
-  currentPage,
-  onChange,
-  onClick,
-  style,
-  href: _href,
-  queryPageName = 'page',
-}: Props) => {
-  const pages = [...Array(pagesAmount)].map((__v, i) => i + 1)
-
-  const [activePage, setActivePage] = useState(currentPage)
-
-  const href = useMemo(() => {
-    // Props `href` is updated from the version 1.8.4 and later. Please change the way to use this props properly
-    //    - To avoid crash app, transform href for the old way and remove the part &page=
-    //       /care/ho-chi-minh/hospital/da-khoa/&page=
-    //    -> /care/ho-chi-minh/hospital/da-khoa/
-    if (_href && _href.endsWith('&page=')) {
-      return _href.replace('&page=', '')
-    }
-    return _href
-  }, [_href])
-
-  const totalArray = pagesAmount - 1
-
-  const handlePageChange = (p: number) => {
-    if (p <= pagesAmount && p > 0) {
-      setActivePage(p)
-      onChange(p)
-    }
-  }
-
-  const handleClick = (e) => {
-    onClick && onClick(e)
-  }
-
-  useEffect(() => {
-    setActivePage(currentPage)
-  }, [currentPage])
-
-  return (
-    <StyledPagination className={className} style={style}>
-      <StyledPageBlock
-        className="prev-page"
-        onClick={() => handlePageChange(activePage - 1)}
-        data-last-page={activePage === 1 || undefined}
-      >
-        {href ? (
-          <a
-            href={formatUrlWithPageParam(href, activePage, queryPageName)}
-            onClick={handleClick}
-          >
-            <svg
-              width="7"
-              height="10"
-              viewBox="0 0 7 10"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M5.5 9L1.5 5L5.5 1"
-                stroke="#2D87F3"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </a>
-        ) : (
-          <svg
-            width="7"
-            height="10"
-            viewBox="0 0 7 10"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5.5 9L1.5 5L5.5 1"
-              stroke="#2D87F3"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        )}
-      </StyledPageBlock>
-
-      {pages.length > 8 ? (
-        <RenderPagiWithDots
-          pagesAmount={pagesAmount}
-          activePage={activePage}
-          handlePageChange={handlePageChange}
-          handleClick={handleClick}
-          href={href}
-          queryPageName={queryPageName}
-        />
-      ) : (
-        pages.map((i) => (
-          <StyledPaginationBlock
-            key={`${'pagination'}+${i}`}
-            data-page-active={i === activePage || undefined}
-            onClick={() => handlePageChange(i)}
-          >
-            {href ? (
-              <a
-                href={formatUrlWithPageParam(href, i, queryPageName)}
-                onClick={handleClick}
-              >
-                {i}
-              </a>
-            ) : (
-              i
-            )}
-          </StyledPaginationBlock>
-        ))
-      )}
-
-      <StyledPageBlock
-        className="next-page"
-        onClick={() => handlePageChange(activePage + 1)}
-        data-last-page={activePage === totalArray + 1 || undefined}
-      >
-        {href ? (
-          <a
-            href={formatUrlWithPageParam(href, activePage, queryPageName)}
-            onClick={handleClick}
-          >
-            <svg
-              width="7"
-              height="10"
-              viewBox="0 0 7 10"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M1.5 9L5.5 5L1.5 1"
-                stroke="#2D87F3"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </a>
-        ) : (
-          <svg
-            width="7"
-            height="10"
-            viewBox="0 0 7 10"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M1.5 9L5.5 5L1.5 1"
-              stroke="#2D87F3"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        )}
-      </StyledPageBlock>
-    </StyledPagination>
-  )
-}
-
-export { Pagination }

package/raw/src/components/atoms/progress/index.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Progress, Props } from './index'
-
-export default {
-  title: 'Atoms/Progress',
-  component: Progress,
-}
-
-const Template: Story<Props> = (args) => <Progress {...args} />
-
-const SharedParameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=2982%3A383525',
-  },
-  docs: {
-    description: {
-      component: 'Progress used for rating.',
-    },
-  },
-}
-
-export const At0Percent = Template.bind({})
-At0Percent.args = {
-  percent: 0,
-}
-SharedParameters
-
-export const At40Percent = Template.bind({})
-At40Percent.args = {
-  percent: 40,
-  wrapperProps: {
-    display: {
-      padding: 2,
-    },
-    customDataProps: {
-      style: {
-        maxWidth: 200,
-      },
-    },
-  },
-}
-
-export const At100Percent = Template.bind({})
-At100Percent.args = {
-  percent: 100,
-  wrapperProps: {
-    display: {
-      padding: 2,
-    },
-  },
-}

package/raw/src/components/atoms/progress/index.styled.tsx

@@ -1,30 +0,0 @@
-import { ThemeProps } from 'src/misc/theme'
-import styled from 'styled-components'
-
-export const StyledProgress = styled.div`
-  height: 4px;
-  position: relative;
-
-  &:before {
-    content: '';
-    border-radius: 2px;
-    background-color: ${(props: ThemeProps) => props.theme.colors.yellow400};
-    opacity: 0.15;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  &:after {
-    content: '';
-    border-radius: 2px;
-    background-color: ${(props: ThemeProps) => props.theme.colors.yellow400};
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: calc(var(--progress) * 1%);
-  }
-`

package/raw/src/components/atoms/progress/index.tsx

@@ -1,29 +0,0 @@
-import React, { CSSProperties } from 'react'
-
-import { StyledProgress } from './index.styled'
-
-export type Props = {
-  /**
-   * percent of progress
-   */
-  percent: number
-  /**
-   * extending style
-   */
-  style?: CSSProperties
-}
-
-const Progress = ({ percent, style }: Props) => {
-  return (
-    <StyledProgress
-      style={
-        {
-          '--progress': percent,
-          ...style,
-        } as CSSProperties
-      }
-    />
-  )
-}
-
-export { Progress }

package/raw/src/components/atoms/pureInput/__snapshots__/index.test.tsx.snap

@@ -1,135 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c1[data-size='label1'] {
-  font-size: 14px;
-  line-height: 22px;
-}
-
-.c1[data-size='label2'] {
-  font-size: 13px;
-  line-height: 19px;
-}
-
-.c0 {
-  position: relative;
-  width: 100%;
-}
-
-.c0[data-has-error] input {
-  border-color: #e64728;
-}
-
-.c0 input {
-  width: 100%;
-  padding: 12px 16px;
-  border: solid 1px #d9d9d9;
-  border-radius: 6px;
-}
-
-.c0 input:active,
-.c0 input:focus,
-.focused .c0 input {
-  border-color: #2d87f3;
-  box-shadow: 0px 0px 2px 2px #91caff;
-}
-
-.c0 input:disabled {
-  background-color: #f2f2f2;
-  cursor: not-allowed;
-}
-
-.c0[data-has-action-icon] input {
-  padding: 12px 48px 12px 16px;
-}
-
-.c0[data-has-display-icon] input {
-  padding: 12px 16px 12px 48px;
-}
-
-.c0[data-has-action-icon][data-has-display-icon] input {
-  padding: 12px 48px;
-}
-
-.c0[data-size='lg'] input {
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.c0[data-size='md'] input {
-  font-weight: 400;
-}
-
-.c0[data-size='sm'] input {
-  font-weight: 400;
-}
-
-@media (max-width:767px) {
-  .c0[data-size='lg'] input {
-    font-size: 22px;
-    line-height: 1.2;
-  }
-}
-
-@media (min-width:768px) {
-  .c0[data-size='lg'] input {
-    font-size: 26px;
-    line-height: 1.2;
-  }
-}
-
-@media (max-width:767px) {
-  .c0[data-size='md'] input {
-    font-size: 14px;
-    line-height: 1.2;
-  }
-}
-
-@media (min-width:768px) {
-  .c0[data-size='md'] input {
-    font-size: 16px;
-    line-height: 1.2;
-  }
-}
-
-@media (max-width:767px) {
-  .c0[data-size='sm'] input {
-    font-size: 13px;
-    line-height: 1.5;
-  }
-}
-
-@media (min-width:768px) {
-  .c0[data-size='sm'] input {
-    font-size: 13px;
-    line-height: 1.5;
-  }
-}
-
-<div
-  class="c0"
-  data-size="md"
->
-  <label
-    class="c1 inputLabel"
-    data-size="label2"
-    for="test-input"
-  >
-    test input
-  </label>
-  <div
-    style="position: relative;"
-  >
-    <input
-      aria-label="text"
-      autocomplete="off"
-      id="test-input"
-      inputmode="text"
-      name="test-input"
-      pattern=".*"
-      type="text"
-      value="test"
-    />
-  </div>
-</div>
-`;

package/raw/src/components/atoms/pureInput/delete.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L8 6.58579L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L9.41421 8L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3166 12.0976 10.6834 12.0976 10.2929 11.7071L8 9.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L6.58579 8L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#BFBFBF"/>
-</svg>

package/raw/src/components/atoms/pureInput/index.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-import { debounce } from 'lodash'
-
-import { PureInput, Props } from '.'
-import DeleteIcon from './delete.svg'
-
-export default {
-  component: PureInput,
-  title: 'Atoms/PureInput',
-}
-
-const Template: Story<Props> = (args) => (
-  <PureInput {...args} onChange={debounce((v) => console.log(v), 300)} />
-)
-
-export const Normal = Template.bind({})
-Normal.args = {
-  name: 'normal',
-  label: 'Label',
-  placeholder: 'Placeholder',
-  type: 'search',
-}
-
-export const NoLabel = Template.bind({})
-NoLabel.args = {
-  name: 'nolabel',
-  placeholder: 'Placeholder',
-}
-
-export const WithLeftIcon = Template.bind({})
-WithLeftIcon.args = {
-  name: 'withlefticon',
-  label: 'Label',
-  placeholder: 'Placeholder',
-  displayIcon: <img src={DeleteIcon} />,
-}
-
-export const WithRightIcon = Template.bind({})
-WithRightIcon.args = {
-  name: 'withrighticon',
-  label: 'Label',
-  placeholder: 'Placeholder',
-  actionIcon: <img src={DeleteIcon} />,
-}
-
-export const WithErrorMessage = Template.bind({})
-WithErrorMessage.args = {
-  name: 'witherrormessage',
-  label: 'Label',
-  placeholder: 'Placeholder',
-  errorMessage: 'Error message',
-}

package/raw/src/components/atoms/pureInput/index.styled.tsx

@@ -1,123 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledInput = styled.div`
-  position: relative;
-  width: 100%;
-
-  &[data-has-error] {
-    input {
-      border-color: ${(props: ThemeProps) => props.theme.colors.red700};
-    }
-  }
-
-  input {
-    width: 100%;
-    padding: 12px 16px;
-    border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray200};
-    border-radius: 6px;
-
-    &:active,
-    &:focus,
-    .focused & {
-      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px
-        ${(props: ThemeProps) => props.theme.colors.blue200};
-    }
-
-    &:disabled {
-      background-color: ${(props: ThemeProps) => props.theme.colors.gray100};
-      cursor: not-allowed;
-    }
-  }
-
-  &[data-has-action-icon] {
-    input {
-      padding: 12px 48px 12px 16px;
-    }
-  }
-  &[data-has-display-icon] {
-    input {
-      padding: 12px 16px 12px 48px;
-    }
-  }
-
-  &[data-has-action-icon][data-has-display-icon] {
-    input {
-      padding: 12px 48px;
-    }
-  }
-
-  &[data-size='lg'] {
-    input {
-      font-size: 16px;
-      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-      ${MediaQueries.mbDown} {
-        font-size: 22px;
-        line-height: 1.2;
-      }
-
-      ${MediaQueries.mbUp} {
-        font-size: 26px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='md'] {
-    input {
-      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-      ${MediaQueries.mbDown} {
-        font-size: 14px;
-        line-height: 1.2;
-      }
-
-      ${MediaQueries.mbUp} {
-        font-size: 16px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='sm'] {
-    input {
-      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-      ${MediaQueries.mbDown} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-
-      ${MediaQueries.mbUp} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-    }
-  }
-`
-export const StyledInputLabel = styled.label`
-  display: inline-block;
-  margin-bottom: 4px;
-  color: ${(props: ThemeProps) => props.theme.colors.gray600};
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-`
-
-export const StyledErrorLabel = styled.label`
-  color: ${(props: ThemeProps) => props.theme.colors.red700};
-  font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-`
-
-export const StyledActionIcon = styled.div`
-  position: absolute;
-  top: 50%;
-  right: 16px;
-  display: inline-flex;
-  cursor: pointer;
-  transform: translateY(-50%);
-`
-export const StyledDisplayIcon = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 16px;
-  display: inline-flex;
-  cursor: default;
-  transform: translateY(-50%);
-`