ariadne_view_components 0.0.64 → 0.0.65

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 559de735ef06bf1761862479d159bba1e22b2db11d1e673dd800b3d17ba02d1f
-  data.tar.gz: 26c2fa077d5b3d0891017cf88ca31bfb40560ba3b210f0516033a89989550e52
+  metadata.gz: 25ccf8068907120ea6f4590719bb2062ff4a38ce97ebb3846ef5a28c1e5cb25f
+  data.tar.gz: 3d28c350db0b1d7c0c295e64e6cf06e8dfe4a636461dd52214bf02b4b56205dc
 SHA512:
-  metadata.gz: db0f794f45094885e5e2d5c5fc3a645a3a1e6ab03fb2c8de2245317f88bb2835af138ad151831971643320cdcff4cc42e0b3dd221577eff2e35ce543a4ae5e27
-  data.tar.gz: 2de4beedc7bc2239bb226b487c0f3949cc120493387d9655fdc5ed230fa2d9e19f50b7a8df6fad8d78c1506898f6751e287098a6ecbdc0ac1af5da4b31b84d51
+  metadata.gz: b87643f46b71707855adffca18747d9e284f876158dff83a7fcab9223d09127f48a4e6ea9f3beed0bdfae7bdfeee043fd51cfe95c864805be79691173495b988
+  data.tar.gz: 5f9bfdd0743f61bc4a98c3c891a8bf982efcdb124bd7846a78a3a9dcd1ff486d27d5b11162b85c81685f155fc4d47523b0bdc393625c3365ef2a87706c6dafdd

data/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [v0.0.64] - 05-04-2024
+**Full Changelog**: https://github.com/yettoapp/ariadne/compare/v0.0.63.1...v0.0.64
 ## [v0.0.63.1] - 05-04-2024
 **Full Changelog**: https://github.com/yettoapp/ariadne/compare/v0.0.63...v0.0.63.1
 ## [v0.0.63] - 05-04-2024

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

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.64"
+    VERSION = "0.0.65"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.64
+  version: 0.0.65
 platform: ruby
 authors:
 - Garen J. Torikian
@@ -122,8 +122,12 @@ files:
 - LICENSE.txt
 - README.md
 - app/assets/javascripts/ariadne_view_components.js
+- app/assets/javascripts/ariadne_view_components.js.br
+- app/assets/javascripts/ariadne_view_components.js.gz
 - app/assets/javascripts/ariadne_view_components.js.map
 - app/assets/stylesheets/ariadne_view_components.css
+- app/assets/stylesheets/ariadne_view_components.css.br
+- app/assets/stylesheets/ariadne_view_components.css.gz
 - app/components/ariadne/ariadne-form.ts
 - app/components/ariadne/base_component.rb
 - app/components/ariadne/behaviors/tooltipable.rb
@@ -172,6 +176,17 @@ files:
 - app/components/ariadne/ui/link/component.rb
 - app/components/ariadne/ui/typography/component.html.erb
 - app/components/ariadne/ui/typography/component.rb
+- app/frontend/ariadne/index.ts
+- app/frontend/ariadne/stimulus_app.ts
+- app/frontend/ariadne/theme.ts
+- app/frontend/controllers/tooltip.ts
+- app/frontend/entrypoints/application.ts
+- app/frontend/stylesheets/ariadne_view_components.css
+- app/frontend/stylesheets/scrollbar.css
+- app/frontend/stylesheets/tippy.js/themes/tomato.css
+- app/frontend/stylesheets/typography.css
+- app/frontend/utils/createController.ts
+- app/helpers/ariadne/form_helper.rb
 - app/lib/ariadne/attributes_helper.rb
 - app/lib/ariadne/class_name_helper.rb
 - app/lib/ariadne/fetch_or_fallback_helper.rb