@onenexus/synergy

Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects

Features

• Style elements using either Sass or JavaScript (learn more)
• Make cosmetic UI updates to your app without modifying source code (learn more)
• Easily configure modules and create themes for your app (learn more)
• Add UI interactions without requiring class components, hooks or state (learn more)
• Everything you need to create component libraries/UI styleguides

Useful Wiki Pages

• Installation & Setup
• Modules, Components & Modifiers
• Creating a Synergy Module
• Module Configuration
• Themes

Boilerplates

Synergy Boilerplate (Javascript Styles)

Synergy Boilerplate (Sass Styles)

60 Second Accordion From Scratch

npm install --save react react-dom @onenexus/synergy;

View a live demo of this example in CodeSandbox

accordion.jsx

import React, { useState } from 'react';
import '@onenexus/synergy';

const styles = {
  'font-family': 'sans-serif',

  panel: panel => ([
    {
      condition: () => panel.is('open'),
      styles: {
        heading: {
          'background': '#00FFB2',
          'color': '#FFFFFF'
        }
      }
    }
  ]),

  heading: {
    'background': '#1E90FF',
    'color': '#005A9C',
    'padding': '1em',
    ':hover': {
      'background': '#01BFFF',
      'color': '#FFFFFF'
    }
  },

  content: content => ({
    'padding': '1em',
    'color': '#444444',
    'display': content.parent('panel').is('open') ? 'block' : 'none'
  })
};

const Accordion = ({ panels }) => (
  <Module name='accordion' styles={styles}>
    {panels.map(({ heading, content }) => {
      const [isOpen, toggle] = useState(false);

      return (
        <Component name='panel' open={isOpen}>
          <Component name='heading' content={heading} onClick={() => toggle(!isOpen)} />
          <Component name='content' content={content} />
        </Component>
      );
    })}
  </Module>
);

export default Accordion;

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Accordion from './accordion.jsx';

const data = [
  {
    heading: 'accordion heading 1',
    content: 'lorem ipsum'
  },
  {
    heading: 'accordion heading 2',
    content: <p>foo bar</p>
  }
];

const Screen = () => (
  <Accordion panels={data} />
);

ReactDOM.render(<Screen />, document.getElementById('app'));

This example is short and concise for demo purposes; for a more complete example utilising more features see the Module Example page

Overview

A Synergy module is essentially a UI component that's been broken up into the following areas of concern:

• Configuration
• Styles
• Interactions
• Interface

These are the main concerns of a UI module; Synergy allows you to work on each concern independently before bringing them together to form a Synergy module.

Synergy is ideal for creating presentational React components when using the Container Component Pattern (learn more)

For more information see the About Synergy page.

---