view_component_storybook 0.9.0 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f8ab883711eb6c712fcb3f654fdcb80586091f6da753e311f2609347d600391e
-  data.tar.gz: 65ba53ff31930882f7c2a30492e5444ed438be268cfbb24291160ff38f712964
+  metadata.gz: 71e48c5a57bcaf3c754570c01203b0953e0a93ae6a88bfaa62c7db065535e112
+  data.tar.gz: ae5ab22539296310681f81b6efe156bda605c5472c41f2f5f803676664df71c2
 SHA512:
-  metadata.gz: 24bf672f2214344c1d5b9e1af7bbe8ef51ddb8ba6065eca4b12b14e0c8b73f69381168b39d3f4339e953a086ec11d69f716f3fce7dfb8acd7efaabd3678cb578
-  data.tar.gz: 0df0d064cccf1ed1d625ba1d9cb439d8c3fb65f56a7671e3d65650dc85604ea89990e578ca4550863388d7cfc201b7cd33b7add24f294deb6646b1753062c03a
+  metadata.gz: e4ac764fd6a7fc4f4d10e2693f05056ef2441ab564d48411a30eea93dd5b843e947e8470b3743c4124ad41d9eff33b1fc2830debcd8e9dbbd12002d9ff5590e7
+  data.tar.gz: 77f2e1d325cb1c1ca4cf2e7ef2ab35ebb7230559d959f5385a95cc40f8bf3496f98e2ef715fea3a50fda3413755d1e18349df81e6510ac3de544bd47354a3ef7

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

@@ -10,9 +10,11 @@ module ViewComponent
     autoload :Controls
     autoload :Stories
     autoload :StoryConfig
-    autoload :ControlMethodArgs
-    autoload :Dsl
+    autoload :Story
+    autoload :Slots
+    autoload :ContentConcern
     autoload :MethodArgs
+    autoload :Dsl
 
     include ActiveSupport::Configurable
     # Set the location of component previews through app configuration:
@@ -29,6 +31,16 @@ module ViewComponent
     #
     mattr_accessor :show_stories, instance_writer: false
 
+    # Set the entry route for component stories:
+    #
+    #     config.view_component_storybook.stories_route = "/stories"
+    #
+    # Defaults to `/rails/stories` when `show_stories` is enabled.
+    #
+    mattr_accessor :stories_route, instance_writer: false do
+      "/rails/stories"
+    end
+
     ActiveSupport.run_load_hooks(:view_component_storybook, self)
   end
 end

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