view_component_storybook 0.6.0 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc377c2ee4e53057d77622560164f181fcaca50a95e4fcfc53ad78a3cb10a2ba
-  data.tar.gz: b1137074ecbb7b5d44c38475774d06400b936f427dfec1bd1602fe4edb1696d7
+  metadata.gz: b6ef1bcb6cf8fd3beccec9242854aa913bd31fe1c7c44c44cdde6b59be8fd67f
+  data.tar.gz: de047bb6e4e453db106270ba7f28b4d252fed881816266e10b99bb8c2d4b93f0
 SHA512:
-  metadata.gz: c8bbafc19737e00f631c0099affc6c616e327c4bfc60e9426fb74e55550701d915131f15d5d00d780dd3b6374c940edd17feebe24774c91e48db84accd46930d
-  data.tar.gz: 2d992393f87285d057bedaffd9be722cd8d147a38f543b2a1afdb9c92d73e6ce26546744941826cd91517c2d1f30e27f782d8090e07d420343241c1a5bb20c8d
+  metadata.gz: 4d96299b59366d1f50d034399299209a7edc01aa99f3ff728b0e6ed1721b1f80679aa8f7bbb953be549baa59fd74d090eb8d5b7e615bdc7b26164ebb0f011373
+  data.tar.gz: d97204b485ac6d1b61c7848e6c2b68cec798328eef7e78738f3f675daa805dc6db73a0e6d1e6e7f17373de4b5ca90cfe000716bb4b25f29f8ae77d9985f0580e

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

@@ -10,6 +10,10 @@ module ViewComponent
     autoload :Controls
     autoload :Stories
     autoload :StoryConfig
+    autoload :Story
+    autoload :Slots
+    autoload :ContentConcern
+    autoload :MethodArgs
     autoload :Dsl
 
     include ActiveSupport::Configurable
@@ -27,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

@@ -8,14 +8,18 @@ module ViewComponent
       extend ActiveSupport::Autoload
 
       autoload :ControlConfig
+      autoload :SimpleControlConfig
       autoload :TextConfig
       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/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 }
+        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,12 +3,11 @@
 module ViewComponent
   module Storybook
     module Controls
-      class ColorConfig < ControlConfig
+      class ColorConfig < SimpleControlConfig
         attr_reader :preset_colors
-        validates :value, presence: true
 
-        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
 
@@ -19,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