Add flatpickr component (#26)

* Add flatpickr component

* Lint

* Fix eslint

* Refactor to use stimulus targets

* Import flatpickr js through CDN

* Split in to four javascript controllers

* Change weird sentence

* Refactor to single controller and pass stimulus value

Author: oliveranthony17

app/assets/stylesheets/components/_flatpickr.scss

@@ -0,0 +1,4 @@
+// See notes - you need to add the library and stylesheet via the CDN
+
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

app/components/previews/flatpickr_component_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class FlatpickrComponentPreview < Lookbook::Preview
+  include LookbookHelper
+
+  # Add the following to your `application.html.erb` head:
+  #
+  # `<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>`<br>
+  # `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">`
+  #
+  # @source ../../../app/views/components/flatpickr/_themes.html.erb
+
+  def themes
+    render 'components/flatpickr/themes'
+  end
+end

app/javascript/controllers/flatpickr_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class FlatpickrController extends Controller {
+  static values = {
+    type: String,
+  };
+
+  connect() {
+    switch (this.typeValue) {
+      case 'custom':
+        flatpickr(this.element, {
+          altInput: true, // creates a prettier input field
+          enableTime: true, // add time picker
+          time_24hr: true, // sets a 24 hour time picker
+          minTime: '09:00',
+          maxTime: '17:30',
+          locale: {
+            firstDayOfWeek: 1, // start week on Monday
+          },
+          disable: [
+            function (date) {
+              return date.getDay() === 0 || date.getDay() === 6; // disable weekends
+            },
+          ],
+          minDate: 'today', // sets the minimum date
+          maxDate: new Date().fp_incr(14), // sets the maximum date 2 weeks from now
+        });
+        break;
+
+      case 'multiple':
+        flatpickr(this.element, {
+          altInput: true, // creates a prettier input field
+          altFormat: 'd M Y', // overwrites date format with altInput enabled (dateFormat does not work)
+          mode: 'multiple', // allows multiple dates to be selected
+        });
+        break;
+
+      case 'range':
+        flatpickr(this.element, {
+          altInput: true, // creates a prettier input field
+          mode: 'range', // allows a range of dates to be selected
+          defaultDate: [new Date(), new Date().fp_incr(14)], // sets the default values
+        });
+        break;
+
+      // default is 'basic'
+      default:
+        flatpickr(this.element, {
+          // customize options here
+          // see: https://flatpickr.js.org/examples/
+        });
+    }
+  }
+}

app/views/components/flatpickr/_themes.html.erb

@@ -0,0 +1,50 @@
+<div class="mt-3 col-md-6">
+  <%= form_for :appointment do |form| %>
+    <div class="my-3">
+      <p class="my-1">Default HTML date input</p>
+      <%= form.date_field :normal_date %>
+    </div>
+
+    <div class="my-3">
+      <p class="my-1">Default Flatpickr date input</p>
+      <%= form.date_field :flatpickr_date,
+                          data: {
+                            controller: 'flatpickr'
+                          } %>
+    </div>
+
+    <div class="my-3">
+      <p class="my-1">Custom Flatpickr date input</p>
+      <%= form.date_field :custom_flatpickr_date,
+                          data: {
+                            controller: 'flatpickr',
+                            flatpickr_type_value: 'custom'
+                          },
+                          placeholder: 'Select appointment date' %>
+    </div>
+
+    <div class="my-3">
+      <p class="my-1">Multiple select Flatpickr date input</p>
+      <%= form.date_field :multiple_flatpickr_date,
+                          data: {
+                            controller: 'flatpickr',
+                            flatpickr_type_value: 'multiple'
+                          },
+                          placeholder: 'Select multiple dates' %>
+    </div>
+
+    <div class="my-3">
+      <p class="my-1">Range Flatpickr date input</p>
+      <%= form.date_field :range_flatpickr_date,
+                          data: {
+                            controller: 'flatpickr',
+                            flatpickr_type_value: 'range'
+                          },
+                          placeholder: 'Select a range of dates' %>
+    </div>
+
+    <div class="my-3">
+      <%= form.submit 'Submit' %>
+    </div>
+  <% end %>
+</div>

app/views/layouts/application.html.erb

@@ -9,6 +9,9 @@
     <%= stylesheet_link_tag 'application', 'data-turbo-track': 'reload' %>
     <%= javascript_importmap_tags %>
     <script src='https://kit.fontawesome.com/328ac1243c.js' crossorigin='anonymous' defer='true'></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
   </head>
 
   <body>