Skip to content

Commit db0ec16

Browse files
interactivellamainteractivellama
authored
Merge pull request #1210 from interactivellama/npm-package
Publish NPM package
2 parents 142c4b4 + d526de3 commit db0ec16

11 files changed

+263
-83
lines changed

‎.babelrc

+29-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
{
2-
"presets": ["react", "es2015", "stage-1"],
3-
"env": {
4-
"amd": {
5-
"plugins": ["import-noop"]
6-
},
7-
"commonjs": {
8-
"plugins": ["import-noop"]
9-
},
10-
"test": {
11-
"plugins": ["istanbul"]
2+
"presets": [
3+
["env", {
4+
"targets": {
5+
browsers: ['last 2 versions', 'ie 11'],
6+
node: '6.10'
127
}
8+
}],
9+
"babel-preset-react"
10+
],
11+
"env": {
12+
"amd": {
13+
"plugins": ["import-noop"]
14+
},
15+
"commonjs": {
16+
"plugins": ["import-noop"]
1317
},
14-
"plugins": [
15-
["babel-plugin-root-import", "transform-class-properties"]
16-
]
17-
}
18+
"test": {
19+
"plugins": ["istanbul"]
20+
}
21+
},
22+
"ignore": [
23+
"preset/**",
24+
],
25+
plugins: [
26+
"babel-plugin-root-import",
27+
"babel-plugin-transform-object-rest-spread",
28+
"babel-plugin-transform-class-properties",
29+
"babel-plugin-syntax-export-extensions",
30+
"babel-plugin-transform-export-default"
31+
]
32+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
### Project files ###
22

3+
# Only used for release server authentication
4+
.npmrc
5+
36
# We may want to remove to make first-time contributing easier
47
package-lock.json
58

‎README.md

+41-40
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,56 @@
44

55
[![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)
66

7+
## Install
8+
9+
```
10+
$ npm install @salesforce-ux/design-system @salesforce/design-system-react
11+
```
12+
713
## Getting Started
814

9-
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.
15+
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.
1016

17+
* [Usage](#usage-recommended)
1118
* [Getting Started](https://react.lightningdesignsystem.com/getting-started/)
12-
* [Documentation and examples](https://react.lightningdesignsystem.com)
19+
* [Documentation and interactive examples](https://react.lightningdesignsystem.com)
1320
* [Contributing](CONTRIBUTING.md)
1421
* [Codebase Overview](docs/codebase-overview.md)
1522
* [Usage with Webpack](docs/webpack.md)
1623

17-
#### ECMAScript 6, CommonJS and `create-react-app`
24+
### Quick Setup (CommonJS)
1825

19-
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.
26+
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`:
27+
28+
```
29+
import { Button } from 'design-system-react';
30+
31+
<Button label="Hello Button" />
32+
```
2033

21-
_`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`._
34+
### Recommended Usage (ES6 modules)
2235

23-
### Local development Storybook and in-browser test server
36+
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.
2437

2538
```
26-
npm install
27-
npm start
28-
open http://localhost:9001 http://localhost:8001
39+
import Button from 'design-system-react/components/button';
40+
41+
<Button label="Hello Button" />
42+
```
43+
44+
#### Transpile with `.babelrc` settings
45+
46+
```json
47+
{
48+
"presets": ["@salesforce/babel-preset-design-system-react"]
49+
}
2950
```
3051

31-
### SLDS Icons
52+
### Icon Usage
3253

3354
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.
3455

35-
#### Serve icons publically
56+
#### Serve icons publicly
3657

3758
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:
3859

@@ -46,7 +67,7 @@ ReactDOM.render(
4667
document.getElementById('app')
4768
)
4869
49-
// `/assets/icons` wil be prepended to `/standard-sprite/svg/symbols.svg#account` within the SVG path
70+
// `/assets/icons` will be prepended to `/standard-sprite/svg/symbols.svg#account` within the SVG path
5071
<svg aria-hidden="true" class="slds-icon">
5172
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
5273
</svg>
@@ -76,41 +97,21 @@ ReactDOM.render(
7697
)
7798
```
7899

79-
### Example
80-
81-
Add the following line to your `package.json` devDependencies and run `npm install`.
82-
83-
```
84-
# package.json
85-
86-
"design-system-react": "git+ssh://git@github.com:salesforce/design-system-react.git#v[VERSION]",
87-
```
88-
89-
The bundled files are provided only for convenience.
100+
Bundled script files are provided _only_ for convenience.
90101

91102
* `design-system-react.min.js` (700KB+) - includes icons in the JavaScript
92103
* `design-system-react-components.min.js` (~400KB) - no icons.
93104

94-
Import and use only the components you need:
105+
## Contributing to the code base
95106

96-
```
97-
import Tooltip from 'design-system-react/components/popover-tooltip';
98-
import Icon from 'design-system-react/components/icon';
99-
import IconSettings from 'design-system-react/components/icon-settings';
107+
#### Clone and develop locally with in-browser test server
100108

101-
<IconSettings iconPath="/assets/icons">
102-
<Tooltip
103-
align="top"
104-
content={<span>Here is more information.</span>}
105-
>
106-
<a href="javascript:void(0)">
107-
<Icon assistiveText="More Info" category="utility" name="info" className="slds-icon-text-default" />
108-
</a>
109-
</Tooltip>
110-
</IconSettings>
111109
```
112-
113-
## Contributing to the code base
110+
git clone git@github.com:salesforce/design-system-react.git
111+
npm install
112+
npm start
113+
open http://localhost:9001 http://localhost:8001
114+
```
114115

115116
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.
116117

‎components/date-picker/__tests__/datepicker.snapshot-test.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ const customProps = {
4949
parser () {
5050
return new Date(2007, 0, 6);
5151
},
52-
relativeYearFrom: -10,
53-
relativeYearTo: 10,
52+
relativeYearFrom: -20,
53+
relativeYearTo: 20,
5454
triggerClassName: 'CUSTOM-TRIGGER-CLASSNAME'
5555
};
5656

‎docs/README-dist.md

+49-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,54 @@
1-
Welcome to [Design System React](https://react.lightningdesignsystem.com/).
1+
# Design System for React
22

3-
Presented here are Javascript components based on [Lightning Design System](https://www.lightningdesignsystem.com/) and designed for React.
3+
### Accessible, localization-friendly, presentational React components
44

5-
* Tailored for building Salesforce apps: Using Design System React ensures that your app's UI reflect the Salesforce Lightning look, feel, and behaviors.
6-
* 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.
5+
## Install
76

8-
## Documentation
7+
```
8+
$ npm install @salesforce-ux/design-system @salesforce/design-system-react
9+
```
910

10-
[Design System React website](https://react.lightningdesignsystem.com/)
11+
## Getting Started
1112

12-
[Salesforce Lightning Design System website](https://www.lightningdesignsystem.com/)
13+
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`.
14+
15+
* [Getting Started](https://react.lightningdesignsystem.com/getting-started/)
16+
* [Documentation and interactive examples](https://react.lightningdesignsystem.com)
17+
18+
### Quick Setup (CommonJS)
19+
20+
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`:
21+
22+
```
23+
import { Button } from 'design-system-react';
24+
25+
<Button label="Hello Button" />
26+
```
27+
28+
### Recommended Usage (ES6 modules)
29+
30+
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.
31+
32+
```
33+
import Button from 'design-system-react/components/button';
34+
35+
<Button label="Hello Button" />
36+
```
37+
38+
#### Transpile with `.babelrc` settings
39+
40+
```json
41+
{
42+
"presets": ["@salesforce/babel-preset-design-system-react"]
43+
}
44+
```
45+
46+
## Licenses
47+
48+
* Source code is licensed under [BSD 3-Clause](https://git.io/sfdc-license)
49+
* All icons and images are licensed under [Creative Commons Attribution-NoDerivatives 4.0](https://github.com/salesforce/licenses/blob/master/LICENSE-icons-images.txt)
50+
* The Salesforce Sans font is licensed under our [font license](https://github.com/salesforce/licenses/blob/master/LICENSE-font.txt)
51+
52+
## Got feedback?
53+
54+
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).

‎package.json

+23-7
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,27 @@
4444
},
4545
"repository": {
4646
"type": "git",
47-
"url": "https://github.com/salesforce-ux/design-system-react"
47+
"url": "git+ssh://git@github.com/salesforce/design-system-react.git"
4848
},
4949
"jest": {
5050
"testRegex": "/components/.*\\.snapshot-test\\.jsx?$",
51-
"testEnvironment": "node"
51+
"testEnvironment": "node",
52+
"testPathIgnorePatterns": [
53+
"/node_modules/",
54+
"/preset/",
55+
"/.tmp-amd/",
56+
"/.tmp-commonjs/",
57+
"/.tmp-es/",
58+
"/.tmp-npm/"
59+
],
60+
"transformIgnorePatterns": [
61+
"/node_modules/",
62+
"/preset/",
63+
"/.tmp-amd/",
64+
"/.tmp-commonjs/",
65+
"/.tmp-es/",
66+
"/.tmp-npm/"
67+
]
5268
},
5369
"keywords": [
5470
"react",
@@ -64,13 +80,13 @@
6480
"components"
6581
],
6682
"bugs": {
67-
"url": "https://github.com/salesforce-ux/design-system-react/issues"
83+
"url": "https://github.com/salesforce/design-system-react/issues"
6884
},
6985
"main": "components/index.js",
86+
"module": "components/index.js",
7087
"homepage": "https://react.lightningdesignsystem.com",
7188
"dependencies": {
7289
"airbnb-prop-types": "^2.5.3",
73-
"babel-preset-stage-1": "^6.22.0",
7490
"classnames": "^2.2.5",
7591
"create-react-class": "^15.6.0",
7692
"lodash.assign": "^4.0.9",
@@ -110,7 +126,7 @@
110126
"@storybook/react": "~3.2.0",
111127
"async": "^2.0.0-rc.5",
112128
"babel-cli": "^6.24.1",
113-
"babel-core": "^6.24.0",
129+
"babel-core": "^6.26.0",
114130
"babel-eslint": "^8.0.2",
115131
"babel-jest": "^20.0.3",
116132
"babel-loader": "^7.1.1",
@@ -120,9 +136,9 @@
120136
"babel-plugin-transform-class-properties": "^6.24.1",
121137
"babel-plugin-transform-es2015-modules-amd": "^6.24.0",
122138
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
139+
"babel-plugin-transform-export-default": "^7.0.0-alpha.20",
123140
"babel-polyfill": "^6.26.0",
124-
"babel-preset-env": "^1.5.2",
125-
"babel-preset-es2015": "^6.24.0",
141+
"babel-preset-env": "^1.6.1",
126142
"babel-preset-react": "^6.23.0",
127143
"basic-auth": "^1.0.4",
128144
"chai": "^4.0.1",

‎scripts/dist.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const distPath = path.resolve.bind(
2323
async.series(
2424
[
2525
/**
26-
* Clean up the package.json
26+
* Clean up the package.json for publishing
2727
*/
2828
(done) => {
2929
console.log('### Cleaning up the package.json');
@@ -37,6 +37,9 @@ async.series(
3737
gitURL: packageJSON.devDependencies['@salesforce-ux/design-system']
3838
};
3939
delete packageJSON.scripts;
40+
delete packageJSON.jest;
41+
delete packageJSON.prettier;
42+
delete packageJSON['lint-staged'];
4043

4144
// This is a UI library, not a node package.
4245
delete packageJSON.engines.node;

0 commit comments

Comments
 (0)