salesforce · interactivellama · Jan 11, 2018 · Dec 8, 2017 · Dec 30, 2017 · Jan 10, 2018
diff --git a/.babelrc b/.babelrc
@@ -1,17 +1,32 @@
 {
-  "presets": ["react", "es2015", "stage-1"],
-  "env": {
-      "amd": {
-        "plugins": ["import-noop"]
-      },
-      "commonjs": {
-        "plugins": ["import-noop"]
-      },
-      "test": {
-        "plugins": ["istanbul"]
+  "presets": [
+    ["env", {
+      "targets": {
+        browsers: ['last 2 versions', 'ie 11'],
+        node: '6.10'
       }
+    }],
+    "babel-preset-react"
+  ],
+  "env": {
+    "amd": {
+      "plugins": ["import-noop"]
+    },
+    "commonjs": {
+      "plugins": ["import-noop"]
     },
-    "plugins": [
-      ["babel-plugin-root-import", "transform-class-properties"]
-    ]
-}
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  },
+  "ignore": [
+    "preset/**",
+  ],
+  plugins: [
+    "babel-plugin-root-import",
+    "babel-plugin-transform-object-rest-spread",
+    "babel-plugin-transform-class-properties",
+    "babel-plugin-syntax-export-extensions",
+    "babel-plugin-transform-export-default"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,8 @@
 ### Project files ###
 
+# Only used for release server authentication
+.npmrc
+
 # We may want to remove to make first-time contributing easier
 package-lock.json
 

diff --git a/README.md b/README.md
@@ -4,35 +4,56 @@
 
 [![Build Status](https://travis-ci.com/salesforce/design-system-react.svg?token=erkizBStRxre5p3S1xij&branch=master)](https://travis-ci.com/salesforce/design-system-react) [![DeepScan Grade](https://deepscan.io/api/projects/1475/branches/4666/badge/grade.svg)](https://deepscan.io/dashboard/#view=project&pid=1475&bid=4666)
 
+## Install
+
+```
+$ npm install @salesforce-ux/design-system @salesforce/design-system-react
+```
+
 ## Getting Started
 
-Welcome to the project! :wave: This library is the [React](https://facebook.github.io/react/) implementation of the [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/). It has been tested with React >=15.4.1 <16 and is stable despite its version numbers. A 1.0 will be released soon.
+Welcome to the project! :wave: This library is the [React](https://facebook.github.io/react/) implementation of the [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/). This library has a peer dependency on `@salesforce-ux/design-system`, `react`, and `react-dom`. It has been tested with React >=15.4.1 <16 and is stable despite its version number. A 1.0 will be released soon.
 
+* [Usage](#usage-recommended)
 * [Getting Started](https://react.lightningdesignsystem.com/getting-started/)
-* [Documentation and examples](https://react.lightningdesignsystem.com)
+* [Documentation and interactive examples](https://react.lightningdesignsystem.com)
 * [Contributing](CONTRIBUTING.md)
 * [Codebase Overview](docs/codebase-overview.md)
 * [Usage with Webpack](docs/webpack.md)
 
-#### ECMAScript 6, CommonJS and `create-react-app`
+### Quick Setup (CommonJS)
 
-It is highly recommended that you `npm install` the `-es` suffixed tag and import individual components. You will need a [stage-1 and higher proposed features](https://babeljs.io/docs/plugins/preset-stage-1/) transpiler ([stage-1 Babel preset](https://www.npmjs.com/package/babel-preset-stage-1) or review our `.babelrc`) and include transpiling the `node_modules/design-system-react` folder in your configuration. The non-suffixed package is a [CommonJS](https://nodejs.org/docs/latest/api/modules.html) build that should allow dropping dead code, but not tree-shaking.
+A CommonJS-compatible version has been included within the NPM package to allows usage without transpiling. Use the following named `import` syntax to access CommonJS components from `/lib/index.js`:
+
+```
+import { Button } from 'design-system-react';
+
+<Button label="Hello Button" />
+```
 
-_`create-react-app` and any environment that does not transpile or let you transpile ES6 code within the `node_modules` folder is not compatible with the `-es` suffixed tag. Please use the non-suffixed CommonJS tag until an NPM module is published that is compatible with `create-react-app`._
+### Recommended Usage (ES6 modules)
 
-### Local development Storybook and in-browser test server
+Recommended usage requires that your babel presets are set up correctly. `create-react-app` and environments that do not transpile code within `node_modules` are not compatible with the component import below. All the examples on the [documentation site](https://react.lightningdesignsystem.com/) use this syntax. You can use the Babel preset, `@salesforce/babel-preset-design-system-react`, to get started. [This preset](npmjs.com/package/@salesforce-ux/babel-preset-design-system-react) will keep Babel compatible with Design System React and allow ES6 module benefits such as tree-shaking.
 
 ```
-npm install
-npm start
-open http://localhost:9001 http://localhost:8001
+import Button from 'design-system-react/components/button';
+
+<Button label="Hello Button" />
+```
+
+#### Transpile with `.babelrc` settings
+
+```json
+{
+  "presets": ["@salesforce/babel-preset-design-system-react"]
+}
 ```
 
-### SLDS Icons
+### Icon Usage
 
 Prior to v0.7.0, SLDS icons were bundled with the JavaScript. The 400KB+ icons bundle from [SLDS](https://www.lightningdesignsystem.com/) is no longer included. You will need to download the SLDS CSS and icons separately.
 
-#### Serve icons publically
+#### Serve icons publicly
 
 Typically, scripts should be downloaded in the background without blocking the DOM. With React, this works best with [server side rendering](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup). SLDS recommends placeholder stencils while scripts are initializing if the HTML cannot be served immediately. If you can serve the HTML, then icon SVGs should not be bundled and served like any other file. Set a path `context` for all child components with `<IconSettings>` at the top of your render tree:
 
@@ -46,7 +67,7 @@ ReactDOM.render(
   document.getElementById('app')
 )
 
-// `/assets/icons` wil be prepended to `/standard-sprite/svg/symbols.svg#account` within the SVG path
+// `/assets/icons` will be prepended to `/standard-sprite/svg/symbols.svg#account` within the SVG path
 <svg aria-hidden="true" class="slds-icon">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
 </svg>
@@ -76,41 +97,21 @@ ReactDOM.render(
 )
 ```
 
-### Example
-
-Add the following line to your `package.json` devDependencies and run `npm install`.
-
-```
-# package.json
-
-"design-system-react": "git+ssh://git@github.com:salesforce/design-system-react.git#v[VERSION]",
-```
-
-The bundled files are provided only for convenience.
+Bundled script files are provided _only_ for convenience.
 
 * `design-system-react.min.js` (700KB+) - includes icons in the JavaScript
 * `design-system-react-components.min.js` (~400KB) - no icons.
 
-Import and use only the components you need:
+## Contributing to the code base
 
-```
-import Tooltip from 'design-system-react/components/popover-tooltip';
-import Icon from 'design-system-react/components/icon';
-import IconSettings from 'design-system-react/components/icon-settings';
+#### Clone and develop locally with in-browser test server
 
-<IconSettings iconPath="/assets/icons">
-  <Tooltip
-    align="top"
-    content={<span>Here is more information.</span>}
-  >
-    <a href="javascript:void(0)">
-      <Icon assistiveText="More Info" category="utility" name="info" className="slds-icon-text-default" />
-    </a>
-  </Tooltip>
-</IconSettings>
 ```
-
-## Contributing to the code base
+git clone git@github.com:salesforce/design-system-react.git
+npm install
+npm start
+open http://localhost:9001 http://localhost:8001
+```
 
 Please read the [CONTRIBUTING.md](CONTRIBUTING.md) and [Test README](/tests/README.md) first. Then, create an issue to tell others you are working on a bug. If you would like to contribute a new component, create an issue with a list of proposed props to discuss with maintainers. Issues not addressed with pull requests may be closed eventually. Check out [who's contributing](https://github.com/salesforce/design-system-react/graphs/contributors) to the project.
 

diff --git a/components/date-picker/__tests__/datepicker.snapshot-test.jsx b/components/date-picker/__tests__/datepicker.snapshot-test.jsx
@@ -49,8 +49,8 @@ const customProps = {
 	parser () {
 		return new Date(2007, 0, 6);
 	},
-	relativeYearFrom: -10,
-	relativeYearTo: 10,
+	relativeYearFrom: -20,
+	relativeYearTo: 20,
 	triggerClassName: 'CUSTOM-TRIGGER-CLASSNAME'
 };
 

diff --git a/docs/README-dist.md b/docs/README-dist.md
@@ -1,12 +1,54 @@
-Welcome to [Design System React](https://react.lightningdesignsystem.com/).
+# Design System for React
 
-Presented here are Javascript components based on [Lightning Design System](https://www.lightningdesignsystem.com/) and designed for React.
+### Accessible, localization-friendly, presentational React components
 
-* Tailored for building Salesforce apps: Using Design System React ensures that your app's UI reflect the Salesforce Lightning look, feel, and behaviors.
-* Continuously updated: As long as you’re using the latest version of Design System React, your pages are always up to date with Salesforce UI changes.
+## Install
 
-## Documentation
+```
+$ npm install @salesforce-ux/design-system @salesforce/design-system-react
+```
 
-[Design System React website](https://react.lightningdesignsystem.com/)
+## Getting Started
 
-[Salesforce Lightning Design System website](https://www.lightningdesignsystem.com/)
+Welcome to the project! :wave: This library is the [React](https://facebook.github.io/react/) implementation of the [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/). This library has a peer dependency on `@salesforce-ux/design-system`, `react`, and `react-dom`.
+
+* [Getting Started](https://react.lightningdesignsystem.com/getting-started/)
+* [Documentation and interactive examples](https://react.lightningdesignsystem.com)
+
+### Quick Setup (CommonJS)
+
+A CommonJS-compatible version has been included within the NPM package to allows usage without transpiling. Use the following named `import` syntax to access CommonJS components from `/lib/index.js`:
+
+```
+import { Button } from 'design-system-react';
+
+<Button label="Hello Button" />
+```
+
+### Recommended Usage (ES6 modules)
+
+Recommended usage requires that your babel presets are set up correctly. `create-react-app` and environments that do not transpile code within `node_modules` are not compatible with the component import below. All the examples on the [documentation site](https://react.lightningdesignsystem.com/) use this syntax. You can use the Babel preset, `@salesforce/babel-preset-design-system-react`, to get started. [This preset](npmjs.com/package/@salesforce-ux/babel-preset-design-system-react) will keep Babel compatible with Design System React and allow ES6 module benefits such as tree-shaking.
+
+```
+import Button from 'design-system-react/components/button';
+
+<Button label="Hello Button" />
+```
+
+#### Transpile with `.babelrc` settings
+
+```json
+{
+  "presets": ["@salesforce/babel-preset-design-system-react"]
+}
+```
+
+## Licenses
+
+* Source code is licensed under [BSD 3-Clause](https://git.io/sfdc-license)
+* All icons and images are licensed under [Creative Commons Attribution-NoDerivatives 4.0](https://github.com/salesforce/licenses/blob/master/LICENSE-icons-images.txt)
+* The Salesforce Sans font is licensed under our [font license](https://github.com/salesforce/licenses/blob/master/LICENSE-font.txt)
+
+## Got feedback?
+
+If you have support questions, please post a question to [StackOverflow](https://stackoverflow.com/questions/tagged/design-system-react) and tag with `design-system-react`. If you find any bugs, create a [GitHub Issue](https://github.com/salesforce/design-system-react/issues).
diff --git a/package.json b/package.json
@@ -44,11 +44,27 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/salesforce-ux/design-system-react"
+    "url": "git+ssh://git@github.com/salesforce/design-system-react.git"
   },
   "jest": {
     "testRegex": "/components/.*\\.snapshot-test\\.jsx?$",
-    "testEnvironment": "node"
+    "testEnvironment": "node",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/preset/",
+      "/.tmp-amd/",
+      "/.tmp-commonjs/",
+      "/.tmp-es/",
+      "/.tmp-npm/"
+    ],
+    "transformIgnorePatterns": [
+      "/node_modules/",
+      "/preset/",
+      "/.tmp-amd/",
+      "/.tmp-commonjs/",
+      "/.tmp-es/",
+      "/.tmp-npm/"
+    ]
   },
   "keywords": [
     "react",
@@ -64,13 +80,13 @@
     "components"
   ],
   "bugs": {
-    "url": "https://github.com/salesforce-ux/design-system-react/issues"
+    "url": "https://github.com/salesforce/design-system-react/issues"
   },
   "main": "components/index.js",
+  "module": "components/index.js",
   "homepage": "https://react.lightningdesignsystem.com",
   "dependencies": {
     "airbnb-prop-types": "^2.5.3",
-    "babel-preset-stage-1": "^6.22.0",
     "classnames": "^2.2.5",
     "create-react-class": "^15.6.0",
     "lodash.assign": "^4.0.9",
@@ -110,7 +126,7 @@
     "@storybook/react": "~3.2.0",
     "async": "^2.0.0-rc.5",
     "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.2",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.1.1",
@@ -120,9 +136,9 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-es2015-modules-amd": "^6.24.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
+    "babel-plugin-transform-export-default": "^7.0.0-alpha.20",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.5.2",
-    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.23.0",
     "basic-auth": "^1.0.4",
     "chai": "^4.0.1",

diff --git a/scripts/dist.js b/scripts/dist.js
@@ -23,7 +23,7 @@ const distPath = path.resolve.bind(
 async.series(
 	[
 		/**
-		 * Clean up the package.json
+		 * Clean up the package.json for publishing
 		 */
 		(done) => {
 			console.log('### Cleaning up the package.json');
@@ -37,6 +37,9 @@ async.series(
 				gitURL: packageJSON.devDependencies['@salesforce-ux/design-system']
 			};
 			delete packageJSON.scripts;
+			delete packageJSON.jest;
+			delete packageJSON.prettier;
+			delete packageJSON['lint-staged'];
 
 			// This is a UI library, not a node package.
 			delete packageJSON.engines.node;