dialtone_rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 79eb721d3fcb6710c389165928dbd3a79c663955fb80e94820e95844f503f5c0
+  data.tar.gz: ab6ad1cd95a740cb5d9a46eff88e0306a820ca9102a43375f9efbebf36d724ea
+SHA512:
+  metadata.gz: fafd6fb010948ed5e6f192a06a8ad905a852ae1ebae44241f76843fc501e50ba5a5a77f97ec31eed391ae121cc8652bc0962dae3d16051ead21fc4798e569885
+  data.tar.gz: 4926f5f13543c29c316b432d67b8dcd354af1631a7e5ee6b69cd36e1f4a7fc2083ec5bd8312f1cb4593833a9083c65719687053428168e376e15f6c09eb76b49

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Harun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,171 @@
+# Dialtone Rails
+
+A small Rails wrapper around [intl-tel-input](https://github.com/jackocnr/intl-tel-input)
+for international phone fields with a country picker and number formatting.
+
+The Ruby gem is **`dialtone_rails`**; its companion npm package is **`dialtone-rails`**.
+
+```erb
+<%= form.intl_tel_field :phone_number,
+      initial_country: "ba",
+      class_names: {
+        input: "input",
+        container: "w-full",
+        country_selector: "rounded-lg shadow-lg",
+        search_input: "input"
+      } %>
+```
+
+## Installation
+
+Add to your Gemfile:
+
+```ruby
+gem "dialtone_rails"
+```
+
+Install the Ruby and JavaScript packages:
+
+```sh
+bundle install
+npm install dialtone-rails
+```
+
+The npm package includes intl-tel-input and its formatting utilities.
+
+Register the controller once with your existing Stimulus application:
+
+```js
+import DialtoneController from "dialtone-rails"
+
+application.register("dialtone", DialtoneController)
+```
+
+Import the stylesheet in your bundler-managed CSS **before your application's
+layer declarations**, including Tailwind's imports:
+
+```css
+@import "dialtone-rails/styles";
+```
+
+Your bundler must support the stylesheet's `.webp` flag images. Vite handles these
+automatically; with esbuild, add `--loader:.webp=file` to your build command.
+
+## Usage
+
+Use it with standard Rails forms and labels:
+
+```erb
+<%= form_with model: @contact do |form| %>
+  <%= form.label :phone_number %>
+  <%= form.intl_tel_field :phone_number,
+        initial_country: "ba",
+        required: true,
+        autocomplete: "tel",
+        class_names: { input: "input", container: "w-full" } %>
+  <%= form.submit %>
+<% end %>
+```
+
+## Configuration
+
+- `initial_country:` is an ISO two-letter country code. By default no country is
+  assumed. An existing international number determines its own country.
+- `class_names:` is the single place to specify classes, including the input's
+  classes. Slot names use snake_case and map directly to upstream `classNames`.
+- `options:` accepts JSON-compatible [upstream options](https://intl-tel-input.com/docs/options).
+  Use snake_case keys, including in nested hashes.
+- Remaining arguments are ordinary input attributes: `id:`, `value:`, `style:`,
+  `required:`, `disabled:`, `readonly:`, `autocomplete:`, `data:`, and `aria:`.
+
+For example:
+
+```erb
+<%= form.intl_tel_field :phone_number,
+      initial_country: "ba",
+      options: {
+        only_countries: %w[ba hr rs me],
+        separate_dial_code: false,
+        country_name_locale: "bs",
+        ui_translations: { search_placeholder: "Pretraži" }
+      } %>
+```
+
+`country_name_locale` translates country names. Use `ui_translations` for search
+text and other interface strings; unspecified strings remain in English.
+
+Options that require JavaScript callbacks or DOM elements cannot be passed from
+Ruby. Leave `hidden_inputs` and `load_utils` unset; submission and formatting are
+already provided.
+
+## Styling
+
+Omitting `class_names:` uses upstream's neutral appearance. There is no Tailwind,
+Bootstrap, or application-specific theme dependency.
+
+Add classes through `class_names:`. Available slots include `input`, `container`,
+`selected_country`, `country_selector`, `search_input`, and `country_list_item`.
+See the [full list of styling slots](https://intl-tel-input.com/docs/theming).
+
+Normal unlayered application CSS overrides the gem's layered CSS. With layered
+styles, declare the `intl-tel-input` layer before your application layers. If your
+build assembles CSS from several entrypoints, explicitly declare the order first:
+
+```css
+@layer intl-tel-input, theme, base, components, utilities;
+```
+
+CSS variables work too:
+
+```css
+.my-phone-field {
+  --iti-border-color: #ccc;
+  --iti-country-selector-bg: white;
+  --iti-hover-color: #f3f4f6;
+}
+```
+
+Apply that class with `class_names: { container: "my-phone-field" }`. Use upstream
+sizing options and CSS variables for widget positioning and input padding.
+
+## Submitted values
+
+The form submits the full international number under the original Rails field
+name, e.g. `contact[phone_number] = "+38761123456"`, while the input displays a
+readable, formatted number.
+
+- Empty fields submit an empty string; disabled fields are omitted.
+- Formatting is not validation. Incomplete numbers are not rejected, and values
+  that cannot be formatted are preserved. Validate phone numbers in your Rails model.
+- `strict_mode` restricts typed characters by default. Disable it with
+  `options: { strict_mode: false }`.
+- Use distinct names or indexed `fields_for` names for multiple inputs. Repeated
+  names such as `phones[]` are unsupported.
+- Submitted numbers use E.164 format; extensions require separate handling.
+
+Native forms, Turbo submissions, form resets, and fields added through Turbo
+Frames or Streams are supported. Back navigation preserves the number and country.
+
+Without JavaScript, the helper remains a normal `type="tel"` input and submits its
+raw value. If you serialize forms manually, use `FormData`; reading `.value` reads
+the displayed value, not necessarily the full international number.
+
+## Run the demo
+
+From this repository:
+
+```sh
+bundle install
+npm install
+npm run build:demo
+bundle exec rackup demo/config.ru --port 3001
+```
+
+Open <http://localhost:3001>. Try six phone fields with different formatting,
+country, and language settings. Each field's info icon shows its configuration;
+the reference below the form explains all options. Submit to see the values
+received by Rails.
+
+## License
+
+MIT licensed. intl-tel-input and Stimulus retain their own licenses.

data/lib/dialtone_rails/form_builder.rb

@@ -0,0 +1,18 @@
+module DialtoneRails
+  module FormBuilder
+    def intl_tel_field(method, initial_country: "", class_names: {}, options: {}, **html_options)
+      classes = class_names.transform_keys { |key| key.to_s.camelize(:lower) }
+      configuration = options.deep_transform_keys { |key| key.to_s.camelize(:lower) }
+        .merge("initialCountry" => initial_country.to_s.downcase, "classNames" => classes)
+
+      data = (html_options[:data] || {}).merge("dialtone-target" => "input")
+      input = telephone_field(method, html_options.merge(class: classes["input"], data: data))
+
+      @template.tag.div(input, data: {
+        controller: "dialtone",
+        action: "turbo:before-cache@document->dialtone#disconnect turbo:render@document->dialtone#connect",
+        "dialtone-options-value" => configuration
+      })
+    end
+  end
+end

data/lib/dialtone_rails/version.rb

@@ -0,0 +1,3 @@
+module DialtoneRails
+  VERSION = "0.1.0"
+end

data/lib/dialtone_rails.rb

@@ -0,0 +1,13 @@
+require "rails/railtie"
+require_relative "dialtone_rails/version"
+require_relative "dialtone_rails/form_builder"
+
+module DialtoneRails
+  class Railtie < Rails::Railtie
+    initializer "dialtone_rails.form_builder" do
+      ActiveSupport.on_load(:action_view) do
+        ActionView::Helpers::FormBuilder.include DialtoneRails::FormBuilder
+      end
+    end
+  end
+end

metadata

@@ -0,0 +1,84 @@
+--- !ruby/object:Gem::Specification
+name: dialtone_rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Harun
+bindir: bin
+cert_chain: []
+date: 2026-09-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: actionview
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '8.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '8.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '8.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '8.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9'
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- lib/dialtone_rails.rb
+- lib/dialtone_rails/form_builder.rb
+- lib/dialtone_rails/version.rb
+homepage: https://github.com/sabljak/dialtone_rails
+licenses:
+- MIT
+metadata:
+  source_code_uri: https://github.com/sabljak/dialtone_rails
+  bug_tracker_uri: https://github.com/sabljak/dialtone_rails/issues
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.2'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.2
+specification_version: 4
+summary: Rails form helper for intl-tel-input
+test_files: []