chore: UI Kit 빌드 세팅 완료 (#2)

* chore: UI Kit 빌드 세팅 완료

* chore: remove unused config

* chore: 리뷰내용반영

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  rules: {},
+};

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
@@ -21,3 +22,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# IDE
+.vscode
+.idea

.npmignore

@@ -0,0 +1,8 @@
+src
+example
+.storybook
+.github
+config
+tasks
+.vscode
+.idea

.nvmrc

@@ -0,0 +1 @@
+10.15.0

.prettierignore

@@ -0,0 +1,3 @@
+dist
+.github
+node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package.json

@@ -10,27 +10,18 @@
     "type": "git",
     "url": "https://github.com/Lubycon/lubycon-ui-kit.git"
   },
-  "keywords": ["lubycon"],
+  "keywords": [
+    "lubycon"
+  ],
   "author": "Lubycon",
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.0",
-    "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
-  },
+  "dependencies": {},
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "yarn clean && rollup -c && yarn copy && tsc --emitDeclarationOnly -p tsconfig.build.json",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "clean": "rm -rf dist && mkdir dist",
+    "copy": "ncp src/sass/modules dist/sass && ncp package.json dist/package.json"
   },
   "eslintConfig": {
     "extends": [
@@ -50,5 +41,35 @@
       "last 1 safari version"
     ]
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/parser": "^4.6.1",
+    "autoprefixer": "^9.0.0",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "ncp": "^2.0.0",
+    "postcss": "^7.0.2",
+    "prettier": "^2.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.0",
+    "rollup": "^2.33.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "sass": "^1.29.0",
+    "typescript": "^4.0.3"
+  }
 }

rollup.config.js

@@ -0,0 +1,72 @@
+import path from 'path';
+
+import autoprefixer from 'autoprefixer';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import postcss from 'rollup-plugin-postcss';
+import typescript from 'rollup-plugin-typescript2';
+// import babel from 'rollup-plugin-babel';
+
+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', {
+    minimize: {
+      preset: ['default'],
+    },
+  }),
+];
+
+function buildJS(input, output, format) {
+  return {
+    input,
+    external: ['react', 'react-dom'],
+    output: [{ file: output, format, sourcemap: true }],
+    plugins: [
+      typescript({
+        tsconfig: 'tsconfig.json',
+      }),
+      // babel({
+      //   extensions,
+      //   runtimeHelpers: true,
+      //   include: ['src/**'],
+      // }),
+      resolve({ extensions }),
+      commonjs({
+        namedExports: {
+          'prop-types': ['node', 'bool', 'string', 'any', 'arrayOf', 'oneOfType', 'object', 'func'],
+        },
+      }),
+    ],
+  };
+}
+
+function buildCJS(input) {
+  const filename = path.parse(input).name;
+
+  return buildJS(input, `dist/${filename}.js`, 'cjs');
+}
+
+function buildESM(input) {
+  const filename = path.parse(input).name;
+  return buildJS(input, `dist/esm/${filename}.js`, 'es');
+}
+
+function buildCSS(inputFile, outputFile, postCSSOptions = {}) {
+  return {
+    input: inputFile,
+    output: { file: `dist/${outputFile}`, format: 'cjs' }, // format is not used.
+    plugins: [
+      postcss({
+        plugins: [autoprefixer],
+        sourceMap: true,
+        extract: true,
+        extensions: ['.scss', '.css'],
+        ...postCSSOptions,
+      }),
+    ],
+  };
+}

src/components/Button/index.tsx

@@ -0,0 +1,5 @@
+import React, { HTMLAttributes } from 'react';
+
+export default function Button(props: HTMLAttributes<HTMLButtonElement>): JSX.Element {
+  return <button className="button" {...props} />;
+}

src/components/Button/style.scss

@@ -0,0 +1,3 @@
+.button {
+  outline: 0;
+}

src/components/index.scss

@@ -0,0 +1 @@
+@import './Button/style.scss';

src/components/index.ts

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