Merge pull request #4 from data-for-change/feat/header

change to vire

.env

@@ -1,21 +1,21 @@
 # Urls
-REACT_APP_BASE_URL=https://www.anyway.co.il/
-REACT_APP_REDIRECT_URL=/login-popup-redirect
+VITE_BASE_URL=https://www.anyway.co.il/
+VITE_REDIRECT_URL=/login-popup-redirect
 
-REACT_APP_AUTH_URL=https://dev.anyway.co.il/
+VITE_AUTH_URL=https://dev.anyway.co.il/
 
 # === Behaviour ===
 # Card tags for dev / staging
-REACT_APP_SHOW_META_TAGS=true
+VITE_SHOW_META_TAGS=true
 
 # Default zoom
-REACT_APP_DEFAULT_MAP_ZOOM=13
+VITE_DEFAULT_MAP_ZOOM=13
 
 # Should demo card be visible
-REACT_APP_SHOW_DEMO_CARDS=false
+VITE_SHOW_DEMO_CARDS=false
 
 # Should only operation cards be displayed
-REACT_APP_SHOW_ONLY_OPER_CARDS=false
+VITE_SHOW_ONLY_OPER_CARDS=false
 
 # MOCK used for get mock information when we in dev mode
-REACT_APP_SHOW_MOCK_INFORMATION=false
+VITE_SHOW_MOCK_INFORMATION=false

.env.production

@@ -1,16 +1,16 @@
 # override .env
 # environment flags
-REACT_APP_ENV=production
+VITE_ENV=production
 
 # Keys
-REACT_APP_GOOGLE_MAP_KEY ='AIzaSyDUIWsBLkvIUwzLHMHos9qFebyJ63hEG2M'
+VITE_GOOGLE_MAP_KEY ='AIzaSyDUIWsBLkvIUwzLHMHos9qFebyJ63hEG2M'
 
 # Behaviour
-REACT_APP_SHOW_META_TAGS=false
-REACT_APP_SHOW_DEMO_CARDS=false
-REACT_APP_SHOW_ONLY_OPER_CARDS=true
+VITE_SHOW_META_TAGS=false
+VITE_SHOW_DEMO_CARDS=false
+VITE_SHOW_ONLY_OPER_CARDS=true
 
 # === Feature flags (use for hiding features until ready for production) ===
-REACT_APP_LOGIN_READY_FOR_PROD=true
-REACT_APP_LOCATION_SEARCH_READY_FOR_PROD=false
-REACT_APP_LANGUAGE_READY_FOR_PROD=false
+VITE_LOGIN_READY_FOR_PROD=true
+VITE_LOCATION_SEARCH_READY_FOR_PROD=false
+VITE_LANGUAGE_READY_FOR_PROD=false

.env.staging

@@ -1,8 +1,8 @@
 # override .env, .env.production
 # environment flags
-REACT_APP_ENV=staging
+VITE_ENV=staging
 
 # Behaviour
-REACT_APP_SHOW_META_TAGS=true
-REACT_APP_SHOW_DEMO_CARDS=true
-REACT_APP_SHOW_ONLY_OPER_CARDS=false
+VITE_SHOW_META_TAGS=true
+VITE_SHOW_DEMO_CARDS=true
+VITE_SHOW_ONLY_OPER_CARDS=false

.storybook/preview.tsx

@@ -1,9 +1,9 @@
 import React, { Suspense } from 'react';
-import { Box, createStyles, makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { Box, createStyles, makeStyles, createTheme, ThemeProvider } from '@material-ui/core';
 import OverlayLoader from '../src/components/molecules/OverlayLoader';
 import { defaultThemeOptions } from '../src/style/theme';
 
-const customTheme = createMuiTheme(defaultThemeOptions);
+const customTheme = createTheme(defaultThemeOptions);
 const useStyles = makeStyles(() =>
   createStyles({
     rtl: {

README.md

@@ -30,8 +30,9 @@
 Learn more about our [Vision](https://github.com/hasadna/anyway-newsflash-infographics/blob/development/docs/Vision.md)
 
 ## Want to help? <a id="help"></a>
-* Found a bug? feel free to open file a [bug report](https://github.com/hasadna/anyway-newsflash-infographics/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBug%5D). If you're new to github - see our [How To](https://github.com/hasadna/anyway-newsflash-infographics/blob/dev/docs/HowTo.md) step by step tutorial. You can also contact use on email or slack(see below)
-* Want contribute some code, help with our UI or improve documentation? Excellent! Please follow these steps
+
+- Found a bug? feel free to open file a [bug report](https://github.com/hasadna/anyway-newsflash-infographics/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBug%5D). If you're new to github - see our [How To](https://github.com/hasadna/anyway-newsflash-infographics/blob/dev/docs/HowTo.md) step by step tutorial. You can also contact use on email or slack(see below)
+- Want contribute some code, help with our UI or improve documentation? Excellent! Please follow these steps
 
 ### First thing first
 
@@ -77,7 +78,7 @@ Steps:
 1. Set key-value in the following format:
 
 ```
-REACT_APP_GOOGLE_MAP_KEY='THE_API_KEY_HERE'
+GOOGLE_MAP_KEY='THE_API_KEY_HERE'
 ```
 
 3rd Party libraries included: <a id="2nd-party-libraries"></a>
@@ -119,12 +120,14 @@ https://github.com/edmund-dev/react-async-loader/blob/master/example/GoogleMap.j
 
 ### Contribution Guidelines <a id="contribution-guidelines"></a>
 
-##### Code  Guidelines <a id="code-guidelines"></a>
+##### Code Guidelines <a id="code-guidelines"></a>
+
 Can be found in a separate file. Check them out [here](https://github.com/hasadna/anyway-newsflash-infographics/blob/dev/docs/CodeGuidelines.md)
 
 ##### Branch naming <a id="branch-naming"></a>
 
 Branch naming convention is as following
+
 ```
 TYPE-ISSUE_ID-DESCRIPTION
 
@@ -134,6 +137,7 @@ fix-114-newsflash-location-not-accurate
 ```
 
 ##### PR naming <a id="pr-naming"></a>
+
 Pull Request (PR) title convention is as following
 
 ```
@@ -152,7 +156,7 @@ When `TYPE` can be:
 - **fix** - a bug fix
 - **refactor** - code change that neither fixes a bug nor adds a feature
 
-**All PRs must include commit message with the changes description!** 
+**All PRs must include commit message with the changes description!**
 
 Branching system:
 _master_ - used for production <br>
@@ -161,7 +165,7 @@ _dev_ - anything else <br>
 
 ##### Creating a PR <a id="creating-pr"></a>
 
-A standard procedure for working on an issue would be to: 
+A standard procedure for working on an issue would be to:
 
 1. `git pull dev`
 2. Create new branch from `dev` , like: `refactor-137-making-pie-chart-generic-component`
@@ -204,8 +208,10 @@ We use [github actions](https://github.com/marketplace?type=actions) for the fol
 1. [on-push CI](https://github.com/hasadna/anyway-newsflash-infographics/actions?query=workflow%3ACI) - provide per-PR CI testing and a live PR preview (see below)
 1. [deploy-dev](https://github.com/hasadna/anyway-newsflash-infographics/actions?query=workflow%3Adeploy-development): continuous deployment of `dev` branch to Staging Environment - https://anyway-infographics-staging.web.app/
 1. [deploy-master](https://github.com/hasadna/anyway-newsflash-infographics/actions?query=workflow%3Adeploy-development): continuous deployment of master branch to Production Environment:
-* https://anyway-infographics.web.app/
-* https://media.anyway.co.il/
+
+- https://anyway-infographics.web.app/
+- https://media.anyway.co.il/
+
 1. [Deprecated] [deploy-demo](https://github.com/hasadna/anyway-newsflash-infographics/actions?query=workflow%3Adeploy-development): continuous deployment of demo branch to Demo Environment - https://anyway-infographics-demo.web.app/
 
 Live Preview

public/index.html → index.html

@@ -2,16 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Anyway Infographics" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.