Merge pull request #93 from 90lucasgabriel/feature/WJ-19

WJ-19 - Create Cast component

README.md

@@ -30,6 +30,10 @@ _Video demo._
 - Development: [https://dev.cinejump.lucasgabriel.com.br/](https://dev.cinejump.lucasgabriel.com.br/)
 - Storybook: [https://storybook.cinejump.lucasgabriel.com.br/](https://storybook.cinejump.lucasgabriel.com.br/)
 
+>
+- Figma Layout: [https://www.figma.com/file/um4dcEJCOlEvB6kCe9KCOD](https://www.figma.com/file/um4dcEJCOlEvB6kCe9KCOD)
+- Figma Prototype: [https://www.figma.com/proto/um4dcEJCOlEvB6kCe9KCOD/Cinejump?node-id=7185%3A17&scaling=scale-down-width](https://www.figma.com/proto/um4dcEJCOlEvB6kCe9KCOD/Cinejump?node-id=7185%3A17&scaling=scale-down-width)
+
 
 
 

package.json

@@ -1,6 +1,7 @@
 {
   "name": "cinejump",
   "version": "1.2.0",
+  "devVersion": "1.3.0",
   "private": true,
   "dependencies": {
     "@storybook/react": "^6.0.21",

src/components/EnvironmentLabel/index.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 
-import { version } from '../../../package.json';
+import { devVersion } from '../../../package.json';
 import { Container } from './styles';
 
 const EnvironmentLabel: React.FC = () => {
   if (process.env.REACT_APP_IS_PRODUCTION === 'true') {
     return null;
   }
 
-  return <Container>Versão: {version} | Ambiente: Desenvolvimento</Container>;
+  return (
+    <Container>Versão: {devVersion} | Ambiente: Desenvolvimento</Container>
+  );
 };
 
 export default EnvironmentLabel;

src/components/Movie/dtos/ContainerProps.ts

@@ -0,0 +1,3 @@
+export default interface ContainerProps {
+  large?: boolean;
+}

src/components/Movie/dtos/index.ts

@@ -1,4 +1,6 @@
-export default interface MovieProps {
+import ContainerProps from './ContainerProps';
+
+export default interface MovieProps extends ContainerProps {
   id: number;
   favorite: boolean;
   poster?: string;

src/components/Movie/index.tsx

@@ -10,7 +10,7 @@ import { Container, IconButton, Poster } from './styles';
 
 import Props from './dtos';
 
-const Movie: React.FC<Props> = ({ ...movie }) => {
+const Movie: React.FC<Props> = ({ large = false, ...movie }) => {
   const history = useHistory();
   const { user } = useAuth();
   const { favoriteList = [], UpdateFavorite } = useFavorite();
@@ -49,7 +49,7 @@ const Movie: React.FC<Props> = ({ ...movie }) => {
   }
 
   return (
-    <Container>
+    <Container large={large}>
       <IconButton onClick={handleFavorite}>
         <BsHeartFill fill={isFavorite ? Color.Primary : Color.Empty} />
       </IconButton>

src/components/Movie/styles.ts

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
-import { PosterHeight, PosterWidth, Size } from 'shared/enums';
 
-export const Container = styled.div`
+import { Color, PosterHeight, PosterWidth, Size } from 'shared/enums';
+import ContainerProps from './dtos/ContainerProps';
+
+export const Container = styled.div<ContainerProps>`
   position: relative;
-  width: ${PosterWidth.Default};
-  height: ${PosterHeight.Default};
+  width: ${props => (props.large ? PosterWidth.Large : PosterWidth.Default)};
+  height: ${props => (props.large ? PosterHeight.Large : PosterHeight.Default)};
   border-radius: ${Size.Smallest};
   overflow: hidden;
 
+  border: ${props => (props.large ? 0 : `1px solid ${Color.FillSecondary}`)};
   display: flex;
   align-items: center;
   justify-content: center;

src/components/Person/dtos/ContainerProps.ts

@@ -0,0 +1,3 @@
+export default interface ContainerProps {
+  large?: boolean;
+}

src/components/Person/dtos/index.ts

@@ -0,0 +1,8 @@
+import ContainerProps from './ContainerProps';
+
+export default interface PersonProps extends ContainerProps {
+  id: number;
+  profile: string;
+  name: string;
+  character: string;
+}

src/components/Person/index.tsx

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Route from 'routes/enums';
+import {
+  Container,
+  Profile,
+  NameContainer,
+  PersonName,
+  CharacterName,
+} from './styles';
+
+import Props from './dtos';
+
+const Person: React.FC<Props> = ({ large = false, ...person }) => {
+  const history = useHistory();
+
+  const handleRedirect = useCallback(() => {
+    history.push(`${Route.PERSON}/${person.id}`);
+  }, [history, person.id]);
+
+  return (
+    <Container large={large}>
+      <Profile src={person.profile} onClick={handleRedirect} />
+      <NameContainer>
+        <PersonName>{person.name}</PersonName>
+        <CharacterName>{person.character}</CharacterName>
+      </NameContainer>
+    </Container>
+  );
+};
+
+export default Person;

src/components/Person/styles.ts

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+import { Color, PosterHeight, PosterWidth, Size } from 'shared/enums';
+import ContainerProps from './dtos/ContainerProps';
+
+export const Container = styled.div<ContainerProps>`
+  position: relative;
+  width: ${props => (props.large ? PosterWidth.Large : PosterWidth.Default)};
+  height: ${props => (props.large ? PosterHeight.Large : PosterHeight.Default)};
+  border-radius: ${Size.Smallest};
+  overflow: hidden;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    cursor: pointer;
+
+    img {
+      width: 110%;
+      height: 110%;
+    }
+  }
+`;
+
+export const Profile = styled.img`
+  margin-top: -5rem;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: width 0.2s, height 0.2s;
+`;
+
+export const NameContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  height: 7.4rem;
+  width: 100%;
+  background: ${Color.Fill};
+  overflow: hidden;
+  padding: ${Size.Smallest};
+`;
+
+export const PersonName = styled.div`
+  font-size: ${Size.Small};
+  color: ${Color.Secondary};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const CharacterName = styled.div`
+  font-size: ${Size.Small};
+  color: ${Color.Text};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

src/components/index.ts

@@ -1,6 +1,9 @@
+export { ColumnLayout, RowLayout, Wrapper, Container } from 'components/Layout';
+
 export { default as Button } from './Button';
 export { default as EnvironmentLabel } from './EnvironmentLabel';
 export { default as Input } from './Input';
 export { default as Movie } from './Movie';
 export { default as MovieHighlight } from './MovieHighlight';
+export { default as Person } from './Person';
 export { default as Tooltip } from './Tooltip';

src/containers/PersonList/dtos/index.ts

@@ -0,0 +1,10 @@
+import DefaultProps from 'shared/dtos';
+import { Color } from 'shared/enums';
+
+export default interface Props extends DefaultProps {
+  title?: string;
+  data: any[];
+  isLoading?: boolean;
+  loaderColor?: Color;
+  message?: string;
+}

src/containers/PersonList/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { ReactComponent as Loading } from 'assets/loading.svg';
+
+import { Wrapper } from 'components/Layout';
+import Person from 'components/Person';
+import {
+  Container,
+  Title,
+  LoadingContainer,
+  ListContainer,
+  ListContent,
+  MessageContainer,
+} from './styles';
+
+import Props from './dtos';
+
+const PersonList: React.FC<Props> = ({
+  theme,
+  background,
+  color,
+  title,
+  data,
+  isLoading = false,
+  loaderColor,
+  message = 'Não há resultados.',
+}) => {
+  return (
+    <Wrapper theme={theme} background={background} color={color}>
+      <Container>
+        {title && (
+          <Title theme={theme} color={color}>
+            {title}
+          </Title>
+        )}
+
+        {isLoading && (
+          <LoadingContainer theme={theme} loaderColor={loaderColor}>
+            <Loading />
+          </LoadingContainer>
+        )}
+
+        {!isLoading && data.length > 0 && (
+          <ListContainer>
+            <ListContent>
+              {data.map(person => (
+                <Person key={person.id} {...person} />
+              ))}
+            </ListContent>
+          </ListContainer>
+        )}
+
+        {!isLoading && data.length === 0 && (
+          <MessageContainer>{message}</MessageContainer>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default PersonList;

src/containers/PersonList/styles.ts

@@ -0,0 +1,96 @@
+import styled from 'styled-components';
+
+import DefaultProps from 'shared/dtos';
+import { Container as DefaultContainer } from 'components/Layout';
+import { Color, PosterHeight, Size } from 'shared/enums';
+import { getColor } from 'shared/utils';
+
+interface LoadingProps {
+  loaderColor?: string;
+}
+
+export const Container = styled(DefaultContainer)`
+  padding: ${Size.Medium} 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Title = styled.h2<DefaultProps>`
+  margin-bottom: ${Size.Small};
+  color: ${props => getColor(props.theme, props.color)};
+
+  @media (max-width: 1280px) {
+    margin-left: ${Size.Medium};
+  }
+`;
+
+export const LoadingContainer = styled.div<LoadingProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(${PosterHeight.Default});
+
+  svg {
+    height: ${Size.Largest};
+    width: ${Size.Largest};
+    fill: ${props => getColor(props.theme, props.loaderColor)};
+  }
+`;
+
+export const ListContainer = styled.div`
+  height: calc(${PosterHeight.Default} + 5px);
+  overflow-y: hidden;
+  overflow-x: auto;
+
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+
+  -ms-overflow-style: none;
+  scrollbar-width: 10px;
+  &::-webkit-scrollbar {
+    /* visibility: visible; */
+    display: none;
+  }
+`;
+
+export const ListContent = styled.div`
+  display: inline-flex;
+  padding: 0 2px;
+
+  @media (max-width: 1280px) {
+    margin-left: ${Size.Medium};
+    margin-right: ${Size.Smallest};
+  }
+
+  & > div {
+    flex: 1 0 auto;
+    scroll-snap-align: start;
+    scroll-margin-left: ${Size.Large};
+    margin-right: ${Size.Medium};
+
+    @media (max-width: 1280px) {
+      scroll-margin-left: ${Size.Medium};
+      margin-right: ${Size.Smallest};
+    }
+  }
+
+  & > div:last-child {
+    margin-right: 0;
+
+    @media (max-width: 1280px) {
+      margin-right: ${Size.Default};
+    }
+  }
+`;
+
+export const MessageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  height: calc(${PosterHeight.Default} / 3);
+  color: ${Color.Text};
+
+  @media (max-width: 1280px) {
+    margin-left: ${Size.Medium};
+  }
+`;

src/containers/index.ts

@@ -2,3 +2,4 @@ export { default as Footer } from './Footer';
 export { default as Header } from './Header';
 export { default as Highlights } from './Highlights';
 export { default as MovieList } from './MovieList';
+export { default as PersonList } from './PersonList';