nitro_rails 0.1.0 → 0.1.1

data/app/assets/javascript/nitro_rails/controllers/time_zone_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { serverTime: String}
+
+  connect() {
+    this.setTimezoneCookies();
+  }
+
+  setTimezoneCookies() {
+    const currentClientTime = new Date()
+    const currentServerTime = new Date(Date.parse(this.serverTimeValue));
+
+    const browserTimezoneLocation = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const browserShortTimezone = new Intl.DateTimeFormat('en-US', {timeZoneName: 'short'}).formatToParts(currentClientTime).find(part => part.type === 'timeZoneName').value;
+    const browserLongTimeZone = new Intl.DateTimeFormat('en-US', {timeZoneName: 'long'}).formatToParts(currentClientTime).find(part => part.type === 'timeZoneName').value;
+    const browserTimezoneOffset = currentClientTime.getTimezoneOffset() * -1;
+    const clientOffsetFromServer = Math.floor((currentClientTime - currentServerTime) / 1000 / 60 / 60);
+
+    if(browserTimezoneLocation !== this.getCookieByName('client_timezone_location')) {
+      document.cookie = `client_timezone_location=${browserTimezoneLocation}; path=/`
+    }
+
+    if(browserShortTimezone !== this.getCookieByName('client_short_timezone')) {
+      document.cookie = `client_short_timezone=${browserShortTimezone}; path=/`
+    }
+
+    if(browserLongTimeZone !== this.getCookieByName('client_long_timezone')) {
+      document.cookie = `client_long_timezone=${browserLongTimeZone}; path=/`
+    }
+
+    if(browserTimezoneOffset !== this.getCookieByName('client_utc_offset')) {
+      document.cookie = `client_utc_offset=${browserTimezoneOffset}; path=/`
+    }
+
+    if(clientOffsetFromServer !== this.getCookieByName('client_offset_from_server')) {
+      document.cookie = `client_offset_from_server=${clientOffsetFromServer}; path=/`
+    }
+  }
+
+  getCookieByName(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+  }
+}
+

data/app/assets/javascript/nitro_rails/controllers/togglable_checkbox_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = [ "form", "checkbox" ];
+
+  submit() {
+    this.formTarget.requestSubmit();
+  }
+}

data/app/assets/javascript/nitro_rails/helpers/device_info_helper.js

@@ -0,0 +1,99 @@
+class DeviceInfoHelper {
+  constructor() {
+    this.userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  }
+
+  // Operating Systems
+  isIOS() {
+    return /iPhone|iPad|iPod/.test(this.userAgent);
+  }
+
+  isAndroid() {
+    return /Android/.test(this.userAgent);
+  }
+
+  isWindows() {
+    return /Windows/.test(this.userAgent);
+  }
+
+  isMac() {
+    return /Mac/.test(this.userAgent);
+  }
+
+  isLinux() {
+    return /Linux/.test(this.userAgent);
+  }
+
+  // Devices
+
+  isIPad() {
+    return /iPad/.test(this.userAgent);
+  }
+
+  isIPhone() {
+    return /iPhone/.test(this.userAgent);
+  }
+
+  isMobileDevice() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
+  }
+
+  isTablet() {
+    return /iPad/.test(this.userAgent);
+  }
+
+  isDesktop() {
+    return !this.isMobileDevice();
+  }
+
+  // Browsers
+
+  isSafari() {
+    return /Safari/.test(this.userAgent);
+  }
+
+  isChrome() {
+    return /Chrome/.test(this.userAgent);
+  }
+
+  isFirefox() {
+    return /Firefox/.test(this.userAgent);
+  }
+
+  isOpera() {
+    return /Opera/.test(this.userAgent);
+  }
+
+  isIE() {
+    return /MSIE/.test(this.userAgent);
+  }
+
+  isEdge() {
+    return /Edge/.test(this.userAgent);
+  }
+
+  // Native Apps
+
+  isNativeApp() {
+    return this.isIOSApp() || this.isAndroidApp() || this.isWindowsApp() || this.isMacApp();
+  }
+  
+  isIOSApp() {
+    return !window.external && /iPhone|iPod|iPad.*AppleWebKit(?!.*Safari)/i.test(this.userAgent);
+  }
+
+  isAndroidApp() {
+    return /Android.*AppleWebKit(?!.*Safari)/i.test(this.userAgent);
+  }
+
+  isWindowsApp() {
+    return /Windows.*AppleWebKit(?!.*Safari)/i.test(this.userAgent);
+  }
+
+  isMacApp() {
+    return /Mac.*AppleWebKit(?!.*Safari)/i.test(this.userAgent);
+  }
+}
+
+const deviceInfoHelper = new DeviceInfoHelper();
+export { deviceInfoHelper };

data/app/assets/javascript/nitro_rails/helpers/screen_info_helper.js

@@ -0,0 +1,20 @@
+class ScreenInfoHelper {
+  constructor() {
+    this.userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  }
+
+  isMobileSize() {
+    return window.innerWidth < 500;
+  }
+
+  isTabletSize() {
+    return window.innerWidth < 768 && window.innerWidth >= 500;
+  }
+
+  isDesktopSize() {
+    return window.innerWidth >= 768;
+  }
+}
+
+const screenInfoHelper = new ScreenInfoHelper();
+export { screenInfoHelper };

data/app/assets/javascript/nitro_rails/turbo_streams/clear_errors.js

@@ -0,0 +1,22 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.clear_errors = function() {
+  const authenticityToken = this.getAttribute('authenticity_token');
+
+  // MAJOR HACK - Come up with a better system some time
+  const authenticityQuery = `[name="authenticity_token"][value="${authenticityToken}"]`;
+  const editableTextContainer = document.querySelector(authenticityQuery).closest(".editable-text-container");
+
+  const messageTarget = editableTextContainer.querySelector(`[data-attribute-error-message-id]`)
+  const badgeTarget = editableTextContainer.querySelector(`[data-attribute-error-count-id]`);
+
+  if (messageTarget) {
+    messageTarget.classList.remove("visible");
+    messageTarget.textContent = "";
+  }
+
+  if (badgeTarget) {
+    badgeTarget.classList.remove("visible");
+    badgeTarget.textContent = "";
+  }
+};

data/app/assets/javascript/nitro_rails/turbo_streams/focus.js

@@ -0,0 +1,8 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.focus = function() {
+  setTimeout(() => {
+    // Should we use "data-broadcast-focal-point?"
+    document.querySelector(this.getAttribute('target')).querySelector('[data-focal-point]').focus();
+  }, 500);
+}

data/app/assets/javascript/nitro_rails/turbo_streams/index.js

@@ -0,0 +1,8 @@
+import './clear_errors'
+import './render_errors'
+import './toggle_class'
+import './redirect'
+import './toggle_checkbox'
+import './insert'
+import './focus'
+import './refresh_frame'

data/app/assets/javascript/nitro_rails/turbo_streams/insert.js

@@ -0,0 +1,10 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.insert = function() {
+  const positionIndex = this.getAttribute("position");
+  const target = this.getAttribute("target");
+  const template = document.createElement("template");
+
+  template.innerHTML = this.targetBody;
+  const content = template.content;
+}

data/app/assets/javascript/nitro_rails/turbo_streams/redirect.js

@@ -0,0 +1,10 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.redirect = function() {
+  const redirectPath = this.getAttribute('to');
+  const onPath = this.getAttribute('on');
+
+  if (redirectPath && onPath === window.location.pathname) {
+    window.location.replace(redirectPath);
+  }
+};

data/app/assets/javascript/nitro_rails/turbo_streams/refresh_frame.js

@@ -0,0 +1,9 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.refresh_frame = function() {
+  document.querySelectorAll(`turbo-frame${this.getAttribute('targets')}`).forEach((frame) => {
+    console.log(frame.dataset.broadcastReload);
+    frame.src = frame.dataset.broadcastReload;
+    // frame.reload();
+  });
+};

data/app/assets/javascript/nitro_rails/turbo_streams/render_errors.js

@@ -0,0 +1,26 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.render_errors = function() {
+  const authenticityToken = this.getAttribute('authenticity_token');
+  const errorMessage = this.getAttribute('error_message');
+  const errorLength = this.getAttribute('error_length');
+  const attributeID = this.getAttribute('attribute_id');
+
+  // MAJOR HACK - Come up with a better system some time
+  const authenticityQuery = `[name="authenticity_token"][value="${authenticityToken}"]`;
+  const editableTextContainer = document.querySelector(authenticityQuery).closest(".editable-text-container");
+
+  const messageTarget = editableTextContainer.querySelector(`[data-attribute-error-message-id="${attributeID}"]`);
+  const badgeTarget = editableTextContainer.querySelector(`[data-attribute-error-count-id="${attributeID}"]`);
+
+
+  if (messageTarget) {
+    messageTarget.classList.add("visible");
+    messageTarget.textContent = `${errorMessage}`;
+  }
+
+  if (badgeTarget) {
+    badgeTarget.classList.add("visible");
+    badgeTarget.textContent = `${errorLength}`;
+  }
+};

data/app/assets/javascript/nitro_rails/turbo_streams/toggle_checkbox.js

@@ -0,0 +1,9 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.toggle_checkbox = function() {
+  const status = this.getAttribute("status");
+
+  this.targetElements.forEach((element) => {
+    element.checked = (status === "true")
+  });
+};

data/app/assets/javascript/nitro_rails/turbo_streams/toggle_class.js

@@ -0,0 +1,14 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.toggle_class = function() {
+  const className = this.getAttribute("class");
+  const status = this.getAttribute("status");
+
+  this.targetElements.forEach((element) => {
+    if (status === "true") {
+      element.classList.add(className);
+    } else {
+      element.classList.remove(className);
+    }
+  });
+}

data/app/assets/stylesheets/nitro_rails/__reset.css

@@ -0,0 +1,25 @@
+*, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+ul, ol, li {
+  list-style-type: none;
+}
+
+button, 
+[type="submit"],
+a {
+  border: none; 
+  background: none;
+  text-decoration: none; 
+  color: inherit;
+  padding: 0;
+  width: fit-content;
+  cursor: pointer;
+  font-weight: inherit;
+}
+
+button {
+  text-transform: inherit;
+}

data/app/assets/stylesheets/nitro_rails/_base/_color.css

@@ -0,0 +1,24 @@
+:root {
+  /* Default Theme Accent */
+  --theme-accent: #4A96FF;; 
+  --accent: var(--theme-accent);
+
+  caret-color: var(--theme-accent);
+}
+
+::-moz-selection { /* Code for Firefox */
+  background: var(--theme-accent);;
+}
+
+::selection {
+  background: var(--theme-accent);;
+}
+
+.danger {
+  --accent: red;
+}
+
+body {
+  --theme-accent: #4A96FF;
+  --accent: var(--theme-accent);
+}

data/app/assets/stylesheets/nitro_rails/_base/_font.css

@@ -0,0 +1,35 @@
+:root {
+  font-size: 20px;
+
+  --side-padding: 30px;
+
+  --small-fs-3: 0.7rem;
+  --small-fs-2: 0.8rem;
+  --small-fs: 0.9rem;
+  --normal-fs: 1rem;
+  --large-fs: 1.25rem;
+  --large-fs-2: 1.5rem;
+  --large-fs-3: 2rem;
+}
+
+.small-fs-3 { font-size: var(--small-fs-3); }
+.small-fs-2 { font-size: var(--small-fs-2); }
+.small-fs { font-size: var(--small-fs); }
+.normal-fs { font-size: var(--normal-fs); }
+.large-fs { font-size: var(--large-fs); }
+.large-fs-2 { font-size: var(--large-fs-2); }
+.large-fs-3 { font-size: var(--large-fs-3); }
+
+body {
+  --default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: var(--default-font);
+  font-weight: 300;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[placeholder]:empty:before {
+  content: attr(placeholder);
+  color: var(--gray);
+}

data/app/assets/stylesheets/nitro_rails/_base/_format.css

@@ -0,0 +1,38 @@
+div,
+li,
+ul,
+ol,
+section,
+main,
+body,
+footer,
+nav,
+header,
+form,
+turbo-frame { 
+  display: flex;
+  flex-direction: inherit;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+:root {
+  --side-padding: 40px;
+}
+
+@media only screen and (max-width: 768px) {
+  :root {
+    --side-padding: 20px;
+  }
+}
+
+.content {
+  padding: 20px var(--side-padding);
+  gap: 20px;
+  box-sizing: border-box;
+}
+

data/app/assets/stylesheets/nitro_rails/_base/_grayscale.css

@@ -0,0 +1,79 @@
+:root {
+  --black: #000000;
+  --black-offset-1: #0b0b0b; 
+  --black-offset-2: #1b1b1b;
+  --black-offset-3: #2b2b2b;
+  --dark-gray-1: #333333;
+  --dark-gray-2: #3b3b3b;
+  --semi-dark-gray-1: #555555;
+  --semi-dark-gray-2: #6b6b6b;
+  --semi-dark-gray-3: #7f7f7f;
+  --gray: #999999;
+  --semi-light-gray-3: #a6a6a6;
+  --semi-light-gray-2: #b3b3b3;
+  --semi-light-gray-1: #dadcdf;
+  --light-gray-2: #e0e0e0;
+  --light-gray-1: #e9ecef;
+  --white-offset-3: #f1f2f5;
+  --white-offset-2: #f7f8f9;
+  --white-offset-1: #f8f9fa;
+  --white: #FFFFFF;
+
+  --backdrop-1: var(--white);
+  --backdrop-2: var(--white-offset-1);
+  --backdrop-3: var(--white-offset-2);
+  --backdrop-4: var(--white-offset-3);
+  --backdrop-5: var(--light-gray-1);
+  --backdrop-6: var(--light-gray-2);
+  --backdrop-7: var(--semi-light-gray-1);
+  --backdrop-8: var(--semi-light-gray-2);
+  --backdrop-9: var(--semi-light-gray-3);
+
+  --foreground-1: var(--black);
+  --foreground-2: var(--black-offset-1);
+  --foreground-3: var(--black-offset-2);
+  --foreground-4: var(--black-offset-3);
+  --foreground-5: var(--dark-gray-1);
+  --foreground-6: var(--dark-gray-2);
+  --foreground-7: var(--semi-dark-gray-1);
+  --foreground-8: var(--semi-dark-gray-2);
+  --foreground-9: var(--semi-dark-gray-3);
+
+  --light-border-color-1: rgba(255,255,255, 0.05);
+  --light-border-color-2: rgba(255,255,255, 0.15);
+  --light-border-color-3: rgba(255,255,255, 0.25);
+
+  --dark-border-color-1: rgba(0,0,0, 0.05);
+  --dark-border-color-2: rgba(0,0,0, 0.15);
+  --dark-border-color-3: rgba(0,0,0, 0.25);
+
+  --standard-border: 2px solid var(--light-border-color-1);
+  --standard-color-border: 2px solid var(--light-border-color-3);
+}
+
+.dark-mode {
+  --backdrop-1: var(--black);
+  --backdrop-2: var(--black-offset-1);
+  --backdrop-3: var(--black-offset-2);
+  --backdrop-4: var(--black-offset-3);
+  --backdrop-5: var(--dark-gray-1);
+  --backdrop-6: var(--dark-gray-2);
+  --backdrop-7: var(--semi-dark-gray-1);
+  --backdrop-8: var(--semi-dark-gray-2);
+  --backdrop-9: var(--semi-dark-gray-3);
+
+  --foreground-1: var(--white);
+  --foreground-2: var(--white-offset-1);
+  --foreground-3: var(--white-offset-2);
+  --foreground-4: var(--white-offset-3);
+  --foreground-5: var(--light-gray-1);
+  --foreground-6: var(--light-gray-2);
+  --foreground-7: var(--semi-light-gray-1);
+  --foreground-8: var(--semi-light-gray-2);
+  --foreground-9: var(--semi-light-gray-3);
+}
+
+body {
+  background-color: var(--backdrop-1);
+  color: var(--foreground-1);
+}

data/app/assets/stylesheets/nitro_rails/_base/_utility.css

@@ -0,0 +1,34 @@
+.flex {
+  display: flex; 
+  flex-direction: inherit;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.split-right {
+  margin-left: auto;
+}
+
+.h-stack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.v-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.hidden {
+  display: none;
+}

data/app/assets/stylesheets/nitro_rails/application.css

@@ -10,6 +10,29 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
+ *= require normalize-rails
+ *= require font-awesome
  *= require_tree .
  *= require_self
  */
+
+.nitro-form-submit {
+  cursor: pointer;
+}
+
+[data-action="click->nitro#link"] {
+  cursor: pointer;
+  position: relative;
+}
+
+[data-action="click->nitro#link"]:hover:before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -5px;
+  right: -5px;
+  bottom: -2px;
+  border-radius: 5px;
+  background-color: var(--backdrop-4);
+  z-index: -1;
+}

data/app/assets/stylesheets/nitro_rails/modules/action-navigation.css

@@ -0,0 +1,24 @@
+.action-navigation {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  font-weight: 400;
+  align-items: center;
+}
+
+.action-navigation a:hover {
+  text-decoration: underline;
+}
+
+.action-navigation a.active {
+  color: var(--foreground-8);
+  pointer-events: none;
+}
+
+.action-navigation a.active:hover {
+  text-decoration: none;
+}
+
+.danger {
+  color: red;
+}

data/app/assets/stylesheets/nitro_rails/modules/alert.css

@@ -0,0 +1,31 @@
+/* Maybe call like AlertBar or NotificationBar or something */
+.alert {
+  padding: 10px var(--side-padding);
+  background-color: var(--accent);
+  color: white;
+  font-weight: 600;
+  animation-name: hideAlert;
+  animation-duration: 4s;
+  margin-top: -43px;
+}
+
+@keyframes hideAlert {
+  0%   {
+    margin-top: -43px;
+    filter: brightness(1);
+  }
+  20% {
+    margin-top: 0;
+    filter: brightness(1);
+  }
+  50%  {
+    filter: brightness(1.1);
+  }
+  80% {
+    filter: brightness(1);
+    margin-top: 0;
+  }
+  100% {
+    margin-top: -43px;
+  }
+}

data/app/assets/stylesheets/nitro_rails/modules/btn.css

@@ -0,0 +1,57 @@
+/* Buttons */
+
+.btn {
+  padding: 10px 15px;
+  background-color: var(--accent);
+  border-radius: 3px;
+  color: white;
+  font-size: var(--small-fs-2);
+  font-weight: bold;
+  text-transform: uppercase;
+  --accent: var(--theme-accent);
+}
+
+.btn:hover {
+  filter: brightness(0.8);
+}
+
+.btn-danger {
+  --accent: red;
+}
+
+/* .btn-new {
+  height: 50px;
+  width: 50px;
+
+  background-color: var(--accent);
+  color: white;
+  font-weight: bold;
+  border-radius: 50px;
+
+  text-align: center;
+  line-height: 50px;
+
+  font-size: var(--small-fs);
+} */
+
+.btn-new {
+  height: auto;
+  width: fit-content;
+  display: inline-block;
+  padding: 10px 15px;
+
+  background-color: var(--accent);
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+
+  text-align: center;
+  text-transform: uppercase;
+  /* line-height: auto; */
+
+  font-size: var(--small-fs);
+}
+
+.btn-new:hover {
+  filter: brightness(0.8);
+}