ariadne_view_components 0.0.59 → 0.0.65

data/app/components/ariadne/ui/image/component.rb

@@ -0,0 +1,69 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Image
+      # @example Default
+      #
+      #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
+      #
+      # @example Helper
+      #
+      #   <%= ariadne_image(src: "https://github.com/github.png", alt: "GitHub") %>
+      #
+      # @example Lazy loading
+      #
+      #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
+      #
+      # @example Custom size
+      #
+      #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
+      #
+      # @param tag [Symbol, String] The rendered tag name
+      # @param src [String] The source url of the image.
+      # @param alt [String] Specifies an alternate text for the image.
+      # @param lazy [Boolean] Whether or not to lazily load the image.
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      class Component < Ariadne::BaseComponent
+        option :src
+        option :alt
+        option :size, default: -> { :original }
+        option :lazy, default: -> { false }
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size: @size), html_attrs[:class]].join(" "))
+
+          html_attrs[:src] = @src
+          html_attrs[:alt] = @alt
+
+          next unless @lazy
+
+          html_attrs[:loading] = :lazy
+          html_attrs[:decoding] = :async
+        end
+
+        style do
+          base do
+            ["ariadne-object-cover", "ariadne-object-center"]
+          end
+
+          variants do
+            size do
+              xs { "ariadne-w-4" }
+              sm { "ariadne-w-6" }
+              md { "ariadne-w-8" }
+              lg { "ariadne-w-12" }
+              xl { "ariadne-w-16" }
+            end
+          end
+        end
+
+        erb_template <<~ERB
+          <img class="<%= html_attrs[:class] %>" <%= html_attributes %> />
+        ERB
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/link/component.html.erb

@@ -0,0 +1,3 @@
+<a href="<%= href %>" class="<%= style(theme:, size:) %>" <%= html_attributes %>>
+<%= content %>
+</a>

data/app/components/ariadne/ui/link/component.rb

@@ -0,0 +1,56 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Link
+      class Component < Ariadne::BaseComponent
+        option :href
+
+        option :theme, default: proc { :base }
+        option :size, default: proc { :base }
+
+        include Ariadne::Behaviors::Tooltipable
+
+        style do
+          base do
+            [
+              "ariadne-inline-flex",
+              "ariadne-items-center",
+              "ariadne-border-b",
+              "ariadne-border-transparent",
+            ]
+          end
+
+          variants do
+            theme do
+              base do
+                [
+                  "[&>svg]:ariadne-text-zinc-400",
+                  "[&>svg]:dark:ariadne-text-zinc-600",
+                  "hover:ariadne-text-indigo-600",
+                  "dark:hover:ariadne-text-indigo-400",
+                  "hover:ariadne-border-indigo-600",
+                  "dark:hover:ariadne-border-indigo-400",
+                  "focus:ariadne-text-indigo-600",
+                  "dark:focus:ariadne-text-indigo-400",
+                  "focus:!ariadne-border-transparent",
+                  "active:ariadne-bg-indigo-700/10",
+                  "active:dark:ariadne-bg-indigo-300/10",
+                ]
+              end
+              nude { "" }
+              thick { "ariadne-font-semibold" }
+            end
+            size do
+              xs { "ariadne-text-xs ariadne-gap-0.5 [&>svg]:ariadne-size-3" }
+              sm { "ariadne-text-sm ariadne-gap-0.5 [&>svg]:ariadne-size-4" }
+              md { "ariadne-text-base ariadne-gap-1 [&>svg]:ariadne-size-4" }
+              lg { "ariadne-text-lg ariadne-gap-1 [&>svg]:ariadne-size-5" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/typography/component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag(tag_name, html_attrs) do %>
+    <%= content %>
+<% end %>

data/app/components/ariadne/ui/typography/component.rb

@@ -0,0 +1,41 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Typography
+      class Component < Ariadne::BaseComponent
+        option :type
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(type: @type), html_attrs[:class]].join(" "))
+        end
+
+        def tag_name
+          case type
+          when :heading
+            :h1
+          else
+            :span
+          end
+        end
+
+        style do
+          variants do
+            type do
+              heading do
+                [
+                  "ariadne-scroll-m-20",
+                  "ariadne-text-4xl",
+                  "ariadne-font-extrabold",
+                  "ariadne-tracking-tight",
+                  "lg:ariadne-text-5xl",
+                ]
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/frontend/ariadne/index.ts

@@ -0,0 +1,14 @@
+import '@github/auto-check-element'
+import '@github/auto-complete-element'
+import '@github/details-menu-element'
+import '@github/image-crop-element'
+import '@github/include-fragment-element'
+import '@github/markdown-toolbar-element'
+import '@github/relative-time-element'
+
+import '~/stylesheets/ariadne_view_components.css'
+import '~/stylesheets/typography.css'
+
+import './theme'
+
+export * from './stimulus_app'

data/app/frontend/ariadne/stimulus_app.ts

@@ -0,0 +1,53 @@
+import {Application, type ControllerConstructor} from '@hotwired/stimulus'
+
+const application = Application.start()
+
+application.debug = import.meta.env.DEV
+
+declare global {
+  interface Window {
+    Stimulus: Application
+  }
+}
+
+window.Stimulus = application
+
+// Force Vite to process component JS
+const componentModules = import.meta.glob(['../../components/**/component.ts'], {eager: true})
+import.meta.glob(['../../components/**/component.css'], {eager: true})
+
+for (const [path, module] of Object.entries(componentModules)) {
+  const dirs = path.split('/')
+
+  // Dropping ../../components and component.ts parts to end up
+  // with something like "ariadne-ui-component-name"
+  const name = dirs
+    .slice(3, dirs.length - 1)
+    .join('-')
+    .replaceAll('_', '-')
+    .toLocaleLowerCase()
+
+  application.register(
+    // @tag stimulus-id
+    name,
+    (module as {default: ControllerConstructor}).default,
+  )
+}
+
+const controllerModules = import.meta.glob(['~/controllers/*.ts'], {eager: true})
+
+for (const [path, module] of Object.entries(controllerModules)) {
+  const dirs = path.split('/')
+
+  // Dropping ../controllers to end up
+  // with something like "ariadne-component-name"
+  const name = dirs.slice(2, dirs.length).join('-').replace('.ts', '').replaceAll('_', '-').toLocaleLowerCase()
+
+  application.register(
+    // @tag stimulus-id
+    `ariadne-${name}`,
+    (module as {default: ControllerConstructor}).default,
+  )
+}
+
+export {application}

data/app/frontend/ariadne/theme.ts

@@ -0,0 +1,8 @@
+const userTheme = localStorage.getItem('theme') || ''
+const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+const themeCheck = () => {
+  if (userTheme === 'dark' || (!userTheme && systemTheme)) {
+    document.documentElement.classList.add('dark')
+  }
+}

data/app/frontend/controllers/tooltip.ts

@@ -0,0 +1,75 @@
+import {controllerFactory} from '@utils/createController'
+import {computePosition, arrow, offset, flip, shift} from '@floating-ui/dom'
+
+import '~/stylesheets/tippy.js/themes/tomato.css'
+
+export default class TooltipController extends controllerFactory<HTMLElement>()({
+  targets: {
+    activator: HTMLElement,
+    wrapper: HTMLDivElement,
+    tooltip: HTMLDivElement,
+    arrow: HTMLDivElement,
+  },
+}) {
+  async update() {
+    computePosition(this.activatorTarget, this.tooltipTarget, {
+      placement: 'top',
+      middleware: [offset(10), flip(), shift({padding: 5}), arrow({element: this.arrowTarget})],
+      // eslint-disable-next-line github/no-then
+    }).then(({x, y, placement, middlewareData}) => {
+      Object.assign(this.tooltipTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      // Reset any previously set styles on the arrow
+      Object.assign(this.arrowTarget.style, {
+        left: '',
+        top: '',
+        right: '',
+        bottom: '',
+      })
+
+      const {x: arrowX, y: arrowY} = middlewareData.arrow || {}
+      const primaryPlacement = placement.split('-')[0]
+
+      switch (primaryPlacement) {
+        case 'top':
+          Object.assign(this.arrowTarget.style, {
+            left: arrowX ? `${arrowX}px` : '',
+            bottom: '-4px', // Aligns arrow to the bottom edge of the tooltip
+          })
+          break
+        case 'bottom':
+          Object.assign(this.arrowTarget.style, {
+            left: arrowX ? `${arrowX}px` : '',
+            top: '-4px', // Aligns arrow to the top edge of the tooltip
+          })
+          break
+        case 'left':
+          Object.assign(this.arrowTarget.style, {
+            top: arrowY ? `${arrowY}px` : '',
+            right: '-4px', // Aligns arrow to the right edge of the tooltip
+          })
+          break
+        case 'right':
+          Object.assign(this.arrowTarget.style, {
+            top: arrowY ? `${arrowY}px` : '',
+            left: '-4px', // Aligns arrow to the left edge of the tooltip
+          })
+          break
+      }
+    })
+  }
+
+  showTooltip(_event: Event) {
+    this.wrapperTarget.classList.add('block')
+    this.wrapperTarget.classList.remove('hidden')
+    this.update()
+  }
+
+  hideTooltip(_event: Event) {
+    this.wrapperTarget.classList.add('hidden')
+    this.wrapperTarget.classList.remove('block')
+  }
+}

data/app/frontend/entrypoints/application.ts

@@ -0,0 +1 @@
+import '~/ariadne'

data/app/frontend/stylesheets/ariadne_view_components.css

@@ -0,0 +1,18 @@
+@import 'scrollbar.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Fix summary element usage in Safari only */
+summary::-webkit-details-marker {
+  display: none;
+}
+
+@media (prefers-reduced-motion) {
+  /* Disabling animations everywhere at once */
+  * {
+    animation-duration: 0.01s;
+    transition-duration: 0.01s;
+  }
+}

data/app/frontend/stylesheets/scrollbar.css

@@ -0,0 +1,28 @@
+.scroll {
+  scrollbar-color: theme('colors.gray.500/20') transparent;
+
+  *::-webkit-scrollbar {
+    @apply ariadne-h-4 ariadne-w-2;
+  }
+
+  *::-webkit-scrollbar:horizontal {
+    @apply ariadne-h-2 ariadne-w-4;
+  }
+
+  *::-webkit-scrollbar-track {
+    @apply ariadne-bg-transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    @apply ariadne-bg-gray-500/20 hover:ariadne-bg-gray-500/40;
+    @apply ariadne-transition-opacity;
+  }
+}
+
+.scrollbar-trigger *::-webkit-scrollbar-thumb {
+  @apply md:ariadne-invisible;
+}
+
+.scrollbar-trigger:hover *::-webkit-scrollbar-thumb {
+  @apply md:ariadne-visible;
+}

data/app/frontend/stylesheets/tippy.js/themes/tomato.css

@@ -0,0 +1,4 @@
+.tippy-box.tomato-theme {
+  background-color: tomato;
+  color: yellow;
+}

data/app/frontend/stylesheets/typography.css

@@ -0,0 +1,117 @@
+.typography p,
+.typography ol,
+.typography ul {
+  max-width: 600px;
+}
+
+.typography a {
+  @apply ariadne-font-medium ariadne-underline;
+}
+
+.typography strong {
+  @apply ariadne-font-bold;
+}
+
+.typography ol {
+  @apply ariadne-pl-6 ariadne-relative ariadne-list-none;
+
+  counter-reset: list-number;
+}
+
+.typography ol > li::before {
+  @apply ariadne-absolute ariadne-left-0 ariadne-overflow-hidden ariadne-w-5 ariadne-text-right;
+
+  counter-increment: list-number;
+  content: counter(list-number) '.';
+}
+
+.typography ul {
+  @apply ariadne-pl-6 ariadne-relative ariadne-list-none;
+}
+
+.typography ul > li::before {
+  @apply ariadne-absolute ariadne-left-0 ariadne-overflow-hidden ariadne-w-5 ariadne-text-center;
+
+  content: '\25AA';
+}
+
+.typography dt {
+  @apply ariadne-font-semibold;
+}
+
+.typography hr {
+  @apply ariadne-border-t;
+}
+
+.typography blockquote {
+  @apply ariadne-font-medium ariadne-italic ariadne-border-l-4 ariadne-pl-2;
+}
+
+.typography blockquote p:first-of-type::before {
+  content: open-quote;
+}
+
+.typography blockquote p:last-of-type::after {
+  content: close-quote;
+}
+
+.typography kbd {
+  @apply ariadne-font-medium ariadne-text-inherit;
+
+  font-family: inherit;
+}
+
+.typography code {
+  @apply ariadne-font-mono ariadne-font-semibold;
+}
+
+.typography pre {
+  @apply ariadne-px-3 ariadne-py-2 ariadne-rounded-lg ariadne-bg-zinc-300 dark:ariadne-bg-zinc-700 ariadne-bg-opacity-10 dark:ariadne-bg-opacity-10 ariadne-font-mono ariadne-overflow-x-auto;
+}
+
+.typography pre code {
+  @apply ariadne-text-inherit;
+
+  font: inherit;
+}
+
+.typography :not(pre) > code {
+  @apply ariadne-p-1 ariadne-bg-zinc-300 dark:ariadne-bg-zinc-700 ariadne-bg-opacity-10 dark:ariadne-bg-opacity-10 ariadne-rounded-lg;
+}
+
+.typography pre code::before,
+.typography pre code::after {
+  @apply ariadne-content-none;
+}
+
+.typography table {
+  @apply ariadne-w-full ariadne-table-auto ariadne-text-left;
+}
+
+.typography thead {
+  @apply ariadne-border-b ariadne-border-b-slate-50/10;
+}
+
+.typography thead th {
+  @apply ariadne-font-semibold ariadne-align-bottom ariadne-py-1;
+}
+
+.typography tbody tr {
+  @apply ariadne-border-b ariadne-border-b-slate-50/10;
+}
+
+.typography tbody tr:last-child {
+  @apply ariadne-border-b-0;
+}
+
+.typography tbody td {
+  @apply ariadne-align-baseline ariadne-py-1;
+}
+
+.typography tfoot {
+  @apply ariadne-border-t;
+}
+
+.typography tfoot td {
+  @apply ariadne-align-top;
+}

data/app/frontend/utils/createController.ts

@@ -0,0 +1,95 @@
+import type * as H from 'hotscript'
+
+import {Controller} from '@hotwired/stimulus'
+import {type Fn} from 'hotscript'
+
+type ObjIterator<T, Y extends Fn> = H.Pipe<
+  T,
+  [H.Objects.Entries, H.Unions.ToTuple, H.Tuples.FlatMap<Y>, H.Tuples.ToUnion, H.Objects.FromEntries]
+>
+
+/*
+ * Covering `has<Name>` and `<name>Value` for Stimulus values.
+ */
+interface ValuesFn extends Fn {
+  return: [
+    [`${this['arg0'][0]}Value`, ReturnType<this['arg0'][1]>],
+    [`has${Capitalize<this['arg0'][0]>}Value`, boolean],
+  ]
+}
+/*
+ * Covering `has<Name>`, `<name>Target` and `<name>Targets` for Stimulus targets.
+ */
+interface TargetsFn extends Fn {
+  return: [
+    [`has${Capitalize<this['arg0'][0]>}Target`, boolean],
+    [`${this['arg0'][0]}Target`, this['arg0'][1] extends null ? HTMLElement : InstanceType<this['arg0'][1]>],
+    [`${this['arg0'][0]}Targets`, this['arg0'][1] extends null ? HTMLElement[] : InstanceType<this['arg0'][1]>[]],
+  ]
+}
+
+type TargetsConfig = Record<string, (new () => HTMLElement) | null>
+type ValuesConfig = Record<string, unknown>
+
+type ControllerWithTargets<E extends HTMLElement, T extends TargetsConfig, Y extends ValuesConfig> = Controller<E> &
+  ObjIterator<T, TargetsFn> &
+  ObjIterator<Y, ValuesFn>
+
+/**
+ * Creates a new Stimulus controller class with automatically defined target properties.
+ * The function takes an array of target identifiers, which can be either strings or tuples.
+ * For each target, it creates three properties on the controller class:
+ * - `<name>Target` for single target elements,
+ * - `<name>Targets` for all target elements,
+ * - `has<Name>Target` as a boolean indicating the presence of the target.
+ *
+ * The single target elements are typed according to the provided class in the tuple,
+ * or as HTMLElement by default if a string is provided.
+ *
+ * @returns {Function} A new controller class extending the base Stimulus controller with the defined target properties.
+ *
+ * @example
+ * export default class extends controllerFactory<HTMLDivElement>()({
+ *  targets: {
+ *    one: null,
+ *    two: HTMLInputElement,
+ *    three: HTMLButtonElement
+ *  },
+ *  values: {
+ *    key: String,
+ *  }
+ *}) {
+ *  example() {
+ *    this.oneTarget      // <- HTMLElement
+ *    this.twoTarget      // <- HTMLInputElement
+ *    this.threeTarget    // <- HTMLButtonElement
+ *
+ *    this.hasOneTarget   // <- boolean
+ *    this.oneTargets     // <- HTMLElement[]
+ *
+ *    this.hasKeyValue    // <- boolean
+ *    this.keyValue       // <- string
+ *
+ *    this.element        // <- HTMLDivElement
+ *  }
+ *}
+ */
+export function controllerFactory<E extends HTMLElement>() {
+  return function createControllerClass<
+    const T extends TargetsConfig = TargetsConfig,
+    const Y extends ValuesConfig = ValuesConfig,
+  >({
+    targets,
+    values,
+  }: {
+    targets?: T
+    values?: Y
+  } = {}): new () => ControllerWithTargets<E, T, Y> {
+    class ExtendedController extends Controller<E> {
+      static targets = Object.keys(targets ?? {})
+      static values = values ?? {}
+    }
+
+    return ExtendedController as unknown as new () => ControllerWithTargets<E, T, Y>
+  }
+}

data/app/helpers/ariadne/form_helper.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # :nocov:
+  # :nodoc:
+  module FormHelper
+    def ariadne_form_with(**kwargs, &block)
+      form_with(**kwargs, skip_default_ids: false, builder: Ariadne::Forms::Builder, &block)
+    end
+
+    def ariadne_fields_for(record_name, record_object = nil, options = {}, &block)
+      fields_for(
+        record_name,
+        record_object,
+        options.merge(
+          skip_default_ids: false,
+          builder: Ariadne::Forms::Builder,
+        ),
+        &block
+      )
+    end
+
+    def inline_form(*args, &block)
+      Ariadne::Form.inline_form(*args, &block)
+    end
+
+    def render_inline_form(*args, &block)
+      render(inline_form(*args, &block))
+    end
+  end
+end