From 902dc76e56fc4eb4ba4d5dc700c699b473b2964b Mon Sep 17 00:00:00 2001 From: Bonn Date: Wed, 24 Apr 2024 16:43:26 +0700 Subject: [PATCH] feat: ASC-21910 - add running storybook section (#57) * feat: add running storybook section * fix: update storybook section * chore: Update README.md --- README.md | 91 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 57 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 67baaba3..9dc1f30c 100644 --- a/README.md +++ b/README.md @@ -2,99 +2,122 @@ ## Prerequisites -Prior to commencing the installation process, kindly ensure that the following prerequisites are installed on your system: +Before getting started, ensure that you have the following prerequisites installed on your system: - [Node.js](https://nodejs.org/) LTS version (currently version 20) - [pnpm](https://pnpm.io/) version 8 -## (Optional) Installation of PNPM - -To install PNPM, please execute the following command: +## How to install PNPM (Optional) ``` corepack enable pnpm ``` -Reference: https://pnpm.io/installation#using-corepack +Ref: https://pnpm.io/installation#using-corepack -## Installation +## Running Storybook (Optional) -To integrate the Amity UI-Kit with your existing project, please follow the steps outlined below: +To run Storybook and view the UI components in isolation, follow these steps: -1. Clone the repository by executing the following command: +1. Clone the Amity UI-Kit repository: ``` git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git ``` -2. Navigate to the directory of the cloned repository: +2. Navigate to the cloned repository's directory: ``` - cd ./Amity-Social-Cloud-UIKit-Web-OpenSource + cd Amity-Social-Cloud-UIKit-Web-OpenSource ``` -3. Install the required dependencies using pnpm: +3. Install the dependencies using pnpm: ``` pnpm install ``` -4. Build the project: +4. Create a `.env` file at the root of the project with the following content: ``` - pnpm run build + STORYBOOK_API_REGION= + STORYBOOK_API_KEY= ``` -5. Pack the project: + Replace `` and `` with your actual credentials. + +5. Run Storybook: ``` - pnpm pack + pnpm run storybook ``` - This command will generate a file named `amityco-ui-kit-open-source-.tgz`. +6. Open your browser and navigate to `http://localhost:6006` to view the Storybook interface. + +## Installation + +To install the Amity UI-Kit together with another project, follow these steps: -6. Navigate to the directory of your application: +1. Clone the repository using the following command: ``` - cd + git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git ``` -7. Link the Amity UI-Kit repository to your application using one of the following package managers: +2. Navigate to the cloned repository's directory: - - NPM: + ``` + cd ./Amity-Social-Cloud-UIKit-Web-OpenSource + ``` + +3. Install the dependencies using pnpm: + + ``` + pnpm install + ``` + +4. Build the project: + + ``` + pnpm run build + ``` + +5. Navigate to your application's directory: + ``` + cd + ``` + +6. Link the Amity UI-Kit repository to your application using one of the following package managers: + - NPM: ``` - npm i file:/ --save + npm link file: --save ``` - - Yarn (Classic): - ``` - yarn add file:/ + yarn add file: ``` - - PNPM: - ``` - pnpm i file:/ + pnpm i file: ``` ## Documentation -For comprehensive information and guidance on utilizing the Amity UI-Kit, kindly refer to our extensive online documentation available at [https://docs.amity.co](https://docs.amity.co). +For detailed information and guidance on using the Amity UI-Kit, please refer to our comprehensive online documentation available at [https://docs.amity.co](https://docs.amity.co). -Should you require further assistance or have any inquiries, please do not hesitate to contact our dedicated UI-Kit support team at **developers@amity.co**. We are committed to assisting you in maximizing the potential of the Amity UI-Kit. +If you require further assistance or have any questions, please don't hesitate to contact our dedicated UI-Kit support team at **developers@amity.co**. We are here to help you make the most of the Amity UI-Kit. ## Contributing -We cordially invite contributions from the community to assist in the improvement and enhancement of the Amity UI-Kit. If you are interested in contributing to this project, kindly review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices. +We welcome contributions from the community to help improve and enhance the Amity UI-Kit. If you are interested in contributing to this project, please review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices. -Thank you for selecting the Amity UI-Kit for your web development requirements! +Thank you for choosing the Amity UI-Kit for your web development needs! -### Frequently Asked Questions (FAQ) +### FAQ -Q: I encountered a types error while attempting to run `pnpm build`. -A: Please ensure that your project structure resembles the following: +Q: I tried to run `pnpm build` and it throws a types error. +A: Try to structure your project to be like this: ``` - your_app