essence 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9be2e0f4b7e7288c5cf845c54d67988f472a967ebdd04b6d01ac790c1d1c7a4
-  data.tar.gz: f1ebff9a5f1f108042f48f3241edc2cd5d8998d9605b20d6e52bed3b338219dc
+  metadata.gz: 8a05b5cc8ee41e915b4d8646bb7357451484b0d36f9893deb21f58c540838d86
+  data.tar.gz: 27b53f351c8b5fb5b6718cdf2c5b4b4834251042dc48657dd2a70ac42e4865be
 SHA512:
-  metadata.gz: 067d0df4723dd420b5100d7c21c417f37e959e62e325154fcd3671a22b3b919d51720e6b6a911233a8791065d0a3a93a9b931c0111b5e4b90454aa6c8648b80c
-  data.tar.gz: 06d8732651332803411614ae867fd3e78ae226853992fd3d0367bc441054925d6647d4c2151d0c3e0af4b24990b8a24891c8042f816789cd454cda9f5197e03d
+  metadata.gz: 1f3d8aad9655e9a3d86ca7db39d6bdc03f608bfe6bc79f6cea64591340449b19fa4c9ffbbfe0f8939472b870dcf57508f1a1b0d9d29504757b49e3636ef3c074
+  data.tar.gz: 846b1a2df22849a2c8cdb9b8d44a8e7dbc3204e4b90e68b93b8d355ae6aa86076da3206c00594a54d23b714b37562cf38a5e9070bcaf9e590d3120a372dceb16

data/README.md

@@ -14,10 +14,10 @@ A simple, ergonomic and performant component library for Ruby applications.
 
 ### Features
 
-- Tailored components - Designed using flexibility in mind while streamlining the development process
-- Gorgeous simplicity - Essence empowers minimalistic user interface with purposeful accents
-- Geared for performance - Keep everything in one place. No spreadsheets or getting lost between tooling
-- Ergonomic approach - Essence is designed to be easy to use and understand
+- Tailored components - Flexible by design while streamlining the development process
+- Gorgeous simplicity - Empowers minimalistic user interface with purposeful accents
+- Geared for performance - Built with performance in mind
+- Ergonomic approach - Designed to be easy to use and understand
 
 ---
 
@@ -45,6 +45,7 @@ More information on about the installation can be found in the [documentation](h
 
 - [Mintis](https://mintis.app)
 - [Hansa](https://hansahq.com)
+- [Oversee](https://github.com/primevise/oversee)
 - [Release Server](https://releaseserver.com)
 - [College Life Work](https://work.collegelife.co)
 

data/lib/essence/cli/add.rb

@@ -9,8 +9,16 @@ module Essence
 
       def call(*args)
         component_name = args[0][:component_name]
+        key = component_name.to_sym
+        has_stimulus_controller = Essence.components[key][:stimulus] || false
 
-        return puts "> #{component_name}: component unsupported" unless Essence.component_names.include?(component_name.to_sym)
+        return puts "> #{component_name}: component unsupported" unless Essence.component_keys.include?(key)
+        puts "> [Essence] #{Essence.components[key][:name]}"
+
+        if has_stimulus_controller
+          Essence::CLI::Commands.copy_controller(component_name:)
+          puts "> [Stimulus] #{Essence::CLI::Commands::STIMULUS_CONTROLLERS_DESTINATION_DIR.join("#{component_name}_controller.js")}"
+        end
 
         Essence::CLI::Commands.copy_component(component_name:)
         Essence::CLI::Commands.replace_component_contents(component_name:)
@@ -20,7 +28,7 @@ module Essence
           to: Essence::CLI::Commands::PHLEX_COMPONENT_DEFINITION_SUFFIX
         )
 
-        puts "> Successfully added #{component_name} component to #{Essence::CLI::Commands::DESTINATION_DIR.join("#{component_name}.rb")}"
+        puts "> [Phlex] #{Essence::CLI::Commands::DESTINATION_DIR.join("#{component_name}.rb")}"
       end
     end
   end

data/lib/essence/cli.rb

@@ -17,8 +17,12 @@ module Essence
       extend Dry::CLI::Registry
 
       # Constants
+      STIMULUS_CONTROLLERS_DIR = Pathname.new(::Essence.root_path).join("essence/stimulus")
+      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__))
-      DESTINATION_DIR = Pathname.new(File.expand_path(Dir.pwd)).join("app/components")
+      DESTINATION_DIR = Pathname.new(File.expand_path(Dir.pwd)).join(::Essence.configuration.phlex_components_path)
+
       COMPONENT_DEFINITION_PREFIX = "class Essence::"
       COMPONENT_DEFINITION_SUFFIX = "< Essence::Essence"
       PHLEX_COMPONENT_DEFINITION_PREFIX = "class Components::"
@@ -32,6 +36,7 @@ module Essence
       private
 
       # UTILITIES
+      # PHLEX COMPONENTS
       def self.copy_component(component_name:)
         source_path = COMPONENTS_DIR.join("#{component_name}.rb")
         destination_path = DESTINATION_DIR.join("#{component_name}.rb")
@@ -58,6 +63,15 @@ module Essence
 
         FileUtils.mv(from, to)
       end
+
+      # STIMULUS CONTROLLERS
+      def self.copy_controller(component_name:)
+        source_path = STIMULUS_CONTROLLERS_DIR.join("#{component_name}_controller.js")
+        destination_path = STIMULUS_CONTROLLERS_DESTINATION_DIR.join("#{component_name}_controller.js")
+
+        FileUtils.mkdir_p(STIMULUS_CONTROLLERS_DESTINATION_DIR)
+        FileUtils.copy(source_path, destination_path)
+      end
     end
   end
 end

data/lib/essence/components/accordion.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class Essence::Accordion < Essence::Essence
+  BASE = "group py-4"
+  TRIGGER_BASE = "cursor-pointer list-none flex items-center justify-between text-base font-medium"
+  CONTENT_BASE = "py-2 transform transition-all duration-500 not-open:-mt-4 opacity-0 group-open:opacity-100 group-open:mt-0 text-sm"
+  CHEVRON_BASE = "transform transition-all duration-300 rotate-90 group-open:-rotate-90 text-lg text-gray-700"
+
+  attr_reader :attributes
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class]])
+  end
+
+  def view_template(&)
+    details(class: "w-full group py-4", &) if block_given?
+  end
+
+  def trigger(**tattributes, &)
+    summary(class: merge_classes(TRIGGER_BASE, tattributes[:class])) do
+      p(class: "inline", &)
+      span(class: CHEVRON_BASE) { "›" }
+    end
+  end
+
+  def content(**cattributes, &)
+    p(class: merge_classes(CONTENT_BASE, cattributes[:class]), &)
+  end
+
+  private
+
+  def merge_classes(*classes)
+    TAILWIND_MERGER.merge([ *classes ].compact)
+  end
+end

data/lib/essence/components/avatar.rb

@@ -13,9 +13,9 @@ class Essence::Avatar < Essence::Essence
   attr_reader :size
 
   def initialize(size: :md, **attributes)
+    super(**attributes)
     @size = size
-    @attributes = attributes
-    @attributes[:class] = construct_classes(@attributes[:class])
+    @attributes[:class] = merge_classes([ BASE, SIZES[size], @attributes[:class]])
   end
 
   def view_template(&)
@@ -28,8 +28,4 @@ class Essence::Avatar < Essence::Essence
   def fallback(**attrs, &)
     div(**attrs, &)
   end
-
-  def construct_classes(classes)
-    TAILWIND_MERGER.merge([ BASE, SIZES[size], classes ].compact)
-  end
 end

data/lib/essence/components/badge.rb

@@ -25,17 +25,11 @@ class Essence::Badge < Essence::Essence
   def initialize(size: :md, kind: :primary, **attributes)
     @size = size
     @kind = kind
-    @attributes = attributes
-    @attributes[:class] = construct_classes(@attributes[:class])
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, SIZES[size], KINDS[kind], @attributes[:class]])
   end
 
   def view_template(&)
     div(**attributes, &)
   end
-
-  private
-
-  def construct_classes(classes)
-    TAILWIND_MERGER.merge([ BASE, SIZES[size], KINDS[kind], classes ].compact)
-  end
 end

data/lib/essence/components/button.rb

@@ -19,7 +19,7 @@ class Essence::Button < Essence::Essence
     info: "text-white bg-blue-500 hover:bg-blue-400",
     dark: "text-white bg-gray-900 hover:bg-gray-800",
     white: "text-gray-900 bg-white hover:bg-gray-200",
-    ghost: "text-gray-900 bg-white hover:bg-gray-200 hover:text-gray-800"
+    ghost: "text-gray-900 hover:bg-gray-200 hover:text-gray-800"
   }
 
   attr_reader :size
@@ -29,8 +29,8 @@ class Essence::Button < Essence::Essence
   def initialize(size: :md, kind: :primary, **attributes)
     @size = size
     @kind = kind
-    @attributes = attributes
-    @attributes[:class] = construct_classes(@attributes[:class])
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, SIZES[size], KINDS[kind], @attributes[:class]])
   end
 
   def view_template(&)
@@ -42,8 +42,4 @@ class Essence::Button < Essence::Essence
   def element_tag(...)
     attributes[:href] ? a(...) : button(...)
   end
-
-  def construct_classes(classes)
-    TAILWIND_MERGER.merge([ BASE, SIZES[size], KINDS[kind], classes ].compact)
-  end
 end

data/lib/essence/components/dialog.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Essence::Dialog < Essence::Essence
+  BASE = ""
+
+  attr_reader :attributes
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class]])
+  end
+
+  def view_template(&)
+    dialog(**attributes) do
+      yield if block_given?
+    end
+  end
+
+  def footer(&)
+  end
+end

data/lib/essence/components/dropdown.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Essence::Dropdown < Essence::Essence
+  BASE = ""
+
+  attr_reader :attributes
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class]])
+  end
+
+  def view_template(&)
+    div(**attributes) do
+      yield if block_given?
+    end
+  end
+end

data/lib/essence/components/essence.rb

@@ -6,13 +6,11 @@ class Essence::Essence < Phlex::HTML
   attr_reader :attributes
 
   def initialize(**attributes)
-    @attributes = attributes
-    @attributes[:class] = TAILWIND_MERGER.merge([self.class::CLASSES, @attributes[:class]]) if @attributes[:class]
+    @attributes = default_attributes.deep_merge(attributes)
   end
 
   private
 
-  def default_attributes
-    {}
-  end
+  def default_attributes = {}
+  def merge_classes(*classes) = TAILWIND_MERGER.merge([ *classes ].compact)
 end

data/lib/essence/components/link.rb

@@ -10,8 +10,8 @@ class Essence::Link < Essence::Essence
   attr_reader :attributes
 
   def initialize(kind: :regular, **attributes)
-    @attributes = attributes
-    @attributes[:class] = @attributes[:class] ? TAILWIND_MERGER.merge([ BASE, @attributes[:class] ]) : BASE
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class]])
   end
 
   def view_template(&)

data/lib/essence/components/row.rb

@@ -14,8 +14,8 @@ class Essence::Row < Essence::Essence
 
   def initialize(kind: :default, **attributes)
     @kind = kind
-    @attributes = attributes
-    @attributes[:class] = @attributes[:class] ? TAILWIND_MERGER.merge([ BASE, KINDS[kind], @attributes[:class] ]) : BASE
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, KINDS[kind], @attributes[:class]])
   end
 
   def view_template(&)

data/lib/essence/components/skeleton.rb

@@ -1,11 +1,21 @@
 # frozen_string_literal: true
 
+# A skeleton component is used to show a loading state.
+#
+# ==== Examples
+#
+#    render Skeleton.new(class: "w-32 h-6")
+#
+# ==== Documentation
+#
+# https://essence.primevise.com/components/skeleton
+#
 class Essence::Skeleton < Essence::Essence
   BASE = "animate-pulse bg-gray-200/55 rounded-xs"
 
   def initialize(**attributes)
-    @attributes = attributes
-    @attributes[:class] = @attributes[:class] ? TAILWIND_MERGER.merge([ BASE, @attributes[:class] ]) : BASE
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class]])
   end
 
   def view_template(&)

data/lib/essence/components/tabs.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class Essence::Tabs < Essence::Essence
+  BASE = "rounded-lg overflow-hidden"
+  TAB_BASE = "inline-flex items-center justify-center w-fit rounded-xs border border-transparent font-medium transition duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90 text-xs px-3 py-2 gap-1.5 text-gray-900 bg-transparent hover:bg-gray-200 hover:text-gray-800"
+  TAB_LIST_BASE = "flex items-center gap-2 py-2 border-b"
+  PANEL_BASE = "aria-hidden:hidden p-4"
+
+  attr_reader :attributes
+
+  def initialize(**attributes)
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, @attributes[:class] ])
+  end
+
+  def view_template(&)
+    div(**attributes, &)
+  end
+
+  def menu(**mattributes, &)
+    mattributes[:class] = merge_classes([ TAB_LIST_BASE, mattributes[:class] ])
+
+    div(**mattributes, &)
+  end
+
+  def tab(key: :general, **mattributes, &)
+    mattributes[:id] = "tab-#{key}"
+    mattributes[:class] = merge_classes([ TAB_BASE, mattributes[:class] ])
+    mattributes[:data] = {
+      essence__tabs_target: "tab",
+      essence__tabs_panel_id_param: "panel-#{key}",
+      action: "essence--tabs#setActiveTab keydown.left->essence--tabs#previous keydown.right->essence--tabs#next"
+    }
+
+    button(**mattributes, &)
+  end
+
+  def panel(key: :general, **mattributes, &)
+    mattributes[:id] = "panel-#{key}"
+    mattributes[:class] = merge_classes([ PANEL_BASE, mattributes[:class] ])
+    mattributes[:data] = {
+      essence__tabs_target: "panel"
+    }
+
+    div(**mattributes, &)
+  end
+
+  private
+
+  def default_attributes
+    {
+      data: {
+        controller: "essence--tabs",
+        essence__tabs_active_value: "panel-general"
+      }
+    }
+  end
+end

data/lib/essence/configuration.rb

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

data/lib/essence/version.rb

@@ -1,3 +1,3 @@
 module Essence
-  VERSION = "0.2.2"
+  VERSION = "0.3.0"
 end

data/lib/essence.rb

@@ -2,8 +2,12 @@
 
 require "tailwind_merge"
 
+require_relative "essence/configuration"
+
 module Essence
   # Autoloading
+  # Components
+  autoload :Accordion, "essence/components/accordion"
   autoload :Avatar, "essence/components/avatar"
   autoload :Badge, "essence/components/badge"
   autoload :Button, "essence/components/button"
@@ -12,36 +16,83 @@ module Essence
   autoload :Row, "essence/components/row"
   autoload :Skeleton, "essence/components/skeleton"
 
+  # CLI
   autoload :CLI, "essence/cli"
 
-  # Components
-  # Class names and classes are separated to avoid loading in Phlex into the CLI tooling
-
-  def self.component_class_names
-    @component_class_names ||= {
-      essence: "Essence::Essence",
-      avatar: "Essence::Avatar",
-      badge: "Essence::Badge",
-      button: "Essence::Button",
-      link: "Essence::Link",
-      row: "Essence::Row",
-      skeleton: "Essence::Skeleton",
-    }
-  end
+  class << self
+    def root_path
+      File.dirname(__dir__)
+    end
 
-  def self.component_classes
-    @components_classes ||= {
-      essence: ::Essence::Essence,
-      avatar: ::Essence::Avatar,
-      badge: ::Essence::Badge,
-      button: ::Essence::Button,
-      link: ::Essence::Link,
-      row: ::Essence::Row,
-      skeleton: ::Essence::Skeleton,
-    }
-  end
+    # CONFIGURATION
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield configuration
+    end
+
+    # COMPONENTS
+    def components
+      @components ||= {
+        accordion: {
+          name: "Accordion",
+          class_name: "Essence::Accordion",
+          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
+        },
+        link: {
+          name: "Link",
+          class_name: "Essence::Link",
+          stimulus: false
+        },
+        row: {
+          name: "Row",
+          class_name: "Essence::Row",
+          stimulus: false
+        },
+        skeleton: {
+          name: "Skeleton",
+          class_name: "Essence::Skeleton",
+          stimulus: false
+        },
+        tabs: {
+          name: "Tabs",
+          class_name: "Essence::Tabs",
+          stimulus: true
+        }
+      }
+    end
+
+    def component_keys
+      @component_keys ||= components.keys
+    end
+
+    def component_names
+      @component_names ||= components.transform_values { |v| v[:name] }
+    end
+
+    def component_class_names
+      @component_class_names ||= components.transform_values { |v| v[:class_name] }
+    end
 
-  def self.component_names
-    @component_names ||= component_class_names.keys
+    def component_classes
+      @component_classes ||= component_class_names.transform_values { |v| Object.const_get(v) }
+    end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: essence
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Elvinas Predkelis
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-12-22 00:00:00.000000000 Z
+date: 2025-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-cli
@@ -74,13 +74,18 @@ files:
 - lib/essence/cli/add.rb
 - lib/essence/cli/install.rb
 - lib/essence/cli/version.rb
+- lib/essence/components/accordion.rb
 - lib/essence/components/avatar.rb
 - lib/essence/components/badge.rb
 - lib/essence/components/button.rb
+- lib/essence/components/dialog.rb
+- lib/essence/components/dropdown.rb
 - lib/essence/components/essence.rb
 - lib/essence/components/link.rb
 - lib/essence/components/row.rb
 - lib/essence/components/skeleton.rb
+- lib/essence/components/tabs.rb
+- lib/essence/configuration.rb
 - lib/essence/version.rb
 homepage: https://rubygems.org/gems/essence
 licenses: