Merge pull request #8 from hyeon-9yu/main

feat: add eslint, support umd js

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc.json

@@ -0,0 +1,133 @@
+{
+  "env": {
+    "browser": true,
+    "shared-node-browser": true,
+    "node": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "prettier",
+    "react-hooks",
+    "import",
+    "jest"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "prettier/prettier": ["error", { "printWidth": 120 }],
+    "eqeqeq": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "curly": ["warn", "multi-line", "consistent"],
+    "no-console": "off",
+    "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
+    "import/export": "error",
+    "@typescript-eslint/no-duplicate-imports": ["error"],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "jest/consistent-test-it": [
+      "error",
+      { "fn": "it", "withinDescribe": "it" }
+    ],
+    "import/order": [
+      "error",
+      {
+        "alphabetize": { "order": "asc", "caseInsensitive": true },
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object"
+        ],
+        "newlines-between": "never",
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "builtin",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"]
+      }
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
+        "paths": ["src"]
+      },
+      "alias": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
+        "map": [
+          ["^jotai$", "./src/index.ts"],
+          ["jotai", "./src"]
+        ]
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": ["src"],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    },
+    {
+      "files": ["tests/**/*.tsx"],
+      "env": {
+        "jest/globals": true
+      }
+    },
+    {
+      "files": ["./*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]
+}

.gitignore

@@ -1,11 +1,25 @@
-*.iml
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+coverage
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.tscache
 .DS_Store
-node_modules/
-typings/
-coverage/
-test/typescript/axios.js*
-sauce_connect.log
-package-lock.json
-dist
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmignore

@@ -5,7 +5,7 @@ examples/
 node_modules/
 typings/
 sandbox/
-test/
+tests/
 bower.json
 CODE_OF_CONDUCT.md
 COLLABORATOR_GUIDE.md
@@ -16,4 +16,5 @@ Gruntfile.js
 karma.conf.js
 webpack.*.js
 sauce_connect.log
-src/
+src/
+coverage

package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-custom-alert",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Easliy use react alert and customize",
+  "module": "dist/index.esm.js",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "build:types": "tsc --emitDeclarationOnly"
+    "build": "rollup -c rollup.config.js && tsc --emitDeclarationOnly",
+    "lint": "eslint 'src/**/*.ts'"
   },
   "repository": {
     "type": "git",
@@ -36,11 +37,19 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",
     "@types/react": "^17.0.24",
-    "prettier": "^2.3.2",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.3.5"
+    "typescript": "^4.6.2",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0"
   },
   "files": [
     "dist"

rollup.config.js

@@ -1,26 +1,31 @@
-import typescript from '@rollup/plugin-typescript';
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from "@rollup/plugin-typescript";
+import commonjs from "rollup-plugin-commonjs";
+import resolve from "rollup-plugin-node-resolve";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
 
-const extensions = ['.js', '.jsx', '.ts', '.tsx']; // 어떤 확장자를 처리 할 지 정함
+const extensions = [".js", ".jsx", ".ts", ".tsx"];
 
 export default {
-  input: './src/index.ts', // 어떤 파일부터 불러올지 정함.
+  input: "./src/index.ts",
   plugins: [
-    typescript({ target: 'es5', sourceMap: true }),
-    peerDepsExternal() /* peerDependencies로 설치한 라이브러리들을 external 모듈로 설정
-                               즉, 번들링된 결과에 포함시키지 않음 */,
-    resolve({ extensions }), // node_modules 에서 모듈을 불러올 수 있게 해줌. ts/tsx 파일도 불러올 수 있게 해줌
+    typescript({ target: "es5", sourceMap: true }),
+    peerDepsExternal(),
+    resolve({ extensions }),
     commonjs({
-      include: 'node_modules/**',
-    }), // CommonJS 형태로 만들어진 모듈도 불러와서 사용 할 수 있게 해줌. 현재 프로젝트 상황에서는 없어도 무방함
+      include: "node_modules/**",
+    }),
   ],
   output: [
     {
       sourcemap: true,
-      file: 'dist/index.js', // 번들링한 파일을 저장 할 경로
-      format: 'es', // ES Module 형태로 번들링함
+      file: "dist/index.esm.js",
+      format: "es",
+    },
+    {
+      name: "react-custom-alert",
+      sourcemap: true,
+      file: "dist/index.js",
+      format: "umd",
     },
   ],
 };

src/AlertContainer.tsx

@@ -1,6 +1,7 @@
-import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
-import Icon from './Icon';
-import { AlertDetail } from './type';
+import React, { useCallback, useEffect, useState } from "react";
+import type { CSSProperties } from "react";
+import Icon from "./Icon";
+import type { AlertDetail } from "./type";
 
 interface Props {
   floatingTime?: number;
@@ -20,10 +21,10 @@ export const AlertContainer: React.VFC<Props> = ({ floatingTime = 3000, alertSty
   }, []);
 
   useEffect(() => {
-    window.addEventListener('toastAlert', handler as any);
+    window.addEventListener("toastAlert", handler as any);
 
     return () => {
-      window.removeEventListener('toastAlert', handler as any);
+      window.removeEventListener("toastAlert", handler as any);
     };
   }, []);
 

src/Icon.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { AlertType } from './type';
+import React from "react";
+import type { AlertType } from "./type";
 
 const Icon: React.VFC<{ type: AlertType }> = ({ type }) => {
   switch (type) {
-    case 'success':
+    case "success":
       return <Success />;
-    case 'warning':
+    case "warning":
       return <Warning />;
-    case 'error':
+    case "error":
       return <Error />;
     default:
       return <Info />;

src/alert.ts

@@ -1,9 +1,9 @@
-import { AlertDetail } from './type';
+import type { AlertDetail } from "./type";
 
 export const alert = (detail: AlertDetail) => {
   window.dispatchEvent(
-    new CustomEvent('toastAlert', {
+    new CustomEvent("toastAlert", {
       detail,
-    }),
+    })
   );
 };

src/index.ts

@@ -1,3 +1,3 @@
-export { AlertContainer } from './AlertContainer';
-export { alert } from './alert';
-export { AlertType, AlertDetail } from './type';
+export { AlertContainer } from "./AlertContainer";
+export { alert } from "./alert";
+export type { AlertType, AlertDetail } from "./type";

src/type.ts

@@ -1,2 +1,2 @@
-export type AlertType = 'success' | 'warning' | 'error' | 'info';
+export type AlertType = "success" | "warning" | "error" | "info";
 export type AlertDetail = { message: string; type: AlertType };

tsconfig.eslint.json

@@ -0,0 +1,15 @@
+{
+    "extends": "./tsconfig.json",
+    "include": [
+      "src/**/*.ts",
+      "src/**/*.js",
+      "src/**/*.js",
+      "src/**/*.jsx",
+      "src/**/*.tsx",
+      "tests/**/*.ts",
+      "tests/**/*.js",
+      "tests/**/*.js",
+      "tests/**/*.jsx",
+      "tests/**/*.tsx",
+    ]
+  }