@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/package.json

@@ -1,106 +1,135 @@
-{
-  "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.34",
-  "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",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "predeploy": "npm run build-storybook",
-    "deploy": "gh-pages -d storybook-static",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "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"
-  },
-  "dependencies": {
-    "@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.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": "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",
-    "@types/mocha": "^10.0.10",
-    "@types/react": "^18.3.17",
-    "@types/react-dom": "^18.3.5",
-    "@types/styled-components": "^5.1.34",
-    "@vitejs/plugin-react": "^4.3.4",
-    "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "gh-pages": "^6.3.0",
-    "globals": "^15.13.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "react-icons": "^5.4.0",
-    "styled-components": "^6.1.19",
-    "ts-jest": "^29.2.5",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.18.1",
-    "vite": "^6.0.3"
-  },
-  "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.36",
+  "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",
+    "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": "3.2.3",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@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",
+    "@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",
+    "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",
+    "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"
+  },
+  "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/assets.d.ts

@@ -1,19 +1,19 @@
-declare module "*.png" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.jpg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.jpeg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.svg" {
-  const content: string;
-  export default content;
-}
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

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

@@ -1,86 +1,88 @@
-import styled, { css } from "styled-components";
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from "../../../styles/tokens";
-
-const badgeVariants = {
-  primary: css`
-    background: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.base.background};
-  `,
-  outline: css`
-    background: transparent;
-    border: 1px solid ${semanticColors.branding.border.enabled};
-    color: ${semanticColors.branding.text.accent.enabled};
-  `,
-  danger: css`
-    background: ${semanticColors.global.surface.danger.disabled};
-    color: ${semanticColors.global.text.feedback.strong.error};
-    
-  `,
-  success: css`
-    background: ${semanticColors.success.surface.feedback};
-    color: ${semanticColors.success.text.feedback};
-  `,
-  warning: css`
-    background: ${semanticColors.warning.surface.feedback};
-    color: ${semanticColors.warning.text.feedback};
-  `,
-  neutral: css`
-    background: ${semanticColors.neutral[200]};
-    color: ${semanticColors.neutral[700]};
-  `,
-  info: css`
-    background: ${semanticColors.info.surface.feedback};
-    color: ${semanticColors.info.text.feedback.strong};
-  `,
-};
-
-const badgeSizes = {
-  sm: css`
-    padding: ${semanticSizes.global.padding.xs} ${semanticSizes.global.padding.sm};
-    font-size: ${typographyTokens.fontSizes.labelS};
-    font-weight: ${typographyTokens.fontWeights.medium};
-    line-height: ${typographyTokens.lineHeights.labelS};
-    font-family: ${typographyTokens.fontFamily.base};
-  `,
-  md: css`
-    padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
-    font-size: ${typographyTokens.fontSizes.labelM};
-    font-weight: ${typographyTokens.fontWeights.medium};
-    line-height: ${typographyTokens.lineHeights.labelM};
-    font-family: ${typographyTokens.fontFamily.base};
-  `,
-  lg: css`
-    padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-    font-size: ${typographyTokens.fontSizes.labelL};
-    font-weight: ${typographyTokens.fontWeights.medium};
-    line-height: ${typographyTokens.lineHeights.labelL};
-    font-family: ${typographyTokens.fontFamily.base};
-  `,
-};
-
-export const StyledBadge = styled.span<{
-  $size: keyof typeof badgeSizes;
-  $variant: keyof typeof badgeVariants;
-  $radius: keyof typeof semanticRadius.global.radius;
-}>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${({ $radius }) => semanticRadius.global.radius[$radius]};
-  gap: ${semanticSizes.global.gap.xs};
-  
-  ${({ $size }) => badgeSizes[$size]}
-  ${({ $variant }) => badgeVariants[$variant]}
-
-  .icon-left,
-  .icon-right {
-    display: flex;
-    align-items: center;
-    line-height: 1;
-  }
-`;;
+import styled, { css } from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+const badgeVariants = {
+  primary: css`
+    background: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.base.background};
+  `,
+  outline: css`
+    background: transparent;
+    border: 1px solid ${semanticColors.branding.border.enabled};
+    color: ${semanticColors.branding.text.accent.enabled};
+  `,
+  danger: css`
+    background: ${semanticColors.global.surface.danger.disabled};
+    color: ${semanticColors.global.text.feedback.strong.error};
+  `,
+  success: css`
+    background: ${semanticColors.success.surface.feedback};
+    color: ${semanticColors.success.text.feedback};
+  `,
+  warning: css`
+    background: ${semanticColors.warning.surface.feedback};
+    color: ${semanticColors.warning.text.feedback};
+  `,
+  neutral: css`
+    background: ${semanticColors.neutral[200]};
+    color: ${semanticColors.neutral[700]};
+  `,
+  info: css`
+    background: ${semanticColors.info.surface.feedback};
+    color: ${semanticColors.info.text.feedback.strong};
+  `,
+};
+
+const badgeSizes = {
+  sm: css`
+    padding: ${semanticSizes.global.padding.xs}
+      ${semanticSizes.global.padding.sm};
+    font-size: ${typographyTokens.fontSizes.labelS};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    line-height: ${typographyTokens.lineHeights.labelS};
+    font-family: ${typographyTokens.fontFamily.base};
+  `,
+  md: css`
+    padding: ${semanticSizes.global.padding.sm}
+      ${semanticSizes.global.padding.md};
+    font-size: ${typographyTokens.fontSizes.labelM};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    line-height: ${typographyTokens.lineHeights.labelM};
+    font-family: ${typographyTokens.fontFamily.base};
+  `,
+  lg: css`
+    padding: ${semanticSizes.global.padding.md}
+      ${semanticSizes.global.padding.lg};
+    font-size: ${typographyTokens.fontSizes.labelL};
+    font-weight: ${typographyTokens.fontWeights.medium};
+    line-height: ${typographyTokens.lineHeights.labelL};
+    font-family: ${typographyTokens.fontFamily.base};
+  `,
+};
+
+export const StyledBadge = styled.span<{
+  $size: keyof typeof badgeSizes;
+  $variant: keyof typeof badgeVariants;
+  $radius: keyof typeof semanticRadius.global.radius;
+}>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${({ $radius }) => semanticRadius.global.radius[$radius]};
+  gap: ${semanticSizes.global.gap.xs};
+
+  ${({ $size }) => badgeSizes[$size]}
+  ${({ $variant }) => badgeVariants[$variant]}
+
+  .icon-left,
+  .icon-right {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+  }
+`;

package/src/components/atoms/Badge/Badge.tsx

@@ -1,44 +1,42 @@
-import React from "react";
-import { StyledBadge } from "./Badge.styles";
-import { BadgeProps } from "./Badge.types";
-import * as Icons from "@phosphor-icons/react";
-import { semanticSizes } from "../../../styles/tokens/sizes"; 
-
-const getIconSize = (size: BadgeProps["size"]) => {
-  switch (size) {
-    case "sm":
-      return semanticSizes.global.padding.lg; 
-    case "lg":
-      return semanticSizes.global.padding['2xl']; 
-    default: // Caso 'md'
-      return semanticSizes.global.padding.xl; 
-  }
-};
-
-const Badge: React.FC<BadgeProps> = ({
-  children,
-  size = "md",
-  variant = "primary",
-  radius = "full",
-  leftIcon,
-  rightIcon,
-}) => {
-  const IconComponentLeft = leftIcon && (Icons[leftIcon as keyof typeof Icons] as React.ElementType);
-  const IconComponentRight = rightIcon && (Icons[rightIcon as keyof typeof Icons] as React.ElementType);
-  
-  const iconSize = getIconSize(size);
-
-  return (
-    <StyledBadge $size={size} $variant={variant} $radius={radius}>
-      {IconComponentLeft && (
-        <IconComponentLeft size={parseInt(iconSize)} />
-      )}
-      {children}
-      {IconComponentRight && (
-        <IconComponentRight size={parseInt(iconSize)} />
-      )}
-    </StyledBadge>
-  );
-};
-
-export default Badge;
+import React from 'react';
+import { StyledBadge } from './Badge.styles';
+import { BadgeProps } from './Badge.types';
+import * as Icons from '@phosphor-icons/react';
+import { semanticSizes } from '../../../styles/tokens/sizes';
+
+const getIconSize = (size: BadgeProps['size']) => {
+  switch (size) {
+    case 'sm':
+      return semanticSizes.global.padding.lg;
+    case 'lg':
+      return semanticSizes.global.padding['2xl'];
+    default: // Caso 'md'
+      return semanticSizes.global.padding.xl;
+  }
+};
+
+const Badge: React.FC<BadgeProps> = ({
+  children,
+  size = 'md',
+  variant = 'primary',
+  radius = 'full',
+  leftIcon,
+  rightIcon,
+}) => {
+  const IconComponentLeft =
+    leftIcon && (Icons[leftIcon as keyof typeof Icons] as React.ElementType);
+  const IconComponentRight =
+    rightIcon && (Icons[rightIcon as keyof typeof Icons] as React.ElementType);
+
+  const iconSize = getIconSize(size);
+
+  return (
+    <StyledBadge $size={size} $variant={variant} $radius={radius}>
+      {IconComponentLeft && <IconComponentLeft size={parseInt(iconSize)} />}
+      {children}
+      {IconComponentRight && <IconComponentRight size={parseInt(iconSize)} />}
+    </StyledBadge>
+  );
+};
+
+export default Badge;

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

@@ -1,15 +1,15 @@
-export interface BadgeProps {
-  children: React.ReactNode;
-  size?: "sm" | "md" | "lg";
-  variant?:
-    | "primary"
-    | "outline"
-    | "danger"
-    | "success"
-    | "warning"
-    | "neutral"
-    | "info"; 
-  radius?: "sm" | "md" | "lg" | "full";
-  leftIcon?: string;
-  rightIcon?: string;
-}
+export interface BadgeProps {
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  variant?:
+    | 'primary'
+    | 'outline'
+    | 'danger'
+    | 'success'
+    | 'warning'
+    | 'neutral'
+    | 'info';
+  radius?: 'sm' | 'md' | 'lg' | 'full';
+  leftIcon?: string;
+  rightIcon?: string;
+}