ariadne_view_components 0.0.6 → 0.0.9

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/stylesheets/{application.ariadne_view_components.css → ariadne_view_components.css}

@@ -3,3 +3,4 @@
 @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/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

@@ -1,13 +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'
+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

@@ -10,17 +10,16 @@ module Ariadne
     TYPE_SUBMIT = :submit
     TYPE_OPTIONS = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
 
-    # TODO: dedupe the classes
     SIZE_CLASS_MAPPINGS = {
-      xs: "inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded",
-      sm: "inline-flex items-center px-3 py-2 text-sm leading-4 font-medium rounded-m",
-      md: "inline-flex items-center px-4 py-2 text-sm font-medium rounded-md",
-      lg: "inline-flex items-center px-4 py-2 text-base font-medium rounded-md",
-      xl: "inline-flex items-center px-6 py-3 text-base font-medium rounded-md",
+      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 = "inline-flex items-center px-4 py-2 text-sm border border-gray-300 shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    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
 

data/app/components/ariadne/base_component.rb

@@ -1,155 +1,37 @@
 # frozen_string_literal: true
 
-require "ariadne/classify"
-
 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, classes are [mapped](https://github.com/ariadne/view_components/blob/main/lib/ariadne/classify.rb) to Tailwind CSS classes, with any unconsumed attributes passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
+  # 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
 
-    # ## HTML attributes
-    #
-    # System arguments include most HTML attributes. For example:
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
-    # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
-    # | `height` | `Integer` | The height. |
-    # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
-    # | `style` | `String` | Inline styles. |
-    # | `title` | `String` | The `title` attribute. |
-    # | `width` | `Integer` | The width. |
-    #
-    # ## Animation
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `animation` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:animation)) %> |
-    #
-    # ## Border
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `border_bottom` | Integer | Set to `0` to remove the bottom border. |
-    # | `border_left` | Integer | Set to `0` to remove the left border. |
-    # | `border_radius` | Integer | <%= one_of([0, 1, 2, 3]) %> |
-    # | `border_right` | Integer | Set to `0` to remove the right border. |
-    # | `border_top` | Integer | Set to `0` to remove the top border. |
-    # | `border` | Symbol | <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %> |
-    # | `box_shadow` | Boolean, Symbol | Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %> |
-    #
-    # ## Color
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `bg` | Symbol | Background color. <%= one_of(Ariadne::Classify::Utilities.mappings(:bg)) %> |
-    # | `border_color` | Symbol | Border color. <%= one_of(Ariadne::Classify::Utilities.mappings(:border_color)) %> |
-    # | `color` | Symbol | Text color. <%= one_of(Ariadne::Classify::Utilities.mappings(:color)) %> |
-    #
-    # ## Flex
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `align_items` | Symbol | <%= one_of(Ariadne::Classify::FLEX_ALIGN_ITEMS_VALUES) %> |
-    # | `align_self` | Symbol | <%= one_of(Ariadne::Classify::FLEX_ALIGN_SELF_VALUES) %> |
-    # | `direction` | Symbol | <%= one_of(Ariadne::Classify::FLEX_DIRECTION_VALUES) %> |
-    # | `flex` | Integer, Symbol | <%= one_of(Ariadne::Classify::FLEX_VALUES) %> |
-    # | `flex_grow` | Integer | To enable, set to `0`. |
-    # | `flex_shrink` | Integer | To enable, set to `0`. |
-    # | `flex_wrap` | Symbol | <%= one_of(Ariadne::Classify::FLEX_WRAP_MAPPINGS.keys) %> |
-    # | `justify_content` | Symbol | <%= one_of(Ariadne::Classify::FLEX_JUSTIFY_CONTENT_VALUES) %> |
-    #
-    # ## Grid
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `clearfix` | Boolean | Whether to assign the `clearfix` class. |
-    # | `col` | Integer | Number of columns. <%= one_of(Ariadne::Classify::Utilities.mappings(:col)) %> |
-    # | `container` | Symbol | Size of the container. <%= one_of(Ariadne::Classify::Utilities.mappings(:container)) %> |
-    #
-    # ## Layout
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `display` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:display)) %> |
-    # | `w` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:w)) %> |
-    # | `h` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:h)) %> |
-    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Ariadne::Classify::Utilities.mappings(:hide)) %> |
-    # | `visibility` | Symbol | Visibility. <%= one_of(Ariadne::Classify::Utilities.mappings(:visibility)) %> |
-    # | `vertical_align` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:vertical_align)) %> |
-    #
-    # ## Position
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
-    # | `float` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:float)) %> |
-    # | `left` | Boolean | If `false`, sets `left: 0`. |
-    # | `position` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:position)) %> |
-    # | `right` | Boolean | If `false`, sets `right: 0`. |
-    # | `top` | Boolean | If `false`, sets `top: 0`. |
-    #
-    # ## Spacing
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `m` | Integer | Margin. <%= one_of(Ariadne::Classify::Utilities.mappings(:m)) %> |
-    # | `mb` | Integer | Margin bottom. <%= one_of(Ariadne::Classify::Utilities.mappings(:mb)) %> |
-    # | `ml` | Integer | Margin left. <%= one_of(Ariadne::Classify::Utilities.mappings(:ml)) %> |
-    # | `mr` | Integer | Margin right. <%= one_of(Ariadne::Classify::Utilities.mappings(:mr)) %> |
-    # | `mt` | Integer | Margin top. <%= one_of(Ariadne::Classify::Utilities.mappings(:mt)) %> |
-    # | `mx` | Integer | Horizontal margins. <%= one_of(Ariadne::Classify::Utilities.mappings(:mx)) %> |
-    # | `my` | Integer | Vertical margins. <%= one_of(Ariadne::Classify::Utilities.mappings(:my)) %> |
-    # | `p` | Integer | Padding. <%= one_of(Ariadne::Classify::Utilities.mappings(:p)) %> |
-    # | `pb` | Integer | Padding bottom. <%= one_of(Ariadne::Classify::Utilities.mappings(:pb)) %> |
-    # | `pl` | Integer | Padding left. <%= one_of(Ariadne::Classify::Utilities.mappings(:pl)) %> |
-    # | `pr` | Integer | Padding right. <%= one_of(Ariadne::Classify::Utilities.mappings(:pr)) %> |
-    # | `pt` | Integer | Padding left. <%= one_of(Ariadne::Classify::Utilities.mappings(:pt)) %> |
-    # | `px` | Integer | Horizontal padding. <%= one_of(Ariadne::Classify::Utilities.mappings(:px)) %> |
-    # | `py` | Integer | Vertical padding. <%= one_of(Ariadne::Classify::Utilities.mappings(:py)) %> |
-    #
-    # ## Typography
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
-    # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
-    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
-    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
-    # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
-    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
-    # | `underline` | Boolean | Whether text should be underlined. |
-    # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Ariadne::Classify::Utilities.mappings(:word_break)) %> |
-    #
-    # ## Other
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | classes | String | CSS class name value to be concatenated with generated Tailwind CSS classes. |
-    # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: "", attributes: {})
       @tag = tag
 
-      @attributes = validate_attributes(tag: tag, attributes: attributes)
+      @attributes = validate_attributes(tag: tag, attributes: attributes) || {}
       @attributes[:"data-ariadne-view-component"] = true
 
-      classes = classes.present? ? @attributes.merge(classes: classes) : @attributes.fetch(:classes, "")
-      @classes = Ariadne::Classify.call(classes)
-
-      # Filter out Ariadne keys so they don't get assigned as HTML attributes
-      @content_tag_args = add_test_selector(@attributes).except(*Ariadne::Classify::Utilities::UTILITIES.keys)
+      classes = @attributes.fetch(:classes, "") if classes.blank?
+      @classes = validate_class_names(classes) || {}
+      @content_tag_args = {}
     end
 
     def call
-      options = @content_tag_args.merge(@classes)
+      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

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