Community JS

Quickly build beautiful community with SelfCommunity. A set of React components UI to use to integrate a community.

Installation

Community-JS is available as an npm package.

First install peer dependencies needed to make the library work:

// with npm
`npm install react react-dom @mui/material @mui/styles @mui/lab @mui/x-date-pickers @emotion/react @emotion/styled react-intl pdfjs-dist notistack @rpldy/chunked-sender @rpldy/chunked-uploady @rpldy/upload-button @rpldy/upload-drop-zone @rpldy/upload-preview @rpldy/uploady`

// with yarn
`yarn add react react-dom @mui/material @mui/styles @mui/lab @mui/x-date-pickers @emotion/react @emotion/styled react-intl pdfjs-dist notistack @rpldy/chunked-sender @rpldy/chunked-uploady @rpldy/upload-button @rpldy/upload-drop-zone @rpldy/upload-preview @rpldy/uploady`

Based on which package you want to install proceed as follows:

Install react-core:

// with npm
`npm install @selfcommunity/react-i18n @selfcommunity/react-core`

// with yarn
`yarn add @selfcommunity/react-i18n @selfcommunity/react-core`

Install react-ui package:

// with npm
`npm install @selfcommunity/react-i18n @selfcommunity/react-core @selfcommunity/react-ui`

// with yarn
`yarn add @selfcommunity/react-i18n @selfcommunity/react-core @selfcommunity/react-ui`

Install react-templates package:

// with npm
`npm install @selfcommunity/react-i18n @selfcommunity/react-core @selfcommunity/react-templates`

// with yarn
`yarn add @selfcommunity/react-i18n @selfcommunity/react-core @selfcommunity/react-templates`

Install react-i18n:

// with npm
`npm install @selfcommunity/react-i18n`

// with yarn
`yarn add @selfcommunity/react-i18n`

Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import {SCContextProvider} from '@selfcommunity/react-core';
import {PeopleSuggestion} from '@selfcommunity/react-ui';

function App() {
  const conf = {
    portal: '<community-path>',
    session: {
      type: 'OAuth',
      token: '<community-token>',
      refreshToken: '<community-refresh-token>',
      refreshTokenEndpoint: '<community-refresh-endpoint>',
    },
  };
  return (
    <SCContextProvider conf={conf}><PeopleSuggestion /></SCContextProvider>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Local development

Community JS library uses a "monorepo" organization style for managing multiple npm packages in a single git repo. This is done through a Yarn feature called workspaces. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass. Some workspaces depends on other workspace and in this way ensure all using the most up-to-date code available. With a root command yarn install, all workspaces dependencies will be installed together. A single lockfile is unique for all workspaces. Common dependencies will be correctly deduped and put at the root of the project. This projects use also lerna, a tool that use yarn workspaces to manage multi packages operation.

This repo contains this workspaces:

• types
• utils
• react-core
• react-ui
• react-templates
• react-i18n

types

Contains Community types.

utils

Contains utilities.

react-core

Groups core components.

react-ui

Contains all atomic components usefull to integrate a community in a frontend service context. Some components use sc-core components, so sc-core is list between dependencies. Requiring an sc-core component from this package, use the exact code currently located inside the project rather than what is published on npm.

react-templates

Contains full community pages components useful to integrate a community in a frontend service context.

react-ui

Contains i18n.

Environment variables

Use .env files to change Storybook's behavior in different modes. Add a .env.development or .env.production to apply different values to your environment variables. Copy the content of .env.example in .env.development and .env.production and set the values.

Required to run the monorepo

To get everything setup and dependencies installed:

• make sure you have the latest version of yarn installed
• run yarn bootstrap in the repo root directory

Running Storybook

• Follow the steps above
• yarn storybook to start storybook
• yarn storybook-https to start storybook with HTTPS

Running Storybook with HTTPS

To run Storybook with HTTPS, you need to install mkcert first:

• macOS: brew install mkcert
• Linux: apt install mkcert or equivalent for your distribution
• Windows: choco install mkcert or download from https://github.com/FiloSottile/mkcert/releases

Then you can run:

yarn storybook-https

This will generate valid SSL certificates for localhost and start Storybook with HTTPS enabled.