view_component_storybook 0.9.0 → 0.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f8ab883711eb6c712fcb3f654fdcb80586091f6da753e311f2609347d600391e
-  data.tar.gz: 65ba53ff31930882f7c2a30492e5444ed438be268cfbb24291160ff38f712964
+  metadata.gz: d9748db108a30faac96e4e6f793cfd9b62a47c8f8e03fa83d4518f670bf7fb42
+  data.tar.gz: b1b6140fd9ad5dc1ff4a281a93f6d5384792ab04c5030531f23e4127854e2819
 SHA512:
-  metadata.gz: 24bf672f2214344c1d5b9e1af7bbe8ef51ddb8ba6065eca4b12b14e0c8b73f69381168b39d3f4339e953a086ec11d69f716f3fce7dfb8acd7efaabd3678cb578
-  data.tar.gz: 0df0d064cccf1ed1d625ba1d9cb439d8c3fb65f56a7671e3d65650dc85604ea89990e578ca4550863388d7cfc201b7cd33b7add24f294deb6646b1753062c03a
+  metadata.gz: a8bd26bfe7ccb8c2b30b1f989056c7b294ea99b6ae3e53a7b5bb87ef85a667e169dbc362f7681887bb8a8a6ab57d022afaa164b7846d8d667b63efaef4bfbb97
+  data.tar.gz: c04e250070f402802fb94e3807a0c65e1e9af54534f03480fc0e5abc46781f3e9d34c54da282bc81cec944be3c8a5585c690ac4f6d68ac4597a429f82627fd4f

data/README.md

@@ -3,151 +3,19 @@
 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 Storybook 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
 
-### Rails 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`
-
-#### 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
-   ```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`,
-     },
-   };
-   ```
-
-
-## 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 describing 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 running 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 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")
-```
-
-### 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/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.
+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,20 +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
         params_hash = params.permit!.to_h
-        method_args = @story.constructor_args.resolve_method_args(params_hash)
 
-        @content_block = @story.content_block
+        @story = @story_config.story(params_hash)
 
-        @component = @story.component.new(*method_args.args, **method_args.kwargs)
+        layout = @story_config.layout
 
-        layout = @story.layout
         render layout: layout unless layout.nil?
       end
 
@@ -31,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,3 +1,8 @@
-<%= render(@component) do -%>
-<%= instance_eval(&@content_block) -%>
-<% end %>
+<%= 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

@@ -2,7 +2,7 @@ en:
   activemodel:
     errors:
       models:
-        view_component/storybook/method_args/validatable_method_args:
+        view_component/storybook/method_args/method_args:
           attributes:
             args:
               too_few: expected at least %{min} but found %{count}

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/control_config.rb

@@ -29,6 +29,10 @@ module ViewComponent
           self
         end
 
+        def prefix_param(prefix)
+          param("#{prefix}__#{@param}".to_sym)
+        end
+
         def to_csf_params
           # :nocov:
           raise NotImplementedError

data/lib/view_component/storybook/{dsl/controls_dsl.rb → controls/controls_helpers.rb}

@@ -2,8 +2,8 @@
 
 module ViewComponent
   module Storybook
-    module Dsl
-      module ControlsDsl
+    module Controls
+      module ControlsHelpers
         def text(default_value)
           Controls::TextConfig.new(default_value)
         end
@@ -28,32 +28,33 @@ module ViewComponent
           Controls::ObjectConfig.new(default_value)
         end
 
-        def select(options, default_value)
-          Controls::OptionsConfig.new(:select, options, default_value)
+        def select(options, default_value, labels: nil)
+          Controls::OptionsConfig.new(:select, options, default_value, labels: labels)
         end
 
-        def multi_select(options, default_value)
-          Controls::OptionsConfig.new(:'multi-select', options, default_value)
+        def multi_select(options, default_value, labels: nil)
+          Controls::MultiOptionsConfig.new(:'multi-select', options, default_value, labels: labels)
         end
 
-        def radio(options, default_value)
-          Controls::OptionsConfig.new(:radio, options, default_value)
+        def radio(options, default_value, labels: nil)
+          Controls::OptionsConfig.new(:radio, options, default_value, labels: labels)
         end
 
-        def inline_radio(options, default_value)
-          Controls::OptionsConfig.new(:'inline-radio', options, default_value)
+        def inline_radio(options, default_value, labels: nil)
+          Controls::OptionsConfig.new(:'inline-radio', options, default_value, labels: labels)
         end
 
-        def check(options, default_value)
-          Controls::OptionsConfig.new(:check, options, default_value)
+        def check(options, default_value, labels: nil)
+          Controls::MultiOptionsConfig.new(:check, options, default_value, labels: labels)
         end
 
         def inline_check(options, default_value)
-          Controls::OptionsConfig.new(:'inline-check', options, default_value)
+          Controls::MultiOptionsConfig.new(:'inline-check', options, default_value)
         end
 
-        def array(default_value, separator = ",")
-          Controls::ArrayConfig.new(default_value, separator)
+        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)
@@ -64,7 +65,11 @@ module ViewComponent
           Controls::CustomConfig.new.with_value(*args, **kwargs, &block)
         end
 
-        Controls = ViewComponent::Storybook::Controls
+        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

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

@@ -9,7 +9,7 @@ module ViewComponent
         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 = MethodArgs::ControlMethodArgs.new(block, *args, **kwargs)
           @value_method_args.with_param_prefix(param)
           self
         end
@@ -35,9 +35,7 @@ module ViewComponent
         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)
+          value_method_args.call(params)
         end
 
         private

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Controls
+      class MultiOptionsConfig < BaseOptionsConfig
+        TYPES = %i[multi-select check inline-check].freeze
+
+        validates :type, inclusion: { in: TYPES }, unless: -> { type.nil? }
+        validate :validate_default_value, unless: -> { options.nil? || default_value.nil? }
+
+        def initialize(type, options, default_value, labels: nil, param: nil, name: nil)
+          super(type, options, Array.wrap(default_value), labels: labels, param: param, name: name)
+        end
+
+        def value_from_params(params)
+          params_value = super(params)
+
+          if params_value.is_a?(String)
+            params_value = params_value.split(',')
+            params_value = params_value.map(&:to_sym) if symbol_values
+          end
+          params_value
+        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 symbol_values
+          @symbol_values ||= default_value.first.is_a?(Symbol)
+        end
+
+        def validate_default_value
+          errors.add(:default_value, :inclusion) unless default_value.to_set <= options.to_set
+        end
+      end
+    end
+  end
+end

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

@@ -13,7 +13,9 @@ module ViewComponent
           if params_value.is_a?(String)
             parsed_json = JSON.parse(params_value)
             if parsed_json.is_a?(Array)
-              parsed_json.map(&:deep_symbolize_keys)
+              parsed_json.map do |item|
+                item.is_a?(Hash) ? item.deep_symbolize_keys : item
+              end
             else
               parsed_json.deep_symbolize_keys
             end

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

@@ -3,33 +3,11 @@
 module ViewComponent
   module Storybook
     module Controls
-      class OptionsConfig < SimpleControlConfig
-        class << self
-          # support the options being a Hash or an Array. Storybook supports either.
-          def inclusion_in(config)
-            case config.options
-            when Hash
-              config.options.values
-            when Array
-              config.options
-            end
-          end
-        end
-
-        TYPES = %i[select multi-select radio inline-radio check inline-check].freeze
+      class OptionsConfig < BaseOptionsConfig
+        TYPES = %i[select radio inline-radio].freeze
 
-        attr_reader :type, :options, :symbol_value
-
-        validates :type, :options, presence: true
         validates :type, inclusion: { in: TYPES }, unless: -> { type.nil? }
-        validates :default_value, inclusion: { in: method(:inclusion_in) }, unless: -> { options.nil? || default_value.nil? }
-
-        def initialize(type, options, default_value, param: nil, name: nil)
-          super(default_value, param: param, name: name)
-          @type = type
-          @options = options
-          @symbol_value = default_value.is_a?(Symbol)
-        end
+        validates :default_value, inclusion: { in: ->(config) { config.options } }, unless: -> { options.nil? || default_value.nil? }
 
         def value_from_params(params)
           params_value = super(params)
@@ -40,10 +18,18 @@ module ViewComponent
           end
         end
 
+        def to_csf_params
+          super.deep_merge(argTypes: { param => { options: options } })
+        end
+
         private
 
         def csf_control_params
-          super.merge(options: options)
+          labels.nil? ? super : super.merge(labels: labels)
+        end
+
+        def symbol_value
+          @symbol_value ||= default_value.is_a?(Symbol)
         end
       end
     end

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

@@ -23,7 +23,7 @@ module ViewComponent
         end
 
         def value_from_params(params)
-          params[param]
+          params.key?(param) ? params[param] : default_value
         end
 
         private

data/lib/view_component/storybook/controls.rb

@@ -13,11 +13,13 @@ module ViewComponent
       autoload :BooleanConfig
       autoload :ColorConfig
       autoload :NumberConfig
+      autoload :BaseOptionsConfig
       autoload :OptionsConfig
-      autoload :ArrayConfig
+      autoload :MultiOptionsConfig
       autoload :DateConfig
       autoload :ObjectConfig
       autoload :CustomConfig
+      autoload :ControlsHelpers
     end
   end
 end

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

@@ -56,8 +56,8 @@ module ViewComponent
           controls << Controls::OptionsConfig.new(:'inline-check', options, value, param: param, name: name)
         end
 
-        def array(param, value, separator = ",", name: nil)
-          controls << Controls::ArrayConfig.new(value, separator, param: param, name: name)
+        def array(param, value, _separator = nil, name: nil)
+          controls << Controls::ObjectConfig.new(value, param: param, name: name)
         end
 
         def date(param, value, name: nil)

data/lib/view_component/storybook/dsl.rb

@@ -7,8 +7,6 @@ module ViewComponent
     module Dsl
       extend ActiveSupport::Autoload
 
-      autoload :StoryDsl
-      autoload :ControlsDsl
       autoload :LegacyControlsDsl
     end
   end

data/lib/view_component/storybook/engine.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "rails"
-require "view_component/storybook"
 
 module ViewComponent
   module Storybook
@@ -12,6 +11,7 @@ module ViewComponent
         options = app.config.view_component_storybook
 
         options.show_stories = Rails.env.development? if options.show_stories.nil?
+        options.stories_route ||= "/rails/stories"
 
         if options.show_stories
           options.stories_path ||= defined?(Rails.root) ? Rails.root.join("test/components/stories") : nil
@@ -33,7 +33,7 @@ module ViewComponent
 
         if options.show_stories
           app.routes.prepend do
-            get "/rails/stories/*stories/:story" => "view_component/storybook/stories#show", :internal => true
+            get "#{options.stories_route}/*stories/:story" => "view_component/storybook/stories#show", :internal => true
           end
         end
       end
@@ -44,3 +44,14 @@ module ViewComponent
     end
   end
 end
+
+# :nocov:
+unless defined?(ViewComponent::Storybook::Stories)
+  ActiveSupport::Deprecation.warn(
+    "This manually engine loading is deprecated and will be removed in v1.0.0. " \
+    "Remove `require \"view_component/storybook/engine\"`."
+  )
+
+  require "view_component/storybook"
+end
+# :nocov:

data/lib/view_component/storybook/method_args/component_constructor_args.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module MethodArgs
+      ##
+      # Class representing the constructor args for a Component
+      class ComponentConstructorArgs < ControlMethodArgs
+        def self.from_component_class(component_class, *args, **kwargs)
+          if DryInitializerComponentConstructorArgs.dry_initialize?(component_class)
+            DryInitializerComponentConstructorArgs.new(component_class, *args, **kwargs)
+          else
+            new(component_class, *args, **kwargs)
+          end
+        end
+
+        def initialize(component_class, *args, **kwargs)
+          super(component_class.instance_method(:initialize), *args, **kwargs)
+        end
+      end
+    end
+  end
+end