CNN
COMPONENT
LIBRARY

@cnnprivate

A hosted NPM registry allows us to store and share reusable chunks of code (components).

Developers will need to:

Be added to the registry
Locally log into NPM via the command line
Add an extra step to their CI/CD pipeline


// Local development
npm login

// CI/CD pipeline
// Set NPM_TOKEN in the CI environment vars
dependencies:
    pre:
        echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
        npm install

Example

COMPONENT USE IN PRACTICE

Breaking NEws

Easily pull in a breaking news banner for your application that:

Accounts for all business logic
Is styled consistently
Is thoroughly tested


import BreakingNews from '@cnnprivate/breaking-news';
import FetchData from 'modules/fetch-data';

import '!style-loader!css-loader!@cnnprivate/breaking-news/dist/main.css'

function BreakingNewsContainer({ uri, interval }) {
    return (
        <FetchData
            uri={uri}
            interval={interval}
        >
            {(error, data) => <BreakingNews {...data} />}
        </FetchData>
    );
}

things of note

Consuming applications are responsible for state and data management. Components simply accept data as a "prop" and perform the necessary business logic under the hood.

We are working on better approaches for CSS support, theme-ability, and hooks (e.g. analytics / application state updates).

What's Next

What components should we focus on?
- Weighting components (those that can get the most reuse)
- Complexity

Potential Candidates
- Terms of Service
- Newsletter
- Analytics
- Video
- Outbrain
- Yieldmo

Component Library

By Matthew Crutchfield

CNN COMPONENT LIBRARY