view_component_storybook 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 1021436306238303a42b8496a96765bf9c86728c8c9663560812f6c30c54617e
+  data.tar.gz: 16ba6b7654c9b0bc8aab1c7cd36cdb5bb81a8d9913446cdd0d8c603856d57a95
+SHA512:
+  metadata.gz: ccf6ca47f3d3f381956edbdf97d5b962b53b61b843851271a1b038e116cbd6423c44b2e73bbf7959441041b7e7ec914447474c17480cbff8122917237ae7da62
+  data.tar.gz: 4bf051cdaf384dbadb873093920736293b1399e9767ef68d32d4ed6fa07d831b22d5dff397a6dd9e29ff89a99298c323ef5555787b55e102d072b156ab387aaf

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Jon Palmer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,143 @@
+# ViewComponent::Storybook
+
+The ViewComponent::Storybook gem provides Ruby api for writing stories describing [View Components](https://github.com/github/view_component) and allowing them to be previewed and tested in [Storybook](https://github.com/storybookjs/storybook/) 
+
+## Features
+* A Ruby DSL for writing Stories describing View Components
+* A Rails controller backend for Storybook Server compatible with most Strobook Knobs Addon parameters
+* Coming Soon: Rake tasks to watch View Components and Stories and trigger Storybook hot reloading
+
+## Installation
+
+### Gem Installation 
+
+1. Add the `view_component_storybook` gem, to your Gemfile: `gem 'view_component_storybook'`
+2. Run `bundle install`.
+3. Add `require "view_component_storybook/engine"` to `config/application.rb`
+4. Add `**/*.stories.json` to `.gitignore`
+
+### Storybook Installation
+
+1. Add Storybook server as a dev dependedncy. The Storybook Knobs addon isn't needed but is strongly recommended
+   ```sh
+   yarn add @storybook/server @storybook/addon-knobs --dev
+   ```
+2. Add an NPM script to your package.json in order to start the storybook later in this guide
+   ```json
+   {
+     "scripts": {
+       "storybook": "start-storybook"
+     }
+   }
+   ```    
+3. Create the .storybook/main.js file to configure Storybook to find the json stories the gem creates. Also configure the knobs addon:
+   ```javascript
+   module.exports = {
+     stories: ['../test/components/**/*.stories.json'],
+     addons: [
+       '@storybook/addon-knobs',
+     ],
+   };
+   ```
+4. Create the .storybook/preview.js file to configure Storybook with the Rails application url to call for the html content of the stories
+   ```javascript
+   import { addParameters } from '@storybook/server';
+
+   addParameters({
+     server: {
+       url: `http://localhost:3000/rails/stories`,
+     },
+   });
+   ```
+   
+
+Note: `@storybook/server` will be part of the upcoming Storybook 6.0 release. Until that is released you'll need to use an [alpha release](https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.32)
+
+## Usage
+
+### Writing Stories
+
+`ViewComponent::Storybook::Stories` provides a way to preview components in Storybook.
+
+Suppose our app has a `ButtonComponent` that takes a `button_text` parameter:
+
+```ruby
+class ButtonComponent < ViewComponent::Base
+  def initialize(button_text:)
+    @button_text = button_text
+  end
+end
+```
+
+We can write a stories desecibing the `ButtonComponent`
+
+```ruby
+class ButtonComponentStories < ViewComponent::Storybook::Stories
+  story(:with_short_text) do
+    knobs do
+      text(:button_text, 'OK')
+    end
+  end
+
+  story(:with_long_text) do
+    knobs do
+      text(:button_text, 'Push Me Please!')
+    end
+  end
+end
+```
+
+### Generating Storybook Stories JSON
+
+Generate the Storybook JSON stories by tunning the rake task:
+```sh
+rake view_component_storybook:write_stories_json
+```
+
+### Start the Rails app and Storybook
+
+In separate shells start the Rails app and Storybook
+
+```sh
+rails s
+```
+```sh
+yarn storybook
+```
+
+Alternatively you can use tools like [Foreman](https://github.com/ddollar/foreman) to start both Rails and Storybook with one command.
+
+### Configuration
+
+By Default ViewComponent::Storybook expects to find stories in the folder `test/components/stories`. This can be configured but setting `stories_path` in `config/applicaion.rb`. For example is you're using RSpec you might set the following configuration:
+
+```ruby
+config.view_component_storybook.stories_path = Rails.root.join("spec/components/stories")
+```
+
+### The Story DSL
+
+Coming Soon
+
+#### Parameters
+#### Layout
+#### Knobs
+
+
+## Development
+
+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.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/jonspalmer/actionview-component-storybook. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the ViewComponent::Storybook project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/jonspalmer/view_component_storybook/blob/master/CODE_OF_CONDUCT.md).

data/app/controllers/view_component/storybook/stories_controller.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "rails/application_controller"
+
+module ViewComponent
+  module Storybook
+    class StoriesController < Rails::ApplicationController
+      prepend_view_path File.expand_path("../../../views", __dir__)
+      prepend_view_path Rails.root.join("app/views") if defined?(Rails.root)
+
+      before_action :find_stories, :find_story, only: :show
+      before_action :require_local!, unless: :show_stories?
+
+      content_security_policy(false) if respond_to?(:content_security_policy)
+
+      def show
+        component_args = @story.values_from_params(params.permit!.to_h)
+
+        @content_block = @story.content_block
+
+        @component = @story.component.new(**component_args)
+
+        layout = @story.layout
+        render layout: layout unless layout.nil?
+      end
+
+      private
+
+      def show_stories?
+        ViewComponent::Storybook.show_stories
+      end
+
+      def find_stories
+        stories_name = params[:stories]
+        @stories = ViewComponent::Storybook::Stories.find_stories(stories_name)
+
+        head :not_found unless @stories
+      end
+
+      def find_story
+        story_name = params[:story]
+        @story = @stories.find_story(story_name)
+        head :not_found unless @story
+      end
+    end
+  end
+end

data/app/views/view_component/storybook/stories/show.html.erb

@@ -0,0 +1 @@
+<%= render(@component, &@content_block)%>

data/lib/view_component/storybook.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require "active_model"
+require "active_support/dependencies/autoload"
+require "view_component/storybook/engine"
+
+module ViewComponent
+  module Storybook
+    extend ActiveSupport::Autoload
+
+    autoload :Knobs
+    autoload :Stories
+    autoload :StoryConfig
+    autoload :Dsl
+
+    include ActiveSupport::Configurable
+    # Set the location of component previews through app configuration:
+    #
+    #     config.view_component_storybook.stories_path = Rails.root.join("lib/component_stories")
+    #
+    mattr_accessor :stories_path, instance_writer: false
+
+    # Enable or disable component previews through app configuration:
+    #
+    #     config.view_component_storybook.show_stories = true
+    #
+    # Defaults to +true+ for development environment
+    #
+    mattr_accessor :show_stories, instance_writer: false
+
+    ActiveSupport.run_load_hooks(:view_component_storybook, self)
+  end
+end

data/lib/view_component/storybook/dsl.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "active_support/dependencies/autoload"
+
+module ViewComponent
+  module Storybook
+    module Dsl
+      extend ActiveSupport::Autoload
+
+      autoload :StoryDsl
+      autoload :KnobsDsl
+    end
+  end
+end

data/lib/view_component/storybook/dsl/knobs_dsl.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Dsl
+      class KnobsDsl
+        attr_reader :component, :knobs
+
+        def initialize(component)
+          @component = component
+          @knobs = []
+        end
+
+        def text(param, value, group_id: nil, name: nil)
+          knobs << Knobs::SimpleConfig.new(:text, component, param, value, group_id: group_id, name: name)
+        end
+
+        def boolean(param, value, group_id: nil, name: nil)
+          knobs << Knobs::SimpleConfig.new(:boolean, component, param, value, group_id: group_id, name: name)
+        end
+
+        def number(param, value, options = {}, group_id: nil, name: nil)
+          knobs << Knobs::NumberConfig.new(component, param, value, options, group_id: group_id, name: name)
+        end
+
+        def color(param, value, group_id: nil, name: nil)
+          knobs << Knobs::SimpleConfig.new(:color, component, param, value, group_id: group_id, name: name)
+        end
+
+        def object(param, value, group_id: nil, name: nil)
+          knobs << Knobs::ObjectConfig.new(component, param, value, group_id: group_id, name: name)
+        end
+
+        def select(param, options, value, group_id: nil, name: nil)
+          knobs << Knobs::OptionsConfig.new(:select, component, param, options, value, group_id: group_id, name: name)
+        end
+
+        def radios(param, options, value, group_id: nil, name: nil)
+          knobs << Knobs::OptionsConfig.new(:radios, component, param, options, value, group_id: group_id, name: name)
+        end
+
+        def array(param, value, separator = ",", group_id: nil, name: nil)
+          knobs << Knobs::ArrayConfig.new(component, param, value, separator, group_id: group_id, name: name)
+        end
+
+        def date(param, value, group_id: nil, name: nil)
+          knobs << Knobs::DateConfig.new(component, param, value, group_id: group_id, name: name)
+        end
+
+        def respond_to_missing?(_method)
+          true
+        end
+
+        def method_missing(method, *args)
+          value = args.first
+          knob_method = case value
+                        when Date
+                          :date
+                        when Array
+                          :array
+                        when Hash
+                          :object
+                        when Numeric
+                          :number
+                        when TrueClass, FalseClass
+                          :boolean
+                        when String
+                          :text
+                        end
+          if knob_method
+            send(knob_method, method, *args)
+          else
+            super
+          end
+        end
+
+        Knobs = ViewComponent::Storybook::Knobs
+      end
+    end
+  end
+end

data/lib/view_component/storybook/dsl/story_dsl.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Dsl
+      class StoryDsl
+        def self.evaluate!(story_config, &block)
+          new(story_config).instance_eval(&block)
+        end
+
+        def parameters(**params)
+          @story_config.parameters = params
+        end
+
+        def knobs(&block)
+          knobs_dsl = KnobsDsl.new(story_config.component)
+          knobs_dsl.instance_eval(&block)
+          @story_config.knobs = knobs_dsl.knobs
+        end
+
+        def layout(layout)
+          @story_config.layout = layout
+        end
+
+        def content(&block)
+          @story_config.content_block = block
+        end
+
+        private
+
+        attr_reader :story_config
+
+        def initialize(story_config)
+          @story_config = story_config
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/engine.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+require "rails"
+require "view_component/storybook"
+
+module ViewComponent
+  module Storybook
+    class Engine < Rails::Engine
+      config.view_component_storybook = ActiveSupport::OrderedOptions.new
+
+      initializer "view_component_storybook.set_configs" do |app|
+        options = app.config.view_component_storybook
+
+        options.show_stories = Rails.env.development? if options.show_stories.nil?
+
+        if options.show_stories
+          options.stories_path ||= defined?(Rails.root) ? Rails.root.join("test/components/stories") : nil
+        end
+
+        ActiveSupport.on_load(:view_component_storybook) do
+          options.each { |k, v| send("#{k}=", v) }
+        end
+      end
+
+      initializer "view_component.set_autoload_paths" do |app|
+        options = app.config.view_component_storybook
+
+        ActiveSupport::Dependencies.autoload_paths << options.stories_path if options.show_stories && options.stories_path
+      end
+
+      config.after_initialize do |app|
+        options = app.config.view_component_storybook
+
+        if options.show_stories
+          app.routes.prepend do
+            get "/rails/stories/*stories/:story" => "view_component/storybook/stories#show", :internal => true
+          end
+        end
+      end
+
+      rake_tasks do
+        load File.join(__dir__, "tasks/write_stories_json.rake")
+      end
+    end
+  end
+end

data/lib/view_component/storybook/knobs.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "active_support/dependencies/autoload"
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      extend ActiveSupport::Autoload
+
+      autoload :KnobConfig
+      autoload :SimpleConfig
+      autoload :NumberConfig
+      autoload :OptionsConfig
+      autoload :ArrayConfig
+      autoload :DateConfig
+      autoload :ObjectConfig
+    end
+  end
+end

data/lib/view_component/storybook/knobs/array_config.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      class ArrayConfig < KnobConfig
+        attr_reader :separator
+
+        validates :value, :separator, presence: true
+
+        def initialize(component, param, value, separator = ",", name: nil, group_id: nil)
+          super(component, param, value, name: name, group_id: group_id)
+          @separator = separator
+        end
+
+        def to_csf_params
+          super.merge(value: value, separator: separator)
+        end
+
+        def type
+          :array
+        end
+
+        def value_from_param(param)
+          if param.is_a?(String)
+            param.split(separator)
+          else
+            super(param)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/knobs/date_config.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      class DateConfig < KnobConfig
+        validates :value, presence: true
+
+        def initialize(component, param, value, name: nil, group_id: nil)
+          super(component, param, value, name: name, group_id: group_id)
+        end
+
+        def to_csf_params
+          csf_params = super
+          params_value = value
+          params_value = params_value.in_time_zone if params_value.is_a?(Date)
+          params_value = params_value.iso8601 if params_value.is_a?(Time)
+          csf_params[:value] = params_value
+          csf_params
+        end
+
+        def type
+          :date
+        end
+
+        def value_from_param(param)
+          if param.is_a?(String)
+            DateTime.iso8601(param)
+          else
+            super(param)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/knobs/knob_config.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      class KnobConfig
+        include ActiveModel::Validations
+
+        attr_reader :component, :param, :value, :name, :group_id
+
+        validates :component, :param, presence: true
+        validates :param, inclusion: { in: ->(knob_config) { knob_config.component_params } }, unless: -> { component.nil? }
+
+        def initialize(component, param, value, name: nil, group_id: nil)
+          @component = component
+          @param = param
+          @value = value
+          @name = name || param.to_s.humanize.titlecase
+          @group_id = group_id
+        end
+
+        def to_csf_params
+          validate!
+          params = { type: type, param: param, name: name, value: value }
+          params[:group_id] = group_id if group_id
+          params
+        end
+
+        def value_from_param(param)
+          param
+        end
+
+        def component_params
+          @component_params ||= component && component.instance_method(:initialize).parameters.map(&:last)
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/knobs/number_config.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      class NumberConfig < KnobConfig
+        attr_reader :options
+
+        validates :value, presence: true
+
+        def initialize(component, param, value, options = {}, name: nil, group_id: nil)
+          super(component, param, value, name: name, group_id: group_id)
+          @options = options
+        end
+
+        def type
+          :number
+        end
+
+        def to_csf_params
+          params = super
+          params[:options] = options unless options.empty?
+          params
+        end
+
+        def value_from_param(param)
+          if param.is_a?(String) && param.present?
+            (param.to_f % 1) > 0 ? param.to_f : param.to_i
+          else
+            super(param)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/knobs/object_config.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      class ObjectConfig < KnobConfig
+        validates :value, presence: true
+
+        def type
+          :object
+        end
+
+        def value_from_param(param)
+          if param.is_a?(String)
+            JSON.parse(param).symbolize_keys
+          else
+            super(param)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/knobs/options_config.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      class OptionsConfig < KnobConfig
+        TYPES = %i[select radios].freeze
+
+        attr_reader :type, :options
+
+        validates :value, :type, :options, presence: true
+        validates :type, inclusion: { in: TYPES }, unless: -> { type.nil? }
+        validates :value, inclusion: { in: ->(config) { config.options.values } }, unless: -> { options.nil? || value.nil? }
+
+        def initialize(type, component, param, options, default_value, name: nil, group_id: nil)
+          super(component, param, default_value, name: name, group_id: group_id)
+          @type = type
+          @options = options
+        end
+
+        def to_csf_params
+          super.merge(options: options)
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/knobs/simple_config.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Knobs
+      class SimpleConfig < KnobConfig
+        TYPES = %i[text boolean color].freeze
+        BOOLEAN_VALUES = [true, false].freeze
+
+        attr_reader :type
+
+        validates :value, presence: true, unless: -> { type == :boolean }
+        validates :value, inclusion: { in: BOOLEAN_VALUES }, if: -> { type == :boolean }
+
+        validates :type, presence: true
+        validates :type, inclusion: { in: TYPES }, unless: -> { type.nil? }
+
+        def initialize(type, component, param, value, name: nil, group_id: nil)
+          super(component, param, value, name: name, group_id: group_id)
+          @type = type
+        end
+
+        def value_from_param(param)
+          if type == :boolean && param.is_a?(String) && param.present?
+            case param
+            when "true"
+              true
+            when "false"
+              false
+            end
+          else
+            super(param)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/stories.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    class Stories
+      extend ActiveSupport::DescendantsTracker
+
+      class_attribute :story_configs, default: []
+      class_attribute :parameters, :title, :stories_layout
+
+      class << self
+        def story(name, component = default_component, &block)
+          story_config = StoryConfig.configure(story_id(name), name, component, layout, &block)
+          story_configs << story_config
+          story_config
+        end
+
+        def parameters(**params)
+          self.parameters = params
+        end
+
+        def layout(layout = nil)
+          # if no argument is passed act like a getter
+          self.stories_layout = layout unless layout.nil?
+          stories_layout
+        end
+
+        def to_csf_params
+          stories_csf = story_configs.map(&:to_csf_params)
+
+          csf_params = { title: title }
+          csf_params[:addons] = ["knobs"] if stories_csf.any? { |csf| csf.key?(:knobs) }
+          csf_params[:parameters] = parameters if parameters.present?
+          csf_params[:stories] = story_configs.map(&:to_csf_params)
+          csf_params
+        end
+
+        def write_csf_json
+          json_path = File.join(ViewComponent::Storybook.stories_path, "#{stories_name}.stories.json")
+          File.open(json_path, "w") do |f|
+            f.write(JSON.pretty_generate(to_csf_params))
+          end
+          json_path
+        end
+
+        def stories_name
+          name.chomp("Stories").underscore
+        end
+
+        # Returns all component stories classes.
+        def all
+          load_stories if descendants.empty?
+          descendants
+        end
+
+        # Returns +true+ if the stories exist.
+        def stories_exists?(stories_name)
+          all.any? { |stories| stories.stories_name == stories_name }
+        end
+
+        # Find a component stories by its underscored class name.
+        def find_stories(stories_name)
+          all.find { |stories| stories.stories_name == stories_name }
+        end
+
+        # Returns +true+ if the story of the component stories exists.
+        def story_exists?(name)
+          story_configs.map(&:name).include?(name.to_sym)
+        end
+
+        # find the story by name
+        def find_story(name)
+          story_configs.find { |config| config.name == name.to_sym }
+        end
+
+        private
+
+        def inherited(other)
+          super(other)
+          # setup class defaults
+          other.title = other.stories_name.humanize.titlecase
+          other.story_configs = []
+        end
+
+        def default_component
+          name.chomp("Stories").constantize
+        rescue StandardError
+          nil
+        end
+
+        def load_stories
+          Dir["#{stories_path}/**/*_stories.rb"].sort.each { |file| require_dependency file } if stories_path
+        end
+
+        def stories_path
+          Storybook.stories_path
+        end
+
+        def show_stories
+          Storybook.show_stories
+        end
+
+        def story_id(name)
+          "#{stories_name}/#{name.to_s.parameterize}".underscore
+        end
+      end
+    end
+  end
+end

data/lib/view_component/storybook/story_config.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    class StoryConfig
+      include ActiveModel::Validations
+
+      attr_reader :id, :name, :component
+      attr_accessor :knobs, :parameters, :layout, :content_block
+
+      def initialize(id, name, component, layout)
+        @id = id
+        @name = name
+        @component = component
+        @layout = layout
+        @knobs = []
+      end
+
+      def to_csf_params
+        csf_params = { name: name, parameters: { server: { id: id } } }
+        csf_params.deep_merge!(parameters: parameters) if parameters.present?
+        csf_params[:knobs] = knobs.map(&:to_csf_params) if knobs.present?
+        csf_params
+      end
+
+      def values_from_params(params)
+        knobs.map do |knob|
+          value = knob.value_from_param(params[knob.param])
+          value = knob.value if value.nil? # nil only not falsey
+          [knob.param, value]
+        end.to_h
+      end
+
+      def self.configure(id, name, component, layout, &configuration)
+        config = new(id, name, component, layout)
+        ViewComponent::Storybook::Dsl::StoryDsl.evaluate!(config, &configuration)
+        config
+      end
+    end
+  end
+end

data/lib/view_component/storybook/tasks/write_stories_json.rake

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+namespace :view_component_storybook do
+  desc "Write CSF JSON stories for all Stories"
+  task write_stories_json: :environment do
+    puts "Writing Stories JSON"
+    ViewComponent::Storybook::Stories.all.each do |stories|
+      json_path = stories.write_csf_json
+      puts "#{stories.name} => #{json_path}"
+    end
+    puts "Done"
+  end
+end

data/lib/view_component/storybook/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    VERSION = "0.1.0"
+  end
+end

metadata

@@ -0,0 +1,207 @@
+--- !ruby/object:Gem::Specification
+name: view_component_storybook
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Jon Palmer
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-04-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.2'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.14'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.14'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: relaxed-rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.5'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.9'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.9'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.81'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.81'
+- !ruby/object:Gem::Dependency
+  name: rubocop-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.4.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.4.2
+- !ruby/object:Gem::Dependency
+  name: rubocop-rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.38'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.38'
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.18.5
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.18.5
+description: Generate Storybook CSF JSON for rendering Rails View Components in Storybook
+email:
+- 328224+jonspalmer@users.noreply.github.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- app/controllers/view_component/storybook/stories_controller.rb
+- app/views/view_component/storybook/stories/show.html.erb
+- lib/view_component/storybook.rb
+- lib/view_component/storybook/dsl.rb
+- lib/view_component/storybook/dsl/knobs_dsl.rb
+- lib/view_component/storybook/dsl/story_dsl.rb
+- lib/view_component/storybook/engine.rb
+- lib/view_component/storybook/knobs.rb
+- lib/view_component/storybook/knobs/array_config.rb
+- lib/view_component/storybook/knobs/date_config.rb
+- lib/view_component/storybook/knobs/knob_config.rb
+- lib/view_component/storybook/knobs/number_config.rb
+- lib/view_component/storybook/knobs/object_config.rb
+- lib/view_component/storybook/knobs/options_config.rb
+- lib/view_component/storybook/knobs/simple_config.rb
+- lib/view_component/storybook/stories.rb
+- lib/view_component/storybook/story_config.rb
+- lib/view_component/storybook/tasks/write_stories_json.rake
+- lib/view_component/storybook/version.rb
+homepage: https://github.com/jonspalmer/view_component_storybook
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/jonspalmer/view_component_storybook
+  source_code_uri: https://github.com/jonspalmer/view_component_storybook
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.3.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.6
+signing_key: 
+specification_version: 4
+summary: Storybook for Rails View Components
+test_files: []