seth_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ecf9dc78341fd20cd1972f3d574dc5a46d2dfbcce52496b47a3f951586c5a414
+  data.tar.gz: 85765a8b3c624f305cd80c5fae709a745997fd35987a8f6e6ffb72ba926719e5
+SHA512:
+  metadata.gz: e39fe4fbb03ad2a5a960528b3b36eb228ef4399ef5734a25fd636223edef98d3cd64824e5b3c0a497ac31068f4b9c02c3e96df4870d7c13c98b49575e62b2770
+  data.tar.gz: cc7cd9f0609d10c2602882caa97d016dc2eefa7d57ee53ad43f0ba2d0b068d9bcdcdcdaf185f4868b4121414a8c34192857f0390471d6439edb4acd9dc868378

data/README.md

@@ -0,0 +1,24 @@
+# README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...

data/app/components/seth_ui/badge/badge.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module SethUI
+  class Badge < Base
+    SIZES = {
+      sm: "px-1.5 py-0.5 text-xs",
+      md: "px-2 py-1 text-xs",
+      lg: "px-3 py-1 text-sm"
+    }
+
+    COLORS = {
+      primary: "text-primary bg-primary/5 ring-primary/20",
+      secondary: "text-secondary bg-secondary/10 ring-secondary/20",
+      outline: "text-foreground bg-background ring-border",
+      destructive: "text-destructive bg-destructive/10 ring-destructive/20",
+      success: "text-success bg-success/10 ring-success/20",
+      warning: "text-warning bg-warning/10 ring-warning/20",
+      slate: "text-slate-500 bg-slate-500/10 ring-slate-500/20",
+      gray: "text-gray-500 bg-gray-500/10 ring-gray-500/20",
+      zinc: "text-zinc-500 bg-zinc-500/10 ring-zinc-500/20",
+      neutral: "text-neutral-500 bg-neutral-500/10 ring-neutral-500/20",
+      stone: "text-stone-500 bg-stone-500/10 ring-stone-500/20",
+      red: "text-red-500 bg-red-500/10 ring-red-500/20",
+      orange: "text-orange-500 bg-orange-500/10 ring-orange-500/20",
+      amber: "text-amber-500 bg-amber-500/10 ring-amber-500/20",
+      yellow: "text-yellow-500 bg-yellow-500/10 ring-yellow-500/20",
+      lime: "text-lime-500 bg-lime-500/10 ring-lime-500/20",
+      green: "text-green-500 bg-green-500/10 ring-green-500/20",
+      emerald: "text-emerald-500 bg-emerald-500/10 ring-emerald-500/20",
+      teal: "text-teal-500 bg-teal-500/10 ring-teal-500/20",
+      cyan: "text-cyan-500 bg-cyan-500/10 ring-cyan-500/20",
+      sky: "text-sky-500 bg-sky-500/10 ring-sky-500/20",
+      blue: "text-blue-500 bg-blue-500/10 ring-blue-500/20",
+      indigo: "text-indigo-500 bg-indigo-500/10 ring-indigo-500/20",
+      violet: "text-violet-500 bg-violet-500/10 ring-violet-500/20",
+      purple: "text-purple-500 bg-purple-500/10 ring-purple-500/20",
+      fuchsia: "text-fuchsia-500 bg-fuchsia-500/10 ring-fuchsia-500/20",
+      pink: "text-pink-500 bg-pink-500/10 ring-pink-500/20",
+      rose: "text-rose-500 bg-rose-500/10 ring-rose-500/20"
+    }
+
+    def initialize(variant: :primary, size: :md, **args)
+      @variant = variant
+      @size = size
+      super(**args)
+    end
+
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [ "inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant] ]
+      }
+    end
+  end
+end

data/app/components/seth_ui/base.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+module SethUI
+  class Base < Phlex::HTML
+    TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
+
+    attr_reader :attrs
+
+    def initialize(**user_attrs)
+      @attrs = mix(default_attrs, user_attrs)
+      @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class]
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+
+    if defined?(Rails) && Rails.env.development?
+      def before_template
+        comment { "Before #{self.class.name}" }
+        super
+      end
+    end
+  end
+end

data/app/components/seth_ui/button/button.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module SethUI
+  class Button < Base
+    BASE_CLASSES = [
+      "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+    ].freeze
+
+    def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs)
+      @type = type
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @icon = icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    private
+
+    def size_classes
+      if @icon
+        case @size
+        when :sm then "h-6 w-6"
+        when :md then "h-9 w-9"
+        when :lg then "h-10 w-10"
+        when :xl then "h-12 w-12"
+        end
+      else
+        case @size
+        when :sm then "px-3 py-1.5 h-8 text-xs"
+        when :md then "px-4 py-2 h-9 text-sm"
+        when :lg then "px-4 py-2 h-10 text-base"
+        when :xl then "px-6 py-3 h-12 text-base"
+        end
+      end
+    end
+
+    def primary_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "bg-primary text-primary-foreground shadow",
+        "hover:bg-primary/90"
+      ]
+    end
+
+    def link_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "text-primary underline-offset-4",
+        "hover:underline"
+      ]
+    end
+
+    def secondary_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "bg-secondary text-secondary-foreground",
+        "hover:bg-opacity-80"
+      ]
+    end
+
+    def destructive_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "bg-destructive text-white shadow-sm",
+        "[a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+      ]
+    end
+
+    def outline_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "border border-input bg-background shadow-sm",
+        "hover:bg-accent hover:text-accent-foreground"
+      ]
+    end
+
+    def ghost_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "hover:bg-accent hover:text-accent-foreground"
+      ]
+    end
+
+    def default_classes
+      case @variant
+      when :primary then primary_classes
+      when :link then link_classes
+      when :secondary then secondary_classes
+      when :destructive then destructive_classes
+      when :outline then outline_classes
+      when :ghost then ghost_classes
+      end
+    end
+
+    def default_attrs
+      { type: @type, class: default_classes }
+    end
+  end
+end

data/app/components/seth_ui/heading.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module SethUI
+  class Heading < Base
+    def initialize(level: nil, as: nil, size: nil, **attrs)
+      @level = level
+      @as = as
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag = determine_tag
+      public_send(tag, **attrs, &)
+    end
+
+    private
+
+    def determine_tag
+      return @as if @as
+      return "h#{@level}" if @level
+      "h1"
+    end
+
+    def default_attrs
+      {
+        class: class_names
+      }
+    end
+
+    def class_names
+      base_classes = "scroll-m-20 font-bold tracking-tight"
+      size_class = size_to_class[@size || level_to_size[@level] || "6"]
+      tag = determine_tag
+      "#{base_classes} #{size_class} #{component_specific_classes(tag)}"
+    end
+
+    def component_specific_classes(tag)
+      component_classes[tag] || ""
+    end
+
+    def component_classes
+      {
+        "h1" => "scroll-m-20 text-3xl font-bold leading-normal lg:leading-normal tracking-tight lg:text-4xl",
+        "h2" => "scroll-m-20 text-2xl font-semibold tracking-tight transition-colors first:mt-0 pb-4 border-b",
+        "h4" => "scroll-m-20 text-lg font-medium tracking-tight"
+      }
+    end
+
+    def size_to_class
+      {
+        "1" => "text-xs",
+        "2" => "text-sm",
+        "3" => "text-base",
+        "4" => "text-lg",
+        "5" => "text-xl",
+        "6" => "text-2xl",
+        "7" => "text-3xl",
+        "8" => "text-4xl",
+        "9" => "text-5xl"
+      }
+    end
+
+    def level_to_size
+      {
+        "1" => "6",
+        "2" => "5",
+        "3" => "4",
+        "4" => "3"
+      }
+    end
+  end
+end

data/app/components/seth_ui/link/Link.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module SethUI
+  class Link < Base
+    BASE_CLASSES = [
+      "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+    ].freeze
+
+    def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
+      @href = href
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @icon = icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(href: @href, **attrs, &)
+    end
+
+    private
+
+    def size_classes
+      if @icon
+        case @size
+        when :sm then "h-6 w-6"
+        when :md then "h-9 w-9"
+        when :lg then "h-10 w-10"
+        when :xl then "h-12 w-12"
+        end
+      else
+        case @size
+        when :sm then "px-3 py-1.5 h-8 text-xs"
+        when :md then "px-4 py-2 h-9 text-sm"
+        when :lg then "px-4 py-2 h-10 text-base"
+        when :xl then "px-6 py-3 h-12 text-base"
+        end
+      end
+    end
+
+    def primary_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "bg-primary text-primary-foreground shadow",
+        "hover:bg-primary/90"
+      ]
+    end
+
+    def link_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "text-primary underline-offset-4",
+        "hover:underline"
+      ]
+    end
+
+    def secondary_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "bg-secondary text-secondary-foreground",
+        "hover:bg-opacity-80"
+      ]
+    end
+
+    def destructive_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "bg-destructive text-white shadow-sm",
+        "[a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+      ]
+    end
+
+    def outline_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "border border-input bg-background shadow-sm",
+        "hover:bg-accent hover:text-accent-foreground"
+      ]
+    end
+
+    def ghost_classes
+      [
+        BASE_CLASSES,
+        size_classes,
+        "hover:bg-accent hover:text-accent-foreground"
+      ]
+    end
+
+    def default_classes
+      case @variant
+      when :primary then primary_classes
+      when :link then link_classes
+      when :secondary then secondary_classes
+      when :destructive then destructive_classes
+      when :outline then outline_classes
+      when :ghost then ghost_classes
+      end
+    end
+
+    def default_attrs
+      { type: "button", class: default_classes }
+    end
+  end
+end

data/app/components/seth_ui/theme_toggle/set_dark_mode.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module SethUI
+  class SetDarkMode < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    def default_attrs
+      {
+        class: "hidden dark:inline-block",
+        data: { controller: "ruby-ui--theme-toggle", action: "click->ruby-ui--theme-toggle#setLightTheme" }
+      }
+    end
+  end
+end

data/app/components/seth_ui/theme_toggle/set_light_mode.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module SethUI
+  class SetLightMode < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    def default_attrs
+      {
+        class: "dark:hidden",
+        data: { controller: "ruby-ui--theme-toggle", action: "click->ruby-ui--theme-toggle#setDarkTheme" }
+      }
+    end
+  end
+end

data/app/components/seth_ui/theme_toggle/theme_toggle.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module SethUI
+  class ThemeToggle < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+  end
+end

data/lib/seth_ui/version.rb

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

data/lib/seth_ui.rb

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

metadata

@@ -0,0 +1,78 @@
+--- !ruby/object:Gem::Specification
+name: seth_ui
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Seth Horsley
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: phlex
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: tailwind_merge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.12'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.12'
+description: SethUI is a UI Component Library for Ruby developers. Built on top of
+  the Phlex framework.
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- app/components/seth_ui/badge/badge.rb
+- app/components/seth_ui/base.rb
+- app/components/seth_ui/button/button.rb
+- app/components/seth_ui/heading.rb
+- app/components/seth_ui/link/Link.rb
+- app/components/seth_ui/theme_toggle/set_dark_mode.rb
+- app/components/seth_ui/theme_toggle/set_light_mode.rb
+- app/components/seth_ui/theme_toggle/theme_toggle.rb
+- lib/seth_ui.rb
+- lib/seth_ui/version.rb
+homepage: https://rubygems.org/gems/seth_ui
+licenses:
+- MIT
+metadata: {}
+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: 4.0.3
+specification_version: 4
+summary: SethUI is a UI Component Library built on Phlex.
+test_files: []