refactor: update styled-components

Author: locol23

packages/styled-components/README.md

@@ -1,3 +1,3 @@
-# styled-components-base
+# styled-components
 
 [styled-components docs](https://www.styled-components.com/docs/basics)

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

@@ -1,37 +1,24 @@
-import React, { Children } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { Color, Size } from '../const'
+import { Color } from '../const'
 
 interface LayoutProps {
   children: React.ReactNode
 }
 
+const Layout = (props: LayoutProps) => <Container>{props.children}</Container>
+
 const Container = styled.div`
   display: flex;
   justify-content: center;
 `
 
-const Layout = (props: LayoutProps) => <Container>{props.children}</Container>
-
 const Header = () => (
   <Layout>
-    <h1>Function Components</h1>
+    <h1>Styled 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
 }
@@ -50,7 +37,37 @@ export const App = () => (
       <StyledButton onClick={() => alert('Styled Button')}>
         Styled Button
       </StyledButton>
-      <StyledButton as={CustomButton}>Custome Button</StyledButton>
+      <StyledButton styleType={'long'} as={CustomButton}>
+        Custome Button
+      </StyledButton>
     </Layout>
   </React.Fragment>
 )
+
+const Button = styled.button`
+  border: solid 1px ${Color.PRIMARY};
+  width: 100px;
+  height: 30px;
+  margin: 0 20px;
+`
+
+type StyleMap = {
+  [key: string]: () => string
+}
+
+const styleMap: StyleMap = {
+  default: () => `width: 200px;`,
+  long: () => `width: 300px;`,
+}
+
+type StyleButtonProps = {
+  styleType?: string
+}
+
+const StyledButton = styled(Button)`
+  color: ${Color.SECONDARY};
+  border: solid 1px ${Color.SECONDARY};
+  border-radius: 5px;
+  ${(props: StyleButtonProps) =>
+    props.styleType ? styleMap[props.styleType]() : styleMap.default()}
+`