lookbook_storybook_json_generator 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4706ac0d61b2baa9bc6489c25928ed6a0ac54a6aa7563bf80503ad98816132e3
-  data.tar.gz: aa9934bf2431c4841044b503359e9cc2da0a8ec0f378fb1de5741da44dfd9f74
+  metadata.gz: 521bdf4ded7b02c6d834456c0fd254fc85fcd9f899728e8c9fd7a5e8986ed378
+  data.tar.gz: c3ab604a9e1190749df573a90792df5732a1fc6f28d251c040db9521bf114922
 SHA512:
-  metadata.gz: 3c5853c5ace1a5150db8a08b2480a2146ed3a58edc1ff22b87060e9c626874476e4671b8fa40d5263c8e73114dc7ee931e299b9f3c84119f25c8c24c9ca8bc58
-  data.tar.gz: ce6935361b6979972f5e96ee33c626802f1f58443d6c87cfdacbaaa8368b8e632468ecac92173a334c30e3a3f622c3ee727fee8acc935df26404d8200ab0e868
+  metadata.gz: ad3fedd7af02b633e271ddcc655a1050cbeb5d4ce1740622066afc923de8531089efae5717bb3e861264efdbd4f46b8e205cf8638fbb3d7950cce3b9cd1f07dc
+  data.tar.gz: 07bd22663bb68468b7b95b6da909fb1566feedc6c7373bc25a4720f691f44d5c1483f79a7294c79666f3be4c721890449ce4b92a97f6b1b07f74a156d2dfb850

data/README.md

@@ -3,6 +3,8 @@
 This is a gem that allows you to use lookbook with storybook.
 It outputs JSON that can be used with storybook.
 
+https://github.com/forgxisto/lookbook_storybook_json_generator/assets/1164914/08be7939-6882-43cd-9d60-4e4369d007ed
+
 ## Installation
 
 Install the gem and add to the application's Gemfile by executing:
@@ -15,13 +17,72 @@ If bundler is not being used to manage dependencies, install the gem by executin
 
 ## Usage
 
-TODO: Write usage instructions here
+This gem depends on lookbook.
+No special settings are required.
+
+Create `_preview.stories.json` in the same directory as `_preview.rb` written according to the lookbook rules.
+
+This JSON is created when the lookbook loads `_preview.rb`.
+
+### example
+
+0.  You may want to refer to `dummy_app` in this repository.
+
+1.  First, write the following in Gemfile and complete the lookbook settings.
+
+    ```
+    gem 'lookbook'
+    gem 'lookbook_storybook_json_generator'
+    ```
+
+    Please refer to the official website for the lookbook.
+    https://lookbook.build/
+
+2.  Create `_preview.rb` according to the lookbook description rules.
+
+    By default, it is created under the `test/components/previews/` directory.
+
+3.  Start Rails.
+
+    At this point, the lookbook preview file is read and a JSON file is created in the same directory.
+
+4.  Install Storybook.
+
+    Please refer to the official website for Storybook.
+    https://storybook.js.org/
+
+5.  To reference the JSON created with this gem in Storybook, use `@storybook/server-webpack5
+Add `.
+
+    ```
+    npm install @storybook/server-webpack5
+    ```
+
+6.  Set up `.storybook/main.js` and `.storybook/preview.js`.
+
+    Again, `dummy_app/.storybook/` in this repository may be helpful.
+
+    See the repository README for details.
+    https://www.npmjs.com/package/@storybook/server-webpack5
+
+7.  Launch Storybook.
+
+    That's it! If all goes well, the preview created in lookbook will also be reflected in Storybook.
+
+    If you have any problems, please raise an issue in this repository.
 
 ## 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 the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+A small Rails app for development is included in this repository. (located in the `dummy_app` directory)
+
+We provide a shortcut command to start this little Rails app.
+
+- `bin/dummy_rails` ... start Rails
+- `bin/dummy_storybook` ... start Storybook
+
+If you use overmind, we provide a Procfile.
 
 ## Contributing
 

data/lib/lookbook_storybook_json_generator/lookbook_code_object_parser.rb

@@ -20,43 +20,37 @@ module LookbookStorybookJsonGenerator
 
     attr_reader :code_object
 
+    def preview_entity
+      @preview_entity ||= Lookbook::PreviewEntity.new(code_object)
+    end
+
     def title
-      if code_object.namespace.root?
-        code_object.name.to_s.underscore.gsub(/_preview$/, '')
-      else
-        code_object.namespace.title.gsub(code_object.namespace.sep, '/')
-      end
+      preview_entity.lookup_path.titleize
     end
 
     def stories
-      code_object.meths.map { story(_1) }
+      preview_entity.scenarios.map { story(_1) }
     end
 
-    def story(meth)
+    def story(scenario_entity)
       {
-        name: meth.name,
-        parameters: parameters(meth),
-        args: args(meth),
-        argTypes: arg_types(meth)
+        name: scenario_entity.name,
+        parameters: parameters(scenario_entity),
+        args: args(scenario_entity),
+        argTypes: arg_types(scenario_entity)
       }
     end
 
-    def parameters(meth)
-      { server: { id: "#{title.underscore}/#{meth.name}" } }
+    def parameters(scenario_entity)
+      { server: { id: scenario_entity.lookup_path } }
     end
 
-    def args(meth)
-      meth.parameters.each_with_object({}) do |(k, v), a|
-        key = k.delete(':').to_sym
-        # 値から引用符を削除し、シンボルがあれば文字列に変換
-        val = v.gsub(/'|"/, '').then { _1.start_with?(':') ? _1[1..] : _1 }
-
-        a[key] = val
-      end
+    def args(scenario_entity)
+      scenario_entity.tags.to_h { [_1.name, _1.value_default] }
     end
 
-    def arg_types(meth)
-      meth.tags.each_with_object({}) do |e, a|
+    def arg_types(scenario_entity)
+      scenario_entity.tags.each_with_object({}) do |e, a|
         a[e.name] = {
           control: { type: control_type(e.tag_args[:input]) },
           name: e.name.camelcase,
@@ -69,8 +63,8 @@ module LookbookStorybookJsonGenerator
       case input
       when 'toggle'
         'boolean'
-      when 'number'
-        'number'
+      when 'number', 'select', 'color', 'range'
+        input
       else
         'text'
       end

data/lib/lookbook_storybook_json_generator/storybook_json_generator.rb

@@ -3,14 +3,35 @@
 module LookbookStorybookJsonGenerator
   # lookbook のコードオブジェクトを storybook の json として出力する
   class StorybookJsonGenerator
-    def self.execute(code_objects, _args)
-      code_objects.each do |code_object|
-        # code_object と同じ場所にファイルを作成する
-        # ただし、ファイル名は .stories.json とする
-        file_name = code_object.file.to_s.gsub('.rb', '.stories.json')
-        json = LookbookStorybookJsonGenerator::LookbookCodeObjectParser.new(code_object).to_json
-        File.open(file_name, 'w') { _1.puts json }
-      end
+    def self.execute(code_objects, changes = nil)
+      new(code_objects, changes).execute
+    rescue => e
+      Rails.loggoer.warn "LookbookStorybookJsonGenerator #{e.message}"
+    end
+
+    def initialize(code_objects, changes)
+      @code_objects = code_objects
+      @changes = changes
+    end
+
+    def execute
+      generate_all
+    end
+
+    private
+
+    attr_reader :code_objects, :changes
+
+    def generate_all
+      code_objects.each { generate_json(_1) }
+    end
+
+    # code_object と同じ場所にファイルを作成する
+    # ただし、ファイル名は .stories.json とする
+    def generate_json(code_object)
+      file_name = code_object.file.to_s.gsub('.rb', '.stories.json')
+      json = LookbookStorybookJsonGenerator::LookbookCodeObjectParser.new(code_object).to_json
+      File.open(file_name, 'w') { _1.puts json }
     end
   end
 end

data/lib/lookbook_storybook_json_generator/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module LookbookStorybookJsonGenerator
-  VERSION = '0.2.0'
+  VERSION = '0.4.0'
 end

data/lookbook_storybook_json_generator.gemspec

@@ -21,7 +21,7 @@ Gem::Specification.new do |spec|
   spec.files = Dir.chdir(__dir__) do
     `git ls-files -z`.split("\x0").reject do |f|
       (File.expand_path(f) == __FILE__) ||
-        f.start_with?(*%w[bin/ test/ spec/ features/ .git .circleci appveyor Gemfile dummy_app/])
+        f.start_with?(*%w[bin/ test/ spec/ features/ .git .circleci appveyor Gemfile dummy_app/ Procfile])
     end
   end
   spec.bindir = 'exe'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lookbook_storybook_json_generator
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.4.0
 platform: ruby
 authors:
 - ikad
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-01-16 00:00:00.000000000 Z
+date: 2024-01-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: lookbook