Add storybook

- Via `view_component_storybook` : https://github.com/jonspalmer/view_component_storybook
 - Configure both `view_component_storybook` and `storybook`
 - Add two addons: `@storybook/addon-docs` and `@storybook/addon-controls`
Update config comment for clarity

.gitignore

@@ -47,3 +47,4 @@ coverage
 /reports/
 !/reports/README.md
 bin/
+/spec/components/stories/**/*.stories.json

.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  stories: ['../spec/components/stories/**/*.stories.json'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+  ],
+};

.storybook/preview.js

@@ -0,0 +1,5 @@
+export const parameters = {
+  server: {
+    url: `http://localhost:3000/rails/stories`,
+  },
+};

Gemfile

@@ -166,6 +166,8 @@ group :development do
   gem 'spring'
   gem 'spring-commands-rspec'
 
+  gem "view_component_storybook", require: "view_component/storybook/engine"
+
   # 1.0.9 fixed openssl issues on macOS https://github.com/eventmachine/eventmachine/issues/602
   # While we don't require this gem directly, no dependents forced the upgrade to a version
   # greater than 1.0.9, so we just required the latest available version here.

Gemfile.lock

@@ -584,6 +584,8 @@ GEM
     uniform_notifier (1.14.1)
     view_component (2.28.0)
       activesupport (>= 5.0.0, < 7.0)
+    view_component_storybook (0.8.0)
+      view_component (>= 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     webdrivers (4.6.0)
@@ -725,6 +727,7 @@ DEPENDENCIES
   unicorn-rails
   unicorn-worker-killer
   view_component
+  view_component_storybook
   web!
   webdrivers
   webmock

config/environments/development.rb

@@ -64,4 +64,6 @@ Openfoodnetwork::Application.configure do
   config.action_mailer.default_url_options = { host: "0.0.0.0:3000" }
 
   config.log_level = :debug
+
+  config.view_component_storybook.stories_path = Rails.root.join("spec/components/stories")
 end

package.json

@@ -5,7 +5,13 @@
     "type": "git",
     "url": "https://github.com/openfoodfoundation/openfoodnetwork"
   },
+  "scripts": {
+    "storybook": "start-storybook"
+  },
   "devDependencies": {
+    "@storybook/addon-controls": "^6.2.7",
+    "@storybook/addon-docs": "^6.2.7",
+    "@storybook/server": "^6.2.7",
     "jasmine-core": "~2.4.1",
     "karma": "~6.3.2",
     "karma-chrome-launcher": "~3.1.0",