view_component_storybook 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 156bff92fe14404e71b45c20a0b989efaa70f0c1e01212c91f8db51a9b6399a4
-  data.tar.gz: fd5cc132d285d64bde3e742fcde2266cc4656ac67de921e54111d9d9ff0af93b
+  metadata.gz: 69b5a85793ed8d4ecfe45be21c90a95894f001403ea9a6c086c9822e5b4fca4d
+  data.tar.gz: 15b8f5b6430c46b5a3cd453602c4705dea94784b574f6d3a1a9b1ab39c40d1bb
 SHA512:
-  metadata.gz: 6dabe9bacc42870ad37ef82a8960ed926481a9e3b68bdf6e58c2f09ba89757ede25be1564c45efcdee99a814e5c69d0fda5d29a73573f67fb42587ea8a886a04
-  data.tar.gz: 78f94f84257b7b1ccebe85e38157bc37bc779c54cccee0909008d5e8d933f88934dabcb225fc9f2e45c4c108d2965cc0bdf2395e8b0b04d758c9afc18fb971d5
+  metadata.gz: '091149f57b05dc6bf82b1dac987ab6dbaaa6655e8c0833517eb575d8ce8abb05e75b8919a63799ad4efaa5da1722fbf5bee7f34c4680a12f969c6996532e53f7'
+  data.tar.gz: bf0f10bc68bc35197ca9485efbc3fe18bcad98b110df969f3219daeaeb4797f1c1e7c6eb4ce3aeb737246571227c91c466b4d7c63dd4ff141c0a3962b47caf29

data/README.md

@@ -4,7 +4,7 @@ The ViewComponent::Storybook gem provides Ruby api for writing stories describin
 
 ## Features
 * A Ruby DSL for writing Stories describing View Components
-* A Rails controller backend for Storybook Server compatible with most Strobook Knobs Addon parameters
+* 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
@@ -18,9 +18,9 @@ The ViewComponent::Storybook gem provides Ruby api for writing stories describin
 
 ### Storybook Installation
 
-1. Add Storybook server as a dev dependedncy. The Storybook Knobs addon isn't needed but is strongly recommended
+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-knobs --dev
+   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
@@ -30,28 +30,27 @@ The ViewComponent::Storybook gem provides Ruby api for writing stories describin
      }
    }
    ```    
-3. Create the .storybook/main.js file to configure Storybook to find the json stories the gem creates. Also configure the knobs addon:
+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-knobs',
+       '@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
-   import { addParameters } from '@storybook/server';
 
-   addParameters({
+   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 [alpha release](https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.32)
+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
 
@@ -74,13 +73,13 @@ We can write a stories desecibing the `ButtonComponent`
 ```ruby
 class ButtonComponentStories < ViewComponent::Storybook::Stories
   story(:with_short_text) do
-    knobs do
+    controls do
       text(:button_text, 'OK')
     end
   end
 
   story(:with_long_text) do
-    knobs do
+    controls do
       text(:button_text, 'Push Me Please!')
     end
   end
@@ -121,7 +120,7 @@ Coming Soon
 
 #### Parameters
 #### Layout
-#### Knobs
+#### Controls
 
 
 ## Development

data/lib/view_component/storybook.rb

@@ -8,7 +8,7 @@ module ViewComponent
   module Storybook
     extend ActiveSupport::Autoload
 
-    autoload :Knobs
+    autoload :Controls
     autoload :Stories
     autoload :StoryConfig
     autoload :Dsl

data/lib/view_component/storybook/{knobs.rb → controls.rb}

@@ -4,10 +4,10 @@ require "active_support/dependencies/autoload"
 
 module ViewComponent
   module Storybook
-    module Knobs
+    module Controls
       extend ActiveSupport::Autoload
 
-      autoload :KnobConfig
+      autoload :ControlConfig
       autoload :SimpleConfig
       autoload :NumberConfig
       autoload :OptionsConfig

data/lib/view_component/storybook/{knobs → controls}/array_config.rb

@@ -2,21 +2,17 @@
 
 module ViewComponent
   module Storybook
-    module Knobs
-      class ArrayConfig < KnobConfig
+    module Controls
+      class ArrayConfig < ControlConfig
         attr_reader :separator
 
         validates :value, :separator, presence: true
 
-        def initialize(component, param, value, separator = ",", name: nil, group_id: nil)
-          super(component, param, value, name: name, group_id: group_id)
+        def initialize(component, param, value, separator = ",", name: nil)
+          super(component, param, value, name: name)
           @separator = separator
         end
 
-        def to_csf_params
-          super.merge(value: value, separator: separator)
-        end
-
         def type
           :array
         end
@@ -28,6 +24,12 @@ module ViewComponent
             super(param)
           end
         end
+
+        private
+
+        def csf_control_params
+          super.merge(separator: separator)
+        end
       end
     end
   end

data/lib/view_component/storybook/{knobs/knob_config.rb → controls/control_config.rb}

@@ -2,28 +2,28 @@
 
 module ViewComponent
   module Storybook
-    module Knobs
-      class KnobConfig
+    module Controls
+      class ControlConfig
         include ActiveModel::Validations
 
-        attr_reader :component, :param, :value, :name, :group_id
+        attr_reader :component, :param, :value, :name
 
         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, group_id: nil)
+        def initialize(component, param, value, name: nil)
           @component = component
           @param = param
           @value = value
           @name = name || param.to_s.humanize.titlecase
-          @group_id = group_id
         end
 
         def to_csf_params
           validate!
-          params = { type: type, param: param, name: name, value: value }
-          params[:group_id] = group_id if group_id
-          params
+          {
+            args: { param => csf_value },
+            argTypes: { param => { control: csf_control_params, name: name } }
+          }
         end
 
         def value_from_param(param)
@@ -33,6 +33,17 @@ module ViewComponent
         def component_params
           @component_params ||= component && component.instance_method(:initialize).parameters.map(&:last)
         end
+
+        private
+
+        # provide extension points for subclasses to vary the value
+        def csf_value
+          value
+        end
+
+        def csf_control_params
+          { type: type }
+        end
       end
     end
   end

data/lib/view_component/storybook/{knobs → controls}/date_config.rb

@@ -2,21 +2,12 @@
 
 module ViewComponent
   module Storybook
-    module Knobs
-      class DateConfig < KnobConfig
+    module Controls
+      class DateConfig < ControlConfig
         validates :value, presence: true
 
-        def initialize(component, param, value, name: nil, group_id: nil)
-          super(component, param, value, name: name, group_id: group_id)
-        end
-
-        def to_csf_params
-          csf_params = super
-          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)
-          csf_params[:value] = params_value
-          csf_params
+        def initialize(component, param, value, name: nil)
+          super(component, param, value, name: name)
         end
 
         def type
@@ -30,6 +21,15 @@ module ViewComponent
             super(param)
           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
+        end
       end
     end
   end

data/lib/view_component/storybook/{knobs → controls}/number_config.rb

@@ -2,14 +2,14 @@
 
 module ViewComponent
   module Storybook
-    module Knobs
-      class NumberConfig < KnobConfig
+    module Controls
+      class NumberConfig < ControlConfig
         attr_reader :options
 
         validates :value, presence: true
 
-        def initialize(component, param, value, options = {}, name: nil, group_id: nil)
-          super(component, param, value, name: name, group_id: group_id)
+        def initialize(component, param, value, options = {}, name: nil)
+          super(component, param, value, name: name)
           @options = options
         end
 
@@ -17,12 +17,6 @@ module ViewComponent
           :number
         end
 
-        def to_csf_params
-          params = super
-          params[:options] = options unless options.empty?
-          params
-        end
-
         def value_from_param(param)
           if param.is_a?(String) && param.present?
             (param.to_f % 1) > 0 ? param.to_f : param.to_i
@@ -30,6 +24,14 @@ module ViewComponent
             super(param)
           end
         end
+
+        private
+
+        def csf_control_params
+          params = super
+          params[:options] = options unless options.empty?
+          params
+        end
       end
     end
   end

data/lib/view_component/storybook/{knobs → controls}/object_config.rb

@@ -2,8 +2,8 @@
 
 module ViewComponent
   module Storybook
-    module Knobs
-      class ObjectConfig < KnobConfig
+    module Controls
+      class ObjectConfig < ControlConfig
         validates :value, presence: true
 
         def type

data/lib/view_component/storybook/{knobs → controls}/options_config.rb

@@ -2,8 +2,8 @@
 
 module ViewComponent
   module Storybook
-    module Knobs
-      class OptionsConfig < KnobConfig
+    module Controls
+      class OptionsConfig < ControlConfig
         TYPES = %i[select radios].freeze
 
         attr_reader :type, :options
@@ -12,13 +12,15 @@ module ViewComponent
         validates :type, inclusion: { in: TYPES }, unless: -> { type.nil? }
         validates :value, inclusion: { in: ->(config) { config.options.values } }, unless: -> { options.nil? || value.nil? }
 
-        def initialize(type, component, param, options, default_value, name: nil, group_id: nil)
-          super(component, param, default_value, name: name, group_id: group_id)
+        def initialize(type, component, param, options, default_value, name: nil)
+          super(component, param, default_value, name: name)
           @type = type
           @options = options
         end
 
-        def to_csf_params
+        private
+
+        def csf_control_params
           super.merge(options: options)
         end
       end

data/lib/view_component/storybook/{knobs → controls}/simple_config.rb

@@ -2,8 +2,8 @@
 
 module ViewComponent
   module Storybook
-    module Knobs
-      class SimpleConfig < KnobConfig
+    module Controls
+      class SimpleConfig < ControlConfig
         TYPES = %i[text boolean color].freeze
         BOOLEAN_VALUES = [true, false].freeze
 
@@ -15,8 +15,8 @@ module ViewComponent
         validates :type, presence: true
         validates :type, inclusion: { in: TYPES }, unless: -> { type.nil? }
 
-        def initialize(type, component, param, value, name: nil, group_id: nil)
-          super(component, param, value, name: name, group_id: group_id)
+        def initialize(type, component, param, value, name: nil)
+          super(component, param, value, name: name)
           @type = type
         end
 

data/lib/view_component/storybook/dsl.rb

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

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

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Storybook
+    module Dsl
+      class ControlsDsl
+        attr_reader :component, :controls
+
+        def initialize(component)
+          @component = component
+          @controls = []
+        end
+
+        def text(param, value, name: nil)
+          controls << Controls::SimpleConfig.new(:text, component, param, value, name: name)
+        end
+
+        def boolean(param, value, name: nil)
+          controls << Controls::SimpleConfig.new(:boolean, component, param, value, name: name)
+        end
+
+        def number(param, value, options = {}, name: nil)
+          controls << Controls::NumberConfig.new(component, param, value, options, name: name)
+        end
+
+        def color(param, value, name: nil)
+          controls << Controls::SimpleConfig.new(:color, component, param, value, name: name)
+        end
+
+        def object(param, value, name: nil)
+          controls << Controls::ObjectConfig.new(component, param, value, name: name)
+        end
+
+        def select(param, options, value, name: nil)
+          controls << Controls::OptionsConfig.new(:select, component, param, options, value, name: name)
+        end
+
+        def radios(param, options, value, name: nil)
+          controls << Controls::OptionsConfig.new(:radios, component, param, options, value, name: name)
+        end
+
+        def array(param, value, separator = ",", name: nil)
+          controls << Controls::ArrayConfig.new(component, param, value, separator, name: name)
+        end
+
+        def date(param, value, name: nil)
+          controls << Controls::DateConfig.new(component, param, value, name: name)
+        end
+
+        def respond_to_missing?(_method)
+          true
+        end
+
+        def method_missing(method, *args)
+          value = args.first
+          knob_method = case value
+                        when Date
+                          :date
+                        when Array
+                          :array
+                        when Hash
+                          :object
+                        when Numeric
+                          :number
+                        when TrueClass, FalseClass
+                          :boolean
+                        when String
+                          :text
+                        end
+          if knob_method
+            send(knob_method, method, *args)
+          else
+            super
+          end
+        end
+
+        Controls = ViewComponent::Storybook::Controls
+      end
+    end
+  end
+end

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

@@ -12,10 +12,10 @@ module ViewComponent
           @story_config.parameters = params
         end
 
-        def knobs(&block)
-          knobs_dsl = KnobsDsl.new(story_config.component)
-          knobs_dsl.instance_eval(&block)
-          @story_config.knobs = knobs_dsl.knobs
+        def controls(&block)
+          controls_dsl = ControlsDsl.new(story_config.component)
+          controls_dsl.instance_eval(&block)
+          @story_config.controls = controls_dsl.controls
         end
 
         def layout(layout)

data/lib/view_component/storybook/stories.rb

@@ -26,10 +26,7 @@ module ViewComponent
         end
 
         def to_csf_params
-          stories_csf = story_configs.map(&:to_csf_params)
-
           csf_params = { title: title }
-          csf_params[:addons] = ["knobs"] if stories_csf.any? { |csf| csf.key?(:knobs) }
           csf_params[:parameters] = parameters if parameters.present?
           csf_params[:stories] = story_configs.map(&:to_csf_params)
           csf_params

data/lib/view_component/storybook/story_config.rb

@@ -6,28 +6,30 @@ module ViewComponent
       include ActiveModel::Validations
 
       attr_reader :id, :name, :component
-      attr_accessor :knobs, :parameters, :layout, :content_block
+      attr_accessor :controls, :parameters, :layout, :content_block
 
       def initialize(id, name, component, layout)
         @id = id
         @name = name
         @component = component
         @layout = layout
-        @knobs = []
+        @controls = []
       end
 
       def to_csf_params
         csf_params = { name: name, parameters: { server: { id: id } } }
         csf_params.deep_merge!(parameters: parameters) if parameters.present?
-        csf_params[:knobs] = knobs.map(&:to_csf_params) if knobs.present?
+        controls.each do |control|
+          csf_params.deep_merge!(control.to_csf_params)
+        end
         csf_params
       end
 
       def values_from_params(params)
-        knobs.map do |knob|
-          value = knob.value_from_param(params[knob.param])
-          value = knob.value if value.nil? # nil only not falsey
-          [knob.param, value]
+        controls.map do |control|
+          value = control.value_from_param(params[control.param])
+          value = control.value if value.nil? # nil only not falsey
+          [control.param, value]
         end.to_h
       end
 

data/lib/view_component/storybook/version.rb

@@ -2,6 +2,6 @@
 
 module ViewComponent
   module Storybook
-    VERSION = "0.2.0"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: view_component_storybook
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Jon Palmer
@@ -162,18 +162,18 @@ files:
 - app/controllers/view_component/storybook/stories_controller.rb
 - app/views/view_component/storybook/stories/show.html.erb
 - lib/view_component/storybook.rb
+- lib/view_component/storybook/controls.rb
+- lib/view_component/storybook/controls/array_config.rb
+- lib/view_component/storybook/controls/control_config.rb
+- lib/view_component/storybook/controls/date_config.rb
+- lib/view_component/storybook/controls/number_config.rb
+- lib/view_component/storybook/controls/object_config.rb
+- lib/view_component/storybook/controls/options_config.rb
+- lib/view_component/storybook/controls/simple_config.rb
 - lib/view_component/storybook/dsl.rb
-- lib/view_component/storybook/dsl/knobs_dsl.rb
+- lib/view_component/storybook/dsl/controls_dsl.rb
 - lib/view_component/storybook/dsl/story_dsl.rb
 - lib/view_component/storybook/engine.rb
-- lib/view_component/storybook/knobs.rb
-- lib/view_component/storybook/knobs/array_config.rb
-- lib/view_component/storybook/knobs/date_config.rb
-- lib/view_component/storybook/knobs/knob_config.rb
-- lib/view_component/storybook/knobs/number_config.rb
-- lib/view_component/storybook/knobs/object_config.rb
-- lib/view_component/storybook/knobs/options_config.rb
-- lib/view_component/storybook/knobs/simple_config.rb
 - lib/view_component/storybook/stories.rb
 - lib/view_component/storybook/story_config.rb
 - lib/view_component/storybook/tasks/write_stories_json.rake

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

@@ -1,81 +0,0 @@
-# frozen_string_literal: true
-
-module ViewComponent
-  module Storybook
-    module Dsl
-      class KnobsDsl
-        attr_reader :component, :knobs
-
-        def initialize(component)
-          @component = component
-          @knobs = []
-        end
-
-        def text(param, value, group_id: nil, name: nil)
-          knobs << Knobs::SimpleConfig.new(:text, component, param, value, group_id: group_id, name: name)
-        end
-
-        def boolean(param, value, group_id: nil, name: nil)
-          knobs << Knobs::SimpleConfig.new(:boolean, component, param, value, group_id: group_id, name: name)
-        end
-
-        def number(param, value, options = {}, group_id: nil, name: nil)
-          knobs << Knobs::NumberConfig.new(component, param, value, options, group_id: group_id, name: name)
-        end
-
-        def color(param, value, group_id: nil, name: nil)
-          knobs << Knobs::SimpleConfig.new(:color, component, param, value, group_id: group_id, name: name)
-        end
-
-        def object(param, value, group_id: nil, name: nil)
-          knobs << Knobs::ObjectConfig.new(component, param, value, group_id: group_id, name: name)
-        end
-
-        def select(param, options, value, group_id: nil, name: nil)
-          knobs << Knobs::OptionsConfig.new(:select, component, param, options, value, group_id: group_id, name: name)
-        end
-
-        def radios(param, options, value, group_id: nil, name: nil)
-          knobs << Knobs::OptionsConfig.new(:radios, component, param, options, value, group_id: group_id, name: name)
-        end
-
-        def array(param, value, separator = ",", group_id: nil, name: nil)
-          knobs << Knobs::ArrayConfig.new(component, param, value, separator, group_id: group_id, name: name)
-        end
-
-        def date(param, value, group_id: nil, name: nil)
-          knobs << Knobs::DateConfig.new(component, param, value, group_id: group_id, name: name)
-        end
-
-        def respond_to_missing?(_method)
-          true
-        end
-
-        def method_missing(method, *args)
-          value = args.first
-          knob_method = case value
-                        when Date
-                          :date
-                        when Array
-                          :array
-                        when Hash
-                          :object
-                        when Numeric
-                          :number
-                        when TrueClass, FalseClass
-                          :boolean
-                        when String
-                          :text
-                        end
-          if knob_method
-            send(knob_method, method, *args)
-          else
-            super
-          end
-        end
-
-        Knobs = ViewComponent::Storybook::Knobs
-      end
-    end
-  end
-end