shadcn_phlexcomponents 0.1.17 → 0.1.19

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
@@ -67,7 +69,7 @@ const TooltipController = class extends Controller<HTMLElement> {
         arrowElement: this.arrowTarget,
         side: this.contentTarget.dataset.side,
         align: this.contentTarget.dataset.align,
-        sideOffset: 8,
+        sideOffset: 4,
       })
     } else {
       hideContent({

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/command.ts

@@ -320,7 +320,6 @@ const renderRemoteResults = (
   controller: Command | Combobox,
   data: { html: string; group?: string }[],
 ) => {
-  console.log('data', data)
   data.forEach((item) => {
     const tempDiv = document.createElement('div')
     tempDiv.innerHTML = item.html
@@ -391,7 +390,6 @@ const renderRemoteResults = (
 
   controller.highlightItemByIndex(0)
 
-  console.log('controller.filteredItems', controller.filteredItems)
   if (controller.filteredItems.length > 0) {
     hideEmpty(controller)
   } else {

data/app/typescript/utils/floating_ui.ts

@@ -8,8 +8,11 @@ import {
   Placement,
   Middleware,
   arrow,
+  limitShift,
 } from '@floating-ui/dom'
 
+// https://github.com/radix-ui/primitives/blob/13e76f08f7afdea623aebfd3c55a7e41ae8d8078/packages/react/popper/src/popper.tsx
+
 const OPPOSITE_SIDE = {
   top: 'bottom',
   right: 'left',
@@ -62,8 +65,14 @@ const initFloatingUi = ({
   }
 
   const middleware = [
+    offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+    shift({
+      mainAxis: true,
+      crossAxis: false,
+      limiter: limitShift(),
+    }),
+    flip({ crossAxis: 'alignment', fallbackAxisSideDirection: 'end' }),
     transformOrigin({ arrowHeight, arrowWidth }),
-    offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }),
     size({
       apply: ({ elements, rects, availableWidth, availableHeight }) => {
         const { width: anchorWidth, height: anchorHeight } = rects.reference
@@ -86,27 +95,9 @@ const initFloatingUi = ({
         )
       },
     }),
+    arrowElement && arrow({ element: arrowElement, padding: 0 }),
   ]
 
-  const flipMiddleware = flip({
-    // Ensure we flip to the perpendicular axis if it doesn't fit
-    // on narrow viewports.
-    crossAxis: 'alignment',
-    fallbackAxisSideDirection: 'end', // or 'start'
-  })
-  const shiftMiddleware = shift()
-
-  // Prioritize flip over shift for edge-aligned placements only.
-  if (placement.includes('-')) {
-    middleware.push(flipMiddleware, shiftMiddleware)
-  } else {
-    middleware.push(shiftMiddleware, flipMiddleware)
-  }
-
-  if (arrowElement) {
-    middleware.push(arrow({ element: arrowElement, padding: 0 }))
-  }
-
   return autoUpdate(referenceElement, floatingElement, () => {
     computePosition(referenceElement, floatingElement, {
       placement: placement as Placement,

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'
@@ -9,7 +10,6 @@ import type { HoverCard } from '../controllers/hover_card_controller'
 import type { Tooltip } from '../controllers/tooltip_controller'
 import type { DatePicker } from '../controllers/date_picker_controller'
 import type { DateRangePicker } from '../controllers/date_range_picker_controller'
-import { Application } from '@hotwired/stimulus'
 
 declare global {
   interface Window {

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: {
@@ -120,11 +161,13 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          accordion_target: "content"
+          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
@@ -50,9 +57,9 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "alert-dialog",
-          alert_dialog_is_open_value: @open.to_s
-        }
-      }  
+          alert_dialog_is_open_value: @open.to_s,
+        },
+      }
     end
 
     def view_template(&)
@@ -79,10 +86,10 @@ module ShadcnPhlexcomponents
           expanded: "false",
           controls: "#{@aria_id}-content",
         },
-        data: { 
+        data: {
           as_child: @as_child.to_s,
           alert_dialog_target: "trigger",
-          action: "click->alert-dialog#open"
+          action: "click->alert-dialog#open",
         },
       }
     end
@@ -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)
@@ -130,7 +142,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          alert_dialog_target: "content"
+          alert_dialog_target: "content",
         },
       }
     end
@@ -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