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 an existing project

• Modify Open Source UI Kit to customize the visual style

• Get latest Open Source UI Kit updates

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

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