Create static UI react component for Profile

Channel accordion code addition for static UI React component

Target Repo:link

NODE JS version: 14.17.6

About

Add boilerplate code as per contribution guidelines.
Boilerplate refers to sections of code that have to be included in many places with little or no alteration. It is often used when referring to languages that are considered verbose, i.e. the programmer must write a lot of code to do minimal jobs.

Usage

Boiler plate for static UI react component of Profile .

Dependancies

1. Create a react app using following command.

``bash
npx-create-react-app
`

2. Installed prettier using the following command.

`bash
npm install --save-dev --save-exact prettier
`

3. Created an empty config file using the following command to let editors and other tools know that Prettier is being used.

`bash
echo {}> .prettierrc
`

4. Configure the .prettierrc as follows:

`json
{ "tabWidth": 2, "useTabs": false }
`

5. To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.Install generate-react-cli.

`bash
npm i generate-react-cli
`

6. To run it using npx use following command.

`bash
npx generate-react-cli component
`

7. Its configuration is as follows:

`json
{
"usesTypeScript": false,
"usesCssModule": true,
"cssPreprocessor": "scss",
"testLibrary": "None",
"component": {
"default": {
"path": "src/components",
"withStyle": true,
"withTest": true,
"withStory": true,
"withLazy": true
}
}
}
`

8. Install ant design

`bash
npm install antd
`

9. Install react fontawsome using following commands

`
npm install --save @fortawesome/react-fontawesome

npm install --save @fortawesome/free-regular-svg-icons
`

Setup for running the development version

1. Open the index.js file & Uncomment the "Development code" part & comment on the "Production Code" part.

2. Run npm start.

Initializing Storybook

To get started installing Storybook, run:

`bash
npx -p @storybook/cli sb init
npm run storybook
`

Open to view it in the browser.

Installation

1. Open your terminal and clone the repo using the following command

`bash
git@gitlab.com:Talking-DB/coding/pocs/ui-components/profile/hc-inbox-chat-profile.git
`

2. Install npm using the following command.

`bash
npm install
`

3. Runs the app in development mode.
npm start`
Open to view it in the browser.

Props of Settings component

| Props | Type | Description |
| ------------------- | -------- | ------------------------------------------------------------------------------------------------------ |
| navigate | function | Navigate Function |
| apiURL | string | the url of backend api |
| organizationname | string | name of organization |
| organizationId | string | name of organization Id |

Props of ProfilePicPlaceholder component

| Props | Type | Description |
| ------------------- | -------- | ------------------------------------------------------------------------------------------------------ |
| id | string | Navigate Function |
| name | string | name of user |
| width | string | Set the width of component |
| height | string | Set the height of component |
| fontSize | string | Set the font size |