Skip to content

Setup TypeScript Environment #291

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Feb 16, 2019
Merged

Setup TypeScript Environment #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4de41c5
#290 npx babel-upgrade --write --install
zaki-yama Jan 31, 2019
e53a7d9
#290 Install typescript, @babel/preset-typescript
zaki-yama Jan 31, 2019
6bc2578
#290 Add tsconfig.json
zaki-yama Jan 31, 2019
9b33c34
#290 Add @babel/preset-typescript
zaki-yama Feb 5, 2019
c090e17
#290 Update jest version
zaki-yama Feb 5, 2019
1ae79e2
#290 Use `@babel/polyfill` instead of `babel-polyfill
zaki-yama Feb 5, 2019
7423463
#290 Update storybook packages
zaki-yama Feb 5, 2019
961af37
#290 Enable to compile JS files with tsc
zaki-yama Feb 5, 2019
82251d5
#290 Install babel-loader to run Storybook
zaki-yama Feb 5, 2019
f5c7527
#290 Replace `module.exports` with `export default`
zaki-yama Feb 6, 2019
ce8c5aa
#290 Update storyshots
zaki-yama Feb 6, 2019
73d80f7
#290 Update babel-eslint to 10.0.1
zaki-yama Feb 8, 2019
42b9b0d
#290 Temporarily disable eslint `no-undef` rule
zaki-yama Feb 8, 2019
ccbb6dd
#290 build using Babel
zaki-yama Feb 10, 2019
40669c5
#290 Add TypeScript's type-check script
zaki-yama Feb 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
{
"presets": ["env", "react"],
"plugins": [
"transform-object-rest-spread",
"transform-runtime",
"transform-class-properties"
],
"sourceMaps": "inline"
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
],
"sourceMaps": "inline"
}
1 change: 1 addition & 0 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
'rules': {
'jsx-quotes': [2, 'prefer-single'],
'no-nested-ternary': 0,
'no-undef': 0,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stomita
After updating babel-eslint, no-undef errors occured.

The result of `yarn run lint:src` 
yarn run v1.9.4
$ eslint --ext .js src/scripts/**

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/AutoAlign.js
  103:12  error  'propTypes' is not defined               no-undef
  113:12  error  'contextTypes' is not defined            no-undef
  118:5   error  'state' is not defined                   no-undef
  134:5   error  'requestRecalcAlignment' is not defined  no-undef
  147:5   error  'recalcAlignment' is not defined         no-undef

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/Checkbox.js
  18:7  warning  Form controls using a label to identify them must be programmatically associated with the control using htmlFor  jsx-a11y/label-has-for

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/ComponentSettings.js
   8:10  error  'propTypes' is not defined          no-undef
  15:10  error  'childContextTypes' is not defined  no-undef

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/DateInput.js
  17:10  error  'propTypes' is not defined  no-undef

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/Lookup.js
   30:10  error  'propTypes' is not defined              no-undef
   98:10  error  'propTypes' is not defined              no-undef
  154:3   error  'onLookupIconClick' is not defined      no-undef
  158:3   error  'onInputKeyDown' is not defined         no-undef
  185:3   error  'onInputChange' is not defined          no-undef
  190:3   error  'onInputBlur' is not defined            no-undef
  200:3   error  'onScopeMenuClick' is not defined       no-undef
  206:3   error  'onMenuItemClick' is not defined        no-undef
  216:3   error  'handleLookupSearchRef' is not defined  no-undef
  328:10  error  'propTypes' is not defined              no-undef
  490:10  error  'propTypes' is not defined              no-undef
  530:10  error  'isFormElement' is not defined          no-undef

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/Picklist.js
   24:3  error  'onClick' is not defined              no-undef
   31:3  error  'onPicklistItemClick' is not defined  no-undef
   57:3  error  'onPicklistClose' is not defined      no-undef
   63:3  error  'onBlur' is not defined               no-undef
   77:3  error  'onKeydown' is not defined            no-undef
  234:3  error  'renderPicklistItem' is not defined   no-undef

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/Pill.js
  82:15  warning  'icon.category' PropType is defined but prop is never used  react/no-unused-prop-types

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/Radio.js
  8:5  warning  Form controls using a label to identify them must be programmatically associated with the control using htmlFor  jsx-a11y/label-has-for

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/Tabs.js
  184:10  warning  'title' PropType is defined but prop is never used            react/no-unused-prop-types
  189:9   warning  'menu' PropType is defined but prop is never used             react/no-unused-prop-types
  190:14  warning  'menuItems' PropType is defined but prop is never used        react/no-unused-prop-types
  191:13  warning  'menuIcon' PropType is defined but prop is never used         react/no-unused-prop-types
  197:20  warning  'tabItemRenderer' PropType is defined but prop is never used  react/no-unused-prop-types
  249:3   error    'onTabClick' is not defined                                   no-undef
  257:3   error    'onTabKeyDown' is not defined                                 no-undef

/Users/yamazaki/workspace/TypeScript/react-lightning-design-system/src/scripts/Toggle.js
  11:7  warning  Form controls using a label to identify them must be programmatically associated with the control using htmlFor  jsx-a11y/label-has-for

✖ 37 problems (28 errors, 9 warnings)

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Most of the errors seemed to be at where using class property.
I haven't found out why, but I'd like to deal with it in the next PR, when I update all other eslint-related packages.

Package                                   Current Wanted Latest Package Type    URL
eslint                                    3.8.1   3.8.1  5.13.0 devDependencies https://eslint.org
eslint-config-airbnb                      12.0.0  12.0.0 17.1.0 devDependencies https://github.com/airbnb/javascript
eslint-plugin-import                      1.16.0  1.16.0 2.16.0 devDependencies https://github.com/benmosher/eslint-plugin-import
eslint-plugin-jsx-a11y                    2.2.3   2.2.3  6.2.1  devDependencies https://github.com/evcohen/eslint-plugin-jsx-a11y#readme
eslint-plugin-react                       6.4.1   6.4.1  7.12.4 devDependencies https://github.com/yannickcr/eslint-plugin-react

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you using yarn to build ? It should also be updated the yarn.lock to stabilize the dependency.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, it is not caused by the dependency updates, but the parser. It seems OK by disabling it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. Thank you for checking.

'react/jsx-curly-spacing': 0,
'react/no-multi-comp': 0,
'react/jsx-no-bind': 0,
Expand Down
2 changes: 1 addition & 1 deletion .storybook/addons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import 'babel-polyfill';
import '@babel/polyfill';
// To get our default addons (actions and links)
import '@storybook/addon-actions/register';
// To add the knobs addon
Expand Down
2 changes: 1 addition & 1 deletion .storybook/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import 'babel-polyfill';
import '@babel/polyfill';
import svg4everybody from 'svg4everybody';
import { configure, setAddon, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
Expand Down
46 changes: 26 additions & 20 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,17 @@
},
"scripts": {
"storybook": "start-storybook -s ./node_modules/@salesforce-ux/design-system -p 9001 -c .storybook",
"test": "npm-run-all test:jest test:storyshots",
"test": "npm-run-all type-check test:jest test:storyshots",
"test:storyshots": "NODE_ENV=test jest test/storyshots/*.test.js",
"test:jest": "jest test/*-spec.js",
"prepublish": "npm run build",
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"lint": "npm run lint:src && npm run lint:stories && npm run lint:test",
"lint:src": "eslint --ext .js src/scripts/**",
"lint:stories": "eslint --ext .js stories/**",
"lint:test": "eslint --ext .js test/**",
"build": "babel -d lib/ src/",
"build": "babel -d lib/ src/ --extensions \".js,.ts,.tsx\"",
"build:assets": "cp -r node_modules/@salesforce-ux/design-system/assets public",
"build:storybook": "build-storybook -o public",
"deploy": "npm-run-all build:storybook build:assets deploy:ghpage",
Expand All @@ -41,7 +43,7 @@
"author": "Shinichi Tomita <[email protected]>",
"license": "MIT",
"dependencies": {
"babel-runtime": "^6.6.1",
"@babel/runtime": "^7.0.0",
"classnames": "^2.2.5",
"keycoder": "^1.1.1",
"moment": "^2.13.0",
Expand All @@ -51,37 +53,41 @@
"uuid": "^2.0.2"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.1.0",
"@salesforce-ux/design-system": "^2.2.1",
"@storybook/addon-actions": "^3.2.17",
"@storybook/addon-info": "^3.2.17",
"@storybook/addon-knobs": "3.2.17",
"@storybook/addon-storyshots": "^3.2.17",
"@storybook/react": "3.2.17",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.0",
"babel-eslint": "^7.0.0",
"babel-jest": "^16.0.0",
"@storybook/addon-actions": "^4.1.11",
"@storybook/addon-info": "^4.1.11",
"@storybook/addon-knobs": "4.1.11",
"@storybook/addon-storyshots": "^4.1.11",
"@storybook/react": "4.1.11",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.5",
"babel-plugin-espower": "^2.1.2",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-polyfill": "^6.20.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.5.0",
"enzyme": "^2.3.0",
"eslint": "3.8.1",
"eslint-config-airbnb": "12.0.0",
"eslint-plugin-import": "1.16.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"gh-pages": "^0.12.0",
"jest": "^16.0.2",
"jest": "^24.0.0",
"npm-run-all": "^4.0.1",
"power-assert": "^1.4.1",
"react": "^15.3.0",
"react-addons-test-utils": "^15.3.0",
"react-dom": "^15.3.0",
"react-test-renderer": "^15.6.2"
"react-test-renderer": "^15.6.2",
"typescript": "^3.2.4"
},
"jest": {
"testRegex": "(/test/.*|\\.(test|spec))\\.js$",
Expand Down
2 changes: 1 addition & 1 deletion stories/data/CAMPAIGNS.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = `
export default `
Online Seminar
Event
Survey
Expand Down
2 changes: 1 addition & 1 deletion stories/data/CASES.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = new Array(1001).join('_').split('')
export default new Array(1001).join('_').split('')
.map((a, i) => {
const padded = new Array(5).join('0') + i;
return padded.substring(padded.length - 5);
Expand Down
2 changes: 1 addition & 1 deletion stories/data/COMPANIES.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = `
export default `
Apple Inc.
Alphabet Inc.
Microsoft Corporation
Expand Down
2 changes: 1 addition & 1 deletion stories/data/OPPORTUNITIES.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = `
export default `
New License
Professional Service
Additional License
Expand Down
2 changes: 1 addition & 1 deletion stories/data/SCOPES.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = `
export default `
Account
Campaign
Case
Expand Down
Loading