Merge pull request #2 from culturecreates/feature/issue-108

Feature/issue 108
culturecreates · Jan 12, 2024 · d4d1cd7 · d4d1cd7
2 parents a2a03e1 + 85f0038
commit d4d1cd7
Show file tree

Hide file tree

Showing 39 changed files with 375 additions and 324 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,14 +2,9 @@
   "env": {
     "browser": true,
     "es2021": true,
-    "jest": true,
-    "node": true
+    "jest": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
   "overrides": [],
   "parserOptions": {
     "ecmaVersion": "latest",
@@ -21,7 +16,10 @@
     "prettier/prettier": [
       "error",
       {
-        "endOfLine": "auto"
+        "endOfLine": "auto",
+        "singleQuote": true,
+        "printWidth": 100,
+        "jsxBracketSameLine": false
       }
     ],
     "react/prop-types": "off"

diff --git a/.github/workflows/build-staging-deploy-s3.yml b/.github/workflows/build-staging-deploy-s3.yml
@@ -0,0 +1,20 @@
+name: Build and deploy develop branch to S3 Staging
+on:
+  push:
+    branches:
+      - develop
+jobs:
+  deploy:
+    env:
+      AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
+      AWS_REGION: ca-central-1
+      WEBHOSTING_BUCKET_NAME: staging.cms-widget.footlight.io
+    runs-on: ubuntu-22.04
+    container:
+      image: sleavely/node-awscli:14.x
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install
+      - run: npm run build
+      - run: aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/ --acl public-read --delete --cache-control max-age=3600
diff --git a/.gitignore b/.gitignore
@@ -17,13 +17,10 @@ web_modules/
 # Optional eslint cache
 .eslintcache
 
-# mac specific
+# misc
 .DS_Store
-
-# dotenv environment variable files
-# .env
-# .env.development.local
-# .env.test.local
-# .env.production.local
-# .env.local
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
diff --git a/prettier.rrc → .prettierrc b/prettier.rrc → .prettierrc
@@ -3,6 +3,7 @@
   "tabWidth": 2,
   "printWidth": 100,
   "singleQuote": true,
-  "trailingComma": "none",
-  "jsxBracketSameLine": true
+  "trailingComma": "all",
+  "jsxBracketSameLine": false,
+  "endOfLine": "auto"
 }
diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,17 @@
 // import { useTranslation } from 'react-i18next';
-import Footer from "./components/footer/Footer";
-import ResultPanel from "./components/panel/Panel";
-import Search from "./components/search/Search";
-import { ThemeProvider } from "./context/ThemeContext";
-import { WidgetContextProvider } from "./context/WidgetContext";
-import "./App.css";
+import Footer from './components/footer/Footer';
+import ResultPanel from './components/panel/Panel';
+import Search from './components/search/Search';
+import { ThemeProvider } from './context/ThemeContext';
+import { WidgetContextProvider } from './context/WidgetContext';
+import './App.css';
 
 function App(props) {
   const { color, ...widgetProps } = props;
   return (
     <ThemeProvider color={color}>
       <WidgetContextProvider widgetProps={widgetProps}>
-        <div
-          className="widget-layout"
-          style={{ maxHeight: window.screen.height }}
-        >
+        <div className="widget-layout" style={{ maxHeight: window.screen.height }}>
           <Search />
           <ResultPanel />
           <Footer />

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,7 +1,7 @@
-import { render, screen } from "@testing-library/react";
-import App from "./App";
+import { render, screen } from '@testing-library/react';
+import App from './App';
 
-test("renders learn react link", () => {
+test('renders learn react link', () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

diff --git a/src/assets/Avatar.svg b/src/assets/Avatar.svg
diff --git a/src/components/calendarControl/CalendarControl.jsx b/src/components/calendarControl/CalendarControl.jsx
@@ -1,8 +1,8 @@
-import React, { useContext } from "react";
-import { useTranslation } from "react-i18next";
-import { sessionStorageVariableNames } from "../../constants/sessionStorageVariableNames";
-import WidgetContext from "../../context/WidgetContext";
-import "./calendarControl.css";
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sessionStorageVariableNames } from '../../constants/sessionStorageVariableNames';
+import WidgetContext from '../../context/WidgetContext';
+import './calendarControl.css';
 
 const CalendarControl = ({ setCalendarKey, setView, setActiveStartDate }) => {
   const {
@@ -22,12 +22,12 @@ const CalendarControl = ({ setCalendarKey, setView, setActiveStartDate }) => {
     }
     setSearchDate(null);
     sessionStorage.setItem(sessionStorageVariableNames.WidgetSearchDate, null);
-    sessionStorage.setItem(sessionStorageVariableNames.WidgetStartDate, "");
-    sessionStorage.setItem(sessionStorageVariableNames.WidgetEndDate, "");
+    sessionStorage.setItem(sessionStorageVariableNames.WidgetStartDate, '');
+    sessionStorage.setItem(sessionStorageVariableNames.WidgetEndDate, '');
     setIsSingleDate(e.target.checked);
-    setStartDateSpan("");
-    setEndDateSpan("");
-    setView("month");
+    setStartDateSpan('');
+    setEndDateSpan('');
+    setView('month');
     setActiveStartDate(new Date());
   };
 
@@ -37,12 +37,12 @@ const CalendarControl = ({ setCalendarKey, setView, setActiveStartDate }) => {
     }
     setSearchDate(null);
     sessionStorage.setItem(sessionStorageVariableNames.WidgetSearchDate, null);
-    sessionStorage.setItem(sessionStorageVariableNames.WidgetStartDate, "");
-    sessionStorage.setItem(sessionStorageVariableNames.WidgetEndDate, "");
-    setStartDateSpan("");
-    setEndDateSpan("");
+    sessionStorage.setItem(sessionStorageVariableNames.WidgetStartDate, '');
+    sessionStorage.setItem(sessionStorageVariableNames.WidgetEndDate, '');
+    setStartDateSpan('');
+    setEndDateSpan('');
     setActiveStartDate(new Date());
-    setView("month");
+    setView('month');
   };
 
   return (
@@ -52,18 +52,16 @@ const CalendarControl = ({ setCalendarKey, setView, setActiveStartDate }) => {
           <input
             type="checkbox"
             id="single-date-control"
-            style={{ height: "24px", width: "24px" }}
+            style={{ height: '24px', width: '24px' }}
             checked={isSingleDate}
             onChange={(e) => handleDateSelectionTypeChange(e)}
           />
           <span></span>
-          {t("datepicker.rangeSelectLabel")}
+          {t('datepicker.rangeSelectLabel')}
         </label>
       </div>
 
-      <button onClick={handleDateErase}>
-        {t("datepicker.eraseButtonLabel")}
-      </button>
+      <button onClick={handleDateErase}>{t('datepicker.eraseButtonLabel')}</button>
     </div>
   );
 };

diff --git a/src/components/calendarControl/calendarControl.css b/src/components/calendarControl/calendarControl.css
@@ -29,31 +29,23 @@
   color: var(--primary-black);
 }
 
-#calendar-widget > .widget-layout .calendar-control input[type="checkbox"] {
+#calendar-widget > .widget-layout .calendar-control input[type='checkbox'] {
   position: absolute;
   opacity: 0;
   z-index: -1;
   accent-color: rgb(143, 31, 31);
 }
 
 /* Text color for the label */
-#calendar-widget
-  > .widget-layout
-  .calendar-control
-  input[type="checkbox"]
-  + span {
+#calendar-widget > .widget-layout .calendar-control input[type='checkbox'] + span {
   cursor: pointer;
   font: 16px sans-serif;
   color: var(--primary-black);
 }
 
 /* Checkbox un-checked style */
-#calendar-widget
-  > .widget-layout
-  .calendar-control
-  input[type="checkbox"]
-  + span:before {
-  content: "";
+#calendar-widget > .widget-layout .calendar-control input[type='checkbox'] + span:before {
+  content: '';
   background: #ffffff01;
   border-radius: 2px;
   display: inline-block;
@@ -64,12 +56,8 @@
 }
 
 /* Checked checkbox style (in this case the background is green #e7ffba, change this to change the color) */
-#calendar-widget
-  > .widget-layout
-  .calendar-control
-  input[type="checkbox"]:checked
-  + span:before {
-  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg");
+#calendar-widget > .widget-layout .calendar-control input[type='checkbox']:checked + span:before {
+  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 27px;
@@ -78,11 +66,7 @@
 }
 
 /* Disabled checkbox styles */
-#calendar-widget
-  > .widget-layout
-  .calendar-control
-  input[type="checkbox"]:disabled
-  + span {
+#calendar-widget > .widget-layout .calendar-control input[type='checkbox']:disabled + span {
   cursor: default;
   color: black;
   opacity: 0.5;

diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import { dateRangeFormatter } from "../../utils/dateRangeFormatter";
-import placeImg from "../../assets/Location.svg";
-import { ReactComponent as DefaultImg } from "../../assets/Vector.svg";
-import "./card.css";
+import React, { useState } from 'react';
+import { dateRangeFormatter } from '../../utils/dateRangeFormatter';
+import placeImg from '../../assets/Location.svg';
+import { ReactComponent as DefaultImg } from '../../assets/Vector.svg';
+import './card.css';
 
 const Card = ({ name, place, image, startDate, endDate }) => {
   const [imgError, setImgError] = useState(false);

diff --git a/src/components/card/card.css b/src/components/card/card.css
@@ -23,13 +23,7 @@
   border-radius: 4px;
 }
 
-#calendar-widget
-  > .widget-layout
-  .card
-  .image-column
-  .default-img-container
-  > svg
-  path {
+#calendar-widget > .widget-layout .card .image-column .default-img-container > svg path {
   fill: var(--dynamic-color-500);
 }