hotwire_native_rails 0.3.5 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e90a72439838b37ad270197654dd4f5b3f537aa2898af4c0ca14fa46697028b3
-  data.tar.gz: 80ec851dcc2fc70844455a900e6eed90786e99c023ef4ee16c67f5f08ae16e9c
+  metadata.gz: f97c2f9c30c5a5dfd25c07123c9a525682c75cb0070dd73ad58c738a2520e7a9
+  data.tar.gz: 30165a99d3cb916c63fc452229069be475a167086a132ea272d04e139a4fee0e
 SHA512:
-  metadata.gz: 7015cdfc3fa0344936ca9fec047504404b545eb79c11a6a9614c411fdba1bdb512376f9d7fcd9c9954bb0345ecf68fbfc1bd023d453bfe3dbc41cffc13056275
-  data.tar.gz: 261be6fef738aa329d964c081fb452caae2a5b930aa7631e39721a69a39111d3bbe3849b05650f69b42da621b47a4928ddf176586208e5d7373b645893fee67b
+  metadata.gz: aa950e7ed3f06c09efe76c941fc6e5a526abc94ba4fb4c68f6a5debeaeb23a03dfbe4090acd9cd459a4a0acf7619933f075b859134fe29dbd891210adae305b5
+  data.tar.gz: c8aec60e28771debaae4d2065d2c9c38931c7d164b39f400534e76343f9d00861487ca45bee58a2ee7239e22372430c6027053529c9c030f38fb32fd6ea252a3

data/README.md

@@ -24,7 +24,7 @@ Recommended to use with [my fork of iOS Hotwire Native starter app](https://gith
 - `viewport_meta_tag` - forbid zooming on mobile/native
 - use `data: { turbo_action: replace_if_native }` to submit authentication forms & forms in modals
 - `:mobile` request variant. `index.html+mobile.erb`
-- override link_to to not open internal links in in-app browser on native app
+- override `link_to` to not open internal links in in-app browser on native app
 - conditionally override page `<title>` for native apps
 
 #### CSS
@@ -33,11 +33,13 @@ Recommended to use with [my fork of iOS Hotwire Native starter app](https://gith
 #### Bridge Components
 - install Hotwire Native Bridge (works with Importmaps and Node)
 - add default bridge components (`Form`, `Menu`, `Button`)
-- add `Nav` (UIMenu) bridge component
+- add `Nav` (UIMenu) component
+- add `Review Prompt` component
 - `bridge_form_with` - easily apply Bridge `Form` component
 
 #### Path Configuration
 - `path_configuration_controller` for `ios` and `android`
+- Tabs controller - re-route native tabs
 
 ## Development
 
@@ -54,7 +56,7 @@ Make a release to rubygems:
 # 2. zip the gem
 gem build hotwire_native_rails.gemspec
 # 3. push the zip to rubygems
-gem push hotwire_native_rails-0.3.3.gem
+gem push hotwire_native_rails-0.4.0.gem
 ```
 
 - [Github source](https://github.com/yshmarov/hotwire_native_rails)

data/lib/generators/hotwire_native/hotwire_native_generator.rb

@@ -39,6 +39,7 @@ class HotwireNativeGenerator < Rails::Generators::Base
     copy_file "javascript/controllers/bridge/form_controller.js", "app/javascript/controllers/bridge/form_controller.js"
     copy_file "javascript/controllers/bridge/overflow_menu_controller.js", "app/javascript/controllers/bridge/overflow_menu_controller.js"
     copy_file "javascript/controllers/bridge/nav_controller.js", "app/javascript/controllers/bridge/nav_controller.js"
+    copy_file "javascript/controllers/bridge/review_prompt_controller.js", "app/javascript/controllers/bridge/review_prompt_controller.js"
 
     run "bin/importmap pin @hotwired/stimulus @hotwired/hotwire-native-bridge" if importmaps?
     run "yarn add @hotwired/stimulus @hotwired/hotwire-native-bridge" if node?

data/lib/generators/hotwire_native/templates/controllers/hotwire_native/v1/ios/path_configurations_controller.rb

@@ -23,7 +23,8 @@ class HotwireNative::V1::Ios::PathConfigurationsController < ActionController::B
               "^/users/edit$"
             ],
             "properties": {
-              "context": "default"
+              "context": "default",
+              "pull_to_refresh_enabled": true
             }
           },
           {

data/lib/generators/hotwire_native/templates/helpers/hotwire_native_helper.rb

@@ -52,6 +52,10 @@ module HotwireNativeHelper
     end
   end
 
+  # CAUTION: the submit button has to have a title
+  # BAD: f.submit
+  # GOOD: f.submit "Save"
+  # GOOD: f.submit t('.save')
   def bridge_form_with(*, **options, &)
     options[:html] ||= {}
     options[:html][:data] ||= {}

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/button_controller.js

@@ -3,6 +3,27 @@ import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
 // https://native.hotwired.dev/ios/bridge-components
 // Docs:
 // https://blog.corsego.com/hotwire-native-bridge-button
+
+// Example:
+// Text button:
+// <a href="/posts" data-controller="bridge--button" data-bridge-title="Posts">
+//   Posts
+// </a>
+// 
+// Icon button:
+// <a href="/posts" data-controller="bridge--button" data-bridge-title="Posts" data-bridge-ios-image="play.circle">
+//   Posts
+// </a>
+// 
+// Icon button on the left (right by default):
+// <a href="/posts" data-controller="bridge--button" data-bridge-title="Posts" data-bridge-ios-image="play.circle" data-bridge-side="left">
+//   Posts
+// </a>
+// 
+// Text with a click event:
+// <div data-controller="bridge--button" data-bridge-title="Search" data-bridge-ios-image="magnifyingglass.circle" class="hidden" data-action="click->dialog#open">
+//   Search
+// </div>
 export default class extends BridgeComponent {
   static component = "button"
 
@@ -13,7 +34,7 @@ export default class extends BridgeComponent {
     const title = element.bridgeAttribute("title")
     const image = element.bridgeAttribute("ios-image")
     const side = element.bridgeAttribute("side") || "right"
-    this.send("connect", {title, image, side}, () => {
+    this.send("connect", { title, image, side }, () => {
       this.element.click()
     })
   }

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/form_controller.js

@@ -4,9 +4,11 @@ import { BridgeElement } from "@hotwired/hotwire-native-bridge"
 // https://github.com/hotwired/hotwire-native-demo/blob/main/public/javascript/controllers/bridge/form_controller.js
 // Docs:
 // https://blog.corsego.com/hotwire-native-form-component
+
+// Replace form_with with bridge_form_with
 export default class extends BridgeComponent {
   static component = "form"
-  static targets = [ "submit" ]
+  static targets = ["submit"]
 
   connect() {
     super.connect()

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/menu_controller.js

@@ -1,12 +1,16 @@
 import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
 import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+// aka Action Sheet
+// open a menu by clicking an HTML element
+// Question - can I have multiple menus on the same page?
+
 // Source:
 // https://github.com/hotwired/hotwire-native-demo/blob/main/public/javascript/controllers/bridge/menu_controller.js
 // Docs:
 // https://blog.corsego.com/hotwire-native-bridge-menu-component
 export default class extends BridgeComponent {
   static component = "menu"
-  static targets = [ "title", "item" ]
+  static targets = ["title", "item"]
 
   show(event) {
     if (this.enabled) {
@@ -19,7 +23,7 @@ export default class extends BridgeComponent {
     const title = new BridgeElement(this.titleTarget).title
     const items = this.makeMenuItems(this.itemTargets)
 
-    this.send("display", { title, items }, message =>  {
+    this.send("display", { title, items }, message => {
       const selectedIndex = message.data.selectedIndex
       const selectedItem = new BridgeElement(this.itemTargets[selectedIndex])
 

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/nav_controller.js

@@ -1,7 +1,14 @@
 import { BridgeComponent, BridgeElement } from "@hotwired/hotwire-native-bridge"
+// aka UIMenu
 
 // Docs:
 // https://blog.corsego.com/hotwire-native-ui-menu-dropdown
+
+// Example:
+// <%= tag.div data: { controller: 'bridge--nav', bridge_side: 'left', bridge_image: 'person.circle' } do %>
+//   <%= link_to "Users", users_path, data: { bridge__nav_target: 'item', bridge_image: 'person.circle' } %>
+//   <%= link_to "Tasks", tasks_path, data: { bridge__nav_target: 'item', bridge_image: 'checklist' } %>
+// <% end %>
 export default class extends BridgeComponent {
   static component = "nav"
   static targets = ["item"]

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/overflow_menu_controller.js

@@ -1,9 +1,23 @@
 import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+// aka Action Sheet
+// open a menu by clicking a Native button
+
 // Source:
 // https://github.com/hotwired/hotwire-native-demo/blob/main/public/javascript/controllers/bridge/overflow_menu_controller.js
 // Docs:
 // https://blog.corsego.com/hotwire-native-bridge-menu-component
 
+// Example:
+// <div data-controller="bridge--menu" class="hotwire-native:hidden">
+//   <button
+//     data-controller="bridge--overflow-menu"
+//     data-action="click->bridge--menu#show click->menu#show">
+//     Open Menu
+//   </button>
+//   <p data-bridge--menu-target="title">Select an option</p>
+//   <%= link_to "Edit", edit_task_path(@task), data: {"bridge--menu-target": "item"} %>
+//   <%= button_to "Destroy", @task, method: :delete, data: {"bridge--menu-target": "item", turbo_confirm: "Are you sure?" } %>
+// </div>
 export default class extends BridgeComponent {
   static component = "overflow-menu"
 

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/review_prompt_controller.js

@@ -1,6 +1,9 @@
 import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
 // Docs:
 // https://blog.corsego.com/hotwire-native-leave-a-review-bridge-component
+
+// Example:
+// <meta data-controller="bridge--review-prompt" />
 export default class extends BridgeComponent {
   static component = "review-prompt"
 

data/lib/hotwire_native_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module HotwireNativeRails
-  VERSION = "0.3.5"
+  VERSION = "0.4.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_native_rails
 version: !ruby/object:Gem::Version
-  version: 0.3.5
+  version: 0.4.1
 platform: ruby
 authors:
 - Yaro Shm