satis 1.0.66

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 3dffc5ab90aa3d26440c35d5ca251870e5f5c6863706108380fd117629133f2e
+  data.tar.gz: 72a53d8079ca58762c1e7de4b5a91f8d7be3898fbf79d1f2f4749772ea0d9aab
+SHA512:
+  metadata.gz: 6bc1e23b0a4197f01e9b976ab27e63e07da645db958b0e466a87efe4a10bb4c830a8f5b4d18a573959a046039a17a7544aec76f1a31856e4247b0b649066a45c
+  data.tar.gz: 9532fbe01e4f4b2a8ba8222276a9afdd87209c0ac660a7f3b2a5efae80a43db1c17978dc4b615a83a74c300f7f1096732e72d6ed610def3753b37db828caa699

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Tom de Grunt
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,92 @@
+# Satis
+
+Tailwind CSS based UI framework for Rails.
+We use:
+
+- [TailwindCSS](https://tailwindcss.com)
+- [TailwindUI](https://tailwindui.com)
+- [FontAwesome 6](https://fontawesome.com/v6.0/)
+- [ViewComponent](https://viewcomponent.org)
+- [HotWired](https://hotwired.dev)
+- [BEM](https://cssguidelin.es/#bem-like-naming)
+
+## Usage
+
+You can use satis helpers in your own helpers:
+
+```ruby
+def mycard(&block)
+  sts.card(icon: 'fad fa-user', title: "Profile", &block)
+end
+```
+
+and then in your template:
+
+```slim
+= mycard do |card|
+```
+
+### Components
+
+Each component has it's own documentation in the component folder.
+Other engines can add components to Satis too:
+
+```ruby
+Satis.add_helper :name, ViewComponent::Class
+```
+
+### Forms
+
+```slim
+  = sts.form_with model: @user, url: profile_url, class: 'mt-2' do |f|
+    = f.input :id, as: :hidden
+    = f.input :first_name
+    = f.input :last_name
+    = f.association :account, collection: policy_scope(Account).with(@user.account_id), as: :dropdown
+    = f.input :location_id, url: select_locations_url(format: :html), as: :dropdown, hint: "The user's main location"
+
+    = f.button
+    = f.submit
+    = f.reset
+    = f.continue
+```
+
+### Browser detection
+
+Satis now includes browser detection using the browser gem, you can use it in controllers and in your views:
+
+```
+sts.browser.chrome?
+sts.browser.mobile?
+```
+
+For more information see the [browser gem](https://github.com/fnando/browser)
+
+## Dark
+
+bg-gray-800 - hoofd achtergrond card/sidebar
+bg-gray-700 - highlight card/sidebar / hover
+text-gray-300 - tekst kleur
+bg-gray-600 - body achtergrond kleur
+
+## Known issues
+
+- dropdown results will not overlap the card, they should, just like date-time picker
+- dropdown triggers on-change upon initial population (for attributes), which is different from select's
+- dropdown hoogte van results is niet altijd goed
+- table state is not saved
+- table columns removing is weird, you really need to be on the left part of the screen to drag
+- table filters initially passed should not be editable
+- sidebar has no small / collapsed version
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'satis'
+```
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,23 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
+  t.verbose = false
+  t.warning = false
+end
+
+task default: :test
+
+# Adds the Auxilium semver task
+spec = Gem::Specification.find_by_name "auxilium"
+load "#{spec.gem_dir}/lib/tasks/semver.rake"

data/app/assets/config/satis_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/satis .css

data/app/assets/stylesheets/satis/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/components/satis/appearance_switcher/component.html.slim

@@ -0,0 +1,6 @@
+.sts-appearance-switcher data-controller="satis-appearance-switcher" data-action='click->satis-appearance-switcher#switch'
+  .sts-appearance-switcher__theme.sts-appearance-switcher__theme_light data-satis-appearance-switcher-target="light"
+    i.fa-solid.fa-sun.sts-appearance-switcher__icon.sts-appearance-switcher__icon_light
+  .sts-appearance-switcher__theme.sts-appearance-switcher__theme_dark data-satis-appearance-switcher-target="dark"
+    i.fa-solid.fa-moon-stars.sts-appearance-switcher__icon.sts-appearance-switcher__icon_dark
+  .sts-appearance-switcher__label Switch theme

data/app/components/satis/appearance_switcher/component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Satis
+  module AppearanceSwitcher
+    class Component < Satis::ApplicationComponent
+      def initialize(**options)
+        super
+      end
+    end
+  end
+end

data/app/components/satis/appearance_switcher/component.scss

@@ -0,0 +1,34 @@
+.sts-appearance-switcher {
+  @apply w-8 h-8 bg-white rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-900 dark:border-gray-700 overflow-hidden relative;
+  text-align: center;
+
+  &__theme {
+    @apply absolute;
+
+    &_light {
+      top: 5px;
+      left: 7px;
+    }
+
+    &_dark {
+      top: 4px;
+      left: 8px;
+    }
+  }
+
+  &__icon {
+    font-size: larger;
+
+    &_light {
+      @apply text-yellow-500;
+    }
+
+    &_dark {
+      @apply text-indigo-600;
+    }
+  }
+
+  &__label {
+    @apply sr-only;
+  }
+}

data/app/components/satis/appearance_switcher/component_controller.js

@@ -0,0 +1,62 @@
+import ApplicationController from "../../../../frontend/controllers/application_controller"
+import { getInitialTheme } from "../../../../frontend/utils"
+
+/*
+ * Theme controller
+ *
+ *   div data-controller="satis-appearance-switcher" data-action='click->satis-appearance-switcher#switch'
+ *     i.fal.fa-sun data-satis-appearance-switcher-target="light"
+ *     i.fal.fa-moon-stars data-satis-appearance-switcher-target="dark"
+ *
+ */
+export default class extends ApplicationController {
+  static targets = ["light", "dark"]
+
+  connect() {
+    super.connect()
+
+    const theme = getInitialTheme()
+    this.rawSetTheme(theme, false)
+  }
+
+  switch() {
+    const theme = getInitialTheme()
+
+    if (theme == "dark") {
+      this.rawSetTheme("light", true)
+    } else {
+      this.rawSetTheme("dark", true)
+    }
+  }
+
+  rawSetTheme(rawTheme, delay) {
+    const root = window.document.documentElement
+    const eventLight = new CustomEvent('theme-change', { detail: { theme: 'light' } });
+    const eventDark = new CustomEvent('theme-change', { detail: { theme: 'dark' } });
+    const isDark = rawTheme === "dark"
+
+    if (delay == true) {
+      this.lightTarget.classList.add("transition", "ease-in-out", "duration-1000")
+      this.darkTarget.classList.add("transition", "ease-in-out", "duration-1000")
+    }
+
+    if (isDark) {
+      window.dispatchEvent(eventDark);
+      this.lightTarget.classList.add("transform", "translate-y-7")
+      this.darkTarget.classList.remove("transform", "-translate-y-7")
+    } else {
+      window.dispatchEvent(eventLight);
+      this.lightTarget.classList.remove("transform", "translate-y-7")
+      this.darkTarget.classList.add("transform", "-translate-y-7")
+    }
+
+    localStorage.setItem("color-theme", rawTheme)
+    setTimeout(
+      () => {
+        root.classList.remove(isDark ? "light" : "dark")
+        root.classList.add(rawTheme)
+      },
+      delay ? 500 : 0
+    )
+  }
+}

data/app/components/satis/application_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Satis
+  class ApplicationComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+    include ActionView::Helpers::TranslationHelper
+
+    attr_accessor :original_view_context
+
+    #
+    # This provides us with a translation helper which scopes into the original view
+    # and thereby conveniently scopes the translations.
+    #
+    # In your component.html.slim you can use:
+    # ```slim
+    # = ct(".#{tab.name}", scope: [group.to_sym])
+    # ````
+    #
+    # It'll then try and find a translation with scope: en.admin.spaces.edit.tabs.main.admin_versions
+    #
+    def ct(key = nil, **options)
+      scope = Array.wrap(options.delete(:scope))
+
+      scope = if scope
+                scope.unshift(i18n_scope)
+              else
+                [i18n_scope]
+              end
+
+      scope = original_i18n_scope.concat(scope)
+
+      key = key&.to_s unless key.is_a?(String)
+      key = "#{scope.join('.')}#{key}" if key.start_with?('.')
+
+      original_view_context.t(key, **options)
+    end
+
+    def original_virtual_path
+      original_view_context.instance_variable_get(:@virtual_path)
+    end
+
+    def original_i18n_scope
+      original_virtual_path.sub(%r{^/}, '').gsub(%r{/_?}, '.').split('.')
+    end
+
+    def i18n_scope
+      self.class.name.split('::').second.underscore.to_sym
+    end
+  end
+end

data/app/components/satis/avatar/component.html.slim

@@ -0,0 +1,7 @@
+button.inline-flex.items-center.justify-center.rounded-full.bg-gray-500.focus:outline-none.focus:ring-2.focus:ring-offset-2.focus:ring-primary-500 aria-expanded="false" aria-haspopup="true" type="button" class=options[:class]
+  - if photo&.attached?
+    img class="rounded-full" src=photo_url alt=name class=options[:class]
+  - elsif gravatar?
+    img class="rounded-full" src=gravatar_url alt=name class=options[:class]
+  - else
+    span.text-sm.font-medium.leading-none.text-white = initials

data/app/components/satis/avatar/component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Satis
+  module Avatar
+    class Component < Satis::ApplicationComponent
+      attr_reader :name, :photo, :email, :options
+
+      def initialize(name: nil, email: nil, photo: nil, **options)
+        super
+        @name = name
+        @photo = photo
+        @options = options
+        @options[:class] ||= 'w-8 h-8'
+        @email = email
+      end
+
+      def initials
+        if name.present? && !name.index('@')
+          name.scan(/[A-Z]/)[0..1].join
+        else
+          (name || email).split('@').map(&:capitalize).join('@').scan(/[A-Z]/)[0..1].join
+        end
+      end
+
+      def photo_url
+        return unless photo&.attached?
+
+        helpers.main_app.url_for(photo)
+      end
+
+      def gravatar?
+        return false if email.blank?
+
+        url = "https://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(email).downcase}?d=404"
+
+        uri = URI.parse(url)
+        http = Net::HTTP.new(uri.host, uri.port)
+        http.use_ssl = true if uri.scheme == 'https'
+
+        request = Net::HTTP::Get.new(uri.request_uri)
+        request.add_field('User-Agent', controller.request.user_agent)
+        response = http.request(request)
+
+        response.code.to_i != 404
+      end
+
+      def gravatar_url
+        "https://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(email).downcase}?d=404" if gravatar?
+      end
+    end
+  end
+end

data/app/components/satis/breadcrumbs/component.html.slim

@@ -0,0 +1,8 @@
+nav.sts-breadcrumbs aria-label="Breadcrumb"
+  ol.sts-breadcrumbs__list
+    li.flex
+      .flex.items-center
+        a.text-gray-400.hover:text-gray-500 href=root_path
+          i.fas.fa-house
+    - crumbs.each do |crumb|
+      = crumb

data/app/components/satis/breadcrumbs/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Satis
+  module Breadcrumbs
+    class Crumb < ViewComponent::Base
+      attr_reader :path, :title, :icon
+
+      def initialize(path:, title: nil, icon: nil)
+        @path = path
+        @title = title
+        @icon = icon
+      end
+    end
+
+    class Component < Satis::ApplicationComponent
+
+      renders_many :crumbs, Crumb
+      def initialize
+        super
+      end
+    end
+  end
+end

data/app/components/satis/breadcrumbs/component.scss

@@ -0,0 +1,19 @@
+.sts-breadcrumbs {
+  @apply bg-white border-b border-gray-200 flex mb-4 sm:rounded-lg sm:shadow dark:text-gray-300 dark:bg-gray-800 dark:border-gray-700;
+
+  height: 40px;
+
+  &__list {
+    @apply max-w-screen-xl w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8;
+
+    margin-left: 0;
+  }
+
+  &__link {
+    @apply ml-4 text-sm font-normal text-gray-400 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300;
+
+    svg {
+      margin-right: 0.5rem;
+    }
+  }
+}

data/app/components/satis/breadcrumbs/crumb.slim

@@ -0,0 +1,8 @@
+li.flex
+  .flex.items-center
+    svg.flex-shrink-0.w-6.h-full.text-gray-200.dark:text-gray-700  aria-hidden="true" fill="currentColor" preserveaspectratio="none" viewbox=("0 0 24 44") xmlns="http://www.w3.org/2000/svg"
+      path d=("M.293 0l22 22-22 22h1.414l22-22-22-22H.293z") /
+    a.sts-breadcrumbs__link href=path
+      - if icon
+        i class=icon
+      = title

data/app/components/satis/card/component.html.slim

@@ -0,0 +1,54 @@
+.sts-card.sts-tabs data-controller="satis-tabs" data-satis-tabs-persist-value="false"
+  - if header?
+    .sts-card__header class="#{tabs? ? '' : 'border-b border-gray-200'} #{header_background_color[:light]} dark:#{header_background_color[:dark]}"
+      .-ml-4.-mt-4.flex.justify-between.items-center.flex-wrap.sm:flex-nowrap
+        - if icon
+          .ml-4.mt-4.flex-shrink-0.text-primary-600.dark:text-gray-300
+            i class=icon
+        .ml-4.mt-4.flex-1
+          h3.text-lg.leading-6.font-medium.text-gray-900.dark:text-gray-300
+            == title
+          - if description.present?
+            p.mt-1.text-sm.text-gray-500.dark:text-gray-500
+              == description
+
+        - if actions.present? || initial_actions.present?
+          .ml-4.mt-4.flex-shrink-0
+            .grid.grid-flow-row.gap-1.sm:grid-flow-col
+              - for action in initial_actions
+                = action
+              - for action in actions
+                = action
+
+        - if menu
+          .ml-4.mt-4.flex-shrink-0
+            = render(Satis::Menu::Component.new(menu))
+
+  - if tabs?
+    .sts-card__tabs
+      .sm:hidden
+        label.sr-only for="tabs" Select a tab
+        select#tabs.block.w-full.pl-3.pr-10.py-2.text-base.border-gray-300.focus:outline-none.focus:ring-primary-500.focus:border-primary-500.sm:text-sm.rounded-md name="tabs" data-action="change->satis-tabs#select" data-satis-tabs-target="select"
+          - tabs.each do |tab|
+            option selected=tab.selected? = t(tab.name, scope: [:tabs])
+      .hidden.sm:block
+        nav.-mb-px.flex.space-x-8.overflow-x-auto aria-label="Tabs"
+          - tabs.each do |tab|
+              a.tab id="#{tab.name}" href="#" aria-current="#{tab.selected? ? "page" : ''}" data-satis-tabs-target="tab" data-action="click->satis-tabs#select"
+                - if tab.icon
+                  i.mr-2 class=tab.icon
+                = t(tab.name, scope: [:tabs], default: tab.title || tab.name)
+                i.fal.fa-triangle-exclamation.ml-2.hidden
+                - if tab.badge
+                  span.badge
+                    = tab.badge
+
+    - tabs.each do |tab|
+      div id="#{tab.name}-content" class="tab-content #{tab.options[:padding] == true ? 'px-6 py-6' : ''}" data-satis-tabs-target="content"
+        = tab.to_s
+  - else
+    div class="#{content_padding ? 'px-6 py-6' : ''}"
+      = content
+
+  - if footer
+    = footer

data/app/components/satis/card/component.md

@@ -0,0 +1,14 @@
+# Card
+
+## UI
+
+https://tailwindui.com/components/application-ui/headings/card-headings
+
+## Usage
+
+```slim
+= sts.card title: 'Your profile', description: 'Edit your profile information' do |c|
+  - c.action
+      button Save
+  | Content here
+```

data/app/components/satis/card/component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Satis
+  module Card
+    class Component < Satis::ApplicationComponent
+      renders_many :actions
+      renders_many :tabs, Tab::Component
+      renders_one :footer
+
+      attr_reader :icon, :title, :description, :menu, :content_padding, :header_background_color, :initial_actions
+
+      def initialize(icon: nil,
+                     title: nil,
+                     description: nil,
+                     menu: nil,
+                     content_padding: true,
+                     header_background_color: {
+                       dark: 'bg-gray-800', light: 'bg-white'
+                     },
+                     actions: [])
+        super
+        @title = title
+        @title = @title.reject(&:blank?).compact.join(' ') if @title.is_a?(Array)
+        @description = description
+        @icon = icon
+        @menu = menu
+        @content_padding = content_padding
+        @header_background_color = header_background_color
+        @initial_actions = actions
+      end
+
+      def tabs?
+        tabs.present?
+      end
+
+      def header?
+        icon.present? || title.present? || description.present? || menu
+      end
+    end
+  end
+end

data/app/components/satis/card/component.scss

@@ -0,0 +1,15 @@
+.sts-card {
+  @apply bg-white sm:rounded-lg sm:shadow dark:bg-gray-800 overflow-hidden;
+
+  &__header {
+    @apply px-4 py-5 sm:px-6 dark:border-gray-700
+  }
+
+  &__tabs {
+    @apply bg-white px-4 border-b border-gray-200 sm:px-5 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300
+  }
+
+  a.tab:not(.selected) {
+    @apply dark:text-gray-300;
+  }
+}

data/app/components/satis/date_time_picker/component.html.slim

@@ -0,0 +1,48 @@
+div.satis-date-time-picker data-controller="satis-date-time-picker" data-satis-date-time-picker-time-picker-value=time_picker.to_s data-satis-date-time-picker-clearable-value=clearable.to_s data-satis-date-time-picker-locale-value="" data-satis-date-time-picker-range-value=range.to_s data-satis-date-time-picker-multiple-value=multiple.to_s data-satis-date-time-picker-week-start-value=week_start data-satis-date-time-picker-inline-value=inline.to_s data-satis-date-time-picker-format-value=JSON.dump(format)
+  .relative.flex.items-center
+    = form.text_field attribute, options[:input_html].merge(class: 'hidden')
+    input.form-control data-action="focus->satis-date-time-picker#showCalendar input->satis-date-time-picker#dateTimeEntered" data-satis-date-time-picker-target="input"
+    .absolute.inset-y-0.right-0.flex.py-1.5.pr-1.5
+      button.cursor-pointer.w-6.h-full.flex.items-center.text-gray-400.outline-none.focus:outline-none data-satis-date-time-picker-target="clearButton" data-action="click->satis-date-time-picker#clear"
+        i.fas.fa-xmark
+
+  .container.z-10.shadow.bg-white.border.border-gray-300.dark:bg-gray-800.dark:border-gray-700.rounded.p-4.w-72 class="#{inline ? 'inline-block' : 'hidden'}" data-satis-date-time-picker-target="calendarView"
+    .flex.justify-between.items-center.mb-2
+      div
+        span.text-lg.font-bold.text-gray-800.dark:text-gray-200 data-satis-date-time-picker-target="month"
+        span.ml-1.text-lg.text-gray-600.dark:text-gray-200.font-normal data-satis-date-time-picker-target="year"
+      div
+        button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-2 rounded-full" data-action="satis-date-time-picker#previousMonth"
+          i.fal.fa-angle-left.text-gray-500.inline-flex.px-2.py-1
+        button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full" data-action="satis-date-time-picker#nextMonth"
+          i.fal.fa-angle-right.text-gray-500.inline-flex.px-2.py-1
+
+
+    .grid.grid-cols-7 data-satis-date-time-picker-target="weekDays"
+    template data-satis-date-time-picker-target="weekDayTemplate"
+      div.px-2.w-8
+        div.text-gray-800.dark:text-gray-200.font-medium.text-center.text-xs ${name}
+
+    .grid.grid-cols-7 data-satis-date-time-picker-target="days"
+
+    - if time_picker
+      .flex.items-center.py-2.space-x-2
+        label.flex-grow.text-sm.text-gray-500 Time
+        .flex.items-center.space-x-2
+          .bg-gray-100.rounded-md.w-full.text-right.flex.items-center.border.border-gray-100.focus:border-primary-500.focus:ring-2.focus:ring-primary-500.focus:outline-none.focus:ring-opacity-50 style=("caret-color: transparent;")
+            input.text-center.w-8.border-transparent.bg-transparent.p-0.h-6.text-sm.transition.duration-100.ease-in-out.border.border-transparent.focus:border-primary-500.focus:ring-2.focus:ring-primary-500.focus:outline-none.focus:ring-opacity-50.rounded inputmode="numeric" type="text" data-satis-date-time-picker-target="hours" data-action="satis-date-time-picker#changeHours keypress->satis-date-time-picker#keyPress"
+            span contenteditable="false"
+              | :
+            input.text-center.w-8.border-transparent.bg-transparent.p-0.h-6.text-sm.transition.duration-100.ease-in-out.border.border-transparent.focus:border-primary-500.focus:ring-2.focus:ring-primary-500.focus:outline-none.focus:ring-opacity-50.rounded inputmode="numeric" type="text" data-satis-date-time-picker-target="minutes" data-action="satis-date-time-picker#changeMinutes keypress->satis-date-time-picker#keyPress"
+          /span.relative.inline-flex.flex-shrink-0.transition.duration-200.ease-in-out.bg-gray-100.border.border-transparent.rounded.cursor-pointer.focus:border-primary-500.focus:ring-2.focus:ring-primary-500.focus:outline-none.focus:ring-opacity-50 aria-checked="false" role="checkbox" tabindex="0"
+            input type="hidden" value="AM" /
+            span.flex.items-center.justify-center.w-6.h-6.text-xs.text-gray-500.rounded-sm aria-hidden="true"  AM
+            span.flex.items-center.justify-center.w-6.h-6.text-xs.text-gray-500.rounded-sm aria-hidden="true"  PM
+            span.absolute.flex.items-center.justify-center.w-6.h-6.text-xs.text-gray-800.transition.duration-200.ease-in-out.transform.translate-x-0.bg-white.rounded.shadow aria-hidden="true"  AM
+          /a.text-primary-600.text-sm.uppercase.font-semibold.transition.duration-100.ease-in-out.border.border-transparent.focus:border-primary-500.focus:ring-2.focus:ring-primary-500.focus:outline-none.focus:ring-opacity-50.rounded.cursor-pointer href="#"  Ok
+
+    template data-satis-date-time-picker-target="emtpyTemplate"
+      .text-center.border.p-1.border-transparent.text-sm
+    template data-satis-date-time-picker-target="dayTemplate"
+      div
+        a.block.w-full.h-9.cursor-pointer.text-center.pt-2px.text-sm.rounded-l-full.rounded-r-full.leading-loose.transition.ease-in-out.duration-100.hover:bg-primary-200 data-action="satis-date-time-picker#selectDay" ${day}

data/app/components/satis/date_time_picker/component.md

@@ -0,0 +1,11 @@
+# Date Time Picker
+
+## UI
+
+https://www.vue-tailwind.com/docs/datepicker/
+
+## Usage
+
+```slim
+= f.input :created_at, as: :date_time_picker
+```