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 { return <React.Fragment> <Reset /> <ThemeProvider => <React.Fragment> <GlobalStyle /> /* Banner */ <BackgroundZone ="http://www.cedemo.com/img/hero-rcp.jpg"> <Overlay > <Padding = = > <Display>Cedemo UI/UX library</Display> <Padding => <P = >Simple performant & dev- UI library</P> </Padding> <Button > Discover </Button> <Button > <Play /> View information </Button> </Padding> <Margin = /> </Overlay> </BackgroundZone> /* Main content */ <Zone > <Padding => <Zone => /* Menu */ <Zone > <List > <ListItem ='rgba(255,255,255,.23)' ='8%' ><Text ='#fff'><Home =/></Text></ListItem> <ListItem ='rgba(255,255,255,.23)' ='23%'><Text ='#fff' >Catalog</Text></ListItem> <ListItem ='rgba(255,255,255,.23)' ='23%'><Text ='#fff' >Videos</Text></ListItem> <ListItem ='rgba(255,255,255,.23)' ='23%'><Text ='#fff' >Statistics</Text></ListItem> <ListItem ='rgba(255,255,255,.23)' ='23%'><Text ='#fff' >Export</Text></ListItem> </List> </Zone> /* Main zone */ <Zone> <Padding = => <H2> UI library</H2> <P >Created for performance quick startup clean design</P> <P >Uses <code>react-tippy</code> <code>react-select</code> <code>styled-components</code> <code>day-js</code>...</P> <P ><Text >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
react-select
react-icons-kit
react-virtualized
styled-components
styled-bootstrap-grid
License
MIT © Romain Roufast - Cedemo