@granto-umbrella/umbrella-components 3.0.56 → 3.0.57

package/package.json

@@ -1,141 +1,141 @@
-{
-  "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.56",
-  "description": "Umbrella Components for React",
-  "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/grantoseguros/granto-umbrella-components.git"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "commit": "cz",
-    "pr": "node scripts/open-pr.cjs",
-    "typecheck": "npm run typecheck:app && npm run typecheck:test",
-    "typecheck:app": "tsc -p tsconfig.app.json --noEmit",
-    "typecheck:test": "tsc -p tsconfig.test.json --noEmit",
-    "test": "jest --config=jest.config.mjs",
-    "test:ci": "jest --config=jest.config.mjs --coverage",
-    "test:related": "jest --config=jest.config.mjs -o",
-    "test:coverage": "jest --config jest.config.mjs --coverage --coverageReporters",
-    "lint": "eslint .",
-    "lint:staged": "eslint --max-warnings=0 --ignore-pattern 'storybook-static/**' --ignore-pattern 'coverage/**' --ignore-pattern 'dist/**'",
-    "format": "prettier -c .",
-    "format:check": "prettier --check .",
-    "format:write": "prettier -w .",
-    "prepare": "lefthook install",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build:storybook": "storybook build -o storybook-static",
-    "predeploy": "npm run build-storybook",
-    "deploy": "gh-pages -d storybook-static",
-    "version": "npm run build && git add .",
-    "release:patch": "npm version patch && git push && git push --tags",
-    "release:minor": "npm version minor && git push && git push --tags",
-    "release:major": "npm version major && git push && git push --tags",
-    "bump:patch": "npm version patch",
-    "bump:minor": "npm version minor",
-    "bump:major": "npm version major"
-  },
-  "config": {
-    "commitizen": {
-      "path": "cz-git"
-    }
-  },
-  "dependencies": {
-    "@hello-pangea/dnd": "^18.0.1",
-    "@phosphor-icons/react": "^2.1.10",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.3",
-    "@radix-ui/react-popover": "^1.1.11",
-    "@radix-ui/react-radio-group": "^1.2.4",
-    "cpf-cnpj-validator": "^1.0.3",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.488.0",
-    "make-mask": "^1.0.3",
-    "phosphor-react": "^1.4.1",
-    "radix": "^0.0.0",
-    "react": "^18.3.1",
-    "react-datepicker": "^8.3.0",
-    "react-day-picker": "^9.6.7",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.63.0",
-    "react-router": "^6.30.1",
-    "react-router-dom": "^6.30.1",
-    "react-select": "^5.10.0",
-    "recharts": "^3.2.1",
-    "tailwind-merge": "^3.2.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "4.1.3",
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^9.17.0",
-    "@storybook/addon-actions": "^9.0.8",
-    "@storybook/addon-docs": "10.1.6",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-onboarding": "10.1.6",
-    "@storybook/react-vite": "^10.1.6",
-    "@storybook/test": "^8.6.14",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^30.0.0",
-    "@types/mocha": "^10.0.10",
-    "@types/node": "^24.9.2",
-    "@types/react": "^18.3.17",
-    "@types/react-dom": "^18.3.5",
-    "@types/styled-components": "^5.1.34",
-    "@vitejs/plugin-react": "^4.7.0",
-    "babel-plugin-styled-components": "^2.1.4",
-    "commitizen": "^4.3.1",
-    "commitlint": "^20.1.0",
-    "cz-git": "^1.12.0",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "10.1.6",
-    "gh-pages": "^6.3.0",
-    "globals": "^15.13.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-styled-components": "^7.2.0",
-    "lefthook": "^2.0.1",
-    "prettier": "^3.6.2",
-    "react-icons": "^5.4.0",
-    "storybook": "^10.1.10",
-    "styled-components": "^6.1.19",
-    "ts-jest": "^29.4.5",
-    "ts-node": "^10.9.2",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.18.1",
-    "vite": "^6.0.3",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "keywords": [
-    "cli",
-    "vite",
-    "components"
-  ],
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  },
-  "engines": {
-    "node": "20.17.0",
-    "yarn": ">=1.22.18"
-  },
-  "files": [
-    "dist",
-    "src/**/*",
-    "!src/**/*.test.*",
-    "!src/**/*.stories.*"
-  ]
-}
+{
+  "name": "@granto-umbrella/umbrella-components",
+  "version": "3.0.57",
+  "description": "Umbrella Components for React",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/grantoseguros/granto-umbrella-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "commit": "cz",
+    "pr": "node scripts/open-pr.cjs",
+    "typecheck": "npm run typecheck:app && npm run typecheck:test",
+    "typecheck:app": "tsc -p tsconfig.app.json --noEmit",
+    "typecheck:test": "tsc -p tsconfig.test.json --noEmit",
+    "test": "jest --config=jest.config.mjs",
+    "test:ci": "jest --config=jest.config.mjs --coverage",
+    "test:related": "jest --config=jest.config.mjs -o",
+    "test:coverage": "jest --config jest.config.mjs --coverage --coverageReporters",
+    "lint": "eslint .",
+    "lint:staged": "eslint --max-warnings=0 --ignore-pattern 'storybook-static/**' --ignore-pattern 'coverage/**' --ignore-pattern 'dist/**'",
+    "format": "prettier -c .",
+    "format:check": "prettier --check .",
+    "format:write": "prettier -w .",
+    "prepare": "lefthook install",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build:storybook": "storybook build -o storybook-static",
+    "predeploy": "npm run build-storybook",
+    "deploy": "gh-pages -d storybook-static",
+    "version": "npm run build && git add .",
+    "release:patch": "npm version patch && git push && git push --tags",
+    "release:minor": "npm version minor && git push && git push --tags",
+    "release:major": "npm version major && git push && git push --tags",
+    "bump:patch": "npm version patch",
+    "bump:minor": "npm version minor",
+    "bump:major": "npm version major"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-git"
+    }
+  },
+  "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
+    "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.2.4",
+    "cpf-cnpj-validator": "^1.0.3",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.488.0",
+    "make-mask": "^1.0.3",
+    "phosphor-react": "^1.4.1",
+    "radix": "^0.0.0",
+    "react": "^18.3.1",
+    "react-datepicker": "^8.3.0",
+    "react-day-picker": "^9.6.7",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.63.0",
+    "react-router": "^6.30.1",
+    "react-router-dom": "^6.30.1",
+    "react-select": "^5.10.0",
+    "recharts": "^3.2.1",
+    "tailwind-merge": "^3.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "4.1.3",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@eslint/js": "^9.17.0",
+    "@storybook/addon-actions": "^9.0.8",
+    "@storybook/addon-docs": "10.1.6",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-onboarding": "10.1.6",
+    "@storybook/react-vite": "^10.1.6",
+    "@storybook/test": "^8.6.14",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^24.9.2",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@types/styled-components": "^5.1.34",
+    "@vitejs/plugin-react": "^4.7.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "commitizen": "^4.3.1",
+    "commitlint": "^20.1.0",
+    "cz-git": "^1.12.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "10.1.6",
+    "gh-pages": "^6.3.0",
+    "globals": "^15.13.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.2.0",
+    "lefthook": "^2.0.1",
+    "prettier": "^3.6.2",
+    "react-icons": "^5.4.0",
+    "storybook": "^10.1.10",
+    "styled-components": "^6.1.19",
+    "ts-jest": "^29.4.5",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "keywords": [
+    "cli",
+    "vite",
+    "components"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "engines": {
+    "node": "20.17.0",
+    "yarn": ">=1.22.18"
+  },
+  "files": [
+    "dist",
+    "src/**/*",
+    "!src/**/*.test.*",
+    "!src/**/*.stories.*"
+  ]
+}

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/molecules/TimeLine/TimeLine.mapper.ts

@@ -1,86 +1,86 @@
-// TimeLine.mapper.ts
-import {
-  TimelineItem,
-  RemoteEvent,
-  EventIdKey,
-  TimelineVariant,
-} from './TimeLine.types';
-import { resolveTimelineConfig } from './TimeLine.registry';
-
-function toEventIdKey(eventId: number | string): EventIdKey {
-  const raw = String(eventId).trim();
-  return raw as EventIdKey;
-}
-
-function toVariant(eventIdKey: EventIdKey): TimelineVariant {
-  return resolveTimelineConfig(eventIdKey)?.variant || 'continued';
-}
-
-function buildTitle(eventIdKey: EventIdKey): string {
-  const base =
-    resolveTimelineConfig(eventIdKey)?.labelPtBr || `Evento ${eventIdKey}`;
-
-  return base;
-}
-
-function actorFrom(ev: RemoteEvent) {
-  if (!ev.user) {
-    return { id: '', displayName: 'Sistema', type: 'app' as const };
-  }
-
-  return {
-    id: String(ev.user.id),
-    displayName: ev.user.name || 'Usuário',
-    type: 'user' as const,
-  };
-}
-
-function safeOrigin(ev: RemoteEvent): string {
-  const origin = ev.parentType || ev.eventType;
-  return origin ? String(origin) : 'unknown';
-}
-
-function safeData(ev: RemoteEvent): Record<string, unknown> {
-  return ev.data && typeof ev.data === 'object' ? ev.data : {};
-}
-
-export function mapRemoteToTimeline(items: RemoteEvent[]): TimelineItem[] {
-  return items.map((ev, idx) => {
-    const id = ev.id || String(idx);
-    const eventIdKey = toEventIdKey(ev.eventId);
-    const data = safeData(ev) as Record<string, any>;
-
-    return {
-      id,
-      timestamp: ev.startDate,
-      type: toVariant(eventIdKey),
-      title: buildTitle(eventIdKey),
-      description: undefined,
-      actor: actorFrom(ev),
-      origin: safeOrigin(ev),
-      correlationId: ev.id,
-      metadata: {
-        eventIdKey,
-        eventIdRaw: ev.eventId,
-        eventType: ev.eventType,
-        isPublic: ev.isPublic,
-        startDate: ev.startDate,
-        endDate: ev.endDate,
-        duration: ev.duration,
-        parentId: ev.parentId,
-        parentType: ev.parentType,
-
-        proposalId: data?.id,
-        orderId: data?.umOrder,
-        insuranceId: data?.umInsurance,
-        insuredName: data?.insuredName,
-        insuredDocument: data?.insuredDocument,
-        status: data?.status,
-        stage: data?.stage,
-        modality: data?.modality,
-
-        data,
-      },
-    };
-  });
-}
+// TimeLine.mapper.ts
+import {
+  TimelineItem,
+  RemoteEvent,
+  EventIdKey,
+  TimelineVariant,
+} from './TimeLine.types';
+import { resolveTimelineConfig } from './TimeLine.registry';
+
+function toEventIdKey(eventId: number | string): EventIdKey {
+  const raw = String(eventId).trim();
+  return raw as EventIdKey;
+}
+
+function toVariant(eventIdKey: EventIdKey): TimelineVariant {
+  return resolveTimelineConfig(eventIdKey)?.variant || 'continued';
+}
+
+function buildTitle(eventIdKey: EventIdKey): string {
+  const base =
+    resolveTimelineConfig(eventIdKey)?.labelPtBr || `Evento ${eventIdKey}`;
+
+  return base;
+}
+
+function actorFrom(ev: RemoteEvent) {
+  if (!ev.user) {
+    return { id: '', displayName: 'Sistema', type: 'app' as const };
+  }
+
+  return {
+    id: String(ev.user.id),
+    displayName: ev.user.name || 'Usuário',
+    type: 'user' as const,
+  };
+}
+
+function safeOrigin(ev: RemoteEvent): string {
+  const origin = ev.parentType || ev.eventType;
+  return origin ? String(origin) : 'unknown';
+}
+
+function safeData(ev: RemoteEvent): Record<string, unknown> {
+  return ev.data && typeof ev.data === 'object' ? ev.data : {};
+}
+
+export function mapRemoteToTimeline(items: RemoteEvent[]): TimelineItem[] {
+  return items.map((ev, idx) => {
+    const id = ev.id || String(idx);
+    const eventIdKey = toEventIdKey(ev.eventId);
+    const data = safeData(ev) as Record<string, any>;
+
+    return {
+      id,
+      timestamp: ev.startDate,
+      type: toVariant(eventIdKey),
+      title: buildTitle(eventIdKey),
+      description: undefined,
+      actor: actorFrom(ev),
+      origin: safeOrigin(ev),
+      correlationId: ev.id,
+      metadata: {
+        eventIdKey,
+        eventIdRaw: ev.eventId,
+        eventType: ev.eventType,
+        isPublic: ev.isPublic,
+        startDate: ev.startDate,
+        endDate: ev.endDate,
+        duration: ev.duration,
+        parentId: ev.parentId,
+        parentType: ev.parentType,
+
+        proposalId: data?.id,
+        orderId: data?.umOrder,
+        insuranceId: data?.umInsurance,
+        insuredName: data?.insuredName,
+        insuredDocument: data?.insuredDocument,
+        status: data?.status,
+        stage: data?.stage,
+        modality: data?.modality,
+
+        data,
+      },
+    };
+  });
+}