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

.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

@@ -4,10 +4,12 @@ on:
   push:
     branches:
       - master
+      - alpha
+      - beta
 
 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
@@ -20,7 +22,6 @@ jobs:
         run: yarn
       - name: Build
         run: yarn workspace @lubycon/ui-kit build
-      - run: yarn workspace @lubycon/ui-kit copy-version
       - name: Publish
         id: publish
         uses: codfish/semantic-release-action@master

.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

.releaserc.js

@@ -5,6 +5,16 @@ module.exports = {
   branches: [
     {
       "name": "master"
+    },
+    {
+      "name": "beta",
+      "channel": "beta",
+      "prerelease": "beta"
+    },
+    {
+      "name": "alpha",
+      "channel": "alpha",
+      "prerelease": "alpha"
     }
   ],
   plugins: [
@@ -23,6 +33,12 @@ module.exports = {
     ["@semantic-release/npm", {
       "pkgRoot": "./ui-kit/dist"
     }],
+    [
+      "@semantic-release/exec",
+      {
+        "prepareCmd": "yarn workspace @lubycon/ui-kit copy-version",
+      }
+    ],
     [
       "@semantic-release/git",
       {

package.json

@@ -22,6 +22,7 @@
   "sideEffects": false,
   "devDependencies": {
     "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/exec": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/github": "^7.2.0",
     "@semantic-release/npm": "^7.0.8",

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';