ariadne_view_components 0.0.10-x86_64-linux

data/app/assets/javascripts/clipboard-copy-component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

data/app/assets/javascripts/comment-component.d.ts

@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus';
+export default class CommentComponent extends Controller {
+    static targets: string[];
+    readonly commentComponentTarget: HTMLDivElement;
+    readonly tabBarComponentTarget: HTMLElement;
+    readonly tabTargets: [HTMLButtonElement];
+    SELECTED_TAB_CLASSES: string[];
+    PUBLIC_BACKGROUND_COLOR: string;
+    INTERNAL_BACKGROUND_COLOR: string;
+    connect(): void;
+    toggleTab(): void;
+    toggleBackgrounds(tab: HTMLButtonElement): void;
+}

data/app/assets/javascripts/rich-text-area-component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class RichTextArea extends Controller {
+    connect(): void;
+}

data/app/assets/javascripts/slideover-component.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    static targets: string[];
+    readonly expandableTarget: HTMLDivElement;
+    readonly expandWrapperTarget: HTMLDivElement;
+    readonly slidePanelTargets: [HTMLDivElement];
+    readonly buttonWrapperTarget: HTMLDivElement;
+    toggle(): void;
+}

data/app/assets/javascripts/time-ago-component.d.ts

@@ -0,0 +1 @@
+import '@github/time-elements';

data/app/assets/javascripts/time_ago_component.d.ts

@@ -0,0 +1 @@
+import '@github/time-elements';

data/app/assets/javascripts/tooltip-component.d.ts

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus';
+import type { Instance, Placement } from '@popperjs/core';
+export default class TooltipComponent extends Controller {
+    static targets: string[];
+    readonly triggerTarget: HTMLElement;
+    readonly tooltipTarget: HTMLElement;
+    static values: {
+        placement: {
+            type: StringConstructor;
+            default: string;
+        };
+        offset: {
+            type: ArrayConstructor;
+            default: number[];
+        };
+    };
+    readonly placementValue: Placement;
+    readonly offsetValue: Array<number>;
+    popperInstance: Instance;
+    connect(): void;
+    disconnect(): void;
+    show(): void;
+    hide(): void;
+}

data/app/assets/stylesheets/ariadne_view_components.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import 'tooltip-component.css';
+@import 'prosemirror.css';

data/app/assets/stylesheets/prosemirror.css

@@ -0,0 +1,323 @@
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+/* Make sure li selections wrap around markers */
+
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode:after {
+  content: '';
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid #8cf;
+  pointer-events: none;
+}
+.ProseMirror-textblock-dropdown {
+  min-width: 3em;
+}
+
+.ProseMirror-menu {
+  margin: 0 -4px;
+  line-height: 1;
+}
+
+.ProseMirror-tooltip .ProseMirror-menu {
+  width: -webkit-fit-content;
+  width: fit-content;
+  white-space: pre;
+}
+
+.ProseMirror-menuitem {
+  margin-right: 3px;
+  display: inline-block;
+}
+
+.ProseMirror-menuseparator {
+  border-right: 1px solid #ddd;
+  margin-right: 3px;
+}
+
+.ProseMirror-menu-dropdown,
+.ProseMirror-menu-dropdown-menu {
+  font-size: 90%;
+  white-space: nowrap;
+}
+
+.ProseMirror-menu-dropdown {
+  vertical-align: 1px;
+  cursor: pointer;
+  position: relative;
+  padding-right: 15px;
+}
+
+.ProseMirror-menu-dropdown-wrap {
+  padding: 1px 0 1px 4px;
+  display: inline-block;
+  position: relative;
+}
+
+.ProseMirror-menu-dropdown:after {
+  content: '';
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 2px);
+}
+
+.ProseMirror-menu-dropdown-menu,
+.ProseMirror-menu-submenu {
+  position: absolute;
+  background: white;
+  color: #666;
+  border: 1px solid #aaa;
+  padding: 2px;
+}
+
+.ProseMirror-menu-dropdown-menu {
+  z-index: 15;
+  min-width: 6em;
+}
+
+.ProseMirror-menu-dropdown-item {
+  cursor: pointer;
+  padding: 2px 8px 2px 4px;
+}
+
+.ProseMirror-menu-dropdown-item:hover {
+  background: #f2f2f2;
+}
+
+.ProseMirror-menu-submenu-wrap {
+  position: relative;
+  margin-right: -4px;
+}
+
+.ProseMirror-menu-submenu-label:after {
+  content: '';
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 4px solid currentColor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 4px);
+}
+
+.ProseMirror-menu-submenu {
+  display: none;
+  min-width: 4em;
+  left: 100%;
+  top: -3px;
+}
+
+.ProseMirror-menu-active {
+  background: #eee;
+  border-radius: 4px;
+}
+
+.ProseMirror-menu-active {
+  background: #eee;
+  border-radius: 4px;
+}
+
+.ProseMirror-menu-disabled {
+  opacity: 0.3;
+}
+
+.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,
+.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
+  display: block;
+}
+
+.ProseMirror-menubar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  position: relative;
+  min-height: 1em;
+  color: #666;
+  padding: 1px 6px;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid silver;
+  background: white;
+  z-index: 10;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.ProseMirror-icon {
+  display: inline-block;
+  line-height: 0.8;
+  vertical-align: -2px; /* Compensate for padding */
+  padding: 2px 8px;
+  cursor: pointer;
+}
+
+.ProseMirror-menu-disabled.ProseMirror-icon {
+  cursor: default;
+}
+
+.ProseMirror-icon svg {
+  fill: currentColor;
+  height: 1em;
+}
+
+.ProseMirror-icon span {
+  vertical-align: text-top;
+}
+/* Add space around the hr to make clicking it easier */
+
+.ProseMirror-example-setup-style hr {
+  padding: 2px 10px;
+  border: none;
+  margin: 1em 0;
+}
+
+.ProseMirror-example-setup-style hr:after {
+  content: '';
+  display: block;
+  height: 1px;
+  background-color: silver;
+  line-height: 2px;
+}
+
+.ProseMirror ul,
+.ProseMirror ol {
+  padding-left: 30px;
+}
+
+.ProseMirror blockquote {
+  padding-left: 1em;
+  border-left: 3px solid #eee;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.ProseMirror-example-setup-style img {
+  cursor: default;
+}
+
+.ProseMirror-prompt {
+  background: white;
+  padding: 5px 10px 5px 15px;
+  border: 1px solid silver;
+  position: fixed;
+  border-radius: 3px;
+  z-index: 11;
+  box-shadow: -0.5px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.ProseMirror-prompt h5 {
+  margin: 0;
+  font-weight: normal;
+  font-size: 100%;
+  color: #444;
+}
+
+.ProseMirror-prompt input[type='text'],
+.ProseMirror-prompt textarea {
+  background: #eee;
+  border: none;
+  outline: none;
+}
+
+.ProseMirror-prompt input[type='text'] {
+  padding: 0 4px;
+}
+
+.ProseMirror-prompt-close {
+  position: absolute;
+  left: 2px;
+  top: 1px;
+  color: #666;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+.ProseMirror-prompt-close:after {
+  content: '✕';
+  font-size: 12px;
+}
+
+.ProseMirror-invalid {
+  background: #ffc;
+  border: 1px solid #cc7;
+  border-radius: 4px;
+  padding: 5px 10px;
+  position: absolute;
+  min-width: 10em;
+}
+
+.ProseMirror-prompt-buttons {
+  margin-top: 5px;
+  display: none;
+}
+:root {
+  --validation-color: #3dcde6;
+  --validation-color-hover: #3dcde624;
+  --validation-gray: #a0a0a0;
+  --validation-debug-color-dirty: #f7a85e66;
+  --validation-debug-color-inflight: #f7a85ea1;
+}
+
+.Button {
+  padding: 1px 4px;
+  border: 1px solid lightgrey;
+  border-radius: 3px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.Button:hover {
+  background-color: #eee;
+}
+
+.Input[type='checkbox'] {
+  margin-left: calc(var(--gutter-width));
+}
+
+.Button:active,
+.Button:focus {
+  outline: none;
+}

data/app/assets/stylesheets/tooltip-component.css

@@ -0,0 +1,37 @@
+.tooltip-arrow,
+.tooltip-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tooltip-arrow {
+  visibility: hidden;
+}
+
+tooltip[data-tooltip-show] .tooltip-arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+tooltip[data-popper-placement^='top'][data-tooltip-show] > .tooltip-arrow {
+  bottom: -4px;
+}
+
+tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
+  top: -4px;
+}
+
+tooltip[data-popper-placement^='left'] > .tooltip-arrow {
+  right: -4px;
+}
+
+tooltip[data-popper-placement^='right'] > .tooltip-arrow {
+  left: -4px;
+}
+
+tooltip[data-tooltip-show] {
+  display: block;
+}

data/app/components/ariadne/ariadne-form.ts

@@ -0,0 +1,96 @@
+import {Controller} from '@hotwired/stimulus'
+import {html} from 'lit-html'
+import type {TemplateResult} from 'lit-html'
+
+type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+
+export default class AriadneFormWith extends Controller {
+  static targets = ['formField']
+  declare readonly formFieldTargets: [HTMLFormField]
+
+  connect() {
+    this.element.setAttribute('novalidate', 'true')
+    this.element.addEventListener('blur', this.onBlur, true)
+    this.element.addEventListener('submit', this.onSubmit)
+    this.element.addEventListener('ajax:beforeSend', this.onSubmit)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('blur', this.onBlur)
+    this.element.removeEventListener('submit', this.onSubmit)
+    this.element.removeEventListener('ajax:beforeSend', this.onSubmit)
+  }
+
+  onBlur = (event: Event) => {
+    this.validateField(event.target as HTMLFormField)
+  }
+
+  onSubmit = (event: Event) => {
+    if (!this.validateForm()) {
+      event.preventDefault()
+      this.firstInvalidField?.focus()
+    }
+  }
+
+  validateForm() {
+    let isValid = true
+    // Not using `find` because we want to validate all the fields
+    for (const field of this.formFields) {
+      if (this.shouldValidateField(field) && !this.validateField(field)) isValid = false
+    }
+    return isValid
+  }
+
+  validateField(field: HTMLFormField) {
+    if (!this.shouldValidateField(field)) return true
+    const isValid = field.checkValidity()
+    field.classList.toggle('invalid', !isValid)
+    this.refreshErrorForInvalidField(field, isValid)
+    return isValid
+  }
+
+  shouldValidateField(field: HTMLFormField) {
+    return (
+      !field.disabled &&
+      !field.classList.contains('ProseMirror') &&
+      !['file', 'reset', 'submit', 'button'].includes(field.type)
+    )
+  }
+
+  refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean) {
+    this.removeExistingErrorMessage(field)
+    if (!isValid) this.showErrorForInvalidField(field)
+  }
+
+  removeExistingErrorMessage(field: HTMLFormField) {
+    const fieldContainer = field.closest('.field')
+    if (!fieldContainer) return
+    const existingErrorMessageElement = fieldContainer.querySelector('.error')
+    if (existingErrorMessageElement) {
+      existingErrorMessageElement?.parentNode?.removeChild(existingErrorMessageElement)
+    }
+  }
+
+  showErrorForInvalidField(field: HTMLFormField) {
+    field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field))
+  }
+
+  buildFieldErrorHtml(field: HTMLFormField) {
+    const data = html`<p class="error">${field.validationMessage}</p>`
+    return this.getRenderString(data)
+  }
+
+  get formFields(): HTMLFormField[] {
+    return Array.from(this.formFieldTargets)
+  }
+
+  get firstInvalidField() {
+    return this.formFields.find(field => !field.checkValidity())
+  }
+
+  getRenderString = (data: TemplateResult): string => {
+    const {strings, values} = data
+    const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e as TemplateResult) : e))
+    return strings.reduce((acc, s, i) => acc + s + v[i], '')
+  }
+}

data/app/components/ariadne/ariadne.ts

@@ -0,0 +1,20 @@
+import {Application} from '@hotwired/stimulus'
+
+import AriadneForm from './ariadne-form'
+
+import ClipboardCopyComponent from './clipboard-copy-component'
+import CommentComponent from './comment-component'
+import RichTextAreaComponent from './rich-text-area-component'
+import SlideoverComponent from './slideover-component'
+import TooltipComponent from './tooltip-component'
+
+import './time-ago-component'
+
+const application = Application.start()
+
+application.register('clipboard-copy-component', ClipboardCopyComponent)
+application.register('ariadne-form', AriadneForm)
+application.register('comment-component', CommentComponent)
+application.register('rich-text-area-component', RichTextAreaComponent)
+application.register('slideover-component', SlideoverComponent)
+application.register('tooltip-component', TooltipComponent)

data/app/components/ariadne/base_button.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
+  class BaseButton < Ariadne::Component
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+    DEFAULT_TYPE = :button
+    TYPE_SUBMIT = :submit
+    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
+
+    SIZE_CLASS_MAPPINGS = {
+      xs: "ariadne-px-2.5 ariadne-py-1.5 ariadne-text-xs ariadne-font-medium ariadne-rounded",
+      sm: "ariadne-px-3 ariadne-py-2 ariadne-text-sm ariadne-leading-4 ariadne-font-medium ariadne-rounded-m",
+      md: "ariadne-px-4 ariadne-py-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md",
+      lg: "ariadne-px-4 ariadne-py-2 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
+      xl: "ariadne-px-6 ariadne-py-3 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
+    }.freeze
+    VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
+
+    DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+
+    DEFAULT_SIZE = :md
+
+    # @example Setting the size
+    #   <%= render(Ariadne::BaseButton.new(size: :xs)) { "I am an extra small button!" } %>
+    #   <%= render(Ariadne::BaseButton.new(size: :sm)) { "I am a small button!" } %>
+    #   <%= render(Ariadne::BaseButton.new(size: :md)) { "I am a medium button!" } %>
+    #   <%= render(Ariadne::BaseButton.new(size: :lg)) { "I am a large button!" } %>
+    #   <%= render(Ariadne::BaseButton.new(size: :xl)) { "I am an extra large button!" } %>
+    #
+    # @param tag [Symbol] <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
+    # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      type: DEFAULT_TYPE,
+      size: DEFAULT_SIZE,
+      classes: "",
+      attributes: {}
+    )
+      @attributes = attributes
+      @tag = fetch_or_raise(TAG_OPTIONS, tag)
+      @size = fetch_or_raise(VALID_SIZES, size)
+
+      @attributes[:type] = fetch_or_raise(TYPE_OPTIONS, type) if button?
+      @classes = class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
+    end
+
+    def call
+      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
+    end
+
+    private def button?
+      @tag == :button
+    end
+  end
+end

data/app/components/ariadne/base_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # All Ariadne ViewComponents accept a standard set of options: classes, which match Tailwind CSS classes, and attributes, which match HTML attributes..
+  #
+  # Under the hood, any-non class attributes is passed to Rails' [`tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag)
+  # (for self-closing tags) or [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
+  class BaseComponent < Ariadne::Component
+    SELF_CLOSING_TAGS = [:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
+
+    def initialize(tag:, classes: "", attributes: {})
+      @tag = tag
+
+      @attributes = validate_attributes(tag: tag, attributes: attributes) || {}
+      @attributes[:"data-ariadne-view-component"] = true
+
+      classes = @attributes.fetch(:classes, "") if classes.blank?
+      @classes = validate_class_names(classes) || {}
+      @content_tag_args = {}
+    end
+
+    def call
+      options = @attributes.merge(@classes)
+      if SELF_CLOSING_TAGS.include?(@tag)
+        tag(@tag, options)
+      else
+        content_tag(@tag, content, options)
+      end
+    end
+
+    private def validate_class_names(classes)
+      return if classes.blank?
+
+      { class: Ariadne::ViewComponents.tailwind_merger.merge(classes) }
+    end
+  end
+end

data/app/components/ariadne/blankslate_component.html.erb

@@ -0,0 +1,26 @@
+<%= render Ariadne::NarrowContainerComponent.new do %>
+  <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+    <% if icon.present? %>
+      <%= icon %>
+    <% elsif image.present? %>
+      <%= image %>
+    <% end %>
+    <%= heading %>
+    <% if description.present? %>
+      <%= description %>
+    <% end %>
+    <%= content %>
+    <div class="ariadne-mt-8 ariadne-flex ariadne-justify-center">
+      <% if primary_action.present? %>
+        <div class="ariadne-inline-flex ariadne-rounded-md shadow">
+          <%= primary_action %>
+        </div>
+      <% end %>
+      <% if secondary_action.present? %>
+        <div class="ariadne-ml-3 ariadne-inline-flex">
+          <%= secondary_action %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>