From 223949776ec727f84d8e6fbc79dad1dde6363359 Mon Sep 17 00:00:00 2001 From: Bonn Date: Tue, 23 Apr 2024 17:46:15 +0700 Subject: [PATCH 1/3] feat: add running storybook section --- README.md | 67 ++++++++++++++++++++++++------------------------------- 1 file changed, 29 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 67baaba3..bb5487ed 100644 --- a/README.md +++ b/README.md @@ -2,38 +2,46 @@ ## 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 + +## Running Storybook (Optional) + +To run Storybook and view the UI components in isolation, use the following command: + +``` +pnpm run storybook +``` + +Then, open your browser and navigate to http://localhost:6006. ## Installation -To integrate the Amity UI-Kit with your existing project, please follow the steps outlined below: +To install the Amity UI-Kit together with another project, follow these steps: -1. Clone the repository by executing the following command: +1. Clone the repository using the following command: ``` 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 ``` -3. Install the required dependencies using pnpm: +3. Install the dependencies using pnpm: ``` pnpm install @@ -45,56 +53,42 @@ To integrate the Amity UI-Kit with your existing project, please follow the step pnpm run build ``` -5. Pack the project: - - ``` - pnpm pack - ``` - - This command will generate a file named `amityco-ui-kit-open-source-.tgz`. - -6. Navigate to the directory of your application: +5. Navigate to your application's directory: ``` cd ``` -7. Link the Amity UI-Kit repository to your application using one of the following package managers: - +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 @@ -102,6 +96,3 @@ A: Please ensure that your project structure resembles the following: - Amity-Social-Cloud-UIKit-Web-OpenSource - src ``` - -Q: The modifications I made to the code do not appear to be applied. -A: Please attempt to execute `npm cache clean` or `npm cache clean --force` to resolve this issue. From 9781c54d8932b4e33c480edeba112a0e36c60929 Mon Sep 17 00:00:00 2001 From: Bonn Date: Tue, 23 Apr 2024 20:53:56 +0700 Subject: [PATCH 2/3] 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= + STORYBOOK_API_KEY= + ``` + + Replace `` and `` 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 From 96984fe1191e1fd159b848aeaafba372eda15cb6 Mon Sep 17 00:00:00 2001 From: Bonn Date: Wed, 24 Apr 2024 16:37:14 +0700 Subject: [PATCH 3/3] chore: Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index cfa942a1..9dc1f30c 100644 --- a/README.md +++ b/README.md @@ -125,3 +125,6 @@ A: Try to structure your project to be like this: - Amity-Social-Cloud-UIKit-Web-OpenSource - src ``` + +Q: The modifications I made to the code do not appear to be applied. +A: Please attempt to execute `npm cache clean` or `npm cache clean --force` to resolve this issue.