Entrar Ainda não tem acesso?
1
resposta

Divergências de código

Referente ao curso NextJS: documentando seu Front-end com o Storybook, no capítulo Temas e Providers e atividade Criando o tema do projeto

por Nikolas Gabriel Da Silva
| 29.1k xp | 2 posts

Olá, a partir da aula 2 da sessão 3 do curso o meu código começou a ter divergências em relação ao mostrado.

1- O ':hover' e o 'focus' do botão não estão funcionando, segue abaixo o trecho do arquivo 'Button.tsx':

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button<ButtonProps>`
  cursor: pointer;
  border: 0;
  padding: 8px 14px;
  transition: 0.3s;
  ${({ theme, variant }) => {
    console.log(theme);

    return {
      backgroundColor: theme.colors[variant].main,
      color: theme.colors[variant].text,
      ':hover': {
        backgroundColor: theme.colors[variant].light,
      },
      ':focus': {
        backgroundColor: theme.colors[variant].dark,
      }
    }
  }}
`;

2- No arquivo 'preview.ts', ao tentar chamar o ThemeProvider aparece o seguinte erro: 'ThemeProvider' refers to a value, but is being used as a type here. Did you mean 'typeof ThemeProvider'? Segue abaixo como meu código está:

import ThemeProvider from "../src/theme/ThemeProvider";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story) => (
    <ThemeProvider>
      <Story />
    </ThemeProvider>
  )
];

Acredito que possa ser diferença de versões do next ou do storybook, mas não tenho certeza. Saberia me indicar?

1 resposta
por Renan Cezar Wuicik
| 2743k xp | 5683 posts
Instrutor Suporte Educacional Start By Alura

Olá, Nikolas! Tudo ok contigo?

1- Em relação ao :hover e :focus do botão não estarem funcionando, verifiquei que você está utilizando o styled-components para estilizar o botão. Para que esses estilos funcionem corretamente, é necessário adicionar a propriedade as ao componente StyledButton e passar o valor 'button'. Dessa forma, o styled-components saberá que se trata de um botão e aplicará corretamente os estilos de :hover e :focus. Seu código ficaria assim:

const StyledButton = styled.button<ButtonProps>`
  cursor: pointer;
  border: 0;
  padding: 8px 14px;
  transition: 0.3s;
  ${({ theme, variant }) => {
    console.log(theme);

    return {
      backgroundColor: theme.colors[variant].main,
      color: theme.colors[variant].text,
      ':hover': {
        backgroundColor: theme.colors[variant].light,
      },
      ':focus': {
        backgroundColor: theme.colors[variant].dark,
      }
    }
  }}
` as 'button'; // Adicione essa linha

2- Em relação ao erro que você está recebendo ao chamar o ThemeProvider no arquivo preview.ts, parece que você está importando o ThemeProvider de forma incorreta. Em vez de importar apenas o ThemeProvider, você precisa importar o ThemeProvider do styled-components. O código corrigido ficaria assim:

import { ThemeProvider } from "styled-components"; // Correção: importar o ThemeProvider do styled-components

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story) => (
    <ThemeProvider>
      <Story />
    </ThemeProvider>
  )
];

Essas correções devem resolver os problemas que você está enfrentando. Lembre-se de verificar se você está utilizando as versões corretas do Next.js e do Storybook, pois diferenças de versão podem causar divergências de código.

Espero ter ajudado! Se tiver mais alguma dúvida, é só me dizer.

Abraços e Bons estudos!

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓