@lets-events/react 11.8.0 → 12.0.0

package/src/styles/index.ts

@@ -1,38 +1,38 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  radii,
-  space,
-} from '@lets-events/tokens'
-
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-    gap: 'space'
-  },
-  theme: {
-    colors,
-    fontSizes,
-    fonts,
-    fontWeights,
-    lineHeights,
-    radii,
-    space,
-  },
-})
+import {
+  colors,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space,
+} from '@lets-events/tokens'
+
+import { createStitches, defaultThemeMap } from '@stitches/react'
+
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config,
+} = createStitches({
+  themeMap: {
+    ...defaultThemeMap,
+    height: 'space',
+    width: 'space',
+    gap: 'space'
+  },
+  theme: {
+    colors,
+    fontSizes,
+    fonts,
+    fontWeights,
+    lineHeights,
+    radii,
+    space,
+  },
+})

package/src/types/typographyValues.ts

@@ -1,179 +1,179 @@
-export const typographyValues = {
-    displayLarge: {
-        fontSize: '$displayLarge',
-        lineHeight: '$displayLarge',
-        letterSpacing: '$displayLarge',
-
-    },
-    displayMedium: {
-        fontSize: '$displayMedium',
-        lineHeight: '$displayMedium',
-        letterSpacing: '$displayMedium',
-    },
-    displaySmall: {
-        fontSize: '$displaySmall',
-        lineHeight: '$displaySmall',
-        letterSpacing: '$displaySmall',
-    },
-    headline1: {
-        fontSize: '$headline1',
-        lineHeight: '$headline1',
-    },
-    headline2: {
-        fontSize: '$headline2',
-        lineHeight: '$headline2',
-    },
-    headline3: {
-        fontSize: '$headline3',
-        lineHeight: '$headline3',
-    },
-    headline4: {
-        fontSize: '$headline4',
-        lineHeight: '$headline4',
-    },
-    headline5: {
-        fontSize: '$headline5',
-        lineHeight: '$headline5',
-    },
-    headline6: {
-        fontSize: '$headline6',
-        lineHeight: '$headline6',
-    },
-    headline7: {
-        fontSize: '$headline7',
-        lineHeight: '$headline7',
-    },
-    headline8: {
-        fontSize: '$headline8',
-        lineHeight: '$headline8',
-    },
-    bodyXL: {
-        fontSize: '$bodyXL',
-        lineHeight: '$bodyXL',
-    },
-    bodyL: {
-        fontSize: '$bodyL',
-        lineHeight: '$bodyL',
-    },
-    bodyM: {
-        fontSize: '$bodyM',
-        lineHeight: '$bodyM',
-    },
-    bodyS: {
-        fontSize: '$bodyS',
-        lineHeight: '$bodyS',
-    },
-    bodyXS: {
-        fontSize: '$bodyXS',
-        lineHeight: '$bodyXS',
-    },
-    bodyXXS: {
-        fontSize: '$bodyXXS',
-        lineHeight: '$bodyXXS',
-    },
-    badgeLarge: {
-        fontSize: '$badgeLarge',
-        lineHeight: '$badgeLarge',
-    },
-    badgeMedium: {
-        fontSize: '$badgeMedium',
-        lineHeight: '$badgeMedium',
-    },
-    badgeSmall: {
-        fontSize: '$badgeSmall',
-        lineHeight: '$badgeSmall',
-    },
-    badgeExtraSmall: {
-        fontSize: '$badgeExtraSmall',
-        lineHeight: '$badgeExtraSmall',
-    },
-    tooltip: {
-        fontSize: '$tooltip',
-        lineHeight: '$tooltip',
-    },
-    popoversRegular: {
-        fontSize: '$popoversRegular',
-        lineHeight: '$popoversRegular',
-    },
-    captionLarge: {
-        fontSize: '$captionLarge',
-        lineHeight: '$captionLarge',
-    },
-    captionMedium: {
-        fontSize: '$captionMedium',
-        lineHeight: '$captionMedium',
-    },
-    captionSmall: {
-        fontSize: '$captionSmall',
-        lineHeight: '$captionSmall',
-    },
-    buttonLarge: {
-        fontSize: '$buttonLarge',
-        lineHeight: '$buttonLarge',
-    },
-    buttonMedium: {
-        fontSize: '$buttonMedium',
-        lineHeight: '$buttonMedium',
-    },
-    buttonSmall: {
-        fontSize: '$buttonSmall',
-        lineHeight: '$buttonSmall',
-    },
-    buttonExtraSmall: {
-        fontSize: '$buttonExtraSmall',
-        lineHeight: '$buttonExtraSmall',
-    },
-    labelLarge: {
-        fontSize: '$labelLarge',
-        lineHeight: '$labelLarge',
-    },
-    labelMedium: {
-        fontSize: '$labelMedium',
-        lineHeight: '$labelMedium',
-    },
-    labelSmall: {
-        fontSize: '$labelSmall',
-        lineHeight: '$labelSmall',
-    },
-    labelExtraSmall: {
-        fontSize: '$labelExtraSmall',
-        lineHeight: '$labelExtraSmall',
-    },
-
-}
-export const typographyButtonValues = {
-    buttonLarge: {
-        fontSize: '$buttonLarge',
-        lineHeight: '$buttonLarge',
-    },
-    buttonMedium: {
-        fontSize: '$buttonMedium',
-        lineHeight: '$buttonMedium',
-    },
-    buttonSmall: {
-        fontSize: '$buttonSmall',
-        lineHeight: '$buttonSmall',
-    },
-    buttonExtraSmall: {
-        fontSize: '$buttonExtraSmall',
-        lineHeight: '$buttonExtraSmall',
-    },
-}
-export const typographyLabelValues = {
-    labelLarge: {
-        fontSize: '$labelLarge',
-        lineHeight: '$labelLarge',
-    },
-    labelMedium: {
-        fontSize: '$labelMedium',
-        lineHeight: '$labelMedium',
-    },
-    labelSmall: {
-        fontSize: '$labelSmall',
-        lineHeight: '$labelSmall',
-    },
-    labelExtraSmall: {
-        fontSize: '$labelExtraSmall',
-        lineHeight: '$labelExtraSmall',
-    },
+export const typographyValues = {
+    displayLarge: {
+        fontSize: '$displayLarge',
+        lineHeight: '$displayLarge',
+        letterSpacing: '$displayLarge',
+
+    },
+    displayMedium: {
+        fontSize: '$displayMedium',
+        lineHeight: '$displayMedium',
+        letterSpacing: '$displayMedium',
+    },
+    displaySmall: {
+        fontSize: '$displaySmall',
+        lineHeight: '$displaySmall',
+        letterSpacing: '$displaySmall',
+    },
+    headline1: {
+        fontSize: '$headline1',
+        lineHeight: '$headline1',
+    },
+    headline2: {
+        fontSize: '$headline2',
+        lineHeight: '$headline2',
+    },
+    headline3: {
+        fontSize: '$headline3',
+        lineHeight: '$headline3',
+    },
+    headline4: {
+        fontSize: '$headline4',
+        lineHeight: '$headline4',
+    },
+    headline5: {
+        fontSize: '$headline5',
+        lineHeight: '$headline5',
+    },
+    headline6: {
+        fontSize: '$headline6',
+        lineHeight: '$headline6',
+    },
+    headline7: {
+        fontSize: '$headline7',
+        lineHeight: '$headline7',
+    },
+    headline8: {
+        fontSize: '$headline8',
+        lineHeight: '$headline8',
+    },
+    bodyXL: {
+        fontSize: '$bodyXL',
+        lineHeight: '$bodyXL',
+    },
+    bodyL: {
+        fontSize: '$bodyL',
+        lineHeight: '$bodyL',
+    },
+    bodyM: {
+        fontSize: '$bodyM',
+        lineHeight: '$bodyM',
+    },
+    bodyS: {
+        fontSize: '$bodyS',
+        lineHeight: '$bodyS',
+    },
+    bodyXS: {
+        fontSize: '$bodyXS',
+        lineHeight: '$bodyXS',
+    },
+    bodyXXS: {
+        fontSize: '$bodyXXS',
+        lineHeight: '$bodyXXS',
+    },
+    badgeLarge: {
+        fontSize: '$badgeLarge',
+        lineHeight: '$badgeLarge',
+    },
+    badgeMedium: {
+        fontSize: '$badgeMedium',
+        lineHeight: '$badgeMedium',
+    },
+    badgeSmall: {
+        fontSize: '$badgeSmall',
+        lineHeight: '$badgeSmall',
+    },
+    badgeExtraSmall: {
+        fontSize: '$badgeExtraSmall',
+        lineHeight: '$badgeExtraSmall',
+    },
+    tooltip: {
+        fontSize: '$tooltip',
+        lineHeight: '$tooltip',
+    },
+    popoversRegular: {
+        fontSize: '$popoversRegular',
+        lineHeight: '$popoversRegular',
+    },
+    captionLarge: {
+        fontSize: '$captionLarge',
+        lineHeight: '$captionLarge',
+    },
+    captionMedium: {
+        fontSize: '$captionMedium',
+        lineHeight: '$captionMedium',
+    },
+    captionSmall: {
+        fontSize: '$captionSmall',
+        lineHeight: '$captionSmall',
+    },
+    buttonLarge: {
+        fontSize: '$buttonLarge',
+        lineHeight: '$buttonLarge',
+    },
+    buttonMedium: {
+        fontSize: '$buttonMedium',
+        lineHeight: '$buttonMedium',
+    },
+    buttonSmall: {
+        fontSize: '$buttonSmall',
+        lineHeight: '$buttonSmall',
+    },
+    buttonExtraSmall: {
+        fontSize: '$buttonExtraSmall',
+        lineHeight: '$buttonExtraSmall',
+    },
+    labelLarge: {
+        fontSize: '$labelLarge',
+        lineHeight: '$labelLarge',
+    },
+    labelMedium: {
+        fontSize: '$labelMedium',
+        lineHeight: '$labelMedium',
+    },
+    labelSmall: {
+        fontSize: '$labelSmall',
+        lineHeight: '$labelSmall',
+    },
+    labelExtraSmall: {
+        fontSize: '$labelExtraSmall',
+        lineHeight: '$labelExtraSmall',
+    },
+
+}
+export const typographyButtonValues = {
+    buttonLarge: {
+        fontSize: '$buttonLarge',
+        lineHeight: '$buttonLarge',
+    },
+    buttonMedium: {
+        fontSize: '$buttonMedium',
+        lineHeight: '$buttonMedium',
+    },
+    buttonSmall: {
+        fontSize: '$buttonSmall',
+        lineHeight: '$buttonSmall',
+    },
+    buttonExtraSmall: {
+        fontSize: '$buttonExtraSmall',
+        lineHeight: '$buttonExtraSmall',
+    },
+}
+export const typographyLabelValues = {
+    labelLarge: {
+        fontSize: '$labelLarge',
+        lineHeight: '$labelLarge',
+    },
+    labelMedium: {
+        fontSize: '$labelMedium',
+        lineHeight: '$labelMedium',
+    },
+    labelSmall: {
+        fontSize: '$labelSmall',
+        lineHeight: '$labelSmall',
+    },
+    labelExtraSmall: {
+        fontSize: '$labelExtraSmall',
+        lineHeight: '$labelExtraSmall',
+    },
 }

package/src/utils/getNestedValue.ts

@@ -1,3 +1,3 @@
-export function getNestedValue(obj: any, path: string): any {
-  return path.split(".").reduce((acc, key) => acc?.[key], obj);
-}
+export function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((acc, key) => acc?.[key], obj);
+}

package/src/utils/states.ts

@@ -1,29 +1,29 @@
-export const brazilianStates = [
-  { value: "AC", label: "Acre" },
-  { value: "AL", label: "Alagoas" },
-  { value: "AP", label: "Amapá" },
-  { value: "AM", label: "Amazonas" },
-  { value: "BA", label: "Bahia" },
-  { value: "CE", label: "Ceará" },
-  { value: "DF", label: "Distrito Federal" },
-  { value: "ES", label: "Espírito Santo" },
-  { value: "GO", label: "Goiás" },
-  { value: "MA", label: "Maranhão" },
-  { value: "MT", label: "Mato Grosso" },
-  { value: "MS", label: "Mato Grosso do Sul" },
-  { value: "MG", label: "Minas Gerais" },
-  { value: "PA", label: "Pará" },
-  { value: "PB", label: "Paraíba" },
-  { value: "PR", label: "Paraná" },
-  { value: "PE", label: "Pernambuco" },
-  { value: "PI", label: "Piauí" },
-  { value: "RJ", label: "Rio de Janeiro" },
-  { value: "RN", label: "Rio Grande do Norte" },
-  { value: "RS", label: "Rio Grande do Sul" },
-  { value: "RO", label: "Rondônia" },
-  { value: "RR", label: "Roraima" },
-  { value: "SC", label: "Santa Catarina" },
-  { value: "SP", label: "São Paulo" },
-  { value: "SE", label: "Sergipe" },
-  { value: "TO", label: "Tocantins" },
-];
+export const brazilianStates = [
+  { value: "AC", label: "Acre" },
+  { value: "AL", label: "Alagoas" },
+  { value: "AP", label: "Amapá" },
+  { value: "AM", label: "Amazonas" },
+  { value: "BA", label: "Bahia" },
+  { value: "CE", label: "Ceará" },
+  { value: "DF", label: "Distrito Federal" },
+  { value: "ES", label: "Espírito Santo" },
+  { value: "GO", label: "Goiás" },
+  { value: "MA", label: "Maranhão" },
+  { value: "MT", label: "Mato Grosso" },
+  { value: "MS", label: "Mato Grosso do Sul" },
+  { value: "MG", label: "Minas Gerais" },
+  { value: "PA", label: "Pará" },
+  { value: "PB", label: "Paraíba" },
+  { value: "PR", label: "Paraná" },
+  { value: "PE", label: "Pernambuco" },
+  { value: "PI", label: "Piauí" },
+  { value: "RJ", label: "Rio de Janeiro" },
+  { value: "RN", label: "Rio Grande do Norte" },
+  { value: "RS", label: "Rio Grande do Sul" },
+  { value: "RO", label: "Rondônia" },
+  { value: "RR", label: "Roraima" },
+  { value: "SC", label: "Santa Catarina" },
+  { value: "SP", label: "São Paulo" },
+  { value: "SE", label: "Sergipe" },
+  { value: "TO", label: "Tocantins" },
+];

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"]
 }