Merge pull request #57 from The-Bugger-Ducks/development

Development (sprint 02)
The-Bugger-Ducks · Apr 24, 2023 · e4f2ca4 · e4f2ca4
2 parents 2f7a354 + ec045b8
commit e4f2ca4
Show file tree

Hide file tree

Showing 88 changed files with 3,123 additions and 1,273 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"],
+  "plugins": [
+    [
+      "babel-plugin-inline-import",
+      {
+        "extensions": [".svg"]
+      }
+    ]
+  ]
+}
diff --git a/babel.config.js b/babel.config.js
@@ -8,16 +8,16 @@ module.exports = function (api) {
         {
           root: ["./src"],
           alias: {
-            "@assets": "./src/assets",
             "@components": "./src/components",
-            "@global": "./src/global",
-            "@mocks": "./src/mocks",
+            "@routes": "./src/routes",
             "@screens": "./src/screens",
-            "@utils": "./src/utils",
+            "@assets": "./src/shared/assets",
+            "@constants": "./src/shared/constants",
             "@interfaces": "./src/shared/interfaces",
-            "@requests": "./src/shared/utils/handlers",
             "@api": "./src/shared/services/api",
-            "@routes": "./src/routes",
+            "@requests": "./src/shared/services",
+            "@custom-types": "./src/shared/types",
+            "@utils": "./src/shared/utils",
           },
         },
       ],

diff --git a/declarations.d.ts b/declarations.d.ts
@@ -0,0 +1,6 @@
+declare module "*.svg" {
+  import React from "react";
+  import { SvgProps } from "react-native-svg";
+  const content: React.FC<SvgProps>;
+  export default content;
+}
diff --git a/metro.config.js b/metro.config.js
@@ -0,0 +1,16 @@
+const { getDefaultConfig } = require("metro-config");
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve("react-native-svg-transformer"),
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== "svg"),
+      sourceExts: [...sourceExts, "svg"],
+    },
+  };
+})();
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "ios": "expo start --ios",
     "web": "expo start --web",
     "prepare": "husky install",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
+    "format": "prettier --write \"**/*.{js,jsx,json,md,ts,tsx}\""
   },
   "lint-staged": {
     "src/**/*.{js,ts,tsx}": [
@@ -29,6 +29,7 @@
   "dependencies": {
     "@expo-google-fonts/inter": "^0.2.3",
     "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-picker/picker": "2.4.8",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
@@ -39,9 +40,10 @@
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-hook-form": "^7.43.6",
-    "react-native": "0.71.4",
+    "react-native": "0.71.6",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
+    "react-native-select-dropdown": "^3.3.2",
     "react-native-svg": "13.4.0",
     "styled-components": "^5.3.9"
   },
@@ -52,13 +54,15 @@
     "@types/styled-components-react-native": "^5.2.1",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
+    "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.36.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.32.2",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
     "prettier": "^2.8.6",
+    "react-native-svg-transformer": "^1.0.0",
     "typescript": "^4.9.4"
   },
   "private": true

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -14,6 +14,8 @@ interface CardProps {
   author?: string;
   onPress?: () => void;
   onEdit?: () => void;
+  canEdit: boolean;
+  isEdited?: boolean;
 }
 
 export function Card({
@@ -28,6 +30,8 @@ export function Card({
   author,
   onPress,
   onEdit,
+  canEdit,
+  isEdited = false,
 }: CardProps) {
   const props: SpecificCardProps["props"] = {
     id,
@@ -40,6 +44,8 @@ export function Card({
     author,
     onPress,
     onEdit,
+    canEdit,
+    isEdited,
   };
 
   if (type === "annotation") return <Anotation props={props} />;
@@ -59,6 +65,8 @@ export interface SpecificCardProps {
     author?: string;
     onPress?: () => void;
     onEdit?: () => void;
+    canEdit: boolean;
+    isEdited?: boolean;
   };
 }
 
@@ -69,17 +77,17 @@ function Update({ props }: SpecificCardProps) {
         <Text color="#000000" size={12} weight="500">
           Atualização | {props.date}, {props.time}
         </Text>
-        <EditIcon onPress={props.onEdit}>
-          <Edit />
-        </EditIcon>
+        {props.canEdit && (
+          <EditIcon onPress={props.onEdit}>
+            <Edit />
+          </EditIcon>
+        )}
       </Title>
       <Text color="#999999" size={12} numberOfLines={1}>
         {props.description}
       </Text>
       <Comment>
-        <Text color="#333333" size={12}>
-          Comentado por {props.author}
-        </Text>
+        <Text size={12}>Comentado por {props.author}</Text>
       </Comment>
     </Container>
   );
@@ -90,22 +98,23 @@ function Anotation({ props }: SpecificCardProps) {
     <Container onPress={props.onPress} activeOpacity={0.7}>
       <Title>
         <Text color="#000000" size={12} weight="500">
-          Anotação | {props.date}, {props.time}
+          Anotação | {props.date}, {props.time}{" "}
+          {props.isEdited && (
+            <Text color="#999999" size={12} weight="500">
+              (editado)
+            </Text>
+          )}
         </Text>
         <EditIcon onPress={props.onEdit}>
           <Edit />
         </EditIcon>
       </Title>
-      <Text color="#333333" size={14}>
-        {props.title}
-      </Text>
+      {props.title && <Text size={14}>{props.title}</Text>}
       <Text color="#999999" size={12} numberOfLines={1}>
         {props.description}
       </Text>
       <Comment>
-        <Text color="#333333" size={12}>
-          Criado por {props.author}
-        </Text>
+        <Text size={12}>Criado por {props.author}</Text>
       </Comment>
     </Container>
   );
@@ -118,15 +127,17 @@ function Meeting({ props }: SpecificCardProps) {
         <Text color="#000000" size={12} weight="500">
           {props.date} | {props.partner}
         </Text>
-        <EditIcon onPress={props.onEdit}>
-          <Edit />
-        </EditIcon>
+        {props.canEdit && (
+          <EditIcon onPress={props.onEdit}>
+            <Edit />
+          </EditIcon>
+        )}
       </Title>
       <MeetingDetails>
         <Text color="#999999" size={14}>
           {props.time}
         </Text>
-        <Text color="#333333" size={14} numberOfLines={1}>
+        <Text size={14} numberOfLines={1}>
           {props.title}
         </Text>
       </MeetingDetails>

diff --git a/src/components/Icon/icons.tsx b/src/components/Icon/icons.tsx
@@ -0,0 +1,88 @@
+// import { SvgProps } from "react-native-svg";
+
+import checkIcon from "../../shared/assets/icons/check.svg";
+import checkboxOffIcon from "../../shared/assets/icons/checkbox-off.svg";
+import checkboxOnIcon from "../../shared/assets/icons/checkbox-on.svg";
+import closeIcon from "../../shared/assets/icons/close.svg";
+import editIcon from "../../shared/assets/icons/edit.svg";
+import eyeHiddenIcon from "../../shared/assets/icons/eye-hidden.svg";
+import eyeIcon from "../../shared/assets/icons/eye.svg";
+import homeIcon from "../../shared/assets/icons/home.svg";
+import imageIcon from "../../shared/assets/icons/image.svg";
+import infoIcon from "../../shared/assets/icons/info.svg";
+import loadingIcon from "../../shared/assets/icons/loading.svg";
+import logOffIcon from "../../shared/assets/icons/log-off.svg";
+import menuIcon from "../../shared/assets/icons/menu.svg";
+import minusIcon from "../../shared/assets/icons/minus.svg";
+import orderIcon from "../../shared/assets/icons/order.svg";
+import plusIcon from "../../shared/assets/icons/plus.svg";
+import profileIcon from "../../shared/assets/icons/profile.svg";
+import questionIcon from "../../shared/assets/icons/question.svg";
+import radio1Icon from "../../shared/assets/icons/radio-1.svg";
+import radioIcon from "../../shared/assets/icons/radio.svg";
+import refreshIcon from "../../shared/assets/icons/refresh.svg";
+import searchIcon from "../../shared/assets/icons/search.svg";
+import trashIcon from "../../shared/assets/icons/trash.svg";
+import usersIcon from "../../shared/assets/icons/users.svg";
+import arrowLeftIcon from "../../shared/assets/icons/arrow-left.svg";
+
+export type iconsName =
+  | "arrow-left"
+  | "check"
+  | "checkbox-off"
+  | "checkbox-on"
+  | "close"
+  | "edit"
+  | "eye-hidden"
+  | "eye"
+  | "home"
+  | "image"
+  | "info"
+  | "loading"
+  | "log-off"
+  | "menu"
+  | "minus"
+  | "order"
+  | "plus"
+  | "profile"
+  | "question"
+  | "radio-1"
+  | "radio"
+  | "refresh"
+  | "search"
+  | "trash"
+  | "users";
+
+interface Icon {
+  name: iconsName;
+  image: any;
+  // image: React.FC<SvgProps>
+}
+
+export const iconList: Icon[] = [
+  { image: arrowLeftIcon, name: "arrow-left" },
+  { image: checkIcon, name: "check" },
+  { image: checkboxOffIcon, name: "checkbox-off" },
+  { image: checkboxOnIcon, name: "checkbox-on" },
+  { image: closeIcon, name: "close" },
+  { image: editIcon, name: "edit" },
+  { image: eyeHiddenIcon, name: "eye-hidden" },
+  { image: eyeIcon, name: "eye" },
+  { image: homeIcon, name: "home" },
+  { image: imageIcon, name: "image" },
+  { image: infoIcon, name: "info" },
+  { image: loadingIcon, name: "loading" },
+  { image: logOffIcon, name: "log-off" },
+  { image: menuIcon, name: "menu" },
+  { image: minusIcon, name: "minus" },
+  { image: orderIcon, name: "order" },
+  { image: plusIcon, name: "plus" },
+  { image: profileIcon, name: "profile" },
+  { image: questionIcon, name: "question" },
+  { image: radio1Icon, name: "radio-1" },
+  { image: radioIcon, name: "radio" },
+  { image: refreshIcon, name: "refresh" },
+  { image: searchIcon, name: "search" },
+  { image: trashIcon, name: "trash" },
+  { image: usersIcon, name: "users" },
+];
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -0,0 +1,41 @@
+import { SvgXml } from "react-native-svg";
+
+import { iconList, iconsName } from "./icons";
+
+import InfoIcon from "../../shared/assets/icons/info.svg";
+
+interface IconProps {
+  icon: iconsName;
+  size?: number;
+  width?: number;
+  height?: number;
+  fillColor?: string;
+  strokeColor?: string;
+}
+
+export function Icon({
+  icon,
+  size,
+  width = 24,
+  height = 24,
+  strokeColor,
+  fillColor,
+}: IconProps) {
+  function getIcon() {
+    const svgFile = iconList.find(item => item.name == icon);
+
+    if (svgFile) return svgFile.image;
+
+    return InfoIcon;
+  }
+
+  return (
+    <SvgXml
+      xml={getIcon()}
+      stroke={strokeColor}
+      fill={fillColor}
+      width={size || width}
+      height={size || height}
+    />
+  );
+}
diff --git a/src/components/Icons/Info.tsx b/src/components/Icons/Info.tsx
@@ -1,23 +1,23 @@
 import { SvgXml } from "react-native-svg";
 
 interface IconProps {
-  fillColor: string
-  strokeColor: string
-  size?: number
-  height?: number
-  width?: number
+  fillColor: string;
+  strokeColor: string;
+  size?: number;
+  height?: number;
+  width?: number;
 }
 
-export function Info(
-  {
-    fillColor = "#666666",
-    strokeColor = "#666666",
-    size,
-    width = 24,
-    height = 24,
-  }: IconProps
-) {
-  const markup = `<svg width=${size || width} height=${size || height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+export function Info({
+  fillColor = "#666666",
+  strokeColor = "#666666",
+  size,
+  width = 24,
+  height = 24,
+}: IconProps) {
+  const markup = `<svg width=${size || width} height=${
+    size || height
+  } viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M11.999 8C11.861 8 11.749 8.112 11.75 8.25C11.75 8.388 11.862 8.5 12 8.5C12.138 8.5 12.25 8.388 12.25 8.25C12.25 8.112 12.138 8 11.999 8" stroke=${fillColor}/>
   <path d="M11.999 8C11.861 8 11.749 8.112 11.75 8.25C11.75 8.388 11.862 8.5 12 8.5C12.138 8.5 12.25 8.388 12.25 8.25C12.25 8.112 12.138 8 11.999 8" stroke=${strokeColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M12 12V17M12 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=${strokeColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>