Radio 컴포넌트 (#47)

* Radio 베이스

* Radio style 수정

* 스타일 수정 및 prop 재조정

* 라디오 전체 hover 인식하도록 변경 및 checked 계산 로직 수정

* 테스트 코드 추가

* forwardRef 추가

* Styled interface 위치 수정

* Han, Lloyd 리뷰 반영

* lodash -> lodash-es 로 변경 (Han 리뷰 반영)

Author: jwoo0122

src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,91 @@
+/* External dependencies */
+import React, { useState } from 'react'
+import { withKnobs, text } from '@storybook/addon-knobs'
+
+/* Internal dependencies */
+import { Text } from '../Text'
+import Typography from '../../styling/Typography'
+import { ThemeProvider, LightTheme } from '../../styling/Theme'
+import Radio from './Radio'
+
+export default {
+  title: 'Radio',
+  decorators: [withKnobs],
+}
+
+export const Primary = () => {
+  const value = 1
+
+  return (
+    <ThemeProvider theme={LightTheme}>
+      <div style={{ margin: 10 }}>
+        <Radio
+          watchingValue={value}
+          value={value}
+        >
+          <Text>
+            { text('label', 'hello!') }
+          </Text>
+        </Radio>
+      </div>
+    </ThemeProvider>
+  )
+}
+
+export const Disabled = () => (
+  <ThemeProvider theme={LightTheme}>
+    <Radio disabled>
+      <Text>
+        { text('label', 'hello, world!') }
+      </Text>
+    </Radio>
+  </ThemeProvider>
+)
+
+export const CheckedDisabled = () => {
+  const value = 1
+
+  return (
+    <ThemeProvider theme={LightTheme}>
+      <Radio
+        value={value}
+        watchingValue={value}
+        disabled
+      >
+        <Text>
+          { text('label', 'hello, world!') }
+        </Text>
+      </Radio>
+    </ThemeProvider>
+  )
+}
+
+export const MultiRadio = () => {
+  const [selected, setSelected] = useState(1)
+
+  const options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+  return (
+    <ThemeProvider theme={LightTheme}>
+      <Text typo={Typography.Size24}>
+        selected Option: { selected }
+      </Text>
+
+      {
+        options.map(value => (
+          <Radio
+            key={value}
+            value={value}
+            watchingValue={selected}
+            onClick={v => setSelected(v)}
+            disabled={value >= 8}
+          >
+            <Text>
+              { value }st option
+            </Text>
+          </Radio>
+        ))
+      }
+    </ThemeProvider>
+  )
+}

src/components/Radio/Radio.styled.ts

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/indent, consistent-return */
+/* External dependencies */
+import styled, { css } from 'styled-components'
+
+/* Internal dependencies */
+import RadioProps, { StyledRadioHandleProps } from './Radio.types'
+
+export const StyledRadioWrapper = styled.div<RadioProps>`
+  display: flex;
+  align-items: center;
+  cursor:
+    ${props => {
+      if (props.disabled) { return 'auto' }
+      return 'pointer'
+    }};
+`
+
+const StyledRadioHandleDot = css<StyledRadioHandleProps>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  content: '';
+  background-color:
+    ${props => {
+      if (!props.disabled && !props.checked && props.hovered) { return props.theme?.colors?.handle2 }
+      if (props.checked && props.disabled) { return props.theme?.colors?.handle5 }
+      if (props.checked) { return props.theme?.colors?.handle1 }
+      return 'transparent'
+    }};
+  border-radius: 50%;
+`
+
+export const StyledRadioHandle = styled.div<RadioProps & StyledRadioHandleProps>`
+  box-sizing: border-box;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  margin-right: 9px;
+  border-radius: 50%;
+  border:
+    ${props => {
+      if (props.checked) { return 'none' }
+      return `2px solid ${props.theme?.colors?.border3}`
+    }};
+  background-color:
+    ${props => {
+      if (props.disabled) { return props.theme?.colors?.background3 }
+      if (props.checked) { return props.theme?.colors?.success1 }
+      return props.theme?.colors?.background0
+    }};
+
+  &::after {
+    ${StyledRadioHandleDot};
+  }
+`
+/* eslint-enable @typescript-eslint/indent, consistent-return */

src/components/Radio/Radio.test.tsx

@@ -0,0 +1,57 @@
+/* External dependencies */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+/* Internal dependencies */
+import Colors from '../../styling/Colors'
+import { ThemeProvider, LightTheme } from '../../styling/Theme'
+import Radio, { RADIO_TEST_ID } from './Radio'
+import RadioProps from './Radio.types'
+
+const value = 'text'
+
+describe('Radio test >', () => {
+  let props: RadioProps
+
+  beforeEach(() => {
+    props = {
+      disabled: false,
+      value,
+      watchingValue: '',
+    }
+  })
+
+  const renderRadio = (optionProps?: RadioProps) => render(
+    <ThemeProvider theme={LightTheme}>
+      <Radio {...props} {...optionProps}/>
+    </ThemeProvider>,
+  )
+
+  it('RadioInput has default style', () => {
+    const { getByTestId } = renderRadio()
+
+    const renderedRadio = getByTestId(RADIO_TEST_ID)
+
+    expect(renderedRadio).toHaveStyle('width: 18px;')
+    expect(renderedRadio).toHaveStyle('height: 18px;')
+    expect(renderedRadio).toHaveStyle('border-radius: 50%;')
+    expect(renderedRadio).toHaveStyle(`background-color: ${Colors.Light.background0};`)
+  })
+
+  it('RadioInput has success background, and no border when clicked', () => {
+    const { getByTestId } = renderRadio({ watchingValue: value })
+
+    const renderedRadio = getByTestId(RADIO_TEST_ID)
+
+    expect(renderedRadio).toHaveStyle(`background-color: ${Colors.Light.success1};`)
+    expect(renderedRadio).toHaveStyle('border: none;')
+  })
+
+  it('RadioInput has disable background when disabled', () => {
+    const { getByTestId } = renderRadio({ disabled: true })
+
+    const renderedRadio = getByTestId(RADIO_TEST_ID)
+
+    expect(renderedRadio).toHaveStyle(`background-color: ${Colors.Light.background3};`)
+  })
+})

src/components/Radio/Radio.tsx

@@ -0,0 +1,77 @@
+/* External dependencies */
+import React, {
+  useCallback,
+  useState,
+  useMemo,
+  MouseEvent,
+  forwardRef,
+} from 'react'
+import { isNil } from 'lodash-es'
+
+/* Internal dependencies */
+import {
+  StyledRadioWrapper,
+  StyledRadioHandle,
+} from './Radio.styled'
+import RadioProps from './Radio.types'
+
+export const RADIO_TEST_ID = 'ch-design-system-radio'
+
+function Radio(
+  {
+    as,
+    testId = RADIO_TEST_ID,
+    className,
+    style,
+    dotClassName,
+    watchingValue,
+    value,
+    onClick,
+    disabled = false,
+    children,
+    ...otherProps
+  }: RadioProps,
+  forwardedRef: React.Ref<HTMLElement>,
+) {
+  const [hovered, setHovered] = useState(false)
+
+  const handleClick = useCallback((e: MouseEvent) => {
+    if (!disabled && onClick) {
+      onClick(value, e)
+    }
+  }, [onClick, disabled, value])
+
+  const handleMouseOver = useCallback(() => setHovered(true), [])
+
+  const handleMouseLeave = useCallback(() => setHovered(false), [])
+
+  const checked = useMemo(() => {
+    if (isNil(watchingValue) || isNil(value)) { return false }
+    return watchingValue === value
+  }, [watchingValue, value])
+
+  return (
+    <StyledRadioWrapper
+      ref={forwardedRef}
+      className={className}
+      style={style}
+      disabled={disabled}
+      onClick={handleClick}
+      onMouseEnter={handleMouseOver}
+      onMouseLeave={handleMouseLeave}
+      {...otherProps}
+    >
+      <StyledRadioHandle
+        as={as}
+        data-testid={testId}
+        className={dotClassName}
+        checked={checked}
+        disabled={disabled}
+        hovered={hovered}
+      />
+      { children }
+    </StyledRadioWrapper>
+  )
+}
+
+export default forwardRef(Radio)

src/components/Radio/Radio.types.ts

@@ -0,0 +1,19 @@
+/* External dependencies */
+import { MouseEvent } from 'react'
+
+/* Internal dependencies */
+import { ChildrenComponentProps } from '../../types/ComponentProps'
+
+export default interface RadioProps extends ChildrenComponentProps {
+  dotClassName?: string
+  watchingValue?: any
+  disabled?: boolean
+  value?: any
+  onClick?: (value: any, e: MouseEvent) => void
+}
+
+export interface StyledRadioHandleProps {
+  checked: boolean
+  disabled: boolean
+  hovered: boolean
+}

src/components/Radio/index.ts

@@ -0,0 +1,10 @@
+import Radio from './Radio'
+import type RadioProps from './Radio.types'
+
+export type {
+  RadioProps,
+}
+
+export {
+  Radio,
+}

src/components/Text/Text.tsx

@@ -33,6 +33,4 @@ function Text({
   )
 }
 
-Text.displayName = 'Text'
-
 export default Text

src/index.ts

@@ -3,6 +3,7 @@ export * from './components/Button'
 export * from './components/Icon'
 export * from './components/Switch'
 export * from './components/Text'
+export * from './components/Radio'
 
 /* Layout */
 export * from './layout/GNB'

src/styling/Colors.ts

@@ -8,6 +8,12 @@ export interface Colors {
   background3?: string
   background2?: string
   background1?: string
+  background0?: string
+
+  // Borders
+  border3?: string
+  border2?: string
+  border1?: string
 
   // Success
   success1?: string
@@ -18,6 +24,8 @@ export interface Colors {
   default1Hover?: string
 
   // Handle
+  handle5?: string
+  handle2?: string
   handle1?: string
 
   // Shadow
@@ -32,10 +40,16 @@ export const Light: Colors = {
   background3: Palette.grey300,
   background2: Palette.grey200,
   background1: Palette.grey100,
+  background0: Palette.white,
+  border3: Palette.grey300,
+  border2: Palette.grey200,
+  border1: Palette.grey100,
   success1: Palette.green400,
   success1Hover: Palette.green500,
   default1: Palette.grey300,
   default1Hover: Palette.grey500,
+  handle5: Palette.grey500,
+  handle2: Palette.grey200,
   handle1: Palette.white,
   shadow1: Palette.black15,
   iconBase: Palette.grey700,

src/types/ComponentProps.ts

@@ -4,8 +4,6 @@ import React, { CSSProperties } from 'react'
 /* Internal dependencies */
 import { Extendable } from './utilTypes'
 
-export type ReactChildren = React.ReactNodeArray | React.ReactNode
-
 export interface RenderConfigProps {
   as?: React.ElementType
   testId?: string
@@ -22,6 +20,6 @@ export interface ContentComponentProps<Content = React.ReactNode> extends UIComp
   content?: Content
 }
 
-export interface ChildrenComponentProps<Children = ReactChildren> extends UIComponentProps {
+export interface ChildrenComponentProps<Children = React.ReactNode> extends UIComponentProps {
   children?: Children
 }