@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/src/components/organisms/Form/Form.tsx

@@ -1,160 +1,160 @@
-/* eslint-disable react-refresh/only-export-components */
-// Form.tsx
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form";
-import {
-  StyledFormItem,
-  StyledFormLabel,
-  StyledFormDescription,
-  StyledFormMessage,
-} from "./Form.styles";
-
-/* Reexporta o FormProvider como Form para facilitar o uso */
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-type FormItemContextValue = { id: string };
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ ...props }, ref) => {
-  const id = React.useId();
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <StyledFormItem ref={ref} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = "FormItem";
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-const FormLabel = React.forwardRef<
-  HTMLLabelElement,
-  React.ComponentPropsWithoutRef<"label">
->(({ children, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-  return (
-    <StyledFormLabel ref={ref} htmlFor={formItemId} error={!!error} {...props}>
-      {children}
-    </StyledFormLabel>
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ children, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-  return (
-    <StyledFormDescription ref={ref} id={formDescriptionId} {...props}>
-      {children}
-    </StyledFormDescription>
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-  if (!body) return null;
-  return (
-    <StyledFormMessage ref={ref} id={formMessageId} {...props}>
-      {body}
-    </StyledFormMessage>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
+/* eslint-disable react-refresh/only-export-components */
+// Form.tsx
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form';
+import {
+  StyledFormItem,
+  StyledFormLabel,
+  StyledFormDescription,
+  StyledFormMessage,
+} from './Form.styles';
+
+/* Reexporta o FormProvider como Form para facilitar o uso */
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+type FormItemContextValue = { id: string };
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ ...props }, ref) => {
+  const id = React.useId();
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <StyledFormItem ref={ref} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+const FormLabel = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentPropsWithoutRef<'label'>
+>(({ children, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return (
+    <StyledFormLabel ref={ref} htmlFor={formItemId} error={!!error} {...props}>
+      {children}
+    </StyledFormLabel>
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ children, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return (
+    <StyledFormDescription ref={ref} id={formDescriptionId} {...props}>
+      {children}
+    </StyledFormDescription>
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) return null;
+  return (
+    <StyledFormMessage ref={ref} id={formMessageId} {...props}>
+      {body}
+    </StyledFormMessage>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/src/components/organisms/ListagemUltimasEmissoes/ListagemUltimasEmissoes.styles.tsx

@@ -1,114 +1,115 @@
-import styled from "styled-components";
-import {
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-  semanticRadius,
-} from "../../../styles/tokens";
-
-export const TableWrapper = styled.div`
-  width: 100%;
-  overflow-x: auto;
-  background-color: ${semanticColors.base.background};
-  border: 1px solid ${semanticColors.global.border.default};
-  padding: ${semanticSizes.global.padding.xl};
-  border-radius: ${semanticRadius.global.radius.md2};
-`;
-
-export const Table = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-`;
-
-export const TableHead = styled.thead`
-  background-color: ${semanticColors.base.background};
-`;
-
-export const TableRow = styled.tr`
-  &:last-child td {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-`;
-
-export const TableHeader = styled.th`
-  padding: ${semanticSizes.global.padding.md} 0;
-  text-align: left;
-  border: 0px;
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  color: ${semanticColors.global.text.onSurface.enabled};
-
-  &.center {
-    text-align: center;
-  }
-`;
-
-export const TableData = styled.td`
-  padding: ${semanticSizes.global.padding.lg} 0 ${semanticSizes.global.padding["2xl"]};
-  border-bottom: 1px solid ${semanticColors.neutral[200]};
-  text-align: left;
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  color: ${semanticColors.global.text.default.enabled};
-
-  &.center {
-    text-align: center;
-
-    img {
-      display: block;
-      margin: 0 auto;
-    }
-  }
-
-  img {
-    cursor: pointer;
-  }
-`;
-
-export const TableWrapperHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  margin-bottom: ${semanticSizes.global.gap.lg};
-`;
-
-export const TableWrapperTitle = styled.h2`
-  font-size: ${typographyTokens.fontSizes.headingM};
-  font-weight: ${typographyTokens.fontWeights.medium};
-  margin: 0;
-  color: ${semanticColors.base.text};
-`;
-
-export const TableWrapperLink = styled.button`
-  display: flex;
-  flex-direction: row;
-  font-size: ${typographyTokens.fontSizes.labelL};
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  color: ${semanticColors.branding.text.accent.enabled};
-  gap: ${semanticSizes.global.gap.sm};
-  align-items: center;
-  cursor: pointer;
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
-export const LoadingContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: ${semanticSizes.global.padding["3xl"]};
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  color: ${semanticColors.global.text.onSurface.subtitle};
-`;
-
-export const ErrorContainer = styled(LoadingContainer)`
-  color: ${semanticColors.danger.text.feedback.strong};
-`;
+import styled from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+  semanticRadius,
+} from '../../../styles/tokens';
+
+export const TableWrapper = styled.div`
+  width: 100%;
+  overflow-x: auto;
+  background-color: ${semanticColors.base.background};
+  border: 1px solid ${semanticColors.global.border.default};
+  padding: ${semanticSizes.global.padding.xl};
+  border-radius: ${semanticRadius.global.radius.md2};
+`;
+
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+
+export const TableHead = styled.thead`
+  background-color: ${semanticColors.base.background};
+`;
+
+export const TableRow = styled.tr`
+  &:last-child td {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+`;
+
+export const TableHeader = styled.th`
+  padding: ${semanticSizes.global.padding.md} 0;
+  text-align: left;
+  border: 0px;
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  color: ${semanticColors.global.text.onSurface.enabled};
+
+  &.center {
+    text-align: center;
+  }
+`;
+
+export const TableData = styled.td`
+  padding: ${semanticSizes.global.padding.lg} 0
+    ${semanticSizes.global.padding['2xl']};
+  border-bottom: 1px solid ${semanticColors.neutral[200]};
+  text-align: left;
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.default.enabled};
+
+  &.center {
+    text-align: center;
+
+    img {
+      display: block;
+      margin: 0 auto;
+    }
+  }
+
+  img {
+    cursor: pointer;
+  }
+`;
+
+export const TableWrapperHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  margin-bottom: ${semanticSizes.global.gap.lg};
+`;
+
+export const TableWrapperTitle = styled.h2`
+  font-size: ${typographyTokens.fontSizes.headingM};
+  font-weight: ${typographyTokens.fontWeights.medium};
+  margin: 0;
+  color: ${semanticColors.base.text};
+`;
+
+export const TableWrapperLink = styled.button`
+  display: flex;
+  flex-direction: row;
+  font-size: ${typographyTokens.fontSizes.labelL};
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  color: ${semanticColors.branding.text.accent.enabled};
+  gap: ${semanticSizes.global.gap.sm};
+  align-items: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${semanticSizes.global.padding['3xl']};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.onSurface.subtitle};
+`;
+
+export const ErrorContainer = styled(LoadingContainer)`
+  color: ${semanticColors.danger.text.feedback.strong};
+`;