Skip to content

Commit

Permalink
Merge pull request #7 from wagnervieira1209/rotas-parte2
Browse files Browse the repository at this point in the history 
Rotas - Parte 2
  • Loading branch information
@wagnervieira1209
wagnervieira1209 committed Aug 10, 2021
2 parents 3c1160c + 0b609a0 commit 7896f60
Show file tree
Hide file tree
Showing 30 changed files with 1,524 additions and 301 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "autoescola-nardini",
"version": "0.2.0",
"version": "0.3.0",
"private": true,
"dependencies": {
"@storybook/addon-actions": "^6.2.9",
Expand All @@ -17,6 +17,7 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^13.1.9",
"chromatic": "^5.10.0-canary.0",
"faker": "^5.5.3",
"history": "^5.0.0",
"jest-styled-components": "^7.0.4",
"prettier": "^2.3.0",
Expand Down
22 changes: 22 additions & 0 deletions scripts/generators/products.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const faker = require("faker");

// Imagem não adicionamos porque é adicionada dinamicamente
//import PlaceHolderImage from "stories/assets/car.jpg";

const buildProductList = (size) => {
const result = [];

for (let i = 0; i < size; i++) {
result.push({
id: i + 1,
image: "",
title: faker.commerce.productName(),
summary: faker.commerce.productDescription(),
slang: faker.lorem.slug(),
});
}

return result;
};

console.log(JSON.stringify(buildProductList(100), null, " "));
14 changes: 4 additions & 10 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";

import ThemeProvider from "styles/ThemeProvider";
import GlobalStyle from "styles/GlobalStyle";

import Home from "components/pages/Home";
import About from "components/pages/About";
import PoductDetails from "components/pages/ProductDetails";
import ProductDetails from "components/pages/ProductDetails";
// Pode chamar routes porque é um export default
import Routes from "routes";

function App() {
return (
<ThemeProvider>
<GlobalStyle />
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/sobre" element={<About />} />
<Route path="/servicos" element={<ProductDetails />} />
</Routes>
<Routes />
</Router>
</ThemeProvider>
);
Expand Down
12 changes: 3 additions & 9 deletions src/components/organisms/ProductGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Heading from "components/atoms/Heading";
import Button from "components/atoms/Button";
import styled from "styled-components";
import { Link } from "react-router-dom";
import ProductType from "models/types/ProductType";

const ToolBar = styled.div`
margin-top: 40px;
Expand Down Expand Up @@ -34,7 +35,7 @@ const ProductList = ({ products }) => {
color="primary"
variant="link"
as={Link}
to="/servicos"
to={`/servicos/${product.slang}`}
>
Saiba mais
</Button>
Expand Down Expand Up @@ -65,14 +66,7 @@ ProductList.defaultProps = {
};

ProductList.propTypes = {
products: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
image: PropTypes.string,
title: PropTypes.string,
summary: PropTypes.string,
})
),
products: PropTypes.arrayOf(ProductType),
};

export default ProductList;
25 changes: 6 additions & 19 deletions src/components/organisms/ProductGrid.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,11 @@
import React from 'react';
import React from "react";

import ProductGrid from './ProductGrid';
import PlaceHolderImage from "stories/assets/car.jpg";
import ProductGrid from "./ProductGrid";
import { buildProductList } from "models/builders/products";

export default {
title: "Components/Organisms/ProductGrid",
component: ProductGrid
}

export const usage = () => (
<ProductGrid
products={[
{ Id: 3, image: PlaceHolderImage, title: "Título 1", summary: "Lorem ipsum dolor sit amet", },
{ Id: 2, image: PlaceHolderImage, title: "Título 2", summary: "Lorem ipsum dolor sit amet", },
{ Id: 3, image: PlaceHolderImage, title: "Título 3", summary: "Lorem ipsum dolor sit amet", },
{ Id: 4, image: PlaceHolderImage, title: "Título 4", summary: "Lorem ipsum dolor sit amet", },
{ Id: 5, image: PlaceHolderImage, title: "Título 5", summary: "Lorem ipsum dolor sit amet", },
{ Id: 6, image: PlaceHolderImage, title: "Título 6", summary: "Lorem ipsum dolor sit amet", }
]}>

</ProductGrid>
)
component: ProductGrid,
};

export const usage = () => <ProductGrid products={buildProductList(6)} />;
235 changes: 110 additions & 125 deletions src/components/pages/About.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React, { useEffect } from "react";
import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";
import BreadCrump from "components/atoms/BreadCrump";

import { useScrollToTop } from "hooks/scroll";

import Hero from "components/molecules/Hero";
import BgCarImage from "assets/street.jpg";
import Section from "components/molecules/Section";
Expand Down Expand Up @@ -35,127 +32,115 @@ const ImageContainer = styled.div`
}
`;

const About = () => {
useScrollToTop();

return (
<>
<Hero image={BgCarImage}>
<Heading>
<h1>Auto escola Nardini</h1>
</Heading>
<BreadCrump
items={[{ label: "Início", link: "/" }, { label: "Sobre" }]}
/>
</Hero>
<Section md={2}>
<Grid md={2}>
<div>
<p>
const About = () => (
<>
<Hero image={BgCarImage}>
<Heading>
<h1>Auto escola Nardini</h1>
</Heading>
<BreadCrump
items={[{ label: "Início", link: "/" }, { label: "Sobre" }]}
/>
</Hero>
<Section md={2}>
<Grid md={2}>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis tempora distinctio ipsam fuga, eveniet quasi
nam enim aspernatur harum suscipit temporibus sint
cupiditate iste aliquam non. Ipsa explicabo natus nam.
</p>
<p>
Officiis eum perspiciatis alias dolorem officia
explicabo molestias dolorum dolores eveniet delectus,
repudiandae itaque corporis sequi? Quidem voluptatum
iste id labore, magnam deserunt, similique unde
accusamus possimus impedit ad? Similique.
</p>
<p>
Sequi itaque quas odit ratione. Officiis consectetur
iste eligendi optio odio odit iure nam illum vitae,
consequatur, blanditiis veritatis! Placeat non velit
suscipit incidunt praesentium iure obcaecati sapiente
nobis temporibus!
</p>
<ul>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Corporis tempora distinctio ipsam fuga,
eveniet quasi nam enim aspernatur harum suscipit
temporibus sint cupiditate iste aliquam non. Ipsa
explicabo natus nam.
</p>
<p>
Officiis eum perspiciatis alias dolorem officia
explicabo molestias dolorum dolores eveniet
delectus, repudiandae itaque corporis sequi? Quidem
voluptatum iste id labore, magnam deserunt,
similique unde accusamus possimus impedit ad?
Similique.
</p>
<p>
Sequi itaque quas odit ratione. Officiis consectetur
iste eligendi optio odio odit iure nam illum vitae,
consequatur, blanditiis veritatis! Placeat non velit
suscipit incidunt praesentium iure obcaecati
sapiente nobis temporibus!
</p>
<ul>
<li>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</li>
</ul>
</div>
<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Aliquid similique repudiandae tenetur qui
placeat commodi minus dolor rem impedit sed sit
obcaecati culpa maxime, tempore quia natus itaque
dolores. Neque.
</p>
<ImageContainer>
<AboutImage />
</ImageContainer>
</div>
</Grid>
</Section>
<Section inverse>
<Grid md={2}>
<div>
<h4>Missão</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Nisi deleniti maiores debitis suscipit neque
sit error doloribus, sed provident animi quas
ratione reiciendis odit doloremque ab ut laborum
odio rem?
</p>
</div>
<div>
<h4>Visão</h4>
<p>
Adipisci quasi sit non sunt dolor esse in animi cum
reprehenderit! Veniam autem eaque quia? Nesciunt,
nobis. Hic ut, eligendi, quasi placeat harum a
beatae reiciendis, tenetur est ex in.
</p>
</div>
</Grid>
</Section>
<Section>
<Heading>
<h2>Conheça nossos professores</h2>
</Heading>
<Grid sm={2} md={3} lg={4}>
{instructors.map((instructor) => (
<Card key={instructor.id}>
<CardMedia image={instructor.avatar}>
<CardMediaDescription>
<h5>{instructor.name}</h5>
</CardMediaDescription>
</CardMedia>
</Card>
))}
</Grid>
</Section>
<Footer />
</>
);
};

About.defaultProps = {};

About.propTypes = {};
elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</li>
</ul>
</div>
<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Aliquid similique repudiandae tenetur qui placeat
commodi minus dolor rem impedit sed sit obcaecati culpa
maxime, tempore quia natus itaque dolores. Neque.
</p>
<ImageContainer>
<AboutImage />
</ImageContainer>
</div>
</Grid>
</Section>
<Section inverse>
<Grid md={2}>
<div>
<h4>Missão</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Nisi deleniti maiores debitis suscipit neque sit
error doloribus, sed provident animi quas ratione
reiciendis odit doloremque ab ut laborum odio rem?
</p>
</div>
<div>
<h4>Visão</h4>
<p>
Adipisci quasi sit non sunt dolor esse in animi cum
reprehenderit! Veniam autem eaque quia? Nesciunt, nobis.
Hic ut, eligendi, quasi placeat harum a beatae
reiciendis, tenetur est ex in.
</p>
</div>
</Grid>
</Section>
<Section>
<Heading>
<h2>Conheça nossos professores</h2>
</Heading>
<Grid sm={2} md={3} lg={4}>
{instructors.map((instructor) => (
<Card key={instructor.id}>
<CardMedia image={instructor.avatar}>
<CardMediaDescription>
<h5>{instructor.name}</h5>
</CardMediaDescription>
</CardMedia>
</Card>
))}
</Grid>
</Section>
<Footer />
</>
);

export default About;
5 changes: 0 additions & 5 deletions src/components/pages/About.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,3 @@ test("renders about page", () => {
render(<About />);
expect(screen.getByText("Auto escola Nardini")).toBeInTheDocument();
});

test("scroll top in the first render", () => {
render(<About />);
expect(window.scrollTo).toBeCalledTimes(1);
});
Loading

2 comments on commit 7896f60

@vercel
Copy link

@vercel vercel bot commented on 7896f60 Aug 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment failed with the following error:

The most recent charge for your active payment method has failed. Please update it here: https://vercel.com/teams/autoescola-nardini/settings/billing.

@vercel
Copy link

@vercel vercel bot commented on 7896f60 Aug 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.