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

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

@@ -1,29 +0,0 @@
-import React from 'react'
-
-import { render, cleanup } from '@testing-library/react'
-import 'jest-styled-components'
-
-import { PureInput } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const tag = render(
-    <MockTheme>
-      <PureInput
-        defaultValue="test"
-        name="test-input"
-        size="md"
-        label="test input"
-        onChange={(v) => console.log(v)}
-      />
-    </MockTheme>,
-  )
-
-  const self = tag.container.firstChild
-
-  expect(self).toMatchSnapshot()
-  expect(self).toContainHTML('test input')
-  expect(self).toHaveAttribute('data-size', 'md')
-})

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

@@ -1,162 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { InputHTMLAttributes, useState } from 'react'
-
-import { Label } from '../label'
-import {
-  StyledInput,
-  StyledErrorLabel,
-  StyledActionIcon,
-  StyledDisplayIcon,
-} from './index.styled'
-
-export type CustomInputProps = {
-  size: 'lg' | 'md' | 'sm'
-  autoComplete?: 'on' | 'off'
-  onChange?: (v: string) => void
-  errorMessage?: string
-  actionIcon?: JSX.Element
-  onActionClick?: () => void
-  isDeleteAction?: boolean
-  displayIcon?: JSX.Element
-  label?: string | JSX.Element
-  isDisabled?: boolean
-  CustomInput?: JSX.Element
-  type?:
-    | 'none'
-    | 'text'
-    | 'tel'
-    | 'url'
-    | 'email'
-    | 'numeric'
-    | 'decimal'
-    | 'search'
-    | 'number'
-  isNumerousKeyboard?: boolean
-  enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint']
-  nativeOnChange?: React.ChangeEventHandler<HTMLInputElement>
-}
-
-export type Props = Omit<
-  React.DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  >,
-  'size' | 'autoComplete' | 'type' | 'onChange' | 'enterKeyHint'
-> &
-  CustomInputProps
-
-const PureInput = React.forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      name,
-      errorMessage,
-      autoComplete = 'off',
-      defaultValue,
-      actionIcon: ActionIcon,
-      displayIcon: DisplayIcon,
-      isDeleteAction,
-      onActionClick,
-      label,
-      placeholder,
-      className,
-      onChange,
-      onKeyPress,
-      isDisabled,
-      CustomInput,
-      size,
-      style,
-      autoFocus = true,
-      type = 'text',
-      isNumerousKeyboard = false,
-      onFocus,
-      enterKeyHint,
-      nativeOnChange,
-      ...other
-    },
-    ref,
-  ) => {
-    const [localValue, setLocalValue] = useState(defaultValue)
-
-    const handleOnChange = (v: string) => {
-      setLocalValue(v)
-      onChange(v)
-    }
-
-    const handleOnActionClick = () => {
-      if (isDeleteAction) {
-        setLocalValue('')
-        ;(ref as any).current?.focus()
-      }
-
-      onActionClick && onActionClick()
-    }
-
-    return (
-      <StyledInput
-        data-size={size}
-        className={className}
-        data-has-action-icon={!!ActionIcon || undefined}
-        data-has-display-icon={!!DisplayIcon || undefined}
-        data-has-error={(errorMessage && errorMessage.length > 0) || undefined}
-        style={style}
-      >
-        {label && (
-          <Label size="label2" htmlFor={name} className="inputLabel">
-            {label}
-          </Label>
-        )}
-        <div style={{ position: 'relative' }}>
-          {CustomInput ? (
-            CustomInput
-          ) : (
-            <input
-              id={name}
-              name={name}
-              placeholder={placeholder}
-              onChange={
-                nativeOnChange ?? ((e) => handleOnChange(e.target.value))
-              }
-              onKeyPress={onKeyPress}
-              type={type}
-              aria-label={type}
-              disabled={isDisabled}
-              value={localValue}
-              autoComplete={autoComplete}
-              ref={ref}
-              autoFocus={autoFocus}
-              inputMode={
-                isNumerousKeyboard || type === 'number' ? 'numeric' : type
-              }
-              pattern={isNumerousKeyboard ? '[0-9]*' : '.*'}
-              onFocus={onFocus}
-              enterKeyHint={enterKeyHint}
-              {...other}
-            />
-          )}
-          {DisplayIcon && (
-            <StyledDisplayIcon className="displayIcon">
-              {DisplayIcon}
-            </StyledDisplayIcon>
-          )}
-          {ActionIcon && (
-            <StyledActionIcon
-              className="actionIcon"
-              onClick={handleOnActionClick}
-            >
-              {ActionIcon}
-            </StyledActionIcon>
-          )}
-        </div>
-        {errorMessage && errorMessage.length > 0 && (
-          <StyledErrorLabel className="errorLabel">
-            {errorMessage}
-          </StyledErrorLabel>
-        )}
-      </StyledInput>
-    )
-  },
-)
-
-PureInput.displayName = 'PureInput'
-
-export { PureInput }

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

@@ -1,163 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it renders 1`] = `
-.c0[data-type='circle'] {
-  position: relative;
-  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;
-  cursor: pointer;
-}
-
-.c0[data-type='circle'] input {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  border: solid 1px #737373;
-  margin-right: 8px;
-  border-radius: 100%;
-  cursor: inherit;
-  -webkit-transition: background 0.4s,border-color 0.4s,box-shadow 0.4s;
-  transition: background 0.4s,border-color 0.4s,box-shadow 0.4s;
-}
-
-.c0[data-type='circle'] input:hover,
-.c0[data-type='circle'] input:active {
-  border-color: #2d87f3;
-  box-shadow: 0 0 2px 2px #2d87f3;
-}
-
-.c0[data-type='circle'] input:checked {
-  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;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  border-color: #2d87f3;
-}
-
-.c0[data-type='circle'] input:checked:after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 14px;
-  height: 14px;
-  background-color: #2d87f3;
-  border-radius: 50%;
-  content: '';
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-.c0[data-type='circle'] label {
-  width: calc(100% - 24px);
-  cursor: inherit;
-  font-weight: 400;
-}
-
-.c0[data-type='circle'][data-disabled='true'] {
-  color: #bfbfbf;
-  cursor: not-allowed;
-}
-
-.c0[data-type='circle'][data-disabled='true'] input {
-  border-color: #bfbfbf;
-}
-
-.c0[data-type='circle'][data-disabled='true'] input:hover {
-  border-color: #bfbfbf;
-  box-shadow: none;
-}
-
-.c0[data-type='rectangle'] input {
-  display: none;
-}
-
-.c0[data-type='rectangle'] input:checked ~ label {
-  border-color: #2d87f3;
-  background-color: #2d87f3;
-  color: #fff;
-  font-weight: 700;
-}
-
-.c0[data-type='rectangle'] label {
-  display: inline-block;
-  width: auto;
-  box-sizing: border-box;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  border: solid 1px #bfbfbf;
-  border-radius: 6px;
-  color: #262626;
-  cursor: pointer;
-  font-weight: 400;
-  text-align: center;
-}
-
-.c0[data-type='rectangle'] label:hover,
-.c0[data-type='rectangle'] label:active {
-  border-color: #2d87f3;
-}
-
-.c0[data-type='rectangle'][data-disabled='true'] input {
-  cursor: not-allowed;
-}
-
-.c0[data-type='rectangle'][data-disabled='true'] label {
-  color: #bfbfbf;
-  cursor: not-allowed;
-}
-
-.c0[data-type='rectangle'][data-disabled='true'] label:hover {
-  border-color: #bfbfbf;
-}
-
-.c0[data-type='rectangle'][data-size='small'] label {
-  height: 32px;
-  padding: 6px 12px;
-  font-size: 13px;
-}
-
-.c0[data-type='rectangle'][data-size='large'] label {
-  height: 48px;
-  padding: 13px 16px;
-  font-size: 14px;
-}
-
-<div
-  class="c0"
-  data-disabled="false"
-  data-size="small"
-  data-type="circle"
->
-  <input
-    checked=""
-    id="radio-abc"
-    name="radio"
-    type="radio"
-    value="abc"
-  />
-  <label
-    for="radio-abc"
-  >
-    radio
-  </label>
-</div>
-`;

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

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { Props, Radio } from '.'
-
-export default {
-  component: Radio,
-  title: 'Atoms/Radio',
-}
-
-const Template: Story<Props> = (args) => <Radio {...args} />
-
-export const SelectedCircle = Template.bind({})
-
-SelectedCircle.args = {
-  type: 'circle',
-  name: 'radio',
-  label: 'radio',
-  checked: true,
-}
-
-export const UnselectedCircle = Template.bind({})
-
-UnselectedCircle.args = {
-  type: 'circle',
-  name: 'radio',
-  label: 'radio',
-  checked: false,
-}
-
-export const SelectedRectangle = Template.bind({})
-
-SelectedRectangle.args = {
-  type: 'rectangle',
-  name: 'radio',
-  label: 'radio',
-  checked: true,
-}
-
-export const UnselectedRectangle = Template.bind({})
-
-UnselectedRectangle.args = {
-  type: 'rectangle',
-  name: 'radio',
-  label: 'radio',
-  checked: false,
-}

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

@@ -1,133 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledRadio = styled.div`
-  &[data-type='circle'] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    input {
-      position: relative;
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray500};
-      margin-right: 8px;
-      border-radius: 100%;
-      cursor: inherit;
-      transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
-
-      &:hover,
-      &:active {
-        border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-        box-shadow: 0 0 2px 2px
-          ${(props: ThemeProps) => props.theme.colors.blue600};
-      }
-
-      &:checked {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-        &:after {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 14px;
-          height: 14px;
-          //left: 3px;
-          //position: absolute;
-          //top: 4px;
-          background-color: ${(props: ThemeProps) =>
-            props.theme.colors.primaryBase};
-          border-radius: 50%;
-          content: '';
-          transform: translate(-50%, -50%);
-        }
-      }
-    }
-
-    label {
-      width: calc(100% - 24px);
-      cursor: inherit;
-      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-    }
-
-    &[data-disabled='true'] {
-      color: ${(props: ThemeProps) => props.theme.colors.gray300};
-      cursor: not-allowed;
-      input {
-        border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
-
-        &:hover {
-          border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
-          box-shadow: none;
-        }
-      }
-    }
-  }
-
-  &[data-type='rectangle'] {
-    input {
-      display: none;
-
-      &:checked ~ label {
-        border-color: ${(props: ThemeProps) => props.theme.colors.blue600};
-        background-color: ${(props: ThemeProps) => props.theme.colors.blue600};
-        color: ${(props: ThemeProps) => props.theme.colors.white};
-        font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};
-      }
-    }
-
-    label {
-      display: inline-block;
-      width: auto;
-      box-sizing: border-box;
-      flex-shrink: 0;
-      border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray300};
-      border-radius: 6px;
-      color: ${(props: ThemeProps) => props.theme.colors.gray800};
-      cursor: pointer;
-      font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-      text-align: center;
-
-      &:hover,
-      &:active {
-        border-color: ${(props: ThemeProps) => props.theme.colors.blue600};
-      }
-    }
-
-    &[data-disabled='true'] {
-      input {
-        cursor: not-allowed;
-      }
-
-      label {
-        color: ${(props: ThemeProps) => props.theme.colors.gray300};
-        cursor: not-allowed;
-
-        &:hover {
-          border-color: ${(props: ThemeProps) => props.theme.colors.gray300};
-        }
-      }
-    }
-
-    &[data-size='small'] {
-      label {
-        height: 32px;
-        padding: 6px 12px;
-        font-size: 13px;
-      }
-    }
-
-    &[data-size='large'] {
-      label {
-        height: 48px;
-        padding: 13px 16px;
-        font-size: 14px;
-      }
-    }
-  }
-`

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

@@ -1,31 +0,0 @@
-import 'jest-styled-components'
-
-import React from 'react'
-
-import { cleanup, render } from '@testing-library/react'
-
-import { Radio } from '.'
-import MockTheme from '../../../misc/mockTheme'
-
-afterEach(cleanup)
-
-test('it renders', () => {
-  const radio = render(
-    <MockTheme>
-      <Radio
-        type="circle"
-        onChange={() => console.log('radio')}
-        value="abc"
-        name="radio"
-        label="radio"
-        checked
-      ></Radio>
-    </MockTheme>,
-  )
-
-  const self = radio.container.firstChild
-
-  expect(self).toMatchSnapshot()
-
-  expect(self).toHaveAttribute('data-disabled', 'false')
-})

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

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { StyledRadio } from './index.styled'
-
-export type Props = {
-  type: 'circle' | 'rectangle'
-  size?: 'small' | 'large'
-  label: string
-  name: string
-  value: string
-  checked?: boolean
-  className?: string
-  isDisabled?: boolean
-  onChange: (v: string) => void
-  dataEventCategory?: string
-  dataEventAction?: string
-  dataEventLabel?: string
-}
-
-const Radio = ({
-  type,
-  size = 'small',
-  label,
-  name,
-  checked,
-  value,
-  className,
-  isDisabled = false,
-  onChange,
-  dataEventCategory,
-  dataEventAction,
-  dataEventLabel,
-}: Props) => {
-  const isHasTracking =
-    !!dataEventAction && !!dataEventCategory && !!dataEventLabel
-  const trackingProps = isHasTracking
-    ? {
-        'data-event-category': dataEventCategory,
-        'data-event-action': dataEventAction,
-        'data-event-label': dataEventLabel,
-      }
-    : {}
-  return (
-    <StyledRadio
-      data-disabled={isDisabled}
-      className={className}
-      data-type={type}
-      data-size={size}
-    >
-      <input
-        type="radio"
-        checked={checked}
-        name={name}
-        id={`${name}-${value}`}
-        value={value}
-        onChange={() => onChange(value)}
-        {...trackingProps}
-      />
-      <label htmlFor={`${name}-${value}`} {...trackingProps}>
-        {label}
-      </label>
-    </StyledRadio>
-  )
-}
-
-export { Radio }

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

@@ -1,71 +0,0 @@
-import React, { useState } from 'react'
-
-import { action } from '@storybook/addon-actions'
-import { Story } from '@storybook/react/types-6-0'
-
-import { RateStars, Props } from './index'
-
-export default {
-  title: 'Atoms/RateStars',
-  component: RateStars,
-}
-
-const Template: Story<Props> = (args) => <RateStars {...args} />
-
-const TemplateSelectable: Story<Props> = (args) => {
-  const [stars, setStars] = useState(args.star || 0)
-  return <RateStars {...args} star={stars} onSelect={setStars} />
-}
-
-const SharedParameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/oC0v0apXhnjTuqI2FrL2ic/E-Shopping?node-id=2982%3A383525',
-  },
-  docs: {
-    description: {
-      component: 'Rate',
-    },
-  },
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  star: 1,
-  style: {
-    margin: 20,
-  },
-}
-Default.parameters = SharedParameters
-
-export const NotShowEmptyStars = Template.bind({})
-NotShowEmptyStars.args = {
-  star: 2,
-  hideEmptyStars: true,
-  style: {
-    margin: 20,
-  },
-}
-NotShowEmptyStars.parameters = SharedParameters
-
-export const Selectable = TemplateSelectable.bind({})
-Selectable.args = {
-  star: 1,
-  onSelect: action('selected'),
-  style: {
-    margin: 20,
-  },
-}
-Selectable.parameters = SharedParameters
-
-export const TonsOfStars = TemplateSelectable.bind({})
-TonsOfStars.args = {
-  size: 40,
-  star: 1,
-  totalStars: 1000,
-  onSelect: action('selected'),
-  style: {
-    margin: 20,
-  },
-}
-TonsOfStars.parameters = SharedParameters