From 9781c54d8932b4e33c480edeba112a0e36c60929 Mon Sep 17 00:00:00 2001
From: Bonn <pittawat@amity.co>
Date: Tue, 23 Apr 2024 20:53:56 +0700
Subject: [PATCH] fix: update storybook section

---
 README.md | 39 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index bb5487ed..cfa942a1 100644
--- a/README.md
+++ b/README.md
@@ -17,13 +17,42 @@ Ref: https://pnpm.io/installation#using-corepack
 
 ## Running Storybook (Optional)
 
-To run Storybook and view the UI components in isolation, use the following command:
+To run Storybook and view the UI components in isolation, follow these steps:
 
-```
-pnpm run storybook
-```
+1. Clone the Amity UI-Kit repository:
+
+   ```
+   git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
+   ```
+
+2. Navigate to the cloned repository's directory:
+
+   ```
+   cd Amity-Social-Cloud-UIKit-Web-OpenSource
+   ```
+
+3. Install the dependencies using pnpm:
+
+   ```
+   pnpm install
+   ```
+
+4. Create a `.env` file at the root of the project with the following content:
+
+   ```
+   STORYBOOK_API_REGION=<API_REGION>
+   STORYBOOK_API_KEY=<API_KEY>
+   ```
+
+   Replace `<API_REGION>` and `<API_KEY>` with your actual credentials.
+
+5. Run Storybook:
+
+   ```
+   pnpm run storybook
+   ```
 
-Then, open your browser and navigate to http://localhost:6006.
+6. Open your browser and navigate to `http://localhost:6006` to view the Storybook interface.
 
 ## Installation