relay_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 810abe5f7ea49a12bd4c1adfb1ae77895648ac78a7c9ec462980d60adf2364a9
+  data.tar.gz: b8f3b86b3079cfa79265d5d70bd9e05bd3a6dee1a25b40021a5c63243a71fa9f
+SHA512:
+  metadata.gz: bb3fee20245f10d29113a71e4b3ad94b0e24ebf3a31363f49172b9b74b68bffa8daf08e5d56febfa0c7d14742892c8864a03555f1d4a0ea72e9cce03c5124836
+  data.tar.gz: 5156fc61323221af3512d46c4c10113fa13b36cbee5eba7abb184b8f690e74544192138334f5d92b67f67b9e928a9888e727074fcc792acd657de82a9d0a0279

data/Rakefile

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]
+
+namespace :build do
+  desc "Build JavaScript"
+  task :js do
+    sh "npm run build:js"
+  end
+
+  desc "Build CSS"
+  task :css do
+    sh "npm run build:css"
+  end
+
+  desc "Build all assets"
+  task :assets => [:js, :css]
+end
+
+namespace :watch do
+  desc "Watch JavaScript files and rebuild on changes"
+  task :js do
+    sh "npm run watch:js"
+  end
+
+  desc "Watch CSS files and rebuild on changes"
+  task :css do
+    sh "npm run watch:css"
+  end
+
+  desc "Watch all assets and rebuild on changes"
+  task :assets do
+    puts "Starting asset watchers for both JS and CSS..."
+    puts "Press Ctrl-C to stop watching"
+    
+    # Run both watchers in parallel using a basic approach that works across platforms
+    trap("INT") { exit }
+    
+    # Fork processes for each watcher
+    pid1 = Process.fork { sh "npm run watch:js" }
+    pid2 = Process.fork { sh "npm run watch:css" }
+    
+    # Wait for any process to exit
+    Process.wait(pid1)
+    Process.wait(pid2)
+  rescue Interrupt
+    puts "\nShutting down watchers..."
+  end
+end
+
+task :build => ["build:assets"]
+task :watch => ["watch:assets"]
+task :default => ["build"]
+
+CLEAN.include("vendor")

data/app/assets/javascripts/relay_ui/index.js

@@ -0,0 +1,5 @@
+import ToggleController from './controllers/toggle_controller'
+import { Application } from '@hotwired/stimulus'
+
+const application = Application.start();
+application.register("toggle", ToggleController);

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

@@ -0,0 +1 @@
+@import 'tailwindcss';

data/app/components/badges/base.rb

@@ -0,0 +1,5 @@
+class RelayUi::Badges::Base < RelayUi::Base
+  def view_template
+    span(class: "px-3 py-0.5 text-xs rounded-full #{variant_classes}") { yield }
+  end
+end

data/app/components/badges/blue.rb

@@ -0,0 +1,5 @@
+class RelayUi::Badges::Blue < RelayUi::Badges::Base
+  private
+  
+  def variant_classes = "bg-blue-100 text-blue-700"
+end

data/app/components/badges/gray.rb

@@ -0,0 +1,5 @@
+class RelayUi::Badges::Gray < RelayUi::Badges::Base
+  private
+  
+  def variant_classes = "bg-gray-100 text-gray-700"
+end

data/app/components/badges/green.rb

@@ -0,0 +1,5 @@
+class RelayUi::Badges::Green < RelayUi::Badges::Base
+  private
+  
+  def variant_classes = "bg-green-100 text-green-700"
+end

data/app/components/badges/purple.rb

@@ -0,0 +1,5 @@
+class RelayUi::Badges::Purple < RelayUi::Badges::Base
+  private
+  
+  def variant_classes = "bg-purple-100 text-purple-700"
+end

data/app/components/badges/red.rb

@@ -0,0 +1,5 @@
+class RelayUi::Badges::Red < RelayUi::Badges::Base
+  private
+  
+  def variant_classes = "bg-red-100 text-red-700"
+end

data/app/components/badges/yellow.rb

@@ -0,0 +1,5 @@
+class RelayUi::Badges::Yellow < RelayUi::Badges::Base
+  private
+  
+  def variant_classes = "bg-yellow-100 text-yellow-700"
+end

data/app/components/base.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class RelayUi::Base < Phlex::HTML
+  include Components
+  include Phlex::Rails::Helpers::Routes
+
+  register_value_helper :request
+
+  if Rails.env.development?
+    def before_template
+      comment { "Before #{self.class.name}" }
+      super
+    end
+  end
+end

data/app/components/buttons/base.rb

@@ -0,0 +1,30 @@
+class RelayUi::Buttons::Base < RelayUi::Base
+  def initialize(data: {}, href: "#", icon: nil)
+    @data = data
+    @href = href
+    @icon = icon
+  end
+
+  def view_template
+    div do
+      a(href: @href, class: classes, data: @data) do
+        div(class: "flex flex-row items-center gap-2") do
+          if @icon
+            div(class: "size-4 my-1") do
+              render RelayUi::Icon.new(@icon)
+            end
+          end
+          span { yield } if block_given?
+        end
+      end
+    end
+  end
+
+  private
+
+  def classes
+    "#{base_classes} #{variant_classes}"
+  end
+
+  def base_classes = "inline-block px-3 py-1 hover:cursor-pointer rounded transition duration-200 ease-in-out"
+end

data/app/components/buttons/destructive.rb

@@ -0,0 +1,5 @@
+class RelayUi::Buttons::Destructive < RelayUi::Buttons::Base
+  private
+
+  def variant_classes = "bg-red-700 hover:bg-red-900 text-white"
+end

data/app/components/buttons/ghost.rb

@@ -0,0 +1,5 @@
+class RelayUi::Buttons::Ghost < RelayUi::Buttons::Base
+  private
+
+  def variant_classes = "hover:bg-zinc-100"
+end

data/app/components/buttons/link.rb

@@ -0,0 +1,9 @@
+class RelayUi::Buttons::Link < RelayUi::Base
+  def view_template
+    div do
+      button(class: "hover:cursor-pointer hover:underline") do
+        span { yield }
+      end
+    end
+  end
+end

data/app/components/buttons/outline.rb

@@ -0,0 +1,5 @@
+class RelayUi::Buttons::Outline < RelayUi::Buttons::Base
+  private
+
+  def variant_classes = "border rounded border-zinc-700 hover:border-zinc-900 text-zinc-700 hover:text-zinc-900 hover:bg-zinc-100"
+end

data/app/components/buttons/primary.rb

@@ -0,0 +1,5 @@
+class RelayUi::Buttons::Primary < RelayUi::Buttons::Base
+  private
+
+  def variant_classes = "bg-blue-700 hover:bg-blue-900 text-white"
+end

data/app/components/buttons/secondary.rb

@@ -0,0 +1,5 @@
+class RelayUi::Buttons::Secondary < RelayUi::Buttons::Base
+  private
+
+  def variant_classes = "bg-zinc-700 hover:bg-zinc-900 text-white"
+end

data/app/components/code_block.rb

@@ -0,0 +1,13 @@
+class RelayUi::CodeBlock < RelayUi::Base
+  def initialize(language: "ruby")
+    @language = language
+  end
+
+  def view_template
+    pre do
+      code(class: "language-#{@language} rounded-lg") do
+        yield
+      end
+    end
+  end
+end

data/app/components/headings.rb

@@ -0,0 +1,37 @@
+module RelayUi::Headings
+  class H1 < RelayUi::Base
+    def view_template
+      h1(class: "text-5xl font-bold") { yield }
+    end
+  end
+
+  class H2 < RelayUi::Base
+    def view_template
+      h2(class: "text-4xl font-bold") { yield }
+    end
+  end
+
+  class H3 < RelayUi::Base
+    def view_template
+      h3(class: "text-3xl font-bold") { yield }
+    end
+  end
+
+  class H4 < RelayUi::Base
+    def view_template
+      h4(class: "text-2xl font-bold") { yield }
+    end
+  end
+
+  class H5 < RelayUi::Base
+    def view_template
+      h5(class: "text-xl font-bold") { yield }
+    end
+  end
+
+  class H6 < RelayUi::Base
+    def view_template
+      h6(class: "text-lg font-bold") { yield }
+    end
+  end
+end

data/app/components/icon.rb

@@ -0,0 +1,9 @@
+class RelayUi::Icon < RelayUi::Base
+  def initialize(icon)
+    @icon = icon
+  end
+
+  def view_template
+    raw TablerIconsRuby.render(@icon)
+  end
+end

data/app/components/lists/base.rb

@@ -0,0 +1,13 @@
+module RelayUi::Lists
+  class Base < RelayUi::Base
+    def view_template
+      ul(class: list_classes) do
+        yield
+      end
+    end
+
+    def item
+      li(class: "ml-5") { yield }
+    end
+  end
+end

data/app/components/lists/ordered.rb

@@ -0,0 +1,5 @@
+module RelayUi::Lists
+  class Ordered < Base
+    def list_classes = "list-decimal"
+  end
+end

data/app/components/lists/unordered.rb

@@ -0,0 +1,5 @@
+module RelayUi::Lists
+  class Unordered < Base
+    def list_classes = "list-disc"
+  end
+end

data/app/components/navigation.rb

@@ -0,0 +1,49 @@
+class RelayUi::Navigation < RelayUi::Base
+  def view_template
+    div(class: "flex flex-col sticky top-0 max-h-screen overflow-y-auto mx-10 py-10") do
+      yield
+    end
+  end
+
+  def section_heading
+    p(class: "pt-8 pb-4 mt-6 text-sm font-semibold uppercase text-zinc-400 border-t border-zinc-200") do
+      yield
+    end
+  end
+
+  def icon_link(href:, icon:)
+    if request.path == href
+      state_classes = "border-blue-700 text-zinc-700 **:[svg]:stroke-blue-700"
+    else
+      state_classes = "border-transparent text-zinc-400 hover:border-zinc-200 hover:text-zinc-700 **:[svg]:stroke-zinc-300 hover:**:[svg]:stroke-zinc-700"
+    end
+
+    a(href:, class: "inline-flex items-center gap-2 py-1 #{state_classes}") do
+      div(class: "size-4") do
+        render RelayUi::Icon.new(icon)
+      end
+      span { yield }
+    end
+  end
+  
+  def text_link(href)
+    if request.path == href
+      state_classes = "border-blue-700 text-zinc-700"
+    else
+      state_classes = "border-transparent text-zinc-400 hover:border-zinc-200 hover:text-zinc-700"
+    end
+
+    a(href:, class: "text-zinc-400 px-5 py-1 border-l-3 #{state_classes}") do
+      span { yield }
+    end
+  end
+
+  def coming_soon
+    div(class: "flex flex-row items-center") do
+      span(class: "text-zinc-400 px-5 py-1 border-l-3 border-transparent") do
+        yield
+      end
+      render RelayUi::Badges::Gray.new { "Coming Soon" }
+    end
+  end
+end

data/app/components/slideout.rb

@@ -0,0 +1,20 @@
+class RelayUi::Slideout < RelayUi::Base
+  include Phlex::Rails::Helpers::TurboFrameTag
+  
+  def view_template
+    turbo_frame_tag "slideout" do
+      div(class: "absolute inset-0 z-50", data: {controller: "slideout"}) do
+        a(href: "#", class: "cursor-default", data: { action: "slideout#hide" }) do
+          div(id: "modal-curtain", class: "w-screen h-screen bg-black transition-opacity opacity-75")
+        end
+        div(class: "right-0 fixed inset-y-0 flex max-w-1/2 pointer-events-none") do
+          div(class: "w-screen pointer-events-auto", data: { slideout_target: "slideout" }) do
+            div(class: "w-full h-full bg-white shadow") do
+              yield
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/text.rb

@@ -0,0 +1,19 @@
+module RelayUi::Text
+  class Large < RelayUi::Base
+    def view_template
+      p(class: "text-lg text-zinc-700") { yield }
+    end
+  end
+
+  class Medium < RelayUi::Base
+    def view_template
+      p(class: "text-base text-zinc-700") { yield }
+    end
+  end
+
+  class Small < RelayUi::Base
+    def view_template
+      p(class: "text-sm text-zinc-700") { yield }
+    end
+  end
+end

data/lib/relay_ui/engine.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RelayUi
+  class Engine < ::Rails::Engine
+    isolate_namespace RelayUi
+
+    initializer "relay_ui.assets.precompile" do |app|
+      app.config.assets.paths << root.join("vendor", "assets", "stylesheets")
+      app.config.assets.paths << root.join("vendor", "assets", "javascripts")
+    end
+
+    initializer "relay_ui.autoload.components" do
+      Rails.autoloaders.main.push_dir(
+        "#{Gem::Specification.find_by_name('relay_ui').gem_dir}/app/components",
+        namespace: RelayUi
+      )
+    end
+  end
+end

data/lib/relay_ui/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module RelayUi
+  VERSION = "0.1.0"
+end

data/lib/relay_ui.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require_relative "relay_ui/version"
+require_relative "relay_ui/engine"
+
+module RelayUi
+  class Error < StandardError; end
+  # Your code goes here...
+end

data/package.json

@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "@hotwired/stimulus": "^3.0.0",
+    "@tailwindcss/cli": "^4.0.9",
+    "tailwindcss": "^4.0.9"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0"
+  },
+  "scripts": {
+    "build:js": "esbuild app/assets/javascripts/relay_ui/index.js --bundle --outfile=vendor/javascript/relay_ui/dist/relay_ui.js",
+    "build:css": "npx @tailwindcss/cli -i ./app/assets/stylesheets/relay_ui/application.css -o ./vendor/assets/stylesheets/relay_ui/relay_ui.css",
+    "watch:js": "esbuild app/assets/javascripts/relay_ui/index.js --bundle --outfile=vendor/javascript/relay_ui/dist/relay_ui.js --watch",
+    "watch:css": "npx @tailwindcss/cli -i ./app/assets/stylesheets/relay_ui/application.css -o ./vendor/assets/stylesheets/relay_ui/relay_ui.css --watch"
+  }
+}

data/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./app/components/**/*.rb",
+    "./app/assets/javascripts/relay_ui/**/*.js"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

metadata

@@ -0,0 +1,163 @@
+--- !ruby/object:Gem::Specification
+name: relay_ui
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- logicrelay
+bindir: bin
+cert_chain: []
+date: 2025-03-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: phlex
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+- !ruby/object:Gem::Dependency
+  name: tabler_icons_ruby
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.11.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.11.0
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: guard
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: guard-livereload
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: base64
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 'RelayUI is an opinionated UI kit for Rails applications, leveraging
+  Phlex and TailwindCSS to provide a robust and cohesive design system, particularly
+  suited for B2B backend interfaces.
+
+  '
+email:
+- hello@logicrelay.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Rakefile
+- app/assets/javascripts/relay_ui/index.js
+- app/assets/stylesheets/relay_ui/application.css
+- app/components/badges/base.rb
+- app/components/badges/blue.rb
+- app/components/badges/gray.rb
+- app/components/badges/green.rb
+- app/components/badges/purple.rb
+- app/components/badges/red.rb
+- app/components/badges/yellow.rb
+- app/components/base.rb
+- app/components/buttons/base.rb
+- app/components/buttons/destructive.rb
+- app/components/buttons/ghost.rb
+- app/components/buttons/link.rb
+- app/components/buttons/outline.rb
+- app/components/buttons/primary.rb
+- app/components/buttons/secondary.rb
+- app/components/code_block.rb
+- app/components/headings.rb
+- app/components/icon.rb
+- app/components/lists/base.rb
+- app/components/lists/ordered.rb
+- app/components/lists/unordered.rb
+- app/components/navigation.rb
+- app/components/slideout.rb
+- app/components/text.rb
+- lib/relay_ui.rb
+- lib/relay_ui/engine.rb
+- lib/relay_ui/version.rb
+- package.json
+- tailwind.config.js
+homepage: https://www.relayui.com
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://www.relayui.com
+  source_code_uri: https://github.com/logicrelay/relay_ui
+  changelog_uri: https://github.com/logicrelay/relay_ui/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.2
+specification_version: 4
+summary: A delightfully opinionated UI kit for Rails apps.
+test_files: []