Merge pull request #20 from nimblehq/chore/task-3-configure-view_comp…

…onent-and-view_component_storybook

[Task-3][Chore] Configure view_component and view_component_storybook

.github/workflows/deploy_heroku.yml

@@ -14,8 +14,8 @@ on:
 
 env:
   DOCKER_REGISTRY_HOST: ${{ secrets.DOCKER_REGISTRY_HOST }}
-  DOCKER_REGISTRY_USERNAME: ${{ github.repository_owner }}
-  DOCKER_REGISTRY_TOKEN: ${{ secrets.DOCKER_REGISTRY_TOKEN }}
+  DOCKER_REGISTRY_USERNAME: ${{ github.actor }}
+  DOCKER_REGISTRY_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   DOCKER_IMAGE: ${{ github.repository }}
   HEROKU_API_KEY: ${{ secrets.HEROKU_API_KEY }}
 
@@ -42,9 +42,9 @@ jobs:
         run: |
           if [[ $BRANCH_TAG = "latest" ]]
           then
-            echo "HEROKU_APP=rails_view_component_blog" >> $GITHUB_ENV
+            echo "HEROKU_APP=view-component-blog" >> $GITHUB_ENV
           else
-            echo "HEROKU_APP=rails_view_component_blog-staging" >> $GITHUB_ENV
+            echo "HEROKU_APP=view-component-blog-staging" >> $GITHUB_ENV
           fi
 
       - name: Login to Docker registry

.gitignore

@@ -49,3 +49,6 @@
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+# View component temporary stories to feed StoryBook build
+*/*.stories.json

.rubocop.yml

@@ -33,6 +33,10 @@ Metrics/BlockLength:
   Exclude:
     - 'spec/**/*'
 
+Lint/EmptyBlock:
+  Exclude:
+    - 'test/components/stories/*'
+
 Style/FormatStringToken:
   EnforcedStyle: template
 

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ["../test/components/**/*.stories.json"],
+  addons: ["@storybook/addon-controls"],
+};

.storybook/preview.js

@@ -0,0 +1,7 @@
+export const parameters = {
+  server: {
+    url: `${location.protocol}${location.hostname}${
+      location.port !== "" ? ":3000" : ""
+    }/rails/view_components`,
+  },
+};

Gemfile

@@ -12,6 +12,7 @@ gem 'ffaker' # A library for generating fake data such as names, addresses, and
 gem 'fabrication' # Fabrication generates objects in Ruby. Fabricators are schematics for your objects, and can be created as needed anywhere in your app or specs.
 gem 'bootsnap', require: false # Reduces boot times through caching; required in config/boot.rb
 gem 'i18n-js', '3.5.1' # A library to provide the I18n translations on the Javascript
+gem "view_component", require: "view_component/engine" # Reusable, testable & encapsulated view components
 
 # Authentications & Authorizations
 gem 'devise' # Authentication solution for Rails with Warden
@@ -51,6 +52,7 @@ group :development, :test do
   gem 'rubocop-rails', require: false # A RuboCop extension focused on enforcing Rails best practices and coding conventions.
   gem 'rubocop-rspec', require: false # Code style checking for RSpec files
   gem 'rubocop-performance', require: false # An extension of RuboCop focused on code performance checks.
+  gem "view_component_storybook" # Components documentation streamlined
 
   gem 'undercover' # Report missing test coverage in new changes
   gem 'danger' # Automated code review.

Gemfile.lock

@@ -71,11 +71,11 @@ GEM
       rack (>= 0.9.0)
     binding_of_caller (1.0.0)
       debug_inspector (>= 0.0.1)
-    bootsnap (1.7.7)
+    bootsnap (1.9.1)
       msgpack (~> 1.0)
     brakeman (5.1.1)
     builder (3.2.4)
-    bullet (6.1.4)
+    bullet (6.1.5)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
     byebug (11.1.3)
@@ -161,7 +161,7 @@ GEM
     erubi (1.10.0)
     erubis (2.7.0)
     fabrication (2.22.0)
-    faraday (1.7.0)
+    faraday (1.8.0)
       faraday-em_http (~> 1.0)
       faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
@@ -182,8 +182,8 @@ GEM
     faraday-net_http_persistent (1.2.0)
     faraday-patron (1.0.0)
     faraday-rack (1.0.0)
-    ffaker (2.18.0)
-    ffi (1.15.3)
+    ffaker (2.19.0)
+    ffi (1.15.4)
     figaro (1.2.0)
       thor (>= 0.14.0, < 2)
     foreman (0.87.2)
@@ -224,7 +224,7 @@ GEM
       nokogiri (>= 1.5.9)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (1.0.1)
+    marcel (1.0.2)
     method_source (1.0.0)
     mini_magick (4.11.0)
     mini_mime (1.0.3)
@@ -235,16 +235,16 @@ GEM
     nap (1.1.0)
     nio4r (2.5.8)
     no_proxy_fix (0.1.2)
-    nokogiri (1.12.3)
+    nokogiri (1.12.4)
       mini_portile2 (~> 2.6.1)
       racc (~> 1.4)
     octokit (4.21.0)
       faraday (>= 0.9)
       sawyer (~> 0.8.0, >= 0.5.3)
     open4 (1.3.4)
     orm_adapter (0.5.0)
-    pagy (4.10.1)
-    parallel (1.20.1)
+    pagy (4.11.0)
+    parallel (1.21.0)
     parser (3.0.2.0)
       ast (~> 2.4.1)
     pg (1.2.3)
@@ -257,7 +257,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (4.0.6)
-    puma (5.4.0)
+    puma (5.5.0)
       nio4r (~> 2.0)
     pundit (2.1.1)
       activesupport (>= 3.0.0)
@@ -290,7 +290,7 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.3.0)
+    rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
     rails_best_practices (1.21.0)
       activesupport
@@ -347,7 +347,7 @@ GEM
     rspec-retry (0.6.2)
       rspec-core (> 3.3)
     rspec-support (3.10.2)
-    rubocop (1.19.0)
+    rubocop (1.21.0)
       parallel (~> 1.10)
       parser (>= 3.0.0.0)
       rainbow (>= 2.2.2, < 4.0)
@@ -356,12 +356,12 @@ GEM
       rubocop-ast (>= 1.9.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.10.0)
+    rubocop-ast (1.11.0)
       parser (>= 3.0.1.1)
-    rubocop-performance (1.11.4)
+    rubocop-performance (1.11.5)
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
-    rubocop-rails (2.11.3)
+    rubocop-rails (2.12.2)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.7.0, < 2.0)
@@ -425,7 +425,7 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
-    terminal-table (3.0.1)
+    terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     thor (1.1.0)
     tilt (2.0.10)
@@ -436,12 +436,17 @@ GEM
       imagen (>= 0.1.8)
       rainbow (>= 2.1, < 4.0)
       rugged (>= 0.27, < 1.2)
-    unicode-display_width (2.0.0)
+    unicode-display_width (2.1.0)
     uniform_notifier (1.14.2)
     vcr (6.0.0)
+    view_component (2.40.0)
+      activesupport (>= 5.0.0, < 8.0)
+      method_source (~> 1.0)
+    view_component_storybook (0.10.1)
+      view_component (>= 2.36)
     warden (1.2.9)
       rack (>= 2.0.9)
-    webdrivers (4.6.0)
+    webdrivers (4.6.1)
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (>= 3.0, < 4.0)
@@ -523,6 +528,8 @@ DEPENDENCIES
   tzinfo-data
   undercover
   vcr
+  view_component
+  view_component_storybook
   webdrivers
   webmock
   webpacker (~> 5.2.0)

README.md

@@ -36,6 +36,32 @@
 foreman start -f Procfile.dev
 ```
 
+### Configure Story Book
+
+> ℹ️ Apply the below configuration **once** to set up your local machine with StoryBook
+
+- Setup Storybook server locally
+  ```shell
+  yarn add @storybook/server @storybook/addon-controls --dev
+  ```
+
+### Push a new Story in StoryBook
+
+> ℹ️ Apply the below commands **each time** you want to push a new component into the StoryBook
+> _We assume you already built your component and its stories_
+
+- Convert each ruby story into a JSON file:
+  ```shell
+  rake view_component_storybook:write_stories_json 
+  ```
+
+- Build the StoryBook
+  ```shell
+  yarn storybook:build
+  ```
+
+> The StoryBook is a static website located inside the `/public/_storybook` so it will be deployed **with** the rails application.
+
 ## Tests
 
 ### Docker-based tests on the CI server

app/components/button_component.html.erb

@@ -0,0 +1,3 @@
+<a href="<%= link %>" class="<%= classes %>">
+  <%= content %>
+</a>

app/components/button_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class ButtonComponent < ViewComponent::Base
+  attr_accessor :type, :link
+
+  PRIMARY_CLASSES = %w[
+    btn-primary
+  ].freeze
+  SECONDARY_CLASSES = %w[
+    btn-secondary
+  ].freeze
+  SUCCESS_CLASSES = %w[
+    btn-success
+  ].freeze
+  DANGER_CLASSES = %w[
+    btn-danger
+  ].freeze
+  LINK_CLASSES = %w[
+    btn-link
+  ].freeze
+
+  BASE_CLASSES = %w[
+    btn
+  ].freeze
+
+  BUTTON_TYPE_MAPPING = {
+    primary: PRIMARY_CLASSES,
+    secondary: SECONDARY_CLASSES,
+    success: SUCCESS_CLASSES,
+    danger: DANGER_CLASSES,
+    link: LINK_CLASSES
+  }.freeze
+
+  def initialize(type: :primary, link: '#')
+    @type = type
+    @link = link
+    super
+  end
+
+  def classes
+    (BUTTON_TYPE_MAPPING[@type] + BASE_CLASSES).join(' ')
+  end
+end

app/controllers/posts_controller.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class PostsController < ApplicationController
+  def index; end
+end

app/views/posts/index.html.erb

@@ -0,0 +1,19 @@
+<article class="m-4">
+  <h1 class="mb-4">ViewComponents blog post</h1>
+  <h2 id="firstPost">#1 Button Primary</h2>
+  <%= render(ButtonComponent.new(type: :primary, link: '#firstPost')) do %>
+    Primary
+  <% end %>
+  <h2 id="secondPost">#2 Button Secondary</h2>
+  <%= render(ButtonComponent.new(type: :secondary, link: '#secondPost')) do %>
+    Secondary
+  <% end %>
+  <h2 id="secondPost">#2 Button Danger</h2>
+  <%= render(ButtonComponent.new(type: :danger, link: '#thirdPost')) do %>
+    Primary
+  <% end %>
+  <h2 id="fourthPost">#4 Button Link</h2>
+  <%= render(ButtonComponent.new(type: :link, link: '#fourthPost')) do %>
+    Link
+  <% end %>
+</article>

config/application.rb

@@ -40,6 +40,14 @@ class Application < Rails::Application
     # config.time_zone = "Central Time (US & Canada)"
     # config.eager_load_paths << Rails.root.join("extras")
 
+    if Rails.env.development?
+      require "view_component/storybook/engine"
+
+      # Enable ViewComponents previews
+      config.view_component.show_previews = true
+      config.view_component.preview_paths << "#{Rails.root}/spec/components/previews"
+    end
+
     # Set the queuing backend to `Sidekiq`
     #
     # Be sure to have the adapter's gem in your Gemfile

config/routes.rb

@@ -2,5 +2,4 @@
   root to: 'articles#index'
 
   resources :articles
-  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
 end

package.json

@@ -3,7 +3,8 @@
   "private": true,
   "scripts": {
     "lint": "eslint . --color",
-    "lint:fix": "eslint . --color --fix"
+    "lint:fix": "eslint . --color --fix",
+    "storybook:build": "build-storybook -o public/_storybook"
   },
   "dependencies": {
     "@babel/preset-typescript": "7.15.0",
@@ -17,7 +18,9 @@
     "trix": "^1.2.0",
     "typescript": "4.3.5",
     "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "@storybook/addon-controls": "6.3.7",
+    "@storybook/server": "6.3.7"
   },
   "devDependencies": {
     "@nimblehq/eslint-config-nimble": "2.1.1",

public/_storybook/4.75d5a1b06644935772d5.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */

public/_storybook/6.fd11e4fc27dcf8d83371.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,12 @@
+/*!
+ * OverlayScrollbars
+ * https://github.com/KingSora/OverlayScrollbars
+ *
+ * Version: 1.13.0
+ *
+ * Copyright KingSora | Rene Haas.
+ * https://github.com/KingSora
+ *
+ * Released under the MIT license.
+ * Date: 02.08.2020
+ */