@granto-umbrella/umbrella-components 3.0.32 → 3.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.32",
+  "version": "3.0.34",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -30,7 +30,6 @@
     "bump:major": "npm version major"
   },
   "dependencies": {
-    "@granto-umbrella/umbrella-components": "^2.3.23",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.3",
@@ -54,13 +53,13 @@
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.3",
+    "@chromatic-com/storybook": "4.1.1",
     "@eslint/js": "^9.17.0",
     "@storybook/addon-actions": "8.4.7",
     "@storybook/addon-essentials": "8.4.7",
     "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-onboarding": "8.4.7",
-    "@storybook/react-vite": "8.4.7",
+    "@storybook/addon-onboarding": "9.1.15",
+    "@storybook/react-vite": "9.1.15",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

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

@@ -1,75 +1,75 @@
-// DatePicker.styles.ts
-import { createGlobalStyle, styled } from 'styled-components';
-import ReactDatePicker, {
-  DatePickerProps,
-  registerLocale,
-} from 'react-datepicker';
-import { ptBR } from 'date-fns/locale';
-import {
-  semanticColors,
-  semanticRadius,
-  typographyTokens,
-  semanticSizes,
-} from '../../../styles/tokens';
-
-// register Portuguese‐Brazil locale
-registerLocale('pt-BR', ptBR);
-
-// 1) Global overrides for the popup calendar:
-export const DatePickerGlobalStyles = createGlobalStyle`
-  .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);
-  }
-
-  .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};
-  }
-
-  .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;
-  }
-`;
-
-// 2) Styled input only:
-export const StyledDatePicker = styled(
-  ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
-)`
-  width: 100%;
-  padding: 0.65rem ${semanticSizes.global.padding.md};
-  border: 1px solid ${semanticColors.neutral[300]};
-  border-radius: ${semanticRadius.global.radius.md};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  color: ${semanticColors.base.text};
-
-  &:focus {
-    outline: none;
-    border-color: ${semanticColors.branding.surface.enabled};
-    box-shadow: 0 0 0 2px ${semanticColors.branding.surface.enabled}33;
-  }
-`;
+// DatePicker.styles.ts
+import { createGlobalStyle, styled } from 'styled-components';
+import ReactDatePicker, {
+  DatePickerProps,
+  registerLocale,
+} from 'react-datepicker';
+import { ptBR } from 'date-fns/locale';
+import {
+  semanticColors,
+  semanticRadius,
+  typographyTokens,
+  semanticSizes,
+} from '../../../styles/tokens';
+
+// register Portuguese‐Brazil locale
+registerLocale('pt-BR', ptBR);
+
+// 1) Global overrides for the popup calendar:
+export const DatePickerGlobalStyles = createGlobalStyle`
+  .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);
+  }
+
+  .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};
+  }
+
+  .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;
+  }
+`;
+
+// 2) Styled input only:
+export const StyledDatePicker = styled(
+  ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
+)`
+  width: 100%;
+  padding: 0.65rem ${semanticSizes.global.padding.md};
+  border: 1px solid ${semanticColors.neutral[300]};
+  border-radius: ${semanticRadius.global.radius.md};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  color: ${semanticColors.base.text};
+
+  &:focus {
+    outline: none;
+    border-color: ${semanticColors.branding.surface.enabled};
+    box-shadow: 0 0 0 2px ${semanticColors.branding.surface.enabled}33;
+  }
+`;

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

@@ -1,154 +1,154 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { DatePickerGlobalStyles, StyledDatePicker } from './DatePicker.styles';
-import 'react-datepicker/dist/react-datepicker.css';
-import { parse, isValid, format } from 'date-fns';
-
-export interface DatePickerInputProps {
-  mode?: 'single' | 'range';
-  selected: Date | [Date, Date];
-  onChange: (date: Date | [Date, Date]) => void;
-  minDate?: Date;
-  maxDate?: Date;
-  placeholder?: string;
-  [key: string]: any;
-}
-
-const DF = 'dd/MM/yyyy';
-
-// ---------- helpers de parse/format ----------
-function parseBRDate(s: string): Date | null {
-  const d = parse(s, DF, new Date());
-  return isValid(d) ? d : null;
-}
-
-function maskDateDigits(digits: string) {
-  let v = digits.replace(/\D/g, '').slice(0, 8);
-  if (v.length >= 5) v = v.replace(/^(\d{2})(\d{2})(\d{0,4}).*/, '$1/$2/$3');
-  else if (v.length >= 3) v = v.replace(/^(\d{2})(\d{0,2}).*/, '$1/$2');
-  return v;
-}
-
-function autoMaskSingle(input: string) {
-  const digits = input.replace(/\D/g, '');
-  return maskDateDigits(digits);
-}
-
-function autoMaskRange(input: string) {
-  const parts = input.split(/\s*[-–]\s*/);
-  const left = autoMaskSingle(parts[0] || '');
-  const right = autoMaskSingle(parts[1] || '');
-  return right ? `${left} - ${right}` : left;
-}
-
-function tryCommitSingle(value: string): Date | null {
-  return parseBRDate(value);
-}
-
-function tryCommitRange(value: string): [Date | null, Date | null] {
-  const [a, b] = value.split(/\s*[-–]\s*/);
-  return [a ? parseBRDate(a) : null, b ? parseBRDate(b) : null];
-}
-
-// Tipo que o StyledDatePicker espera em onChangeRaw
-type RawEvt =
-  | React.MouseEvent<HTMLElement>
-  | React.KeyboardEvent<HTMLElement>
-  | undefined;
-
-// Extrai com segurança o input do evento (alvo pode não ser input diretamente)
-function getInputFromRawEvent(e: RawEvt): HTMLInputElement | null {
-  const target = e?.target as HTMLElement | undefined;
-  if (!target) return null;
-  if (target instanceof HTMLInputElement) return target;
-  const input = target.closest('input');
-  return (input as HTMLInputElement) || null;
-}
-
-export const DatePickerInput: React.FC<DatePickerInputProps> = ({
-  mode = 'single',
-  selected,
-  onChange,
-  minDate,
-  maxDate,
-  placeholder,
-  ...rest
-}) => {
-  // SINGLE
-  const handleChangeRawSingle = (e: RawEvt) => {
-    const el = getInputFromRawEvent(e);
-    if (!el) return;
-    el.value = autoMaskSingle(el.value);
-  };
-
-  const handleBlurSingle = (e: React.FocusEvent<HTMLInputElement>) => {
-    const el = e.target;
-    const d = tryCommitSingle(el.value);
-    if (d) {
-      el.value = format(d, DF);
-      onChange(d);
-    }
-  };
-
-  // RANGE
-  const handleChangeRawRange = (e: RawEvt) => {
-    const el = getInputFromRawEvent(e);
-    if (!el) return;
-    el.value = autoMaskRange(el.value);
-  };
-
-  const handleBlurRange = (e: React.FocusEvent<HTMLInputElement>) => {
-    const el = e.target;
-    const [d1, d2] = tryCommitRange(el.value);
-
-    if (d1) {
-      const oldRight = Array.isArray(selected) ? selected[1] : undefined;
-      const payload: [Date, Date] = [d1, (d2 || (oldRight as Date)) as Date];
-      const left = format(d1, DF);
-      const right = d2 ? format(d2, DF) : '';
-      el.value = right ? `${left} - ${right}` : left;
-      onChange(payload);
-    }
-  };
-
-  return (
-    <>
-      <DatePickerGlobalStyles />
-
-      {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={DF}
-          onChangeRaw={handleChangeRawRange} // << tipo compatível
-          onBlur={handleBlurRange}
-          {...rest}
-        />
-      ) : (
-        <StyledDatePicker
-          locale="pt-BR"
-          selected={
-            Array.isArray(selected)
-              ? selected[0]
-              : (selected as Date) || undefined
-          }
-          onChange={(d) => onChange(d as Date)}
-          minDate={minDate}
-          maxDate={maxDate}
-          placeholderText={placeholder}
-          dateFormat={DF}
-          onChangeRaw={handleChangeRawSingle} // << tipo compatível
-          onBlur={handleBlurSingle}
-          {...rest}
-        />
-      )}
-    </>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { DatePickerGlobalStyles, StyledDatePicker } from './DatePicker.styles';
+import 'react-datepicker/dist/react-datepicker.css';
+import { parse, isValid, format } from 'date-fns';
+
+export interface DatePickerInputProps {
+  mode?: 'single' | 'range';
+  selected: Date | [Date, Date];
+  onChange: (date: Date | [Date, Date]) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  placeholder?: string;
+  [key: string]: any;
+}
+
+const DF = 'dd/MM/yyyy';
+
+// ---------- helpers de parse/format ----------
+function parseBRDate(s: string): Date | null {
+  const d = parse(s, DF, new Date());
+  return isValid(d) ? d : null;
+}
+
+function maskDateDigits(digits: string) {
+  let v = digits.replace(/\D/g, '').slice(0, 8);
+  if (v.length >= 5) v = v.replace(/^(\d{2})(\d{2})(\d{0,4}).*/, '$1/$2/$3');
+  else if (v.length >= 3) v = v.replace(/^(\d{2})(\d{0,2}).*/, '$1/$2');
+  return v;
+}
+
+function autoMaskSingle(input: string) {
+  const digits = input.replace(/\D/g, '');
+  return maskDateDigits(digits);
+}
+
+function autoMaskRange(input: string) {
+  const parts = input.split(/\s*[-–]\s*/);
+  const left = autoMaskSingle(parts[0] || '');
+  const right = autoMaskSingle(parts[1] || '');
+  return right ? `${left} - ${right}` : left;
+}
+
+function tryCommitSingle(value: string): Date | null {
+  return parseBRDate(value);
+}
+
+function tryCommitRange(value: string): [Date | null, Date | null] {
+  const [a, b] = value.split(/\s*[-–]\s*/);
+  return [a ? parseBRDate(a) : null, b ? parseBRDate(b) : null];
+}
+
+// Tipo que o StyledDatePicker espera em onChangeRaw
+type RawEvt =
+  | React.MouseEvent<HTMLElement>
+  | React.KeyboardEvent<HTMLElement>
+  | undefined;
+
+// Extrai com segurança o input do evento (alvo pode não ser input diretamente)
+function getInputFromRawEvent(e: RawEvt): HTMLInputElement | null {
+  const target = e?.target as HTMLElement | undefined;
+  if (!target) return null;
+  if (target instanceof HTMLInputElement) return target;
+  const input = target.closest('input');
+  return (input as HTMLInputElement) || null;
+}
+
+export const DatePickerInput: React.FC<DatePickerInputProps> = ({
+  mode = 'single',
+  selected,
+  onChange,
+  minDate,
+  maxDate,
+  placeholder,
+  ...rest
+}) => {
+  // SINGLE
+  const handleChangeRawSingle = (e: RawEvt) => {
+    const el = getInputFromRawEvent(e);
+    if (!el) return;
+    el.value = autoMaskSingle(el.value);
+  };
+
+  const handleBlurSingle = (e: React.FocusEvent<HTMLInputElement>) => {
+    const el = e.target;
+    const d = tryCommitSingle(el.value);
+    if (d) {
+      el.value = format(d, DF);
+      onChange(d);
+    }
+  };
+
+  // RANGE
+  const handleChangeRawRange = (e: RawEvt) => {
+    const el = getInputFromRawEvent(e);
+    if (!el) return;
+    el.value = autoMaskRange(el.value);
+  };
+
+  const handleBlurRange = (e: React.FocusEvent<HTMLInputElement>) => {
+    const el = e.target;
+    const [d1, d2] = tryCommitRange(el.value);
+
+    if (d1) {
+      const oldRight = Array.isArray(selected) ? selected[1] : undefined;
+      const payload: [Date, Date] = [d1, (d2 || (oldRight as Date)) as Date];
+      const left = format(d1, DF);
+      const right = d2 ? format(d2, DF) : '';
+      el.value = right ? `${left} - ${right}` : left;
+      onChange(payload);
+    }
+  };
+
+  return (
+    <>
+      <DatePickerGlobalStyles />
+
+      {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={DF}
+          onChangeRaw={handleChangeRawRange} // << tipo compatível
+          onBlur={handleBlurRange}
+          {...rest}
+        />
+      ) : (
+        <StyledDatePicker
+          locale="pt-BR"
+          selected={
+            Array.isArray(selected)
+              ? selected[0]
+              : (selected as Date) || undefined
+          }
+          onChange={(d) => onChange(d as Date)}
+          minDate={minDate}
+          maxDate={maxDate}
+          placeholderText={placeholder}
+          dateFormat={DF}
+          onChangeRaw={handleChangeRawSingle} // << tipo compatível
+          onBlur={handleBlurSingle}
+          {...rest}
+        />
+      )}
+    </>
+  );
+};