cdm-ui-components
v2.0.18
Published
Reusable UI components for Cedemo's eco-system
Downloads
244
Readme
cdm-ui-components
Reusable UI components for Cedemo's eco-system
Install
npm install --save cdm-ui-components
Usage
import React, { Component } from 'react'
import {
// theming
ThemeProvider,
DefaultTheme,
// style
Reset,
GlobalStyle,
// buttons
Button,
DropdownButton,
// zones
Zone,
LightZone,
DarkZone,
BackgroundZone,
// fonts
A,
H2,
H4,
P,
Text,
Display,
// spacing
Padding,
Margin,
// overlay
Overlay,
// icons
Play,
Home,
LeftArrow,
RightArrow,
// layout
Row,
Col,
Div,
// form
Input,
Label,
Textarea,
Select,
VirtualizedSelect,
DatePicker,
UploadButton
// modal
Modal,
// list
List,
ListItem,
// loader
Loader,
// card
Card,
// image
BackgroundImage,
// alert
Alert,
// tag
Tag
} from 'cdm-ui-components'
const theme = DefaultTheme
class Example extends Component {
render() {
return (
<React.Fragment>
<Reset />
<ThemeProvider theme={DefaultTheme}>
<React.Fragment>
<GlobalStyle />
{/* Banner */}
<BackgroundZone noPadding url="http://www.cedemo.com/img/hero-rcp.jpg">
<Overlay gradient>
<Padding
horizontal={{mobile: 4, tablet: 5, desktop: 6}}
vertical={{mobile: 5, tablet: 6, desktop: 7}}
>
<Display>Cedemo UI/UX library</Display>
<Padding bottom={4}>
<P style={{color: "#eee", fontSize: "1.4rem"}} lead>Simple, performant & dev-friendly (not really) UI library.</P>
</Padding>
<Button primary noShadow>
Discover
</Button>
<Button background dark noShadow>
<Play /> View information
</Button>
</Padding>
<Margin bottom={5} />
</Overlay>
</BackgroundZone>
{/* Main content */}
<Zone transparent noShadow noPadding>
<Padding horizontal={{mobile: 0, tablet: 0, desktop: 6}}>
<Zone transparent noShadow noPadding style={{top: '-3.75em'}}>
{/* Menu */}
<Zone transparent noPadding>
<List noShadow noBorderRadius>
<ListItem hoverBackground='rgba(255,255,255,.23)' width='8%' selected><Text color='#fff'><Home size={17}/></Text></ListItem>
<ListItem hoverBackground='rgba(255,255,255,.23)' width='23%'><Text color='#fff' bold spaced uppercase>Catalog</Text></ListItem>
<ListItem hoverBackground='rgba(255,255,255,.23)' width='23%'><Text color='#fff' bold spaced uppercase>Videos</Text></ListItem>
<ListItem hoverBackground='rgba(255,255,255,.23)' width='23%'><Text color='#fff' bold spaced uppercase>Statistics</Text></ListItem>
<ListItem hoverBackground='rgba(255,255,255,.23)' width='23%'><Text color='#fff' bold spaced uppercase>Export</Text></ListItem>
</List>
</Zone>
{/* Main zone */}
<Zone>
<Padding vertical={4} horizontal={4}>
<H2>Cedemo's UI library</H2>
<P lead gray>Created for performance, quick startup, clean design.</P>
<P lead gray>Uses <code>react-tippy</code>, <code>react-select</code>, <code>styled-components</code>, <code>day-js</code>...</P>
<P lead gray><Text bold inline>Work in progress</Text></P>
<br/><br/>
<Loader />
</Padding>
</Zone>
</Zone>
</Padding>
</Zone>
</React.Fragment>
</ThemeProvider>
</React.Fragment>
);
}
Built with (thank you guys)
No huge ambition for this library. No Boostrap or CSS dependency (only css-in-js). Just reusing bunch of amazing libraries:
[react-tippy] (https://github.com/tvkhoa/react-tippy)
[react-select] (https://github.com/JedWatson/react-select)
[react-icons-kit] (http://wmira.github.io/react-icons-kit/guide)
[react-virtualized] (https://github.com/bvaughn/react-virtualized)
[styled-components] (https://github.com/styled-components/styled-components)
[styled-bootstrap-grid] (https://github.com/dragma/styled-bootstrap-grid)
License
MIT © [Romain Roufast - Cedemo](https://github.com/Romain Roufast)