@lets-events/react 11.8.1 → 12.1.0

package/src/utils/uploadService.ts

@@ -0,0 +1,180 @@
+export interface UploadConfig {
+  apiUrl: string;
+  s3Bucket: string;
+  s3Region: string;
+  s3Url: string;
+  timeout?: number;
+  maxFileSize?: number;
+  endpoints?: {
+    presignedUrl: string;
+    upload: string;
+  };
+}
+
+interface UploadResponse {
+  url: string;
+  filename: string;
+  size: number;
+  type: string;
+}
+
+interface UploadProgress {
+  amount: number;
+  message: string;
+}
+const generateUniqueFilename = (originalName: string): string => {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 8);
+  const extension = originalName.split(".").pop();
+
+  return `${timestamp}_${random}.${extension}`;
+};
+
+export class UploadService {
+  static async getPresignedUrl(
+    filename: string,
+    contentType: string,
+    config: UploadConfig
+  ): Promise<string> {
+    const apiUrl = config.apiUrl;
+    const presignedUrlEndpoint = config.endpoints?.presignedUrl;
+    const bucket = config.s3Bucket;
+
+    try {
+      const response = await fetch(`${apiUrl}${presignedUrlEndpoint}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          filename,
+          contentType,
+          bucket,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Falha ao gerar URL de upload");
+      }
+
+      const data = await response.json();
+      return data.presignedUrl;
+    } catch (error) {
+      console.error("Erro ao gerar URL pré-assinada:", error);
+      throw new Error("Falha ao gerar URL de upload");
+    }
+  }
+
+  static async uploadToS3(
+    file: File,
+    config: UploadConfig,
+    onProgress?: (progress: UploadProgress) => void
+  ): Promise<UploadResponse> {
+    try {
+      const uniqueFilename = generateUniqueFilename(file.name);
+      const blob = new Blob([file], { type: file.type });
+
+      const s3Url = `${config.s3Url}/${uniqueFilename}`;
+
+      return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+
+        xhr.upload.addEventListener("progress", (event) => {
+          if (event.lengthComputable) {
+            const percentComplete = Math.round(
+              (event.loaded / event.total) * 100
+            );
+            onProgress?.({
+              amount: percentComplete,
+              message: `Fazendo upload... ${percentComplete}%`,
+            });
+          }
+        });
+
+        xhr.addEventListener("load", () => {
+          if (xhr.status === 200) {
+            resolve({
+              url: s3Url,
+              filename: uniqueFilename,
+              size: file.size,
+              type: file.type,
+            });
+          } else {
+            reject(new Error(`Upload falhou com status: ${xhr.status}`));
+          }
+        });
+
+        xhr.addEventListener("error", () => {
+          reject(new Error("Erro de rede durante upload"));
+        });
+
+        xhr.open("PUT", s3Url);
+        xhr.setRequestHeader("Content-Type", file.type);
+        xhr.send(blob);
+      });
+    } catch (error) {
+      console.error("Erro no upload:", error);
+      throw error;
+    }
+  }
+
+  static async uploadViaAPI(
+    file: File,
+    config: UploadConfig,
+    onProgress?: (progress: UploadProgress) => void
+  ): Promise<UploadResponse> {
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      const bucket = config.s3Bucket;
+      formData.append("bucket", bucket);
+
+      const xhr = new XMLHttpRequest();
+
+      return new Promise((resolve, reject) => {
+        xhr.upload.addEventListener("progress", (event) => {
+          if (event.lengthComputable) {
+            const percentComplete = Math.round(
+              (event.loaded / event.total) * 100
+            );
+            onProgress?.({
+              amount: percentComplete,
+              message: `Fazendo upload... ${percentComplete}%`,
+            });
+          }
+        });
+
+        xhr.addEventListener("load", () => {
+          if (xhr.status === 200) {
+            try {
+              const response = JSON.parse(xhr.responseText);
+              resolve({
+                url: response.url,
+                filename: response.filename,
+                size: file.size,
+                type: file.type,
+              });
+            } catch (error) {
+              reject(new Error("Resposta inválida do servidor"));
+            }
+          } else {
+            reject(new Error(`Upload falhou com status: ${xhr.status}`));
+          }
+        });
+
+        xhr.addEventListener("error", () => {
+          reject(new Error("Erro de rede durante upload"));
+        });
+
+        const apiUrl = config.apiUrl;
+        const uploadEndpoint = config.endpoints?.upload;
+
+        xhr.open("POST", `${apiUrl}${uploadEndpoint}`);
+        xhr.send(formData);
+      });
+    } catch (error) {
+      console.error("Erro no upload via API:", error);
+      throw error;
+    }
+  }
+}

package/tsconfig.json

@@ -1,4 +1,4 @@
-{
-  "extends": "@lets-events/ts-config/react.json",
-  "include": ["src"]
+{
+  "extends": "@lets-events/ts-config/react.json",
+  "include": ["src"]
 }

package/tsup.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.tsx"],
+  format: ["esm", "cjs"],
+  dts: true,
+  external: ["react"],
+  define: {
+    "process.env.REACT_APP_API_URL": JSON.stringify(
+      process.env.REACT_APP_API_URL || "https://api.lets.events"
+    ),
+    "process.env.REACT_APP_S3_BUCKET": JSON.stringify(
+      process.env.REACT_APP_S3_BUCKET || "lets.events-development"
+    ),
+    "process.env.REACT_APP_S3_REGION": JSON.stringify(
+      process.env.REACT_APP_S3_REGION || "sa-east-1"
+    ),
+    "process.env.REACT_APP_AWS_URL": JSON.stringify(
+      process.env.REACT_APP_AWS_URL ||
+        "https://s3-sa-east-1.amazonaws.com/lets.events-development"
+    ),
+    "process.env.REACT_APP_UPLOAD_TIMEOUT": JSON.stringify(
+      process.env.REACT_APP_UPLOAD_TIMEOUT || "30000"
+    ),
+    "process.env.REACT_APP_MAX_FILE_SIZE": JSON.stringify(
+      process.env.REACT_APP_MAX_FILE_SIZE || "5242880"
+    ),
+    "process.env.NODE_ENV": JSON.stringify(
+      process.env.NODE_ENV || "development"
+    ),
+    "process.env.REACT_APP_AWS_ACCESS_KEY_ID": JSON.stringify(
+      process.env.REACT_APP_AWS_ACCESS_KEY_ID || ""
+    ),
+    "process.env.REACT_APP_AWS_SECRET_ACCESS_KEY": JSON.stringify(
+      process.env.REACT_APP_AWS_SECRET_ACCESS_KEY || ""
+    ),
+  },
+});

package/dist/index.css

@@ -1,171 +0,0 @@
-/* ../../node_modules/react-international-phone/dist/index.css */
-.react-international-phone-country-selector {
-  position: relative;
-}
-.react-international-phone-country-selector-button {
-  display: flex;
-  height: var(--react-international-phone-height, 36px);
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));
-  margin: 0;
-  appearance: button;
-  -webkit-appearance: button;
-  background-color: var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));
-  cursor: pointer;
-  text-transform: none;
-  user-select: none;
-}
-.react-international-phone-country-selector-button:hover {
-  background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
-}
-.react-international-phone-country-selector-button--hide-dropdown {
-  cursor: auto;
-}
-.react-international-phone-country-selector-button--hide-dropdown:hover {
-  background-color: transparent;
-}
-.react-international-phone-country-selector-button__button-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.react-international-phone-country-selector-button__flag-emoji {
-  margin: 0 4px;
-}
-.react-international-phone-country-selector-button__flag-emoji--disabled {
-  opacity: .75;
-}
-.react-international-phone-country-selector-button__dropdown-arrow {
-  border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);
-  border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-  border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-  margin-right: 4px;
-  transition: all .1s ease-out;
-}
-.react-international-phone-country-selector-button__dropdown-arrow--active {
-  transform: rotateX(180deg);
-}
-.react-international-phone-country-selector-button__dropdown-arrow--disabled {
-  border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
-}
-.react-international-phone-country-selector-button--disabled {
-  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
-  cursor: auto;
-}
-.react-international-phone-country-selector-button--disabled:hover {
-  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
-}
-.react-international-phone-flag-emoji {
-  width: var(--react-international-phone-flag-width, 24px);
-  height: var(--react-international-phone-flag-height, 24px);
-  box-sizing: border-box;
-}
-.react-international-phone-country-selector-dropdown {
-  position: absolute;
-  z-index: 1;
-  top: var(--react-international-phone-dropdown-top, 44px);
-  left: var(--react-international-phone-dropdown-left, 0);
-  display: flex;
-  width: 300px;
-  max-height: 200px;
-  flex-direction: column;
-  padding: 4px 0;
-  margin: 0;
-  background-color: var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));
-  box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));
-  color: var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
-  list-style: none;
-  overflow-y: scroll;
-}
-.react-international-phone-country-selector-dropdown__preferred-list-divider {
-  height: 1px;
-  border: none;
-  margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
-  background: var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro));
-}
-.react-international-phone-country-selector-dropdown__list-item {
-  display: flex;
-  min-height: var(--react-international-phone-dropdown-item-height, 28px);
-  box-sizing: border-box;
-  align-items: center;
-  padding: 2px 8px;
-}
-.react-international-phone-country-selector-dropdown__list-item-flag-emoji {
-  margin-right: 8px;
-}
-.react-international-phone-country-selector-dropdown__list-item-country-name {
-  overflow: hidden;
-  margin-right: 8px;
-  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.react-international-phone-country-selector-dropdown__list-item-dial-code {
-  color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
-  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-}
-.react-international-phone-country-selector-dropdown__list-item:hover {
-  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
-  cursor: pointer;
-}
-.react-international-phone-country-selector-dropdown__list-item--selected,
-.react-international-phone-country-selector-dropdown__list-item--focused {
-  background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
-  color: var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
-}
-.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,
-.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code {
-  color: var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray));
-}
-.react-international-phone-country-selector-dropdown__list-item--focused {
-  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
-}
-.react-international-phone-dial-code-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 8px;
-  border: 1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));
-  margin-right: -1px;
-  background-color: var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));
-  color: var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));
-  font-size: var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px));
-}
-.react-international-phone-dial-code-preview--disabled {
-  background-color: var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
-  color: var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666));
-}
-.react-international-phone-input-container {
-  display: flex;
-}
-.react-international-phone-input-container .react-international-phone-country-selector-button {
-  border-radius: var(--react-international-phone-border-radius, 4px);
-  margin-right: -1px;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.react-international-phone-input-container .react-international-phone-input {
-  overflow: visible;
-  height: var(--react-international-phone-height, 36px);
-  box-sizing: border-box;
-  padding: 0 8px;
-  border: 1px solid var(--react-international-phone-border-color, gainsboro);
-  border-radius: var(--react-international-phone-border-radius, 4px);
-  margin: 0;
-  background-color: var(--react-international-phone-background-color, white);
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  color: var(--react-international-phone-text-color, #222);
-  font-family: inherit;
-  font-size: var(--react-international-phone-font-size, 13px);
-}
-.react-international-phone-input-container .react-international-phone-input:focus {
-  outline: none;
-}
-.react-international-phone-input-container .react-international-phone-input--disabled {
-  background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
-  color: var(--react-international-phone-disabled-text-color, #666);
-}