From 11b83206eba05f089077f8c3a6940414b19d1034 Mon Sep 17 00:00:00 2001
From: Brian Durand <bbdurand@gmail.com>
Date: Sun, 29 Sep 2024 14:48:43 -0700
Subject: [PATCH 1/6] add support for dark mode

---
 CHANGELOG.md                   |  6 ++++++
 README.md                      |  6 ++++++
 VERSION                        |  2 +-
 app/application.css            | 17 +++++++++--------
 app/application_vars.css.erb   | 31 +++++++++++++++++++++++++++++++
 app/layout.css                 |  8 +++++---
 app/layout.html.erb            |  1 +
 app/layout_vars.css.erb        | 19 +++++++++++++++++++
 config.ru                      |  2 +-
 lib/ultra_settings/rack_app.rb |  5 +++--
 lib/ultra_settings/web_view.rb | 21 ++++++++++++++++++---
 11 files changed, 100 insertions(+), 18 deletions(-)
 create mode 100644 app/application_vars.css.erb
 create mode 100644 app/layout_vars.css.erb

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c34828e..b902185 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.0.1
+
+### Added
+
+- Added option to specify the color scheme for the web UI when mounting the rack app to support dark mode.
+
 ## 2.0.0
 
 ### Fixed
diff --git a/README.md b/README.md
index 632c439..a14e7e6 100644
--- a/README.md
+++ b/README.md
@@ -346,6 +346,12 @@ mount Rack::Builder.new do
 end, at: "/ultra_settings"
 ```
 
+You can specify the color scheme by setting by providing the `color_scheme` option to the `UltraSettings::RackApp` class. The default color scheme is `:light`. You can also set the scheme to `:dark` or `:system`.
+
+```ruby
+UltraSettings::RackApp.new(color_scheme: :dark)
+```
+
 #### Embedding the Settings View in Admin Tools
 
 If you prefer to embed the settings view directly into your own admin tools or dashboard, you can use the `UltraSettings::ApplicationView` class to render the settings interface within your existing views:
diff --git a/VERSION b/VERSION
index 227cea2..38f77a6 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-2.0.0
+2.0.1
diff --git a/app/application.css b/app/application.css
index c5790b8..db11284 100644
--- a/app/application.css
+++ b/app/application.css
@@ -15,29 +15,30 @@
 
 .ultra-settings-table thead th {
   vertical-align: bottom;
-  border-bottom: 2px solid #dee2e6;
+  border-bottom: 2px solid var(--table-border-color);
+  background-color: var(--table-header-bg-color);
 }
 
 .ultra-settings-table td, .ultra-settings-table th {
   padding: 0.75rem;
   vertical-align: top;
-  border-top: 1px solid #dee2e6;
+  border-top: 1px solid var(--table-border-color);
 }
 
 .ultra-settings-table tbody tr:nth-of-type(odd) {
-  background-color: rgba(0, 0, 0, .03);
+  background-color: var(--alt-row-color);
 }
 
 .ultra-settings-table code {
   font-family: monospace;
   font-size: 0.9rem;
   display: inline;
-  color: darkred;
+  color: var(--code-color);
   font-weight: 600;
 }
 
 .ultra-settings-table em {
-  color: gray;
+  color: var(--em-color);
   font-style: italic;
   font-size: 0.9rem;
 }
@@ -49,13 +50,13 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
-  background-color: #fff;
+  color: var(--form-control-color);
+  background-color: var(--form-control-bg-color);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--form-control-border-color);
   border-radius: .25rem;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   -webkit-appearance: none;
diff --git a/app/application_vars.css.erb b/app/application_vars.css.erb
new file mode 100644
index 0000000..66e6151
--- /dev/null
+++ b/app/application_vars.css.erb
@@ -0,0 +1,31 @@
+<% unless color_scheme == :dark %>
+  .ultra-settings-configuration {
+    --table-header-bg-color: #fff;
+    --table-border-color: #dee2e6;
+    --alt-row-color: rgba(0, 0, 0, .05);
+    --form-control-color: #495057;
+    --form-control-bg-color: #fff;
+    --form-control-border-color: #ced4da;
+    --code-color: darkred;
+    --em-color: gray;
+  }
+<% end %>
+
+<% if color_scheme == :system %>
+  @media (prefers-color-scheme: dark) {
+<% end %>
+<% if color_scheme == :system || color_scheme == :dark %>
+  .ultra-settings-configuration {
+    --table-header-bg-color: #333;
+    --table-border-color: #555;
+    --alt-row-color: rgba(0, 0, 0, .30);
+    --form-control-color: #eee;
+    --form-control-bg-color: #666;
+    --form-control-border-color: #555;
+    --code-color: pink;
+    --em-color: #999;
+  }
+<% end %>
+<% if color_scheme == :system %>
+  }
+<% end %>
diff --git a/app/layout.css b/app/layout.css
index 5035f86..a56a8e3 100644
--- a/app/layout.css
+++ b/app/layout.css
@@ -1,12 +1,14 @@
-* {box-sizing:border-box;}
+* {
+  box-sizing:border-box;
+}
 
 body {
   font-family: sans-serif;
   font-size: 1rem;
   line-height: 1.5;
   text-align: left;
-  color: #212529;
-  background-color: #ffffff;
+  color: var(--text-color);
+  background-color: var(--background-color);
   margin: 0;
   padding: 0;
 }
diff --git a/app/layout.html.erb b/app/layout.html.erb
index 4a38e90..b65d952 100644
--- a/app/layout.html.erb
+++ b/app/layout.html.erb
@@ -5,6 +5,7 @@
     <title>Application Configuration</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="format-detection" content="telephone=no email=no date=no address=no">
     <style type="text/css">
       <%= @layout_css %>
       <%= css %>
diff --git a/app/layout_vars.css.erb b/app/layout_vars.css.erb
new file mode 100644
index 0000000..4b494e7
--- /dev/null
+++ b/app/layout_vars.css.erb
@@ -0,0 +1,19 @@
+<% unless color_scheme != :dark %>
+  :root {
+    --text-color: #212529;
+    --background-color: #ffffff;
+  }
+<% end %>
+
+<% if color_scheme == :system %>
+  @media (prefers-color-scheme: dark) {
+<% end %>
+<% if color_scheme == :system || color_scheme == :dark %>
+  :root {
+    --text-color: #fff;
+    --background-color: #333;
+  }
+<% end %>
+<% if color_scheme == :system %>
+  }
+<% end %>
diff --git a/config.ru b/config.ru
index 214eea9..90fbe11 100644
--- a/config.ru
+++ b/config.ru
@@ -26,4 +26,4 @@ UltraSettings.add(:other)
 UltraSettings.add(:namespace, "Test::NamespaceConfiguration")
 UltraSettings.add(:my_service, "MyServiceConfiguration")
 
-run UltraSettings::RackApp.new
+run UltraSettings::RackApp.new(color_scheme: ENV.fetch("COLOR_SCHEME", nil))
diff --git a/lib/ultra_settings/rack_app.rb b/lib/ultra_settings/rack_app.rb
index b809b6a..2e381be 100644
--- a/lib/ultra_settings/rack_app.rb
+++ b/lib/ultra_settings/rack_app.rb
@@ -5,8 +5,9 @@ module UltraSettings
   # No setting values are displayed, but you should still add some
   # sort of authentication if you want to use this in production.
   class RackApp
-    def initialize
+    def initialize(color_scheme: nil)
       @webview = nil
+      @color_scheme = color_scheme
     end
 
     def call(env)
@@ -19,7 +20,7 @@ def webview
       if ENV.fetch("RAILS_ENV", ENV.fetch("RACK_ENV", "development")) == "development"
         @webview = nil
       end
-      @webview ||= WebView.new
+      @webview ||= WebView.new(color_scheme: @color_scheme)
     end
   end
 end
diff --git a/lib/ultra_settings/web_view.rb b/lib/ultra_settings/web_view.rb
index 21cbee6..32f4f48 100644
--- a/lib/ultra_settings/web_view.rb
+++ b/lib/ultra_settings/web_view.rb
@@ -5,10 +5,13 @@ module UltraSettings
   class WebView
     attr_reader :css
 
-    def initialize
+    # @param color_scheme [Symbol] The color scheme to use in the UI. This can be `:light`,
+    #  `:dark`, or `:system`. The default is `:light`.
+    def initialize(color_scheme: :light)
+      color_scheme = (color_scheme || :light).to_sym
       @layout_template = erb_template("layout.html.erb")
-      @layout_css = read_app_file("layout.css")
-      @css = read_app_file("application.css")
+      @layout_css = layout_css(color_scheme)
+      @css = application_css(color_scheme)
     end
 
     def render_settings
@@ -32,5 +35,17 @@ def read_app_file(path)
     def app_dir
       File.expand_path(File.join("..", "..", "app"), __dir__)
     end
+
+    def layout_css(color_scheme)
+      vars = erb_template("layout_vars.css.erb").result(binding)
+      css = read_app_file("layout.css")
+      "#{vars}\n#{css}"
+    end
+
+    def application_css(color_scheme)
+      vars = erb_template("application_vars.css.erb").result(binding)
+      css = read_app_file("application.css")
+      "#{vars}\n#{css}"
+    end
   end
 end

From 37e7ffc5f165dbf26675a8550bc45acafefaaf68 Mon Sep 17 00:00:00 2001
From: Brian Durand <bbdurand@gmail.com>
Date: Sun, 29 Sep 2024 17:26:24 -0700
Subject: [PATCH 2/6] bump version

---
 CHANGELOG.md |  2 +-
 README.md    | 18 ++++++++++++++++++
 VERSION      |  2 +-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b902185..01d7a97 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## 2.0.1
+## 2.1.0
 
 ### Added
 
diff --git a/README.md b/README.md
index a14e7e6..fee70da 100644
--- a/README.md
+++ b/README.md
@@ -452,6 +452,24 @@ Open a pull request on [GitHub](https://github.com/bdurand/ultra_settings).
 
 Please use the [standardrb](https://github.com/testdouble/standard) syntax and lint your code with `standardrb --fix` before submitting.
 
+You can start a local rack server to test the web UI by running
+
+```bash
+bundle exec rackup
+```
+
+You can test with some setting set by setting environment variable used in the test configuration.
+
+```bash
+MY_SERVICE_HOST=host.example.com MY_SERVICE_TOKEN=secret bundle exec rspec
+```
+
+You can test dark mode by setting the `COLOR_SCHEME` environment variable.
+
+```bash
+COLOR_SCHEME=dark bundle exec rackup
+```
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
diff --git a/VERSION b/VERSION
index 38f77a6..7ec1d6d 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-2.0.1
+2.1.0

From 582396e1e32fab19878cfa958baffc41cabb4dcd Mon Sep 17 00:00:00 2001
From: Brian Durand <bbdurand@gmail.com>
Date: Sun, 29 Sep 2024 21:03:06 -0700
Subject: [PATCH 3/6] add no translate attribute

---
 app/configuration.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/configuration.html.erb b/app/configuration.html.erb
index 99035a1..c336a47 100644
--- a/app/configuration.html.erb
+++ b/app/configuration.html.erb
@@ -20,7 +20,7 @@
         <th>Notes</th>
       </tr>
     </thead>
-    <tbody>
+    <tbody translate="no">
       <% configuration.class.fields.each do |field| %>
         <% source = configuration.__source__(field.name) %>
         <tr>

From 9affc436a202efb422406516a9d824678a8c4f0d Mon Sep 17 00:00:00 2001
From: Brian Durand <bbdurand@gmail.com>
Date: Mon, 30 Sep 2024 11:44:15 -0700
Subject: [PATCH 4/6] whitespace

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index fee70da..eee9af1 100644
--- a/README.md
+++ b/README.md
@@ -427,7 +427,6 @@ end
 
 This approach keeps your tests clean and readable while allowing for flexible configuration management during testing.
 
-
 ## Installation
 
 Add this line to your application's Gemfile:

From 1834f77744f1a81c0f6b828d6af971a80f4d35cb Mon Sep 17 00:00:00 2001
From: Brian Durand <bbdurand@gmail.com>
Date: Mon, 30 Sep 2024 12:48:09 -0700
Subject: [PATCH 5/6] fix time coercion from numeric string

---
 CHANGELOG.md                        |  4 +++
 lib/ultra_settings/coerce.rb        | 33 +++++++++++++-------
 lib/ultra_settings/configuration.rb |  2 +-
 spec/ultra_settings/coerce_spec.rb  | 48 +++++++++++++++++++++++++++++
 4 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01d7a97..69210be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added option to specify the color scheme for the web UI when mounting the rack app to support dark mode.
 
+### Fixed
+
+- Times stored as strings representing the seconds since the epoch are now correctly parsed as Time objects.
+
 ## 2.0.0
 
 ### Fixed
diff --git a/lib/ultra_settings/coerce.rb b/lib/ultra_settings/coerce.rb
index 5aeacb3..eb41660 100644
--- a/lib/ultra_settings/coerce.rb
+++ b/lib/ultra_settings/coerce.rb
@@ -18,6 +18,8 @@ class Coerce
     ]).freeze
     # rubocop:enable Lint/BooleanSymbol
 
+    NUMERIC_REGEX = /\A-?\d+(?:\.\d+)?\z/
+
     class << self
       # Cast a value to a specific type.
       #
@@ -33,13 +35,19 @@ def coerce_value(value, type)
         when :float
           value.is_a?(Float) ? value : value.to_s&.to_f
         when :boolean
-          Coerce.boolean(value)
+          boolean(value)
         when :datetime
-          Coerce.time(value)
+          time(value)
         when :array
           Array(value).map(&:to_s)
         when :symbol
           value.to_s.to_sym
+        when :rollout
+          if numeric?(value)
+            value.to_f
+          else
+            boolean(value)
+          end
         else
           value.to_s
         end
@@ -50,13 +58,9 @@ def coerce_value(value, type)
       # @param value [Object]
       # @return [Boolean]
       def boolean(value)
-        if value == false
-          false
-        elsif blank?(value)
-          nil
-        else
-          !FALSE_VALUES.include?(value)
-        end
+        return nil if blank?(value)
+
+        !FALSE_VALUES.include?(value)
       end
 
       # Cast a value to a Time object.
@@ -66,8 +70,9 @@ def boolean(value)
       def time(value)
         value = nil if value.nil? || value.to_s.empty?
         return nil if value.nil?
-        time = if value.is_a?(Numeric)
-          Time.at(value)
+
+        time = if numeric?(value)
+          Time.at(value.to_f)
         elsif value.respond_to?(:to_time)
           value.to_time
         else
@@ -79,9 +84,15 @@ def time(value)
         time
       end
 
+      # @return [Boolean] true if the value is a numeric type or a string representing a number.
+      def numeric?(value)
+        value.is_a?(Numeric) || (value.is_a?(String) && value.to_s.match?(NUMERIC_REGEX))
+      end
+
       # @return [Boolean] true if the value is nil or empty.
       def blank?(value)
         return true if value.nil?
+
         if value.respond_to?(:empty?)
           value.empty?
         else
diff --git a/lib/ultra_settings/configuration.rb b/lib/ultra_settings/configuration.rb
index 6bd118d..c5eece3 100644
--- a/lib/ultra_settings/configuration.rb
+++ b/lib/ultra_settings/configuration.rb
@@ -64,7 +64,7 @@ def field(name, type: :string, description: nil, default: nil, default_if: nil,
           secret: secret
         )
 
-        class_eval <<-RUBY, __FILE__, __LINE__ + 1 # rubocop:disable Security/Eval
+        class_eval <<~RUBY, __FILE__, __LINE__ + 1 # rubocop:disable Security/Eval
           def #{name}
             __get_value__(#{name.inspect})
           end
diff --git a/spec/ultra_settings/coerce_spec.rb b/spec/ultra_settings/coerce_spec.rb
index e5343e1..105d447 100644
--- a/spec/ultra_settings/coerce_spec.rb
+++ b/spec/ultra_settings/coerce_spec.rb
@@ -60,4 +60,52 @@
       expect(UltraSettings::Coerce.time("")).to eq nil
     end
   end
+
+  describe "numeric?" do
+    it "should return true for numbers" do
+      expect(UltraSettings::Coerce.numeric?(1)).to eq true
+      expect(UltraSettings::Coerce.numeric?(1.1)).to eq true
+      expect(UltraSettings::Coerce.numeric?("1")).to eq true
+      expect(UltraSettings::Coerce.numeric?("1.1")).to eq true
+    end
+
+    it "should return false for non-numbers" do
+      expect(UltraSettings::Coerce.numeric?("test")).to eq false
+      expect(UltraSettings::Coerce.numeric?(true)).to eq false
+      expect(UltraSettings::Coerce.numeric?(false)).to eq false
+      expect(UltraSettings::Coerce.numeric?(nil)).to eq false
+    end
+  end
+
+  describe "blank?" do
+    it "should return true for nil" do
+      value = nil
+      expect(UltraSettings::Coerce.blank?(value)).to eq true
+      expect(UltraSettings::Coerce.present?(value)).to eq false
+    end
+
+    it "should return true for empty strings" do
+      value = ""
+      expect(UltraSettings::Coerce.blank?(value)).to eq true
+      expect(UltraSettings::Coerce.present?(value)).to eq false
+    end
+
+    it "should return true for empty iterables" do
+      value = []
+      expect(UltraSettings::Coerce.blank?(value)).to eq true
+      expect(UltraSettings::Coerce.present?(value)).to eq false
+    end
+
+    it "should return false for false" do
+      value = false
+      expect(UltraSettings::Coerce.blank?(value)).to eq false
+      expect(UltraSettings::Coerce.present?(value)).to eq true
+    end
+
+    it "should return false for other values" do
+      value = "test"
+      expect(UltraSettings::Coerce.blank?(value)).to eq false
+      expect(UltraSettings::Coerce.present?(value)).to eq true
+    end
+  end
 end

From f03847d35c1e2c5cecb6cffb72bd4c5a760f2923 Mon Sep 17 00:00:00 2001
From: Brian Durand <bbdurand@gmail.com>
Date: Mon, 30 Sep 2024 18:55:40 -0700
Subject: [PATCH 6/6] update README

---
 README.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/README.md b/README.md
index eee9af1..f562b93 100644
--- a/README.md
+++ b/README.md
@@ -427,6 +427,26 @@ end
 
 This approach keeps your tests clean and readable while allowing for flexible configuration management during testing.
 
+### Rollout percentages
+
+A common usage of configuration is to control rollout of new features by specifying a percentage value and then testing if a random number is less than it. If you implement this pattern in your configuration, then you should use something like the [consistent_random](https://github.com/bdurand/consistent_random) gem to ensure you are generating consistent values without your units of work.
+
+```ruby
+class MyServiceConfiguration < UltraSettings::Configuration
+  field :use_http2_percentage,
+    type: :float,
+    default: 0.0,
+    description: "Rollout percentage for using the new HTTP/2 driver"
+
+  # Using ConsistentRandom#rand instead of Kernel#rand to ensure that we
+  # get the same result within a request and don't oscillate back and forth
+  # every time we check if this is enabled.
+  def use_http2?
+    ConsistentRandom.new("MyServiceConfiguration.use_http2").rand < use_http2_percentage
+  end
+end
+```
+
 ## Installation
 
 Add this line to your application's Gemfile: