refactor: to build the component

Signed-off-by: Nam Hoang <[email protected]>
(cherry picked from commit d234bca95aee320e1142beabe50a908a9c99b835)

packages/react-components/babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

packages/react-components/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@vckit/react-components",
   "version": "1.0.0-beta.5",
-  "dependencies": {
-    "qrcode": "^1.5.3"
-  },
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
   "scripts": {
     "start": "react-scripts start",
+    "build": "tsc",
+    "build:watch": "tsc -b --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -28,7 +30,15 @@
       "last 1 safari version"
     ]
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.3"
+  },
   "devDependencies": {
+    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-typescript": "^7.22.5",
     "@storybook/addon-essentials": "^7.1.0-rc.2",
     "@storybook/addon-interactions": "^7.1.0-rc.2",
     "@storybook/addon-links": "^7.1.0-rc.2",
@@ -53,6 +63,8 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "storybook": "^7.1.0-rc.2",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
     "web-vitals": "^2.1.4",
     "webpack": "^5.88.1"
   }

packages/react-components/src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css';
-import { QrCodeDocumentWrapper } from './components/qrCodeDocumentWrapper';
+import { QrCodeDocumentWrapper } from './components/QrCodeDocumentWrapper';
 
 /**
  * The App component is the entry point of the application. It is responsible for render the components as the demo page.

packages/react-components/src/components/qrCodeDocumentWrapper/qrCodeDocumentContainer.tsx → packages/react-components/src/components/QrCodeDocumentWrapper/QrCodeDocumentContainer.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties, useCallback, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import type { XYCoord } from 'react-dnd';
-import { QRCode } from '../qrCode';
+import { QRCode } from '../QrCode/QrCode.js';
 
 const styles: { [key: string]: CSSProperties } = {
   renderContainer: {

packages/react-components/src/components/qrCode/index.ts

@@ -1 +1 @@
-export { QRCode } from './qrCode';
+export { QRCode } from './QrCode.js';

packages/react-components/src/components/qrCodeDocumentWrapper/index.tsx → packages/react-components/src/components/qrCodeDocumentWrapper/QrCodeDocumentWrapper.tsx

@@ -3,7 +3,7 @@ import { DndProvider } from 'react-dnd';
 import {
   QrCodeDocumentContainer,
   QrCodeDocumentContainerProps,
-} from './qrCodeDocumentContainer';
+} from './QrCodeDocumentContainer.js';
 
 export function QrCodeDocumentWrapper({
   qrCodeValue,

packages/react-components/src/components/qrCodeDocumentWrapper/index.ts

@@ -0,0 +1 @@
+export { QrCodeDocumentWrapper } from './QrCodeDocumentWrapper.js';

packages/react-components/src/index.ts

@@ -0,0 +1 @@
+export * from './components/QrCodeDocumentWrapper/QrCodeDocumentWrapper.js';

packages/react-components/src/stories/qrCodeDocumentWrapper.stories.js → packages/react-components/stories/QrCodeDocumentWrapper.stories.js

@@ -1,4 +1,4 @@
-import { QrCodeDocumentWrapper } from '../components/qrCodeDocumentWrapper';
+import { QrCodeDocumentWrapper } from '../src/components/QrCodeDocumentWrapper';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {

packages/react-components/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -13,14 +13,17 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "outDir": "lib",
+    "declaration": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "rootDir": "src"
   },
   "include": [
-    "src"
+    "src",
   ]
-}
+}