view_component_storybook 0.3.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69b5a85793ed8d4ecfe45be21c90a95894f001403ea9a6c086c9822e5b4fca4d
-  data.tar.gz: 15b8f5b6430c46b5a3cd453602c4705dea94784b574f6d3a1a9b1ab39c40d1bb
+  metadata.gz: f8ab883711eb6c712fcb3f654fdcb80586091f6da753e311f2609347d600391e
+  data.tar.gz: 65ba53ff31930882f7c2a30492e5444ed438be268cfbb24291160ff38f712964
 SHA512:
-  metadata.gz: '091149f57b05dc6bf82b1dac987ab6dbaaa6655e8c0833517eb575d8ce8abb05e75b8919a63799ad4efaa5da1722fbf5bee7f34c4680a12f969c6996532e53f7'
-  data.tar.gz: bf0f10bc68bc35197ca9485efbc3fe18bcad98b110df969f3219daeaeb4797f1c1e7c6eb4ce3aeb737246571227c91c466b4d7c63dd4ff141c0a3962b47caf29
+  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`
+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
@@ -29,7 +42,7 @@ The ViewComponent::Storybook gem provides Ruby api for writing stories describin
        "storybook": "start-storybook"
      }
    }
-   ```    
+   ```
 3. Create the .storybook/main.js file to configure Storybook to find the json stories the gem creates. Also configure the Controls addon:
    ```javascript
    module.exports = {
@@ -48,9 +61,7 @@ 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
 
@@ -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

@@ -2,7 +2,6 @@
 
 require "active_model"
 require "active_support/dependencies/autoload"
-require "view_component/storybook/engine"
 
 module ViewComponent
   module Storybook
@@ -11,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,12 +8,16 @@ module ViewComponent
       extend ActiveSupport::Autoload
 
       autoload :ControlConfig
-      autoload :SimpleConfig
+      autoload :SimpleControlConfig
+      autoload :TextConfig
+      autoload :BooleanConfig
+      autoload :ColorConfig
       autoload :NumberConfig
       autoload :OptionsConfig
       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 :value, :separator, presence: true
+        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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Controls
+      class BooleanConfig < SimpleControlConfig
+        BOOLEAN_VALUES = [true, false].freeze
+
+        validates :default_value, inclusion: { in: BOOLEAN_VALUES }, unless: -> { default_value.nil? }
+
+        def type
+          :boolean
+        end
+
+        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
+            params_value
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Controls
+      class ColorConfig < SimpleControlConfig
+        attr_reader :preset_colors
+
+        def initialize(default_value, preset_colors: nil, param: nil, name: nil)
+          super(default_value, param: param, name: name)
+          @preset_colors = preset_colors
+        end
+
+        def type
+          :color
+        end
+
+        private
+
+        def csf_control_params
+          super.merge(presetColors: preset_colors).compact
+        end
+      end
+    end
+  end
+end

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

@@ -6,43 +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: ->(knob_config) { knob_config.component_params } }, unless: -> { component.nil? }
-
-        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
+          @name = name
         end
 
-        def to_csf_params
-          validate!
-          {
-            args: { param => csf_value },
-            argTypes: { param => { control: csf_control_params, name: name } }
-          }
+        def name(new_name = nil)
+          if new_name.nil?
+            @name ||= param.to_s.humanize.titlecase
+          else
+            @name = new_name
+            self
+          end
         end
 
-        def value_from_param(param)
-          param
-        end
+        def param(new_param = nil)
+          return @param if new_param.nil?
 
-        def component_params
-          @component_params ||= component && component.instance_method(:initialize).parameters.map(&:last)
+          @param = new_param
+          self
         end
 
-        private
-
-        # provide extension points for subclasses to vary the value
-        def csf_value
-          value
+        def to_csf_params
+          # :nocov:
+          raise NotImplementedError
+          # :nocov:
         end
 
-        def csf_control_params
-          { type: type }
+        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,32 +3,33 @@
 module ViewComponent
   module Storybook
     module Controls
-      class DateConfig < ControlConfig
-        validates :value, presence: true
-
-        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