# @atk/pantry

> Component library for America's Test Kitchen

Latest version **1.3.0** (published 2018-09-05) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @atk/pantry
pnpm add @atk/pantry
yarn add @atk/pantry
bun add @atk/pantry
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2018-09-05 |
| First published | 2016-03-03 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 9.11.2 |
| Dependencies | 95 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 (+9 in 5 direct dependencies) |
| Install scripts | no |
| Maintainers | atk, jaslakson |

## Links

- npm: https://www.npmjs.com/package/@atk/pantry
- npm.io page: https://npm.io/package/@atk/pantry

## Dependencies (95)

- [ip](https://npm.io/package/ip.md) ^1.0.2
- [del](https://npm.io/package/del.md) ^2.1.0
- [chai](https://npm.io/package/chai.md) ^3.4.1
- [cors](https://npm.io/package/cors.md) ^2.6.0
- [glob](https://npm.io/package/glob.md) ^7.0.3
- [gulp](https://npm.io/package/gulp.md) ^3.9.0
- [less](https://npm.io/package/less.md) ^2.5.1
- [babel](https://npm.io/package/babel.md) ^6.5.2
- [jsdom](https://npm.io/package/jsdom.md) ^8.1.0
- [nconf](https://npm.io/package/nconf.md) ^0.8.1
- [react](https://npm.io/package/react.md) ^0.14.2
- [redux](https://npm.io/package/redux.md) ^3.0.4
- [yargs](https://npm.io/package/yargs.md) ^4.2.0
- [eslint](https://npm.io/package/eslint.md) 2.3.0
- [expect](https://npm.io/package/expect.md) ^1.13.4
- [express](https://npm.io/package/express.md) ^4.13.3
- [gulp-bg](https://npm.io/package/gulp-bg.md) 0.0.8
- [gulp-if](https://npm.io/package/gulp-if.md) ^2.0.0
- [history](https://npm.io/package/history.md) ^2.0.1
- [nodemon](https://npm.io/package/nodemon.md) ^1.8.1
- [shortid](https://npm.io/package/shortid.md) ^2.2.4
- [webpack](https://npm.io/package/webpack.md) ^1.12.3
- [bluebird](https://npm.io/package/bluebird.md) ^3.3.3
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.7
- [immutable](https://npm.io/package/immutable.md) ^3.6.4
- [node-sass](https://npm.io/package/node-sass.md) ^3.1.2
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.0
- [stylelint](https://npm.io/package/stylelint.md) ^4.4.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.6.5
- [classnames](https://npm.io/package/classnames.md) ^2.1.1
- [css-loader](https://npm.io/package/css-loader.md) ^0.23.1
- [estraverse](https://npm.io/package/estraverse.md) ^4.1.1
- [gulp-babel](https://npm.io/package/gulp-babel.md) ^6.1.2
- [gulp-mocha](https://npm.io/package/gulp-mocha.md) ^2.1.3
- [gulp-shell](https://npm.io/package/gulp-shell.md) ^0.5.0
- [url-loader](https://npm.io/package/url-loader.md) ^0.5.5
- [body-parser](https://npm.io/package/body-parser.md) ^1.12.4
- [compression](https://npm.io/package/compression.md) ^1.4.0
- [gulp-eslint](https://npm.io/package/gulp-eslint.md) ^2.0.0
- [less-loader](https://npm.io/package/less-loader.md) ^2.0.0
- [react-redux](https://npm.io/package/react-redux.md) ^4.4.0
- [regenerator](https://npm.io/package/regenerator.md) ^0.8.42
- [sass-loader](https://npm.io/package/sass-loader.md) ^3.1.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.1.0
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^5.0.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.4
- [gulp-postcss](https://npm.io/package/gulp-postcss.md) ^6.1.0
- [react-native](https://npm.io/package/react-native.md) ^0.21.0
- [react-router](https://npm.io/package/react-router.md) ^2.0.0
- [redbox-react](https://npm.io/package/redbox-react.md) ^1.0.5
- [redux-logger](https://npm.io/package/redux-logger.md) ^2.1.1
- [run-sequence](https://npm.io/package/run-sequence.md) ^1.0.2
- [style-loader](https://npm.io/package/style-loader.md) ^0.13.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.6.1
- [estraverse-fb](https://npm.io/package/estraverse-fb.md) ^1.3.1
- [normalize.css](https://npm.io/package/normalize.css.md) ^3.0.2
- [redux-storage](https://npm.io/package/redux-storage.md) ^4.0.0
- [stylus-loader](https://npm.io/package/stylus-loader.md) ^1.0.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.6.1
- [babel-register](https://npm.io/package/babel-register.md) ^6.6.5
- [chai-immutable](https://npm.io/package/chai-immutable.md) ^1.5.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^0.8.1
- [breakpoint-sass](https://npm.io/package/breakpoint-sass.md) ^2.6.1
- [postcss-reporter](https://npm.io/package/postcss-reporter.md) ^1.3.3
- [redux-mock-store](https://npm.io/package/redux-mock-store.md) 0.0.6
- [react-pure-render](https://npm.io/package/react-pure-render.md) ^1.0.1
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.5.0
- [react-router-redux](https://npm.io/package/react-router-redux.md) ^4.0.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.6.0
- [eslint-plugin-babel](https://npm.io/package/eslint-plugin-babel.md) ^3.1.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^4.1.0
- [react-transform-hmr](https://npm.io/package/react-transform-hmr.md) ^1.0.1
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.5.0
- [babel-preset-stage-1](https://npm.io/package/babel-preset-stage-1.md) ^6.5.0
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^6.1.0
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^1.0.3
- [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^1.1.2
- [eslint-plugin-standard](https://npm.io/package/eslint-plugin-standard.md) ^1.3.2
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^1.2.0
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.1.0
- [babel-preset-react-hmre](https://npm.io/package/babel-preset-react-hmre.md) ^1.1.0
- [react-addons-test-utils](https://npm.io/package/react-addons-test-utils.md) ^0.14.1
- [redux-promise-middleware](https://npm.io/package/redux-promise-middleware.md) ^2.2.3
- [babel-preset-es2015-node5](https://npm.io/package/babel-preset-es2015-node5.md) ^1.1.2
- [babel-preset-react-native](https://npm.io/package/babel-preset-react-native.md) ^1.5.1
- [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^3.0.0
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^1.0.1
- [babel-plugin-react-transform](https://npm.io/package/babel-plugin-react-transform.md) ^2.0.2
- [react-transform-catch-errors](https://npm.io/package/react-transform-catch-errors.md) ^1.0.0
- [react-native-browser-polyfill](https://npm.io/package/react-native-browser-polyfill.md) ^0.1.1
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.6.0
- [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^0.1.2
- [redux-storage-engine-localstorage](https://npm.io/package/redux-storage-engine-localstorage.md) ^1.0.1
- [babel-plugin-transform-react-inline-elements](https://npm.io/package/babel-plugin-transform-react-inline-elements.md) ^6.6.5
- [babel-plugin-transform-react-constant-elements](https://npm.io/package/babel-plugin-transform-react-constant-elements.md) ^6.5.0

## Recent versions

- 1.3.0 (latest) — 2018-09-05
- 1.1.0 — 2017-10-16
- 1.0.1 — 2016-08-02
- 1.2.0 — 2016-07-27
- 1.0.0 — 2016-03-03
- 0.0.0 — 2016-03-03

## README

# pantry

`@atk/pantry` is a Pattern Library for re-usable React components at America's Test Kitchen.

## Setting up pantry

pantry depends on node version 9.11.2. If you aren't using node 9.11.2, you will need to install it.
You can use a node version manager such as [nvm](https://github.com/creationix/nvm) to install node 9.11.2
if you dont' have it.

```
$ git clone git@github.com:Americastestkitchen/pantry.git
$ npm install
```

## Running the app

There is a basic site available within pantry that exposes the components available in the project.
The code for the app lives in the `app` folder at the root of the project.

To run the server:
```
$ gulp
```

There are also tests available for all components included in pantry.

To run the tests:
```
$ gulp test
```

The home page is a list of components in pantry. Each component has a route associated with it that will render that component.
The route for GlobalHeader would be /global_header.

## Using components in your project

#### Javascript

This example assumes you are including the `PageTitle` pantry widget within a local container component named `DetailPage`.

```javascript
import {PageTitle} from '@atk/pantry';
import React, {PropTypes} from 'react';

export default class DetailPage extends Component {
  static propTypes = {
    msg: PropTypes.object
  }

  render() {
    const {msg: {detail: msg}} = this.props;
    return (
      <main className='detail-main'
            role="main">
        <PageTitle text={msg.buttonText}/>
      </main>
    );
  }
}
```

#### SCSS

From within your container component's css file, import the relevant scss files from your project's node_modules directory.

_NOTE: This process is still TBD_

```scss
# DetailPage.scss
@import '~@atk/pantry/dist/Button/Button';

.detail-page {
  button {
    @include pantry-button;
  }
}

```

All of the defined styles will be imported into your stylesheet at build time.
You can use any of the mixins defined in this package as normal.

## Creating a new component

### Development
```
# 1) Clone the `pantry` GitHub repository
$ git clone https://github.com/Americastestkitchen/pantry.git

# 2) `cd` into the `pantry` directory
$ cd pantry

# 3) Create a new project branch based on `develop` (see below for branch naming conventions)
$ git checkout develop
$ git checkout -b jd-ATK-123

# 4) Develop your new component, using the following pattern.

#  -- React component
#  -- SCSS file
#  -- Tests
$ mkdir src/PageTitle
$ mkdir src/PageTitle/__test__
$ touch src/PageTitle/__test__/PageTitle.spec.js
$ touch src/PageTitle/PageTitle.react.js
$ touch src/PageTitle/PageTitle.scss

# Add an export directive to `src/index.js`
exports.PageTitle = import PageTitle from './components/PageTitle';

# Add a link for the component to the Home Page and add a route for the component.

# 5) Update the minor release version in ./package.json (was previously 1.0.0 in this example)
{
  "name": "atk-pantry",
  "version": "1.1.0",
  ...
}

# 6) Publish your changes to github
$ git add .
$ git commit -m "A new component in all its awesomeness"
$ git push origin jd-ATK-123

# 7) Open PR, have PR reviewed, merge PR to develop
# 8) Merge develop to master

# IMPORTANT - this should happen in master
# 9) Transpile assets and move stylesheets to `dist`
$ gulp dist

# 10) Tag your changes for npm and GitHub
#   - https://docs.npmjs.com/getting-started/semantic-versioning
#   - https://docs.npmjs.com/cli/version
$ npm version major|minor|patch -m "release message"

# 11) Publish the updated `atk-pantry` package to npm
$ npm publish --access=public

```

### Development Troubleshooting

If you would like to preview some new component development you are doing in your local environment, you can install the `@atk/pantry` npm package from local source. To do this, for example, within in `atk` uninstall the existing `@atk/pantry` package and then install from a local directory:
```
$ npm uninstall @atk/pantry
$ npm install /path/to/pantry
```
Note: When working in this manner, for any new changes to show in `atk`, you will need to make the change in `pantry`, run `gulp dist`, `npm uninstall` and `npm install` all over again. As such, it is generally more advisable to do the component development directly within `pantry`'s `jumper_cables` environment or within `atk` and then export the finished component to `pantry`.


## Updating an existing component

To Update an existing component, follow the same procedure as creating a new component, being sure to increment the version number by running the `npm publish major|minor|patch` command.

## Style guide

### Directory structure

```
PageTitle
│   PageTitle.scss
│   PageTitle.react.js
│
└───__test__
    │   PageTitle.spec.js
```

### Javascript
```
import Component from 'react-pure-render/component';
import React, {PropTypes} from 'react';

export default class PageTitle extends Component {

  static propTypes = {
    text: PropTypes.string.isRequired
  }

  render() {
    const {text} = this.props;

    return (
      <h1 className='page-title'>
        {text}
      </h1>
    );
  }
}

```

### SCSS

Each component created within `pantry` can optionally include a companion `.scss` file. This file should ideally contain only highly configurable `@mixin` declarations. By developing in this manner, the final implementation details are determined by the consuming style sheet and are not dictated by the component itself. For more examples, see [DoCSSa](http://docssa.info/#components).

```
# each mixin should be prefixed with 'pantry-'
# scss files should be linted prior to release
@mixin pantry-button($backgroundColor: #ff0000, $textColor: #ffffff) {
  background-color: $backgroundColor;
  border: 1px solid gray;
  color: $textColor;
  padding: .5em 1em;
  text-decoration: none;
  border-radius: 3px;

  &:hover {
    background:darken($backgroundColor,8%);
    transition: all 0.3s ease;
  }
  &:active {
    background:darken($backgroundColor,25%);
  }
}
```

---
_Source: https://npm.io/package/@atk/pantry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._