Introduction

Fusion - React Components for Your Design System

Why are we building this?

There are already a ton of really good Component Libraries out there, From Ant Design, to MaterialUI to Rebass and many others. These are great libraries if you want to put together a great looking UI without you having to spend time on the look and feel.

However if you are working on a project, that requires you to follow a certain Visual Style Guide and respect the brand guidelines, you would run into challenges trying to force fit any of the above component libs to meet your project needs. We also felt the time taken to tweak any of these components to meet your specific needs kills the productivity gains of using the library in the first place.

We also feel many of the components in these libraries are over engineered to support multiple use cases, many of which you really dont need in your application. This is unnecessary bloat.

How does Fusion Solve this?

Fusion is intended for React Developers who like to take full control on how their components look and behavior.

Fusion components contain the minimum set of features to get your component working in a project.

You are strongly encouraged to modify the components as per your style guide and design system.

You add Fusion to your project as a Git sub-tree so that fusion becomes a part of your source code instead of living within an npm_module.

It took every ounce of energy NOT to convert the Fusion core into an NPM module.

You may choose to build out an NPM module from the modified components so as to ensure consistency within your project and teams.

What does Fusion Offer out of the Box?

Every component is a Single File Component. You can simply copy and paste a component file into a project and start using it (just make sure you have emotion.js installed as a dependency).
Fusion Components use Emotion.js. If you are not into CSS in JS, you can simply copy out the styles into a separate css file and import it in.
Every Component is Theme-able using Theming.
All components aim to be as accessible as possible.
Every component file is under 150 lines of code. (may change..)

Installation

The description for the installation section

Getting started with Fusion

If you'd like to give it a quick spin

Clone the repo and do the usual

git clone git@github.com:pagesource/fusion.git

npm install

npm start

Running Dev Server

npm run dev

The Demo Kitchen Sink page is built using next.js

In the browser go to http://localhost:3000/kitchen-sink

Fusion components are located in the fusion folder

All pages related kitchen-sink are located in the pages folder

To add Fusion into your project as a Git-sub tree

git subtree add --prefix fusion https://github.com/pagesource/fusion.git master

The --prefix=fusion will create a folder called fusion and import the components into that folder. In case you want to copy the fusion components into a folder simply change the prefix to your folder name ==prefix=<your-folder-name>

Fusion Components

Alert

fusion/Alert.js

Default Example Usage

xxxxxxxxxx
 
<Alert>Default Example Usage</Alert>

Avatar

fusion/Avatar.js

xxxxxxxxxx
 
<Avatar>Default Example Usage</Avatar>

BgImage

fusion/BackgroundImage.js

Invariant Violation: Minified React error #137; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=137&args[]=img&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

xxxxxxxxxx
 
<BgImage>Default Example Usage</BgImage>

Badge

fusion/Badge.js

Invariant Violation: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

xxxxxxxxxx
 
<Badge>Default Example Usage</Badge>

Blockquote

fusion/Blockquote.js

Default Example Usage

xxxxxxxxxx
 
<Blockquote>Default Example Usage</Blockquote>

Bounce

fusion/Bounce.js

Boucing text Bouncing Image

xxxxxxxxxx
 
<Bounce>Default Example Usage</Bounce>

Button

fusion/Button.js

Button component example:

xxxxxxxxxx
 
<Button children="click Me"></Button>

xxxxxxxxxx
 
<Button disabled="true" >I’m disabled</Button>

xxxxxxxxxx
 
 <Button  onClick={() => alert('component Explorer')}>Click to get an alert</Button>

Card

fusion/Card.js

xxxxxxxxxx
 
<Card>Default Example Usage</Card>

CardGrid

fusion/CardGrid.js

Tasty Food

★★★★★

☆☆☆☆☆

lorem lipsum do re me

Amazing Food

★★★★★

☆☆☆☆☆

Amazing lorem lipsum do re me

Good Food

★★★★★

☆☆☆☆☆

Good lipsum do re me

xxxxxxxxxx
 
<CardGrid>Default Example Usage</CardGrid>

Code

fusion/Code.js

Default Example Usage

xxxxxxxxxx
 
<Code>Default Example Usage</Code>

CountdownTimer

fusion/CountdownTimer.js

NaN Days - NaN : NaN : NaN

xxxxxxxxxx
 
<CountdownTimer>Default Example Usage</CountdownTimer>

Dialog

fusion/Dialog.js

xxxxxxxxxx
 
<Dialog>Default Example Usage</Dialog>

DoughnutElm

fusion/Doughnut.js

xxxxxxxxxx
 
<DoughnutElm>Default Example Usage</DoughnutElm>

Heading2

fusion/Heading 2.js

Default Example Usage

xxxxxxxxxx
 
<Heading2>Default Example Usage</Heading2>

Heading

fusion/Heading.js

Header content

xxxxxxxxxx
 
<Heading>Default Example Usage</Heading>

HorizontalBarChart

fusion/HorizontalBarChart.js

xxxxxxxxxx
 
<HorizontalBarChart>Default Example Usage</HorizontalBarChart>

customLink

fusion/Link.js

Default Example Usage

xxxxxxxxxx
 
<customLink>Default Example Usage</customLink>

LiveEdit

fusion/LiveEdit.js

TypeError: e.replace is not a function

xxxxxxxxxx
 
<LiveEdit>Default Example Usage</LiveEdit>

Loader

fusion/Loader.js

xxxxxxxxxx
 
<Loader>Default Example Usage</Loader>

Logo

fusion/Logo.js

xxxxxxxxxx
 
<Logo>Default Example Usage</Logo>

Panel

fusion/Panel.js

Default Example Usage

xxxxxxxxxx
 
<Panel>Default Example Usage</Panel>

Panel

fusion/Panel2.js

Default Example Usage

xxxxxxxxxx
 
<Panel>Default Example Usage</Panel>

PanelFooter

fusion/PanelFooter.js

Default Example Usage

xxxxxxxxxx
 
<PanelFooter>Default Example Usage</PanelFooter>

PanelHeader

fusion/PanelHeader.js

Default Example Usage

xxxxxxxxxx
 
<PanelHeader>Default Example Usage</PanelHeader>

PieChart

fusion/PieChart.js

xxxxxxxxxx
 
<PieChart>Default Example Usage</PieChart>

Progress

fusion/ProgressBar.js

33.33333333333333%

xxxxxxxxxx
 
<Progress>Default Example Usage</Progress>

ProgressCircle

fusion/ProgressCircle.js

33.33333333333333%

xxxxxxxxxx
 
<ProgressCircle>Default Example Usage</ProgressCircle>

Rating

fusion/Rating.js

Star rating Molecule with click-able buttons

★★★★★

☆☆☆☆☆

xxxxxxxxxx
 
<Rating>Default Example Usage</Rating>

Ripples

fusion/Ripples.js

xxxxxxxxxx
 
<Ripples>Default Example Usage</Ripples>

SelectRating

fusion/SelectRating.js

xxxxxxxxxx
 
<SelectRating>Default Example Usage</SelectRating>

Slider

fusion/Slider.js

xxxxxxxxxx
 
<Slider>Default Example Usage</Slider>

StatusMessage

fusion/StatusMessage.js

Status: Task completed!

xxxxxxxxxx
 
<StatusMessage>Default Example Usage</StatusMessage>

Stepper

fusion/Stepper.js

Shipping➡

Choose your shipping options

Billing➡

Enter billing information

Confirm Order➡

Proceed to order confirmation

xxxxxxxxxx
 
<Stepper>Default Example Usage</Stepper>

ControlStepper

fusion/StepperControl.js

Click here to reset the example.

STEP 1

➡

STEP 2

➡

STEP 3

Click a step to get started.

xxxxxxxxxx
 
<ControlStepper>Default Example Usage</ControlStepper>

Steps

fusion/Steps.js

title➡

description

xxxxxxxxxx
 
<Steps>Default Example Usage</Steps>

Tabs

fusion/Tabs.js

Tab1
Tab2
Tab3

This is content for first tab

This is content for second tab

This is content for third tab

xxxxxxxxxx
 
<Tabs>Default Example Usage</Tabs>

ToggleButton

fusion/ToggleButton.js

xxxxxxxxxx
 
<ToggleButton>Default Example Usage</ToggleButton>

Truncate

fusion/Truncate.js

Default Example Usage

xxxxxxxxxx
 
<Truncate>Default Example Usage</Truncate>

Typing

fusion/Typing.js

Typing text content

xxxxxxxxxx
 
<Typing>Default Example Usage</Typing>

YTEmbed

fusion/YTEmbed.js

xxxxxxxxxx
 
<YTEmbed>Default Example Usage</YTEmbed>

Fusion - React Components for Your Design System

Why are we building this?

How does Fusion Solve this?

What does Fusion Offer out of the Box?

Getting started with Fusion

Running Dev Server

To add Fusion into your project as a Git-sub tree

Tasty Food

Amazing Food

Good Food

Default Example Usage

Header content

Header content

Header content

Fusion Style Guide