feat: 라이브러리 빌드를 위한 Vite 설정 추가 (#2)

* feat: 라이브러리 빌드를 위한 Vite 설정 추가

* fix: TextField type이 password 인 경우, Arial font로 변경하도록 개선

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,34 @@
+## 작업 주제
+
+- 관련 작업에 대한 타이틀을 작성합니다.
+
+## optional 작업 내용(어떤 부분을 리뷰어가 집중해서 봐야할까요?)
+
+- 어떤 목적으로 작업을 진행한 것인지 설명합니다.
+- 리뷰어가 이 작업이 왜 필요했는지 이해할 수 있도록 도와주는 것이 목적입니다.
+- 상세히 어떤 작업을 수행했는지 설명합니다. 커밋 단위로 설명해주는 것이 직관적입니다.
+
+## optional 화면 스크린샷
+
+- 작업을 진행함으로써 화면의 어떤 부분이 변경되었는지 이미지로 공유합니다.
+
+## optional 관련 Docs
+
+- 작업을 진행하면서 참고한 문서 혹은 자료를 공유합니다.
+- 리뷰어 혹은 PR을 보는 동료들과 새롭게 알게된 지식을 공유하기 위한 것이 목적입니다.
+- 또한, 리뷰에 도움을 주는 것도 목적입니다.
+
+## optional 추가 코멘트
+
+- 추가적으로 리뷰어에게 전달하고 싶은 내용이 있다면 작성합니다.
+
+## 체크리스트(PR 올리기 전 아래의 내용을 확인해주세요.)
+
+- [ ] base, compare branch가 적절하게 선택되었나요?
+- [ ] 로컬 환경에서 충분히 테스트 하셨나요?
+
+## 리뷰 규칙
+
+- P1: 꼭/적극적 반영해 주세요 (Request changes)
+- P2: 웬만하면 반영해 주세요 (Comment)
+- P3: 반영해도 좋고 넘어가도 좋습니다 (Approve)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "near-payments",
   "description": "Next Step NearPayments",
-  "version": "0.1.5",
+  "version": "0.1.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -42,7 +42,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=$NEXT_PAYMENTS_CHROMATIC_TOKEN",
-    "prepare": "rm -rf dist && mkdir dist && tsc && cp -R src/assets dist/"
+    "prepare": "rm -rf dist && tsc --project tsconfig.lib.json && vite build --config vite.config.lib.ts/ && cp -R src/assets dist/"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -91,7 +91,8 @@
     "prettier": "^3.2.5",
     "storybook": "^7.6.17",
     "typescript": "^5.2.2",
-    "vite": "^5.1.0"
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

src/index.ts

@@ -1,7 +1,8 @@
 import type { PaymentCancel, PaymentResult } from './payments';
 import { useLoadNearPayments } from './payments';
+import { OverlayProvider } from './shared';
 
 export type { PaymentCancel, PaymentResult };
 export { useLoadNearPayments };
+export { OverlayProvider };
 
-export * from './shared';

src/payments/form/CardAddForm.tsx

@@ -1,6 +1,6 @@
 import { FocusEvent, useEffect } from 'react';
-import ArrowLeft from '../../assets/arrow-left.png';
-import Close from '../../assets/close.png';
+import ArrowLeft from 'src/assets/arrow-left.png';
+import Close from 'src/assets/close.png';
 import {
   useFunnel,
   useInputValues,

src/payments/form/CardListForm.tsx

@@ -1,4 +1,4 @@
-import Close from '../../assets/close.png';
+import Close from 'src/assets/close.png';
 import { AppDisplay, Button, Flex, HStack, Typography, useFunnel, VStack } from '../../shared';
 import { CardDisplay } from '../components/CardDisplay';
 import { CardPageIndex } from '../constants';

src/shared/components/Carousel/Carousel.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useState } from 'react';
-import ArrowLeft from '../../../assets/arrow-left.png';
+import ArrowLeft from 'src/assets/arrow-left.png';
 import { Box } from '../Box';
 import { Button } from '../Button';
 

src/shared/components/TextField/TextField.tsx

@@ -57,6 +57,10 @@ const Root = styled(DefaultStyled)<TextFieldProps>`
     ${({ variant }) => variant && isValidVariantNoneOutline(variant) && `outline: none;`};
     outline: ${({ _focus }) => _focus?.outline};
   }
+
+  &[type="password"] {
+    font-family: Arial, sans-serif;
+  }
 `;
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(

src/shared/styles/GlobalStyles.tsx

@@ -1,13 +1,9 @@
 import { Global, css } from '@emotion/react';
 
-export const GlobalStyles = () => (
-  <Global
-    styles={css`
-      *,
-      *::before,
-      *::after {
+export const GlobalStyles = () => <Global styles={css`
+    *,
+    *::before,
+    *::after {
         box-sizing: border-box;
-      }
-    `}
-  />
-);
+    }
+`} />;

tsconfig.json

@@ -20,7 +20,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "declaration": true,
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "baseUrl": "./",
   },
   "include": [
     "src",

tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "module": "ESNext",
+    "target": "es6",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/index.ts", "src/payments", "src/shared", "src/custom.d.ts"],
+  "exclude": ["node_modules", "vite.config.ts", "src/**/*.stories.tsx"]
+}

vite.config.lib.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    dts({
+      tsconfigPath: './tsconfig.lib.json',
+    }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: 'src',
+        replacement: path.resolve(__dirname, 'src'),
+      },
+    ],
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'near-payments',
+      formats: ['es'],
+      fileName: () => 'index.js',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@xstate/react', 'xstate', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@xstate/react': '@xstate/react',
+          xstate: 'xstate',
+          'react/jsx-runtime': 'jsxRuntime',
+        },
+      },
+    },
+  },
+  define: {
+    'process.env': {},
+  },
+  assetsInclude: ['src/assets/**/*'],
+});

yarn.lock

@@ -5629,6 +5629,11 @@ globby@^11.0.1, globby@^11.0.2, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+globrex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
+  integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -8417,6 +8422,11 @@ ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
+tsconfck@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-3.0.3.tgz#d9bda0e87d05b1c360e996c9050473c7e6f8084f"
+  integrity sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==
+
 tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
@@ -8777,6 +8787,15 @@ vite-plugin-dts@^3.8.1:
     magic-string "^0.30.8"
     vue-tsc "^1.8.27"
 
+vite-tsconfig-paths@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"
+  integrity sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==
+  dependencies:
+    debug "^4.1.1"
+    globrex "^0.1.2"
+    tsconfck "^3.0.3"
+
 vite@^5.1.0:
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.8.tgz#a99e09939f1a502992381395ce93efa40a2844aa"