Web UIKit Installation Guide

Amity Web UIKit Installation Guide

To allow for more customization, we have now open sourced our UI Kits and deprecated the packaged UI Kit version that was previously available.

With open source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility, and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and development experience.

To ensure that you continue to receive the latest features and updates, we encourage you to migrate over to the open source version. This guide will help you:

Migrate Web Open Source UI Kit with Existing Project

Remove Existing Dependencies

If you’ve never used the packaged Web UI Kit before, you may skip this step and proceed to the next step.

If you’re migrating over to the open-source version, you’ll need to remove and unlink the packaged UI Kit from your project before installing the open source source code.

Migrate Open Source Web UI Kit

There are several ways for you to integrate the open-source Web UI Kit into your projects, depending on your workflow. We recommend installing from npm, however we’ve also included instructions to install via Git Submodule.

Method 1: Installing via npm

Clone or download source code from an open-source Github repository

git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git

After downloading the source code, navigate to the directory where the source code was installed:

cd Amity-Social-Cloud-UIKit-Web-OpenSource

Run npm i to install package dependencies
Run npm build
Run npm link
Lastly, import (link) the UI Kit into your project by running the following command

npm link @amityco/ui-kit-open-source --install-links

Woohoo! All set! Now let’s try a sample code to get you started with our UI Kit:

import "./styles.css";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit-open-source";
const userId = "<your USER ID here>";
const apiKey = "<your API key here>";
export default function App() {
return (
<div className="App">
<AmityUiKitProvider
key={userId}
apiKey={apiKey}
userId={userId}
displayName={userId}
>
<AmityUiKitSocial />
</AmityUiKitProvider>
</div>
);
}

Method 2: Installing via git submodule

First, create a new React project
Create a new repository using git init inside your root directory
Select the path where you want to clone the submodule or use cd src
Add AmityUIKit open source into your git repository with git submodule command as shown below

git submodule add
 https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource
 "ui-kit"

Navigate to the directory where the source code was installed

cd ui-kit

Run npm i to install package dependencies
Run npm run build
Install and configure babel transcompiler, then create babel.config.js at the root of your project. Your project structure should be similar to the screenshot below:

Add “babelrcRoots” option into your babel.config.js file. If you installed the source code in a different path, replace “./src/ui-kit” with the path where you installed the UI Kit.

"babelrcRoots": [ "./", "./src/ui-kit"]

Once you’ve installed and created the babel configuration, your configuration may look like this:

module.exports = {
"presets": [
"@babel/preset-react",
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
],
"babelrcRoots": [ "./", "./subModules/ui-kit" ]
}

Next, go back to your project’s root directory and run the following commands:
- cd node_modules/react
- npm link
Then, go to the ui-kit folder and run npm link react
Finally, go back to the root directory of your project and run npm run start

If you receive warnings about “eslint” (which may happen to some versions of create-react-app if your project was created using this tool), please follow the steps below:

1) Inside ui-kit dir open package.json, move all eslint dependencies into "peerDependencies" field

2) Remove package-lock.json and run "npm i” again

3) Link react from root to ui-kit again

Woohoo! All set! Now let’s try a sample code to get you started with our UI Kit

import "./styles.css";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit-open-source";
const userId = "<your USER ID here>";
const apiKey = "<your API key here>";
export default function App() {
return (
<div className="App">
<AmityUiKitProvider
key={userId}
apiKey={apiKey}
userId={userId}
displayName={userId}
>
<AmityUiKitSocial />
</AmityUiKitProvider>
</div>
);
}

Modifying Web Open Source UI Kit

You can modify the Web open source UI Kit to customize behaviors to fit your needs. To modify the code, simply copy and paste it into your local machine.

We recommend that you first fork the repository before starting any customization work, so that it will be easier to merge the code with the next version update that we provide from the main repository.

Reference on forking: https://docs.github.com/en/get-started/quickstart/fork-a-repo

Get Latest UI Kit Open Source Updates

To update to the latest version of the UI Kit, you can pull the latest commit of the git submodule.

git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
cd ..
npm i
npm build
npm link

Last updated 1 year ago