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.

   npx-create-react-app <project name>

2. Installed prettier using the following command.

   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.

   echo {}> .prettierrc

4. Configure the .prettierrc as follows:

   { "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.

   npm i generate-react-cli

6. To run it using npx use following command.

   npx generate-react-cli component <name of component>

7. Its configuration is as follows:

   {
     "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

   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:

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

Open http://localhost:6006 to view it in the browser.

Installation

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

[email protected]:Talking-DB/coding/pocs/ui-components/profile/hc-inbox-chat-profile.git

2. Install npm using the following command.

npm install

3. Runs the app in development mode. npm start Open http://localhost:3000 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 |