synapse-react-client

This project helps you integrate your app with the Synapse API backend.

See the available Components

Getting started with Synapse.

Synapse.org is a client written for the Synapse platform.

Interested in contributing to this project? See contributing.

Run the following command:

npm install synapse-react-client

See index.ts for a comprehensive list of components that can be used.

To function properly, all components must be wrapped in a SynapseContextProvider. To make authenticated requests, you must provide the user's access token as a property to the context provider, among other values. You may maintain this in state, or provide it however you like.

The context provider also maintains a shared cache (via react-query). It is recommended to place the provider at the highest possible point in your component tree, and to use the same provider across components if possible.

Example:

const myToken = "example-token" // this value may also be undefined, if a user is not signed in
const useUtcTime = true
const inExperimentalMode = false

<SynapseContextProvider synapseContext={{ accessToken: myToken, isInExperimentalMode: inExperimentalMode, utcTime: useUtcTime }} >
  <EntityFinder {...entityFinderProps} />
</SynapseContextProvider>

Specifying the following in the window object will override request endpoints:

window.SRC.OVERRIDE_ENDPOINT_CONFIG = {
  PORTAL: '<endpoint>',
  REPO: '<endpoint>',
}

Note - this will apply to all calls being made.

We are primarily using MUI for styling and per-app theming. We provide a default theme in DefaultTheme.ts which can be overridden with your own theme properties.

Synapse React Client also uses Dart Sass. The core css lives in src/style and src/template_style.

For a list of variables you can override, see src/style/abstracts/_variables.scss.

Override the variables by importing the SCSS in your project like so:

@use 'synapse-react-client/dist/style/main.scss' with ($primary-action-color:
      $-my-primary-color, $secondary-action-color: $-my-secondary-color, // ...any other overrides continue);
@use 'synapse-react-client/dist/template_style/Index.scss';

In this example, make sure that your node_modules folder is in your Dart Sass load path.

├── ./src
│   ├── ./assets    Assets such as svgs/pngs needed for logos or buttons
│   ├── ./components  Contains all React components
│   ├── ./style   Contains scss stylesheets
│   ├── ./synapse-client   Functions used to call the Synapse REST API
│   ├── ./synapse-queries   react-query hooks used to interact with the Synapse REST API
│   ├── ./template-style   Contains scss stylesheets
│   ├── ./theme   Utilities and exports for MUI theming
│   └── ./utils   Contains utilities
├── ./mocks Mock data used for testing and stories
├── ./test Tests for all components and utilities
└── ./stories Storybook stories for components

To expose a component from the library you must export it from index.ts. Ideally, your component will get its own subfolder within src/components/, which will contain an index.ts file that exports the public API of the component (typically the component and its props type). In src/components/index.ts, you can then export the contents of the new subfolder.

To expose a component for use in synapse.org, you must export it from umd.index.ts. Note that certain dependencies are not included in the UMD bundle. See the script that builds the bundle, src/esbuild.config.mjs, for more details.

Before doing anything else run:

In the project directory, you can run:

Runs Storybook, which allows you to inspect and interact with components.

Launches the test runner in the interactive watch mode.

Launches the test runner in the non-interactive mode to run all tests and calculate test coverage.

Links to Resources on Testing:

• Jest: https://jestjs.io/
• React Testing Library: https://testing-library.com/docs/react-testing-library/intro

Bundles the library for production to the build folder.

Bundles the library for production to the build folder using tsup. This command creates CJS and ESM bundles with all dependencies removed, and also outputs a single TypeScript declaration file.

Note - this script is run automatically as part of the build command.

This project can be built as a umd bundle. It produces three files

• synapse-react-client.production.min.js
• synapse-react-client.development.js
• synapse-react-client.production.min.styles.css.

Note - this script is run automatically as part of the build command.