rails-storybook 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 83b229f8189dd57281db3c891bb6b36b8a437777bdb964ea059a652c8c2c9aad
-  data.tar.gz: 616420336b4acf5a60967d24498ebeeb004d31169ca7f5de85a309d4795c0ca2
+  metadata.gz: 458c8b46779f2ff4f95162603bbef83351fa665f74abb0ad05c964c001695807
+  data.tar.gz: aabbc888656b99c56c3d1bb337c8291d7dec9497ca0ed00724c01977f3bc1dbb
 SHA512:
-  metadata.gz: 941d4806670ba38473617ecab1a385788da1d56de11267c9372d884c47bf6b45fd191d6b5d40816858f247b70242e1cb089a2bf1ac16da2633be49fbb8a92587
-  data.tar.gz: 9cc2e89ded7fd27eec72f7b3127acdf854bc6de168e8ffbfe1409ea168ca2bb869702e016ae18e9752cd13657bf96ceb59b624f30cc0102563eb16d59463cb34
+  metadata.gz: fb49d7e4d163b9ce723dfaa28c9fa22d67c53279e5364ba86af01e895a3059f526af125f427e95c4ab5b18674beb7f1c654031981de62219e24ea759f97fd8df
+  data.tar.gz: e8892db80deae244450745ed86ca751731f9d62c2e51905ad12a80593c840fbdab1a55111a3ba92e63f5177fc0d5dbbc29e2dbb6d9814f3ca5e36a89becd301b

data/Gemfile.lock

@@ -3,6 +3,8 @@ PATH
   specs:
     rails-storybook (0.1.0)
       rails (~> 7.0)
+      rails-previews (~> 0.1.0)
+      react_on_rails (~> 14.0)
       slim (~> 5.2)
 
 GEM
@@ -82,6 +84,8 @@ GEM
       minitest (>= 5.1)
       mutex_m
       tzinfo (~> 2.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.2)
     base64 (0.2.0)
     bigdecimal (3.1.8)
@@ -96,6 +100,7 @@ GEM
     diff-lcs (1.5.1)
     drb (2.2.1)
     erubi (1.13.0)
+    execjs (2.9.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.5)
@@ -140,6 +145,7 @@ GEM
       racc
     psych (5.1.2)
       stringio
+    public_suffix (6.0.1)
     racc (1.8.1)
     rack (3.1.7)
     rack-session (2.0.0)
@@ -170,6 +176,8 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
+    rails-previews (0.1.0)
+      slim (~> 5.2)
     railties (7.1.3.4)
       actionpack (= 7.1.3.4)
       activesupport (= 7.1.3.4)
@@ -182,6 +190,12 @@ GEM
     rake (13.2.1)
     rdoc (6.7.0)
       psych (>= 4.0.0)
+    react_on_rails (14.0.5)
+      addressable
+      connection_pool
+      execjs (~> 2.5)
+      rails (>= 5.2)
+      rainbow (~> 3.0)
     regexp_parser (2.9.2)
     reline (0.5.9)
       io-console (~> 0.5)

data/README.md

@@ -21,33 +21,36 @@ rails g storybook:install
 
 Then, optionally:
 ```bash
-rails g storybook:example
+rails g storybook:examples
 ```
 
 Restart your processes (stop and restart `./bin/dev`) and viola! Opens up a Storybook connected to your Rails server, and if you've also generated the example, will have a simple View Component showing up in Storybook.
 
 ## Usage
 
-Today, write a JSON to describe your View Component's "story":
-```
-  {
-    "title": "ExampleComponent",
-    "stories": [
-      {
-        "name": "default",
-        "parameters": {
-          "server": { "id": "example_component/default" }
-        }
-      }
-    ]
-  }
+Write a preview for your component, just like normal - but include the StoryBook::Preview module. You can also use the `PartialPreviewComponent` to render regular Rails partials as previews.
+```ruby
+class ExampleComponentPreview < ViewComponent::Preview
+  include Storybook::Preview
+  def default
+    render(ExampleComponent.new(title: "title"))
+  end
+  
+  def default
+    render(PartialPreviewComponent.new(partial: "application/example"))
+  end
+end
 ```
+Note that the module will set the preview's layout to `storybook`, as there's steps to be done to make it look good (and work!) inside of Storybook.
+
+Then run `rake storybook:stories` to generate the CSF JSON that Storybook uses to find your previews.
+
+And... that's it! :D  
 
-Tomorrow(tm), run a rake task to generate those stories for you.
 
 ## Development
 
-Inspired by [gem view_component-storybook](https://github.com/jonspalmer/view_component-storybook), but, I want to accomplish things in a different way (using the existing view component previews), to aim higher (handling view components, partials, *and* React components), and to aim specifically at integration with Chromatic.
+Inspired by [gem view_component-storybook](https://github.com/jonspalmer/view_component-storybook), but, I want to accomplish things in a different way, to aim higher (handling ~~view components~~, ~~partials~~, *and* React components), and to aim specifically at integration with Chromatic.
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 

data/lib/generators/storybook/examples_generator.rb

@@ -0,0 +1,144 @@
+require "rails/generators"
+
+class Storybook::ExamplesGenerator < Rails::Generators::Base
+  def create_example_partial
+    create_file "app/views/application/_example.html.slim", <<~SLIM
+      h3 Example Partial
+      span= @title
+    SLIM
+  end
+
+  def create_example_partial_preview
+    create_file "spec/previews/example_partial.rb", <<~RUBY
+      # frozen_string_literal: true
+      module Previews
+        class ExamplePartial < Rails::Previews::Preview
+          def default
+            render_partial "application/example", locals: { title: "Hello, World!" }
+          end
+        end
+      end
+    RUBY
+  end
+
+  def install_view_components
+    insert_into_file "Gemfile", "gem \"view_component\""
+    system "bundle install"
+  end
+
+  def create_example_view_component
+    create_file "app/components/example_component.rb", <<~RUBY
+      # frozen_string_literal: true
+
+      class ExampleComponent < ViewComponent::Base
+        slim_template <<~SLIM
+          h3 Example Component
+          span= @title
+        SLIM
+
+        def initialize(title:)
+          @title = title
+        end
+      end
+    RUBY
+  end
+
+  def create_example_view_component_preview
+    create_file "spec/previews/example_view_component.rb", <<~RUBY
+      # frozen_string_literal: true
+
+      module Previews
+        class ExampleViewComponent < Rails::Previews::Preview
+          def default
+            ExampleComponent.new(title: "Hello, World!")
+          end
+
+          # TODO - This doesn't work with the current Previews implementation
+          # def with_content_block
+          #   render(ExampleComponent.new(title: "This component accepts a block of content")) do
+          #     tag.div do
+          #       content_tag(:span, "Hello")
+          #     end
+          #   end
+          # end
+        end
+      end
+    RUBY
+  end
+
+  def install_react_on_rails
+    insert_into_file "Gemfile", "\ngem \"react_on_rails\""
+    system "bundle install"
+  end
+
+  def setup_application_bundle
+    # TODO: I have my pack in not the default location
+  end
+
+  def create_example_react_component
+    create_file "client/bundles/application/components/HelloWorld.jsx", <<~JSX
+      import PropTypes from 'prop-types';
+      import React, { useState } from 'react';
+      import * as style from './HelloWorld.module.css';
+
+      const HelloWorld = (props) => {
+        return (
+          <div>
+            <h3>Example React Component</h3>
+            <span>{props.name}</span>
+          </div>
+        );
+      };
+
+      HelloWorld.propTypes = {
+        name: PropTypes.string.isRequired, // this is passed from the Rails view
+      };
+
+      export default HelloWorld;
+    JSX
+
+    create_file "client/bundles/application/components/HelloWorld.module.css", <<~CSS
+      .bright {
+        color: green;
+        font-weight: bold;
+      }#{'  '}
+    CSS
+
+    # TODO: Is this necessary?
+    create_file "client/bundles/application/components/HelloWorldServer.js", <<~JS
+      import HelloWorld from './HelloWorldServer';
+      export default HelloWorld;
+    JS
+
+    create_file "client/packs/application.js", <<~JS
+      import ReactOnRails from 'react-on-rails';
+      import HelloWorld from '../bundles/application/components/HelloWorld';
+      ReactOnRails.register({ HelloWorld });
+    JS
+
+    # TODO: Is this necessary?
+    create_file "client/packs/server-bundle.js", <<~JS
+      import ReactOnRails from 'react-on-rails';
+      import HelloWorld from '../bundles/application/components/HelloWorld';
+      ReactOnRails.register({ HelloWorld });
+    JS
+  end
+
+  def create_example_react_component_preview
+    create_file "spec/previews/example_react_component.rb", <<~RUBY
+      # frozen_string_literal: true
+
+      module Previews
+        class ExampleReactComponent < Rails::Previews::Preview
+          def default
+            render_react_on_rails "HelloWorld", props: { name: "Hello, World!" }
+          end
+        end
+      end
+    RUBY
+  end
+
+  def generate_stories
+    `rails storybook:stories`
+  end
+end

data/lib/generators/storybook/install_generator.rb

@@ -2,6 +2,7 @@ require "rails/generators"
 
 class Storybook::InstallGenerator < Rails::Generators::Base
   def install_storybook
+    # TODO: Tell storybook not to install it's examples
     system "npx storybook@latest init --yes --dev --no-dev --builder webpack5"
     system "yarn add @storybook/server --dev"
     system "yarn add @storybook/server-webpack5 --dev"
@@ -10,7 +11,7 @@ class Storybook::InstallGenerator < Rails::Generators::Base
   end
 
   def install_rack_cors
-    insert_into_file "Gemfile", "  gem 'rack-cors'\n", after: "group :development do\n"
+    insert_into_file "Gemfile", "  gem \"rack-cors\"\n", after: "group :development do\n"
     system "bundle install"
     create_file "config/initializers/cors.rb", <<~RUBY
       Rails.application.config.middleware.insert_before 0, Rack::Cors do
@@ -22,36 +23,31 @@ class Storybook::InstallGenerator < Rails::Generators::Base
     RUBY
   end
 
-  def create_storybook_layout_slim
-    create_file "app/views/layouts/storybook.html.slim", <<~SLIM
-      doctype html
-      html lang='en'
-        head
-          title Trainyard
-          meta charset="UTF-8"
-          meta[name="viewport" content="width=device-width,initial-scale=1"]
-          = csrf_meta_tags
-          = csp_meta_tag
-          = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
-          = stylesheet_link_tag "application"
-          = javascript_pack_tag "application"
-        body
-          div
-            main.ml-64.p-8
-              == yield
-    SLIM
-  end
-
   def update_storybook
     # Main.js
     insert_into_file ".storybook/main.js", "\n    \"@storybook/server\",", after: "addons: ["
-    gsub_file ".storybook/main.js", "*.stories.@(js|jsx|mjs|ts|tsx)", "*.stories.@(js|jsx|mjs|ts|tsx|json)"
+    gsub_file ".storybook/main.js", "*.stories.@(js|jsx|mjs|ts|tsx)", "*.stories.json"
     gsub_file ".storybook/main.js", "@storybook/react-webpack5", "@storybook/server-webpack5"
 
     # Preview.js
-    base_url = "http://localhost:3000/rails/view_components"
+    # TODO: Server & port
+    base_url = "http://localhost:3000/previews"
+
+    # Preferred method to get the styling loaded in:
+    # insert_into_file ".storybook/preview.js", "\nimport '../public/assets/tailwind-0c2ceb08e52f57602c2ff891790dee8451074b84335e77f107abdb57f99a2c37.css'", before: "export default preview;"
+    # insert_into_file ".storybook/preview.js", "\nimport '../public/assets/application-9f334b542cffee1084a19870f2b1f16b1ef66ff68bfa765286993d260bc9556a.css'", before: "export default preview;"
+
     insert_into_file ".storybook/preview.js", "\n    server: { url: \"#{base_url}\", },", after: "parameters: {"
 
     # insert_into_file ".storybook/main.js", "@storybook/addon-controls", after: "addons: ["
+
+    # Stylesheets so Storybook can find them
+    # TODO: TailwindCSS / JS packs name, etc
+    # TODO: Server & port
+    create_file ".storybook/.preview-head.html", <<~HTML
+      <link rel="stylesheet" href="http://localhost:3000/assets/tailwind.css" data-turbo-track="reload">
+      <link rel="stylesheet" href="http://localhost:3000/assets/inter-font.css" data-turbo-track="reload">
+      <link rel="stylesheet" href="http://localhost:3000/assets/application.css" data-turbo-track="reload">
+    HTML
   end
 end

data/lib/rails/storybook.rb

@@ -0,0 +1,2 @@
+require_relative "../storybook.rb"
+# TODO: Fix the gem naming, etc

data/lib/storybook/preview.rb

@@ -0,0 +1,17 @@
+
+module Rails::Previews
+  # Re-open the class to add the Storybook methods
+  class Preview
+    class << self
+      def to_csf
+        { title: preview_name, stories: stories }
+      end
+
+      def stories
+        examples.collect do |name|
+          { name:, parameters: { server: { id: "#{preview_name}/#{name}" } } }
+        end
+      end
+    end
+  end
+end

data/lib/storybook/railtie.rb

@@ -0,0 +1,14 @@
+require "storybook"
+require "rails"
+
+# https://gist.github.com/ntamvl/7a6658b4cd82d6fbd15434f0a9953411
+module Storybook
+  class Railtie < Rails::Railtie
+    railtie_name :storybook
+
+    rake_tasks do
+      path = File.expand_path(__dir__)
+      Dir.glob("#{path}/tasks/**/*.rake").each { |f| load f }
+    end
+  end
+end

data/lib/storybook/tasks/stories.rake

@@ -0,0 +1,11 @@
+namespace :storybook do
+  desc "Write CSF JSON stories for all Stories"
+  task stories: :environment do
+    stories_dir = "stories"
+    Rails::Previews::Preview.all.map do |preview|
+      filename = Rails.root.join("#{stories_dir}/#{preview.preview_name}.stories.json")
+      stories_json = JSON.pretty_generate(preview.to_csf)
+      File.open(filename, "w") { |f| f.write(stories_json) }
+    end
+  end
+end

data/lib/storybook/version.rb

@@ -1,4 +1,4 @@
 
 module Storybook
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/storybook.rb

@@ -1,6 +1,5 @@
 require "storybook/version"
+require "storybook/preview"
+require "storybook/railtie" if defined?(Rails::Railtie)
 
-module Storybook
-  class Error < StandardError; end
-  # Your code goes here...
-end
+module Storybook; end

data/rails-storybook.gemspec

@@ -26,6 +26,7 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency "rails", "~> 7.0"
   spec.add_dependency "slim", "~> 5.2"
+  spec.add_dependency "rails-previews", "~> 0.1.0"
   spec.add_development_dependency "rails", "~> 7.0"
 
   spec.add_development_dependency "bundler", "~> 2.5"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails-storybook
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Nicholas Barone
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-08-08 00:00:00.000000000 Z
+date: 2024-09-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -38,6 +38,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.2'
+- !ruby/object:Gem::Dependency
+  name: rails-previews
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.0
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -157,9 +171,13 @@ files:
 - Rakefile
 - bin/console
 - bin/setup
-- lib/generators/storybook/example_generator.rb
+- lib/generators/storybook/examples_generator.rb
 - lib/generators/storybook/install_generator.rb
+- lib/rails/storybook.rb
 - lib/storybook.rb
+- lib/storybook/preview.rb
+- lib/storybook/railtie.rb
+- lib/storybook/tasks/stories.rake
 - lib/storybook/version.rb
 - rails-storybook.gemspec
 homepage: https://github.com/rangerscience/rails-storybook

data/lib/generators/storybook/example_generator.rb

@@ -1,62 +0,0 @@
-require "rails/generators"
-
-class Storybook::ExampleGenerator < Rails::Generators::Base
-  def install_view_components
-    insert_into_file "Gemfile", "gem 'view_component'"
-    system "bundle install"
-  end
-
-  def create_example_component
-    create_file "app/components/example_component.rb", <<~RUBY
-      # frozen_string_literal: true
-
-      class ExampleComponent < ViewComponent::Base
-        slim_template <<~SLIM
-          span
-            = @title
-        SLIM
-
-        def initialize(title:)
-          @title = title
-        end
-      end
-    RUBY
-  end
-
-  def create_example_component_preview
-    create_file "test/components/previews/example_component_preview.rb", <<~RUBY
-      # frozen_string_literal: true
-
-      class ExampleComponentPreview < ViewComponent::Preview
-        layout "storybook"
-        def default
-          render(ExampleComponent.new(title: "title"))
-        end
-
-        def with_content_block
-          render(ExampleComponent.new(title: "This component accepts a block of content")) do
-            tag.div do
-              content_tag(:span, "Hello")
-            end
-          end
-        end
-      end
-    RUBY
-  end
-
-  def create_example_story
-    create_file "stories/example_component.stories.json", <<~JSON
-      {
-        "title": "ExampleComponent",
-        "stories": [
-          {
-            "name": "default",
-            "parameters": {
-              "server": { "id": "example_component/default" }
-            }
-          }
-        ]
-      }
-    JSON
-  end
-end