phlexy_ui 0.1.1 → 0.1.5

data/lib/phlexy_ui/drawer.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Drawer < Base
+    def initialize(*, id:, as: :section, **)
+      super(*, **)
+      @as = as
+      @id = id
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :drawer,
+        modifiers_map: DRAWER_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def toggle(**options, &)
+      generate_classes!(
+        component_html_class: :"drawer-toggle",
+        options:
+      ).then do |classes|
+        input(id:, type: :checkbox, class: classes, **options, &)
+      end
+    end
+
+    def content(as: :div, **options, &)
+      generate_classes!(
+        component_html_class: :"drawer-content",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def side(as: :div, **options, &)
+      generate_classes!(
+        component_html_class: :"drawer-side",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def overlay(**options, &)
+      generate_classes!(
+        component_html_class: :"drawer-overlay",
+        options:
+      ).then do |classes|
+        label(for: id, class: classes, **options, &)
+      end
+    end
+
+    def button(*, **, &)
+      render Button.new(*, as: :label, for: id, **, &)
+    end
+
+    private
+
+    DRAWER_MODIFIERS_MAP = {
+        # "sm:drawer-end",
+        # "md:drawer-end",
+        # "lg:drawer-end",
+      end: "drawer-end",
+      # "sm:drawer-open",
+      # "md:drawer-open",
+      # "lg:drawer-open",
+      open: "drawer-open"
+    }.freeze
+  end
+end

data/lib/phlexy_ui/dropdown.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Dropdown < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :dropdown,
+        modifiers_map: DROPDOWN_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        if base_modifiers.include?(:tap_to_close)
+          details(class: classes, **options, &)
+        else
+          public_send(as, class: classes, **options, &)
+        end
+      end
+    end
+
+    def button(*, **, &)
+      if base_modifiers.include?(:tap_to_close)
+        render Button.new(*, as: :summary, **, &)
+      else
+        render Button.new(*, as: :div, role: :button, tabindex: 0, **, &)
+      end
+    end
+
+    def content(*, as: :div, **options, &)
+      generate_classes!(
+        component_html_class: :"dropdown-content",
+        options:
+      ).then do |classes|
+        if base_modifiers.include?(:tap_to_close)
+          render_as(*, as:, class: classes, **options, &)
+        else
+          render_as(*, as:, tabindex: 0, class: classes, **options, &)
+        end
+      end
+    end
+
+    def menu(*, **options, &)
+      generate_classes!(
+        component_html_class: :"dropdown-content",
+        options:
+      ).then do |classes|
+        if base_modifiers.include?(:tap_to_close)
+          render Menu.new(*, class: classes, **options, &)
+        else
+          render Menu.new(*, tabindex: 0, class: classes, **options, &)
+        end
+      end
+    end
+
+    private
+
+    DROPDOWN_MODIFIERS_MAP = {
+        # "sm:dropdown-end"
+        # "md:dropdown-end"
+        # "lg:dropdown-end"
+      end: "dropdown-end",
+      # "sm:dropdown-top"
+      # "md:dropdown-top"
+      # "lg:dropdown-top"
+      top: "dropdown-top",
+      # "sm:dropdown-bottom"
+      # "md:dropdown-bottom"
+      # "lg:dropdown-bottom"
+      bottom: "dropdown-bottom",
+      # "sm:dropdown-left"
+      # "md:dropdown-left"
+      # "lg:dropdown-left"
+      left: "dropdown-left",
+      # "sm:dropdown-right"
+      # "md:dropdown-right"
+      # "lg:dropdown-right"
+      right: "dropdown-right",
+      # "sm:dropdown-hover"
+      # "md:dropdown-hover"
+      # "lg:dropdown-hover"
+      hover: "dropdown-hover",
+      # "sm:dropdown-open"
+      # "md:dropdown-open"
+      # "lg:dropdown-open"
+      open: "dropdown-open"
+    }.freeze
+  end
+end

data/lib/phlexy_ui/link.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Link < Base
+    def view_template(&)
+      generate_classes!(
+        modifiers_map: LINK_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        a(class: classes, **options, &)
+      end
+    end
+
+    private
+
+    attr_reader :link_to_name
+
+    LINK_MODIFIERS_MAP = {
+      # "sm:link"
+      # "md:link"
+      # "lg:link"
+      underlined: "link",
+      # "sm:link-hover"
+      # "md:link-hover"
+      # "lg:link-hover"
+      hover: "link-hover",
+      # "sm:active"
+      # "md:active"
+      # "lg:active"
+      active: "active",
+      # "sm:image-full"
+      # "md:image-full"
+      # "lg:image-full"
+      image_full: "image-full",
+      # "sm:card-bordered"
+      # "md:card-bordered"
+      # "lg:card-bordered"
+      bordered: "card-bordered",
+      # "sm:card-normal"
+      # "md:card-normal"
+      # "lg:card-normal"
+      normal: "card-normal",
+      # "sm:card-compact"
+      # "md:card-compact"
+      # "lg:card-compact"
+      compact: "card-compact",
+      # "sm:card-side"
+      # "md:card-side"
+      # "lg:card-side"
+      side: "card-side",
+      # "sm:glass"
+      # "md:glass"
+      # "lg:glass"
+      glass: "glass",
+      # "sm:link-primary"
+      # "md:link-primary"
+      # "lg:link-primary"
+      primary: "link-primary",
+      # "sm:link-secondary"
+      # "md:link-secondary"
+      # "lg:link-secondary"
+      secondary: "link-secondary",
+      # "sm:link-accent"
+      # "md:link-accent"
+      # "lg:link-accent"
+      accent: "link-accent",
+      # "sm:link-neutral"
+      # "md:link-neutral"
+      # "lg:link-neutral"
+      neutral: "link-neutral",
+      # "sm:link-info"
+      # "md:link-info"
+      # "lg:link-info"
+      info: "link-info",
+      # "sm:link-success"
+      # "md:link-success"
+      # "lg:link-success"
+      success: "link-success",
+      # "sm:link-warning"
+      # "md:link-warning"
+      # "lg:link-warning"
+      warning: "link-warning",
+      # "sm:link-error"
+      # "md:link-error"
+      # "lg:link-error"
+      error: "link-error"
+    }.freeze
+  end
+end

data/lib/phlexy_ui/loading.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Loading < Base
+    def initialize(*, as: :span, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :loading,
+        modifiers_map: LOADING_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    private
+
+    LOADING_MODIFIERS_MAP = {
+      # "sm:loading-spinner"
+      # "md:loading-spinner"
+      # "lg:loading-spinner"
+      spinner: "loading-spinner",
+      # "sm:loading-dots"
+      # "md:loading-dots"
+      # "lg:loading-dots"
+      dots: "loading-dots",
+      # "sm:loading-ring"
+      # "md:loading-ring"
+      # "lg:loading-ring"
+      ring: "loading-ring",
+      # "sm:loading-ball"
+      # "md:loading-ball"
+      # "lg:loading-ball"
+      ball: "loading-ball",
+      # "sm:loading-bars"
+      # "md:loading-bars"
+      # "lg:loading-bars"
+      bars: "loading-bars",
+      # "sm:loading-infinity"
+      # "md:loading-infinity"
+      # "lg:loading-infinity"
+      infinity: "loading-infinity",
+      # "sm:loading-xs"
+      # "md:loading-xs"
+      # "lg:loading-xs"
+      xs: "loading-xs",
+      # "sm:loading-sm"
+      # "md:loading-sm"
+      # "lg:loading-sm"
+      sm: "loading-sm",
+      # "sm:loading-md"
+      # "md:loading-md"
+      # "lg:loading-md"
+      md: "loading-md",
+      # "sm:loading-lg"
+      # "md:loading-lg"
+      # "lg:loading-lg"
+      lg: "loading-lg",
+      # "sm:text-primary"
+      # "md:text-primary"
+      # "lg:text-primary"
+      primary: "text-primary",
+      # "sm:text-secondary"
+      # "md:text-secondary"
+      # "lg:text-secondary"
+      secondary: "text-secondary",
+      # "sm:text-accent"
+      # "md:text-accent"
+      # "lg:text-accent"
+      accent: "text-accent",
+      # "sm:text-neutral"
+      # "md:text-neutral"
+      # "lg:text-neutral"
+      neutral: "text-neutral",
+      # "sm:text-info"
+      # "md:text-info"
+      # "lg:text-info"
+      info: "text-info",
+      # "sm:text-success"
+      # "md:text-success"
+      # "lg:text-success"
+      success: "text-success",
+      # "sm:text-warning"
+      # "md:text-warning"
+      # "lg:text-warning"
+      warning: "text-warning",
+      # "sm:text-error"
+      # "md:text-error"
+      # "lg:text-error"
+      error: "text-error"
+    }.freeze
+  end
+end

data/lib/phlexy_ui/menu.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Menu < Base
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :menu,
+        modifiers_map: MENU_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        ul(class: classes, **options, &)
+      end
+    end
+
+    def title(*, as: :li, **options, &)
+      generate_classes!(
+        component_html_class: :"menu-title",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def item(*, **, &)
+      render MenuItem.new(*, **, &)
+    end
+
+    def submenu(*base_modifiers, **, &)
+      if base_modifiers.include?(:collapsible)
+        li do
+          render CollapsibleSubMenu.new(*base_modifiers, **, &)
+        end
+      else
+        li do
+          render SubMenu.new(*base_modifiers, **, &)
+        end
+      end
+    end
+
+    private
+
+    MENU_MODIFIERS_MAP = {
+      # "sm:menu-xs"
+      # "md:menu-xs"
+      # "lg:menu-xs"
+      xs: "menu-xs",
+      # "sm:menu-sm"
+      # "md:menu-sm"
+      # "lg:menu-sm"
+      sm: "menu-sm",
+      # "sm:menu-md"
+      # "md:menu-md"
+      # "lg:menu-md"
+      md: "menu-md",
+      # "sm:menu-lg"
+      # "md:menu-lg"
+      # "lg:menu-lg"
+      lg: "menu-lg",
+      # "sm:menu-vertical"
+      # "md:menu-vertical"
+      # "lg:menu-vertical"
+      vertical: "menu-vertical",
+      # "sm:menu-horizontal"
+      # "md:menu-horizontal"
+      # "lg:menu-horizontal"
+      horizontal: "menu-horizontal",
+      # "sm:bg-primary sm:text-primary-content"
+      # "md:bg-primary md:text-primary-content"
+      # "lg:bg-primary lg:text-primary-content"
+      primary: "bg-primary text-primary-content",
+      # "sm:bg-secondary sm:text-secondary-content"
+      # "md:bg-secondary md:text-secondary-content"
+      # "lg:bg-secondary lg:text-secondary-content"
+      secondary: "bg-secondary text-secondary-content",
+      # "sm:bg-accent sm:text-accent-content"
+      # "md:bg-accent md:text-accent-content"
+      # "lg:bg-accent lg:text-accent-content"
+      accent: "bg-accent text-accent-content",
+      # "sm:bg-neutral sm:text-neutral-content"
+      # "md:bg-neutral md:text-neutral-content"
+      # "lg:bg-neutral lg:text-neutral-content"
+      neutral: "bg-neutral text-neutral-content",
+      # "sm:bg-base-100 sm:text-base-content"
+      # "md:bg-base-100 md:text-base-content"
+      # "lg:bg-base-100 lg:text-base-content"
+      base_100: "bg-base-100 text-base-content",
+      # "sm:bg-base-200 sm:text-base-content"
+      # "md:bg-base-200 md:text-base-content"
+      # "lg:bg-base-200 lg:text-base-content"
+      base_200: "bg-base-200 text-base-content",
+      # "sm:bg-base-300 sm:text-base-content"
+      # "md:bg-base-300 md:text-base-content"
+      # "lg:bg-base-300 lg:text-base-content"
+      base_300: "bg-base-300 text-base-content",
+      # "sm:bg-info sm:text-info-content"
+      # "md:bg-info sm:text-info-content"
+      # "lg:bg-info sm:text-info-content"
+      info: "bg-info text-info-content",
+      # "sm:bg-success sm:text-success-content"
+      # "md:bg-success md:text-success-content"
+      # "lg:bg-success lg:text-success-content"
+      success: "bg-success text-success-content",
+      # "sm:bg-warning sm:text-warning-content"
+      # "md:bg-warning md:text-warning-content"
+      # "lg:bg-warning lg:text-warning-content"
+      warning: "bg-warning text-warning-content",
+      # "sm:bg-error sm:text-error-content"
+      # "md:bg-error md:text-error-content"
+      # "lg:bg-error lg:text-error-content"
+      error: "bg-error text-error-content"
+    }.freeze
+  end
+end

data/lib/phlexy_ui/menu_item.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @private
+  class MenuItem < Base
+    def view_template(&)
+      generate_classes!(
+        modifiers_map: MENU_ITEM_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        li(class: classes, &)
+      end
+    end
+
+    def title(*, **options, &block)
+      generate_classes!(
+        component_html_class: :"menu-title",
+        options:
+      ).then do |classes|
+        h2(class: classes, **options, &block)
+      end
+    end
+
+    def submenu(*base_modifiers, **, &)
+      if base_modifiers.include?(:collapsible)
+        render CollapsibleSubMenu.new(*base_modifiers, **, &)
+      else
+        render SubMenu.new(*base_modifiers, **, &)
+      end
+    end
+
+    private
+
+    MENU_ITEM_MODIFIERS_MAP = {
+      # "sm:disabled"
+      # "md:disabled"
+      # "lg:disabled"
+      disabled: "disabled",
+      # "sm:active"
+      # "md:active"
+      # "lg:active"
+      active: "active",
+      # "sm:focus"
+      # "md:focus"
+      # "lg:focus"
+      focus: "focus"
+    }.freeze
+  end
+end

data/lib/phlexy_ui/navbar.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Navbar < Base
+    def initialize(*, as: :nav, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :navbar,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def start(&)
+      div(class: :"navbar-start", &)
+    end
+
+    def center(&)
+      div(class: :"navbar-center", &)
+    end
+
+    def end(&)
+      div(class: :"navbar-end", &)
+    end
+  end
+end

data/lib/phlexy_ui/sub_menu.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @private
+  class SubMenu < Base
+    include Phlex::DeferredRender
+
+    def initialize(*, **)
+      super
+      @items ||= []
+    end
+
+    def view_template(&)
+      if @title
+        div do
+          render @title
+        end
+      end
+
+      if @items.any?
+        ul do
+          @items.each do |item|
+            render item
+          end
+        end
+      end
+    end
+
+    def title(&block)
+      @title = block
+    end
+
+    def item(*, **, &)
+      @items << MenuItem.new(*, **, &)
+    end
+  end
+end

data/lib/phlexy_ui/tab.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @private
+  class Tab < Base
+    include Phlex::DeferredRender
+
+    def initialize(*, id: nil, **)
+      super(*, **)
+      @id = id
+    end
+
+    def view_template(&)
+      if @content
+        render TabWithContent.new(
+          *base_modifiers,
+          id:,
+          content: @content,
+          **options,
+          &
+        )
+      else
+        render TabWithoutContent.new(*base_modifiers, id:, **options, &)
+      end
+    end
+
+    def content(*, **options, &)
+      unless id
+        raise ArgumentError,
+          "You must pass an id to Tabs#new if you want to add content"
+      end
+
+      @content = -> do
+        generate_classes!(
+          component_html_class: :"tab-content",
+          options:
+        ).then do |classes|
+          div role: :tabpanel, class: classes, **options, &
+        end
+      end
+    end
+
+    private
+
+    TAB_MODIFIERS_CLASSES = {
+      # "sm:tab-active"
+      # "md:tab-active"
+      # "lg:tab-active"
+      active: "tab-active",
+      # "sm:tab-disabled"
+      # "md:tab-disabled"
+      # "lg:tab-disabled"
+      disabled: "tab-disabled"
+    }.freeze
+  end
+end

data/lib/phlexy_ui/tab_with_content.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @private
+  class TabWithContent < Base
+    def initialize(*base_modifiers, content:, id: nil, **)
+      super(*base_modifiers, **)
+      @title = title
+      @id = id
+      @content = content
+    end
+
+    def view_template(&)
+      title, *base_modifiers = @base_modifiers
+
+      attributes = generate_attributes(
+        base_modifiers,
+        ATTRIBUTES_MAP
+      )
+
+      generate_classes!(
+        component_html_class: :tab,
+        modifiers_map: Tab::TAB_MODIFIERS_CLASSES,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        input(
+          type: :radio,
+          name: id,
+          class: classes,
+          role: :tab,
+          aria_label: title,
+          **attributes,
+          **options
+        )
+      end
+
+      @content&.call
+    end
+
+    private
+
+    attr_reader :title
+
+    ATTRIBUTES_MAP = {
+      open: {checked: true},
+      closed: true
+    }.freeze
+  end
+end