@newsdev/shared-ui

Newsdev Shared NYT Components

Motivation

This repo consists of shared components to be used on interactive stories and admins.

Local Development

Make sure you have access to the @nyt and @newsdev scoped NPMs in Artifactory: Authentication Instructions

Shared-UI used the styleguidist framework to create a local preview you runtime.

In shared-ui

# Install from shared-ui root directory
➜  shared-ui $ npm install
# Install shared-ui component dependencies
➜  shared-ui $ cd packages/components && npm install
➜  shared-ui $ cd packages/previews && npm install
# Run the styleguide 
➜  shared-ui $ npm run styleguide

You should be able to view the styleguide preview page on localhost:6060.

In each component, there's a README.md file, that defines what's rendered on the storybook page. To create a new example rendering, add or update a README.md file. Your changes should deploy in the index page.

Developing components while editing a Preview project

If you'd like to develop or update existing Newsdev components and view changes in a local Preview project, follow these steps:

1. Navigate to the shared-ui package of your choice, link, and run:

➜  shared-ui $ cd packages/components/ && npm link
➜  shared-ui/packages/components $ cd ../.. && npm run dev

2. In the Preview project, install, link and preview:

➜  my-preview-project $ npm install
➜  my-preview-project $ npm link @newsdev/components
➜  my-preview-project $ preview

3. Update components

• Make a change in shared-ui
• Make a change in Preview (to trigger a rebuild)
• Refresh the Preview project in the browser to see shared-ui changes

Publishing

To publish all packages:

npm run publish 

Publish only components:

npm run publish:components

Publish only previews:

npm run publish:previews

Previews package

The previews package contains a prepacked embedded interactive (and soon, standalone interactive) preview component that wraps interactive content in the Vi Shell. This is used as part of the local preview workflow for the newsapp interactive route.

Running Tests

We use jest and enzyme to run tests. To run tests, run npm run tests