storybook_rails 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d9e73c7b0bf6d8f82291a937ef7d37f74621b5e1803d561a7396829ca4f61c3
-  data.tar.gz: ce0f60e3dd44c77e3678287d74ac340b3d5dd3233b1f7d52e31f083d734acb8d
+  metadata.gz: d93e71f5673db4150c93133e0fefb5a8fe052add9b78e4e59d5efbfb90a9fac0
+  data.tar.gz: 73496d3de905209e3c55ec87a09458c51f3d90b6b2145531924ecf4da2ed4e52
 SHA512:
-  metadata.gz: 6a7b37fc8c986e55f9926c307e8966b40cc855f0174f2cf9c9fd7b4e2458abe3b634471edcfc007b85b1822f4ca2a231e149cfe995228fa499a7a280f54794b7
-  data.tar.gz: 8f6e2d0188d83131473477881735d314c3f118f3dbe08c6028e5650fe4b58e6b9b804b0df66d3f022043a1f262a5deb5d43e92d2c5db26ff09ed0cfc2340c772
+  metadata.gz: a31bec0636ea50f973151b068724f4d689a7218c062f5816206e2c8714e7cfd58f5ee84f10bd1d0cfa0a02cc8afc488ce7f11fb3f6509ae1b11a293c5bad6cad
+  data.tar.gz: cbfce6773d0fe32ef5f96c062d78ad79d6145b9b6882e94be88dbf730a4e1db8f1a3dac29efa5866d6083af7ef7d30a1153adb8c3a80e97faa730c0326bf5b25

data/README.md

@@ -66,12 +66,15 @@ Equivalent configuration will be necessary in `config/production.rb` or `applica
    ```
 
 ### Webpacker
-If your application uses Webpacker to compile your JavaScript and/or CSS, you will need to modify the default Storybook webpack configuration. Please see the [Storybook Webpack config](https://storybook.js.org/docs/react/configure/webpack) for more information on how to do that. Here's an example:
+If your application uses Webpacker to compile your JavaScript and/or CSS, you will need to modify the default Storybook webpack configuration. Please see the [Storybook Webpack config](https://storybook.js.org/docs/react/configure/webpack) for more information on how to do that.
+
+Here's an example of what that _might_ look like:
 
 ```javascript
 // .storybook/main.js
 
 const path = require('path');
+// Import the Webpacker webpack environment
 const environment = require('../config/webpack/environment');
 const { merge } = require('webpack-merge');
 
@@ -81,7 +84,8 @@ module.exports = {
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
     let envConfig = environment.toWebpackConfig();
-
+    
+    // Tell Webpack to compile an additional entry point, pointing to your Webpacker pack file(s)
     let entries = {
       main: config.entry,
       application: path.resolve(__dirname, '../app/javascript/packs/application.js')
@@ -89,7 +93,8 @@ module.exports = {
 
     config.entry = entries
 
-    // Storybook doesn't support .scss out of the box
+    // Storybook doesn't support .scss out of the box, and we like scss, so...
+    // Add a rule to tell Webpack to process .scss files using these loaders
     config.module.rules.push({
       test: /\.scss$/,
       use: ['style-loader', 'css-loader', 'sass-loader'],
@@ -116,7 +121,8 @@ In package.json:
 {
   ...
   "scripts": {
-    "storybook:start": "rm -rf node_modules/.cache/storybook && start-storybook",
+    "storybook:clean": "find ./test/components/stories -name '*.stories.json' -delete && rm -rf node_modules/.cache/storybook",
+    "storybook:start": "yarn storybook:clean && yarn storybook:write-json && start-storybook -p 8081",
     "storybook:write-json": "bundle exec rake storybook_rails:write_stories_json",
     "storybook:watch": "chokidar '**/*_stories.rb' -c 'yarn storybook:write-json'"
   },
@@ -146,7 +152,7 @@ Suppose our app has a shared `app/views/shared/_button.html.erb` partial:
 We can write a stories describing the `_button.html.erb` partial:
 
 ```ruby
-# buttons/button_stories.rb
+# test/components/stories/buttons/button_stories.rb
 
 class Buttons::ButtonStories < ActionView::Storybook::Stories
   self.title = "Buttons"
@@ -173,7 +179,7 @@ end
 
 And a story template to render individual stories:
 ```erb
-# buttons/button_stories.html.erb
+# test/components/stories/buttons/button_stories.html.erb
 
 <% story_name_class_map = {
     primary: "button",
@@ -187,6 +193,13 @@ And a story template to render individual stories:
 
 It's up to you how handle rendering your partials in Storybook, but `storybook_rails` will look for a view template that matches the story name (`buttons/button_stories.html.erb` in the example above. In addition, `storybook_rails` provides a `story_params` helper which provides quick access to the params and args specified in the story config. You can use these parameters in your view template to render each story dynamically. Or not. It's up to you.
 
+### Generating Storybook Files
+`storybook_rails` includes a Rails generator to make it easy to generate the files outlined in the section above.
+
+To generate the files above, we could have done this: `bin/rails generate storybook_rails:stories Button primary secondary outline`.
+
+For more detail, `bin/rails storybook_rails:stories --help`.
+
 ### Generating Storybook Stories JSON
 
 Generate the Storybook JSON stories by running the rake task:
@@ -226,13 +239,79 @@ If Storybook fails to load with a `cannot get /` error, it could be related to [
 }
 ```
 
+#### Storybook fails to fetch due to CORS
+If the Storybook UI is rendering, but not fetching stories from your Rails server and you see an error in the browser console like this:
+```bash
+Access to fetch at 'http://localhost:3000/storybook/button/primary' from origin 'http://localhost:8081' has been blocked by 
+CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, 
+set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
+```
+Then you probably need to setup CORS. Please see [rack-cors](https://github.com/cyu/rack-cors) for examples.
+
 ### The Story DSL
 
-Coming Soon
+🚧  Work in progress... 🚧
 
 #### Parameters
+From the [Storybook CSF docs](https://storybook.js.org/docs/html/writing-stories/parameters):
+> Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.
+
+Using the example parameters [configuration](https://storybook.js.org/docs/html/essentials/backgrounds#configuration) for the Backgrounds addon, this is how you could accomplish the same parameters using the `parameters` method:
+
+```ruby
+class ButtonStories < ActionView::Storybook::Stories
+  background_data = {
+    default: 'twitter',
+    values: [
+      { name: 'twitter', value: '#00aced' },
+      { name: 'facebook', value: '#3b5998' }
+    ]
+  }
+
+  parameters( { backgrounds: background_data })
+  
+  story(:primary) do
+    parameters({ backgrounds: { default: 'facebook'} })
+    
+    controls do
+      text(:button_text, "Primary")
+    end
+  end
+end
+```
+
+
 #### Layout
+By default, your stories will render without a layout. This can be customized just like you would normally in a Rails controller, by calling `layout "application"`, at either the class level, the story level, or both.
+
+```ruby
+class Buttons::ButtonStories < ActionView::Storybook::Stories
+  self.title = "Buttons"
+  layout "application"
+
+  story(:primary) do
+    controls do
+      text(:button_text, "Primary")
+    end
+  end
+
+  story(:secondary) do
+    controls do
+      text(:button_text, "Secondary")
+    end
+  end
+
+  story(:custom) do
+    controls do
+      text(:button_text, "Custom")
+    end
+    
+    layout "custom"
+  end
+end
+```
 #### Controls
+Coming soon... in the meantime, see https://github.com/danieldpence/storybook_rails/tree/main/lib/action_view/storybook/controls.
 
 
 ## Development

data/lib/action_view/storybook/engine.rb

@@ -39,7 +39,9 @@ module ActionView
       end
 
       rake_tasks do
+        # :nocov:
         load File.join(__dir__, "tasks/write_stories_json.rake")
+        # :nocov:
       end
     end
   end

data/lib/action_view/storybook/version.rb

@@ -2,6 +2,6 @@
 
 module ActionView
   module Storybook
-    VERSION = "1.1.0"
+    VERSION = "1.2.0"
   end
 end

data/lib/generators/storybook_rails/USAGE

@@ -0,0 +1,12 @@
+Description:
+============
+    Generates a [NAME]_stories.rb file and matching view template with
+    the given NAME (if one does not exist) and optional [story_names].
+
+Example:
+========
+    bin/rails generate storybook_rails:stories Button default primary
+
+    creates a Button story file and view template:
+        Story File:   test/components/button_stories.rb
+        Template:     test/components/button_component.html.erb

data/lib/generators/storybook_rails/stories_generator.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require "rails/generators/named_base"
+
+module StorybookRails
+  class StoriesGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path("templates", __dir__)
+    argument :stories, type: :array, default: [], banner: "stories"
+    check_class_collision suffix: "Stories"
+
+    def generate_stories_files
+      template "stories.rb", File.join(stories_path.to_s, "#{file_path}_stories.rb")
+      template "stories.html.erb", File.join(stories_path.to_s, "#{file_path}_stories.html.erb")
+    end
+
+    private
+
+    def stories_path
+      Rails.application.config.storybook_rails.stories_path
+    end
+  end
+end

data/lib/generators/storybook_rails/templates/stories.html.erb.tt

@@ -0,0 +1 @@
+<div>Render the <%= class_name %> partial here.</div>

data/lib/generators/storybook_rails/templates/stories.rb.tt

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class <%= class_name %>Stories < ActionView::Storybook::Stories
+<%- stories.each do |story_name| -%>
+  story(:<%= story_name %>) do
+    controls do
+    end
+  end
+
+<%- end -%>
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: storybook_rails
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
 - Daniel Pence
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-27 00:00:00.000000000 Z
+date: 2021-06-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -196,6 +196,10 @@ files:
 - lib/action_view/storybook/story_config.rb
 - lib/action_view/storybook/tasks/write_stories_json.rake
 - lib/action_view/storybook/version.rb
+- lib/generators/storybook_rails/USAGE
+- lib/generators/storybook_rails/stories_generator.rb
+- lib/generators/storybook_rails/templates/stories.html.erb.tt
+- lib/generators/storybook_rails/templates/stories.rb.tt
 homepage: https://github.com/danieldpence/storybook_rails
 licenses:
 - MIT