SaXaPhonist · SaXaPhonist · Jan 23, 2022 · Jan 23, 2022 · Feb 2, 2022 · Jul 13, 2022
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "@babel/preset-react",
+        "@babel/preset-env",
+        "@babel/preset-typescript"
+    ]
+}
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,6 @@
+/node_modules
+Dockerfile
+.git
+.gitignore
+.dockerignore
+.env
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+
+/node_modules
+/.eslintrc.json
+/jest.config.js
+webpack*
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,56 @@
+{
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:@typescript-eslint/recommended-requiring-type-checking",
+      "plugin:import/errors",
+      "plugin:import/warnings",
+      "plugin:import/typescript",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+       "airbnb",
+      "eslint-config-airbnb",
+      "airbnb/hooks",
+      "airbnb-typescript",
+      "eslint-config-prettier",
+      "plugin:prettier/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": "latest",
+      "sourceType": "module",
+      "project": "./tsconfig.json"
+    },
+    "plugins": ["react", "react-hooks", "@typescript-eslint", "@emotion" ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "endOfLine": "auto"
+        }
+      ],
+      "no-restricted-exports": "off",
+      "import/prefer-default-export": "off",
+      "no-nested-ternary": "off",
+      "no-underscore-dangle": ["error", { "allow": ["_id"] }],
+      "react/jsx-props-no-spreading": "off",
+      "react/require-default-props": "off",
+      "react/react-in-jsx-scope": "off"
+    },
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "extensions": [".js", ".jsx", ".d.ts", ".ts", ".tsx"],
+          "moduleDirectory": [ "src", ".", "migrations"]
+        }
+      }
+    },
+    "ignorePatterns": ["*config.js"]
+  }
diff --git a/.gitignore b/.gitignore
@@ -69,6 +69,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
+*.env
 .env
 .env.test
 

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+    "printWidth": 100,
+    "proseWrap": "always",
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": false,
+    "tabWidth": 2,
+    "semi": true,
+    "endOfLine": "auto"
+  }
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:16 as builder
+
+WORKDIR /app
+
+COPY package.json .
+COPY package-lock.json .
+RUN npm install --legacy-peer-deps
+COPY . .
+RUN npm run build
+
+FROM nginx
+WORKDIR /usr/share/nginx/html
+# RUN rm -rf ./*
+COPY --from=builder /app/dist .
+# ENTRYPOINT [ "nginx", "-g","daemon off;" ]
+
+# docker exec -it react-desck bash
+# docker rm react-desck -f
+# docker image ls 
+# ENV SOME_ENV_VAR = defaultValue
+# --env-file ./.env ------ pass file of envs
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
-# ProjectOfBabylon22
+run: npm start    
+build: npm build
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  react-app:
+    # stdin_open: true,
+    # tty: true,
+    container_name: my-react-app-docker
+    # image: docker-react-app
+    build: #path to Dockerfile
+      context: .
+    ports:
+      - 8080:80
+    #env_file:
+      #- ./.env
+    #enviroment:
+      #- REACT_APP_API_KEY = 'askdnk12l3k%1dfucs91e221'
+    volumes: 
+      - ./src:/app/src:ro #readonly
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="discription" content="application for searching trips" />
+    <title>Travel dashboard</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,87 @@
+{
+  "name": "projectofbabylon22",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode=development --env short=dev",
+    "build": "webpack --mode=production --env short=prod",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SaXaPhonist/ProjectOfBabylon22.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/SaXaPhonist/ProjectOfBabylon22/issues"
+  },
+  "homepage": "https://github.com/SaXaPhonist/ProjectOfBabylon22#readme",
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.4.0",
+    "@types/d3-force": "^3.0.3",
+    "d3": "^7.6.1",
+    "d3-force": "^3.0.0",
+    "json-server": "^0.17.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",                                                                                                                                                               
+    "@babel/preset-typescript": "^7.16.7",
+    "@emotion/eslint-plugin": "^11.7.0",
+    "@material-ui/types": "^5.1.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/d3": "^7.4.0",
+    "@types/google.maps": "^3.49.2",
+    "@types/json-server": "^0.14.4",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "babel-loader": "^8.2.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.5.1",
+    "dotenv": "^16.0.1",
+    "dotenv-webpack": "^8.0.0",
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.6.7",
+    "eslint-webpack-plugin": "^3.1.1",
+    "html-webpack-plugin": "^5.5.0",
+    "prettier": "^2.5.1",
+    "react-refresh": "^0.11.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
+  }
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -0,0 +1,15 @@
+import Header from 'components/header/Header';
+import SideMenu from 'components/menu/SideMenu';
+import TravelDashboard from 'pages/TravelDashboard';
+
+const App: React.FC = () => {
+  return (
+    <div className="app-layout">
+      <SideMenu />
+      <Header />
+      <TravelDashboard />
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/assets/fonts/Sora-Bold.ttf b/src/assets/fonts/Sora-Bold.ttf
diff --git a/src/assets/fonts/Sora-ExtraBold.ttf b/src/assets/fonts/Sora-ExtraBold.ttf
diff --git a/src/assets/fonts/Sora-ExtraLight.ttf b/src/assets/fonts/Sora-ExtraLight.ttf
diff --git a/src/assets/fonts/Sora-Light.ttf b/src/assets/fonts/Sora-Light.ttf
diff --git a/src/assets/fonts/Sora-Medium.ttf b/src/assets/fonts/Sora-Medium.ttf
diff --git a/src/assets/fonts/Sora-Regular.ttf b/src/assets/fonts/Sora-Regular.ttf
diff --git a/src/assets/fonts/Sora-SemiBold.ttf b/src/assets/fonts/Sora-SemiBold.ttf
diff --git a/src/assets/fonts/Sora-Thin.ttf b/src/assets/fonts/Sora-Thin.ttf
diff --git a/src/assets/fonts/Sora-VariableFont_wght.ttf b/src/assets/fonts/Sora-VariableFont_wght.ttf
diff --git a/src/assets/images/Alert.svg b/src/assets/images/Alert.svg
diff --git a/src/assets/images/Cloudy.png b/src/assets/images/Cloudy.png
diff --git a/src/assets/images/Cloudy_small.svg b/src/assets/images/Cloudy_small.svg
diff --git a/src/assets/images/Compass.svg b/src/assets/images/Compass.svg
diff --git a/src/assets/images/Flag_UK.png b/src/assets/images/Flag_UK.png
diff --git a/src/assets/images/Hail_day_small.svg b/src/assets/images/Hail_day_small.svg
diff --git a/src/assets/images/IMG_2688.jpg b/src/assets/images/IMG_2688.jpg
diff --git a/src/assets/images/Italy_Flag.png b/src/assets/images/Italy_Flag.png
diff --git a/src/assets/images/Poland_Flag.png b/src/assets/images/Poland_Flag.png
diff --git a/src/assets/images/Stormy_small.svg b/src/assets/images/Stormy_small.svg
diff --git a/src/assets/images/Sunny_small.svg b/src/assets/images/Sunny_small.svg
diff --git a/src/assets/images/Vector.png b/src/assets/images/Vector.png
diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png
diff --git a/src/assets/images/rome.png b/src/assets/images/rome.png
diff --git a/src/assets/images/support.svg b/src/assets/images/support.svg
diff --git a/src/assets/images/user-photo-1.jpg b/src/assets/images/user-photo-1.jpg
diff --git a/src/assets/images/user-photo-2.jpg b/src/assets/images/user-photo-2.jpg
diff --git a/src/components/InfoCards/InfoCards.tsx b/src/components/InfoCards/InfoCards.tsx
@@ -0,0 +1,23 @@
+import InfoCard from 'components/infoCard/InfoCard';
+import Destination from './infoSections/DestinationInfo';
+import PeopleInfo from './infoSections/PeopleInfo';
+import TravelDate from './infoSections/TravelDate';
+import { InfoCardsContainer } from './styles';
+
+const TravelInfo = () => {
+  return (
+    <InfoCardsContainer className="info-cards">
+      <InfoCard>
+        <TravelDate />
+      </InfoCard>
+      <InfoCard>
+        <PeopleInfo />
+      </InfoCard>
+      <InfoCard>
+        <Destination />
+      </InfoCard>
+    </InfoCardsContainer>
+  );
+};
+
+export default TravelInfo;
diff --git a/src/components/InfoCards/infoSections/DestinationInfo.tsx b/src/components/InfoCards/infoSections/DestinationInfo.tsx
@@ -0,0 +1,23 @@
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import FlightLandIcon from '@mui/icons-material/FlightLand';
+import polanFlag from 'assets/images/Poland_Flag.png';
+import italyFlag from 'assets/images/Italy_Flag.png';
+import { DestinationContainer } from './styles';
+
+const Destination = () => (
+  <DestinationContainer>
+    <div className="destination-countries">
+      <img alt="flag" src={polanFlag} />
+      <span className="destination-country">Poland</span>
+      <SwapHorizIcon className="destination-swap" />
+      <img alt="flag" src={italyFlag} />
+      <span className="destination-country">Italy</span>
+    </div>
+    <div className="flight-duration-wrapper">
+      <FlightLandIcon />
+      <span className="flight-duration">2h 25min flight</span>
+    </div>
+  </DestinationContainer>
+);
+
+export default Destination;
-Original file line number
+Diff line change
@@ Expand Up / @@ -69,6 +69,7 @@ typings/ @@
     .yarn-integrity
     # dotenv environment variables file
+    *.env
     .env
     .env.test
@@ Expand Down @@