essence 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1d7dc966c3eb0029d7e5a915b1ff3fa14b1d183d5112dee299658c7629aa864
-  data.tar.gz: bcf8f18a90536197d479dcd8db22838e4813ec3c7460554535e27719099ab54a
+  metadata.gz: f50eba3dff7653e3e65f0f1e2dabb114782f0e0bf09cb64995118d86427b65b1
+  data.tar.gz: 21ce8e60063dc1930aa31eb4f3bb22be5045ffefd15fed55db823178dcc0d4da
 SHA512:
-  metadata.gz: 9af42a72f2769c7a7bf6493126bed5c945b7220f083500a2c0728dacc5b3307c1b2e1a9170b6a566e55c3ca8e7d5930207cfa561c364f6e11bc572a4057cf983
-  data.tar.gz: 0b792623dee2c44c9ed33e60f824957790f18b3d6c2836b37aecfe7bad0355a013b06423125a2ade99074a2f2af8ce224a655677667bf97cc4b947598e52107b
+  metadata.gz: 2a6738cd42f2504d0b96be1b711abba2a4788cc6a411e27f2d47d62716cf6051b3f3835e95a68d45103fc47da909f1d02c7fe2c1226fd661362c337d89df4e09
+  data.tar.gz: ac414b095aa27a017b2438bcf9da0bfd2e8f638c21525b1bf3f749573fbb0771f3250ae418151f5175ef9f8ff44d25ef172d56317e7cc640836e3c25eeddb07d

data/lib/essence/cli.rb

@@ -17,7 +17,7 @@ module Essence
       extend Dry::CLI::Registry
 
       # Constants
-      STIMULUS_CONTROLLERS_DIR = Pathname.new(::Essence.root_path).join("essence/stimulus")
+      STIMULUS_CONTROLLERS_DIR = Pathname.new(File.expand_path("stimulus", __dir__))
       STIMULUS_CONTROLLERS_DESTINATION_DIR = Pathname.new(File.expand_path(Dir.pwd)).join(::Essence.configuration.stimulus_controller_path)
 
       COMPONENTS_DIR = Pathname.new(File.expand_path("components", __dir__))

data/lib/essence/components/alert.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+class Essence::Alert < Essence::Essence
+  BASE = "bg-white border-l-2 flex flex-col p-3 sm:p-4 bg-gray-50/50"
+  TITLE_BASE = "text-gray-900 text-sm sm:text-base font-medium w-full"
+  DESCRIPTION_BASE = "text-gray-700 flex text-xs sm:text-sm w-full"
+  ICON_BASE = "inline-flex items-center justify-center w-fit size-7 rounded-xs"
+
+  KINDS = {
+    primary: "border-blue-500",
+    critical: "border-rose-600",
+    warning: "border-orange-400",
+    success: "border-emerald-500"
+  }
+
+  ICON_KINDS = {
+    primary: "bg-blue-500 text-white",
+    critical: "bg-rose-600 text-white",
+    warning: "bg-orange-400 text-gray-900",
+    success: "bg-emerald-500 text-white"
+  }
+
+  attr_reader :kind
+  attr_reader :attributes
+
+  def initialize(kind: :primary, **attributes)
+    @kind = kind
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, KINDS[kind], attributes[:class] ])
+  end
+
+  def view_template(&)
+    div(**attributes, &)
+  end
+
+  def title(**mattributes, &)
+    mattributes[:class] = merge_classes([ TITLE_BASE, mattributes[:class] ])
+    h5(**mattributes, &)
+  end
+
+  def description(**mattributes, &)
+    mattributes[:class] = merge_classes([ DESCRIPTION_BASE, mattributes[:class] ])
+    p(**mattributes, &)
+  end
+
+  def icon(**mattributes, &)
+    mattributes[:class] = merge_classes([ ICON_BASE, ICON_KINDS[kind], mattributes[:class] ])
+    div(**mattributes, &)
+  end
+end

data/lib/essence/components/checkbox.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Essence::Checkbox < Essence::Essence
+  BASE = "appearance-none size-3.5 cursor-pointer transition duration-100 rounded-xs border border-gray-300 focus:ring-0 checked:border-indigo-600 checked:bg-indigo-500 indeterminate:border-indigo-600 indeterminate:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+
+  attr_reader :attributes
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes(BASE, attributes[:class])
+  end
+
+  def view_template
+    attributes[:type] = :checkbox
+    input(**attributes)
+  end
+end

data/lib/essence/components/essence.rb

@@ -1,6 +1,4 @@
 class Essence::Essence < Phlex::HTML
-  extend Phlex::Kit
-
   TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
 
   attr_reader :attributes

data/lib/essence/components/heading.rb

@@ -0,0 +1,28 @@
+class Essence::Heading < Essence::Essence
+  ALLOWED_TAGS = [ :h1, :h2, :h3, :h4, :h5, :h6 ]
+  BASE = "font-medium text-gray-900 leading-normal"
+  SIZES = {
+    xs: "text-base lg:text-lg",
+    sm: "text-lg lg:text-xl",
+    md: "text-xl lg:text-2xl",
+    lg: "text-2xl lg:text-3xl",
+    xl: "text-3xl lg:text-4xl",
+    "2xl": "text-4xl lg:text-5xl",
+    "3xl": "text-5xl lg:text-6xl"
+  }
+
+  attr_reader :as
+  attr_reader :size
+  attr_reader :attributes
+
+  def initialize(as: :h2, size: :xs, **attributes)
+    super(**attributes)
+    @as = ALLOWED_TAGS.include?(as.to_sym) ? as.to_sym : :h1
+    @size = SIZES.keys.include?(size.to_sym) ? size.to_sym : :xs
+    @attributes[:class] = merge_classes([ BASE, SIZES[size], attributes[:class] ])
+  end
+
+  def view_template(&)
+    tag(as, **attributes, &)
+  end
+end

data/lib/essence/components/input.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Essence::Input < Essence::Essence
+  BASE = "flex px-4 h-10 md:h-12 rounded-sm border border-gray-200/80 focus:outline-none focus:ring-offset-2 focus-visible:ring-2"
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class] ])
+  end
+
+  def view_template(&)
+    input(**attributes)
+  end
+end

data/lib/essence/components/label.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class Essence::Label < Essence::Essence
+  BASE = "flex text-sm font-medium text-gray-700"
+  HELPER_BASE = "text-xs font-normal text-gray-500"
+  ASTERISK_BASE = "text-rose-500 font-normal mx-0.5"
+
+  attr_reader :attributes
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, attributes[:class], !!attributes[:for] ? "cursor-pointer" : "" ])
+  end
+
+  def view_template(&)
+    label(**@attributes, &)
+  end
+
+  def asterisk(**mattributes)
+    mattributes[:class] = merge_classes([ ASTERISK_BASE, mattributes[:class] ])
+    span(**mattributes) { "*" }
+  end
+
+  def helper_text(**mattributes, &)
+    mattributes[:class] = merge_classes([ HELPER_BASE, mattributes[:class] ])
+    p(**mattributes, &)
+  end
+end

data/lib/essence/components/metric.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class Essence::Metric < Essence::Essence
+  BASE = "p-4 border rounded-xs"
+  HELPER_BASE = "text-xs uppercase font-medium text-gray-500"
+  TITLE_BASE = "text-2xl text-gray-900 font-medium"
+  BODY_BASE = "text-sm text-gray-700"
+
+  KINDS = {
+    primary: "",
+    secondary: "border-transparent bg-gray-100"
+  }
+
+  attr_reader :kind
+
+  def initialize(kind: :primary, **attributes)
+    @kind = kind
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, KINDS[kind], @attributes[:class] ])
+  end
+
+  def view_template(&)
+    div(**attributes, &)
+  end
+
+  def title(**mattributes, &)
+    mattributes[:class] = merge_classes([ TITLE_BASE, mattributes[:class] ])
+    h5(**mattributes, &)
+  end
+
+  def helper(**mattributes, &)
+    mattributes[:class] = merge_classes([ HELPER_BASE, mattributes[:class] ])
+    p(**mattributes, &)
+  end
+
+  def body(**mattributes, &)
+    mattributes[:class] = merge_classes([ BODY_BASE, mattributes[:class] ])
+    p(**mattributes, &)
+  end
+end

data/lib/essence/components/separator.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Essence::Separator < Essence::Essence
+  BASE = "border-gray-200/50"
+
+  KINDS = {
+    horizontal: "border-t",
+    vertical: "border-l h-full"
+  }
+
+  attr_reader :kind
+  attr_reader :attributes
+
+  def initialize(kind: :horizontal, **attributes)
+    @kind = kind
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, KINDS[kind], @attributes[:class] ])
+  end
+
+  def view_template
+    element_tag(**attributes)
+  end
+
+  private
+
+  def element_tag(...)
+    kind.to_sym == :horizontal ? hr(...) : div(...)
+  end
+end

data/lib/essence/components/switch.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+# A switch component that can be toggled on and off.
+#
+# ==== Examples
+#
+#    render Switch.new
+#
+# ==== Documentation
+#
+# https://essence.primevise.com/components/switch
+#
+class Essence::Switch < Essence::Essence
+  BASE = "relative inline-flex h-6 w-12 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 focus:outline-hidden"
+  LEVER_BASE = "pointer-events-none inline-block size-5 translate-x-0 transform rounded-full bg-white ring-0 transition duration-200 ease-in-out"
+
+  ACTIVE_CLASSES = "bg-indigo-600"
+  INACTIVE_CLASSES = "bg-gray-200"
+
+  ACTIVE_LEVER_CLASSES = "translate-x-6"
+  INACTIVE_LEVER_CLASSES = "translate-x-0"
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class] ])
+  end
+
+  def view_template(&)
+    button(**attributes) do
+      span(class: "sr-only") { "Use setting" }
+      span(
+        aria_hidden: "true",
+        class: LEVER_BASE,
+        data: {
+          essence__switch_target: "lever"
+        },
+      )
+      yield if block_given?
+    end
+  end
+
+  def hidden_input(**mattributes)
+    mattributes[:type] = "hidden"
+    mattributes[:name] = mattributes[:name] || "enabled"
+    mattributes[:value] = mattributes[:value] || false
+    mattributes[:data] = { essence__switch_target: "input" }
+
+    input(**mattributes)
+  end
+
+  private
+
+  def default_attributes
+    {
+      type: "button",
+      role: "switch",
+      aria_checked: false,
+      data: {
+        controller: "essence--switch",
+        action: "click->essence--switch#toggle",
+        essence__switch_active_class: ACTIVE_CLASSES,
+        essence__switch_inactive_class: INACTIVE_CLASSES,
+        essence__switch_active_lever_class: ACTIVE_LEVER_CLASSES,
+        essence__switch_inactive_lever_class: INACTIVE_LEVER_CLASSES
+      }
+    }
+  end
+
+end

data/lib/essence/components/text.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Essence::Text < Essence::Essence
+  BASE = "text-base text-gray-500 dark:text-gray-400"
+  SIZES = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg"
+  }
+
+  attr_reader :size
+
+  def initialize(size: :md, **attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, SIZES[size], attributes[:class] ])
+  end
+
+  def view_template(&)
+    p(**attributes, &)
+  end
+end

data/lib/essence/configuration.rb

@@ -1,9 +1,11 @@
 module Essence
   class Configuration
+    attr_accessor :api_key
     attr_accessor :phlex_components_path
     attr_accessor :stimulus_controller_path
 
     def initialize
+      @api_key = nil
       @phlex_components_path = "app/components"
       @stimulus_controller_path = "app/javascript/controllers/essence"
     end

data/lib/essence/definitions.rb

@@ -0,0 +1,89 @@
+module Essence
+  DEFINITIONS = {
+    accordion: {
+      name: "Accordion",
+      class_name: "Essence::Accordion",
+      stimulus: false
+    },
+    alert: {
+      name: "Alert",
+      class_name: "Essence::Alert",
+      stimulus: false
+    },
+    avatar: {
+      name: "Avatar",
+      class_name: "Essence::Avatar",
+      stimulus: false
+    },
+    badge: {
+      name: "Badge",
+      class_name: "Essence::Badge",
+      stimulus: false
+    },
+    button: {
+      name: "Button",
+      class_name: "Essence::Button",
+      stimulus: false
+    },
+    checkbox: {
+      name: "Checkbox",
+      class_name: "Essence::Checkbox",
+      stimulus: false
+    },
+    heading: {
+      name: "Heading",
+      class_name: "Essence::Heading",
+      stimulus: false
+    },
+    label: {
+      name: "Label",
+      class_name: "Essence::Label",
+      stimulus: false
+    },
+    input: {
+      name: "Input",
+      class_name: "Essence::Input",
+      stimulus: false
+    },
+    link: {
+      name: "Link",
+      class_name: "Essence::Link",
+      stimulus: false
+    },
+    metric: {
+      name: "Metric",
+      class_name: "Essence::Metric",
+      stimulus: false
+    },
+    row: {
+      name: "Row",
+      class_name: "Essence::Row",
+      stimulus: false
+    },
+    separator: {
+      name: "Separator",
+      class_name: "Essence::Separator",
+      stimulus: false
+    },
+    skeleton: {
+      name: "Skeleton",
+      class_name: "Essence::Skeleton",
+      stimulus: false
+    },
+    switch: {
+      name: "Switch",
+      class_name: "Essence::Switch",
+      stimulus: true
+    },
+    tabs: {
+      name: "Tabs",
+      class_name: "Essence::Tabs",
+      stimulus: true
+    },
+    text: {
+      name: "Text",
+      class_name: "Essence::Text",
+      stimulus: false
+    }
+  }
+end

data/lib/essence/stimulus/switch_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "lever"];
+
+  static classes = ["active", "inactive", "activeLever", "inactiveLever"];
+
+  static values = {
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  connect() {
+    if (this.checkedValue) this.toggle();
+  }
+
+  toggle(event) {
+    this.element.ariaChecked =
+      this.element.ariaChecked == "true" ? false : true;
+
+    if (this.hasInputTarget)
+      this.inputTarget.value = this.element.ariaChecked == "true";
+
+    this.element.classList.toggle(...this.activeClasses);
+    this.element.classList.toggle(...this.inactiveClasses);
+
+    this.leverTarget.classList.toggle(...this.activeLeverClasses);
+    this.leverTarget.classList.toggle(...this.inactiveLeverClasses);
+  }
+}

data/lib/essence/version.rb

@@ -1,3 +1,3 @@
 module Essence
-  VERSION = "0.3.1"
+  VERSION = "0.4.0"
 end

data/lib/essence.rb

@@ -3,20 +3,9 @@
 require "tailwind_merge"
 
 require_relative "essence/configuration"
+require_relative "essence/definitions"
 
 module Essence
-  # Autoloading
-  # Components
-  autoload :Accordion, "essence/components/accordion"
-  autoload :Avatar, "essence/components/avatar"
-  autoload :Badge, "essence/components/badge"
-  autoload :Button, "essence/components/button"
-  # autoload :Essence, "essence/components/essence" # Base component
-  autoload :Link, "essence/components/link"
-  autoload :Row, "essence/components/row"
-  autoload :Skeleton, "essence/components/skeleton"
-
-  # CLI
   autoload :CLI, "essence/cli"
 
   class << self
@@ -33,6 +22,10 @@ module Essence
       yield configuration
     end
 
+    def definitions
+      @definitions ||= Essence::DEFINITIONS
+    end
+
     # COMPONENTS
     def components
       @components ||= {
@@ -41,6 +34,11 @@ module Essence
           class_name: "Essence::Accordion",
           stimulus: false
         },
+        alert: {
+          name: "Alert",
+          class_name: "Essence::Alert",
+          stimulus: false
+        },
         avatar: {
           name: "Avatar",
           class_name: "Essence::Avatar",
@@ -56,21 +54,51 @@ module Essence
           class_name: "Essence::Button",
           stimulus: false
         },
+        checkbox: {
+          name: "Checkbox",
+          class_name: "Essence::Checkbox",
+          stimulus: false
+        },
+        label: {
+          name: "Label",
+          class_name: "Essence::Label",
+          stimulus: false
+        },
+        input: {
+          name: "Input",
+          class_name: "Essence::Input",
+          stimulus: false
+        },
         link: {
           name: "Link",
           class_name: "Essence::Link",
           stimulus: false
         },
+        metric: {
+          name: "Metric",
+          class_name: "Essence::Metric",
+          stimulus: false
+        },
         row: {
           name: "Row",
           class_name: "Essence::Row",
           stimulus: false
         },
+        separator: {
+          name: "Separator",
+          class_name: "Essence::Separator",
+          stimulus: false
+        },
         skeleton: {
           name: "Skeleton",
           class_name: "Essence::Skeleton",
           stimulus: false
         },
+        switch: {
+          name: "Switch",
+          class_name: "Essence::Switch",
+          stimulus: true
+        },
         tabs: {
           name: "Tabs",
           class_name: "Essence::Tabs",

metadata

@@ -1,15 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: essence
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.0
 platform: ruby
 authors:
 - Elvinas Predkelis
-- Primevise
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-01-02 00:00:00.000000000 Z
+date: 2025-04-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-cli
@@ -61,14 +60,13 @@ dependencies:
         version: 0.13.3
 description: Component library for Ruby applications using Phlex
 email:
-- info@primevise.com
+- elvinas@primevise.com
 executables:
 - essence
 extensions: []
 extra_rdoc_files: []
 files:
 - README.md
-- essence/stimulus/tabs_controller.js
 - exe/essence
 - lib/essence.rb
 - lib/essence/cli.rb
@@ -76,17 +74,29 @@ files:
 - lib/essence/cli/install.rb
 - lib/essence/cli/version.rb
 - lib/essence/components/accordion.rb
+- lib/essence/components/alert.rb
 - lib/essence/components/avatar.rb
 - lib/essence/components/badge.rb
 - lib/essence/components/button.rb
+- lib/essence/components/checkbox.rb
 - lib/essence/components/dialog.rb
 - lib/essence/components/dropdown.rb
 - lib/essence/components/essence.rb
+- lib/essence/components/heading.rb
+- lib/essence/components/input.rb
+- lib/essence/components/label.rb
 - lib/essence/components/link.rb
+- lib/essence/components/metric.rb
 - lib/essence/components/row.rb
+- lib/essence/components/separator.rb
 - lib/essence/components/skeleton.rb
+- lib/essence/components/switch.rb
 - lib/essence/components/tabs.rb
+- lib/essence/components/text.rb
 - lib/essence/configuration.rb
+- lib/essence/definitions.rb
+- lib/essence/stimulus/switch_controller.js
+- lib/essence/stimulus/tabs_controller.js
 - lib/essence/version.rb
 homepage: https://rubygems.org/gems/essence
 licenses: