From 947bdf2cae67af42ef16362f41a4d83e9c6cf652 Mon Sep 17 00:00:00 2001
From: James Herdman <james.herdman@gmail.com>
Date: Sat, 16 Mar 2024 14:17:07 -0400
Subject: [PATCH] doc: Update Getting Started

---
 docs/guide/getting-started.md | 58 +++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index a9f1aa2..ca7c497 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -14,6 +14,7 @@ nav_order: 1
 1. In `Gemfile`, add:
    ```ruby
    gem "view_component-storybook"
+   gem "rack-cors"
    ```
 2. In`.gitignore`, add:
    ```text
@@ -24,39 +25,50 @@ nav_order: 1
 
 1. Add Storybook Server as a dev dependency. 
    ```console
-   yarn add @storybook/server @storybook/addon-controls --dev
+   npx storybook@latest init
    ```
-  Storybook Controls addon isn't required but is strongly recommended.
 
-2. Add an NPM script to start Storybook. In `package.json`, add:
+2. Select the "Server" option
 
-   ```json
-   {
-     "scripts": {
-       "storybook": "start-storybook"
-     }
-   }
-   ```
-
-3. Configure Storybook to find the json stories that the gem creates. Create `.storybook/main.js`,
+3. Configure Storybook with the Rails application url to call for the html content of the stories.
+   Update `.storybook/preview.js`
 
    ```javascript
-   module.exports = {
-     stories: ["../test/components/**/*.stories.json"],
-     addons: ["@storybook/addon-controls"],
+   /** @type { import('@storybook/server').Preview } */
+   const preview = {
+     parameters: {
+       /** Add the following... */
+       server: {
+         url: `http://localhost:3000/rails/view_components`,
+       },
+     },
    };
+
+   export default preview;
    ```
 
-4. Configure Storybook with the Rails application url to call for the html content of the stories. Create `.storybook/preview.js`
+4. Allow CORS requests from Storybook:
 
-   ```javascript
-   export const parameters = {
-     server: {
-       url: `http://localhost:3000/rails/view_components`,
-     },
-   };
-   ```
+   ```ruby
+   # config/initializers/cors.rb
+
+   # frozen_string_literal: true
 
+   return unless Rails.env.local?
+
+   Rails.application.config.middleware.insert_before 0, Rack::Cors do
+     allow do
+       # YOUR STORYBOOK SERVER URL HERE
+       origins 'http://localhost:6006', 'http://127.0.0.1:6006'
+
+       resource '*',
+                headers: :any,
+                methods: %i[get post put patch delete options head],
+                credentials: true,
+                max_age: 86_400
+     end
+   end
+   ```
 
 ## Quick start