Teste técnico para desenvolvedores React.JS

react_tech_interview.md

Construa um componente de dropdown

Nesse teste gostaríamos que você construisse um componente dropdown reutilizável. O dropdown deve abrir ao clicar no ícone "mais", e deve exibir algumas ações extras para que o usuário possa interagir.

Estado fechado:

Estado Aberto:

O ícone "mais" e alguns valores de cores estão incluídos abaixo, mas não se preocupe muito em combinar perfeitamente com o design. Estes foram fornecidos para poupar tempo na escolha de cores e iconografia.

Coisas para se pensar

• Devemos permitir que o menu seja alinhado à esquerda e à direita?
• O componente deve ser reutilizável, então tente pensar na API que você fornecerá a outros desenvolvedores
• O componente funcionará para usuários que não possuem mouse?

Uma nota sobre a estrutura

Apesar de ficar totalmente a seu critério como o componente será estruturado, nós gostaríamos que você utilizasse o conceito de composição ao invés de herança para esse teste (saber mais). Nós não vamos lhe desclassificar caso opte por utilizar um ou outro, mas como vários projetos nossos já estão utilizando composição, é meio que "a preferência da casa" 😄

// composição
<Tile>
  <TileHeader>Header</TileHeader>
  <TileContent>Conteúdo...</TileContent>
  <TileFooter>
    <SecondaryButton onClick={...}>Cancelar</SecondaryButton>
    <PrimaryButton onClick={...}>Prontinho!</PrimaryButton>
  </TileFooter>
<Tile>

// herança
<Tile
  header="Header"
  content="Conteúdo..."
  onCancelClick={...}
  onDoneClick={...}
/>

Pode ser útil

// backgrounds
black100: hsla(225, 14%, 12%, 1)
black200: hsla(225, 14%, 14%, 1)
black300: hsla(225, 14%, 16%, 1)
black400: hsla(225, 14%, 18%, 1)
black500: hsla(225, 14%, 20%, 1)
black600: hsla(225, 14%, 22%, 1)
black700: hsla(225, 14%, 24%, 1)
black800: hsla(225, 14%, 26%, 1)
black900: hsla(225, 14%, 28%, 1)

// text
white100: hsla(225, 14%, 100%, 1)
white200: hsla(225, 14%, 100%, 0.8)

// primary
blue100: hsla(210, 100%, 37%, 1)
blue200: hsla(210, 100%, 33%, 1)
blue300: hsla(210, 100%, 35%, 1)
blue400: hsla(210, 100%, 33%, 0.5)

---

import React from "react";

type Props = {
  color?: string;
  width?: number | string;
  height?: number | string;
  size?: number | string;
};

const MoreIcon = ({ color, size = 24, ...props }: Props) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    {...props}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M10.5 16.5a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0zm0-4.5a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0zm0-4.5a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0z"
      fill={color || "currentColor"}
    />
  </svg>
);

export { MoreIcon };

Mão na massa!

• Você deve gastar no máximo 3 horas para concluir esta tarefa. Não esperamos um código pronto para produção, mas pedimos que você forneça notas junto com sua URL de envio sobre o que você faria se tivesse mais tempo.
• Aqui nós presamos muito por uma boa documentação, então não economize!
• Conclua seu envio em um local compartilhável. Recomendamos usar https://codesandbox.io/.
• Depois de concluído, envie por e-mail a url do seu envio para o(a) entrevistador(a) junto com quaisquer notas que ache válido)
• TypeScript e testes unitários são opcionais (mas muito bem-vindos 😉)

Boa sorte, você consegue! 👊🏼