https://github.com/code-challenges-org/atomic-design-react

Exemplo prático utilizando os princípios do Atomic Design no React para criar componentes mais limpos, simples e fácil de testar.
https://github.com/code-challenges-org/atomic-design-react

atomic-design jest react storybook typescript

Last synced: 4 months ago
JSON representation

Exemplo prático utilizando os princípios do Atomic Design no React para criar componentes mais limpos, simples e fácil de testar.

• Host: GitHub
• URL: https://github.com/code-challenges-org/atomic-design-react
• Owner: code-challenges-org
• Created: 2024-07-13T18:18:27.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-23T22:31:40.000Z (7 months ago)
• Last Synced: 2024-09-30T22:41:57.398Z (4 months ago)
• Topics: atomic-design, jest, react, storybook, typescript
• Language: TypeScript
• Homepage:
• Size: 92.8 KB
• Stars: 1
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



**Atomic Design** é uma metodologia desenvolvida por **Brad Frost** e segue uma ideia de que interfaces podem ser quebradas em elementos fundamentais e recombinados para formar estruturas mais complexas.

Para conseguir aplicar Atomic Design da forma correta, você precisa entender como funciona a separação de **átomos**, **moléculas** e **organismos**.

## Átomos

São componentes primitivos que não contém dependência de outros componentes.

### Exemplo

```jsx

export const Image = (props: ImageProps) => {

  return ;

};

```

## Moléculas

São componentes que contém dependência de ao menos um átomo.

### Exemplo

```jsx

import { Image } from '@/components/atoms/Image';

import { Button } from '@/components/atoms/Button';

export const Thumbnail = (props: ThumbnailProps) => {

  return (

    


      


      Play

    

  );

};

```


## Organismo

São componentes que contém dependência de ao menos uma molécula.

### Exemplo

```jsx

import { Video } from '@/components/atoms/Video';

import { Thumbnail } from '@/components/molecules/Thumbnail';

export const VideoThumbnail = (props: VideoThumbnailProps) => {

  const [isPlayingVideo, setIsPlayingVideo] = useState(false);

  if (isPlayingVideo) {

    return ;

  }

  return ;

};

```




Ao entender como funciona essa separação é possível ver os ganhos ao aplicar Atomic Design em seus componentes.

Atomic Design faz você pensar mais no **design (modelagem)** dos componentes para que você não ultrapasse os limites de átomos, moléculas e organismos, como criar um átomo contendo um componente como dependência ou um organismo como sendo uma molécula.

Essas restrições geram componentes pequenos, reutilizáveis e fácil de testar.