@granto-umbrella/umbrella-components 3.0.55 → 3.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.55",
+  "version": "3.0.57",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -79,7 +79,6 @@
     "@storybook/addon-docs": "10.1.6",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-onboarding": "10.1.6",
-    "@storybook/cli": "^10.1.10",
     "@storybook/react-vite": "^10.1.6",
     "@storybook/test": "^8.6.14",
     "@testing-library/dom": "^10.4.1",

package/src/components/atoms/Button/Button.types.ts

@@ -1,27 +1,27 @@
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: 'sm' | 'md' | 'lg';
-  variant?:
-    | 'primary'
-    | 'outline'
-    | 'outline_ghost'
-    | 'outline_ghost_disabled'
-    | 'outline_danger'
-    | 'danger'
-    | 'ghost'
-    | 'ghost_alert'
-    | 'alert'
-    | 'danger-no-fill'
-    | 'accent-outline'
-    | 'accent-fill'
-    | 'secondary-outline'
-    | 'danger-fill';
-  radius?: string;
-  isLoading?: boolean;
-  leftIcon?: string;
-  rightIcon?: string;
-  iconSize?: string;
-  fontSize?: string;
-  width?: string;
-  height?: string;
-  testId?: string;
-}
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'sm' | 'md' | 'lg';
+  variant?:
+    | 'primary'
+    | 'outline'
+    | 'outline_ghost'
+    | 'outline_ghost_disabled'
+    | 'outline_danger'
+    | 'danger'
+    | 'ghost'
+    | 'ghost_alert'
+    | 'alert'
+    | 'danger-no-fill'
+    | 'accent-outline'
+    | 'accent-fill'
+    | 'secondary-outline'
+    | 'danger-fill';
+  radius?: string;
+  isLoading?: boolean;
+  leftIcon?: string;
+  rightIcon?: string;
+  iconSize?: string;
+  fontSize?: string;
+  width?: string;
+  height?: string;
+  testId?: string;
+}

package/src/components/atoms/Checkbox/Checkbox.types.ts

@@ -1,13 +1,13 @@
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  checked?: boolean;
-  onChange?: () => void;
-  disabled?: boolean;
-}
-
-export interface CheckboxGroupProps {
-  options: { label: string; value: string }[];
-  selected: string[];
-  setSelected: (values: string[]) => void;
-  direction?: 'vertical' | 'horizontal';
-}
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  checked?: boolean;
+  onChange?: () => void;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  options: { label: string; value: string }[];
+  selected: string[];
+  setSelected: (values: string[]) => void;
+  direction?: 'vertical' | 'horizontal';
+}

package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.styles.ts

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import {
+  primitiveSizes,
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticShadows,
+  typographyTokens,
+} from '../../../styles/tokens';
+import CreatableSelect from 'react-select/creatable';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${primitiveSizes.size.x1};
+  width: 100%;
+`;
+
+export const Label = styled.label`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  font-weight: ${typographyTokens.fontWeights.medium};
+  color: ${semanticColors.global.text.subtitle.enabled};
+`;
+
+export const SupportingText = styled.span<{ $error?: boolean }>`
+  font-size: ${typographyTokens.fontSizes.captionM};
+  color: ${({ $error }) =>
+    $error
+      ? semanticColors.global.text.feedback.strong.error
+      : semanticColors.global.text.subtitle.enabled};
+`;
+
+export const CustomSelect = styled(CreatableSelect)<{
+  $error?: boolean;
+  $size?: 'sm' | 'md' | 'lg';
+}>`
+  .react-select__control {
+    min-height: ${primitiveSizes.size.x12};
+    border-radius: ${semanticRadius.global.radius.md};
+    border: ${semanticBorders.global.sm} solid
+      ${({ $error }) =>
+        $error
+          ? semanticColors.global.border.danger.enabled
+          : semanticColors.global.border.medium};
+
+    &:focus-within {
+      box-shadow: ${semanticShadows.shadow.md};
+    }
+  }
+`;

package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import type { InputActionMeta } from 'react-select';
+import {
+  Container,
+  Label,
+  SupportingText,
+  CustomSelect,
+} from './EditableDurationSelect.styles';
+import {
+  DurationOption,
+  EditableDurationSelectProps,
+} from './EditableDurationSelect.types';
+
+const DAYS_IN_YEAR = 365;
+const BASE_LIMIT = 5;
+
+function parseDuration(input: string): DurationOption | null {
+  if (!input) return null;
+
+  const normalized = input.trim().toLowerCase();
+
+  if (/^\d+$/.test(normalized)) {
+    const amount = Number(normalized);
+    if (amount <= 0) return null;
+
+    const isYear = amount <= BASE_LIMIT;
+
+    return {
+      label: isYear
+        ? `${amount} ${amount > 1 ? 'anos' : 'ano'}`
+        : `${amount} ${amount > 1 ? 'dias' : 'dia'}`,
+      value: normalized,
+      days: isYear ? amount * DAYS_IN_YEAR : amount,
+    };
+  }
+
+  const match = normalized.match(/^(\d+)\s*(dia|dias|ano|anos)$/);
+  if (!match) return null;
+
+  const amount = Number(match[1]);
+  const unit = match[2];
+
+  if (amount <= 0) return null;
+
+  const isYear = unit.startsWith('ano');
+
+  return {
+    label: `${amount} ${isYear ? (amount > 1 ? 'anos' : 'ano') : amount > 1 ? 'dias' : 'dia'}`,
+    value: normalized,
+    days: isYear ? amount * DAYS_IN_YEAR : amount,
+  };
+}
+
+export default function EditableDurationSelect({
+  label,
+  supportingText,
+  value,
+  onChange,
+  options = [],
+  disabled,
+  error,
+  size = 'md',
+  testId,
+  baseLimit = BASE_LIMIT,
+}: EditableDurationSelectProps) {
+  const [inputValue, setInputValue] = useState('');
+
+  const parsedInput = useMemo(() => parseDuration(inputValue), [inputValue]);
+
+  const dynamicOption = useMemo(() => {
+    if (!parsedInput) return [];
+    return [
+      {
+        label: parsedInput.label,
+        value: parsedInput.value,
+        days: parsedInput.days,
+      },
+    ];
+  }, [parsedInput]);
+
+  const mergedOptions = useMemo(() => {
+    return [
+      ...dynamicOption.filter((d) => !options.some((o) => o.days === d.days)),
+      ...options,
+    ];
+  }, [dynamicOption, options]);
+
+  const helperText = useMemo(() => {
+    if (!inputValue) return supportingText;
+
+    if (!parsedInput) return 'Valor inválido';
+
+    return parsedInput.days > baseLimit * DAYS_IN_YEAR
+      ? `Valores acima de ${baseLimit} são considerados dias`
+      : `Valores até ${baseLimit} são considerados anos`;
+  }, [baseLimit, inputValue, parsedInput, supportingText]);
+
+  function handleInputChange(value: string, meta: InputActionMeta) {
+    if (meta.action === 'input-change') {
+      setInputValue(value);
+    }
+  }
+
+  function handleChange(option: DurationOption | null) {
+    if (!option) return;
+    onChange?.(option);
+    setInputValue('');
+  }
+
+  return (
+    <Container data-testid={testId}>
+      {label && <Label>{label}</Label>}
+
+      <CustomSelect
+        isSearchable
+        isDisabled={disabled}
+        $size={size}
+        $error={error}
+        options={mergedOptions}
+        value={value}
+        placeholder="Digite ou selecione"
+        onInputChange={handleInputChange}
+        onChange={(opt) => handleChange(opt as DurationOption | null)}
+        formatCreateLabel={() => null}
+      />
+
+      {helperText && (
+        <SupportingText $error={error || helperText === 'Valor inválido'}>
+          {helperText}
+        </SupportingText>
+      )}
+    </Container>
+  );
+}

package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.types.ts

@@ -0,0 +1,18 @@
+export type DurationOption = {
+  label: string;
+  value: string;
+  days: number;
+};
+
+export interface EditableDurationSelectProps {
+  label?: string;
+  supportingText?: string;
+  value?: DurationOption | null;
+  onChange?: (value: DurationOption | null) => void;
+  options?: DurationOption[];
+  disabled?: boolean;
+  error?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  testId?: string;
+  baseLimit?: number;
+}

package/src/components/atoms/EditableDurationSelect/index.tsx

@@ -0,0 +1 @@
+export { default } from './EditableDurationSelect';

package/src/components/atoms/Textarea/Textarea.types.ts

@@ -1,6 +1,6 @@
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  supportingText?: string;
-  testId?: string;
-  info?: string;
-}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  supportingText?: string;
+  testId?: string;
+  info?: string;
+}

package/src/components/atoms/Tooltip/Tooltip.tsx

@@ -1,60 +1,60 @@
-import React, { useState } from 'react';
-import {
-  TooltipContainer,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipText,
-  TooltipLink,
-} from '../Tooltip/Tootip.styles';
-import { TooltipProps } from './tooltip.types';
-import { ArrowSquareOut } from '@phosphor-icons/react';
-import info from '../../../assets/info.png';
-
-const Tooltip: React.FC<TooltipProps> = ({
-  children,
-  content,
-  position = 'top',
-  helpLink,
-}) => {
-  const [visible, setVisible] = useState(false);
-
-  const handleMouseEnter = () => {
-    setVisible(true);
-  };
-
-  const handleMouseLeave = () => {
-    setVisible(false);
-  };
-
-  return (
-    <TooltipContainer>
-      {children}
-      <TooltipTrigger
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <img src={info} alt="Informação" />
-      </TooltipTrigger>
-      <TooltipContent
-        $position={position}
-        $visible={visible}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <TooltipText>{content}</TooltipText>
-        {helpLink && (
-          <TooltipLink
-            href={helpLink}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Saiba mais
-            <ArrowSquareOut size={12} weight="bold" />
-          </TooltipLink>
-        )}
-      </TooltipContent>
-    </TooltipContainer>
-  );
-};
-
-export default Tooltip;
+import React, { useState } from 'react';
+import {
+  TooltipContainer,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipText,
+  TooltipLink,
+} from '../Tooltip/Tootip.styles';
+import { TooltipProps } from './tooltip.types';
+import { ArrowSquareOut } from '@phosphor-icons/react';
+import info from '../../../assets/info.png';
+
+const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  position = 'top',
+  helpLink,
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  const handleMouseEnter = () => {
+    setVisible(true);
+  };
+
+  const handleMouseLeave = () => {
+    setVisible(false);
+  };
+
+  return (
+    <TooltipContainer>
+      {children}
+      <TooltipTrigger
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <img src={info} alt="Informação" />
+      </TooltipTrigger>
+      <TooltipContent
+        $position={position}
+        $visible={visible}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <TooltipText>{content}</TooltipText>
+        {helpLink && (
+          <TooltipLink
+            href={helpLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Saiba mais
+            <ArrowSquareOut size={12} weight="bold" />
+          </TooltipLink>
+        )}
+      </TooltipContent>
+    </TooltipContainer>
+  );
+};
+
+export default Tooltip;