separated styles the components in UI

[evandersondev]

A idéa é deixar os components o mais limpo possivél removendo toda a parte de css, criando um arquivo styles na pasta de cada componente, sugeri colocar por ex: nome-do-componente.styles.js, deixando assim uma forma de se orientar de qual css aquele styles pertence, pensando em dev que utilizam outros editores como o @fdaciuk mencionou nessa PR.

Exemplo com o componente Footer

footer.js

import { smoothScrollTo } from 'utils/smoothScrollTo'

import { motionWrapper, Wrapper, Logo, Navigation, NavItem } from './header.styles'

export const Header = () => {
  function scrollNavigation (e, url) {
    e.preventDefault()
    const to = document.querySelector(url).offsetTop

    smoothScrollTo(0, to)
    window.history.pushState('', '', [url])
  }

  return (
    <Wrapper
      initial='hidden'
      animate='visible'
      variants={motionWrapper}
    >
      <div><Logo src='./hacktoberfest-black.svg' /></div>
      <Navigation>
        {menu.map(({ title, url }) => (
          <NavItem key={title} href={url} onClick={e => scrollNavigation(e, url)}>{title}</NavItem>
        ))}
      </Navigation>
    </Wrapper>
  )
}

footer.styles.js

import styled from 'styled-components'

import { media } from 'ui'

export const Wrapper = styled.footer`
  height: 20rem;
  display: flex;
  align-items: center;
  background-color: ${({ theme }) => theme.colors.primary};
  clip-path: polygon(0% 5rem, 100% 0%, 100% 100%, 0% 100%);
`

export const Content = styled.div`
  padding-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
`

export const Copyright = styled.p`
  font-size: 1.6rem;
  font-weight: 600;

  ${media.lessThan('sm')`
    order: 3;
  `}
`

export const Social = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;

  > *:not(:last-child) {
    margin-right: 2.5rem;
  }
`

[fdaciuk]

Legal @evandersondev! @Mendrone e @vmarcosp, acham que faz sentido? :)

[vmarcosp]

@fdaciuk @evandersondev acho interessante separar, só acho melhor um nome mais simples como components.js ou styles.js dentro da pasta onde está o componente, não vejo necessidade de repetir o nome e prefixa-lo com .styles.js. O que acham @fdaciuk @Mendrone ?

[evandersondev]

Só avisar, com o mesmo nome do componente.js não deixa criar, mas styles.js da certo, mencionei ficar .styles.js porque já vi em alguns projetos assim, fico no aguardo aqui

[fdaciuk]

Acho que usar components.js fica bom. Usar styles.js não faz muito sentido porque não são apenas estilos, são componentes estilizados :)

[evandersondev]

Pronto @fdaciuk , como tinha mencionada, o problema é não poder ter o mesmo nome de arquivo na mesma pasta, por exemplo:

componente.js componente.js

por esse motivo sugeri componente.js componente.styles.js, para deixar claro qual é o arquivo de componente e qual é o arquivo de estilo, assim:

[fdaciuk]

@evandersondev o components.js é literal mesmo, não pra usar o nome do componente :)

[evandersondev]

@fdaciuk então... como seria? assim?

dentro de footer

footer.js components.js

Não entendi como você quis dizer.

[fdaciuk]

Isso mesmo @evandersondev :)