[Dúvida] Diferença de conteúdo apresentado em vídeo X código corrente

Olá!

Valeu por compartilhar!

Imagina,

Gostaria de ter essa confirmação da equipe, se deveria ter uma aula antes para a configuração que apareceu no vídeo conforme indicado acima

Obrigado.

Bom dia

Por gentileza, algum retorno da Alura?, precisava de confirmar para prosseguir com as próximas aulas.

Obrigado.

Olá! Tudo bem?

Essas propriedades que aparecem no Storybook são uma inferência do próprio Storybook. Acontece que o storybook identifica o tipo do elemento e a partir daí ele automaticamente faz essa dedução de que aquele elemento ou componente pode receber esses tipos como. No curso que vem na sequência desse vamos explorar mais o storybook, descobrir como melhorar nossa documentação e como usar plugins para melhorar ainda mais a organização da nossa biblioteca de componentes.

O curso em questão é este aqui: React: eleve o nível da sua documentação no Storybook

Espero ter ajudado! Bons estudos.

Boa noite, tudo bem?

Obrigado pelo retorno

Gostaria de compartilhar o motivo de não estar aparecendo as propriedades ao executar o storybook. Inclusive não é devido a não ter o indicativo no vídeo não (está correto a sequência dos vídeos, irei atualizar o descritivo do problema acima também), até porque todas as propriedades são carregadas automaticamente usando da técnica do CVA e não mais sendo necessário definir cada uma, conforme modelo anterior apresentado no primeiro curso da formação para demonstrativo / preparativo.

Anteriormente estava exportando o componente Typography como Default

// Componente Typography

const Typography = ({
  children,
  element = 'p',
  className,
  ...rest
}: TypographyProps) => {
  const Element = element as any;

  return (
    <Element className={`${textVariants(rest)} ${className}`} {...rest}>
      {children}
    </Element>
  );
};

Export default Typography

// Arquivo stories do Typography

import Typography, {TypographyProps } from './typography';

Por algum motivo, utilizando a exportação como Default, não funcionou no arquivo stories no momento da importação e assim as propriedades do componente no storybook não eram geradas dinamicamente e gerando um erro. Ao consultar pela mensagem, localizei no Google um indicativo de problema semelhante, mas em um outro contexto de projeto e a solução foi ajustar a importação retirando o default (embora nos outros componentes o uso do default funcionou normalmente)

// Componente Typography

export const Typography = ({
  children,
  element = 'p',
  className,
  ...rest
}: TypographyProps) => {
  const Element = element as any;

  return (
    <Element className={`${textVariants(rest)} ${className}`} {...rest}>
      {children}
    </Element>
  );
};

// Arquivo stories do Typography

import { Typography, TypographyProps } from './typography';

Obrigado

Felipe D. R