Merge pull request #7284 from jibees/styleguide

Implements our StyleGuide

.gitignore

@@ -47,3 +47,4 @@ coverage
 /reports/
 !/reports/README.md
 bin/
+/spec/components/stories/**/*.stories.json

.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  stories: ['../spec/components/stories/**/*.stories.json'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+  ],
+};

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" media="screen" href="http://localhost:3000/assets/darkswarm/all.css" />

.storybook/preview.js

@@ -0,0 +1,5 @@
+export const parameters = {
+  server: {
+    url: `http://localhost:3000/rails/stories`,
+  },
+};

Gemfile

@@ -117,6 +117,8 @@ gem 'flipper'
 gem 'flipper-active_record'
 gem 'flipper-ui'
 
+gem "view_component", require: "view_component/engine"
+
 group :production, :staging do
   gem 'ddtrace'
   gem 'unicorn-worker-killer'
@@ -164,6 +166,8 @@ group :development do
   gem 'spring'
   gem 'spring-commands-rspec'
 
+  gem "view_component_storybook", require: "view_component/storybook/engine"
+
   # 1.0.9 fixed openssl issues on macOS https://github.com/eventmachine/eventmachine/issues/602
   # While we don't require this gem directly, no dependents forced the upgrade to a version
   # greater than 1.0.9, so we just required the latest available version here.

Gemfile.lock

@@ -582,6 +582,10 @@ GEM
       get_process_mem (~> 0)
       unicorn (>= 4, < 7)
     uniform_notifier (1.14.1)
+    view_component (2.28.0)
+      activesupport (>= 5.0.0, < 7.0)
+    view_component_storybook (0.8.0)
+      view_component (>= 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     webdrivers (4.6.0)
@@ -722,6 +726,8 @@ DEPENDENCIES
   uglifier (>= 1.0.3)
   unicorn-rails
   unicorn-worker-killer
+  view_component
+  view_component_storybook
   web!
   webdrivers
   webmock

app/components/distributor_title_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class DistributorTitleComponent < ViewComponent::Base
+  def initialize(name:)
+    @name = name
+  end
+end

app/components/distributor_title_component/distributor_title_component.html.haml

@@ -0,0 +1 @@
+%h3= @name

app/components/example_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class ExampleComponent < ViewComponent::Base
+  def initialize(title:)
+    @title = title
+  end
+end

app/components/example_component/example_component.html.haml

@@ -0,0 +1 @@
+%h1 #{@title}

app/controllers/spree/admin/orders_controller.rb

@@ -90,7 +90,7 @@ module Spree
       end
 
       def print
-        render InvoiceRenderer.new.args(@order)
+        render_with_wicked_pdf InvoiceRenderer.new.args(@order)
       end
 
       def print_ticket

app/services/invoice_renderer.rb

@@ -5,7 +5,7 @@ class InvoiceRenderer
 
   def render_to_string(order)
     renderer.instance_variable_set(:@order, order)
-    renderer.render_to_string(args(order))
+    renderer.render_to_string_with_wicked_pdf(args(order))
   end
 
   def args(order)

app/views/shopping_shared/_header.html.haml

@@ -6,8 +6,7 @@
       #distributor_title
         - if distributor.logo?
           %img.left{src: distributor.logo.url(:thumb)}
-        %h3
-          = distributor.name
+        = render DistributorTitleComponent.new(name: distributor.name)
         %location= distributor.address.city
 
     = yield :ordercycle_sidebar

config/application.rb

@@ -197,5 +197,7 @@ module Openfoodnetwork
     config.active_support.escape_html_entities_in_json = true
 
     config.active_job.queue_adapter = :delayed_job
+
+    config.generators.template_engine = :haml
   end
 end

config/environments/development.rb

@@ -64,4 +64,6 @@ Openfoodnetwork::Application.configure do
   config.action_mailer.default_url_options = { host: "0.0.0.0:3000" }
 
   config.log_level = :debug
+
+  config.view_component_storybook.stories_path = Rails.root.join("spec/components/stories")
 end

config/initializers/storybook.rb

@@ -0,0 +1,14 @@
+# Adjust headers to allow running Storybook in development.
+# Uses iframes and doesn't play nicely with CORS checks
+
+if Rails.env.development?
+  module PermissiveCORSHeaders
+    def self.before(response)
+      response.headers["Access-Control-Allow-Origin"] = "*"
+      response.headers["Access-Control-Allow-Methods"] = "GET"
+    end
+  end
+
+  ViewComponent::Storybook::StoriesController.before_action(PermissiveCORSHeaders)
+end
+

config/initializers/wicked_pdf.rb

@@ -3,3 +3,11 @@ WickedPdf.config = {
   #:layout => "pdf.html",
   :exe_path => `bundle exec which wkhtmltopdf`.chomp
 }
+
+# A monkey-patch to remove WickedPdf's monkey-patch, as it clashes with ViewComponents.
+class WickedPdf
+  module PdfHelper
+    remove_method(:render)
+    remove_method(:render_to_string)
+  end
+end

package.json

@@ -5,7 +5,13 @@
     "type": "git",
     "url": "https://github.com/openfoodfoundation/openfoodnetwork"
   },
+  "scripts": {
+    "storybook": "start-storybook"
+  },
   "devDependencies": {
+    "@storybook/addon-controls": "^6.2.7",
+    "@storybook/addon-docs": "^6.2.7",
+    "@storybook/server": "^6.2.7",
     "jasmine-core": "~2.4.1",
     "karma": "~6.3.2",
     "karma-chrome-launcher": "~3.1.0",

spec/components/distributor_title_component_spec.rb

@@ -0,0 +1,8 @@
+require "spec_helper"
+
+describe "DistributorTitle tests", type: :component do
+  it "displays distributor title with its name" do
+    render_inline(DistributorTitleComponent.new(name: "Freddy's Farm Shop")) { }
+    expect(page).to have_selector "h3", text: "Freddy's Farm Shop"
+   end
+end

spec/components/example_component_spec.rb

@@ -0,0 +1,8 @@
+require "spec_helper"
+
+describe "ExampleComponent tests", type: :component do
+  it "displays the h1 with the given parameter" do
+    render_inline(ExampleComponent.new(title: "Hello")) { }
+    expect(page).to have_selector "h1", text: "Hello"
+   end
+end

spec/components/stories/distributor_title_component_stories.rb

@@ -0,0 +1,7 @@
+class DistributorTitleComponentStories < ViewComponent::Storybook::Stories
+  story(:default) do
+    controls do
+      text(:name, "Freddy s Farm Shop")
+    end
+  end
+end

spec/components/stories/example_component_stories.rb

@@ -0,0 +1,13 @@
+class ExampleComponentStories < ViewComponent::Storybook::Stories
+  story(:with_short_text) do
+    controls do
+      text(:title, 'OK')
+    end
+  end
+
+  story(:with_long_text) do
+    controls do
+      text(:title, 'This is a long text')
+    end
+  end
+end

spec/services/invoice_renderer_spec.rb

@@ -20,7 +20,7 @@ describe InvoiceRenderer do
     it 'uses the invoice2 template' do
       renderer = instance_double(ApplicationController)
       expect(renderer)
-        .to receive(:render_to_string)
+        .to receive(:render_to_string_with_wicked_pdf)
         .with(include(template: 'spree/admin/orders/invoice2'))
 
       described_class.new(renderer).render_to_string(order)
@@ -38,7 +38,7 @@ describe InvoiceRenderer do
     it 'uses the invoice template' do
       renderer = instance_double(ApplicationController)
       expect(renderer)
-        .to receive(:render_to_string)
+        .to receive(:render_to_string_with_wicked_pdf)
         .with(include(template: 'spree/admin/orders/invoice'))
 
       described_class.new(renderer).render_to_string(order)

spec/spec_helper.rb

@@ -74,6 +74,8 @@ require "paperclip/matchers"
 # Override setting in Spree engine: Spree::Core::MailSettings
 ActionMailer::Base.default_url_options[:host] = 'test.host'
 
+require "view_component/test_helpers"
+
 RSpec.configure do |config|
   # ## Mock Framework
   #
@@ -232,6 +234,8 @@ RSpec.configure do |config|
   # PerfTools::CpuProfiler.stop
   # end
   config.infer_spec_type_from_file_location!
+
+  config.include ViewComponent::TestHelpers, type: :component
 end
 
 FactoryBot.use_parent_strategy = false