Deleting the old lookbook folder

.devcontainer/devcontainer.json

@@ -42,19 +42,10 @@
       "label": "doctocat"
     }
   },
-  "customizations": {
-    "codespaces": {
-      "repositories": {
-        "primer/css": {
-          "permissions": "write-all"
-        }
-      }
-    }
-  },
   "hostRequirements": {
     "memory": "8gb"
   },
   "features": {
-    "sshd": "latest" 
+    "sshd": "latest"
   }
 }

.devcontainer/post-create-command.sh

@@ -2,9 +2,3 @@
 
 sudo cp --force .devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt
 script/setup
-
-script_folder="$(cd $(dirname "${BASH_SOURCE[0]}") && pwd)"
-workspaces_folder="$(cd "${script_folder}/../.." && pwd)"
-
-cd "${workspaces_folder}"
-git clone "https://github.com/primer/css"

.github/workflows/lint.yml

@@ -52,7 +52,7 @@ jobs:
         files: |
           app/**/*.rb
           lib/**/*.rb
-          lookbook/**/*.rb
+          demo/**/*.rb
           stories/**/*.rb
           test/**/*.rb
     - name: Lint with Rubocop

.gitignore

@@ -10,7 +10,6 @@ demo/app/assets/stylesheets/primer*
 /.yardoc
 /doc
 test/previews/primer/docs/
-lookbook/app/assets/builds/
 docs/content/adr/
 docs/content/components/
 

Gemfile.lock

@@ -110,7 +110,7 @@ GEM
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.18.0)
+    loofah (2.19.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     lookbook (1.0.7)
@@ -151,7 +151,7 @@ GEM
     rack (2.2.4)
     rack-cors (1.1.1)
       rack (>= 2.0.0)
-    rack-proxy (0.7.2)
+    rack-proxy (0.7.4)
       rack
     rack-test (2.0.2)
       rack (>= 1.3)
@@ -229,8 +229,8 @@ GEM
     timecop (0.9.5)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.2.0)
-    view_component (2.71.0)
+    unicode-display_width (2.3.0)
+    view_component (2.72.0)
       activesupport (>= 5.0.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)

contributor-docs/setup.md

@@ -17,6 +17,18 @@ When running Storybook locally, if you see:
 
 Try deleting your `node_modules` directory and rerunning `script/setup` followed by `script/dev`.
 
+### Lookbook
+
+[Lookbook](https://github.com/allmarkedup/lookbook) is a native ViewComponent alternative to Storybook, that works off of ViewComponent preivews and yarddoc to generate stories.
+
+#### How to run
+
+Starting from view_components root directory
+
+1. `script/setup` - Setups up the whole project, but also bundle installs dependencies for the demo app.
+2. Change directory to `/demo/` and run `bin/dev` - Runs the rails server for lookbook.
+3. Visit [http://127.0.0.1:4000/](http://127.0.0.1:4000/).
+
 ## Running tests
 
 Before running tests make sure you run `bundle exec rake docs:preview`, this will build all the code examples used for accessibility and system tests.

demo/Gemfile

@@ -51,4 +51,6 @@ group :development do
 
   # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
   gem "stimulus-rails"
+
+  gem "foreman"
 end

demo/Gemfile.lock

@@ -145,6 +145,7 @@ GEM
     ffi-compiler (1.0.1)
       ffi (>= 1.0.0)
       rake
+    foreman (0.87.2)
     gli (2.21.0)
     globalid (1.0.0)
       activesupport (>= 5.0)
@@ -239,7 +240,7 @@ GEM
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.18.0)
+    loofah (2.19.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     lookbook (1.0.7)
@@ -388,7 +389,7 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.8.2)
-    view_component (2.71.0)
+    view_component (2.72.0)
       activesupport (>= 5.0.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
@@ -411,6 +412,7 @@ DEPENDENCIES
   activemodel (= 7.0.3)
   activesupport (= 7.0.3)
   bootsnap (>= 1.4.2)
+  foreman
   hotwire-livereload (~> 1.1)
   importmap-rails
   kind-rb (~> 0.1)

demo/Procfile.dev

@@ -0,0 +1 @@
+web: bin/rails server -p 4000

demo/app/controllers/auto_complete_test_controller.rb

@@ -1,34 +1,39 @@
 # frozen_string_literal: true
 
+# no doc
 class AutoCompleteTestController < ApplicationController
+  layout false
+
   def index
     @fruit_list = [
-      'Apples',
-      'Apricots',
-      'Avocado',
-      'Ackee',
-      'Bananas',
-      'Bilberries',
-      'Blueberries',
-      'Blackberries',
-      'Boysenberries',
-      'Bread fruit',
-      'Cantaloupes (cantalope)',
-      'Chocolate-Fruit',
-      'Cherimoya',
-      'Cherries',
-      'Cranberries',
-      'Cucumbers',
-      'Currants',
-      'Dates',
-      'Durian',
-      'Eggplant',
-      'Elderberries',
-      'Figs',
-      'Gooseberries',
-      'Grapes',
-      'Grapefruit',
-      'Guava'
-    ].select { |fruit| fruit.include?(params['q']) }
+      "Apples",
+      "Apricots",
+      "Avocado",
+      "Ackee",
+      "Bananas",
+      "Bilberries",
+      "Blueberries",
+      "Blackberries",
+      "Boysenberries",
+      "Bread fruit",
+      "Cantaloupes (cantalope)",
+      "Chocolate-Fruit",
+      "Cherimoya",
+      "Cherries",
+      "Cranberries",
+      "Cucumbers",
+      "Currants",
+      "Dates",
+      "Durian",
+      "Eggplant",
+      "Elderberries",
+      "Figs",
+      "Gooseberries",
+      "Grapes",
+      "Grapefruit",
+      "Guava"
+    ].select { |fruit| fruit.downcase.include?(params["q"].downcase) }
+    @visual_type = params[:visual]
+    @version = params[:version]
   end
 end

demo/app/views/auto_complete_test/index.html.erb

@@ -2,6 +2,13 @@
   <% if params['version'] == "alpha" %>
     <%= render(Primer::Alpha::AutoComplete::Item.new(value: fruit)) { fruit } %>
   <% else %>
-    <%= render(Primer::Beta::AutoComplete::Item.new(value: fruit)) { fruit } %>
+    <%= render(Primer::Beta::AutoComplete::Item.new(value: fruit)) do |c| %>
+      <% if @visual_type == "leading" %>
+        <% c.leading_visual_icon(icon: :"mark-github") %>
+      <% elsif @visual_type == "trailing" %>
+        <% c.trailing_visual_icon(icon: :"mark-github") %>
+      <% end %>
+      <%= fruit %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -8,6 +8,9 @@
     <%= 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" %>
+    <% if Rails.env.development? %>
+      <%= javascript_include_tag "hotwire-livereload", defer: true %>
+    <% end %>
   </head>
 
   <body style="padding: 16px">

demo/bin/dev

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+bundle exec foreman start -f Procfile.dev "$@"

demo/config/environments/development.rb

@@ -50,5 +50,11 @@
   # routes, locales, etc. This feature depends on the listen gem.
   config.file_watcher = ActiveSupport::EventedFileUpdateChecker
 
+  # Not working in bundle exec rake utilities:build
+  config.hotwire_livereload.listen_paths << Rails.root.join("../app/assets")
+  config.hotwire_livereload.force_reload_paths << Rails.root.join("../app/assets")
+
+  config.lookbook.listen_paths << Rails.root.join("../app/components")
+
   config.view_component_storybook.stories_path = Rails.root.join("../stories") unless ENV["SKIP_STORYBOOK_PRELOAD"] == "1"
 end

lib/tasks/docs.rake

@@ -400,6 +400,7 @@ namespace :docs do
 
   def generate_yard_registry
     ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
+    ENV["RAILS_ENV"] = "test"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/view_components"
     require "yard/docs_helper"

lib/tasks/static.rake

@@ -3,6 +3,7 @@
 namespace :static do
   task :dump do
     ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
+    ENV["RAILS_ENV"] = "test"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/view_components"
     # Loads all components for `.descendants` to work properly

lib/tasks/utilities.rake

@@ -4,6 +4,7 @@ namespace :utilities do
   task :build do
     require "yaml"
     require "json"
+    ENV["RAILS_ENV"] = "test"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/classify/utilities"