railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/forms/_select.html.erb

@@ -0,0 +1,118 @@
+<div id="forms-select-base">
+<%= render layout: example, locals: { heading: "Base", section: "Select" } do %>
+
+<%= render preview('neutral') do %>
+<label for="select-example" class="form-label">Select one</label>
+<select id="select-example" class="form-select" aria-label="Default select example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<label for="select-example" class="form-label">Select one</label>
+<select class="form-select" aria-label="Default select example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+<% end %>
+
+  <%# .erb %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormTagHelper -->
+<%%= tag.label "Select one", class: "form-label" %>
+<%%= tag.select class: "form-select", "aria-label": "Default select example" do %>
+  <%%= tag.option "Open this select menu", selected: true %>
+  <%%= tag.option "One", value: "1" %>
+  <%%= tag.option "Two", value: "2" %>
+  <%%= tag.option "Three", value: "3" %>
+<%% end %>
+
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <%%= f.label :select_1, "Select example", class: "form-label" %>
+  <%%= f.select :select_1, options_for_select([["One", "1"], ["Two", "2"], ["Three", "3"]]), { prompt: "Open this select menu" }, { class: "form-select", "aria-label": "Default select example" } %>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.select :select_1, options_for_select([["One", "1"], ["Two", "2"], ["Three", "3"]]), { prompt: "Open this select menu" }, { label: "Select example" } %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<div id="forms-select-multi">
+<%= render layout: example, locals: { heading: "Multi-select", section: "Select" } do %>
+
+<%= render preview('neutral') do %>
+  <label for="data" class="form-label">Date</label>
+  <div class="flex items-center space-x-3 max-w-sm font-tiktok">
+    <%= select_day Date.today.day, {}, { class: "form-select" }  %>
+    <%= select_month Date.today.month, {}, { class: "form-select" }%>
+    <%= select_year Date.today.year, {}, { class: "form-select" } %>
+  </div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="flex items-center space-x-3 max-w-sm">
+  <select id="date_month" name="data[month]" class="form-select">
+      <!-- options -->
+  </select>
+  <select id="date_day" name="data[day]" class="form-select">
+      <!-- options -->
+  </select>
+  <select id="date_year" name="data[year]" class="form-select">
+      <!-- options -->
+  </select>
+</div>
+<% end %>
+
+  <%# .erb %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::DateHelper -->
+<div class="form-group">
+  <label class="form-label">Date</label>
+  <div class="flex items-center space-x-3 max-w-sm">
+    <%%= select_day Date.today.day, {}, { class: "form-select" } %>
+    <%%= select_month Date.today.month, {}, { class: "form-select" } %>
+    <%%= select_year Date.today.year, {}, { class: "form-select" } %>
+  </div>
+</div>
+
+<!-- Railsui::FormBuilder -->
+<!-- Note: For date selects, use date_field for simpler implementation -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.date_field :date, label: "Date" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_forms_input_group_path, prev_text: "Input Group", next_path: systems_forms_checkbox_path, next_text: "Checkbox") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#select-base" %>
+    <%= component_link "Multi-select", "#select-mutli" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/forms/_switch.html.erb

@@ -0,0 +1,60 @@
+<div id="form-switch">
+<%= render layout: example, locals: { heading: "Base" } do %>
+<%#### Switches %>
+<div class="prose mb-10 max-w-full dark:prose-invert">
+  <p>A corresponding <code>label</code> element must be present <strong>after</strong> the input in order for the switch UI to display.</p>
+</div>
+
+<%= render preview 'neutral' do %>
+<div class="form-group mb-0">
+  <input class="form-input-switch" type="checkbox" role="switch" id="switch_default">
+  <label class="form-label mb-0" for="switch_default">Default switch checkbox input</label>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <input class="form-input-switch" type="checkbox" role="switch" id="switch_default">
+  <label class="form-label mb-0" for="switch_default">Default switch checkbox input</label>
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormTagHelper -->
+<div class="form-group">
+  <%%= check_box_tag "switch_default", "1", false, class: "form-input-switch" %>
+  <%%= label_tag "switch_default", nil, class: "form-label mb-0" %>
+</div>
+
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.check_box :switch_default, class: "form-input-switch" %>
+    <%%= f.label :switch_default, class: "form-label mb-0" %>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.switch_field :switch_default, label: "Default switch checkbox input" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+
+
+<%= system_pagination(prev_path: systems_forms_radio_path, prev_text: "Radio", next_path: systems_forms_action_text_path, next_text: "ActionText") %>
+</div>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#form-switch" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/forms/_validation.html.erb

@@ -0,0 +1,52 @@
+<div id="form-validation">
+  <%= render layout: example, locals: { heading: "Errors" } do %>
+
+    <div class="prose dark:prose-invert mb-6">
+      <p>Extend form errors to leverage Rails UI + Tailwind CSS.</p>
+    </div>
+
+<%= render preview('neutral') do %>
+  <form class="font-tiktok" action="#">
+    <div class="bg-neutral-50 text-neutral-700 px-6 py-4 rounded-2xl mb-6 dark:bg-neutral-400/10 dark:border dark:border-neutral-400/20 dark:text-neutral-50 text-sm" role="alert">
+      <p class="font-semibold">3 errors prohibited this post from being saved:</p>
+      <ul class="list-disc mt-3 ml-4">
+        <li>Title can't be blank</li>
+        <li>Body can't be blank</li>
+      </ul>
+    </div>
+    <div class="form-group font-tiktok">
+      <label for="validation_1" class="form-label">Example field</label>
+      <input type="text" class="form-input form-input-error" id="validation_1" placeholder="Example field">
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </form>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/rui/shared/_error_messages.html.erb -->
+
+<%% if resource.errors.any? %>
+<div class="bg-neutral-50 text-neutral-700 px-6 py-4 rounded-2xl mb-6 dark:bg-neutral-400/10 dark:border dark:border-neutral-400/20 dark:text-neutral-50 text-sm" role="alert">
+  <p class="font-semibold"><%%= pluralize(resource.errors.count, "error") %> prohibited this <%%= resource.class.name.downcase %> from being saved:</p>
+  <ul class="list-disc mt-3 ml-4">
+    <%% resource.errors.each do |error| %>
+      <li><%%= error.full_message %></li>
+    <%% end %>
+  </ul>
+</div>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: "erb" %>
+<% end %>
+<% end %>
+
+    <%= system_pagination(prev_path: systems_forms_action_text_path, prev_text: "ActionText", next_path: systems_components_accordion_path, next_text: "Accordion") %>
+  </div>
+
+  <%= content_for :component_nav do %>
+    <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+      <%= component_link "Form errors", "#form-validation" %>
+    <% end %>
+  <% end %>

data/app/views/railsui/themes/corgie/mailers/_devise.html.erb

@@ -0,0 +1,44 @@
+<!--
+  # confirmation_instructions.html.erb
+  # email_changed.html.erb
+  # password_change.html.erb
+  # reset_password_instructions.html.erb
+  # unlock_instructions.html.erb
+-->
+<% theme_path = "railsui/themes/#{Railsui.config.theme.downcase}/mailers/devise" %>
+
+<div class="mb-16 mt-6">
+  <div class="prose prose-neutral dark:prose-invert mb-10 max-w-full">
+     <p>If you use Devise, you can generate views to customize. Those views include mailer templates. Below are snippets you can use after having run <code>rails generate devise:views</code>. The snippets below assume you're using <%= link_to "the customized Rails UI layout file", systems_mailers_layout_path %> for emails.</p>
+  </div>
+</div>
+
+<%= render "#{theme_path}/confirmation_instructions" %>
+
+<%= divider %>
+
+<%= render "#{theme_path}/email_changed" %>
+
+<%= divider %>
+
+<%= render "#{theme_path}/password_changed" %>
+
+<%= divider %>
+
+<%= render "#{theme_path}/reset_password_instructions" %>
+
+<%= divider %>
+
+<%= render "#{theme_path}/unlock_instructions" %>
+
+<%= system_pagination(prev_path: systems_mailers_transactional_path, prev_text: "Transactional", next_path: systems_path, next_text: "Design patterns") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Confirmation instructions", "#devise-confirmation-instructions" %>
+    <%= component_link "Email changed", "#devise-email-changed" %>
+    <%= component_link "Password changed", "#devise-password-changed" %>
+    <%= component_link "Reset password", "#devise-reset-password" %>
+    <%= component_link "Unlock instructions", "#devise-unlock-instructions" %>
+  <% end %>
+<% end %>