@granto-umbrella/umbrella-components 2.3.13 → 2.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.13",
+  "version": "2.3.15",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/DatePickerInput/DatePicker.styles.ts

@@ -1,3 +1,4 @@
+// DatePicker.styles.ts
 import { createGlobalStyle, styled } from "styled-components";
 import ReactDatePicker, {
   DatePickerProps,
@@ -9,47 +10,62 @@ import {
   semanticRadius,
   typographyTokens,
   semanticSizes,
-  primitiveSizes,
 } from "../../../styles/tokens";
 
 // register Portuguese‐Brazil locale
 registerLocale("pt-BR", ptBR);
 
-// global overrides for the popup calendar
+// 1) Global overrides for the popup calendar:
 export const DatePickerGlobalStyles = createGlobalStyle`
-  .react-datepicker-wrapper {
-    display: flex !important;
+  .react-datepicker {
+    background: ${semanticColors.base.background};
+    border: 1px solid ${semanticColors.neutral[300]};
+    border-radius: ${semanticRadius.global.radius.md};
+    font-family: inherit;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   }
-`;
 
-// wrapper around input + icon
-export const InputWrapper = styled.div`
-  position: relative;
-  width: 100%;
-`;
+  .react-datepicker__header {
+    background: ${semanticColors.neutral[100]};
+    border-bottom: none;
+    border-top-left-radius: ${semanticRadius.global.radius.md};
+    border-top-right-radius: ${semanticRadius.global.radius.md};
+    padding: ${semanticSizes.global.padding.sm};
+  }
 
-// ícone absolutizado à esquerda
-export const IconWrapper = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 16px;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: ${semanticColors.global.text.onSurface.enabled};
-  z-index: 1;
+  .react-datepicker__current-month {
+    font-size: ${typographyTokens.fontSizes.bodyM};
+    color: ${semanticColors.base.text};
+  }
+
+  .react-datepicker__day-name,
+  .react-datepicker__day {
+    width: 2rem;
+    line-height: 2rem;
+    margin: 0.1rem;
+  }
+
+  .react-datepicker__day--selected {
+    background-color: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.base.background};
+    border-radius: 50%;
+  }
+
+  .react-datepicker__triangle {
+    display: none;
+  }
 `;
 
-// styled input itself; we add extra left‐padding for the icon
+// 2) Styled input only:
 export const StyledDatePicker = styled(
   ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
 )`
   width: 100%;
-  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-  padding-left: 42px;
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
   border: 1px solid ${semanticColors.neutral[300]};
   border-radius: ${semanticRadius.global.radius.md};
-  font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.global.text.onSurface.enabled};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.base.text};
 
   &:focus {
     outline: none;
@@ -57,23 +73,3 @@ export const StyledDatePicker = styled(
     box-shadow: 0 0 0 2px ${semanticColors.branding.surface.enabled}33;
   }
 `;
-
-export const Label = styled.label`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-weight: ${typographyTokens.fontWeights.medium};
-`;
-
-export const SupportText = styled.span<{ $error?: boolean }>`
-  font-size: ${typographyTokens.fontSizes.captionM};
-  color: ${({ $error }) =>
-    $error
-      ? semanticColors.danger.text.enabled
-      : semanticColors.global.text.subtitle.enabled};
-`;
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${primitiveSizes.size.x1};
-`;

package/src/components/atoms/DatePickerInput/DatePickerInput.tsx

@@ -1,27 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
-import { Calendar as CalendarIcon } from "lucide-react";
-import {
-  Container,
-  DatePickerGlobalStyles,
-  Label,
-  StyledDatePicker,
-  SupportText,
-  InputWrapper,
-  IconWrapper,
-} from "./DatePicker.styles";
+import { DatePickerGlobalStyles, StyledDatePicker } from "./DatePicker.styles";
 
 import "react-datepicker/dist/react-datepicker.css";
 
-interface DatePickerInputProps {
+export interface DatePickerInputProps {
   mode?: "single" | "range";
-  selected: Date | [Date, Date] | null;
+  selected: Date | [Date, Date];
   onChange: (date: Date | [Date, Date]) => void;
   minDate?: Date;
   maxDate?: Date;
   placeholder?: string;
-  label?: string;
-  supportText?: string;
-  error?: boolean;
+  [key: string]: any;
 }
 
 export const DatePickerInput: React.FC<DatePickerInputProps> = ({
@@ -31,48 +21,37 @@ export const DatePickerInput: React.FC<DatePickerInputProps> = ({
   minDate,
   maxDate,
   placeholder,
-  label,
-  supportText,
-  error,
   ...rest
 }) => (
-  <Container>
-    {label && <Label>{label}</Label>}
+  <>
+    {/* inject our calendar overrides */}
     <DatePickerGlobalStyles />
 
-    <InputWrapper>
-      <IconWrapper>
-        <CalendarIcon size={16} />
-      </IconWrapper>
-
-      {mode === "range" ? (
-        <StyledDatePicker
-          locale="pt-BR"
-          selectsRange
-          startDate={(selected as [Date, Date])[0] || undefined || null}
-          endDate={(selected as [Date, Date])[1] || undefined || null}
-          selected={(selected as [Date, Date])[0] || undefined || null}
-          onChange={(d) => onChange(d as [Date, Date])}
-          minDate={minDate}
-          maxDate={maxDate}
-          placeholderText={placeholder}
-          dateFormat="dd/MM/yyyy"
-          {...rest}
-        />
-      ) : (
-        <StyledDatePicker
-          locale="pt-BR"
-          selected={selected as Date}
-          onChange={(d) => onChange(d as Date)}
-          minDate={minDate}
-          maxDate={maxDate}
-          placeholderText={placeholder}
-          dateFormat="dd/MM/yyyy"
-          {...rest}
-        />
-      )}
-    </InputWrapper>
-
-    {supportText && <SupportText $error={error}>{supportText}</SupportText>}
-  </Container>
+    {mode === "range" ? (
+      <StyledDatePicker
+        locale="pt-BR"
+        selectsRange
+        startDate={(selected as [Date, Date])[0] || undefined}
+        endDate={(selected as [Date, Date])[1] || undefined}
+        selected={(selected as [Date, Date])[0] || undefined}
+        onChange={(d) => onChange(d as [Date, Date])}
+        minDate={minDate}
+        maxDate={maxDate}
+        placeholderText={placeholder}
+        dateFormat="dd/MM/yyyy"
+        {...rest}
+      />
+    ) : (
+      <StyledDatePicker
+        locale="pt-BR"
+        selected={selected as Date}
+        onChange={(d) => onChange(d as Date)}
+        minDate={minDate}
+        maxDate={maxDate}
+        placeholderText={placeholder}
+        dateFormat="dd/MM/yyyy"
+        {...rest}
+      />
+    )}
+  </>
 );

package/src/components/molecules/RadioBoxGroup/RadioBoxGroup.tsx

@@ -4,7 +4,7 @@ import RadioButton from "../../../components/atoms/RadioButton/RadioButton";
 
 export interface Option {
   label: string;
-  value: string;
+  value: string | number;
   disabled?: boolean;
 }
 
@@ -29,7 +29,7 @@ const RadioBoxGroup: React.FC<RadioBoxGroupProps> = ({
         <RadioButton
           key={opt.value}
           name={name}
-          value={opt.value}
+          value={`${opt.value}`}
           label={opt.label}
           checked={opt.value === value}
           disabled={opt.disabled}

package/src/components/organisms/AlertDialog/AlertDialog.tsx

@@ -16,6 +16,7 @@ const AlertDialog: React.FC<AlertDialogProps> = ({
   text,
   isOpen,
   buttons: { confirm, cancel, onClose, onConfirm },
+  testId,
 }) => {
   if (!isOpen) return null;
 
@@ -43,12 +44,20 @@ const AlertDialog: React.FC<AlertDialogProps> = ({
         </Text>
         <ButtonContainer>
           {cancel && (
-            <Button variant="alert" onClick={onClose}>
+            <Button
+              testId={`${testId}_cancelar`}
+              variant="alert"
+              onClick={onClose}
+            >
               {cancel}
             </Button>
           )}
           {confirm && (
-            <Button variant="danger" onClick={onConfirm}>
+            <Button
+              testId={`${testId}_confirmar`}
+              variant="danger"
+              onClick={onConfirm}
+            >
               {confirm}
             </Button>
           )}

package/src/components/organisms/AlertDialog/AlertDialog.types.ts

@@ -10,4 +10,5 @@ export interface AlertDialogProps {
     title: string;
     description: string;
   };
+  testId?: string;
 }

package/src/components/organisms/CalendarPopover/CalendarPopover.tsx

@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as React from "react";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-
-import { cn } from "../../../lib/utils";
-import { FormControl } from "../Form/Form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../../molecules/Popover/Popover";
-import Button from "../../atoms/Button/Button";
-import { Calendar } from "../../../components/molecules/Calendar/Calendar";
-
-export type DatePickerFieldProps = {
-  formField: {
-    value: Date | null;
-    onChange: (date: Date | null) => void;
-  };
-};
-
-const DatePickerField: React.FC<DatePickerFieldProps> = ({ formField }) => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <FormControl>
-          <Button
-            variant="outline"
-            className={cn(
-              "w-[240px] pl-3 text-left font-normal",
-              !formField.value && "text-muted-foreground"
-            )}
-          >
-            {formField.value ? (
-              format(formField.value, "PPP")
-            ) : (
-              <span>CALENDÁRIO</span>
-            )}
-            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-          </Button>
-        </FormControl>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="single"
-          selected={formField.value}
-          required
-          onSelect={formField.onChange}
-          disabled={(date: any) =>
-            date > new Date() || date < new Date("1900-01-01")
-          }
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export default DatePickerField;