shadcn_phlexcomponents 0.1.18 → 0.1.19

data/app/typescript/controllers/select_controller.ts

@@ -17,6 +17,8 @@ import {
 import { Controller } from '@hotwired/stimulus'
 
 const SelectController = class extends Controller<HTMLElement> {
+  static name = 'select'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/slider_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import noUiSlider, { API, Options } from 'nouislider'
 
 const SliderController = class extends Controller<HTMLElement> {
+  static name = 'slider'
+
   // targets
   static targets = ['slider', 'hiddenInput', 'endHiddenInput']
   declare readonly sliderTarget: HTMLInputElement

data/app/typescript/controllers/switch_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const SwitchController = class extends Controller<HTMLElement> {
+  static name = 'switch'
+
   // targets
   static targets = ['input', 'thumb']
   declare readonly inputTarget: HTMLInputElement

data/app/typescript/controllers/tabs_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import { getNextEnabledIndex, getPreviousEnabledIndex } from '../utils'
 
 const TabsController = class extends Controller {
+  static name = 'tabs'
+
   // targets
   static targets = ['trigger', 'content']
   declare readonly triggerTargets: HTMLButtonElement[]

data/app/typescript/controllers/theme_switcher_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const ThemeSwitcherController = class extends Controller {
+  static name = 'theme-switcher'
+
   initialize() {
     if (
       localStorage.theme === 'dark' ||

data/app/typescript/controllers/toast_container_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import DOMPurify from 'dompurify'
 
 const ToastContainerController = class extends Controller<HTMLElement> {
+  static name = 'toast-container'
+
   addToast({
     title,
     description,

data/app/typescript/controllers/toast_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import { ANIMATION_OUT_DELAY } from '../utils'
 
 const ToastController = class extends Controller<HTMLElement> {
+  static name = 'toast'
+
   // custom properties
   declare duration: number
   declare closeTimeout: number

data/app/typescript/controllers/toggle_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const ToggleController = class extends Controller<HTMLElement> {
+  static name = 'toggle'
+
   // values
   static values = {
     isOn: Boolean,

data/app/typescript/controllers/toggle_group_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const ToggleController = class extends Controller<HTMLElement> {
+  static name = 'toggle-group'
+
   // values
   static values = {
     isOn: Boolean,

data/app/typescript/controllers/tooltip_controller.ts

@@ -4,6 +4,8 @@ import { initFloatingUi } from '../utils/floating_ui'
 import { showContent, hideContent } from '../utils'
 
 const TooltipController = class extends Controller<HTMLElement> {
+  static name = 'tooltip'
+
   // targets
   static targets = ['trigger', 'content', 'contentContainer', 'arrow']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/shadcn_phlexcomponents.ts

@@ -1,61 +1,27 @@
-import { AccordionController } from './controllers/accordion_controller'
-import { AlertDialogController } from './controllers/alert_dialog_controller'
-import { AvatarController } from './controllers/avatar_controller'
-import { CheckboxController } from './controllers/checkbox_controller'
-import { CollapsibleController } from './controllers/collapsible_controller'
-import { ComboboxController } from './controllers/combobox_controller'
-import { CommandController } from './controllers/command_controller'
-import { DatePickerController } from './controllers/date_picker_controller'
-import { DateRangePickerController } from './controllers/date_range_picker_controller'
-import { DialogController } from './controllers/dialog_controller'
-import { DropdownMenuController } from './controllers/dropdown_menu_controller'
-import { DropdownMenuSubController } from './controllers/dropdown_menu_sub_controller'
-import { FormFieldController } from './controllers/form_field_controller'
-import { HoverCardController } from './controllers/hover_card_controller'
-import { LoadingButtonController } from './controllers/loading_button_controller'
-import { PopoverController } from './controllers/popover_controller'
-import { ProgressController } from './controllers/progress_controller'
-import { RadioGroupController } from './controllers/radio_group_controller'
-import { SelectController } from './controllers/select_controller'
-import SidebarController from './controllers/sidebar_controller'
-import SidebarTriggerController from './controllers/sidebar_trigger_controller'
-import { SliderController } from './controllers/slider_controller'
-import { SwitchController } from './controllers/switch_controller'
-import { TabsController } from './controllers/tabs_controller'
-import { ThemeSwitcherController } from './controllers/theme_switcher_controller'
-import { ToastContainerController } from './controllers/toast_container_controller'
-import { ToastController } from './controllers/toast_controller'
-import { ToggleController } from './controllers/toggle_controller'
-import { TooltipController } from './controllers/tooltip_controller'
-
-export default {
-  accordion: AccordionController,
-  'alert-dialog': AlertDialogController,
-  avatar: AvatarController,
-  checkbox: CheckboxController,
-  collapsible: CollapsibleController,
-  combobox: ComboboxController,
-  command: CommandController,
-  'date-picker': DatePickerController,
-  'date-range-picker': DateRangePickerController,
-  dialog: DialogController,
-  'dropdown-menu': DropdownMenuController,
-  'dropdown-menu-sub': DropdownMenuSubController,
-  'form-field': FormFieldController,
-  'hover-card': HoverCardController,
-  'loading-button': LoadingButtonController,
-  popover: PopoverController,
-  progress: ProgressController,
-  'radio-group': RadioGroupController,
-  select: SelectController,
-  sidebar: SidebarController,
-  'sidebar-trigger': SidebarTriggerController,
-  slider: SliderController,
-  switch: SwitchController,
-  tabs: TabsController,
-  'theme-switcher': ThemeSwitcherController,
-  'toast-container': ToastContainerController,
-  toast: ToastController,
-  toggle: ToggleController,
-  tooltip: TooltipController,
-}
+export { AccordionController } from './controllers/accordion_controller'
+export { AlertDialogController } from './controllers/alert_dialog_controller'
+export { AvatarController } from './controllers/avatar_controller'
+export { CheckboxController } from './controllers/checkbox_controller'
+export { CollapsibleController } from './controllers/collapsible_controller'
+export { ComboboxController } from './controllers/combobox_controller'
+export { CommandController } from './controllers/command_controller'
+export { DatePickerController } from './controllers/date_picker_controller'
+export { DateRangePickerController } from './controllers/date_range_picker_controller'
+export { DialogController } from './controllers/dialog_controller'
+export { DropdownMenuController } from './controllers/dropdown_menu_controller'
+export { DropdownMenuSubController } from './controllers/dropdown_menu_sub_controller'
+export { FormFieldController } from './controllers/form_field_controller'
+export { HoverCardController } from './controllers/hover_card_controller'
+export { LoadingButtonController } from './controllers/loading_button_controller'
+export { PopoverController } from './controllers/popover_controller'
+export { ProgressController } from './controllers/progress_controller'
+export { RadioGroupController } from './controllers/radio_group_controller'
+export { SelectController } from './controllers/select_controller'
+export { SliderController } from './controllers/slider_controller'
+export { SwitchController } from './controllers/switch_controller'
+export { TabsController } from './controllers/tabs_controller'
+export { ThemeSwitcherController } from './controllers/theme_switcher_controller'
+export { ToastContainerController } from './controllers/toast_container_controller'
+export { ToastController } from './controllers/toast_controller'
+export { ToggleController } from './controllers/toggle_controller'
+export { TooltipController } from './controllers/tooltip_controller'

data/app/typescript/utils/index.ts

@@ -1,3 +1,4 @@
+import { Application } from '@hotwired/stimulus'
 import type { DropdownMenu } from '../controllers/dropdown_menu_controller'
 import type { Select } from '../controllers/select_controller'
 import type { Popover } from '../controllers/popover_controller'
@@ -10,6 +11,12 @@ import type { Tooltip } from '../controllers/tooltip_controller'
 import type { DatePicker } from '../controllers/date_picker_controller'
 import type { DateRangePicker } from '../controllers/date_range_picker_controller'
 
+declare global {
+  interface Window {
+    Stimulus: Application
+  }
+}
+
 const ANIMATION_OUT_DELAY = 100
 const ON_OPEN_FOCUS_DELAY = 100
 const ON_CLOSE_FOCUS_DELAY = 50

data/lib/install/upgrade_shadcn_phlexcomponents.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+components_path = File.expand_path("../shadcn_phlexcomponents/components", __dir__)
+components_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/components")
+stimulus_js_controllers_path = File.expand_path("../../app/javascript", __dir__)
+stimulus_ts_controllers_path = File.expand_path("../../app/typescript", __dir__)
+stimulus_controllers_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/javascript")
+css_path = File.expand_path("../../app/stylesheets", __dir__)
+css_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/stylesheets")
+
+say "Running the upgrade command will copy a lot of files to your working directory.", :blue
+say "Please make sure to commit or stash your existing changes in your working directory.", :blue
+
+if ENV["ENVIRONMENT"] == "test"
+  directory(components_path, components_install_path)
+  directory(stimulus_js_controllers_path, stimulus_controllers_install_path)
+  directory(css_path, css_install_path)
+elsif yes?("Do you want to continue? (y/n)")
+  using_typescript = yes?("Are you using Typescript?")
+
+  if using_typescript
+    directory(stimulus_ts_controllers_path, stimulus_controllers_install_path)
+  else
+    directory(stimulus_js_controllers_path, stimulus_controllers_install_path)
+  end
+  directory(components_path, components_install_path)
+  directory(css_path, css_install_path)
+end

data/lib/shadcn_phlexcomponents/components/accordion.rb

@@ -37,7 +37,14 @@ module ShadcnPhlexcomponents
   end
 
   class AccordionItem < Base
-    class_variants(base: "border-b last:border-b-0")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.accordion&.dig(:item) ||
+        {
+          base: "border-b last:border-b-0",
+        }
+      ),
+    )
 
     def initialize(value:, **attributes)
       @value = value
@@ -60,12 +67,18 @@ module ShadcnPhlexcomponents
 
   class AccordionTrigger < Base
     class_variants(
-      base: <<~HEREDOC,
-        focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between
-        gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline
-        focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.accordion&.dig(:trigger) ||
+        {
+          base: <<~HEREDOC,
+            focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between
+            gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline
+            focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180
+          HEREDOC
+        }
+      ),
     )
+
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
       super(**attributes)
@@ -103,7 +116,14 @@ module ShadcnPhlexcomponents
   end
 
   class AccordionContent < Base
-    class_variants(base: "pt-0 pb-4")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.accordion&.dig(:content) ||
+        {
+          base: "pt-0 pb-4",
+        }
+      ),
+    )
 
     def initialize(aria_id: :nil, **attributes)
       @aria_id = aria_id
@@ -111,8 +131,29 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(
-        class: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      AccordionContentContainer(aria_id: @aria_id) do
+        div(**@attributes, &)
+      end
+    end
+  end
+
+  class AccordionContentContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.accordion&.dig(:content_container) ||
+        {
+          base: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+        }
+      ),
+    )
+
+    def initialize(aria_id: :nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
         id: "#{@aria_id}-content",
         role: "region",
         aria: {
@@ -122,9 +163,11 @@ module ShadcnPhlexcomponents
           state: "closed",
           accordion_target: "content",
         },
-      ) do
-        div(**@attributes, &)
-      end
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
     end
   end
 end

data/lib/shadcn_phlexcomponents/components/alert.rb

@@ -3,20 +3,25 @@
 module ShadcnPhlexcomponents
   class Alert < Base
     class_variants(
-      base: <<~HEREDOC,
-        relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]
-        grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5
-        [&>svg]:text-current
-      HEREDOC
-      variants: {
-        variant: {
-          default: "bg-card text-card-foreground",
-          destructive: "text-destructive bg-card [&>svg]:text-current *:data-[shadcn-phlexcomponents=alert-description]:text-destructive/90",
-        },
-      },
-      defaults: {
-        variant: :default,
-      },
+      **(
+        ShadcnPhlexcomponents.configuration.alert&.dig(:root) ||
+        {
+          base: <<~HEREDOC,
+            relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]
+            grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5
+            [&>svg]:text-current
+          HEREDOC
+          variants: {
+            variant: {
+              default: "bg-card text-card-foreground",
+              destructive: "text-destructive bg-card [&>svg]:text-current *:data-[shadcn-phlexcomponents=alert-description]:text-destructive/90",
+            },
+          },
+          defaults: {
+            variant: :default,
+          },
+        }
+      ),
     )
 
     def initialize(variant: :default, **attributes)
@@ -42,7 +47,14 @@ module ShadcnPhlexcomponents
   end
 
   class AlertTitle < Base
-    class_variants(base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.alert&.dig(:title) ||
+        {
+          base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -50,7 +62,14 @@ module ShadcnPhlexcomponents
   end
 
   class AlertDescription < Base
-    class_variants(base: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.alert&.dig(:description) ||
+        {
+          base: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/alert_dialog.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class AlertDialog < Base
-    class_variants(base: "inline-flex max-w-fit")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.alert_dialog&.dig(:root) ||
+        {
+          base: "inline-flex max-w-fit",
+        }
+      ),
+    )
 
     def initialize(open: false, **attributes)
       @open = open
@@ -105,13 +112,18 @@ module ShadcnPhlexcomponents
 
   class AlertDialogContent < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-background data-[state=open]:animate-in data-[state=closed]:animate-out
-        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
-        data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]
-        translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg
-        pointer-events-auto outline-none
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.alert_dialog&.dig(:content) ||
+        {
+          base: <<~HEREDOC,
+            bg-background data-[state=open]:animate-in data-[state=closed]:animate-out
+            data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+            data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]
+            translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg
+            pointer-events-auto outline-none
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(aria_id: nil, **attributes)
@@ -141,7 +153,14 @@ module ShadcnPhlexcomponents
   end
 
   class AlertDialogHeader < Base
-    class_variants(base: "flex flex-col gap-2 text-center sm:text-left")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.alert_dialog&.dig(:header) ||
+        {
+          base: "flex flex-col gap-2 text-center sm:text-left",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -149,7 +168,14 @@ module ShadcnPhlexcomponents
   end
 
   class AlertDialogTitle < Base
-    class_variants(base: "text-lg font-semibold")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.alert_dialog&.dig(:title) ||
+        {
+          base: "text-lg font-semibold",
+        }
+      ),
+    )
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -168,7 +194,14 @@ module ShadcnPhlexcomponents
   end
 
   class AlertDialogDescription < Base
-    class_variants(base: "text-sm text-muted-foreground")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.alert_dialog&.dig(:description) ||
+        {
+          base: "text-sm text-muted-foreground",
+        }
+      ),
+    )
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -187,7 +220,14 @@ module ShadcnPhlexcomponents
   end
 
   class AlertDialogFooter < Base
-    class_variants(base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.alert_dialog&.dig(:footer) ||
+        {
+          base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/aspect_ratio.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class AspectRatio < Base
-    class_variants(base: "absolute inset-0")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.aspect_ratio&.dig(:root) ||
+        {
+          base: "absolute inset-0",
+        }
+      ),
+    )
 
     def initialize(ratio: "1/1", **attributes)
       ratio_arr = ratio.split("/").map(&:to_f)
@@ -11,9 +18,33 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: "relative w-full", style: { "padding-bottom": "#{100 / @ratio}%" }) do
+      AspectRatioContainer(ratio: @ratio) do
         div(**@attributes, &)
       end
     end
   end
+
+  class AspectRatioContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.aspect_ratio&.dig(:container) ||
+        {
+          base: "relative w-full",
+        }
+      ),
+    )
+
+    def initialize(ratio:, **attributes)
+      @ratio = ratio
+      super(**attributes)
+    end
+
+    def default_attributes
+      { style: { "padding-bottom": "#{100 / @ratio}%" } }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/components/avatar.rb

@@ -2,11 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Avatar < Base
-    class_variants(base: "relative flex size-8 shrink-0 overflow-hidden rounded-full")
-
-    def initialize(**attributes)
-      super(**attributes)
-    end
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.avatar&.dig(:root) ||
+        {
+          base: "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        }
+      ),
+    )
 
     def image(**attributes, &)
       AvatarImage(**attributes, &)
@@ -30,7 +33,14 @@ module ShadcnPhlexcomponents
   end
 
   class AvatarImage < Base
-    class_variants(base: "aspect-square size-full")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.avatar&.dig(:image) ||
+        {
+          base: "aspect-square size-full",
+        }
+      ),
+    )
 
     def default_attributes
       {
@@ -46,7 +56,14 @@ module ShadcnPhlexcomponents
   end
 
   class AvatarFallback < Base
-    class_variants(base: "bg-muted flex size-full items-center justify-center rounded-full")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.avatar&.dig(:fallback) ||
+        {
+          base: "bg-muted flex size-full items-center justify-center rounded-full",
+        }
+      ),
+    )
 
     def default_attributes
       {