Fisrt commit

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,40 @@
+{
+    "env": {
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "react/react-in-jsx-scope": "off",
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

App.tsx

@@ -1,20 +1,18 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { useFonts } from 'expo-font';
+import { Main } from './src/Main';
 
 export default function App() {
+  const [isFontsLoaded] = useFonts({
+    'GeneralSans-400': require('./src/assets/fonts/GeneralSans-Regular.otf'),
+    'GeneralSans-600': require('./src/assets/fonts/GeneralSans-Semibold.otf'),
+    'GeneralSans-700': require('./src/assets/fonts/GeneralSans-Bold.otf'),
+  });
+
+  if (!isFontsLoaded) {
+    return null;
+  }
+
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <Main />
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package.json

@@ -10,16 +10,25 @@
   },
   "dependencies": {
     "expo": "~47.0.12",
+    "expo-font": "~11.0.1",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
-    "react-native-web": "~0.18.9"
+    "react-native-svg": "13.4.0",
+    "react-native-web": "~0.18.9",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@types/react": "~18.0.14",
     "@types/react-native": "~0.70.6",
+    "@types/styled-components": "^5.1.26",
+    "@types/styled-components-react-native": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "eslint": "^8.34.0",
+    "eslint-plugin-react": "^7.32.2",
     "typescript": "^4.6.3"
   },
   "private": true

src/Main/index.tsx

@@ -0,0 +1,26 @@
+import { Categories } from '../components/Categories/Categories';
+import { Header } from '../components/Header/Header';
+import { Menu } from '../components/Menu/Menu';
+import { CategoriesContainer, Container, Footer, FooterContainer, MenuContainer } from './styles';
+
+export const Main = () => {
+  return (
+    <>
+      <Container>
+        <Header />
+
+        <CategoriesContainer>
+          <Categories />
+        </CategoriesContainer>
+
+        <MenuContainer>
+          <Menu />
+        </MenuContainer>
+
+      </Container>
+      <FooterContainer>
+        <Footer />
+      </FooterContainer>
+    </>
+  );
+};

src/Main/styles.ts

@@ -0,0 +1,27 @@
+import { Platform, StatusBar } from 'react-native';
+import styled from 'styled-components/native';
+
+const isAndroid = Platform.OS === 'android';
+
+export const Container = styled.SafeAreaView`
+    margin-top: ${isAndroid ? `${StatusBar.currentHeight}px` : '0'};
+    background: #fafafa;
+    flex: 1;
+`;
+
+export const CategoriesContainer = styled.View`
+    height: 73px;
+    margin-top: 34px;
+`;
+
+export const MenuContainer = styled.View`
+    flex: 1;
+`;
+
+export const Footer = styled.View`
+    min-height: 110px;
+    background: #fff;
+`;
+
+export const FooterContainer = styled.SafeAreaView`
+`;

src/components/Categories/Categories.styles.ts

@@ -0,0 +1,21 @@
+import { Platform } from 'react-native';
+import styled from 'styled-components/native';
+
+const isAndroid = Platform.OS === 'android';
+
+export const Category = styled.TouchableOpacity`
+    align-items: center;
+    margin-left: 24px;
+`;
+
+export const Icon = styled.View`
+    background: #fff;
+    width: 44px;
+    height: 44px;
+    border-radius: 22px;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+    box-shadow: 0px 2px 1px rgba(0, 0, 0, ${isAndroid ? 1 : 0.1});
+    elevation: 2;
+`;

src/components/Categories/Categories.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { FlatList } from 'react-native';
+import { categories } from '../../mocks/categories';
+import { Text } from '../Text';
+import { Category, Icon } from './Categories.styles';
+
+export const Categories = () => {
+  const [selectCategory, setSelectCategory] = useState('');
+
+  const handleSelectCategory = (categoryId: string) => {
+    const category = selectCategory === categoryId ? '' : categoryId;
+
+    setSelectCategory(category);
+  };
+
+  return (
+    <FlatList
+      data={categories}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ paddingRight: 24 }}
+      keyExtractor={(category) => category._id}
+      renderItem={({ item: category }) => {
+        const isSelected = selectCategory === category._id;
+        return (
+          <Category onPress={() => handleSelectCategory(category._id)}>
+            <Icon>
+              <Text opacity={isSelected ? 1 : 0.5}>
+                {category.icon}
+              </Text>
+            </Icon>
+            <Text size={14} weight="600" opacity={isSelected ? 1 : 0.5}>
+              {category.name}
+            </Text>
+          </Category>
+        );
+      }}
+    ></FlatList>
+  );
+};

src/components/Header/Header.styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+    margin: 24px 24px 0;
+`;

src/components/Header/Header.tsx

@@ -0,0 +1,15 @@
+import { Text } from '../Text';
+import { Container } from './Header.styles';
+
+export const Header = () => {
+  return (
+    <Container>
+      <Text size={14} opacity={0.9}>
+                Bem Vindo(a) ao
+      </Text>
+      <Text size={24} weight="700">
+        WAITER<Text size={24}>APP</Text>
+      </Text>
+    </Container>
+  );
+};

src/components/Icons/CheckCircle.tsx

@@ -0,0 +1,11 @@
+import { SvgXml } from 'react-native-svg';
+
+export function CheckCircle() {
+  const markup = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.75 14.25L9.5 12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.5 10.5L11.75 14.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 21C7.52944 21 3.5 16.9706 3.5 12V12C3.5 7.02944 7.52944 3 12.5 3V3C17.4706 3 21.5 7.02944 21.5 12V12C21.5 16.9706 17.4706 21 12.5 21V21Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`;
+
+  return <SvgXml xml={markup} />;
+}

src/components/Icons/Close.tsx

@@ -0,0 +1,13 @@
+import { SvgXml } from 'react-native-svg';
+
+interface CloseProps {
+  color?: string;
+}
+
+export function Close({ color }: CloseProps) {
+  const markup = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+    <path stroke="${color || '#fff'}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 8 8 8M16 8l-8 8" />
+  </svg>`;
+
+  return <SvgXml xml={markup} />;
+}

src/components/Icons/Empty/index.tsx

@@ -0,0 +1,7 @@
+import { SvgXml } from 'react-native-svg';
+
+import { markup } from './markup';
+
+export function Empty() {
+  return <SvgXml xml={markup} />;
+}

src/components/Icons/MinusCircle.tsx

@@ -0,0 +1,10 @@
+import { SvgXml } from 'react-native-svg';
+
+export function MinusCircle() {
+  const markup = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 12H8" stroke="#D73035" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z" stroke="#D73035" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`;
+
+  return <SvgXml xml={markup} />;
+}

src/components/Icons/PlusCircle.tsx

@@ -0,0 +1,11 @@
+import { SvgXml } from 'react-native-svg';
+
+export function PlusCircle() {
+  const markup = `<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 8V16" stroke="#D73035" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 12H8" stroke="#D73035" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z" stroke="#D73035" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`;
+
+  return <SvgXml xml={markup} />;
+}

src/components/Menu/Menu.tsx

@@ -0,0 +1,3 @@
+export const Menu = () => {
+  return null;
+};

src/components/Text.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components/native';
+
+interface TextProps {
+  weight?: '400' | '600' | '700';
+  color?: string;
+  size?: number;
+  opacity?: number;
+}
+
+export const Text = styled.Text<TextProps>`
+  font-family: ${({ weight }) => weight ? `GeneralSans-${weight}` : 'GeneralSans-400'};
+  color: ${({ color }) => color || '#333'};
+  font-size: ${({ size }) => size ? `${size}px` : '16px'};
+  opacity: ${({ opacity }) => opacity || 1};
+`;

src/mocks/categories.ts

@@ -0,0 +1,22 @@
+export const categories = [
+  {
+    _id: '6372d595f9ebdda354700c8d',
+    name: 'Pizza',
+    icon: '🍕',
+  },
+  {
+    _id: '6372d5bff9ebdda354700c90',
+    name: 'Bebidas',
+    icon: '🍻',
+  },
+  {
+    _id: '6372d5d2f9ebdda354700c92',
+    name: 'Burgers',
+    icon: '🍔',
+  },
+  {
+    _id: '6372d5dcf9ebdda354700c94',
+    name: 'Promoções',
+    icon: '🏷',
+  },
+];

src/mocks/products.ts

@@ -0,0 +1,39 @@
+export const products = [
+  {
+    _id: '6372e040f52e37ef85fe2c5e',
+    name: 'Pizza quatro queijos',
+    description: 'Deliciosa pizza quatro queijos com borda simples',
+    imagePath: '1668472896991-quatro-queijos.png',
+    price: 40,
+    ingredients: [
+      {
+        name: 'Mussarela',
+        icon: '🧀',
+        _id: '6372e040f52e37ef85fe2c5f',
+      },
+      {
+        name: 'Parmesão',
+        icon: '🧀',
+        _id: '6372e040f52e37ef85fe2c60',
+      },
+      {
+        name: 'Gouda',
+        icon: '🧀',
+        _id: '6372e040f52e37ef85fe2c61',
+      },
+      {
+        name: 'Brie',
+        icon: '🧀',
+        _id: '6372e040f52e37ef85fe2c62',
+      },
+    ],
+  },
+  {
+    _id: '6372e276a381106c0f854cb3',
+    name: 'Coca cola',
+    description: 'Coca cola lata geladinha topzera',
+    imagePath: '1668473462705-coca-cola.png',
+    price: 7,
+    ingredients: [],
+  },
+];