view_component_storybook 0.8.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e8c8a3875d64fe89649af8851324d2a07bd40868065abce8b57cf848cbeb5d3
-  data.tar.gz: 554f43665400373ba30b9bc6e307285843b67d3760e5957e0088fa2ba53b325e
+  metadata.gz: 0dd708afcf2aa165339b0b1fde82ae610665554e3633c1e50b25509088b43e79
+  data.tar.gz: 950739b2892877a1451c262dc2110d6885a86c740c7fec9cd626a305feb8313d
 SHA512:
-  metadata.gz: 398124fee399213bea34acf3aef434877eb01d0c76d9d6f127f5d5493981ecf5ac1f0ddc94ad9850354f6ec3629f1a9e5ca6005b57208abd39d045026415abbd
-  data.tar.gz: 31a4a06293f40d19e575243a61cb61e1cff2bd7646da950c01de20f8edd73d1179970a7700064a8ee15cbcd3a73b2060f525bdbf427baeaddc9f9bd9ee6b7ebe
+  metadata.gz: 3f9b37292f202ac1c79fd4d31b9ace6b067efff03bf60a6f6a7b44a241ce5661c3669a382d9e549461dfe391d9c77fe0b9b98d33a3a5a47ce821d47e9c26ec7d
+  data.tar.gz: 8e7db14af389ae4d4b2dbcf269269476ac9309c9e518226afedbef769e31f72d32ed44a61382f9830836cab5a4ceba45a701af0a66861de31f928713be9b6c55

data/README.md

@@ -1,142 +1,21 @@
 # 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
-* Coming Soon: Rake tasks to watch View Components and Stories and trigger Storybook hot reloading
 
-## Installation
+- A Ruby DSL for writing Stories describing View Components
+- 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
 
-### Gem Installation
+## Documentation
 
-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 Controls addon isn't needed but is strongly recommended
-   ```sh
-   yarn add @storybook/server @storybook/addon-controls --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 Controls addon:
-   ```javascript
-   module.exports = {
-     stories: ['../test/components/**/*.stories.json'],
-     addons: [
-       '@storybook/addon-controls',
-     ],
-   };
-   ```
-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
-
-   export const parameters = {
-     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 [rc release](https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.14)
-
-## 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
-    controls do
-      text(:button_text, 'OK')
-    end
-  end
-
-  story(:with_long_text) do
-    controls 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
-#### Controls
-
-
-## 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).
+See [jonspalmer.github.io/view_component_storybook](https://jonspalmer.github.io/view_component_storybook) for documentation.
 
 ## 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.
+This project is intended to be a safe, welcoming space for collaboration. Contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. We recommend reading the [contributing guide](./docs/CONTRIBUTING.md) as well.
 
 ## 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

@@ -8,19 +8,18 @@ module ViewComponent
       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 :find_story_configs, :find_story_config, 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)
+        params_hash = params.permit!.to_h
 
-        @content_block = @story.content_block
+        @story = @story_config.story(params_hash)
 
-        @component = @story.component.new(**component_args)
+        layout = @story_config.layout
 
-        layout = @story.layout
         render layout: layout unless layout.nil?
       end
 
@@ -30,17 +29,17 @@ module ViewComponent
         ViewComponent::Storybook.show_stories
       end
 
-      def find_stories
+      def find_story_configs
         stories_name = params[:stories]
-        @stories = ViewComponent::Storybook::Stories.find_stories(stories_name)
+        @story_configs = Stories.find_story_configs(stories_name)
 
-        head :not_found unless @stories
+        head :not_found unless @story_configs
       end
 
-      def find_story
+      def find_story_config
         story_name = params[:story]
-        @story = @stories.find_story(story_name)
-        head :not_found unless @story
+        @story_config = @story_configs.find_story_config(story_name)
+        head :not_found unless @story_config
       end
     end
   end

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

@@ -1 +1,8 @@
-<%= render(@component, &@content_block)%>
+<%= render(@story.component) do |c| -%>
+  <% @story.slots.each do |slot| -%>
+    <%- slot.call do -%>
+      <%= instance_eval(&slot.content_block) if slot.content_block -%>
+    <%- end -%>
+  <%- end -%>
+  <%- instance_eval(&@story.content_block) if @story.content_block -%>
+<%- end -%>

data/config/locales/en.yml

@@ -0,0 +1,32 @@
+en:
+  activemodel:
+    errors:
+      models:
+        view_component/storybook/method_args/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/content_concern.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module ContentConcern
+      extend ActiveSupport::Concern
+
+      included do
+        attr_reader :content_control, :content_block
+      end
+
+      def content(content = nil, &block)
+        case content
+        when Storybook::Controls::ControlConfig
+          @content_control = content.param(content_param)
+          @content_block = nil
+        when String
+          @content_control = nil
+          @content_block = proc { content }
+        else
+          @content_control = nil
+          @content_block = block
+        end
+      end
+
+      def resolve_content_block(params)
+        if content_control
+          content = content_control.value_from_params(params)
+          proc { content }
+        else
+          content_block
+        end
+      end
+
+      private
+
+      def content_param
+        :content
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Controls
+      class BaseOptionsConfig < SimpleControlConfig
+        attr_reader :type, :options, :labels
+
+        validates :type, :options, presence: true
+
+        def initialize(type, options, default_value, labels: nil, param: nil, name: nil)
+          super(default_value, param: param, name: name)
+          @type = type
+          @options = options
+          @labels = labels
+          normalize_options
+        end
+
+        def to_csf_params
+          super.deep_merge(argTypes: { param => { options: options } })
+        end
+
+        private
+
+        def csf_control_params
+          labels.nil? ? super : super.merge(labels: labels)
+        end
+
+        def normalize_options
+          return unless options.is_a?(Hash)
+
+          warning = "Hash options is deprecated and will be removed in v1.0.0. Use array options and `labels` instead."
+          ActiveSupport::Deprecation.warn(warning)
+
+          @labels = options.invert
+          @options = options.values
+        end
+      end
+    end
+  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,43 @@ 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
+          @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_param_names
-          @component_param_names ||= component_params&.map(&:last)
+          @param = new_param
+          self
         end
 
-        private
-
-        # provide extension points for subclasses to vary the value
-        def csf_value
-          value
+        def prefix_param(prefix)
+          param("#{prefix}__#{@param}".to_sym)
         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/controls_helpers.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Controls
+      module ControlsHelpers
+        def text(default_value)
+          Controls::TextConfig.new(default_value)
+        end
+
+        def boolean(default_value)
+          Controls::BooleanConfig.new(default_value)
+        end
+
+        def number(default_value, min: nil, max: nil, step: nil)
+          Controls::NumberConfig.new(:number, default_value, min: min, max: max, step: step)
+        end
+
+        def range(default_value, min: nil, max: nil, step: nil)
+          Controls::NumberConfig.new(:range, default_value, min: min, max: max, step: step)
+        end
+
+        def color(default_value, preset_colors: nil)
+          Controls::ColorConfig.new(default_value, preset_colors: preset_colors)
+        end
+
+        def object(default_value)
+          Controls::ObjectConfig.new(default_value)
+        end
+
+        def select(options, default_value, labels: nil)
+          Controls::OptionsConfig.new(:select, options, default_value, labels: labels)
+        end
+
+        def multi_select(options, default_value, labels: nil)
+          Controls::MultiOptionsConfig.new(:'multi-select', options, default_value, labels: labels)
+        end
+
+        def radio(options, default_value, labels: nil)
+          Controls::OptionsConfig.new(:radio, options, default_value, labels: labels)
+        end
+
+        def inline_radio(options, default_value, labels: nil)
+          Controls::OptionsConfig.new(:'inline-radio', options, default_value, labels: labels)
+        end
+
+        def check(options, default_value, labels: nil)
+          Controls::MultiOptionsConfig.new(:check, options, default_value, labels: labels)
+        end
+
+        def inline_check(options, default_value)
+          Controls::MultiOptionsConfig.new(:'inline-check', options, default_value)
+        end
+
+        def array(default_value, separator = nil)
+          ActiveSupport::Deprecation.warn("`array` `separator` argument will be removed in v1.0.0.") if separator
+          Controls::ObjectConfig.new(default_value)
+        end
+
+        def date(default_value)
+          Controls::DateConfig.new(default_value)
+        end
+
+        def custom(*args, **kwargs, &block)
+          Controls::CustomConfig.new.with_value(*args, **kwargs, &block)
+        end
+
+        def klazz(value_class, *args, **kwargs)
+          Controls::CustomConfig.new.with_value(*args, **kwargs) do |*a, **kwa|
+            value_class.new(*a, **kwa)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,52 @@
+# 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 = MethodArgs::ControlMethodArgs.new(block, *args, **kwargs)
+          @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)
+          value_method_args.call(params)
+        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