essence 0.2.1 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b698fdfbf94b34b4afa01e1c6f38a2e9ac2feca00f34166c0acead4c4e6c8e40
-  data.tar.gz: b11e693d29dbc9bd6763725692570bffb8879cafb32967cc1c34a2fbc5c65881
+  metadata.gz: c9a6970b18d2b7b5546ed98b54b5a782b74cbd92b379f69b996643416f604bd8
+  data.tar.gz: e1fedc61962792961d2ae47ecb01f7fe77c6c312ec2efb0987a4faa5b8e88cf1
 SHA512:
-  metadata.gz: b95a0636aca009728061fc524f93bfeacf2728aa846e7e6ff7afa8918ba99ce1a47ba80ef8bc44863d982c0cb8cc1ef760f61f9c367b9cddd9beda463de5798c
-  data.tar.gz: 371fb23359faf1f9e5835394c2fea1952813d7f43bf0f008704b641dca2d50faa2463c371869d1511a8625a22b9416ac8d2c3b59f09ceae36ca1c1e6fc865d29
+  metadata.gz: 22926d9d79c1ed96f02d48791b6badd99d032b7c23edd93d0159c9a5b2c275606f5570b8881543ed582066b3d7cd9187c94a2504ab3f6c97805e7f12d09cc1e7
+  data.tar.gz: 3d8816d4799f4e415ca1f7733202a914e1332579c2df95a24da7c3e0fca81039833b925a5df9f3625dce086c43f708a994c89525c4edc14e9da532f99a7e9a1f

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/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

@@ -1,49 +1,31 @@
 # frozen_string_literal: true
 
-class Essence::Button < Essence::Essence
-  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"
+class Essence::Avatar < Essence::Essence
+  BASE = "border border-transparent rounded-full bg-gray-100 aspect-square inline-flex items-center justify-center font-medium text-gray-700 overflow-hidden"
+
   SIZES = {
-    none: "",
-    xs: "text-[0.6rem] px-2 py-1.5 gap-1",
-    sm: "text-xs px-3 py-2 gap-1.5",
-    md: "text-sm px-4 py-2 gap-2",
-    lg: "text-base px-6 py-2.5 gap-2.5",
-    xl: "text-base px-8 py-3 gap-3"
-  }
-  KINDS = {
-    primary: "text-white bg-indigo-500 hover:bg-indigo-500",
-    secondary: "text-gray-700 bg-gray-100 hover:bg-gray-200",
-    critical: "text-white bg-rose-500 hover:bg-rose-400",
-    warning: "text-white bg-amber-500 hover:bg-amber-400",
-    success: "text-white bg-emerald-500 hover:bg-emerald-400",
-    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"
+    sm: "size-6 text-[0.5rem]",
+    md: "size-8 text-xs",
+    lg: "size-12 text-sm"
   }
 
-  attr_reader :size
-  attr_reader :kind
   attr_reader :attributes
+  attr_reader :size
 
-  def initialize(size: :md, kind: :primary, **attributes)
+  def initialize(size: :md, **attributes)
+    super(**attributes)
     @size = size
-    @kind = kind
-    @attributes = attributes
-    @attributes[:class] = construct_classes(@attributes[:class])
+    @attributes[:class] = merge_classes([ BASE, SIZES[size], @attributes[:class]])
   end
 
   def view_template(&)
-    element_tag(**attributes, &)
-  end
-
-  private
-
-  def element_tag(...)
-    attributes[:href] ? a(...) : button(...)
+    div(**attributes) do
+      img(src: attributes[:src], alt: attributes[:alt]) if attributes[:src]
+      yield if block_given?
+    end
   end
 
-  def construct_classes(classes)
-    TAILWIND_MERGER.merge([ BASE, SIZES[size], KINDS[kind], classes ].compact)
+  def fallback(**attrs, &)
+    div(**attrs, &)
   end
 end

data/lib/essence/components/badge.rb

@@ -1,31 +1,35 @@
 # frozen_string_literal: true
 
-class Essence::Avatar < Essence::Essence
-  BASE = "border border-transparent rounded-full bg-gray-100 aspect-square inline-flex items-center justify-center font-medium text-gray-700"
+class Essence::Badge < Essence::Essence
+  BASE = "inline-flex items-center justify-center w-fit rounded-full border border-transparent font-medium transition duration-150 hover:opacity-90"
   SIZES = {
-    sm: "size-6 text-xs",
-    md: "size-8 text-sm",
-    lg: "size-12 text-base"
+    none: "",
+    sm: "text-[0.65rem] px-2 py-0.5 gap-1 min-w-8",
+    md: "text-xs px-2.5 py-1 gap-2 min-w-12",
+    lg: "text-sm px-4 py-1 gap-2 min-w-16"
+  }
+  KINDS = {
+    primary: "text-gray-900 border-gray-200",
+    success: "text-white bg-emerald-500",
+    critical: "text-white bg-rose-500",
+    warning: "text-white bg-amber-500",
+    info: "text-white bg-blue-500",
+    dark: "text-white bg-gray-900",
+    white: "text-gray-900 bg-white"
   }
 
-  attr_reader :attributes
   attr_reader :size
+  attr_reader :kind
+  attr_reader :attributes
 
-  def initialize(size: :md, **attributes)
+  def initialize(size: :md, kind: :primary, **attributes)
     @size = size
-    @attributes = attributes
-    @attributes[:class] = construct_classes(@attributes[:class])
+    @kind = kind
+    super(**attributes)
+    @attributes[:class] = merge_classes([ BASE, SIZES[size], KINDS[kind], @attributes[:class]])
   end
 
   def view_template(&)
     div(**attributes, &)
   end
-
-  def fallback(**attrs, &)
-    span(**attrs, &)
-  end
-
-  def construct_classes(classes)
-    TAILWIND_MERGER.merge([ BASE, SIZES[size], classes ].compact)
-  end
 end

data/lib/essence/components/button.rb

@@ -1,21 +1,25 @@
 # frozen_string_literal: true
 
-class Essence::Badge < Essence::Essence
-  BASE = "inline-flex items-center justify-center w-fit rounded-full border border-transparent font-medium transition duration-150 hover:opacity-90"
+class Essence::Button < Essence::Essence
+  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"
   SIZES = {
     none: "",
-    sm: "text-[0.65rem] px-2 py-0.5 gap-1",
-    md: "text-xs px-2.5 py-1 gap-2",
-    lg: "text-sm px-4 py-1.5 gap-2"
+    xs: "text-[0.6rem] px-2 py-1.5 gap-1",
+    sm: "text-xs px-3 py-2 gap-1.5",
+    md: "text-sm px-4 py-2 gap-2",
+    lg: "text-base px-6 py-2.5 gap-2.5",
+    xl: "text-base px-8 py-3 gap-3"
   }
   KINDS = {
-    primary: "text-gray-900 border-gray-200",
-    success: "text-white bg-emerald-500",
-    critical: "text-white bg-rose-500",
-    warning: "text-white bg-amber-500",
-    info: "text-white bg-blue-500",
-    dark: "text-white bg-gray-900",
-    white: "text-gray-900 bg-white"
+    primary: "text-white bg-indigo-500 hover:bg-indigo-500",
+    secondary: "text-gray-700 bg-gray-100 hover:bg-gray-200",
+    critical: "text-white bg-rose-500 hover:bg-rose-400",
+    warning: "text-white bg-amber-500 hover:bg-amber-400",
+    success: "text-white bg-emerald-500 hover:bg-emerald-400",
+    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 hover:bg-gray-200 hover:text-gray-800"
   }
 
   attr_reader :size
@@ -25,18 +29,17 @@ 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, &)
+    element_tag(**attributes, &)
   end
 
   private
 
-  def construct_classes(classes)
-    TAILWIND_MERGER.merge([ BASE, SIZES[size], KINDS[kind], classes ].compact)
+  def element_tag(...)
+    attributes[:href] ? a(...) : button(...)
   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

@@ -4,8 +4,8 @@ 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/version.rb

@@ -1,3 +1,3 @@
 module Essence
-  VERSION = "0.2.1"
+  VERSION = "0.2.3"
 end

data/lib/essence.rb

@@ -4,12 +4,14 @@ require "tailwind_merge"
 
 module Essence
   # Autoloading
-  autoload :Component, "essence/components/component"
-
+  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 :Skeleton, "essence/components/skeleton"
   autoload :Row, "essence/components/row"
+  autoload :Skeleton, "essence/components/skeleton"
 
   autoload :CLI, "essence/cli"
 
@@ -19,24 +21,26 @@ module Essence
   def self.component_class_names
     @component_class_names ||= {
       essence: "Essence::Essence",
-      avataro: "Essence::Avatar",
+      accordion: "Essence::Accordion",
+      avatar: "Essence::Avatar",
       badge: "Essence::Badge",
       button: "Essence::Button",
       link: "Essence::Link",
-      skeleton: "Essence::Skeleton",
       row: "Essence::Row",
+      skeleton: "Essence::Skeleton",
     }
   end
 
   def self.component_classes
     @components_classes ||= {
       essence: ::Essence::Essence,
+      accordion: ::Essence::Accordion,
       avatar: ::Essence::Avatar,
       badge: ::Essence::Badge,
       button: ::Essence::Button,
       link: ::Essence::Link,
-      skeleton: ::Essence::Skeleton,
       row: ::Essence::Row,
+      skeleton: ::Essence::Skeleton,
     }
   end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: essence
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.3
 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: 2024-12-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-cli
@@ -74,9 +74,12 @@ 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