feat(ui-kit): Text 컴포넌트 추가 (#18)

* chore: Alpha, Beta 브랜치 개설 [skip ci] (#14)

* chore: 배포 테스트

* chore: 배포테스트

* chore: 배포 테스트

* chore: dry run test

* feat(ui-kit): Text 컴포넌트 타이핑에 as 프로퍼티 추가

* 스토리북 세팅

* chore(ui-kit): Text 스토리 추가

* feat(ui-kit): Text에 Font Weight 스코어가 제대로 안 먹는 현상 수정

* chore(ui-kit): remove console log

* chore(ui-kit): 스토리북 배포

* chore(ui-kit): fix workflow syntax

* chore(ui-kit): action trigger test

* chore(ui-kit): action trigger test

* chore(ui-kit): 스토리북 배포 테스트

* chore(ui-kit): 스토리북 배포 테스트

* chore(ui-kit): 테스트 트리거 추가

* chore(ui-kit): storybook deploy test

* chore(ui-kit): test storybook deploy

* chore(ui-kit): 스토리북 배포 액션을 메뉴얼로 수정

.github/pull_request_template.md

@@ -0,0 +1,22 @@
+<!-- 절취선 -->
+# 이 Pull Request가 BREAKING CHANGE를 포함하고 있나요?
+BREAKING CHANGE가 포함된 PR이라면 Base를 Beta로 잡아주셔야 합니다 !
+확인 후 이 내용은 지워주셔도 됩니다.
+<!-- 절취선 -->
+
+## 주요 변경사항
+<!-- 이 PR이 해결하는 문제 -->
+
+## 링크
+- 디자인 시안 링크: <!-- 제플린, 피그마, 프레이머 등 -->
+- 슬랙 링크: <!-- 관련된 대화가 이루어진 슬랙 링크 -->
+
+## 시급한 정도
+<!-- 아래에서 선택해주세요. -->
+---
+⚠︎ 긴급 : 선 어프루브 후 리뷰를 부탁드립니다. (리뷰는 추후 반영)
+🏃‍♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.
+🐢 천천히 : 급하지 않습니다.
+
+## 중점적으로 봐주었으면 하는 부분
+<!-- 변경사항이 큰 경우 집중해야 할 부분, 또는 불안해서 봐주었으면 하는 부분 등 -->

.github/workflows/deploy-ui-kit-lib.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   ui-kit-publish:
-    if: "! contains(toJSON(github.event.commits.*.msg), '[skip ci]')"
+    if: "!contains(toJSON(github.event.commits.*.msg), '[skip ci]') && contains(toJSON(github.event.commits.*.msg), '(ui-kit)')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1

.github/workflows/publish-storybook.yml

@@ -0,0 +1,21 @@
+name: Publish Dev Storybook
+
+on: [workflow_dispatch]
+
+jobs:
+  storybook-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install depedencies
+        run: yarn
+      - name: Build Storybook
+        run: yarn workspace @lubycon/ui-kit build-stories
+      - name: Publish
+        run: yarn workspace @lubycon/ui-kit publish-stories
+        env:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+

.gitignore

@@ -15,6 +15,7 @@ out/
 # production
 build
 dist
+storybook-static
 
 # misc
 .DS_Store

ui-kit/.storybook/deploy.js

@@ -0,0 +1,19 @@
+const ghpages = require('gh-pages');
+const path = require('path');
+const token = process.env.ACCESS_TOKEN;
+
+console.log('📦 개발용 스토리북 배포를 준비 중 입니다...');
+
+ghpages.publish(path.join(__dirname, '../storybook-static'), {
+  branch: 'master',
+  remote: 'origin',
+  repo: `https://${token}@github.com/Lubycon/lubycon-ui-kit-storybook.git`,
+  message: `개발용 스토리북 배포`,
+}, (err) => {
+  if (err) {
+    console.log('😢 배포에 실패하였습니다.');
+    console.error(err);
+  } else {
+    console.log('🚀 개발용 스토리북 배포가 완료되었습니다!')
+  }
+});

ui-kit/.storybook/preview.js

@@ -0,0 +1,6 @@
+import '../src/sass/index.scss';
+import React from 'react';
+
+export const decorators = [(Story => (
+  <Story />
+))]

ui-kit/package.json

@@ -20,14 +20,20 @@
     "lubycon"
   ],
   "author": "Lubycon",
-  "dependencies": {},
+  "dependencies": {
+    "@types/classnames": "^2.2.11",
+    "classnames": "^2.2.6"
+  },
   "scripts": {
     "start": "start-storybook -p 6006 --no-dll",
     "build": "yarn clean && rollup -c && yarn copy && tsc --emitDeclarationOnly -p ./tsconfig.build.json",
+    "build-stories": "yarn build-storybook -o ./storybook-static",
+    "publish-stories": "node ./.storybook/deploy.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "clean": "rm -rf dist && mkdir dist",
-    "copy": "ncp src/sass/modules dist/sass && ncp package.json dist/package.json",
+    "copy": "ncp package.json dist/package.json",
+    "copy-sass": "ncp src/sass/modules dist/sass",
     "copy-version": "ncp dist/package.json package.json"
   },
   "eslintConfig": {
@@ -67,6 +73,7 @@
     "@types/react-dom": "^16.9.8",
     "autoprefixer": "^9.0.0",
     "babel-loader": "^8.2.1",
+    "gh-pages": "^3.1.0",
     "postcss": "^7.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

ui-kit/rollup.config.js

@@ -12,8 +12,8 @@ const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 export default [
   buildCJS('src/components/index.ts'),
   buildESM('src/components/index.ts'),
-  buildCSS('src/components/index.scss', 'css/lubycon-ui-kit.css'),
-  buildCSS('src/components/index.scss', 'css/lubycon-ui-kit.min.css', {
+  buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.css'),
+  buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.min.css', {
     minimize: {
       preset: ['default'],
     },

ui-kit/src/components/Text/index.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Text from './index';
+import { Meta } from '@storybook/react/types-6-0';
+import { typographys, Typographys, FontWeights, fontWeights } from './types';
+
+export default {
+  title: 'Lubycon UI Kit/Text',
+  component: Text,
+} as Meta;
+
+const typographyNames: { [key in Typographys]: string } = {
+  h1: '머릿말 1',
+  h2: '머릿말 2',
+  h3: '머릿말 3',
+  h4: '머릿말 4',
+  h5: '머릿말 5',
+  h6: '머릿말 6',
+  subtitle: '부제',
+  button: '버튼',
+  content: '본문 1',
+  content2: '본문 2',
+  caption: '캡션',
+};
+
+const fontWeightNames: { [key in FontWeights]: string } = {
+  light: '노토 산스 KR Light',
+  regular: '노토 산스 KR Regular',
+  bold: '노토 산스 KR Bold',
+  black: '노토 산스 KR Black',
+};
+
+export const Default = () => {
+  return (
+    <ul>
+      {typographys.map((typography) => (
+        <li style={{ listStyle: 'none' }} key={typography}>
+          <Text typography={typography}>{typographyNames[typography]}</Text>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export const FontWeight = () => {
+  return (
+    <ul>
+      {fontWeights.map((fontWeight) => (
+        <li style={{ listStyle: 'none' }} key={fontWeight}>
+          <Text fontWeight={fontWeight}>{fontWeightNames[fontWeight]}</Text>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export const As = () => {
+  return (
+    <ul>
+      <li style={{ listStyle: 'none' }}>
+        <Text as="a" href="https://github.com" target="blank">
+          앵커 태그를 사용해보자
+        </Text>
+        <Text as="h1">h1으로 렌더해도 기본적으로는 Typography: content가 적용됩니다</Text>
+        <Text as="button">버튼도 가능하기는 함</Text>
+      </li>
+    </ul>
+  );
+};

ui-kit/src/components/Text/index.tsx

@@ -0,0 +1,31 @@
+import React, { ElementType, Ref } from 'react';
+import { DEFAULT_ELEMENT, FontWeights, Typographys } from './types';
+import { forwardRef } from 'react';
+import { OverridableProps } from 'types/OverridableProps';
+import clxs from 'classnames';
+
+interface TextBaseProps {
+  typography?: Typographys;
+  fontWeight?: FontWeights;
+}
+type TextProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<T, TextBaseProps>;
+
+const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
+  { typography = 'content', fontWeight, as, ...props }: TextProps<T>,
+  ref: Ref<HTMLButtonElement>
+) => {
+  const target = as ?? DEFAULT_ELEMENT;
+  const Component = target;
+  return (
+    <Component
+      ref={ref}
+      className={clxs('lubycon-text', {
+        [`lubycon-typography--${typography}`]: typography != null,
+        [`lubycon-text--font-weight--${fontWeight}`]: fontWeight != null,
+      })}
+      {...props}
+    />
+  );
+};
+
+export default forwardRef(Text) as typeof Text;

ui-kit/src/components/Text/types.ts

@@ -0,0 +1,19 @@
+export const typographys = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'subtitle',
+  'button',
+  'content',
+  'content2',
+  'caption',
+] as const;
+export type Typographys = typeof typographys[number];
+
+export const fontWeights = ['light', 'regular', 'bold', 'black'] as const;
+export type FontWeights = typeof fontWeights[number];
+
+export const DEFAULT_ELEMENT = 'span' as const;

ui-kit/src/components/index.ts

@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export { default as Text } from './Text';

ui-kit/src/sass/components/_Text.scss

@@ -0,0 +1,7 @@
+.lubycon-text {
+  @each $name, $value in $font-weights {
+    &.lubycon-text--font-weight--#{$name} {
+      @include font-weight($name, map-get($font-weights, $name));
+    }
+  }
+}

ui-kit/src/sass/components/_index.scss

@@ -0,0 +1,2 @@
+@import './Button';
+@import './Text';

ui-kit/src/sass/functions/_index.scss

@@ -0,0 +1 @@
+@import './strip-unit';

ui-kit/src/sass/functions/_strip-unit.scss

@@ -0,0 +1,7 @@
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}

ui-kit/src/sass/index.scss

@@ -0,0 +1,3 @@
+@import './functions/index';
+@import './utils/index';
+@import './components/index.scss';

ui-kit/src/sass/utils/_font-weights.scss

@@ -0,0 +1,24 @@
+$font-weights: (
+  'light': 300,
+  'regular': 400,
+  'bold': 700,
+  'black': 900,
+);
+
+@mixin font-weight($name, $value) {
+  font-weight: $value;
+  font-weight: var(--lubycon-font-weight-#{$name});
+}
+
+@mixin global-font-weight($name, $value) {
+  :root {
+    --lubycon-font-weight-#{$name}: #{$value};
+  }
+  .lubycon-font-weight--#{$name} {
+    @include font-weight($name, $value);
+  }
+}
+
+@each $name, $value in $font-weights {
+  @include global-font-weight($name, $value);
+}

ui-kit/src/sass/utils/_font.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap');
+
+html {
+  font-family: 'Noto Sans KR', sans-serif;
+}

ui-kit/src/sass/utils/_index.scss

@@ -0,0 +1,3 @@
+@import './font';
+@import './font-weights';
+@import './typography';

ui-kit/src/sass/utils/_typography.scss

@@ -0,0 +1,33 @@
+@mixin _typography($name, $font-size, $font-weight, $line-height) {
+  $font-size-number: strip-unit($font-size);
+
+  :root {
+    --lubycon-font-size-#{$font-size-number}: #{$font-size};
+    --lubycon-line-height-#{$font-size-number}: #{$line-height};
+  }
+
+  .lubycon-font-size--#{$font-size-number} {
+    font-size: $font-size;
+    font-size: var(--lubycon-font-size-#{$font-size-number});
+    line-height: $line-height;
+    line-height: var(--lubycon-line-height-#{$font-size-number});
+  }
+
+  .lubycon-typography--#{$name} {
+    @extend .lubycon-font-size--#{$font-size-number};
+    @extend .lubycon-font-weight--#{$font-weight};
+  }
+}
+
+@include _typography('h1', 42px, 'light', 63px);
+@include _typography('h2', 32px, 'light', 48px);
+@include _typography('h3', 28px, 'regular', 42px);
+@include _typography('h4', 26px, 'regular', 40px);
+@include _typography('h5', 24px, 'bold', 40px);
+@include _typography('h6', 20px, 'bold', 40px);
+
+@include _typography('subtitle', 18px, 'regular', 31px);
+@include _typography('button', 16px, 'bold', 28px);
+@include _typography('content', 15px, 'regular', 26px);
+@include _typography('content2', 13px, 'regular', 22px);
+@include _typography('caption', 12px, 'regular', 21px);

ui-kit/src/types/OverridableProps.ts

@@ -0,0 +1,9 @@
+import { ElementType } from 'react';
+import { CombineElementProps } from './utils';
+
+/**
+ * @desc 원하는 엘리먼트로 렌더링할 수 있는 as 프로퍼티와 커스텀 Props를 병합합니다.
+ */
+export type OverridableProps<E extends ElementType, P = unknown> = {
+  as?: E;
+} & CombineElementProps<E, P>;

ui-kit/src/types/utils.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+
+/**
+ * @description T와 K에서 T의 프로퍼티를 제거한 타입을 병합합니다.
+ */
+export type Combine<T, K> = T & Omit<K, keyof T>;
+
+export type CombineElementProps<E extends ElementType, P = unknown> = Combine<
+  P,
+  ComponentPropsWithoutRef<E>
+>;

ui-kit/tsconfig.json

@@ -1,9 +1,11 @@
 {
   "extends": "../tsconfig.common.json",
   "compilerOptions": {
-    "baseUrl": "./src",
+    "baseUrl": ".",
     "paths": {
-      "src/*": ["./src/*"]
-    },
+      "src/*": ["./src/*"],
+      "components/*": ["./src/components/*"],
+      "types/*": ["./src/types/*"],
+    }
   }
 }