Cdm-ui-components NPM

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 />&nbsp;&nbsp;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>
    );
}