feat(docs): 개발에 필요한 기본적인 세팅 완료 (#59)

* fix(docs): 사용하지 않는 버튼 제거

* chore(docs): 배포 테스트

* chore(docs): 잡 네임 변경

* chore(docs): fix unknwon workspace

* chore(docs): set git conf

* chore(docs): 환경에 따라 CNAME 다르게 설정

* chore(docs): 빠진 모듈 추가

* chore(docs): 빠진 환경변수 추가

* chore(docs): CNAME 옮기는 경로 변경

* feat(docs): Docs 개발에 필요한 기본 세팅 완료

* chore(docs): live 배포 스크립트 주석 처리

* chore(docs): 라이브 CICD 다시 살림

.github/workflows/alpha-release-docs.yml

@@ -0,0 +1,46 @@
+name: Alpha Release UI Kit Docs
+
+on:
+  push:
+    branches:
+      - master
+      - alpha
+
+jobs:
+  alpha-release-ui-kit-docs:
+    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(docs)')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Set Git Configulations
+        run: |
+          git config --global user.email "lubycon@gmail.com"
+          git config --global user.name "lubycon"
+      - name: Caching Node Modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install depedencies
+        run: yarn
+      - name: Build
+        run: yarn workspace lubycon-ui-kit-docs build
+      - name: Publish
+        run: yarn workspace lubycon-ui-kit-docs deploy
+        env:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          ENV: 'alpha'
+      - uses: 8398a7/action-slack@v3 # 슬랙 노티피케이션
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,commit,author,action,eventName,ref,workflow
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_DEPLOY_BOT_WEBHOOK_URL }}
+        if: always()
+

.github/workflows/live-release-docs.yml

@@ -0,0 +1,45 @@
+name: Live Release UI Kit Docs
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  alpha-release-ui-kit-docs:
+    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(docs)')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Set Git Configulations
+        run: |
+          git config --global user.email "lubycon@gmail.com"
+          git config --global user.name "lubycon"
+      - name: Caching Node Modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install depedencies
+        run: yarn
+      - name: Build
+        run: yarn workspace lubycon-ui-kit-docs build
+      - name: Publish
+        run: yarn workspace lubycon-ui-kit-docs deploy
+        env:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          ENV: 'live'
+      - uses: 8398a7/action-slack@v3 # 슬랙 노티피케이션
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,commit,author,action,eventName,ref,workflow
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_DEPLOY_BOT_WEBHOOK_URL }}
+        if: always()
+

docs/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
+  "plugins": []
+}

docs/CNAME.alpha

@@ -0,0 +1 @@
+ui-kit.alpha.lubycon.io

docs/CNAME.live

@@ -0,0 +1 @@
+ui-kit.lubycon.io

docs/next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="@emotion/react/types/css-prop" />

docs/package.json

@@ -1,18 +1,24 @@
 {
   "name": "lubycon-ui-kit-docs",
   "version": "1.0.0",
+  "private": true,
   "scripts": {
     "dev": "next",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "next start",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "deploy": "node ./scripts/deploy"
   },
   "dependencies": {
+    "@emotion/react": "^11.1.5",
+    "gh-pages": "^3.1.0",
     "next": "latest",
+    "normalize.css": "^8.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
   "devDependencies": {
+    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@types/node": "^12.12.21",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",

docs/pages/_app.tsx

@@ -0,0 +1,4 @@
+import App from 'next/app';
+import 'normalize.css';
+
+export default App;

docs/pages/index.tsx

@@ -1,16 +1 @@
-import React from 'react';
-import Link from 'next/link';
-import Layout from '../src/components/Layout';
-
-const IndexPage = () => (
-  <Layout title="Home | Next.js + TypeScript Example">
-    <h1>Hello Next.js 👋</h1>
-    <p>
-      <Link href="/about">
-        <a>About</a>
-      </Link>
-    </p>
-  </Layout>
-);
-
-export default IndexPage;
+export { default } from 'pages/HomePage';

docs/scripts/deploy.js

@@ -0,0 +1,30 @@
+const ghpages = require('gh-pages');
+const path = require('path');
+const fs = require('fs');
+
+const env = process.env.ENV;
+const token = process.env.ACCESS_TOKEN;
+const deployTarget = env === 'alpha' ? 'ui-kit.alpha.lubycon.io' : 'ui-kit.lubycon.io';
+
+console.log('📦 UI Kit 문서 알파 배포를 준비 중 입니다...');
+
+console.log('🌱 CNAME 만드는 중...');
+fs.renameSync(path.resolve(`./CNAME.${env}`), path.resolve('./out/CNAME'));
+console.log('🌱 CNAME 생성 완료');
+
+ghpages.publish(
+  path.join(__dirname, '../out'),
+  {
+    branch: 'master',
+    remote: 'origin',
+    repo: `https://${token}@github.com/Lubycon/${deployTarget}`,
+    message: `UI Kit 문서 배포`,
+  },
+  (err) => {
+    if (err) {
+      throw err;
+    } else {
+      console.log('🚀 UI Kit 문서 알파 배포가 완료되었습니다!');
+    }
+  }
+);

docs/src/components/GlobalHeader/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+
+const GlobalHeader = () => {
+  const router = useRouter();
+  const handleLogoClick = (e: MouseEvent) => {
+    e.preventDefault();
+    router.push('/');
+  };
+
+  return (
+    <nav
+      css={{
+        display: 'flex',
+        width: '100%',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        css={{
+          display: 'flex',
+          width: 1200,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '12px 0',
+        }}
+      >
+        <a href="/" onClick={handleLogoClick}>
+          <img
+            css={{ width: 100 }}
+            src="https://d2x9jxyr47nlkc.cloudfront.net/logo/logo-color.svg"
+          />
+        </a>
+      </div>
+    </nav>
+  );
+};
+
+export default GlobalHeader;

docs/src/components/Layout.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import Link from 'next/link';
 import Head from 'next/head';
-import { Button } from '@lubycon/ui-kit';
 
 type Props = {
   children?: ReactNode;
@@ -32,7 +31,6 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       </nav>
     </header>
     {children}
-    <Button>test</Button>
     <footer>
       <hr />
       <span>Test</span>

docs/src/pages/HomePage/index.tsx

@@ -0,0 +1,12 @@
+import GlobalHeader from 'components/GlobalHeader';
+import React from 'react';
+
+const HomePage = () => {
+  return (
+    <div>
+      <GlobalHeader />
+    </div>
+  );
+};
+
+export default HomePage;

docs/tsconfig.json

@@ -29,6 +29,7 @@
       ]
     },
     "allowJs": true
+    // "jsxImportSource": "@emotion/react"
   },
   "exclude": [
     "./node_modules"

ui-kit/.storybook/deploy.js

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

ui-kit/public/CNAME

@@ -1 +1 @@
-ui-kit.alpha.lubycon.io
+ui-kit.storybook.lubycon.io