From 40b8ad7f3101b788f8a8c8da2e276abad5247554 Mon Sep 17 00:00:00 2001
From: nabeliwo <hiroki.c.watanabe@gmail.com>
Date: Wed, 6 Nov 2019 19:52:25 +0900
Subject: [PATCH 1/6] refactor: Clean the code

---
 src/components/Base/Base.tsx | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/components/Base/Base.tsx b/src/components/Base/Base.tsx
index 190e7f1629..5cd42bac96 100644
--- a/src/components/Base/Base.tsx
+++ b/src/components/Base/Base.tsx
@@ -1,15 +1,12 @@
-import * as React from 'react'
+import React, { FC } from 'react'
 import styled, { css } from 'styled-components'
 
-type Radius = 's' | 'm'
-
-interface Props {
-  radius?: Radius
-  children?: React.ReactNode
+type Props = {
+  radius?: 's' | 'm'
   className?: string
 }
 
-const BaseComponent: React.FC<Props> = ({ radius = 'm', children, className = '' }) => {
+export const Base: FC<Props> = ({ radius = 'm', className = '', children }) => {
   const radiusMap = {
     s: '6px',
     m: '8px',
@@ -22,18 +19,12 @@ const BaseComponent: React.FC<Props> = ({ radius = 'm', children, className = ''
   )
 }
 
-interface WrapperProps {
-  radius: string
-}
-
-const Wrapper = styled.div`
-  ${({ radius }: WrapperProps) => {
+const Wrapper = styled.div<{ radius: string }>`
+  ${({ radius }) => {
     return css`
+      overflow: hidden;
       border-radius: ${radius};
       box-shadow: rgba(51, 51, 51, 0.3) 1px 1px 4px 0;
-      overflow: hidden;
     `
   }}
 `
-
-export const Base = BaseComponent

From 497e698a5596b8d1379804e53be32653a39ce3c7 Mon Sep 17 00:00:00 2001
From: nabeliwo <hiroki.c.watanabe@gmail.com>
Date: Wed, 6 Nov 2019 19:53:15 +0900
Subject: [PATCH 2/6] style: Specify background-color

---
 src/components/Base/Base.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Base/Base.tsx b/src/components/Base/Base.tsx
index 5cd42bac96..bbb8ac4ff5 100644
--- a/src/components/Base/Base.tsx
+++ b/src/components/Base/Base.tsx
@@ -25,6 +25,7 @@ const Wrapper = styled.div<{ radius: string }>`
       overflow: hidden;
       border-radius: ${radius};
       box-shadow: rgba(51, 51, 51, 0.3) 1px 1px 4px 0;
+      background-color: #fff;
     `
   }}
 `

From ad51ded03636e94e24d4a8981314d27e485bf779 Mon Sep 17 00:00:00 2001
From: nabeliwo <hiroki.c.watanabe@gmail.com>
Date: Wed, 6 Nov 2019 19:57:54 +0900
Subject: [PATCH 3/6] docs: Update stories

---
 src/components/Base/Base.stories.tsx | 30 ++++++++++++++++------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/Base/Base.stories.tsx b/src/components/Base/Base.stories.tsx
index 2804a4fd08..950f670eb7 100644
--- a/src/components/Base/Base.stories.tsx
+++ b/src/components/Base/Base.stories.tsx
@@ -8,31 +8,35 @@ storiesOf('Base', module).add('all', () => (
   <List>
     <li>
       <Base radius="s">
-        <Txt>radius s</Txt>
+        <Txt>
+          If radius props is specified as <Bold>s</Bold>, border-radius becomes <Bold>6px</Bold>.
+        </Txt>
       </Base>
     </li>
     <li>
       <Base radius="m">
-        <Txt>radius m</Txt>
+        <Txt>
+          If radius props is specified as <Bold>m</Bold>, border-radius becomes <Bold>8px</Bold>.
+        </Txt>
       </Base>
     </li>
-    <li>
-      <CustomBase radius="m">
-        <Txt>custom base</Txt>
-      </CustomBase>
-    </li>
   </List>
 ))
 
 const List = styled.ul`
-  padding: 8px 24px;
+  margin: 0;
+  padding: 24px;
+  background-color: #eee;
   list-style: none;
-`
 
+  & > li:not(:first-child) {
+    margin-top: 24px;
+  }
+`
 const Txt = styled.p`
-  padding: 8px;
+  margin: 0;
+  padding: 24px;
 `
-
-const CustomBase = styled(Base)`
-  border: solid 1px;
+const Bold = styled.span`
+  font-weight: bold;
 `

From 51985a1c82bcb15dd02294dc5a51971e35857a00 Mon Sep 17 00:00:00 2001
From: nabeliwo <hiroki.c.watanabe@gmail.com>
Date: Wed, 6 Nov 2019 20:01:20 +0900
Subject: [PATCH 4/6] docs: Add README.md

---
 src/components/Base/README.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/components/Base/README.md

diff --git a/src/components/Base/README.md b/src/components/Base/README.md
new file mode 100644
index 0000000000..b19ffa202d
--- /dev/null
+++ b/src/components/Base/README.md
@@ -0,0 +1,13 @@
+# Base
+
+```tsx
+import { Base } from 'smarthr-ui'
+
+<Base radius="m">text</Base>
+```
+
+## props
+
+| Name   | Required | Type                           | DefaultValue | Description         |
+| ------ | -------- | ------------------------------ | ------------ | ------------------- |
+| radius | -        | **string** <br> 's' &#124; 'm' | 'm'          | border-radius size. |

From 47fe111f0253845c9c2bc404eddaf45d11dde22d Mon Sep 17 00:00:00 2001
From: nabeliwo <hiroki.c.watanabe@gmail.com>
Date: Wed, 6 Nov 2019 20:25:44 +0900
Subject: [PATCH 5/6] fix: Add ref props

---
 src/components/Base/Base.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/Base/Base.tsx b/src/components/Base/Base.tsx
index bbb8ac4ff5..1b76a7ed7a 100644
--- a/src/components/Base/Base.tsx
+++ b/src/components/Base/Base.tsx
@@ -1,28 +1,23 @@
-import React, { FC } from 'react'
+import React, { FC, Ref } from 'react'
 import styled, { css } from 'styled-components'
 
-type Props = {
+type BaseProps = {
   radius?: 's' | 'm'
   className?: string
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Base: FC<Props> = ({ radius = 'm', className = '', children }) => {
+export const Base: FC<BaseProps> = ({ radius = 'm', ...props }) => {
   const radiusMap = {
     s: '6px',
     m: '8px',
   }
-
-  return (
-    <Wrapper radius={radiusMap[radius]} className={className}>
-      {children}
-    </Wrapper>
-  )
+  return <Wrapper radius={radiusMap[radius]} {...props} />
 }
 
 const Wrapper = styled.div<{ radius: string }>`
   ${({ radius }) => {
     return css`
-      overflow: hidden;
       border-radius: ${radius};
       box-shadow: rgba(51, 51, 51, 0.3) 1px 1px 4px 0;
       background-color: #fff;

From f2ab9a9008d8fff07df8df1bb3000ea44f8e7a95 Mon Sep 17 00:00:00 2001
From: nabeliwo <hiroki.c.watanabe@gmail.com>
Date: Thu, 7 Nov 2019 11:35:30 +0900
Subject: [PATCH 6/6] fix: use forwardRef

---
 src/components/Base/Base.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Base/Base.tsx b/src/components/Base/Base.tsx
index 1b76a7ed7a..cd5155be6f 100644
--- a/src/components/Base/Base.tsx
+++ b/src/components/Base/Base.tsx
@@ -1,19 +1,19 @@
-import React, { FC, Ref } from 'react'
+import React, { ReactNode, forwardRef } from 'react'
 import styled, { css } from 'styled-components'
 
-type BaseProps = {
+type Props = {
+  children: ReactNode
   radius?: 's' | 'm'
   className?: string
-  ref?: Ref<HTMLDivElement>
 }
 
-export const Base: FC<BaseProps> = ({ radius = 'm', ...props }) => {
+export const Base = forwardRef<HTMLDivElement, Props>(({ radius = 'm', ...props }, ref) => {
   const radiusMap = {
     s: '6px',
     m: '8px',
   }
-  return <Wrapper radius={radiusMap[radius]} {...props} />
-}
+  return <Wrapper radius={radiusMap[radius]} ref={ref} {...props} />
+})
 
 const Wrapper = styled.div<{ radius: string }>`
   ${({ radius }) => {