migrated app to use the React framework

.gitignore

@@ -1,5 +1,3 @@
-node_modules
-dist
 .DS_Store
-api_key.py
-venv/
+dist/
+node_modules/

README.md

@@ -1,13 +1,13 @@
 ## About
 
-This project has been created with _@adobe/create-ccweb-add-on_. 
-This add-on demonstrates how to use the Export APIs to export content in various formats including jpeg, png, pdf and mp4.
+This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using React and TypeScript with Document Sandbox Runtime.
 
 ## Tools
 
 -   HTML
 -   CSS
--   JavaScript
+-   React
+-   TypeScript
 
 ## Setup
 

package.json

@@ -1,40 +1,40 @@
 {
-    "name": "export-sample",
+    "name": "project",
     "version": "1.0.0",
     "description": "Adobe Creative Cloud Web Add-on.",
-    "type": "module",
     "scripts": {
         "clean": "ccweb-add-on-scripts clean",
         "build": "ccweb-add-on-scripts build --use webpack",
-        "start": "ccweb-add-on-scripts start --use webpack"
-    },
-    "dependencies": {
-        "@spectrum-web-components/button": "^0.19.0",
-        "@spectrum-web-components/divider": "^0.6.6",
-        "@spectrum-web-components/field-label": "^0.8.0",
-        "@spectrum-web-components/menu": "^0.16.0",
-        "@spectrum-web-components/number-field": "^0.5.12",
-        "@spectrum-web-components/picker": "^0.13.0",
-        "@spectrum-web-components/styles": "^0.16.0",
-        "@spectrum-web-components/tabs": "^0.11.0",
-        "@spectrum-web-components/textfield": "^0.13.0",
-        "@spectrum-web-components/theme": "0.13.0",
-        "@spectrum-web-components/toast": "^0.11.15"
+        "start": "ccweb-add-on-scripts start --use webpack",
+        "package": "ccweb-add-on-scripts package --use webpack"
     },
     "keywords": [
         "Adobe",
         "Creative Cloud Web",
         "Add-on",
         "panel"
     ],
+    "dependencies": {
+        "@swc-react/button": "0.39.4",
+        "@swc-react/theme": "0.39.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    },
     "devDependencies": {
-        "@adobe/ccweb-add-on-scripts": "^2.0.0",
-        "copy-webpack-plugin": "^9.1.0",
-        "css-loader": "^6.5.1",
-        "html-webpack-plugin": "5.5.0",
-        "mini-css-extract-plugin": "^2.7.5",
-        "rimraf": "3.0.2",
-        "webpack": "^5.64.1",
-        "webpack-cli": "^4.9.1"
+        "@adobe/ccweb-add-on-scripts": "^2.3.1",
+        "@types/adobe__ccweb-add-on-sdk": "^1.3.0",
+        "@types/react": "18.2.21",
+        "@types/react-dom": "18.2.7",
+        "autoprefixer": "^10.4.20",
+        "copy-webpack-plugin": "11.0.0",
+        "css-loader": "6.8.1",
+        "html-webpack-plugin": "5.5.3",
+        "postcss": "^8.4.40",
+        "style-loader": "3.3.3",
+        "tailwindcss": "^3.4.7",
+        "ts-loader": "9.5.1",
+        "typescript": "5.3.2",
+        "webpack": "5.89.0",
+        "webpack-cli": "5.1.4"
     }
 }

postcss.confg.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};