diff --git a/.babelrc b/.babelrc
index e27fa59825..2529c0293c 100644
--- 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"
+ ]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 1f8d7f1af4..5c373a6838 100644
--- 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
index e5023c65fd..1366b832bb 100644
--- a/README.md
+++ b/README.md
@@ -4,35 +4,56 @@
[](https://travis-ci.com/salesforce/design-system-react) [](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';
+
+
+```
-_`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';
+
+
+```
+
+#### 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 `` 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
@@ -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
-
- Here is more information.}
- >
-
-
-
-
-
```
-
-## 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
index 0f5ae9c18d..78456ac9bb 100644
--- 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
index f03195e0e5..0f2f932e7e 100644
--- 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';
+
+
+```
+
+### 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';
+
+
+```
+
+#### 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
index e0a592e25d..dc87998c9d 100644
--- 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
index 4248298910..19547f1df4 100644
--- 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;
diff --git a/scripts/dist.sh b/scripts/dist.sh
index 9c126b66df..416fa3a990 100755
--- a/scripts/dist.sh
+++ b/scripts/dist.sh
@@ -3,7 +3,7 @@
# Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
# Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
-./node_modules/.bin/babel-node scripts/inline-icons.js
+./node_modules/.bin/babel-node scripts/inline-icons.js --plugins transform-es2015-modules-commonjs
echo "# Building design-system-react"
echo "## Preparing the .tmp directory"
@@ -12,6 +12,7 @@ rm -rf .tmp/
rm -rf .tmp-amd/
rm -rf .tmp-commonjs/
rm -rf .tmp-es/
+rm -rf .tmp-npm/
mkdir -p .tmp/
echo "## Running webpack"
@@ -28,11 +29,10 @@ echo "## Cloning additional files"
cp .gitignore .tmp/.gitignore
cp LICENSE.txt .tmp/LICENSE.txt
-cp CONTRIBUTING.md .tmp/CONTRIBUTING.md
cp package.json .tmp/package.json
cp docs/README-dist.md .tmp/README.md
-echo "## Running js steps"
+echo "## Running JS steps"
./node_modules/.bin/babel-node scripts/dist.js
@@ -50,13 +50,53 @@ cp -r utilities .tmp-es/utilities
echo "## Transpiling with Babel"
-NODE_ENV=amd ./node_modules/.bin/babel --plugins transform-es2015-modules-amd .tmp-es/components --out-dir .tmp-amd/components
+# AMD module transpilation
+NODE_ENV=amd \
+./node_modules/.bin/babel \
+ .tmp-es/components \
+ --plugins transform-es2015-modules-amd \
+ --out-dir .tmp-amd/components \
+ --ignore site-stories.js,__docs__,__examples__,__tests__
+
cp -r styles .tmp-amd/styles
-./node_modules/.bin/babel --plugins transform-es2015-modules-amd .tmp-es/icons --out-dir .tmp-amd/icons
-NODE_ENV=amd ./node_modules/.bin/babel --plugins transform-es2015-modules-amd .tmp-es/utilities --out-dir .tmp-amd/utilities
+./node_modules/.bin/babel \
+ .tmp-es/icons \
+ --plugins transform-es2015-modules-amd \
+ --out-dir .tmp-amd/icons
+
+NODE_ENV=amd \
+./node_modules/.bin/babel \
+ .tmp-es/utilities \
+ --plugins transform-es2015-modules-amd \
+ --out-dir .tmp-amd/utilities
+
+# CommonJS module transpilation
+NODE_ENV=commonjs \
+./node_modules/.bin/babel \
+ .tmp-es/components \
+ --plugins transform-es2015-modules-commonjs \
+ --out-dir .tmp-commonjs/components \
+ --ignore site-stories.js,__docs__,__examples__,__tests__
-NODE_ENV=commonjs ./node_modules/.bin/babel --plugins transform-es2015-modules-commonjs .tmp-es/components --out-dir .tmp-commonjs/components
cp -r styles .tmp-commonjs/styles
-./node_modules/.bin/babel --plugins transform-es2015-modules-commonjs .tmp-es/icons --out-dir .tmp-commonjs/icons
-NODE_ENV=commonjs ./node_modules/.bin/babel --plugins transform-es2015-modules-commonjs .tmp-es/utilities --out-dir .tmp-commonjs/utilities
+
+./node_modules/.bin/babel \
+ .tmp-es/icons \
+ --plugins transform-es2015-modules-commonjs \
+ --out-dir .tmp-commonjs/icons
+
+NODE_ENV=commonjs \
+./node_modules/.bin/babel \
+ .tmp-es/utilities \
+ --plugins transform-es2015-modules-commonjs \
+ --out-dir .tmp-commonjs/utilities
+
+# NPM module structure
+# * `[root]/design-system-react.js` (UMD bundle, backwards compatible)
+# * `[root]/components/**` ES6 source code. To use: `import Button from 'design-system-react/components/button'`. This will need transpiler plugins.
+# * `lib/**` commonjs transpiled (no babel presets needed, linked to from `package.main`, this would be backwards compatible as long as you didn't want real ES6 modules, this would also be compatible with `create-react-app` See https://github.com/facebookincubator/create-react-app/issues/1125 which doesn't transpile `node_modules` ). To use: `import { Button } from 'design-system-react'`.
+cp -r .tmp-es .tmp-npm
+cp -r .tmp-commonjs .tmp-npm/lib
+
+./node_modules/.bin/babel-node scripts/npm-transform.js --plugins transform-es2015-modules-commonjs
diff --git a/scripts/npm-transform.js b/scripts/npm-transform.js
new file mode 100644
index 0000000000..e5378f6ec0
--- /dev/null
+++ b/scripts/npm-transform.js
@@ -0,0 +1,48 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* eslint-disable no-console */
+
+import fs from 'fs';
+import path from 'path';
+import async from 'async';
+
+// /////////////////////////////////////////////////////////////
+// Helpers
+// /////////////////////////////////////////////////////////////
+
+const distPath = path.resolve.bind(
+ path,
+ path.resolve(__dirname, '../', '.tmp-npm')
+);
+
+// /////////////////////////////////////////////////////////////
+// Tasks
+// /////////////////////////////////////////////////////////////
+
+async.series(
+ [
+ /**
+ * Clean up the package.json
+ */
+ (done) => {
+ console.log('### Modify package.json for publishing to NPM');
+
+ const packageJSON = JSON.parse(
+ fs.readFileSync(distPath('package.json')).toString()
+ );
+
+ packageJSON.name = '@salesforce/design-system-react';
+ packageJSON.main = 'lib/components/index.js';
+
+ fs.writeFile(
+ distPath('package.json'),
+ JSON.stringify(packageJSON, null, 2),
+ done
+ );
+ }
+ ],
+ (err) => {
+ if (err) throw err;
+ }
+);
diff --git a/scripts/publish-to-git.js b/scripts/publish-to-git.js
index 32cafdb3e3..c9ee2a7df6 100644
--- a/scripts/publish-to-git.js
+++ b/scripts/publish-to-git.js
@@ -3,8 +3,6 @@
/* eslint-disable no-console, global-require */
-console.log('# Publishing to git');
-
import async from 'async';
import fs from 'fs';
import path from 'path';
@@ -13,6 +11,8 @@ import minimist from 'minimist';
import { version } from '../package.json';
import exec from './command-line-utilities';
+console.log('# Publishing to git');
+
const argv = minimist(process.argv.slice(2));
const rootPath = path.resolve(__dirname, '../');
const getTmpPath = (type) =>
@@ -103,7 +103,7 @@ const publish = (done, type) => {
async.eachSeries(actions, exec, (err) => {
if (err) throw err;
- // console.log(`## Successfully published ${type} to git`);
+ console.log(`## Successfully published ${type} to git`);
done();
});
diff --git a/scripts/release.js b/scripts/release.js
index 0a746bda64..f4d86596f9 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -106,6 +106,18 @@ const tasks = ({ release, done }) => {
{
message: `# Pushing local master branch to ${remote} remote`,
command: `git push ${remote} master --no-verify`
+ },
+ {
+ message: '# Set up NPM configuration',
+ command: 'cp scripts/.npmrc .npmrc'
+ },
+ {
+ message: '# Publish to NPM',
+ command: 'npm publish .tmp-npm'
+ },
+ {
+ message: '# Remove NPM configuration',
+ command: 'rm .npmrc'
}
]
.filter((item) => !item.ignoreCommand)