railsui 3.1.5 → 3.2.0

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

@@ -0,0 +1,133 @@
+<%= render layout: example, locals: { heading: "Transactional", section: "Mailers" } do %>
+
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>The Rails UI transactional offers a design for those user-specific situations that often require an action.</p>
+  </div>
+
+<%= email_viewer("A transactional template", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+
+    <p>Hey Andy,</p>
+
+    <p>Thanks for subscribing to Rails UI. This email contains the receipt from your purchase.</p>
+
+    <p>The purchase will appear as <code>RAILSUI</code> on your credit card statement for the card ending in <code>1234</code>. You may <%= link_to "update your payment information", "#" %> at any time. Below you'll find the details of your order:</p>
+
+    <%= spacer(16) %>
+
+    <table class="mb-0">
+      <tbody>
+        <tr>
+          <td>
+            Order #2345
+          </td>
+          <td align="right">
+            01/01/23
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <hr />
+
+    <table>
+      <thead>
+        <th align="left">Description</th>
+        <th align="right">Amount</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <%= link_to "Rails UI", "https://railsui.com", target: :_blank %>
+            <p class="small mb-0">Renews annually. Next charge on 01/01/24.</p>
+          </td>
+          <td align="right">
+            $1,000,000.00
+          </td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td align="right">
+            <strong>Total: $1,000,000.00</strong>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <%= spacer(16) %>
+
+    <p>If you have any questions about this receipt or Rails UI, please reply to this email or reach out to our support team for help. Someone will get back to you within a few hours.</p>
+
+    <%= email_action("View receipt", "https://media4.giphy.com/media/3o7btXiWjYvDFkQEQ8/giphy.gif?cid=790b76111901e8fe756c91d0a70f7b4cb769affbc8c93779&rid=giphy.gif&ct=g", theme: "secondary") %>
+  <% end %>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/some_mailer/transactional.html.erb -->
+<p>Hey Andy,</p>
+
+<p>Thanks for subscribing to Rails UI. This email contains the receipt from your purchase.</p>
+
+<p>The purchase will appear as <code>RAILSUI</code> on your credit card statement for the card ending in <code>1234</code>. You may <%%= link_to "update your payment information", "#" %> at any time. Below you'll find the details of your order:</p>
+
+<%%= spacer(16) %>
+
+<table class="mb-0">
+  <tbody>
+    <tr>
+      <td>
+        Order #2345
+      </td>
+      <td align="right">
+        01/01/23
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<hr />
+
+<table>
+  <thead>
+    <th align="left">Description</th>
+    <th align="right">Amount</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <%%= link_to "Rails UI", "https://railsui.com", target: :_blank %>
+        <p class="small mb-0">Renews annually. Next charge on 01/01/24.</p>
+      </td>
+      <td align="right">
+        $1,000,000.00
+      </td>
+    </tr>
+    <tr>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td></td>
+      <td align="right">
+        <strong>Total: $1,000,000.00</strong>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<%%= spacer(16) %>
+
+<p>If you have any questions about this receipt or Rails UI, please reply to this email or reach out to our support team for help. Someone will get back to you within a few hours.</p>
+
+<%%= email_action("View receipt", "#", theme: "secondary") %>
+<% end %>
+
+
+  <%= render_snippet active_tab: "erb", erb_filename: "transactional.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_mailers_promotion_path, prev_text: "Promotion", next_path: systems_mailers_devise_path, next_text: "Devise") %>

data/app/views/railsui/themes/corgie/mailers/devise/_confirmation_instructions.html.erb

@@ -0,0 +1,34 @@
+<div id="devise-confirmation-instructions">
+<%= render layout: example, locals: { heading: "Confirmation Instructions", section: "Mailers / Devise" } do %>
+
+<%= email_viewer("Confirmation instructions", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+
+    <p>Hi john.doe@example.com,</p>
+
+    <p>Thanks for signing up at ACME.xyz! Before you access your new account we want to make sure it's really you.</p>
+
+    <p>Confirm your account by clicking the button below.</p>
+
+    <%= email_action "Confirm my account", "#" %>
+  <% end %>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/mailer/confirmation_instructions.html.erb -->
+<p>Hi <%%= @email %>,</p>
+
+<p>Thanks for signing up at ACME.xyz! Before you access your new account we want to make sure it's really you.</p>
+
+<p>Confirm your account by clicking the button below.</p>
+
+<%%= email_action "Confirm my account", confirmation_url(@resource, confirmation_token: @token) %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "confirmation_instructions.html.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/mailers/devise/_email_changed.html.erb

@@ -0,0 +1,32 @@
+<div id="devise-email-changed">
+<%= render layout: example, locals: { heading: "Email Changed", section: "Mailers / Devise" } do %>
+
+<%= email_viewer("Email changed", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+
+    <p>Hi john.doe@example.com,</p>
+
+    <p>We're contacting you to notify you that your email has been changed to saasquatch@railsui.com.</p>
+
+    <%= email_action "View account", "#" %>
+  <% end %>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/mailer/email_changed.html.erb -->
+<p>Hi <%%= @email %>,</p>
+
+<%% if @resource.try(:unconfirmed_email?) %>
+  <p>We're contacting you to notify you that your email is being changed to <%%= @resource.unconfirmed_email %>.</p>
+<%% else %>
+  <p>We're contacting you to notify you that your email has been changed to <%%= @resource.email %>.</p>
+<%% end %>
+
+<%%= email_action "View account", edit_user_registration_url %>
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "email_changed.html.erb"  %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/mailers/devise/_password_changed.html.erb

@@ -0,0 +1,25 @@
+<div id="devise-password-changed">
+<%= render layout: example, locals: { heading: "Change password", section: "Mailers / Devise" } do %>
+
+<%= email_viewer("Password changed", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+
+    <p>Hi john.doe@example.com,</p>
+
+    <p>We're contacting you to notify you that your password has been changed.</p>
+
+  <% end %>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/mailer/password_changed.html.erb -->
+<p>Hi <%%= @resource.email %>,</p>
+
+<p>We're contacting you to notify you that your password has been changed.</p>
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "password_changed.html.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/mailers/devise/_reset_password_instructions.html.erb

@@ -0,0 +1,33 @@
+<div id="devise-reset-password">
+<%= render layout: example, locals: { heading: "Reset password", section: "Mailers / Devise" } do %>
+
+<%= email_viewer("Reset password instructions", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+
+<p>Hi john.doe@example.com,</p>
+
+<p>We're contacting you to notify you that your password has been changed.</p>
+
+<p>If you didn't make this change we recommend <%= link_to "resetting your password immediately", "#" %> or <%= mail_to "some@email.com", "contacting someone from our support team" %>.</p>
+
+<%= email_action "Reset password", "#" %>
+
+  <% end %>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/mailer/reset_password_instructions.html.erb -->
+<p>Hi <%%= @resource.email %>,</p>
+
+<p>We're contacting you to notify you that your password has been changed.</p>
+
+<p>If you didn't make this change we recommend <%%= link_to "resetting your password immediately", edit_password_url(@resource, reset_password_token: @token) %> or <%%= mail_to Railsui.config.support_email, "contacting someone from our support team" %>.</p>
+
+<%%= email_action "Reset password", edit_password_url(@resource, reset_password_token: @token) %>
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "reset_password_instructions.html.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/mailers/devise/_unlock_instructions.html.erb

@@ -0,0 +1,32 @@
+<div id="devise-unlock-instructions">
+<%= render layout: example, locals: { heading: "Unlock Instructions", section: "Mailers / Devise" } do %>
+
+<%= email_viewer("Unlock instructions", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+
+<p>Hi John Doe,</p>
+
+<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
+
+<p>Click the button below to unlock your account:</p>
+
+<%= email_action "Unlock my account", "#" %>
+  <% end %>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/mailer/unlock_instructions.html.erb -->
+<p>Hi <%%= @resource.email %>,</p>
+
+<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
+
+<p>Click the link below to unlock your account:</p>
+
+<%%= email_action "Unlock account", unlock_url(@resource, unlock_token: @token) %>
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "unlock_instructions.html.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/scaffolds/_edit.html.erb

@@ -0,0 +1,88 @@
+<div id="scaffolds-edit">
+<%= render layout: example, locals: { heading: "Edit", section: "Scaffolds" } do %>
+
+<%= render preview('neutral') do %>
+<div class="max-w-3xl mx-auto px-4 my-16 font-tiktok">
+  <div class="mb-6 pb-6 border-b dark:border-neutral-700 border-neutral-200/90">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-neutral-500 dark:text-neutral-200 text-sm">
+      <ol class="flex flex-wrap items-center space-x-3">
+        <li>
+          <a class="hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" href="/posts">Posts</a>
+        </li>
+        <li class="flex space-x-3">
+          <div class="flex items-center">
+            <span class="text-neutral-300 dark:text-neutral-500">/</span>
+          </div>
+          <span class="text-neutral-600 dark:text-neutral-500" aria-current="page">Edit</span>
+        </li>
+      </ol>
+    </nav>
+    <div class="flex items-center justify-between">
+      <h1 class="h2">Edit Post</h1>
+        <form data-turbo-confirm="Are you sure?" class="button_to" method="post" action="#"><input type="hidden" name="_method" value="delete" autocomplete="off"><button class="btn btn-white" type="submit">Delete</button><input type="hidden" name="authenticity_token" value="#" autocomplete="off"></form>
+      </div>
+    </div>
+
+    <div>
+      <form class="font-tiktok" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off"><input type="hidden" name="authenticity_token" value="#" autocomplete="off">
+
+
+    <div class="form-group">
+      <label class="form-label" for="post_title">Title</label>
+      <input class="form-input" type="text" value="Testing 123" name="post[title]" id="post_title">
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="post_content">Content</label>
+      <textarea class="form-input" name="post[content]" id="post_content">Testing 123</textarea>
+    </div>
+
+    <div class="flex items-center justify-between flex-wrap">
+      <div class="sm:flex-1 sm:mb-0 mb-6">
+        <input type="submit" name="commit" value="Update Post" class="btn btn-primary" data-disable-with="Update Post">
+      </div>
+
+      <a class="btn btn-white" href="#">Cancel</a>
+    </div>
+  </form>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="max-w-3xl mx-auto px-4 my-16">
+  <div class="mb-6 pb-6 border-b border-neutral-200/90 dark:border-neutral-700">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-neutral-500 dark:text-neutral-200 text-sm">
+      <ol class="flex flex-wrap items-center space-x-3">
+        <li>
+          <%%= link_to "Posts", posts_path, class: "hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" %>
+        </li>
+        <li class="flex space-x-3">
+          <div class="flex items-center">
+            <span class="text-neutral-300 dark:text-neutral-500">/</span>
+          </div>
+          <span class="text-neutral-600 dark:text-neutral-500" aria-current="page">Edit</span>
+        </li>
+      </ol>
+    </nav>
+    <div class="flex items-center justify-between">
+      <h1 class="h2">Edit Post</h1>
+      <%%= button_to "Delete", @post, method: :delete, class: "btn btn-white", form: { data: { turbo_confirm: "Are you sure?" } } %>
+    </div>
+  </div>
+
+  <div>
+    <%%= render "form", post: @post %>
+  </div>
+</div>
+<% end %>
+
+<% content_for :ruby do %>
+
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "edit.html.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/scaffolds/_index.html.erb

@@ -0,0 +1,88 @@
+<div id="scaffolds-index">
+<%= render layout: example, locals: { heading: "Index", section: "Scaffolds" } do %>
+
+<%= render preview('neutral') do %>
+<div class="max-w-3xl mx-auto px-4 my-16 font-tiktok">
+  <div class="flex items-center justify-between pb-6 border-b dark:border-neutral-700 border-neutral-200/90">
+    <h1 class="h2">Posts</h1>
+    <div class="flex items-center justify-end">
+      <a href="#" class="btn btn-primary">New Post</a>
+    </div>
+  </div>
+  <div id="posts" class="divide-y divide-neutral-200/90 dark:divide-neutral-700 mb-10">
+    <!-- post 1 content -->
+    <div class="py-3">
+      <article class="font-tiktok py-6 prose dark:prose-invert">
+        <div>
+          <p class="mb-0 font-semibold">
+            Title
+          </p>
+          <p class="my-0">
+            Example post title
+          </p>
+        </div>
+        <div>
+          <p class="mb-0 font-semibold">
+            Content
+          </p>
+          <p class="my-0">
+            Example post content
+          </p>
+        </div>
+        <time class="text-neutral-600 dark:text-neutral-400 text-xs mt-2" datetime="February 23, 2023 12:37">Created 1 minute ago</time>
+      </article>
+
+      <a href="#" class="btn btn-primary my-3">View post</a>
+    </div>
+    <!-- post 2 content -->
+    <div class="py-3">
+      <article id="post_2" class="py-6 prose dark:prose-invert">
+        <div>
+          <p class="mb-0 font-semibold">
+            Title
+          </p>
+          <p class="my-0">
+            Example post title 2
+          </p>
+        </div>
+        <div>
+          <p class="mb-0 font-semibold">
+            Content
+          </p>
+          <p class="my-0">
+            Example post content 2
+          </p>
+        </div>
+        <time class="text-neutral-600 dark:text-neutral-400 text-xs mt-2" datetime="February 23, 2023 12:37">Created 1 minute ago</time>
+      </article>
+
+      <a href="#" class="btn btn-primary my-3">View post</a>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="max-w-3xl mx-auto px-4 my-16">
+  <div class="flex items-center justify-between pb-6 border-b dark:border-neutral-700">
+    <h1 class="h2">Posts</h1>
+    <div class="flex items-center justify-end">
+      <%%= link_to "New Post", new_post_path, class: "btn btn-primary" %>
+    </div>
+  </div>
+
+  <div id="posts" class="divide-y divide-neutral-200/90 dark:divide-neutral-700 mb-10">
+    <%%= render @posts %>
+  </div>
+</div>
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "index.html.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/scaffolds/_new.html.erb

@@ -0,0 +1,80 @@
+<div id="scaffolds-new">
+<%= render layout: example, locals: { heading: "New", section: "Scaffolds" } do %>
+
+<%= render preview('neutral') do %>
+<div class="max-w-3xl mx-auto px-4 my-16 font-tiktok">
+  <div class="mb-6 pb-6 border-b border-neutral-200/90 dark:border-neutral-700">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-neutral-500 dark:text-neutral-200 text-sm">
+      <ol class="flex flex-wrap items-center space-x-3">
+        <li>
+          <a class="hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" href="#">Posts</a>
+        </li>
+        <li class="flex space-x-3">
+          <div class="flex items-center">
+            <span class="text-neutral-300 dark:text-neutral-500">/</span>
+          </div>
+          <span class="text-neutral-600 dark:text-neutral-500" aria-current="page">New</span>
+        </li>
+      </ol>
+    </nav>
+    <h1 class="h2">New Post</h1>
+    </div>
+    <div>
+      <form class="font-tiktok" action="#" accept-charset="UTF-8" method="post">
+      <input type="hidden" name="authenticity_token" value="#" autocomplete="off">
+
+      <div class="form-group">
+        <label class="form-label" for="post_title">Title</label>
+        <input class="form-input" type="text" name="post[title]" id="post_title">
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="post_content">Content</label>
+        <textarea class="form-input" name="post[content]" id="post_content"></textarea>
+      </div>
+
+      <div class="flex items-center justify-between flex-wrap">
+        <div class="sm:flex-1 sm:mb-0 mb-6">
+          <input type="submit" name="commit" value="Create Post" class="btn btn-primary">
+        </div>
+          <a class="btn btn-white" href="#">Cancel</a>
+      </div>
+    </form>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="max-w-3xl mx-auto px-4 my-16">
+  <div class="mb-6 pb-6 border-b border-neutral-200/90 dark:border-neutral-700">
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-neutral-500 dark:text-neutral-200 text-sm">
+      <ol class="flex flex-wrap items-center space-x-3">
+        <li>
+          <%%= link_to "Posts", posts_path, class: "hover:underline hover:text-neutral-600 dark:hover:text-neutral-400" %>
+        </li>
+        <li class="flex space-x-3">
+          <div class="flex items-center">
+            <span class="text-neutral-300 dark:text-neutral-500">/</span>
+          </div>
+          <span class="text-neutral-600 dark:text-neutral-500" aria-current="page">New</span>
+        </li>
+      </ol>
+    </nav>
+    <h1 class="h2">New Post</h1>
+  </div>
+
+  <div>
+    <%%= render "form", post: @post %>
+  </div>
+</div>
+<% end %>
+
+<% content_for :ruby do %>
+
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/scaffolds/_partial.html.erb

@@ -0,0 +1,56 @@
+<div id="scaffolds-partial">
+<%= render layout: example, locals: { heading: "Partial", section: "Scaffolds" } do %>
+
+<%= render preview('neutral') do %>
+<article class="font-tiktok py-6 prose prose-neutral dark:prose-invert">
+  <div>
+    <p class="mb-0 font-semibold">
+      Title
+    </p>
+    <p class="my-0">
+      Example post title 2
+    </p>
+  </div>
+  <div>
+    <p class="mb-0 font-semibold">
+      Content
+    </p>
+    <p class="my-0">
+      Example post content 2
+    </p>
+  </div>
+  <time class="text-neutral-600 dark:text-neutral-400 text-xs mt-2" datetime="February 23, 2023 12:37">Created 1 minute ago</time>
+</article>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<article id="<%%= dom_id post %>" class="py-6 prose dark:prose-invert">
+  <div>
+    <p class="mb-0 font-semibold">
+      Title
+    </p>
+    <p class="mt-0">
+      <%%= post.title %>
+    </p>
+  </div>
+  <div>
+    <p class="mb-0 font-semibold">
+      Content
+    </p>
+    <p class="my-0">
+      <%%= post.content %>
+    </p>
+  </div>
+  <time class="text-neutral-600 dark:text-neutral-400 text-xs mt-2" datetime="<%%= post.created_at.to_formatted_s(:long) %>">Created <%%= time_ago_in_words(post.created_at) + " ago" %></time>
+</article>
+<% end %>
+
+<% content_for :ruby do %>
+
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "_post.html.erb" %>
+<% end %>
+<% end %>
+</div>