view_component_storybook 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e8c8a3875d64fe89649af8851324d2a07bd40868065abce8b57cf848cbeb5d3
-  data.tar.gz: 554f43665400373ba30b9bc6e307285843b67d3760e5957e0088fa2ba53b325e
+  metadata.gz: f8ab883711eb6c712fcb3f654fdcb80586091f6da753e311f2609347d600391e
+  data.tar.gz: 65ba53ff31930882f7c2a30492e5444ed438be268cfbb24291160ff38f712964
 SHA512:
-  metadata.gz: 398124fee399213bea34acf3aef434877eb01d0c76d9d6f127f5d5493981ecf5ac1f0ddc94ad9850354f6ec3629f1a9e5ca6005b57208abd39d045026415abbd
-  data.tar.gz: 31a4a06293f40d19e575243a61cb61e1cff2bd7646da950c01de20f8edd73d1179970a7700064a8ee15cbcd3a73b2060f525bdbf427baeaddc9f9bd9ee6b7ebe
+  metadata.gz: 24bf672f2214344c1d5b9e1af7bbe8ef51ddb8ba6065eca4b12b14e0c8b73f69381168b39d3f4339e953a086ec11d69f716f3fce7dfb8acd7efaabd3678cb578
+  data.tar.gz: 0df0d064cccf1ed1d625ba1d9cb439d8c3fb65f56a7671e3d65650dc85604ea89990e578ca4550863388d7cfc201b7cd33b7add24f294deb6646b1753062c03a

data/README.md

@@ -1,21 +1,34 @@
 # 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/)
+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/) via its [Server](https://github.com/storybookjs/storybook/tree/next/app/server) support.
 
 ## Features
 * A Ruby DSL for writing Stories describing View Components
-* A Rails controller backend for Storybook Server compatible with Strobook Controls Addon parameters
+* A Rails controller backend for Storybook Server compatible with Storybook Controls Addon parameters
 * Coming Soon: Rake tasks to watch View Components and Stories and trigger Storybook hot reloading
 
 ## Installation
 
-### Gem Installation
+### Rails 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`
 
+#### Configure Asset Hosts
+
+If your view components depend on Javascript, CSS or other assets served by the Rails application you will need to configure `asset_hosts`
+apporpriately for your various environments. For local development this is a simple as adding to `config/development.rb`:
+```ruby
+Rails.application.configure do
+  ...
+  config.action_controller.asset_host =  'http://localhost:3000'
+  ...
+end
+```
+Equivalent configuration will be necessary in `config/production.rb` or `application.rb` based you your deployment environments.
+
 ### Storybook Installation
 
 1. Add Storybook server as a dev dependedncy. The Storybook Controls addon isn't needed but is strongly recommended
@@ -50,8 +63,6 @@ The ViewComponent::Storybook gem provides Ruby api for writing stories describin
    ```
 
 
-Note: `@storybook/server` will be part of the upcoming Storybook 6.0 release. Until that is released you'll need to use an [rc release](https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.14)
-
 ## Usage
 
 ### Writing Stories
@@ -68,7 +79,7 @@ class ButtonComponent < ViewComponent::Base
 end
 ```
 
-We can write a stories desecibing the `ButtonComponent`
+We can write a stories describing the `ButtonComponent`
 
 ```ruby
 class ButtonComponentStories < ViewComponent::Storybook::Stories
@@ -88,7 +99,7 @@ end
 
 ### Generating Storybook Stories JSON
 
-Generate the Storybook JSON stories by tunning the rake task:
+Generate the Storybook JSON stories by running the rake task:
 ```sh
 rake view_component_storybook:write_stories_json
 ```
@@ -108,7 +119,7 @@ Alternatively you can use tools like [Foreman](https://github.com/ddollar/forema
 
 ### 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:
+By Default ViewComponent::Storybook expects to find stories in the folder `test/components/stories`. This can be configured by setting `stories_path` in `config/application.rb`. For example if you're using RSpec you might set the following configuration:
 
 ```ruby
 config.view_component_storybook.stories_path = Rails.root.join("spec/components/stories")
@@ -131,7 +142,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 
 ## 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.
+Bug reports and pull requests are welcome on GitHub at https://github.com/jonspalmer/view_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
 

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

@@ -14,11 +14,12 @@ module ViewComponent
       content_security_policy(false) if respond_to?(:content_security_policy)
 
       def show
-        component_args = @story.values_from_params(params.permit!.to_h)
+        params_hash = params.permit!.to_h
+        method_args = @story.constructor_args.resolve_method_args(params_hash)
 
         @content_block = @story.content_block
 
-        @component = @story.component.new(**component_args)
+        @component = @story.component.new(*method_args.args, **method_args.kwargs)
 
         layout = @story.layout
         render layout: layout unless layout.nil?

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

@@ -1 +1,3 @@
-<%= render(@component, &@content_block)%>
+<%= render(@component) do -%>
+<%= instance_eval(&@content_block) -%>
+<% end %>

data/config/locales/en.yml

@@ -0,0 +1,32 @@
+en:
+  activemodel:
+    errors:
+      models:
+        view_component/storybook/method_args/validatable_method_args:
+          attributes:
+            args:
+              too_few: expected at least %{min} but found %{count}
+              too_many: expected no more than %{max} but found %{count}
+            kwargs:
+              invalid_arg: "'%{kwarg}' is invalid"
+              invalid: expected keys [%{expected_keys}] but found [%{actual_keys}]
+        view_component/storybook/method_args/control_method_args:
+          attributes:
+            controls:
+              invalid_control: "'%{control_name}' is invalid: (%{control_errors})"
+        view_component/storybook/stories:
+          attributes:
+            story_configs:    
+              invalid_story: "'%{story_name}' is invalid: (%{story_errors})"
+              duplicate_stories:
+                one: duplicate story name %{duplicate_names}
+                other: duplicate story names %{duplicate_names} 
+        view_component/storybook/story_config:
+          attributes:
+            constructor_args:    
+              invalid: "invalid: (%{errors})"
+        view_component/storybook/controls/custom_config:
+          attributes:
+            value_method_args:    
+              invalid: "invalid: (%{errors})"
+            

data/lib/view_component/storybook.rb

@@ -10,7 +10,9 @@ module ViewComponent
     autoload :Controls
     autoload :Stories
     autoload :StoryConfig
+    autoload :ControlMethodArgs
     autoload :Dsl
+    autoload :MethodArgs
 
     include ActiveSupport::Configurable
     # Set the location of component previews through app configuration:

data/lib/view_component/storybook/controls.rb

@@ -8,6 +8,7 @@ module ViewComponent
       extend ActiveSupport::Autoload
 
       autoload :ControlConfig
+      autoload :SimpleControlConfig
       autoload :TextConfig
       autoload :BooleanConfig
       autoload :ColorConfig
@@ -16,6 +17,7 @@ module ViewComponent
       autoload :ArrayConfig
       autoload :DateConfig
       autoload :ObjectConfig
+      autoload :CustomConfig
     end
   end
 end

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

@@ -3,13 +3,13 @@
 module ViewComponent
   module Storybook
     module Controls
-      class ArrayConfig < ControlConfig
+      class ArrayConfig < SimpleControlConfig
         attr_reader :separator
 
         validates :separator, presence: true
 
-        def initialize(component, param, value, separator = ",", name: nil)
-          super(component, param, value, name: name)
+        def initialize(default_value, separator = ",", param: nil, name: nil)
+          super(default_value, param: param, name: name)
           @separator = separator
         end
 
@@ -17,11 +17,12 @@ module ViewComponent
           :array
         end
 
-        def value_from_param(param)
-          if param.is_a?(String)
-            param.split(separator)
+        def value_from_params(params)
+          params_value = super(params)
+          if params_value.is_a?(String)
+            params_value.split(separator)
           else
-            super(param)
+            params_value
           end
         end
 

data/lib/view_component/storybook/controls/boolean_config.rb

@@ -3,25 +3,26 @@
 module ViewComponent
   module Storybook
     module Controls
-      class BooleanConfig < ControlConfig
+      class BooleanConfig < SimpleControlConfig
         BOOLEAN_VALUES = [true, false].freeze
 
-        validates :value, inclusion: { in: BOOLEAN_VALUES }, unless: -> { value.nil? }
+        validates :default_value, inclusion: { in: BOOLEAN_VALUES }, unless: -> { default_value.nil? }
 
         def type
           :boolean
         end
 
-        def value_from_param(param)
-          if param.is_a?(String) && param.present?
-            case param
+        def value_from_params(params)
+          params_value = super(params)
+          if params_value.is_a?(String) && params_value.present?
+            case params_value
             when "true"
               true
             when "false"
               false
             end
           else
-            super(param)
+            params_value
           end
         end
       end

data/lib/view_component/storybook/controls/color_config.rb

@@ -3,11 +3,11 @@
 module ViewComponent
   module Storybook
     module Controls
-      class ColorConfig < ControlConfig
+      class ColorConfig < SimpleControlConfig
         attr_reader :preset_colors
 
-        def initialize(component, param, value, name: nil, preset_colors: nil)
-          super(component, param, value, name: name)
+        def initialize(default_value, preset_colors: nil, param: nil, name: nil)
+          super(default_value, param: param, name: name)
           @preset_colors = preset_colors
         end
 
@@ -18,8 +18,7 @@ module ViewComponent
         private
 
         def csf_control_params
-          params = super
-          params.merge(presetColors: preset_colors).compact
+          super.merge(presetColors: preset_colors).compact
         end
       end
     end

data/lib/view_component/storybook/controls/control_config.rb

@@ -6,55 +6,39 @@ module ViewComponent
       class ControlConfig
         include ActiveModel::Validations
 
-        attr_reader :component, :param, :value, :name
+        validates :param, presence: true
 
-        validates :component, :param, presence: true
-        validates :param, inclusion: { in: ->(control_config) { control_config.component_param_names } }, if: :should_validate_params?
-
-        def initialize(component, param, value, name: nil)
-          @component = component
+        def initialize(param: nil, name: nil)
           @param = param
-          @value = value
-          @name = name || param.to_s.humanize.titlecase
-        end
-
-        def to_csf_params
-          validate!
-          {
-            args: { param => csf_value },
-            argTypes: { param => { control: csf_control_params, name: name } }
-          }
-        end
-
-        def value_from_param(param)
-          param
+          @name = name
         end
 
-        def component_param_names
-          @component_param_names ||= component_params&.map(&:last)
+        def name(new_name = nil)
+          if new_name.nil?
+            @name ||= param.to_s.humanize.titlecase
+          else
+            @name = new_name
+            self
+          end
         end
 
-        private
+        def param(new_param = nil)
+          return @param if new_param.nil?
 
-        # provide extension points for subclasses to vary the value
-        def csf_value
-          value
+          @param = new_param
+          self
         end
 
-        def csf_control_params
-          { type: type }
-        end
-
-        def component_accepts_kwargs?
-          component_params.map(&:first).include?(:keyrest)
-        end
-
-        def component_params
-          @component_params ||= component.instance_method(:initialize).parameters
+        def to_csf_params
+          # :nocov:
+          raise NotImplementedError
+          # :nocov:
         end
 
-        def should_validate_params?
-          component.present? && !component_accepts_kwargs?
+        def value_from_params(params)
+          # :nocov:
+          raise NotImplementedError
+          # :nocov:
         end
       end
     end

data/lib/view_component/storybook/controls/custom_config.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Controls
+      class CustomConfig < ControlConfig
+        attr_reader :value_method_args
+
+        validate :validate_value_method_args
+
+        def with_value(*args, **kwargs, &block)
+          @value_method_args = ViewComponent::Storybook::MethodArgs::ControlMethodArgs.new(block, *args, **kwargs, &block)
+          @value_method_args.with_param_prefix(param)
+          self
+        end
+
+        def param(new_param = nil)
+          value_method_args.with_param_prefix(new_param) unless new_param.nil?
+          super(new_param)
+        end
+
+        def to_csf_params
+          validate!
+          # TODO: Figure out if we can use 'category' with the args table
+          # export default {
+          #   argTypes: {
+          #     foo: {
+          #       table: { category: 'cat', subcategory: 'sub' }
+          #     }
+          #   }
+          # }
+          value_method_args.controls.reduce({}) do |csf_params, control|
+            csf_params.deep_merge(control.to_csf_params)
+          end
+        end
+
+        def value_from_params(params)
+          method_args = value_method_args.resolve_method_args(params)
+
+          method_args.block.call(*method_args.args, **method_args.kwargs)
+        end
+
+        private
+
+        def validate_value_method_args
+          return if value_method_args.valid?
+
+          value_method_args_errors = value_method_args.errors.full_messages.join(', ')
+          errors.add(:value_method_args, :invalid, errors: value_method_args_errors)
+        end
+      end
+    end
+  end
+end

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

@@ -3,30 +3,33 @@
 module ViewComponent
   module Storybook
     module Controls
-      class DateConfig < ControlConfig
-        def initialize(component, param, value, name: nil)
-          super(component, param, value, name: name)
+      class DateConfig < SimpleControlConfig
+        def initialize(default_value, param: nil, name: nil)
+          super(default_value, param: param, name: name)
         end
 
         def type
           :date
         end
 
-        def value_from_param(param)
-          if param.is_a?(String)
-            DateTime.iso8601(param)
+        def value_from_params(params)
+          params_value = super(params)
+          if params_value.is_a?(String)
+            DateTime.iso8601(params_value)
           else
-            super(param)
+            params_value
           end
         end
 
         private
 
         def csf_value
-          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)
-          params_value
+          case default_value
+          when Date
+            default_value.in_time_zone
+          when Time
+            default_value.iso8601
+          end
         end
       end
     end