+
+
+
+
+ + 404 +
+Página não encontrada
+
+ {children}
+
+ ),
+);
+
+describe("AsyncFallback component", () => {
+ it("renders children when not loading or error", () => {
+ render(
+ Child
+ Child
+
+ Err
+
+
+
+
+Test
+Snap
+
+
+
+ Snap
+
+
+ {children}
+
+);
+
+export default FallbackContainer;
diff --git a/front-end-challenge/src/components/layout/FallbackContainer/types.ts b/front-end-challenge/src/components/layout/FallbackContainer/types.ts
new file mode 100644
index 00000000..df5d739a
--- /dev/null
+++ b/front-end-challenge/src/components/layout/FallbackContainer/types.ts
@@ -0,0 +1,4 @@
+export interface FallbackContainerProps {
+ className?: string;
+ children: React.ReactNode;
+}
diff --git a/front-end-challenge/src/components/layout/FallbackSpinner/index.tsx b/front-end-challenge/src/components/layout/FallbackSpinner/index.tsx
new file mode 100644
index 00000000..88447e64
--- /dev/null
+++ b/front-end-challenge/src/components/layout/FallbackSpinner/index.tsx
@@ -0,0 +1,12 @@
+import Spinner from "../../ui/Spinner";
+import FallbackContainer from "../FallbackContainer";
+
+function FallbackSpinner() {
+ return (
+ {formatDateTimeWithRelative(post.date)}
+
+
+
+
+
+
+
+
+
+ {name}
+ + +
+
+ Conecte-se comigo nas redes sociais
+
+
+
+ {socialLinks.map((link, index) => (
+
+ {link.icon}
+
+ ))}
+
+ + Snapshot Title +
++ {title} +
+ ); +} + +export default Title; diff --git a/front-end-challenge/src/components/layout/Title/types.ts b/front-end-challenge/src/components/layout/Title/types.ts new file mode 100644 index 00000000..69d45cfc --- /dev/null +++ b/front-end-challenge/src/components/layout/Title/types.ts @@ -0,0 +1,4 @@ +export type TitlePageProps = { + title: string; + className?: string; +}; diff --git a/front-end-challenge/src/components/ui/Button/Button.test.tsx b/front-end-challenge/src/components/ui/Button/Button.test.tsx new file mode 100644 index 00000000..db22110b --- /dev/null +++ b/front-end-challenge/src/components/ui/Button/Button.test.tsx @@ -0,0 +1,51 @@ +import "@testing-library/jest-dom"; + +import { fireEvent, render, screen } from "@testing-library/react"; + +import Button from "../Button"; + +describe("Button component – testes adicionais", () => { + it("fica desabilitado quando `disabled` é true e não dispara onClick", () => { + const handleClick = jest.fn(); + render( + , + ); + const btn = screen.getByRole("button", { name: /não posso/i }); + expect(btn).toBeDisabled(); + fireEvent.click(btn); + expect(handleClick).not.toHaveBeenCalled(); + }); + + it("usa `type='button'` por padrão e permite sobrescrever para `submit`", () => { + render(); + expect(screen.getByRole("button")).toHaveAttribute("type", "button"); + + render(); + expect(screen.getByRole("button", { name: /enviar/i })).toHaveAttribute( + "type", + "submit", + ); + }); + + it("propaga atributos HTML arbitrários (`aria-label`, `data-*`, etc.)", () => { + render( + , + ); + const btn = screen.getByTestId("btn-123"); + expect(btn).toHaveAttribute("aria-label", "Fechar diálogo"); + expect(btn).toHaveTextContent("X"); + }); + + it("combina com o snapshot", () => { + const { asFragment } = render( + , + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/front-end-challenge/src/components/ui/Button/__snapshots__/Button.test.tsx.snap b/front-end-challenge/src/components/ui/Button/__snapshots__/Button.test.tsx.snap new file mode 100644 index 00000000..e93c2f8e --- /dev/null +++ b/front-end-challenge/src/components/ui/Button/__snapshots__/Button.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Button component – testes adicionais combina com o snapshot 1`] = ` +
+
+
+
+ );
+ },
+);
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;
diff --git a/front-end-challenge/src/components/ui/Footer/Footer.test.tsx b/front-end-challenge/src/components/ui/Footer/Footer.test.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/front-end-challenge/src/components/ui/Footer/index.tsx b/front-end-challenge/src/components/ui/Footer/index.tsx
new file mode 100644
index 00000000..8e86b48d
--- /dev/null
+++ b/front-end-challenge/src/components/ui/Footer/index.tsx
@@ -0,0 +1,86 @@
+import clsx from "clsx";
+import React from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import Image from "../Img";
+
+const Footer = ({
+ logo,
+ sections = [],
+ socialLinks = [],
+ className = "",
+}: {
+ logo?: React.ReactNode;
+ sections?: {
+ title?: string;
+ links: { label: string; href: string }[];
+ }[];
+ socialLinks?: { href: string; icon: React.ReactNode }[];
+ className?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/front-end-challenge/src/components/ui/Footer/types.ts b/front-end-challenge/src/components/ui/Footer/types.ts
new file mode 100644
index 00000000..18116516
--- /dev/null
+++ b/front-end-challenge/src/components/ui/Footer/types.ts
@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+export interface HeaderProps {
+ title: string;
+ children?: ReactNode;
+ className?: string;
+}
diff --git a/front-end-challenge/src/components/ui/Header/Header.test.tsx b/front-end-challenge/src/components/ui/Header/Header.test.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/front-end-challenge/src/components/ui/Header/index.tsx b/front-end-challenge/src/components/ui/Header/index.tsx
new file mode 100644
index 00000000..b4baa035
--- /dev/null
+++ b/front-end-challenge/src/components/ui/Header/index.tsx
@@ -0,0 +1,136 @@
+import { Menu, X } from "lucide-react";
+import { useState } from "react";
+
+import Button from "../Button";
+
+const Header = () => {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ const links = [
+ { label: "Início", href: "/", current: true },
+ { label: "Story", href: "/story", current: false },
+ { label: "Menu", href: "/menu", current: false },
+ { label: "Espaço", href: "/space", current: false },
+ { label: "Comunidade", href: "/community", current: false },
+ { label: "Notícias", href: "/news", current: false },
+ ];
+
+ return (
+ -
+
+
+
+
+
+
+
+
+ );
+ },
+);
+
+Radio.displayName = "Radio";
+
+export default Radio;
diff --git a/front-end-challenge/src/components/ui/Radio/types.ts b/front-end-challenge/src/components/ui/Radio/types.ts
new file mode 100644
index 00000000..72f7a9fa
--- /dev/null
+++ b/front-end-challenge/src/components/ui/Radio/types.ts
@@ -0,0 +1,10 @@
+export interface RadioProps
+ extends React.InputHTMLAttributes| H1 | +Cell | +
|---|
| Header | +
|---|
| Row | +
| Data | +
| Data | +
+
+ ),
+);
+Table.displayName = "Table";
+
+export function TableHead({ children }: SectionProps) {
+ return (
+
+
+
+ {children}
+
+
+ | Cell Content | +
| Custom Cell | +
| + Test + | +
| Spanned Cell | +
| + Snap + | +
| + Snap + | +
| Header | +
|---|
| Col | +
|---|
| + X + | +
|---|
| + Snap + | +
|---|
| + Snap + | +
|---|
+
+ + Últimas Notícias +
++ Receba as últimas atualizações e uma experiência mais profunda do + Apiki +
+ + {data && ( + <> + {(() => { + const allPosts = data.pages.flatMap((page) => page.posts); + const [firstPost, ...otherPosts] = allPosts; + + return ( + <> + {firstPost && ( +
+ {otherPosts.map((post) => (
+
+
+ );
+ })()}
+
+ )}
+
+ {hasNextPage && (
+
+
+
+ )}
+
+
+
+
+
+
+
+ + {formatDateTimeWithRelative(post?.date || "")} +
+