removed flatpickr component, provide integration docs instead2

Author: jonasjabari

app/concepts/matestack/ui/bootstrap/form/flatpickr.js

@@ -36,13 +36,12 @@ module Matestack::Ui::Bootstrap::Registry
     bs_form_checkbox: Matestack::Ui::Bootstrap::Form::Checkbox,
     bs_form_radio: Matestack::Ui::Bootstrap::Form::Radio,
     bs_form_switch: Matestack::Ui::Bootstrap::Form::Switch,
-    bs_form_submit: Matestack::Ui::Bootstrap::Form::Submit,
-    bs_form_flatpickr: Matestack::Ui::Bootstrap::Form::Flatpickr,
+    bs_form_submit: Matestack::Ui::Bootstrap::Form::Submit
   }
 
   CONTENT = {
     bs_figure: Matestack::Ui::Bootstrap::Content::Figure,
-    bs_smart_collection: Matestack::Ui::Bootstrap::Content::Collection::Collection,
+    bs_smart_collection: Matestack::Ui::Bootstrap::Content::SmartCollection::Collection,
   }
 
   LAYOUTS = {

app/concepts/matestack/ui/bootstrap/form/flatpickr.rb

@@ -13,10 +13,9 @@ import '../../concepts/matestack/ui/bootstrap/components/modal'
 import '../../concepts/matestack/ui/bootstrap/components/toast'
 import '../../concepts/matestack/ui/bootstrap/components/popover'
 import '../../concepts/matestack/ui/bootstrap/components/tooltip'
-import '../../concepts/matestack/ui/bootstrap/form/flatpickr'
 import '../../concepts/matestack/ui/bootstrap/layout/sidebar'
 import '../../concepts/matestack/ui/bootstrap/layout/sidebar.scss'
-import '../../concepts/matestack/ui/bootstrap/content/collection/collection.scss'
+import '../../concepts/matestack/ui/bootstrap/content/smart_collection/collection.scss'
 
 const MatestackUiBootstrap = {}
 

app/concepts/matestack/ui/bootstrap/registry.rb

@@ -0,0 +1,103 @@
+# Flatpickr Integration
+
+[Flatpickr](https://flatpickr.js.org) Datepicker integration, compatible with Bootstrap's design schema. In order to limit the scope of the `matestack-ui-bootstrap` gem, Flatpickr is not part of this gem.
+
+The below shown example should enable you to easily integrate Flatpickr (or any other Datepicker library) according to your needs!
+
+## Ruby component
+
+`app/matestack/components/form/flatpickr.rb`
+
+```ruby
+class Components::Form::Flatpickr < Matestack::Ui::Bootstrap::Form::Input
+
+  optional :enable_time
+
+  vue_js_component_name "form-flatpickr-component"
+
+  def setup
+    @component_config[:init_value] = init_value
+    @component_config[:enable_time] = enable_time
+  end
+
+  def response
+    # exactly one root element is required since this is a Vue.js component template
+    div class: "form-flatpickr-component" do
+      label for: attr_key,  class: "form-label", text: input_label if input_label
+      input input_attributes.merge(bootstrap_flatpickr_input_attributes)
+      render_errors
+      render_form_text
+    end
+  end
+
+  def bootstrap_flatpickr_input_attributes
+    bootstrap_input_attributes.merge({
+      type: :text,
+      class: (options[:class] || "") << (" form-control flatpickr"),
+      disabled: disabled
+    })
+  end
+
+end
+```
+
+`app/matestack/components/registry.rb`
+
+## Registry
+
+```ruby
+module Components::Registry
+
+  Matestack::Ui::Core::Component::Registry.register_components(
+    #...
+    form_flatpickr: Components::Form::Flatpickr
+    #...
+  )
+
+end
+
+```
+
+`app/matestack/components/chart_js.js`
+
+## Vue.js component
+
+**Do not forget to require flatpickr in your package.json**
+**Do not forget to import the following file into you application pack**
+
+```javascript
+import flatpickr from "flatpickr";
+
+MatestackUiCore.Vue.component('form-flatpickr-component', {
+  mixins: [MatestackUiCore.componentMixin, MatestackUiCore.formInputMixin],
+  data() {
+    return {};
+  },
+  mounted: function(){
+    flatpickr(this.$el.querySelector('.flatpickr'), {
+      defaultDate: this.componentConfig["init_value"],
+      enableTime: (this.componentConfig["enable_time"] == true)
+    });
+    //all kind of configuration possible for flatpickr may be implemented here according to your needs
+  }
+});
+
+```
+
+## Usage
+
+### Example 1: Usage in form (e.g. mapped to an Active Record model) with enabled time picker
+
+```ruby
+form some_form_config do
+
+  div class: "mb-3" do
+    form_flatpickr key: :shipped_at, label: "Shipped at", enable_time: true, type: :text
+  end
+
+  div class: "mb-3" do
+    bs_form_submit button_variant: :primary, spinner_variant: :light, text: "Submit"
+  end
+
+end
+```

app/javascript/matestack-ui-bootstrap/index.js

@@ -13,6 +13,7 @@ import MatestackUiCore from 'matestack-ui-core';
 import MatestackUiBootstrap from 'matestack-ui-bootstrap';
 
 import '../../matestack/dummy/components/chart_js.js'
+import '../../matestack/dummy/components/form/flatpickr.js'
 
 import './stylesheets/rouge.scss.erb'
 import '../../matestack/dummy/components/md.scss'

docs/integrations/flatpickr.md

@@ -0,0 +1,14 @@
+import flatpickr from "flatpickr";
+
+MatestackUiCore.Vue.component('form-flatpickr-component', {
+  mixins: [MatestackUiCore.componentMixin, MatestackUiCore.formInputMixin],
+  data() {
+    return {};
+  },
+  mounted: function(){
+    flatpickr(this.$el.querySelector('.flatpickr'), {
+      defaultDate: this.componentConfig["init_value"],
+      enableTime: (this.componentConfig["enable_time"] == true)
+    });
+  }
+});

spec/dummy/app/javascript/packs/application.js

@@ -0,0 +1,33 @@
+class Dummy::Components::Form::Flatpickr < Matestack::Ui::Bootstrap::Form::Input
+
+  optional :form_text
+  optional :disabled
+  optional :enable_time
+  optional :type
+
+  vue_js_component_name "form-flatpickr-component"
+
+  def setup
+    @component_config[:init_value] = init_value
+    @component_config[:enable_time] = enable_time
+  end
+
+  def response
+    # exactly one root element is required since this is a Vue.js component template
+    div class: "form-flatpickr-component" do
+      label for: attr_key,  class: "form-label", text: input_label if input_label
+      input input_attributes.merge(bootstrap_flatpickr_input_attributes)
+      render_errors
+      render_form_text
+    end
+  end
+
+  def bootstrap_flatpickr_input_attributes
+    bootstrap_input_attributes.merge({
+      type: :text,
+      class: (options[:class] || "") << (" form-control flatpickr"),
+      disabled: disabled
+    })
+  end
+
+end

spec/dummy/app/matestack/dummy/components/form/flatpickr.js

@@ -4,7 +4,7 @@ def order_form_partial form_config
     form form_config do
 
       div class: "mb-3" do
-        bs_form_flatpickr key: :shipped_at, label: "Shipped at", enable_time: true, type: :text
+        form_flatpickr key: :shipped_at, label: "Shipped at", enable_time: true, type: :text
       end
 
       div class: "mb-3" do