view_component-contrib 0.0.1 → 0.1.0

data/app/templates/install/application_view_component.rb

@@ -0,0 +1,2 @@
+class ApplicationViewComponent < ViewComponentContrib::Base
+end

data/app/templates/install/application_view_component_preview.rb

@@ -0,0 +1,3 @@
+class ApplicationViewComponentPreview < ViewComponentContrib::Preview::Base
+  self.abstract_class = true
+end

data/app/templates/install/builder.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class TemplateBuilder
+  attr_reader :root
+
+  def initialize(root)
+    @root = root
+  end
+
+  def get_binding
+    binding
+  end
+
+  def embed_code(path)
+    contents = File.read(File.join(root, path))
+    %Q(<<-CODE
+#{contents}
+CODE)
+  end
+
+  def embed(path)
+    File.read(File.join(root, path))
+  end
+end

data/app/templates/install/class_for.rb

@@ -0,0 +1,3 @@
+  def class_for(name, from: identifier)
+    "c-\#{from}-\#{name}"
+  end

data/app/templates/install/generator.rb

@@ -0,0 +1,275 @@
+if yes?("Would you like to create a custom generator for your setup? (Recommended)")
+  template_choice_to_ext = {"1" => ".erb", "2" => ".haml", "3" => ".slim"}
+
+  template = ask "Which template processor do you use? (1) ERB, (2) Haml, (3) Slim, (0) Other"
+
+  TEMPLATE_EXT = template_choice_to_ext.fetch(template, "")
+  TEST_SUFFIX = USE_RSPEC ? 'spec' : 'test'
+
+  file "lib/generators/view_component/view_component_generator.rb", <<~CODE
+  # frozen_string_literal: true
+
+  # Based on https://github.com/github/view_component/blob/master/lib/rails/generators/component/component_generator.rb
+  class ViewComponentGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path("templates", __dir__)
+
+    class_option :skip_test, type: :boolean, default: false
+    class_option :skip_preview, type: :boolean, default: false
+
+    argument :attributes, type: :array, default: [], banner: "attribute"
+
+    def create_component_file
+      template "component.rb", File.join("#{ROOT_PATH}", class_path, file_name, "component.rb")
+    end
+
+    def create_template_file
+      template "component.html#{TEMPLATE_EXT}", File.join("#{ROOT_PATH}", class_path, file_name, "component.html#{TEMPLATE_EXT}")
+    end
+
+    def create_test_file
+      return if options[:skip_test]
+
+      template "component_#{TEST_SUFFIX}.rb", File.join("#{TEST_ROOT_PATH}", class_path, "\#{file_name}_#{TEST_SUFFIX}.rb")
+    end
+
+    def create_preview_file
+      return if options[:skip_preview]
+
+      template "preview.rb", File.join("#{ROOT_PATH}", class_path, file_name, "preview.rb")
+    end
+
+    private
+
+    def parent_class
+      "ApplicationViewComponent"
+    end
+
+    def preview_parent_class
+      "ApplicationViewComponentPreview"
+    end
+  end
+  CODE
+
+  if USE_WEBPACK
+    inject_into_file "lib/generators/view_component/view_component_generator.rb", after: "class_option :skip_preview, type: :boolean, default: false\n" do
+      <<-CODE
+  class_option :skip_js, type: :boolean, default: false
+  class_option :skip_css, type: :boolean, default: false
+      CODE
+    end
+
+    inject_into_file "lib/generators/view_component/view_component_generator.rb", before: "\n  private" do
+      <<-CODE
+  def create_css_file
+    return if options[:skip_css] || options[:skip_js]
+
+    template "index.css", File.join("#{ROOT_PATH}", class_path, file_name, "index.css")
+  end
+
+  def create_js_file
+    return if options[:skip_js]
+
+    template "index.js", File.join("#{ROOT_PATH}", class_path, file_name, "index.js")
+  end
+      CODE
+    end
+  end
+
+  if USE_DRY
+    inject_into_file "lib/generators/view_component/view_component_generator.rb", before: "\nend" do
+      <<-CODE
+
+
+  def initialize_signature
+    return if attributes.blank?
+
+    attributes.map { |attr| "option :\#{attr.name}" }.join("\\n  ")
+  end
+      CODE
+    end
+
+    file "lib/generators/view_component/templates/component.rb.tt",
+      <<~CODE
+        # frozen_string_literal: true
+
+        class <%= class_name %>::Component < <%= parent_class %>
+        <%- if initialize_signature -%>
+          <%= initialize_signature %>
+        <%- end -%>
+        end
+      CODE
+  else
+    inject_into_file "lib/generators/view_component/view_component_generator.rb", before: "\nend" do
+      <<-CODE
+
+
+  def initialize_signature
+    return if attributes.blank?
+
+    attributes.map { |attr| "\#{attr.name}:" }.join(", ")
+  end
+
+  def initialize_body
+    attributes.map { |attr| "@\#{attr.name} = \#{attr.name}" }.join("\\n    ")
+  end
+      CODE
+    end
+
+    file "lib/generators/view_component/templates/component.rb.tt",
+      <<~CODE
+        # frozen_string_literal: true
+
+        class <%= class_name %>::Component < <%= parent_class %>
+        <%- if initialize_signature -%>
+          def initialize(<%= initialize_signature %>)
+            <%= initialize_body %>
+          end
+        <%- end -%>
+        end
+      CODE
+  end
+
+  if TEMPLATE_EXT == ".slim"
+    file "lib/generators/view_component/templates/component.html.slim.tt", <<~CODE
+    div Add <%= class_name %> template here
+    CODE
+  end
+
+  if TEMPLATE_EXT == ".erb"
+    file "lib/generators/view_component/templates/component.html.erb.tt", <<~CODE
+    <div>Add <%= class_name %> template here</div>
+    CODE
+  end
+
+  if TEMPLATE_EXT == ".haml"
+    file "lib/generators/view_component/templates/component.html.tt", <<~CODE
+    %div Add <%= class_name %> template here
+    CODE
+  end
+
+  if TEMPLATE_EXT == ""
+    file "lib/generators/view_component/templates/component.html.tt", <<~CODE
+    <div>Add <%= class_name %> template here</div>
+    CODE
+  end
+
+  file "lib/generators/view_component/templates/preview.rb.tt", <<~CODE
+  # frozen_string_literal: true
+
+  class <%= class_name %>::Preview < <%= preview_parent_class %>
+    # You can specify the container class for the default template
+    # self.container_class = "w-1/2 border border-gray-300"
+
+    def default
+    end
+  end
+  CODE
+
+  if USE_WEBPACK
+    if USE_STIMULUS
+      file "lib/generators/view_component/templates/index.js.tt",
+      <<-CODE
+import "./index.css"
+
+// Add a Stimulus controller for this component.
+// It will automatically registered and its name will be available
+// via #component_name in the component class.
+//
+// import { Controller as BaseController } from "stimulus";
+//
+// export class Controller extends BaseController {
+//   connect() {
+//   }
+//
+//   disconnect() {
+//   }
+// }
+      CODE
+    else
+      file "lib/generators/view_component/templates/index.js.tt", <<~CODE
+      import "./index.css"
+
+      CODE
+    end
+
+    if USE_POSTCSS_MODULES
+      file "lib/generators/view_component/templates/index.css.tt", <<~CODE
+      /* Use component-local class names and add them to HTML via #class_for(name) helper */
+
+      CODE
+    else
+      file "lib/generators/view_component/templates/index.css.tt", ""
+    end
+  end
+
+  if USE_RSPEC
+    file "lib/generators/view_component/templates/component_spec.rb.tt", <<~CODE
+  # frozen_string_literal: true
+
+  require "rails_helper"
+
+  describe <%= class_name %>::Component do
+    let(:options) { {} }
+    let(:component) { <%= class_name %>::Component.new(**options) }
+
+    subject { rendered_component }
+
+    it "renders" do
+      render_inline(component)
+
+      is_expected.to have_css "div"
+    end
+  end
+    CODE
+  else
+    file "lib/generators/view_component/templates/component_test.rb.tt", <<~CODE
+  # frozen_string_literal: true
+
+  require "test_helper"
+
+  class <%= class_name %>::ComponentTest < ActiveSupport::TestCase
+    include ViewComponent::TestHelpers
+
+    def test_renders
+      component = build_component
+
+      render_inline(component)
+
+      assert_selector "div"
+    end
+
+    private
+
+    def build_component(**options)
+      <%= class_name %>::Component.new(**options)
+    end
+  end
+    CODE
+  end
+
+  file "lib/generators/view_component/USAGE", <<~CODE
+  Description:
+  ============
+      Creates a new view component, test and preview files.
+      Pass the component name, either CamelCased or under_scored, and an optional list of attributes as arguments.
+
+  Example:
+  ========
+      bin/rails generate view_component Profile name age
+
+      creates a Profile component and test:
+          Component:    #{ROOT_PATH}/profile/component.rb
+          Template:     #{ROOT_PATH}/profile/component.html#{TEMPLATE_EXT}
+          Test:         #{TEST_ROOT_PATH}/profile_component_#{TEST_SUFFIX}.rb
+          Preview:      #{ROOT_PATH}/profile/component_preview.rb
+  CODE
+
+  if USE_WEBPACK
+    inject_into_file "lib/generators/view_component/USAGE" do
+      <<-CODE
+          JS:           #{ROOT_PATH}/profile/component.js
+          CSS:          #{ROOT_PATH}/profile/component.css
+      CODE
+    end
+  end
+end

data/app/templates/install/identifier.rb

@@ -0,0 +1,7 @@
+
+
+  private
+
+  def identifier
+    @identifier ||= self.class.name.sub("::Component", "").underscore.split("/").join("--")
+  end

data/app/templates/install/index.js

@@ -0,0 +1,2 @@
+const context = require.context(".", true, /index.js$/)
+context.keys().forEach(context);

data/app/templates/install/index.stimulus.js

@@ -0,0 +1,20 @@
+// IMPORTANT: Update this import to reflect the location of your Stimulus application
+// See https://github.com/palkan/view_component-contrib#using-with-stimulusjs
+import { application } from "../init/stimulus";
+
+const context = require.context(".", true, /index.js$/)
+context.keys().forEach((path) => {
+  const mod = context(path);
+
+  // Check whether a module has the Controller export defined
+  if (!mod.Controller) return;
+
+  // Convert path into a controller identifier:
+  //   example/index.js -> example
+  //   nav/user_info/index.js -> nav--user-info
+  const identifier = path.replace(/^\\.\\//, '')
+    .replace(/\\/index\\.js$/, '')
+    .replace(/\\//, '--');
+
+  application.register(identifier, mod.Controller);
+});

data/app/templates/install/initializer.rb

@@ -0,0 +1,16 @@
+ActiveSupport.on_load(:view_component) do
+  # Extend your preview controller to support authentication and other
+  # application-specific stuff
+  #
+  # Rails.application.config.to_prepare do
+  #   ViewComponentsController.class_eval do
+  #     include Authenticated
+  #   end
+  # end
+  #
+  # Make it possible to store previews in sidecar folders
+  # See https://github.com/palkan/view_component-contrib#organizing-components-or-sidecar-pattern-extended
+  ViewComponent::Preview.extend ViewComponentContrib::Preview::Sidecarable
+  # Enable `self.abstract_class = true` to exclude previews from the list
+  ViewComponent::Preview.extend ViewComponentContrib::Preview::Abstract
+end

data/app/templates/install/postcss-modules.js

@@ -0,0 +1,13 @@
+    generateScopedName: (name, filename, _css) => {
+      const matches = filename.match(/#{ROOT_PATH.gsub('/', '\/')}\\/?(.*)\\/index.css$/);
+      // Do not transform CSS files from outside of the components folder
+      if (!matches) return name;
+
+      // identifier here is the same identifier we used for Stimulus controller (see above)
+      const identifier = matches[1].replace("/", "--");
+
+      // We also add the `c-` prefix to all components classes
+      return `c-${identifier}-${name}`;
+    },
+    // Do not generate *.css.json files (we don't use them)
+    getJSON: () => {}

data/app/templates/install/template.rb

@@ -0,0 +1,133 @@
+say "👋 Welcome to interactive ViewComponent installer and configurator. " \
+    "Make sure you've read the view_component-contrib guide: https://github.com/palkan/view_component-contrib"
+
+run "bundle add view_component view_component-contrib --skip-install"
+
+inject_into_file "config/application.rb", "require \"view_component/engine\"\n", before: "\nBundler.require(*Rails.groups)"
+
+say_status :info, "✅ ViewComponent gems added"
+
+DEFAULT_ROOT = "app/frontend/components"
+
+root = ask("Where do you want to store your view components? (default: #{DEFAULT_ROOT})")
+ROOT_PATH = root.present? && root.downcase != "n" ? root : DEFAULT_ROOT
+
+root_paths = ROOT_PATH.split("/").map { |path| "\"#{path}\"" }.join(", ")
+
+application "config.view_component.preview_paths << Rails.root.join(#{root_paths})"
+application "config.autoload_paths << Rails.root.join(#{root_paths})"
+
+say_status :info, "✅ ViewComponent paths configured"
+
+file "#{ROOT_PATH}/application_view_component.rb",
+<%= embed_code("./application_view_component.rb") %>
+
+file "#{ROOT_PATH}/application_view_component_preview.rb",
+<%= embed_code("./application_view_component_preview.rb") %>
+
+say_status :info, "✅ ApplicationViewComponent and ApplicationViewComponentPreview classes added"
+
+USE_RSPEC = File.directory?("spec")
+TEST_ROOT_PATH = USE_RSPEC ? File.join("spec", ROOT_PATH.sub("app/", "")) : File.join("test", ROOT_PATH.sub("app/", ""))
+
+USE_DRY = yes? "Would you like to use dry-initializer in your component classes?"
+
+if USE_DRY
+  run "bundle add dry-initializer --skip-install"
+
+  inject_into_file "#{ROOT_PATH}/application_view_component.rb", "\n  extend Dry::Initializer", after: "class ApplicationViewComponent < ViewComponentContrib::Base"
+
+  say_status :info, "✅ Extended ApplicationViewComponent with Dry::Initializer"
+end
+
+initializer "view_component.rb",
+<%= embed_code("./initializer.rb") %>
+
+say_status :info, "✅ Added ViewComponent initializer with required patches"
+
+if USE_RSPEC
+  inject_into_file "spec/rails_helper.rb", after: "require \"rspec/rails\"\n" do
+    "require \"capybara/rspec\"\nrequire \"view_component/test_helpers\"\n"
+  end
+
+  inject_into_file "spec/rails_helper.rb", after: "RSpec.configure do |config|\n" do
+    <<-CODE
+  config.include ViewComponent::TestHelpers, type: :view_component
+  config.include Capybara::RSpecMatchers, type: :view_component
+
+  config.define_derived_metadata(file_path: %r{/#{TEST_ROOT_PATH}}) do |metadata|
+    metadata[:type] = :view_component
+  end
+
+    CODE
+  end
+end
+
+say_status :info, "✅ RSpec configured"
+
+USE_WEBPACK = File.directory?("config/webpack")
+
+if USE_WEBPACK
+  USE_STIMULUS = yes? "Do you use StimulusJS?"
+
+  if USE_STIMULUS
+    file "#{ROOT_PATH}/index.js",
+    <%= embed_code("./index.stimulus.js") %>
+
+    inject_into_file "#{ROOT_PATH}/application_view_component.rb", before: "\nend" do
+      <%= embed_code("./identifier.rb") %>
+    end
+  else
+    file "#{ROOT_PATH}/index.js",
+    <%= embed_code("./index.js") %>
+  end
+
+  say_status :info, "✅ Added index.js to load components JS/CSS"
+  say "⚠️   Don't forget to import component JS/CSS (#{ROOT_PATH}/index.js) from your application.js entrypoint"
+
+  USE_POSTCSS_MODULES = yes? "Would you like to use postcss-modules to isolate component styles?"
+
+  if USE_POSTCSS_MODULES
+    run "yarn add postcss-modules"
+
+    if File.read("postcss.config.js").match(/plugins:\s*\[/)
+      inject_into_file "postcss.config.js", after: "plugins: [" do
+        <<-CODE
+
+  require('postcss-modules')({
+  <%= embed("./postcss-modules.js") %>
+  }),
+        CODE
+      end
+    else
+      inject_into_file "postcss.config.js", after: "plugins: {" do
+        <<-CODE
+
+  'postcss-modules': {
+  <%= embed("./postcss-modules.js") %>
+  },
+        CODE
+      end
+    end
+
+    if !USE_STIMULUS
+      inject_into_file "#{ROOT_PATH}/application_view_component.rb", before: "\nend" do
+        <%= embed_code("./identifier.rb") %>
+      end
+    end
+
+    inject_into_file "#{ROOT_PATH}/application_view_component.rb", before: "\nend" do
+      <%= embed_code("./class_for.rb") %>
+    end
+
+    say_status :info, "✅ postcss-modules configured"
+  end
+end
+
+<%= embed("./generator.rb") %>
+
+say "Installing gems..."
+
+Bundler.with_unbundled_env { run "bundle install" }
+
+say_status :info, "✅  You're ready to rock!"