Demo lookbook (#1374)

* add lookbook to demo

* Updating assets and routes for docker

* Removing javascript_importmap_tags

* copy entire app folder

* try docker_image

* use tag argument

* don't use lookbook unless rails is more than 7

* push all tags

* if rails is greater than 7

* Setup IMAGE_TAG variable

* Missed a quote

* push all tags

* try tag param

* image.tags?

* check rails_version

* better if

* check version

* try manual push

* or main

* Does connecting in manifest fix path?

* only js right now

* connect to pvc css

* Try pulling cache to speed up?

* Fixing gem updates

* pull from image_url ignore if it doesn't exist

* switch to unless

* only if Lookbook is defined

* use application import

* if defined

* Remove lookbook params

* load form paths

* install postcss

* Copy postcss mixins

* nocov on routes config

* Copy forms to docker file also

* don't ignore forms

Co-authored-by: Joel Hawksley <[email protected]>

.dockerignore

@@ -4,4 +4,6 @@
 node_modules/
 pkg/
 test/
+!test/previews/
+!test/forms/
 docs/

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
       run: |
         gem install bundler:2.2.9
         bundle config path vendor/bundle
-        bundle update actionview activemodel activesupport railties
+        bundle update actionview activemodel activesupport railties actioncable
         bundle exec rake bench
       env:
         RUBY_VERSION: ${{ matrix.ruby_version }}
@@ -50,10 +50,10 @@ jobs:
       run: |
         gem install bundler:2.2.9
         bundle config path vendor/bundle
-        bundle update actionview activemodel activesupport railties
+        bundle update actionview activemodel activesupport railties actioncable
         cd demo
         bundle config path vendor/bundle
-        bundle update actionview activemodel activesupport railties
+        bundle update actionview activemodel activesupport railties actioncable
         bin/rails view_component_storybook:write_stories_json
   test:
     runs-on: ubuntu-latest
@@ -81,7 +81,7 @@ jobs:
       run: |
         gem install bundler:2.2.9
         bundle config path vendor/bundle
-        bundle update actionview activemodel activesupport railties
+        bundle update actionview activemodel activesupport railties actioncable
         bundle exec rake docs:preview
         bundle exec rake
       env:

.github/workflows/demo-preview-app-info.sh

@@ -28,3 +28,10 @@ echo "IMAGE_REPO=${IMAGE_REPO}" >> $GITHUB_ENV
 
 IMAGE_URL="primer.azurecr.io/${IMAGE_REPO}"
 echo "IMAGE_URL=${IMAGE_URL}" >> $GITHUB_ENV
+
+IMAGE_TAG="${COMMIT_REF}-${GITHUB_RUN_NUMBER}-${GITHUB_RUN_ATTEMPT}"
+echo "IMAGE_TAG=${IMAGE_TAG}" >> $GITHUB_ENV
+
+# Image tag is unique to each workflow run so that it always triggers a new deployment
+DOCKER_IMAGE="${IMAGE_URL}:${IMAGE_TAG}"
+echo "DOCKER_IMAGE=${DOCKER_IMAGE}" >> $GITHUB_ENV

.github/workflows/demo-preview-deploy.yml

@@ -54,18 +54,19 @@ jobs:
     - name: Get preview app info
       run: ./.github/workflows/demo-preview-app-info.sh
 
-    - name: 'Set env vars'
+    - name: Pull latest
       run: |
-        # Image tag is unique to each workflow run so that it always triggers a new deployment
-        echo "DOCKER_IMAGE=${{ env.IMAGE_URL }}:${{ env.COMMIT_REF }}-${{ github.run_number }}-${{ github.run_attempt }}" >> $GITHUB_ENV
+        docker pull ${{ env.IMAGE_URL }}:latest || true
+        docker pull ${{ env.IMAGE_URL }}:latest-assets || true
     - name: Build
       env:
         RAILS_MASTER_KEY: ${{ secrets.RAILS_MASTER_KEY }}
       run: |
-        bin/kuby -e production build --only app -- -t ${{ env.DOCKER_IMAGE }}
-        bin/kuby -e production build --only assets -- -t ${{ env.DOCKER_IMAGE }}
+        bin/kuby -e production build --only app -- --tag=${{ env.DOCKER_IMAGE }} --cache-from ${{ env.IMAGE_URL }}:latest
+        bin/kuby -e production build --only assets -- --tag=${{ env.DOCKER_IMAGE }}-assets --cache-from ${{ env.IMAGE_URL }}:latest-assets
     - name: Push
-      run: bin/kuby -e production push
+      run: |
+        docker image push --all-tags ${{ env.IMAGE_URL }}
     - name: Run ARM deploy
       # This 'if' will be truth, if this workflow is...
       #  - run as a workflow_dispatch
@@ -84,7 +85,7 @@ jobs:
         template: ./.github/workflows/demo-preview-template.json
         deploymentName: ${{env.DEPLOYMENT_NAME}}
         parameters: appName="${{env.APP_NAME}}"
-          containerImage="primer.azurecr.io/${{ env.IMAGE_REPO }}:latest"
+          containerImage="${{ env.DOCKER_IMAGE }}"
           dockerRegistryUrl="primer.azurecr.io"
           dockerRegistryUsername="GitHubActions"
           dockerRegistryPassword="${{ secrets.AZURE_ACR_PASSWORD }}"

Gemfile

@@ -37,3 +37,4 @@ gem "bootsnap", ">= 1.4.2", require: false
 
 gem "view_component", path: ENV["VIEW_COMPONENT_PATH"] if ENV["VIEW_COMPONENT_PATH"]
 gem "view_component_storybook", "~> 0.8.0"
+gem "lookbook", "~> 1" unless rails_version.to_f < 7

Gemfile.lock

@@ -10,6 +10,11 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
+    actioncable (7.0.3)
+      actionpack (= 7.0.3)
+      activesupport (= 7.0.3)
+      nio4r (~> 2.0)
+      websocket-driver (>= 0.6.1)
     actionpack (7.0.3)
       actionview (= 7.0.3)
       activesupport (= 7.0.3)
@@ -73,6 +78,8 @@ GEM
       descendants_tracker (~> 0.0.1)
     concurrent-ruby (1.1.10)
     crass (1.0.6)
+    css_parser (1.11.0)
+      addressable
     cuprite (0.13)
       capybara (>= 2.1, < 4)
       ferrum (~> 0.11.0)
@@ -95,6 +102,8 @@ GEM
       concurrent-ruby (~> 1.1)
       websocket-driver (>= 0.6, < 0.8)
     ffi (1.15.5)
+    htmlbeautifier (1.4.2)
+    htmlentities (4.3.4)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
     ice_nine (0.11.2)
@@ -104,6 +113,17 @@ GEM
     loofah (2.18.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
+    lookbook (1.0.7)
+      actioncable
+      css_parser
+      htmlbeautifier (~> 1.3)
+      htmlentities (~> 4.3.4)
+      listen (~> 3.0)
+      railties (>= 5.0)
+      redcarpet (~> 3.5)
+      rouge (~> 3.26)
+      view_component (~> 2.0)
+      yard (~> 0.9.25)
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
@@ -152,8 +172,10 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
+    redcarpet (3.5.1)
     regexp_parser (2.5.0)
     rexml (3.2.5)
+    rouge (3.30.0)
     rubocop (1.13.0)
       parallel (~> 1.10)
       parser (>= 3.0.0.0)
@@ -255,6 +277,7 @@ DEPENDENCIES
   erb_lint
   erblint-github (= 0.1.0)
   listen (~> 3.0)
+  lookbook (~> 1)
   matrix (~> 0.4.2)
   minitest (~> 5.0)
   mocha

demo/Gemfile

@@ -36,6 +36,7 @@ gem "bootsnap", ">= 1.4.2", require: false
 
 gem "primer_view_components", path: "../"
 gem "view_component_storybook", "~> 0.8.0"
+gem "lookbook", "~> 1" unless rails_version.to_f < 7
 
 group :development do
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring

demo/Gemfile.lock

@@ -106,6 +106,8 @@ GEM
     colorize (0.8.1)
     concurrent-ruby (1.1.10)
     crass (1.0.6)
+    css_parser (1.11.0)
+      addressable
     digest (3.1.0)
     docker-remote (0.8.0)
     domain_name (0.5.20190701)
@@ -167,6 +169,8 @@ GEM
     hotwire-livereload (1.2.2)
       listen (>= 3.0.0)
       rails (>= 6.0.0)
+    htmlbeautifier (1.4.2)
+    htmlentities (4.3.4)
     http (4.4.1)
       addressable (~> 2.3)
       http-cookie (~> 1.0)
@@ -238,6 +242,17 @@ GEM
     loofah (2.18.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
+    lookbook (1.0.7)
+      actioncable
+      css_parser
+      htmlbeautifier (~> 1.3)
+      htmlentities (~> 4.3.4)
+      listen (~> 3.0)
+      railties (>= 5.0)
+      redcarpet (~> 3.5)
+      rouge (~> 3.26)
+      view_component (~> 2.0)
+      yard (~> 0.9.25)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
     marcel (1.0.2)
@@ -331,6 +346,7 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     recursive-open-struct (1.1.3)
+    redcarpet (3.5.1)
     rest-client (2.1.0)
       http-accept (>= 1.7.0, < 2.0)
       http-cookie (>= 1.0.2, < 2.0)
@@ -378,9 +394,12 @@ GEM
       method_source (~> 1.0)
     view_component_storybook (0.8.0)
       view_component (>= 2.2)
+    webrick (1.7.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
+    yard (0.9.28)
+      webrick (~> 1.7.0)
     zeitwerk (2.6.0)
 
 PLATFORMS
@@ -398,6 +417,7 @@ DEPENDENCIES
   kuby-azure (>= 0.3.3, < 1.0)
   kuby-core!
   kuby-kind (~> 0.1)
+  lookbook (~> 1)
   primer_view_components!
   pry-byebug
   puma (~> 5.6.4)

demo/app/assets/config/manifest.js

@@ -1,2 +1,4 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_directory ../../../../app/assets/styles .css
+//= link_directory ../../../../app/assets/javascripts .js

demo/app/controllers/preview_controller.rb

@@ -3,5 +3,6 @@
 require "rails/application_controller"
 
 class PreviewController < ViewComponentsController # :nodoc:
+  helper Lookbook::PreviewHelper if defined?(Lookbook)
   helper Primer::ViewHelper
 end

demo/app/views/layouts/component_preview.html.erb

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Component Preview</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "primer_view_components", "data-turbo-track": "reload" %>
+    <%= javascript_include_tag "primer_view_components", type: "module", "data-turbo-track": "reload" %>
+  </head>
+
+  <body style="padding: 16px">
+    <div style="
+      margin-left: auto;
+      margin-right: auto;
+      position: relative;
+    ">
+      <%= yield %> <!-- rendered preview will be injected here -->
+    </div>
+  </body>
+</html>

demo/config/application.rb

@@ -22,9 +22,13 @@ class Application < Rails::Application
     end
 
     # Initialize configuration defaults for originally generated Rails version.
+    config.view_component.default_preview_layout = "component_preview"
     config.view_component_storybook.show_stories = true
     config.view_component.show_previews = true
     config.view_component.preview_controller = "PreviewController"
+    config.view_component.preview_paths << "#{Rails.root}/../test/previews"
+
+    config.autoload_paths << Rails.root.join("../test/forms")
 
     config.action_dispatch.default_headers.clear
 

demo/config/routes.rb

@@ -1,9 +1,18 @@
 # frozen_string_literal: true
 
+# :nocov:
 Rails.application.routes.draw do
-  get '/view-components', to: redirect('/view-components/stories/')
-  get '/', to: redirect('/view-components/stories/')
+  if Rails.env.production?
+    get '/view-components', to: redirect('/view-components/stories/')
+    get '/', to: redirect('/view-components/stories/')
+  else
+    get '/', to: redirect('/lookbook/')
+  end
 
-  get '/auto_complete', to: 'auto_complete_test#index'
-  resources :toggle_switch, only: [:create]
+  scope path: Rails.env.production? ? "/view-components" : "/" do
+    get '/auto_complete', to: 'auto_complete_test#index'
+    resources :toggle_switch, only: [:create]
+
+    mount Lookbook::Engine, at: "/lookbook" if defined?(Lookbook)
+  end
 end

demo/kuby.rb

@@ -75,9 +75,13 @@
         files = %w(
           tsconfig.json
           rollup.config.js
-          app/components/primer
+          postcss.config.js
+          lib/postcss_mixins
+          app/
           package.json
           yarn.lock
+          test/previews
+          test/forms
         )
 
         files.each { |f| dockerfile.copy(f, f) }

demo/package.json

@@ -22,7 +22,7 @@
     "storybook": "start-storybook -p 5000",
     "build-storybook": "build-storybook -o public/view-components/stories --preview-url=/view-components/stories/iframe.html --force-build-preview",
     "build": "yarn build-storybook",
-    "postinstall": "cp node_modules/@primer/css/dist/primer.css app/assets/stylesheets && cp ../app/assets/styles/*.css app/assets/stylesheets/"
+    "postinstall": "cp node_modules/@primer/css/dist/primer.css app/assets/stylesheets"
   },
   "engines": {
     "yarn": "1.22.x"

lookbook/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    primer_view_components (0.0.93)
+    primer_view_components (0.0.94)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 17.0.0)