CJ Affiliate Visual Stack

This package includes a set of React components with a consistent visual style that can be consumed in other React applications. The components are unbiased and generally stateless, composed primarily of visual styles rather than functionality.

Installation

$ npm install --save @cjdev/visual-stack bootstrap-loader bootstrap-sass

Usage

This package includes both a set of components and a global stylesheet composed of global styles. To include the global styles, require the @cjdev/visual-stack/lib/global module, or add it as a webpack entry point or similar.

The individual components are provided under the @cjdev/visual-stack/lib/components/ path. It may be worthwhile to add a shorter alias for this require path to keep imports short.

Example

import React from 'react';
import ReactDOM from 'react-dom';

import '@cjdev/visual-stack/lib/global';

import { Button } from '@cjdev/visual-stack/lib/components/Button';
import { Panel, Body } from '@cjdev/visual-stack/lib/components/Panel';

ReactDOM.render(
  <Panel>
    <Body>
      <h1>Hello, world!</h1>
      <Button type="primary" onClick={() => console.log('clicked!')}>Click Me</Button>
    </Body>
  </Panel>,
  document.getElementById('application')
);

Version 1.0 Breaking Changes

Various components have been updated to increase their functionality, however upgrading to 1.0 will break existing layout and usage of certain components.

Components

SideNav

Link Names must now be wrapped in <span> tags to give them the correct styling
SideNavIcon can now take an extra prop 'letter', which will create an Icon with the letter passed into it

import { SideNav, Link as SideNavLink, LinkGroup, SideNavIcon } from '@cjdev/visual-stack-redux/lib/components/SideNav';

ReactDOM.render(
    <SideNav>
        <LinkGroup label="Something" icon={<SideNavIcon type="square" />} >
            <SideNavLink>
                <WhateverRoutingWrapperYouWantToUse>
                    <SideNavIcon type="circle" />
                    <span>Link Name</span> // Link Names need to be wrapped in a span to
                                           // give it the correct styling
                </WhateverRoutingWrapperYouWantToUse>
            </SideNavLink>
            <SideNavLink>
                <WhateverRoutingWrapperYouWantToUse>
                    <span>Link Name</span> // If no Icon is given, the default will be the
                                           // first letter of the link name will be used to
                                           // make an icon
                </WhateverRoutingWrapperYouWantToUse>
            </SideNavLink>
        </LinkGroup>
        <SideNavLink>
            <WhateverRoutingWrapperYouWantToUse>
                <SideNavIcon type="circle" />
                <span>Link Name</span>
            </WhateverRoutingWrapperYouWantToUse>
        </SideNavLink>
    </SideNav>
)

Application Layout

Now has a redux component, which should be used if with the Redux SideNav. This will allow for your page container to resize correctly when the SideNav is collapsed.

// example code below is for use of the redux Applcation Layout (default export),
// which is the suggested use if redux SideNav is also used
import Layout from '@cjdev/visual-stack-redux/lib/layouts/ApplicationLayout';
import { SideNav } from '@cjdev/visual-stack-redux/lib/components/SideNav';

const AppLayout = ({children}) =>
    <Layout
        topNav={<TopNav appName="My Awesome App" logo={<CJLogo/>} />}
        sideNav={<SideNav></SideNav>}
        >
        {children}
    </Layout>

Contributing

See the CONTRIBUTING.md file.

Publishing

To publish, you must have lerna installed globally npm install lerna -g

Publish steps:

Update CHANGELOG.md with notes and version number
Push/merge into master
lerna publish

cjdev2/visual-stack