Merge pull request #31 from roniy68/staging

🔥 Staging : Deployment: Test #1

.github/workflows/linters.yml

@@ -41,4 +41,4 @@ jobs:
       - uses: actions/checkout@v3
       - name: Check node_modules existence
         run: |
-          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi

.stylelintrc.json

@@ -1,11 +1,6 @@
 {
-  "extends": [
-    "stylelint-config-standard"
-  ],
-  "plugins": [
-    "stylelint-scss",
-    "stylelint-csstree-validator"
-  ],
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
   "rules": {
     "at-rule-no-unknown": [
       true,
@@ -33,11 +28,13 @@
     ],
     "csstree/validator": true
   },
+
   "ignoreFiles": [
     "build/**",
     "dist/**",
     "**/reset*.css",
     "**/bootstrap*.css",
-    "app/assets/builds/*.css"
+    "app/assets/builds/*.css",
+    "app/assets/stylesheets/**/*.css"
   ]
 }

Gemfile

@@ -11,6 +11,8 @@ gem 'react-rails'
 # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
 gem 'sprockets-rails'
 
+gem 'rack-cors'
+
 # Use postgresql as the database for Active Record
 gem 'pg', '~> 1.1'
 
@@ -56,6 +58,7 @@ gem 'bootsnap', require: false
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem 'debug', platforms: %i[mri mingw x64_mingw]
+  gem 'rubocop', '>= 1.0', '< 2.0'
 end
 
 group :development do

Gemfile.lock

@@ -68,6 +68,7 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.4)
       public_suffix (>= 2.0.2, < 6.0)
+    ast (2.4.2)
     babel-source (5.8.35)
     babel-transpiler (0.7.0)
       babel-source (>= 4.0, < 6)
@@ -108,6 +109,7 @@ GEM
       activesupport (>= 5.0.0)
     jsbundling-rails (1.1.1)
       railties (>= 6.0.0)
+    json (2.6.3)
     loofah (2.21.3)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -134,12 +136,18 @@ GEM
     nio4r (2.5.9)
     nokogiri (1.15.2-x86_64-linux)
       racc (~> 1.4)
+    parallel (1.23.0)
+    parser (3.2.2.3)
+      ast (~> 2.4.1)
+      racc
     pg (1.5.3)
     public_suffix (5.0.1)
     puma (5.6.5)
       nio4r (~> 2.0)
     racc (1.7.0)
     rack (2.2.7)
+    rack-cors (2.0.1)
+      rack (>= 2.0.0)
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (7.0.5)
@@ -169,6 +177,7 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0)
       zeitwerk (~> 2.5)
+    rainbow (3.1.1)
     rake (13.0.6)
     react-rails (2.7.1)
       babel-transpiler (>= 0.7.0)
@@ -180,6 +189,19 @@ GEM
     reline (0.3.5)
       io-console (~> 0.5)
     rexml (3.2.5)
+    rubocop (1.52.1)
+      json (~> 2.3)
+      parallel (~> 1.10)
+      parser (>= 3.2.2.3)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.28.0, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 2.4.0, < 3.0)
+    rubocop-ast (1.29.0)
+      parser (>= 3.2.1.0)
+    ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
     selenium-webdriver (4.10.0)
       rexml (~> 3.2, >= 3.2.5)
@@ -203,6 +225,7 @@ GEM
       railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
+    unicode-display_width (2.4.2)
     web-console (4.2.0)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -232,8 +255,10 @@ DEPENDENCIES
   jsbundling-rails
   pg (~> 1.1)
   puma (~> 5.0)
+  rack-cors
   rails (~> 7.0.5)
   react-rails
+  rubocop (>= 1.0, < 2.0)
   selenium-webdriver
   sprockets-rails
   stimulus-rails
@@ -246,4 +271,4 @@ RUBY VERSION
    ruby 3.2.2p53
 
 BUNDLED WITH
-   2.4.12
+   2.4.14

Procfile.dev

@@ -1,3 +1,3 @@
-web: unset PORT && bin/rails server
+web: unset PORT && bin/rails server -p 3000
 js: yarn build --watch
 css: yarn build:css --watch

app/assets/stylesheets/application.tailwind.css

@@ -1,3 +1,22 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+* Your custom CSS goes here but before adding a lot of CSS check this out:
+*   https://tailwindcss.com/docs/extracting-components
+*/
+
+/* stylelint-disable */
+/* Tailwind Base */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* Fonts */
+
+@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');
+
+
+/* Custom CSS  */
+@import "./custom.css";
+@import "./navigationStyle/detail.css";
+@import "./navigationStyle/MyReservations.css";
+@import "./navigationStyle/OurCars.css";
+@import "./navigationStyle/ReservationAddForm.css"

app/assets/stylesheets/custom.css

@@ -0,0 +1,17 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-size: 1.5rem;
+    font-family: 'Robot', sans-serif;
+    background-color: white;
+}
+
+li:hover {
+    @apply bg-green-700;
+}

app/assets/stylesheets/navigationStyle/MyReservations.css

@@ -0,0 +1,50 @@
+/*********************** My reservation ***************************/
+
+.my-reservations-container {
+  margin-top: 20px;
+  padding: 20px;
+}
+
+.my-reservations-container h2{
+  text-align: center;
+  padding: 20px;
+  font-size: 2.3rem;
+}
+
+.reservation-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
+  grid-gap: 20px;
+  list-style: none;
+  padding: 0;
+}
+
+.reservation-card {
+  width: fit-content;
+  box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
+  border-radius: 5px;
+  padding: 2rem;
+  margin-bottom: 10px;
+}
+
+.card-content {
+  margin-bottom: 10px;
+  font-size: 1.4rem;
+}
+
+.delete-button {
+  background-color: #f00;
+  color: #fff;
+  border: none;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: transform .3s ease-in-out;
+}
+
+.delete-button:hover {
+  transform: scale(1.05);
+  background: #f74545;
+}

app/assets/stylesheets/navigationStyle/ReservationAddForm.css

@@ -0,0 +1,82 @@
+/************************** Reservation Form ***************************/
+
+/* CSS */
+
+.reservation-form-container {
+  max-width: 800px;
+  margin: 50px auto;
+  padding: 20px;
+  background: #4DA0B0;
+  background: linear-gradient(to right, #D39D38, #4DA0B0);  
+  background: linear-gradient(to right, #D39D38, #4DA0B0);
+  border-radius: 10px;
+  box-shadow: rgb(0 0 0 / 30%) 0 19px 38px, rgb(0 0 0 / 22%) 0 15px 12px;
+}
+
+.reservation-form-container h2 {
+  text-align: center;
+  color: white;
+            text-shadow: -1px 1px 0 #3b3737,
+                          1px 1px 0 #000,
+                         1px -1px 0 #000,
+                        -1px -1px 0 #000;
+  font-size: 2.4rem;
+  font-weight: bolder;
+  margin-bottom: 25px;
+}
+
+.reservation-form-container form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 95%;
+
+}
+
+.reservation-form-container label {
+  margin-top: 10px;
+  font-weight: bold;
+  font-size: 1.2rem;
+  color: #333;
+}
+
+.reservation-form-container input,
+.reservation-form-container textarea {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  border: 1px solid #ccc;
+  font-size: 1.3rem;
+  color: #3d4947;
+  border-radius: 4px;
+  box-shadow: rgb(204 219 232) 3px 3px 6px 0 inset, rgb(255 255 255 / 50%) -3px -3px 6px 1px inset;
+  box-sizing: border-box;
+}
+
+.reservation-form-container button {
+  width: 50%;
+  padding: 20px;
+  margin-top: 10px;
+  background-color: #52caee;
+  color: #fff;
+  font-size: 1.3rem;
+  font-weight: bolder;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: rgb(0 0 0 / 35%) 0 5px 15px;
+  align-self: center;
+  transition: transform 0.3s ease-in-out;
+  border: 2px solid gray;
+}
+
+.reservation-form-container button:hover {
+  background-color: #24dae7;
+  color: #333;
+  transform: translateY(-5px);
+}
+
+.alert-msg {
+  font-size: 1.8rem;
+  color: #2ed357;
+  text-align: center;
+}

app/assets/stylesheets/navigationStyle/detail.css

@@ -0,0 +1,37 @@
+/***************************** Detail *****************************/
+
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  text-align: center;
+}
+
+.card {
+  width: 30%;
+  padding: 20px;
+  box-shadow: rgb(50 50 93 / 25%) 0 6px 12px -2px, rgb(0 0 0 / 30%) 0 3px 7px -3px;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.card img {
+  width: 100%;
+  max-height: 200px;
+  object-fit: cover;
+  margin-bottom: 20px;
+}
+
+.card h2 {
+  font-size: 2.2rem;
+  margin-bottom: 10px;
+  color: rgb(56 59 59);
+}
+
+.desc p{
+    margin-bottom: 10px;
+    text-align: start;
+    font-size: 1.2rem;
+}

app/assets/stylesheets/navigationStyle/init.css

@@ -0,0 +1,33 @@
+.header {
+  padding: 20px;
+  text-align: center;
+  margin: 0;
+  background: linear-gradient(135deg, #da3636, #4a1094);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: Arial, sans-serif;
+  color: #ffff;
+  transition: background 0.5s ease;
+}
+
+.header-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.header-book-btn-login {
+  display: flex;
+  justify-content: center;
+}
+
+.header-book-btn-login .link-login button {
+  padding: 8px 16px;
+  background-color: #333;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}