refactor: update styled-components

Author: locol23

README.md

@@ -13,7 +13,7 @@ Learn React with TypeScript
   - [Base](https://github.com/locol23/learn-react-ts/tree/master/packages/function-components-base)
   - [Goal](https://github.com/locol23/learn-react-ts/tree/master/packages/function-components-goal)
 - Styled Components
-    - [Base](https://github.com/locol23/learn-react-ts/tree/master/packages/styled-components-base)
+    - [Base & Goal](https://github.com/locol23/learn-react-ts/tree/master/packages/styled-components)
 - Recompose
   - State(withStateHandlers)
     - [Base](https://github.com/locol23/learn-react-ts/tree/master/packages/recompose-state-base)

packages/styled-components-base/README.md

@@ -0,0 +1 @@
+# styled-components-base

packages/styled-components-base/src/components/App.tsx

@@ -0,0 +1,56 @@
+import React, { Children } from 'react'
+import styled from 'styled-components'
+import { Color, Size } from '../const'
+
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+const Layout = (props: LayoutProps) => <Container>{props.children}</Container>
+
+const Header = () => (
+  <Layout>
+    <h1>Function Components</h1>
+  </Layout>
+)
+
+const Button = styled.button`
+  border: solid 1px ${Color.PRIMARY};
+  width: 100px;
+  height: 30px;
+  margin: 0 20px;
+`
+
+const StyledButton = styled(Button)`
+  color: ${Color.SECONDARY};
+  border: solid 1px ${Color.SECONDARY};
+  border-radius: 5px;
+`
+
+interface CustomButtonProps {
+  children: React.ReactNode
+}
+
+const CustomButton = (props: CustomButtonProps) => (
+  <button onClick={() => alert('CustomButton')} {...props}>
+    {props.children}
+  </button>
+)
+
+export const App = () => (
+  <React.Fragment>
+    <Header />
+    <Layout>
+      <Button onClick={() => alert('Button')}>Nomal Button</Button>
+      <StyledButton onClick={() => alert('Styled Button')}>
+        Styled Button
+      </StyledButton>
+      <StyledButton as={CustomButton}>Custome Button</StyledButton>
+    </Layout>
+  </React.Fragment>
+)

packages/styled-components-base/.babelrc packages/styled-components/.babelrc

@@ -0,0 +1,10 @@
+export const Size = {
+  SMALL: 10,
+  NORMAL: 15,
+  LARGE: 20,
+}
+
+export const Color = {
+  PRIMARY: '#000',
+  SECONDARY: '#ff8600',
+}