@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

package/src/components/organisms/ExportExcelModal/ExportExcelModal.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import {
+  CloseIcon,
+  Content,
+  Header,
+  Overlay,
+  Panel,
+} from './ExportExcelModal.styles';
+import FieldSelector from '../../molecules/FieldSelector/FieldSelector';
+import ButtonGroup from '@/components/molecules/ButtonGroup/ButtonGroup';
+export const ExportExcelModal = ({
+  open,
+  onOpenChange,
+  onClose,
+  data,
+  title,
+  description,
+  onExport,
+  onSave,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
+  onRetry?: () => void;
+  data: any;
+  title: string;
+  description: string;
+  onExport?: (data: any) => void;
+  onSave?: (data: any) => void;
+}) => {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Overlay />
+      <Content>
+        <Panel>
+          <Header>
+            <div>
+              <Dialog.Title>{title}</Dialog.Title>
+              <Dialog.Description>{description}</Dialog.Description>
+            </div>
+
+            <CloseIcon aria-label="Fechar" onClick={onClose}>
+              <X size={28} color="#BDBDBD" />
+            </CloseIcon>
+          </Header>
+
+          <FieldSelector
+            availableFields={data.available}
+            selectedFields={data.selected}
+            setAvailableFields={data.setAvailable}
+            setSelectedFields={data.setSelected}
+            handleSave={(data) => console.log('Nova ordem:', data)}
+          />
+
+          <ButtonGroup
+            buttons={[
+              {
+                label: 'Salvar e exportar planilha',
+                variant: 'primary',
+                onClick: () => {
+                  if (onExport) onExport(data.selected);
+                },
+              },
+              {
+                label: 'Salvar configurações',
+                variant: 'outline',
+                onClick: () => {
+                  if (onSave) onSave(data.selected);
+                },
+              },
+            ]}
+            orientation="horizontal"
+          />
+        </Panel>
+      </Content>
+    </Dialog.Root>
+  );
+};

package/src/components/organisms/Form/Form.styles.ts

@@ -1,35 +1,35 @@
-// Form.styled.tsx
-import styled from "styled-components";
-
-/* Container para cada item do formulário */
-export const StyledFormItem = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem; /* Aproximadamente o "space-y-2" do Tailwind */
-`;
-
-/* Estilo para o label do formulário; a propriedade "error" permite alterar a cor se necessário */
-export const StyledFormLabel = styled.label<{ error?: boolean }>`
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  line-height: 1; /* leading-none */
-  color: ${(props) => (props.error ? "#dc2626" : "inherit")};
-`;
-
-/* Estilo para o container de controle de formulário (por exemplo, input) */
-export const StyledFormControl = styled.div`
-  /* Adicione aqui quaisquer estilos específicos para o container do input, se necessário */
-`;
-
-/* Estilo para a descrição do formulário */
-export const StyledFormDescription = styled.p`
-  font-size: 0.875rem; /* text-sm */
-  color: #6b7280; /* text-muted-foreground */
-`;
-
-/* Estilo para a mensagem (geralmente de erro) */
-export const StyledFormMessage = styled.p`
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  color: #dc2626; /* text-destructive */
-`;
+// Form.styled.tsx
+import styled from 'styled-components';
+
+/* Container para cada item do formulário */
+export const StyledFormItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* Aproximadamente o "space-y-2" do Tailwind */
+`;
+
+/* Estilo para o label do formulário; a propriedade "error" permite alterar a cor se necessário */
+export const StyledFormLabel = styled.label<{ error?: boolean }>`
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  line-height: 1; /* leading-none */
+  color: ${(props) => (props.error ? '#dc2626' : 'inherit')};
+`;
+
+/* Estilo para o container de controle de formulário (por exemplo, input) */
+export const StyledFormControl = styled.div`
+  /* Adicione aqui quaisquer estilos específicos para o container do input, se necessário */
+`;
+
+/* Estilo para a descrição do formulário */
+export const StyledFormDescription = styled.p`
+  font-size: 0.875rem; /* text-sm */
+  color: #6b7280; /* text-muted-foreground */
+`;
+
+/* Estilo para a mensagem (geralmente de erro) */
+export const StyledFormMessage = styled.p`
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  color: #dc2626; /* text-destructive */
+`;

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,
+};