bard-file_field 0.1.0

data/dummy/features/support/selectors.rb

@@ -0,0 +1,63 @@
+module WithinHelpers
+  # Maps a name to a selector. Used primarily by the
+  #
+  #   When /^(.+) within (.+)$/ do |step, scope|
+  #
+  # step definitions in web_steps.rb
+  #
+  def selector_for(locator)
+    case locator
+
+    when /the "(.+)" bard-file/
+      field = find_field($1)
+      bard_file = field.find(:xpath, "..")
+
+    when /the "(.+)" uploaded-file/
+      page.document.synchronize 5, errors: [Capybara::ElementNotFound, Ferrum::JavaScriptError] do
+        find("uploaded-file[filename='#{$1}']").shadow_root.find("figure")
+      end
+
+    # Add more mappings here.
+    # Here is an example that pulls values out of the Regexp:
+    #
+    #  when /^the (notice|error|info) flash$/
+    #    ".flash.#{$1}"
+
+    # You can also return an array to use a different selector
+    # type, like:
+    #
+    #  when /the header/
+    #    [:xpath, "//header"]
+
+    # This allows you to provide a quoted selector as the scope
+    # for "within" steps as was previously the default for the
+    # web steps:
+
+    else
+      raise "Can't find mapping from \"#{locator}\" to a selector.\n" +
+        "Now, go and add a mapping in #{__FILE__}"
+    end
+  end
+
+  def element_for(locator)
+    args = Array(selector_for(locator))
+    find(args.shift, **(args.shift || {}))
+  end
+
+  def with_scope(locator)
+    args = Array(selector_for(locator))
+    within(args.shift, **(args.shift || {})) { yield }
+  end
+end
+World(WithinHelpers)
+
+# Single-line step scoper
+When /^(.*) within (.*[^:])$/ do |step_fragment, parent|
+  with_scope(parent) { step step_fragment }
+end
+
+# Multi-line step scoper
+When /^(.*) within (.*[^:]):$/ do |step_fragment, parent, table_or_string|
+  with_scope(parent) { step "#{step_fragment}:", table_or_string }
+end
+

data/dummy/features/support/step_definitions/download_steps.rb

@@ -0,0 +1,4 @@
+Then "I should download a file named {string}" do |filename|
+  page.driver.downloads[filename]
+end
+

data/dummy/features/support/step_definitions/web_steps.rb

@@ -0,0 +1,94 @@
+Given "I am on the homepage" do
+  visit "/"
+end
+
+Given "I am on {string}" do |path|
+  visit path
+end
+
+When "I reload the page" do
+  visit page.current_path
+end
+
+When "I fill in {string} with {string}" do |field, value|
+  fill_in field, with: value
+end
+
+When "I attach the file {string} to {string}" do |path, field|
+  attach_file field, Rails.root.join("features/support/fixtures/#{path}")
+end
+
+When "I attach a file of type {string} to {string}" do |extension, field|
+  path = Rails.root.join("features/support/fixtures/empty.#{extension}")
+  FileUtils.touch(path)
+  attach_file field, path
+end
+
+When "I attach the following files to {string}:" do |field, table|
+  files = table.raw.map(&:first).map { |path| Rails.root.join("features/support/fixtures/#{path}") }
+  attach_file field, files
+end
+
+When "I follow {string}" do |link|
+  find_link(link).trigger "click"
+end
+
+When "I press {string}" do |button|
+  click_button button
+end
+
+Then "I should see {string} filled in with {string}" do |field, value|
+  expect(find_field(field).value).to eq(value)
+end
+
+Then /^I should see "(.*?)"$/ do |text|
+  expect(page).to have_content(text)
+end
+
+Then /^I should not see "(.*?)"$/ do |text|
+  expect(page).to_not have_content(text)
+end
+
+Then "I should see the {string} image" do |filename|
+  expect(page).to have_css("img[src$='/#{filename}']")
+end
+
+Then "I should not see the {string} image" do |filename|
+  expect(page).to_not have_css("img[src$='/#{filename}']")
+end
+
+Then "I should see a preview of {string}" do |filename|
+  expect(find("uploaded-file")[:filename]).to eq(filename)
+end
+
+Then "I should not see a preview" do
+  expect(page).to_not have_css("figure")
+end
+
+Then "I should see an upload progress bar at 100%" do
+  page.document.synchronize 5, errors: [Capybara::ElementNotFound, Ferrum::JavaScriptError] do
+    expect(page).to have_css("progress-bar[percent='100']")
+  end
+end
+
+Then "the {string} bard-file should have a validation error containing {string}" do |field, message|
+  messages = bard_file_validation_messages(field)
+  expect(messages).to include message
+end
+
+Then "the {string} bard-file should have no validation errors" do |field|
+  messages = bard_file_validation_messages(field)
+  expect(messages).to be_empty
+end
+
+def bard_file_validation_messages field
+  field = find_field(field)
+  bard_file = field.find(:xpath, "..")
+  [bard_file, *bard_file.all("uploaded-file input")].map do |e|
+    e.evaluate_script("this.validationMessage")
+  end.select(&:present?)
+end
+
+Then "debugger" do
+  debugger
+end

data/dummy/features/validations.feature

@@ -0,0 +1,71 @@
+Feature: form.bard_file_field has validation options
+  Scenario: It supports required validation
+    Given I am on "/validations/required_file"
+
+    When I press "Submit"
+    Then I should not see "Post created!"
+    And the "Required file" bard-file should have a validation error containing "Please select a file."
+
+    When I attach the file "image.jpg" to "Required file"
+    And I press "Submit"
+    Then I should see "Post created!"
+    And I should see a preview of "image.jpg" within the "Required file" bard-file
+
+  Scenario: It supports file type validation
+    Given I am on "/validations/optional_image"
+
+    When I attach the file "video.mp4" to "Optional image"
+    Then the "Optional image" bard-file should have a validation error containing "Must be a image."
+    Then I should not see a preview within the "Optional image" bard-file
+
+    When I press "Submit"
+    Then I should not see "Post created!"
+    And I should not see "video.mp4"
+
+    When I attach the file "image.jpg" to "Optional image"
+    And I press "Submit"
+    Then I should see "Post created!"
+    And I should see a preview of "image.jpg" within the "Optional image" bard-file
+
+  Scenario: It supports file size validation
+    Given I am on "/validations/optional_file_with_max_size"
+    When I attach the file "video.mp4" to "File"
+    Then the "File" bard-file should have a validation error containing "Must be smaller than 100KB, and \"video.mp4\" is 119.59KB. Please attach a smaller file."
+    Then I should not see a preview within the "File" bard-file
+
+    When I press "Submit"
+    Then I should not see "Post created!"
+    And I should not see "video.mp4"
+
+    When I attach the file "image.jpg" to "File"
+    And I press "Submit"
+    Then I should see "Post created!"
+    And I should see a preview of "image.jpg" within the "File" bard-file
+
+  Scenario Outline: It supports many file extensions
+    Given I am on "/validations/required_media"
+    When I attach a file of type "<extension>" to "Required media"
+    Then the "Required media" bard-file should have no validation errors
+
+    Examples:
+      | extension |
+      # Images
+      | JPEG      |
+      | jpeg      |
+      | jpg       |
+      | png       |
+      | gif       |
+      | bmp       |
+      | tiff      |
+      | heic      |
+      # Videos
+      | mp4       |
+      | avi       |
+      | mov       |
+      | wmv       |
+      | 3gpp      |
+      | webm      |
+      | m4v       |
+      | mkv       |
+      | flv       |
+

data/dummy/public/404.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>The page you were looking for doesn't exist (404)</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+  .rails-default-error-page {
+    background-color: #EFEFEF;
+    color: #2E2F30;
+    text-align: center;
+    font-family: arial, sans-serif;
+    margin: 0;
+  }
+
+  .rails-default-error-page div.dialog {
+    width: 95%;
+    max-width: 33em;
+    margin: 4em auto 0;
+  }
+
+  .rails-default-error-page div.dialog > div {
+    border: 1px solid #CCC;
+    border-right-color: #999;
+    border-left-color: #999;
+    border-bottom-color: #BBB;
+    border-top: #B00100 solid 4px;
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
+    background-color: white;
+    padding: 7px 12% 0;
+    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
+  }
+
+  .rails-default-error-page h1 {
+    font-size: 100%;
+    color: #730E15;
+    line-height: 1.5em;
+  }
+
+  .rails-default-error-page div.dialog > p {
+    margin: 0 0 1em;
+    padding: 1em;
+    background-color: #F7F7F7;
+    border: 1px solid #CCC;
+    border-right-color: #999;
+    border-left-color: #999;
+    border-bottom-color: #999;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-top-color: #DADADA;
+    color: #666;
+    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
+  }
+  </style>
+</head>
+
+<body class="rails-default-error-page">
+  <!-- This file lives in public/404.html -->
+  <div class="dialog">
+    <div>
+      <h1>The page you were looking for doesn't exist.</h1>
+      <p>You may have mistyped the address or the page may have moved.</p>
+    </div>
+    <p>If you are the application owner check the logs for more information.</p>
+  </div>
+</body>
+</html>

data/dummy/public/422.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>The change you wanted was rejected (422)</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+  .rails-default-error-page {
+    background-color: #EFEFEF;
+    color: #2E2F30;
+    text-align: center;
+    font-family: arial, sans-serif;
+    margin: 0;
+  }
+
+  .rails-default-error-page div.dialog {
+    width: 95%;
+    max-width: 33em;
+    margin: 4em auto 0;
+  }
+
+  .rails-default-error-page div.dialog > div {
+    border: 1px solid #CCC;
+    border-right-color: #999;
+    border-left-color: #999;
+    border-bottom-color: #BBB;
+    border-top: #B00100 solid 4px;
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
+    background-color: white;
+    padding: 7px 12% 0;
+    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
+  }
+
+  .rails-default-error-page h1 {
+    font-size: 100%;
+    color: #730E15;
+    line-height: 1.5em;
+  }
+
+  .rails-default-error-page div.dialog > p {
+    margin: 0 0 1em;
+    padding: 1em;
+    background-color: #F7F7F7;
+    border: 1px solid #CCC;
+    border-right-color: #999;
+    border-left-color: #999;
+    border-bottom-color: #999;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-top-color: #DADADA;
+    color: #666;
+    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
+  }
+  </style>
+</head>
+
+<body class="rails-default-error-page">
+  <!-- This file lives in public/422.html -->
+  <div class="dialog">
+    <div>
+      <h1>The change you wanted was rejected.</h1>
+      <p>Maybe you tried to change something you didn't have access to.</p>
+    </div>
+    <p>If you are the application owner check the logs for more information.</p>
+  </div>
+</body>
+</html>

data/dummy/public/500.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>We're sorry, but something went wrong (500)</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+  .rails-default-error-page {
+    background-color: #EFEFEF;
+    color: #2E2F30;
+    text-align: center;
+    font-family: arial, sans-serif;
+    margin: 0;
+  }
+
+  .rails-default-error-page div.dialog {
+    width: 95%;
+    max-width: 33em;
+    margin: 4em auto 0;
+  }
+
+  .rails-default-error-page div.dialog > div {
+    border: 1px solid #CCC;
+    border-right-color: #999;
+    border-left-color: #999;
+    border-bottom-color: #BBB;
+    border-top: #B00100 solid 4px;
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
+    background-color: white;
+    padding: 7px 12% 0;
+    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
+  }
+
+  .rails-default-error-page h1 {
+    font-size: 100%;
+    color: #730E15;
+    line-height: 1.5em;
+  }
+
+  .rails-default-error-page div.dialog > p {
+    margin: 0 0 1em;
+    padding: 1em;
+    background-color: #F7F7F7;
+    border: 1px solid #CCC;
+    border-right-color: #999;
+    border-left-color: #999;
+    border-bottom-color: #999;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-top-color: #DADADA;
+    color: #666;
+    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
+  }
+  </style>
+</head>
+
+<body class="rails-default-error-page">
+  <!-- This file lives in public/500.html -->
+  <div class="dialog">
+    <div>
+      <h1>We're sorry, but something went wrong.</h1>
+    </div>
+    <p>If you are the application owner check the logs for more information.</p>
+  </div>
+</body>
+</html>

data/dummy/public/robots.txt

@@ -0,0 +1 @@
+# See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file

data/dummy/test/application_system_test_case.rb

@@ -0,0 +1,21 @@
+require "test_helper"
+require "capybara/cuprite"
+
+Capybara.register_driver(:cuprite) do |app|
+  Capybara::Cuprite::Driver.new(
+    app, **{
+      window_size: [1200, 800],
+      browser_options: {},
+      process_timeout: 10,
+      inspector: true,
+      headless: false # !ENV["HEADLESS"].in?(%w[n 0 no false])
+    }
+  )
+end
+Capybara.default_driver = Capybara.javascript_driver = :cuprite
+
+Capybara.server = :puma, { Silent: true }
+
+class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
+  driven_by :cuprite, using: :chromium
+end

data/dummy/test/channels/application_cable/connection_test.rb

@@ -0,0 +1,11 @@
+require "test_helper"
+
+class ApplicationCable::ConnectionTest < ActionCable::Connection::TestCase
+  # test "connects with cookies" do
+  #   cookies.signed[:user_id] = 42
+  #
+  #   connect
+  #
+  #   assert_equal connection.user_id, "42"
+  # end
+end

data/dummy/test/system/tests_test.rb

@@ -0,0 +1,9 @@
+require "application_system_test_case"
+
+class TestsTest < ApplicationSystemTestCase
+  test "visiting the index" do
+    visit root_url
+  
+    click_button "Submit"
+  end
+end

data/dummy/test/test_helper.rb

@@ -0,0 +1,13 @@
+ENV["RAILS_ENV"] ||= "test"
+require_relative "../config/environment"
+require "rails/test_help"
+
+class ActiveSupport::TestCase
+  # Run tests in parallel with specified workers
+  parallelize(workers: :number_of_processors)
+
+  # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
+  fixtures :all
+
+  # Add more helper methods to be used by all tests here...
+end

data/lib/bard/file_field/field.rb

@@ -0,0 +1,27 @@
+module Bard
+  module FileField
+    class Field < ActionView::Helpers::Tags::TextField
+      def render &block
+        options = @options.stringify_keys.reverse_merge({
+          "directupload" => "/rails/active_storage/direct_uploads",
+          "preview" => true,
+        })
+        add_default_name_and_id(options)
+
+        content_tag("bard-file", options) do
+          next block.call(options) if block
+          Array(object.try(@method_name)).map do |attachment|
+            content_tag("uploaded-file", nil, {
+              name: options["name"],
+              src: @template_object.url_for(attachment),
+              filename: attachment.filename,
+              value: attachment.signed_id,
+              preview: options["preview"],
+            })
+          end.join("\n").html_safe
+        end
+      end
+    end
+  end
+end
+

data/lib/bard/file_field/form_builder.rb

@@ -0,0 +1,12 @@
+require_relative "field"
+
+module Bard
+  module FileField
+    module FormBuilder
+      def bard_file_field method, options={}, &block
+        self.multipart = true
+        Field.new(@object_name, method, @template, objectify_options(options)).render(&block)
+      end
+    end
+  end
+end

data/lib/bard/file_field/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Bard
+  module FileField
+    VERSION = "0.1.0"
+  end
+end

data/lib/bard/file_field.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require_relative "file_field/version"
+require_relative "file_field/form_builder"
+
+module Bard
+  module FileField
+    class Engine < ::Rails::Engine
+      initializer "bard-file_field.assets" do
+        if Rails.application.config.respond_to?(:assets)
+          Rails.application.config.assets.precompile += ["bard-file.js"]
+        end
+      end
+
+      config.after_initialize do
+        ActionView::Base.default_form_builder.include FormBuilder
+      end
+    end
+  end
+end