phlex_ui 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 96bee30ae4924b1a8300df9b2ca4322877078a064d4b1326f9c4c43d184461f1
-  data.tar.gz: b3739fab746cef0e2ec75b736b4b92c4ae14daa6071ff4afc07972ecc4db5b42
+  metadata.gz: 2e94d694e97786f20a88cc28497e9fbda569229a4b60688745e1faef5bb6a794
+  data.tar.gz: 3c06ca211012a28ad741ec3d66db56c7ecde93e637d07b24e2da5f987c759eef
 SHA512:
-  metadata.gz: aafde25ef57c8477bcfd5cb6f8c3610b9a806bf386fd7947e03943ad665edd893c2a8946e08eb22a97904092ff19813ab66e7b079c5a60ddf0ac5d5faceb31eb
-  data.tar.gz: a60fe88f9f889563d5ddbc8c8e2f316ecfbf74916547ba370e8bb37a4d6ba33866fc750898325fb83cedeb4b05629b35275c1856dbec4c9aaef00d036010017d
+  metadata.gz: e45505146ef033bef4bc13725b1abc4dd450ca5f9b0a76981a109570044f50c68523dc4cd48aa69b0e9731e6ce5a7497788a08341012e2ea583ae9eab1fdae2e
+  data.tar.gz: 197a7019398397c7cff18c24c5e0a5822f183d98ef9ac6f7852f0ccb782f70653941ac3eda20eeb40015303d34b6291a171b9d1777ac68d8ce32a8e2774cff72

data/lib/phlex_ui/accordion/content.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion::Content < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { 
+                    accordion_target: "content" 
+                }, 
+                class: 'overflow-y-hidden',
+                style: 'height: 0px;'
+            }
+        end
+    end
+end

data/lib/phlex_ui/accordion/default_content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion::DefaultContent < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: 'pb-4 pt-0 text-sm'
+            }
+        end
+    end
+end

data/lib/phlex_ui/accordion/default_trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion::DefaultTrigger < Base
+        def template(&)
+            div(class: "flex items-center justify-between w-full") do
+                p(&)
+                render ::PhlexUI::Accordion::Icon.new
+            end
+        end
+
+        def default_attrs
+            {
+                data: { action: "click->accordion#toggle" },
+                class: 'w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline'
+            }
+        end
+    end
+end

data/lib/phlex_ui/accordion/icon.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion::Icon < Base
+        def template(&block)
+            span(**attrs) do
+                if block
+                    block.call
+                else
+                    icon
+                end
+            end
+        end
+
+        def icon
+            svg(
+                xmlns: "http://www.w3.org/2000/svg",
+                viewbox: "0 0 20 20",
+                fill: "currentColor",
+                class: "w-4 h-4"
+            ) do |s|
+                s.path(
+                    fill_rule: "evenodd",
+                    d:
+                    "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                    clip_rule: "evenodd"
+                )
+            end
+        end
+
+        def default_attrs
+            {
+                class: 'opacity-50',
+                data: { accordion_target: "icon" },
+            }
+        end
+    end
+end

data/lib/phlex_ui/accordion/item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion::Item < Base
+        def initialize(open: false, rotate_icon: 180, **attrs)
+            @open = open
+            @rotate_icon = rotate_icon
+            super(**attrs)
+        end
+
+        def template(&)
+            div(**attrs, &)
+        end
+
+        private
+
+        def default_attrs
+            {
+                data: { 
+                    controller: "accordion",
+                    accordion_open_value: @open,
+                    accordion_rotate_icon_value: @rotate_icon
+                },
+                class: 'border-b'
+            }
+        end
+    end
+end

data/lib/phlex_ui/accordion/trigger.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion::Trigger < Base
+        def template(&)
+            button(**attrs, &)
+        end
+
+        def default_attrs
+            {
+                data: { action: "click->accordion#toggle" },
+                class: 'w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline'
+            }
+        end
+    end
+end

data/lib/phlex_ui/accordion.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Accordion < Base
+        def template(&)
+            div(**attrs, &)
+        end
+
+        def add_item(title, content, open: false)
+            render Accordion::Item.new(open: open) do
+                render PhlexUI::Accordion::Trigger.new do
+                    render PhlexUI::Accordion::DefaultTrigger.new { title }
+                end
+                render PhlexUI::Accordion::Content.new do
+                    render PhlexUI::Accordion::DefaultContent.new { content }
+                end
+            end
+        end
+
+        private
+
+        def default_attrs
+            {
+                class: 'w-full'
+            }
+        end
+    end
+end

data/lib/phlex_ui/attribute_merger.rb

@@ -0,0 +1,75 @@
+module PhlexUI
+    class AttributeMerger
+        attr_reader :default_attrs, :user_attrs
+        OVERRIDE_KEY = '!'.freeze
+
+        def initialize(default_attrs, user_attrs)
+            @default_attrs = flatten_hash(default_attrs)
+            @user_attrs = flatten_hash(user_attrs)
+        end
+
+        def call
+            merged_attrs = merge_hashes(default_attrs, non_override_attrs)
+            mix(merged_attrs, override_attrs)
+        end
+
+        private
+
+        # @return [Hash]
+        def mix(*args)
+            args.each_with_object({}) do |object, result|
+                result.merge!(object) do |_key, old, new|
+                    case new
+                    when Hash
+                        old.is_a?(Hash) ? mix(old, new) : new
+                    when Array
+                        old.is_a?(Array) ? (old + new) : new
+                    when String
+                        old.is_a?(String) ? "#{old} #{new}" : new
+                    else
+                        new
+                    end
+                end
+
+                result.transform_keys! do |key|
+                    key.end_with?("!") ? key.name.chop.to_sym : key
+                end
+            end
+        end
+
+        def override_attrs
+            user_attrs.select do |key, value|
+                key.to_s.include?(OVERRIDE_KEY)
+            end
+        end
+
+        def non_override_attrs
+            user_attrs.reject do |key, value|
+                key.to_s.include?(OVERRIDE_KEY)
+            end
+        end
+
+        def flatten_hash(hash, parent_key = '', result_hash = {})
+            hash.each do |key, value|
+                new_key = parent_key.empty? ? key : "#{parent_key}_#{key}".to_sym
+                if value.is_a? Hash
+                flatten_hash(value, new_key, result_hash)
+                else
+                result_hash[new_key] = value
+                end
+            end
+            result_hash
+        end
+
+        def merge_hashes(hash1, hash2)
+            flat_hash1 = flatten_hash(hash1)
+            flat_hash2 = flatten_hash(hash2)
+
+            merged = flat_hash1.merge(flat_hash2) do |key, oldval, newval|
+                "#{oldval} #{newval}"
+            end
+
+            merged
+        end
+    end
+end

data/lib/phlex_ui/badge.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Badge < Base
+        def initialize(variant: :primary, size: :md, **kwargs)
+            @variant = variant
+            @size = size
+            @kwargs = kwargs
+        end
+
+        def template(&)
+            case @variant
+            when :primary
+                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", size_classes, @kwargs[:class]), &)
+            when :secondary
+                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", size_classes, @kwargs[:class]), &)
+            when :outline
+                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground", size_classes, @kwargs[:class]), &)
+            when :destructive
+                div(class: tokens("inline-flex items-center rounded-md border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", size_classes, @kwargs[:class]), &)
+            when :slate
+                div(class: tokens("inline-flex items-center rounded-md bg-slate-100 font-medium text-slate-600 bg-slate-100/80 dark:bg-slate-400/10 dark:text-slate-400", size_classes, @kwargs[:class]), &)
+            when :gray
+                div(class: tokens("inline-flex items-center rounded-md bg-gray-100 font-medium text-gray-600 bg-gray-100/80 dark:bg-gray-400/10 dark:text-gray-400", size_classes, @kwargs[:class]), &)
+            when :zinc
+                div(class: tokens("inline-flex items-center rounded-md bg-zinc-100 font-medium text-zinc-600 bg-zinc-100/80 dark:bg-zinc-400/10 dark:text-zinc-400", size_classes, @kwargs[:class]), &)
+            when :neutral
+                div(class: tokens("inline-flex items-center rounded-md bg-neutral-100 font-medium text-neutral-600 bg-neutral-100/80 dark:bg-neutral-400/10 dark:text-neutral-400", size_classes, @kwargs[:class]), &)
+            when :stone
+                div(class: tokens("inline-flex items-center rounded-md bg-stone-100 font-medium text-stone-600 bg-stone-100/80 dark:bg-stone-400/10 dark:text-stone-400", size_classes, @kwargs[:class]), &)
+            when :red
+                div(class: tokens("inline-flex items-center rounded-md bg-red-100 font-medium text-red-600 bg-red-100/80 dark:bg-red-400/10 dark:text-red-400", size_classes, @kwargs[:class]), &)
+            when :orange
+                div(class: tokens("inline-flex items-center rounded-md bg-orange-100 font-medium text-orange-600 bg-orange-100/80 dark:bg-orange-400/10 dark:text-orange-400", size_classes, @kwargs[:class]), &)
+            when :amber
+                div(class: tokens("inline-flex items-center rounded-md bg-amber-100 font-medium text-amber-600 bg-amber-100/80 dark:bg-amber-400/10 dark:text-amber-400", size_classes, @kwargs[:class]), &)
+            when :yellow
+                div(class: tokens("inline-flex items-center rounded-md bg-yellow-100 font-medium text-yellow-600 bg-yellow-100/80 dark:bg-yellow-400/10 dark:text-yellow-400", size_classes, @kwargs[:class]), &)
+            when :lime
+                div(class: tokens("inline-flex items-center rounded-md bg-lime-100 font-medium text-lime-600 bg-lime-100/80 dark:bg-lime-400/10 dark:text-lime-400", size_classes, @kwargs[:class]), &)
+            when :green
+                div(class: tokens("inline-flex items-center rounded-md bg-green-100 font-medium text-green-600 bg-green-100/80 dark:bg-green-400/10 dark:text-green-400", size_classes, @kwargs[:class]), &)
+            when :emerald
+                div(class: tokens("inline-flex items-center rounded-md bg-emerald-100 font-medium text-emerald-600 bg-emerald-100/80 dark:bg-emerald-400/10 dark:text-emerald-400", size_classes, @kwargs[:class]), &)
+            when :teal
+                div(class: tokens("inline-flex items-center rounded-md bg-teal-100 font-medium text-teal-600 bg-teal-100/80 dark:bg-teal-400/10 dark:text-teal-400", size_classes, @kwargs[:class]), &)
+            when :cyan
+                div(class: tokens("inline-flex items-center rounded-md bg-cyan-100 font-medium text-cyan-600 bg-cyan-100/80 dark:bg-cyan-400/10 dark:text-cyan-400", size_classes, @kwargs[:class]), &)
+            when :sky
+                div(class: tokens("inline-flex items-center rounded-md bg-sky-100 font-medium text-sky-600 bg-sky-100/80 dark:bg-sky-400/10 dark:text-sky-400", size_classes, @kwargs[:class]), &)
+            when :blue
+                div(class: tokens("inline-flex items-center rounded-md bg-blue-100 font-medium text-blue-600 bg-blue-100/80 dark:bg-blue-400/10 dark:text-blue-400", size_classes, @kwargs[:class]), &)
+            when :indigo
+                div(class: tokens("inline-flex items-center rounded-md bg-indigo-100 font-medium text-indigo-600 bg-indigo-100/80 dark:bg-indigo-400/10 dark:text-indigo-400", size_classes, @kwargs[:class]), &)
+            when :violet
+                div(class: tokens("inline-flex items-center rounded-md bg-violet-100 font-medium text-violet-600 bg-violet-100/80 dark:bg-violet-400/10 dark:text-violet-400", size_classes, @kwargs[:class]), &)
+            when :purple
+                div(class: tokens("inline-flex items-center rounded-md bg-purple-100 font-medium text-purple-600 bg-purple-100/80 dark:bg-purple-400/10 dark:text-purple-400", size_classes, @kwargs[:class]), &)
+            when :fuchsia
+                div(class: tokens("inline-flex items-center rounded-md bg-fuchsia-100 font-medium text-fuchsia-600 bg-fuchsia-100/80 dark:bg-fuchsia-400/10 dark:text-fuchsia-400", size_classes, @kwargs[:class]), &)
+            when :pink
+                div(class: tokens("inline-flex items-center rounded-md bg-pink-100 font-medium text-pink-600 bg-pink-100/80 dark:bg-pink-400/10 dark:text-pink-400", size_classes, @kwargs[:class]), &)
+            when :rose
+                div(class: tokens("inline-flex items-center rounded-md bg-rose-100 font-medium text-rose-600 bg-rose-100/80 dark:bg-rose-400/10 dark:text-rose-400", size_classes, @kwargs[:class]), &)
+            end
+        end
+
+        def size_classes
+            case @size
+            when :sm then "px-1.5 py-0.5 text-xs"
+            when :md then "px-2 py-1 text-xs"
+            when :lg then "px-3 py-1 text-sm"
+            end
+        end
+    end
+end

data/lib/phlex_ui/base.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module PhlexUI
+    class Base < Phlex::HTML
+        attr_reader :attrs
+
+        def initialize(**user_attrs)
+            @attrs = PhlexUI::AttributeMerger.new(default_attrs, user_attrs).call
+        end
+        
+        if defined?(Rails) && Rails.env.development?
+            def before_template
+                comment { "Before #{self.class.name}" }
+                super
+            end
+        end
+
+        private
+
+        def default_attrs
+            {}
+        end
+    end
+end

data/lib/phlex_ui/button.rb

@@ -1,27 +1,73 @@
 module PhlexUI
-    class Button < Phlex::HTML
-        def template(&)
-            button(class: klass, &)
+    class Button < Base
+        def initialize(**kwargs)
+            @variant = kwargs[:variant]&.to_sym || :primary
+            @size = kwargs[:size]
+            @kwargs = kwargs
+            @kwargs[:type] ||= "button"
         end
 
-        private
-
-        def klass
-            'bg-violet-500 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded'
+        def template(&)
+            case @variant
+            when :primary
+                button(
+                    **@kwargs, 
+                    class: tokens(
+                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary-600 dark:bg-primary-500 text-white shadow hover:bg-primary-700 dark:hover:bg-primary-600 h-9",
+                        -> { @size == :icon } => "h-9 w-9 justify-center",
+                        -> { @size.nil? } => "px-4 py-2",
+                        -> { @kwargs[:class] } => @kwargs[:class]
+                    ), 
+                    &)
+            when :link
+                button(
+                    **@kwargs, 
+                    class: tokens(
+                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-600 dark:text-primary-400 underline-offset-4 hover:underline h-9 px-4 py-2",
+                        -> { @kwargs[:class] } => @kwargs[:class]
+                    ),
+                    &)
+            when :secondary
+                button(
+                    **@kwargs,
+                    class: tokens(
+                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary-100 dark:bg-accent text-primary-600 dark:text-white shadow-sm hover:bg-primary-200 hover:text-primary-700 dark:hover:bg-opacity-10 h-9",
+                        -> { @size == :icon } => "h-9 w-9 justify-center",
+                        -> { @size.nil? } => "px-4 py-2",
+                        -> { @kwargs[:class] } => @kwargs[:class]
+                    ),
+                    &)
+            when :destructive
+                button(
+                    **@kwargs,
+                    class: tokens(
+                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive-600 hover:bg-destructive-700 dark:bg-destructive-500 dark:hover:bg-destructive-600 text-white shadow-sm h-9",
+                        -> { @size == :icon } => "h-9 w-9 justify-center",
+                        -> { @size.nil? } => "px-4 py-2",
+                        -> { @kwargs[:class] } => @kwargs[:class]
+                    ),
+                    &)
+            when :outline
+                button(
+                    **@kwargs,
+                    class: tokens(
+                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border bg-transparent shadow-sm hover:bg-accent h-9",
+                        -> { @size == :icon } => "h-9 w-9 justify-center",
+                        -> { @size.nil? } => "px-4 py-2",
+                        -> { @kwargs[:class] } => @kwargs[:class]
+                    ),
+                    &)
+            when :ghost
+                button(
+                    **@kwargs,
+                    class: tokens(
+                        "whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent h-9",
+                        -> { @size == :icon } => "h-9 w-9 justify-center",
+                        -> { @size.nil? } => "px-4 py-2",
+                        -> { @kwargs[:class] } => @kwargs[:class]
+                    ),
+                    &)
+            end
         end
-
-        # def style
-        #     {
-        #         'background-color': 'violet',
-        #         'color': 'white',
-        #         'font-weight': 'bold',
-        #         'padding': '0.5rem 1rem',
-        #         'border-radius': '0.25rem',
-        #     }
-        # end
-
-        # def compile_style
-        #     style.map { |k, v| "#{k}: #{v};" }.join(' ')
-        # end
     end
 end

data/lib/phlex_ui.rb

@@ -1,21 +1,13 @@
 require 'phlex'
 require 'zeitwerk'
-require 'rails'
 
 loader = Zeitwerk::Loader.for_gem
 loader.inflector.inflect(
   "phlex_ui" => "PhlexUI",
 )
-loader.ignore("#{__dir__}/tasks")
 loader.setup # ready!
 
 module PhlexUI
-    # If Rails is defined, load the rake tasks
-    class Railtie < Rails::Railtie
-        rake_tasks do
-            load File.join(Gem.loaded_specs['phlex_ui'].full_gem_path, 'tasks', 'install.rake')
-        end
-    end if defined?(Rails)
 end
 
 loader.eager_load

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: phlex_ui
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - George Kettle
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-06 00:00:00.000000000 Z
+date: 2023-11-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -38,40 +38,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.6'
-- !ruby/object:Gem::Dependency
-  name: rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '8'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '8'
-- !ruby/object:Gem::Dependency
-  name: rake
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '12.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '12.0'
 description: PhlexUI is a UI Component Library for Ruby developers. Built on top of
   the Phlex Framework.
 email: george.kettle@icloud.com
@@ -80,8 +46,17 @@ extensions: []
 extra_rdoc_files: []
 files:
 - lib/phlex_ui.rb
+- lib/phlex_ui/accordion.rb
+- lib/phlex_ui/accordion/content.rb
+- lib/phlex_ui/accordion/default_content.rb
+- lib/phlex_ui/accordion/default_trigger.rb
+- lib/phlex_ui/accordion/icon.rb
+- lib/phlex_ui/accordion/item.rb
+- lib/phlex_ui/accordion/trigger.rb
+- lib/phlex_ui/attribute_merger.rb
+- lib/phlex_ui/badge.rb
+- lib/phlex_ui/base.rb
 - lib/phlex_ui/button.rb
-- tasks/install.rake
 homepage: https://rubygems.org/gems/phlex_ui
 licenses:
 - MIT

data/tasks/install.rake

@@ -1,22 +0,0 @@
-require 'json'
-
-namespace :phlex_ui do
-  desc "Update tailwind.config.js to include phlex_ui gem path"
-  task install: :environment do
-    dev_path = Gem.loaded_specs['phlex_ui'].full_gem_path + '/**/*.rb'
-    prod_path = '/app/vendor/bundle/ruby/*/gems/phlex_ui-*/**/*.rb'
-
-    puts "PhlexUI Installation steps:\n\n"
-
-    puts "1. Add these 2 paths to your tailwind.config.js file:\n\n"
-    print "module.exports = "
-    puts JSON.pretty_generate({
-      "content" => [
-        "// Other paths",
-        dev_path,
-        prod_path
-      ]
-    })
-  end
-end
-