Merge pull request ruby-ui#34 from PhlexUI/add-pro-components

Add pro components

lib/phlex_ui/calendar.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar < Base
+    def initialize(selected_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+      @selected_date = selected_date
+      @input_id = input_id
+      @date_format = date_format
+      super(**attrs)
+    end
+
+    def template
+      div(**attrs) do
+        render PhlexUI::Calendar::Header.new do
+          render PhlexUI::Calendar::Title.new
+          render PhlexUI::Calendar::Prev.new
+          render PhlexUI::Calendar::Next.new
+        end
+        render PhlexUI::Calendar::Body.new # Where the calendar is rendered (Weekdays and Days)
+        render PhlexUI::Calendar::Weekdays.new # Template for the weekdays
+        render PhlexUI::Calendar::Days.new # Template for the days
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "p-3 space-y-4",
+        data: {
+          controller: "calendar",
+          calendar_selected_date_value: @selected_date&.to_s,
+          calendar_format_value: @date_format,
+          calendar_input_outlet: @input_id
+        }
+      }
+    end
+  end
+end

lib/phlex_ui/calendar/body.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar::Body < Base
+    def template
+      table(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          calendar_target: "calendar"
+        }
+      }
+    end
+  end
+end

lib/phlex_ui/calendar/days.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar::Days < Base
+    BASE_CLASS = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+
+    def template
+      render_selected_date_template
+      render_today_date_template
+      render_current_month_date_template
+      render_other_month_date_template
+    end
+
+    private
+
+    def render_selected_date_template
+      date_template("selectedDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: " click->calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "0",
+          type: "button",
+          aria_selected: "true"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_today_date_template
+      date_template("todayDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: " click->calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_current_month_date_template
+      date_template("currentMonthDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: " click->calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_other_month_date_template
+      date_template("otherMonthDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: " click->calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def date_template(target, &block)
+      template_tag(data: {calendar_target: target}) do
+        td(
+          class:
+                "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md",
+          role: "presentation",
+          &block
+        )
+      end
+    end
+
+    def default_attrs
+      {}
+    end
+  end
+end

lib/phlex_ui/calendar/header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar::Header < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex justify-center pt-1 relative items-center"
+      }
+    end
+  end
+end

lib/phlex_ui/calendar/next.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar::Next < Base
+    def template(&block)
+      button(**attrs) do
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        width: "15",
+        height: "15",
+        viewbox: "0 0 15 15",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-4 w-4"
+      ) do |s|
+        s.path(
+          d:
+                "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
+          fill: "currentColor",
+          fill_rule: "evenodd",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        name: "next-month",
+        aria_label: "Go to next month",
+        class:
+              "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1",
+        type: "button",
+        data_action: "click->calendar#nextMonth"
+      }
+    end
+  end
+end

lib/phlex_ui/calendar/prev.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar::Prev < Base
+    def template(&block)
+      button(**attrs) do
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        width: "15",
+        height: "15",
+        viewbox: "0 0 15 15",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-4 w-4"
+      ) do |s|
+        s.path(
+          d:
+                "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z",
+          fill: "currentColor",
+          fill_rule: "evenodd",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        name: "previous-month",
+        aria_label: "Go to previous month",
+        class:
+              "rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1",
+        type: "button",
+        data_action: "click->calendar#prevMonth"
+      }
+    end
+  end
+end

lib/phlex_ui/calendar/title.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar::Title < Base
+    def initialize(default: "Month Year", **attrs)
+      @default = default
+      super(**attrs)
+    end
+
+    def template
+      div(**attrs) { @default }
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm font-medium",
+        aria_live: "polite",
+        role: "presentation",
+        data: {
+          calendar_target: "title"
+        }
+      }
+    end
+  end
+end

lib/phlex_ui/calendar/weekdays.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Calendar::Weekdays < Base
+    DAYS = %w[Monday Tuesday Wednesday Thursday Friday Saturday Sunday].freeze
+
+    def template
+      template_tag(data: {calendar_target: "weekdaysTemplate"}) do
+        thead(**attrs) do
+          tr(class: "flex") do
+            DAYS.each do |day|
+              render_day(day)
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def render_day(day)
+      th(
+        scope: "col",
+        class: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        aria_label: day
+      ) { day[0..1] }
+    end
+
+    def default_attrs
+      {}
+    end
+  end
+end

lib/phlex_ui/command.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Command < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {controller: "command"}
+      }
+    end
+  end
+end

lib/phlex_ui/command/dialog.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUI
+  class Command::Dialog < Base
+    def template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {controller: "dialog"}
+      }
+    end
+  end
+end