TEC-4404: Badge component #35
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughEste pull request introduz um novo componente chamado Changes
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
joelsalmeida
added
publish_docs
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (9)
src/components/Badge/type.ts (1)
1-5: Adicione documentação JSDoc para melhorar a manutenibilidade.A estrutura do tipo está correta, mas seria benéfico adicionar documentação JSDoc descrevendo o propósito de cada propriedade.
Sugiro adicionar a seguinte documentação:
+/** + * Props do componente Badge + * @property {('small' | 'normal')} [size] - Tamanho do badge + * @property {string} [backgroundColor] - Cor de fundo personalizada + * @property {React.ReactNode} [children] - Conteúdo do badge + */ type BadgeProps = { size?: 'small' | 'normal' backgroundColor?: string children?: React.ReactNode }src/components/Badge/index.tsx (2)
4-8: Documente as props do componenteRecomendo adicionar documentação JSDoc para descrever o propósito de cada prop e seus valores possíveis, especialmente para
sizeebackgroundColor.+/** + * Componente Badge para exibir indicadores visuais + * @param {('small'|'medium'|'large')} size - Tamanho do badge + * @param {string} backgroundColor - Cor de fundo em formato hexadecimal + * @param {React.ReactNode} children - Conteúdo do badge + */ const Badge = ({ size = 'small', backgroundColor = '#2391E1', children, }: BadgeProps) => {
10-12: Considere adicionar validação para backgroundColorO componente aceita qualquer string como cor de fundo. Seria útil adicionar uma validação para garantir que apenas cores válidas sejam aceitas.
+const isValidHexColor = (color: string) => /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color); const Badge = ({ size = 'small', backgroundColor = '#2391E1', children, }: BadgeProps) => { + if (backgroundColor && !isValidHexColor(backgroundColor)) { + console.warn('Badge: backgroundColor deve ser uma cor hexadecimal válida'); + } return ( <BadgeStyled $size={size} $backgroundColor={backgroundColor}> {children} </BadgeStyled> ); }src/components/Badge/style.tsx (3)
3-3: Considere adicionar validação de tipos mais específicaA tipagem atual permite qualquer string para
$size, o que pode levar a valores inesperados. Recomendo utilizar um tipo mais específico.-const BadgeStyled = styled.div<{ $size?: string; $backgroundColor?: string }>` +type BadgeSize = 'small' | 'default'; +const BadgeStyled = styled.div<{ $size?: BadgeSize; $backgroundColor?: string }>`
8-8: Considere usar theme tokens para padronizaçãoOs valores de padding estão hardcoded. Seria interessante utilizar tokens do theme para manter consistência com outros componentes.
- padding: ${(props) => (props.$size === 'small' ? '4px 6px' : '6px 8px')}; + padding: ${(props) => (props.$size === 'small' ? props.theme.spacing.xxs : props.theme.spacing.xs)};
13-14: Considere usar theme tokens para tipografiaOs valores de font-size e line-height poderiam vir do theme para manter consistência tipográfica.
- font-size: 0.75rem; - line-height: 1; + font-size: ${props => props.theme.typography.sizes.xs}; + line-height: ${props => props.theme.typography.lineHeight.compact};src/components/Badge/index.stories.tsx (3)
67-69: Considerar uso de styled-componentsO uso de estilos inline pode dificultar a manutenção. Considere mover estes estilos para um componente estilizado.
Sugestão de implementação:
const StyledLabel = styled.span` color: #1B6AA3; font-size: 12px; line-height: 1; `E então usar:
- <span style={{ color: '#1B6AA3', fontSize: '12px', lineHeight: '1' }}> - A nice label - </span> + <StyledLabel>A nice label</StyledLabel>
65-66: Remover linha em branco desnecessáriaHá uma linha em branco desnecessária entre os elementos do Badge.
<Badge {...args}> <Money color="#1B6AA3" size={16} /> - <span style={{ color: '#1B6AA3', fontSize: '12px', lineHeight: '1' }}>
5-29: Sugerir testes de acessibilidadeO componente Badge parece bem implementado, mas seria importante adicionar testes de acessibilidade. Considere adicionar:
- Verificação de contraste para diferentes combinações de cores
- Testes com screen readers
- Documentação sobre práticas de acessibilidade
Você pode utilizar o addon
@storybook/addon-a11ypara realizar testes automáticos de acessibilidade. Adicione ao meta:const meta: Meta<typeof Badge> = { component: Badge, tags: ['autodocs'], + parameters: { + a11y: { + config: { + rules: [ + { + id: 'color-contrast', + enabled: true + } + ] + } + } + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
src/components/Badge/index.stories.tsx(1 hunks)src/components/Badge/index.tsx(1 hunks)src/components/Badge/style.tsx(1 hunks)src/components/Badge/type.ts(1 hunks)src/components/index.ts(2 hunks)src/index.ts(2 hunks)
🔇 Additional comments (8)
src/components/Badge/type.ts (1)
7-7: Exportação adequada do tipo!
A exportação nomeada do tipo está correta e segue as boas práticas.
src/components/Badge/index.tsx (2)
16-16: LGTM! Exportação correta do componente.
A exportação nomeada está adequada e segue as boas práticas.
1-2: Considere adicionar validação de tipos para as importações
Embora as importações estejam corretas, seria útil garantir que os tipos e componentes estilizados existam verificando os arquivos relacionados.
✅ Verification successful
As importações estão corretamente tipadas e implementadas ✅
Os arquivos type.ts e style.tsx existem e estão corretamente implementados:
type.tsdefine adequadamente a interfaceBadgePropscom todas as props necessáriasstyle.tsximplementa o componente estilizado com os props tipados usando o prefixo$
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Verificar a existência dos arquivos de tipo e estilo
echo "Verificando arquivos relacionados ao Badge..."
fd --type f "type.ts|style.ts" --parent-dir "src/components/Badge"
Length of output: 436
Script:
#!/bin/bash
# Verificar a existência dos arquivos de tipo e estilo
echo "Verificando arquivos relacionados ao Badge..."
fd "type.ts|style.ts" src/components/Badge
# Verificar o conteúdo dos arquivos se existirem
echo -e "\nConteúdo dos arquivos (se encontrados):"
for file in $(fd "type.ts|style.ts" src/components/Badge); do
echo -e "\n=== $file ==="
cat "$file"
done
Length of output: 1335
src/components/Badge/style.tsx (1)
4-8: LGTM! Boas práticas de layout flexbox aplicadas
A implementação do layout usando flexbox com gap e width: fit-content está adequada e segue boas práticas.
src/index.ts (1)
35-35: LGTM! Importação e exportação do componente Badge adicionadas corretamente.
O componente Badge foi adicionado de forma consistente tanto na lista de importações quanto na lista de exportações, seguindo o padrão alfabético existente no arquivo.
Also applies to: 73-73
src/components/index.ts (2)
31-31: LGTM! Importação do componente Badge.
A importação do novo componente Badge está correta e segue o padrão existente no arquivo.
64-64: LGTM! Exportação do componente Badge.
A exportação do componente Badge está correta e mantém a consistência com os outros componentes do arquivo.
src/components/Badge/index.stories.tsx (1)
32-32: Definição de tipo correta
A definição do tipo Story está adequada e segue as melhores práticas do Storybook.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (8)
src/components/Badge/type.ts (3)
1-6: Considere adicionar documentação JSDoc para melhor DXRecomendo adicionar documentação JSDoc para melhorar a experiência do desenvolvedor (DX) e tornar o componente mais fácil de usar.
Sugestão de implementação:
+/** + * Props do componente Badge + * @property {('small' | 'normal')} [size='normal'] - Tamanho do badge + * @property {string} [backgroundColor] - Cor de fundo personalizada + * @property {React.ReactNode} [children] - Conteúdo do badge + * @property {boolean} [fullWidth=false] - Se o badge deve ocupar toda a largura disponível + */ type BadgeProps = { size?: 'small' | 'normal' backgroundColor?: string children?: React.ReactNode fullWidth?: boolean }
2-2: Considere adicionar um valor padrão explícito no tipoPara melhor clareza na API do componente, seria interessante indicar o valor padrão diretamente no tipo.
Sugestão:
- size?: 'small' | 'normal' + size?: 'small' | 'normal' // default: 'normal'
3-3: Considere usar um tipo mais específico para coresPara garantir maior type safety, poderia ser interessante criar um tipo específico para as cores permitidas, baseado no seu design system.
Exemplo de implementação:
type BadgeColors = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | stringE então usar:
- backgroundColor?: string + backgroundColor?: BadgeColorssrc/components/Badge/index.tsx (2)
4-9: Considere documentar as props com JSDocSeria útil adicionar documentação JSDoc para descrever o propósito de cada prop e seus valores possíveis, especialmente para
sizeque parece ter valores específicos permitidos.+/** + * Componente Badge para exibir indicadores visuais + * @param {object} props + * @param {'small' | 'medium' | 'large'} [props.size='small'] - Tamanho do badge + * @param {string} [props.backgroundColor='#2391E1'] - Cor de fundo do badge + * @param {boolean} [props.fullWidth=false] - Se o badge deve ocupar toda a largura disponível + */ const Badge = ({ size = 'small', backgroundColor = '#2391E1', children, fullWidth = false, }: BadgeProps) => {
21-21: Considere exportar os tipos junto com o componentePara melhorar a experiência do desenvolvedor, seria útil exportar também a interface
BadgeProps.-export { Badge } +export { Badge, type BadgeProps }src/components/Badge/style.tsx (1)
13-14: Considere utilizar tokens de designOs valores de padding e border-radius estão hardcoded. Recomendo utilizar tokens de design do tema para maior consistência.
Sugestão de refatoração:
- padding: ${(props) => (props.$size === 'small' ? '4px 6px' : '6px 8px')}; - border-radius: 4px; + padding: ${(props) => (props.$size === 'small' ? theme.spacing.xxs : theme.spacing.xs)}; + border-radius: ${theme.borderRadius.sm};src/components/Badge/index.stories.tsx (2)
5-31: Melhorar a documentação dos argTypesA configuração está bem estruturada, mas poderia beneficiar de documentação mais detalhada. Sugiro:
- Adicionar exemplos de valores válidos nas descrições
- Documentar valores padrão
- Especificar unidades de medida quando aplicável
Exemplo de melhoria:
size: { control: { type: 'select' }, options: ['small', 'normal'], - description: 'The size of the Badge.', + description: 'Tamanho do Badge. Padrão: normal', }, backgroundColor: { control: { type: 'color' }, - description: 'The background color of the Badge.', + description: 'Cor de fundo do Badge. Ex: #000000, rgb(0,0,0)', },
36-94: Padronizar textos e melhorar acessibilidadeExistem algumas inconsistências e pontos de melhoria nas stories:
- O texto "A nice label" está em inglês em todas as stories
- Stories com ícones não possuem
aria-labelou texto alternativo- Estilos inline no
WithCustomTextColorpoderiam ser movidos para componentes estilizadosSugestões de melhorias:
// Para stories com ícones export const WithIcon: Story = { render: (args) => ( <Badge {...args}> - <Money color="white" size={16} />A nice label + <Money color="white" size={16} aria-hidden="true" /> + <span>Valor monetário</span> </Badge> ), } // Para WithCustomTextColor export const WithCustomTextColor: Story = { render: (args) => ( <Badge {...args}> - <Money color="#1B6AA3" size={16} /> + <Money color="#1B6AA3" size={16} aria-hidden="true" /> - <span style={{ color: '#1B6AA3', fontSize: '12px', lineHeight: '1' }}> + <StyledLabel> A nice label - </span> + </StyledLabel> </Badge> ), }Crie um novo arquivo de estilos para o componente:
// styles.ts export const StyledLabel = styled.span` color: #1B6AA3; font-size: 12px; line-height: 1; `;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/components/Badge/index.stories.tsx(1 hunks)src/components/Badge/index.tsx(1 hunks)src/components/Badge/style.tsx(1 hunks)src/components/Badge/type.ts(1 hunks)
🔇 Additional comments (7)
src/components/Badge/type.ts (1)
8-8: LGTM! Padrão de exportação adequado
A exportação nomeada do tipo está correta e segue as boas práticas do TypeScript.
src/components/Badge/index.tsx (2)
1-2: Imports organizados e claros
As importações estão bem estruturadas, separando tipos e estilos de forma adequada.
11-17: Verifique a necessidade de validação de cores
O componente aceita qualquer string como backgroundColor. Considere adicionar validação para garantir que apenas cores válidas sejam aceitas.
Sugestão de implementação:
const isValidColor = (color: string): boolean => {
const s = new Option().style;
s.color = color;
return s.color !== '';
};src/components/Badge/style.tsx (3)
3-7: Interface de props bem estruturada
A interface das props está bem definida com prefixo $ seguindo as convenções do styled-components, e todos os props são opcionais conforme necessário.
8-12: Layout flexível implementado corretamente
O uso de display: flex com alinhamento centralizado e gap proporciona um layout consistente. A propriedade width está corretamente condicionada ao prop $fullWidth.
15-19:
Problema crítico de contraste - Implementar validação
O comentário anterior sobre o problema de contraste continua válido. A cor do texto está fixa em branco (color: white), o que pode causar problemas de acessibilidade quando o backgroundColor for muito claro.
Sugestão de implementação usando polished:
+ import { getContrast } from 'polished';
+ import { theme } from '../../theme';
background-color: ${(props) =>
- props.$backgroundColor ? `${props.$backgroundColor}` : '#2391E1'};
- color: white;
+ props.$backgroundColor ? `${props.$backgroundColor}` : theme.colors.primary};
+ color: ${(props) => {
+ const bgColor = props.$backgroundColor || theme.colors.primary;
+ return getContrast(bgColor, '#FFF') < 3.5 ? '#000' : '#FFF';
+ }};src/components/Badge/index.stories.tsx (1)
84-94: Verificar contraste de cores
No story WithCustomBackgroundColor, é importante garantir que a cor de fundo (#CE2A36) tenha contraste suficiente com a cor do texto para manter a acessibilidade.
Execute o script abaixo para verificar outras ocorrências de cores personalizadas no código:
✅ Verification successful
Atenção ao contraste entre texto e fundo no Badge
A cor de fundo #CE2A36 (vermelho) está sendo usada com texto branco (#FFFFFF). Esta combinação possui uma razão de contraste adequada para acessibilidade. No entanto, é importante notar que:
- O componente Badge sempre usa texto branco (#FFFFFF) por padrão
- A cor #CE2A36 corresponde ao token
brand100do tema light - Recomenda-se usar os tokens de cor do sistema ao invés de valores hexadecimais diretos
Sugestões:
- Utilize o token
colors.light.brand.brand100ao invés do valor hexadecimal direto - Documente no story que cores de fundo personalizadas devem manter contraste mínimo de 4.5:1 com texto branco para conformidade WCAG 2.1
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Procurar por definições de cores hexadecimais ou RGB no código
rg -i '(#[0-9A-F]{6}|rgb\([0-9,\s]+\))' --type tsx
Length of output: 80
Script:
#!/bin/bash
# Procurar por definições de cores hexadecimais ou RGB em todos os arquivos
rg -i '(#[0-9A-F]{6}|rgb\([0-9,\s]+\))'
# Procurar pelo arquivo de tema ou configuração de cores
fd -e ts -e tsx -e js -e jsx theme
fd -e ts -e tsx -e js -e jsx color
Length of output: 9315
Script:
#!/bin/bash
# Verificar o conteúdo do arquivo de tema para entender as configurações de cores do texto
cat src/theme.ts
# Verificar o conteúdo do arquivo de cores para entender as definições de cores do sistema
cat src/tokens/colors.ts
# Verificar a implementação do componente Badge para entender como as cores são aplicadas
cat src/components/Badge/style.tsx
Length of output: 3749
Task link
Task link from JIRA
Layout link
Figma layout link
Task description
Create Badge component.
Screenshots
Ambient to test
Local