#96 - refact: padronizacao componentes e classes css #118

Ester-Arruda · 2023-11-28T16:41:52Z

#96 - refact: padronizacao componentes e classes css

🆙 CHANGELOG

Padronizamos nomenclatura dos repositórios que contém os componentes para notação kebab-case e idioma inglês;
Padronizamos nomenclatura de componentes para o idioma inglês;
Padronizamos nomenclatura de classes CSS para o idioma inglês e notação kebab-case.

⚠️ Me certifico que:

Não deixei nenhum novo warning, erro ou console.log nas minhas modificações
Fiz deploy para ambiente de teste certificando que o build não quebrou
Solicitei code review para 2 pessoas
Solicitei QA para 2 pessoas
Obtive aprovação de QA e posso fazer merge

⚠️ Como testar:

-[ ] Acesse o repositório nossa-casa-front;
-[ ] Acesse a branch 96-refact/padronizacao-componentes-e-classes-css;
-[ ] Verifique a nomeação dos repositórios dos componentes e verifique se contém notação kebab-case e idioma inglês.
-[ ] Verifique a nomeação dos componentes e verifique se estão no idioma inglês.
-[ ] Verifique a nomeação das classes CSS e verifique se contém notação kebab-case e idioma inglês.

…eria

…ra-TW/nossa-casa-front into 35/Detalhes-da-oficina

yrachid · 2023-11-29T09:07:10Z

src/components/partners/index.js

@@ -53,27 +53,27 @@ const Parceires = () => {
          }
        }}
        modules={[Navigation]}
-        className="mySwiper"
+        className="my-swiper"


Talvez partner-swiper seja mais descritivo?

Suggested change

className="my-swiper"

className="partner-swiper"

yrachid · 2023-11-29T09:08:28Z

src/pages/events/index.js


 export const EventsPage = () => {
  return (
    <EventsContainer>
      <NavBar />
-      <Events />
-      <Parceires />
+      <CarouselEvents />


Fiquem totalmente a vontade para ignorar, pois esse nome não está errado nem nada, mas eu acho que ele ficaria mais natural na seguinte forma (estou sendo chato não me matem pfv):

Suggested change

<CarouselEvents />

<EventsCarousel />

yrachid · 2023-11-29T09:09:53Z

src/pages/home/index.js

-import fotoNossaCasa from './nossacasa.png'
-import Parceires from '../../components/parceires'
+import ModalGallery from '../../components/modal-gallery'
+import photoOurHouse from './nossacasa.png'


Como regra geral, não somente em código, mas em tradução português para inglês e vice versa, não se traduz nome próprio.

Talvez um nome mais apropriado seja:

Suggested change

import photoOurHouse from './nossacasa.png'

import nossaCasaImage from './nossacasa.png'

yrachid · 2023-11-29T09:11:09Z

src/pages/home/index.js

            </div>
          </div >
        </section >
-        <section className="galeria">
-          <h2 className='titulo-galeria'>Galeria de fotos</h2>
+        <section className="galery">


Suggested change

<section className="galery">

<section className="gallery">

yrachid · 2023-11-29T09:11:20Z

src/pages/home/index.js

-        <section className="galeria">
-          <h2 className='titulo-galeria'>Galeria de fotos</h2>
+        <section className="galery">
+          <h2 className='title-galery'>Galeria de fotos</h2>


Suggested change

<h2 className='title-galery'>Galeria de fotos</h2>

<h2 className='title-gallery'>Galeria de fotos</h2>

yrachid · 2023-11-29T09:11:43Z

src/pages/home/index.js

@@ -21,7 +21,7 @@ export function HomePage() {
  const urlCms = process.env.REACT_APP_URL_CMS

  useEffect(() => {
-    cms.get('api/events/?populate=foto_divulgacao').then((response) => {
+    cms.get('api/CarouselEvents/?populate=foto_divulgacao').then((response) => {


Isso aqui deveria mudar mesmo? A menos que algo tenha mudado do lado do CMS também, isso aqui vai quebrar essa página.

Vocês testaram localmente?

yrachid · 2023-11-29T09:12:07Z

src/pages/home/styled.js

@@ -160,7 +160,7 @@ const Home = styled.div`
    }
  }

-  .galeria {
+  .galery {


Suggested change

.galery {

.gallery {

yrachid · 2023-11-29T09:13:10Z

src/components/carousel-events/index.js

@@ -70,7 +70,7 @@ const Events = () => {
                  <SwiperSlide>
                    <div>
                      <div>
-                        <img className="img-foto" src={urlCms + events.image_url} />
+                        <img className="img-photo" src={urlCms + events.image_url} />


O nome img-photo acaba sendo um pouco redundante:

Suggested change

<img className="img-photo" src={urlCms + events.image_url} />

<img className="event-img" src={urlCms + events.image_url} />

yrachid · 2023-11-29T09:17:58Z

src/pages/therapies-description/index.js

                      <FontAwesomeIcon icon={faLocationDot} size="lg" />
                      Terapia presencial em {therapies.attributes?.local}
                    </div>
                  </p>
                </div>
              </li>
              <li>
-                <div className="therapieType">
+                <div className="therapie-type">


Suggested change

<div className="therapie-type">

<div className="therapy-type">

yrachid · 2023-11-29T09:19:59Z

src/pages/therapies-description/index.js

@@ -151,7 +151,7 @@ export const DetailsTherapies = () => {
              <li>
                {therapies.attributes?.url_agendamento == null && (
                  <>
-                    <div className="inscriptionIcon">
+                    <div className="inscription-icon">


O que esse ícone faz? É para se inscrever no evento? Se for, sugiro outros nomes, pois inscription não traduz para o sentido correto de inscrição nesse contexto.

Como estamos estudando inglês na Aceleradora, acho que essa é uma boa oportunidade de aprofundarmos o aprendizado, então vou ativar meu modo palestrinha abaixo

Contexto

Em português, a palavra inscrição tem mais de um significado.

Nesse caso, a tradução para "inscription" traduz ela no seguinte significado (conforme link acima):

"Caracteres gravados no mármore, na pedra etc., para consagrar uma pessoa ou um fato: inscrição cuneiforme."

Como provavelmente estamos nos referindo a inscrição no sentido de inscrever-se em um evento, outras traduções mais apropriadas seriam:

sign-up

register

attend

join

rsvp

Essa última é uma sigla que vem da expressão em francês "répondez s'il vous plaît.", que traduz mais ou menos para "favor responder".

Embora seja uma expressão em francês, ela é amplamente utilizada por falantes nativos do inglês (pelo menos nos EUA), assim como muitas outras palavras oriundas da língua francesa (como "fiancée", por exemplo).

Se eu fosse escolher uma das traduções sugeridas, acho que usaria "attend", que é uma forma que vejo no Meetup, uma plataforma com um domínio parecido com o da Nossa Casa:

yrachid · 2023-11-29T09:22:15Z

src/pages/workshop-description/index.js

@@ -122,7 +122,7 @@ export const WorkshopDetails = () => {
              <li>
                <div className="div-local">
                  <p className="local">
-                    <div className="spacingLocal">
+                    <div className="spacing-local">


Em inglês, local pode acabar sendo um pouco ambíguo no contexto de localização (raramente vejo essa palavra sendo usada nesse contexto). Sugestões:

Suggested change

<div className="spacing-local">

<div className="spacing-venue">

Suggested change

<div className="spacing-local">

<div className="spacing-location">

yrachid · 2023-11-29T09:24:08Z

src/pages/workshop-description/index.js

@@ -174,7 +174,7 @@ export const WorkshopDetails = () => {
            </ul>
          </span>
          <p className="description">Descrição da oficina</p>
-          <p className="descriptionCMS">{workshops.attributes?.descricao}</p>
+          <p className="description-cms">{workshops.attributes?.descricao}</p>


Precisamos especificar que essa descrição tem algo a ver com o cms? Acho que CMS é um detalhe de implementação que não importa aqui.

Eu acho que tu acha que é cri-cri, porém faz sentido em questão de padronização. Pode acabar ficando confuso depois

yrachid

Eu deixei um monte de comentário cri-cri pq eu sou insuportável, desculpem não me matem pfv.

Talvez o único que não seja cri-cri seja esse abaixo, que parece ter sido uma renomeação acidental que vai causar bug:

#118 (comment)

No mais, essa PR tá show de bola, tudo bonitinho e padronizado

Entretanto, ela está grande demais e vocês vão sofrer com conflitos, talvez tivesse sido melhor quebrar essas mudanças em PRs menores

Laércio Fernandes Correia de Melo Neto and others added 8 commits November 20, 2023 14:31

renomeia e padroniza componentes e repositórios

257749e

renomeia e padroniza componentes e respositório - eventos e modal gal…

bcda137

…eria

renomeia e padroniza componentes e respositório - oficinas e parceires

1c4ef11

padroniza classes css

cc78d25

Merge branch '35/Detalhes-da-oficina' of https://github.com/acelerado…

a06b7a6

…ra-TW/nossa-casa-front into 35/Detalhes-da-oficina

padroniza classes css

b3d15ab

padroniza css

a875e64

finaliza padronizacao de nomes de classes css

0772862

yrachid reviewed Nov 29, 2023

View reviewed changes

yrachid approved these changes Nov 29, 2023

View reviewed changes

ajusta conflitos derivados do merge com a main

80c78ad

Ester-Arruda force-pushed the 96-refact/padronizacao-componentes-e-classes-css branch from 435642f to 80c78ad Compare December 4, 2023 19:02

fernandesmelo merged commit 9920349 into main Dec 5, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#96 - refact: padronizacao componentes e classes css #118

#96 - refact: padronizacao componentes e classes css #118

Ester-Arruda commented Nov 28, 2023

yrachid Nov 29, 2023

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023

yrachid Nov 29, 2023

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023

yrachid Nov 29, 2023

yrachid Nov 29, 2023

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023

barbaraanger Nov 30, 2023

yrachid left a comment •

edited

Loading

	import photoOurHouse from './nossacasa.png'
	import nossaCasaImage from './nossacasa.png'

	<h2 className='title-galery'>Galeria de fotos</h2>
	<h2 className='title-gallery'>Galeria de fotos</h2>

	<img className="img-photo" src={urlCms + events.image_url} />
	<img className="event-img" src={urlCms + events.image_url} />

	<div className="therapie-type">
	<div className="therapy-type">

	<div className="spacing-local">
	<div className="spacing-venue">

	<div className="spacing-local">
	<div className="spacing-location">

#96 - refact: padronizacao componentes e classes css #118

#96 - refact: padronizacao componentes e classes css #118

Conversation

Ester-Arruda commented Nov 28, 2023

#96 - refact: padronizacao componentes e classes css

🆙 CHANGELOG

⚠️ Me certifico que:

⚠️ Como testar:

Choose a reason for hiding this comment

yrachid Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

yrachid Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yrachid Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yrachid Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

Contexto

yrachid Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yrachid left a comment • edited Loading

Choose a reason for hiding this comment

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023 •

edited

Loading

yrachid Nov 29, 2023 •

edited

Loading

yrachid left a comment •

edited

Loading