
## 🧩 Por que "From Atom to Page"?

Atomic Design é mais do que um jeito de nomear pastas.  
É uma forma de pensar a arquitetura de componentes com **clareza semântica**, **reaproveitamento consciente** e **manutenção fácil**.

Neste artigo, você vai ver:
- Como estruturar seu projeto por nível (átomos, moléculas, organismos, templates e páginas)
- Como aplicar isso com **Next.js (App Router)** e **Tailwind CSS**
- Como escrever componentes realmente reutilizáveis — sem cair no buraco das props infinitas

---

## 🚫 O problema: componentes genéricos demais

```tsx
<Card
  title="Produto A"
  description="Descrição"
  icon={<Info />}
  withActions
  variant="info"
  size="compact"
/>
```

O código *parece reutilizável*, mas:
- Fica acoplado demais à lógica interna
- Quebra facilmente em escala
- Fica difícil de manter e testar

---

## ✅ A solução: composição clara + Atomic Design

### Átomos (Text + Button)

```tsx
export const Text = ({ as: Tag = 'p', children }: {
  as?: React.ElementType;
  children: React.ReactNode;
}) => (
  <Tag className="text-base text-zinc-700 dark:text-zinc-300">{children}</Tag>
);

export const Button = ({ children, ...props }: {
  children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>) => (
  <button
    className="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-sm"
    {...props}
  >
    {children}
  </button>
);
```

---

### Moléculas

```tsx
export const CardHeader = ({ icon, title }: {
  icon?: React.ReactNode;
  title: React.ReactNode;
}) => (
  <div className="flex items-center gap-3">
    {icon && (
      <span className="inline-flex items-center justify-center h-5 w-5 text-blue-500">
        {icon}
      </span>
    )}
    {title}
  </div>
);

export const CardActions = ({ children }: { children: React.ReactNode }) => (
  <div className="flex justify-end items-center">
    {children}
  </div>
);
```

---

### Organismo

```tsx
export const Card = ({
  header,
  children,
  actions,
}: {
  header: React.ReactNode;
  children: React.ReactNode;
  actions?: React.ReactNode;
}) => (
  <div className="bg-zinc-800 dark:bg-zinc-900 rounded-xl shadow-lg/5 overflow-hidden">
    <div className="divide-y divide-zinc-700">
      <div className="p-6 flex justify-between items-start">
        {header}
        {actions && <div>{actions}</div>}
      </div>
      <div className="p-6">
        {children}
      </div>
    </div>
  </div>
);
```

---

### Template (CardListTemplate)

```tsx
export const CardListTemplate = ({ cards }: {
  cards: { icon: React.ReactNode; title: string; description: string }[];
}) => (
  <div className="grid gap-6 md:grid-cols-2">
    {cards.map((card, idx) => (
      <Card
        key={idx}
        header={<CardHeader icon={card.icon} title={<Text as="h3" variant="title">{card.title}</Text>} />}
        actions={<CardActions><Button>See more</Button></CardActions>}
      >
        <Text variant="body">{card.description}</Text>
      </Card>
    ))}
  </div>
);
```

---

### Página (`app/produtos/page.tsx`)

```tsx
import { Info, AlertTriangle } from 'lucide-react';
import { CardListTemplate } from '@/components/templates/CardListTemplate';

export default function ProdutosPage() {
  return (
    <main className="container mx-auto py-10">
      <h1 className="text-3xl font-bold text-zinc-100 dark:text-zinc-100 mb-6">
        Products
      </h1>
      <CardListTemplate
        cards={[
          { title: 'Product A', description: 'Description A', icon: <Info size={20} /> },
          { title: 'Product B', description: 'Description B', icon: <AlertTriangle size={20} /> },
        ]}
      />
    </main>
  );
}
```

---

## 🎯 Conclusão

Atomic Design só funciona quando:

- Cada componente tem responsabilidade clara
- A composição vem antes da configuração
- O time fala a mesma linguagem semântica

Este exemplo mostra **como escalar design system com estrutura de verdade**, sem cair em abstrações frágeis.

---
#### Github
O repositório com todos os exemplos do artigo (e dos carrosséis) está disponível em:  
👉 [github.com/jlameira/from-atom-to-page](https://github.com/jlameira/from-atom-to-page)


Um guia técnico com exemplos reais de como aplicar todos os níveis do Atomic Design em um projeto com React + Next.js.

From Atom to Page - Aplicando Atomic Design com Next.js

Novo artigo no blog: aplicando todos os níveis do Atomic Design em projetos Next.js com foco em escalabilidade, clareza e reuso consciente.


## *Introdução:*

  No desenvolvimento de software, padrões de projeto podem desempenhar um papel fundamental na criação de sistemas robustos e de fácil manutenção. Neste artigo, exploraremos como aplicar dois desses padrões, Domain-Driven Design (DDD) e Value Objects, propostos por Martin Fowler, na linguagem Go (Golang). Vamos utilizar um exemplo prático de cálculo de frete utilizando a API dos Correios para ilustrar como esses padrões podem ser implementados em uma arquitetura com mais detalhes.

#### _O que é Domain-Driven Design (DDD)?_

_Domain-Driven Design_ é uma metodologia que tem como objetivo alinhar o desenvolvimento de software com o domínio do negócio. Com DDD, podemos dividir nossa aplicação em diferentes camadas e focar na modelagem do domínio do problema. Em nosso exemplo, consideraremos as camadas Domínio, Aplicação e Infraestrutura.

_Value Objects no contexto de DDD_:

_Value Objects_ são objetos imutáveis que representam um valor único. Eles são identificados por suas propriedades e não possuem uma identidade própria. Ao utilizar Value Objects, podemos garantir a integridade dos dados e evitar problemas relacionados a objetos mutáveis.

_Cálculo de Frete na API dos Correios_:

Vamos imaginar que estamos desenvolvendo um serviço de cálculo de frete para um sistema de comércio eletrônico, onde receberemos uma requisição contendo as informações do produto e do endereço de entrega. Vamos aplicar os conceitos de DDD e Value Objects para modelar o cálculo de frete utilizando a API dos Correios.Em nossa arquitetura, teremos as seguintes camadas:

### **Camada de Domínio:**
Nessa camada, criaremos nosso Value Object "Frete", que representará o cálculo de frete.

![struct-frete](./assets/img/ddd-value-object/struct-frete.png "Struct Frete")


### **Camada de Aplicação:**
Nessa camada, criaremos um serviço que receberá a requisição contendo as informações do produto e do endereço de entrega, calculará o frete utilizando o Value Object "Frete" e retornará o resultado.
package application

![struct-frete](./assets/img/ddd-value-object/service-frete.png "Service Frete")


### **Camada de Infraestrutura:**
Nessa camada, implementamos a integração com a API dos Correios e a chamada do método adequado para calcular o prazo de entrega.

![struct-frete](./assets/img/ddd-value-object/infra-part-1.png "Infraestructure")
![struct-frete](./assets/img/ddd-value-object/infra-part-2.png "Infraestructure 2")

## *Conclusão:*
Ao aplicar os princípios do Domain-Driven Design (DDD) e o padrão de projeto Value Objects em Golang, podemos desenvolver sistemas mais robustos e de fácil manutenção. O exemplo prático do cálculo de frete utilizando a API dos Correios demonstra como esses padrões podem ser implementados em uma arquitetura com várias camadas, proporcionando uma melhor separação de responsabilidades e maior clareza na modelagem do domínio. Ao adotar essas práticas em seus projetos em Golang, você estará construindo sistemas mais confiáveis e escaláveis, proporcionando uma melhor experiência para os usuários de suas aplicações. O DDD e os Value Objects são ferramentas poderosas para tornar o desenvolvimento mais inteligente e eficaz, trazendo benefícios tangíveis para a experiência do usuário e para o seu negócio como um todo.

#### Github:
Exemplo completo disponível no Github:
[golang-tips](https://github.com/jlameira/golang-tips.git)


Desvendando a Eficiência nos Cálculos de Frete

Estarei compartilhando nesse blog várias informações .

Jonathan LameiraSoftware Engineer

From Atom to Page - Aplicando Atomic Design com Next.js

Um guia técnico com exemplos reais de como aplicar todos os níveis do Atomic Design em um projeto com React + Next.js.

Desvendando a Eficiência nos Cálculos de Frete

Aplicando DDD e Value Objects em Golang!