Theme 설정 (#17)

* Typography 수정

* GNB 기본 설정

* Colors 설정

* Color 추가

* BaseColor 이름 변경

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  "extends": "@channel.io/eslint-config-channel",
+  "extends": "@channel.io/eslint-config",
   rules: {
     'no-restricted-imports': 'off',
     'no-restricted-modules': 'off',

.stylelintrc

@@ -1,19 +1,3 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-styled-components"
-  ],
-  "syntax": "scss",
-  "rules": {
-      "selector-type-case": null,
-      "comment-empty-line-before": null,
-      "declaration-empty-line-before": null,
-      "selector-type-no-unknown": [true, {
-        "ignore": ["custom-elements", "default-namespace"]
-      }],
-      "no-eol-whitespace": [true, {
-        "ignore": ["empty-lines"]
-      }]
-  }
+  "extends": ["@channel.io/stylelint-config"]
 }

package.json

@@ -49,7 +49,8 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.9.6",
-    "@channel.io/eslint-config-channel": "^1.0.4",
+    "@channel.io/eslint-config": "^1.0.5",
+    "@channel.io/stylelint-config": "^1.1.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@storybook/addon-actions": "^5.3.19",
@@ -90,9 +91,6 @@
     "rollup-plugin-typescript2": "^0.27.0",
     "styled-components": "^5.1.0",
     "stylelint": "^13.6.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^25.5.0",
     "ts-node": "^8.10.2",
     "typescript": "^3.8.3"

src/components/Text/Text.stories.tsx

@@ -3,8 +3,9 @@ import React from 'react'
 import { withKnobs, text, select, object } from '@storybook/addon-knobs'
 
 /* Internal dependencies */
+import { createColors } from '../../styling/Colors'
+import { DarkTheme, ThemeProvider } from '../../styling/Theme'
 import Text from './Text'
-import { DarkTheme, ThemeProvider } from '../../theme/Theme'
 
 export default {
   title: 'Text',
@@ -32,3 +33,20 @@ export const WithTheme = () => (
     <Text content={text('content', 'hiiii')} />
   </ThemeProvider>
 )
+
+export const WithCustomTheme = () => {
+  const customColors = createColors({
+    base: 'light',
+    colors: {
+      textBase: text('textBase', 'pink'),
+    },
+  })
+
+  const customTheme = { colors: customColors }
+
+  return (
+    <ThemeProvider theme={customTheme}>
+      <Text content={text('content', 'hello, world')} />
+    </ThemeProvider>
+  )
+}

src/components/Text/Text.styled.ts

@@ -1,9 +1,12 @@
 /* External dependencies */
 import styled from 'styled-components'
 
-const Text = styled.span`
-  font-size: ${props => props.theme?.typo?.normal ?? 13}px;
-  color: ${props => props.theme?.palette?.black70};
+/* Internal dependencies */
+import TextProps from './Text.types'
+
+const Text = styled.span<TextProps>`
+  ${props => props.typo};
+  color: ${props => props.theme?.colors?.textBase ?? 'black'};
 `
 
 export default Text

src/components/Text/Text.test.tsx

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react'
 import Text from './Text'
 import TextProps from './Text.types'
 
-describe('Text', () => {
+describe('Text 컴포넌트 테스트 >', () => {
   let props: TextProps
 
   beforeEach(() => {
@@ -17,11 +17,11 @@ describe('Text', () => {
 
   const renderComponent = () => render(<Text {...props} />)
 
-  it('should have primary className with default props', () => {
+  it('props 가 제공되지 않을 경우 기본 style 을 가지고 있다', () => {
     const { getByTestId } = renderComponent()
 
     const testComponent = getByTestId('text')
 
-    expect(testComponent).toHaveStyle('font-size: 13px')
+    expect(testComponent).toHaveStyle('font-size: 15px')
   })
 })

src/components/Text/Text.tsx

@@ -2,13 +2,15 @@
 import React from 'react'
 
 /* Internal dependencies */
+import Typography from '../../styling/Typography'
 import TextProps from './Text.types'
 import TextView from './Text.styled'
 
 function Text({
   as,
   testId = 'text',
   content,
+  typo = Typography.Size15,
   style,
   className,
 }: TextProps) {
@@ -17,6 +19,7 @@ function Text({
       as={as}
       style={style}
       className={className}
+      typo={typo}
       data-testid={testId}
     >
       { content }

src/components/Text/Text.types.ts

@@ -1,4 +1,9 @@
+/* External dependencies */
+import { css } from 'styled-components'
+
 /* Internal dependencies */
 import { ContentComponentProps } from '../../types/ComponentProps'
 
-export default interface TextProps extends ContentComponentProps<string> {}
+export default interface TextProps extends ContentComponentProps<string> {
+  typo?: ReturnType<typeof css>
+}

src/index.ts

@@ -3,4 +3,4 @@ export * from './components/Button'
 export * from './components/Switch'
 export * from './components/Text'
 
-export * from './theme/Theme'
+export * from './styling/Theme'

src/layout/GNB/GNB.stories.tsx

@@ -0,0 +1,20 @@
+/* External dependencies */
+import React from 'react'
+import { withKnobs } from '@storybook/addon-knobs'
+
+/* Internal dependencies */
+import { LightTheme, ThemeProvider } from '../../styling/Theme'
+import GNB from './GNB'
+
+export default {
+  title: 'GNB',
+  decorators: [withKnobs],
+}
+
+export const WithoutTheme = () => (<GNB />)
+
+export const WithTheme = () => (
+  <ThemeProvider theme={LightTheme}>
+    <GNB />
+  </ThemeProvider>
+)

src/layout/GNB/GNB.styled.ts

@@ -0,0 +1,21 @@
+/* External dependencies */
+import styled from 'styled-components'
+
+/* Internal dependencies */
+import GNBProps from './GNB.types'
+
+const GNB = styled.div<GNBProps>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 68px;
+  height: 100%;
+  background-color: ${props => props.theme?.colors?.background2};
+`
+
+export default GNB

src/layout/GNB/GNB.tsx

@@ -0,0 +1,18 @@
+/* External dependencies */
+import React from 'react'
+
+/* Internal dependencies */
+import GNBView from './GNB.styled'
+import GNBProps from './GNB.types'
+
+function GNB({
+  children,
+}: GNBProps) {
+  return (
+    <GNBView>
+      { children }
+    </GNBView>
+  )
+}
+
+export default GNB

src/layout/GNB/GNB.types.ts

@@ -0,0 +1,5 @@
+/* Internal dependencies */
+import { ChildrenComponentProps } from '../../types/ComponentProps'
+
+export default interface GNBProps extends ChildrenComponentProps {}
+

src/styling/Colors.ts

@@ -0,0 +1,55 @@
+/* Internal dependencies */
+import Palette from './Palette'
+
+export interface Colors {
+  textBase?: string
+
+  // Backgrounds
+  background2?: string
+  background1?: string
+}
+
+export const Light: Colors = {
+  textBase: Palette.grey900,
+  background2: Palette.grey200,
+  background1: Palette.grey100,
+}
+
+export const Dark: Colors = {
+  textBase: Palette.grey100,
+  background2: Palette.grey900,
+  background1: Palette.grey700,
+}
+
+const LIGHT_KEYWORD = 'light'
+const DARK_KEYWORD = 'dark'
+
+interface createColorsConfig {
+  colors: Partial<Colors>
+  base?: string
+}
+
+function getColorsFromKeyword(keyword: string) {
+  switch (keyword) {
+    case DARK_KEYWORD:
+      return Dark
+    case LIGHT_KEYWORD:
+    default:
+      return Light
+  }
+}
+
+export function createColors({
+  colors,
+  base = 'light',
+}: createColorsConfig): Colors {
+  return {
+    ...getColorsFromKeyword(base),
+    ...colors,
+  }
+}
+
+export default {
+  Light,
+  Dark,
+}