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