From 727d753081387a276512e7c9ff5fbdfb443158a6 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Wed, 9 Sep 2020 10:35:22 -0400 Subject: [PATCH] feature(devui): convert to TypeScript (#629) * stash * and those * stash * stash * stash * stash * tests * fix errors * revert * stash * fix lint * prettier --- .eslintignore | 3 - package.json | 10 +- packages/d3-state-visualizer/CHANGELOG.md | 4 - .../examples/tree/CHANGELOG.md | 4 - packages/devui/.babelrc | 11 +- packages/devui/.eslintignore | 1 + packages/devui/.eslintrc.js | 29 ++++ .../devui/.storybook/{main.js => main.ts} | 0 .../.storybook/{preview.js => preview.tsx} | 2 +- packages/devui/.storybook/tsconfig.json | 4 + packages/devui/CHANGELOG.md | 4 - packages/devui/jest.config.js | 4 + packages/devui/package.json | 88 ++++++------ packages/devui/src/Button/Button.js | 92 ------------- .../{Button.stories.js => Button.stories.tsx} | 6 +- packages/devui/src/Button/Button.tsx | 128 ++++++++++++++++++ .../devui/src/Button/{index.js => index.ts} | 0 .../Button/styles/{common.js => common.ts} | 34 +++-- .../Button/styles/{default.js => default.ts} | 14 +- .../src/Button/styles/{index.js => index.ts} | 0 .../styles/{material.js => material.ts} | 10 +- .../src/Container/{index.js => index.tsx} | 21 ++- .../Container/styles/{index.js => index.ts} | 0 ...enu.stories.js => ContextMenu.stories.tsx} | 4 +- .../{ContextMenu.js => ContextMenu.tsx} | 65 ++++++--- .../src/ContextMenu/{data.js => data.ts} | 0 packages/devui/src/ContextMenu/index.js | 1 - packages/devui/src/ContextMenu/index.ts | 1 + .../ContextMenu/styles/{index.js => index.ts} | 16 ++- .../{Dialog.stories.js => Dialog.stories.tsx} | 7 +- .../src/Dialog/{Dialog.js => Dialog.tsx} | 84 +++++++++--- .../devui/src/Dialog/{index.js => index.ts} | 0 .../Dialog/styles/{default.js => default.ts} | 14 +- .../src/Dialog/styles/{index.js => index.ts} | 0 .../styles/{material.js => material.ts} | 10 +- packages/devui/src/Editor/Editor.js | 91 ------------- .../{Editor.stories.js => Editor.stories.tsx} | 12 +- packages/devui/src/Editor/Editor.tsx | 111 +++++++++++++++ .../src/Editor/{WithTabs.js => WithTabs.tsx} | 24 +++- .../devui/src/Editor/{index.js => index.ts} | 0 .../src/Editor/styles/{index.js => index.ts} | 3 +- .../{Form.stories.js => Form.stories.tsx} | 4 +- packages/devui/src/Form/{Form.js => Form.tsx} | 44 +++--- .../devui/src/Form/{index.js => index.ts} | 0 packages/devui/src/Form/schema.js | 89 ------------ packages/devui/src/Form/schema.ts | 91 +++++++++++++ .../src/Form/styles/{index.js => index.ts} | 6 +- packages/devui/src/Form/widgets.js | 31 ----- packages/devui/src/Form/widgets.tsx | 30 ++++ ...on.stories.js => Notification.stories.tsx} | 4 +- .../{Notification.js => Notification.tsx} | 36 +++-- .../src/Notification/{index.js => index.ts} | 0 .../styles/{index.js => index.ts} | 12 +- ...tories.js => SegmentedControl.stories.tsx} | 4 +- ...gmentedControl.js => SegmentedControl.tsx} | 37 +++-- .../SegmentedControl/{index.js => index.tsx} | 0 .../styles/{index.js => index.ts} | 12 +- .../{Select.stories.js => Select.stories.tsx} | 7 +- .../src/Select/{Select.js => Select.tsx} | 31 +++-- packages/devui/src/Select/index.js | 1 - packages/devui/src/Select/index.ts | 1 + .../src/Select/{options.js => options.ts} | 0 .../{Slider.stories.js => Slider.stories.tsx} | 4 +- .../src/Slider/{Slider.js => Slider.tsx} | 47 ++++--- packages/devui/src/Slider/index.js | 1 - packages/devui/src/Slider/index.ts | 1 + .../Slider/styles/{common.js => common.ts} | 6 +- .../Slider/styles/{default.js => default.ts} | 16 ++- .../src/Slider/styles/{index.js => index.ts} | 0 .../styles/{material.js => material.ts} | 11 +- .../{Tabs.stories.js => Tabs.stories.tsx} | 8 +- packages/devui/src/Tabs/{Tabs.js => Tabs.tsx} | 61 +++++---- .../Tabs/{TabsHeader.js => TabsHeader.tsx} | 115 ++++++++++------ packages/devui/src/Tabs/{data.js => data.tsx} | 8 +- packages/devui/src/Tabs/index.js | 1 - packages/devui/src/Tabs/index.ts | 1 + .../src/Tabs/styles/{common.js => common.ts} | 7 +- .../Tabs/styles/{default.js => default.ts} | 12 +- .../src/Tabs/styles/{index.js => index.ts} | 0 .../Tabs/styles/{material.js => material.ts} | 9 +- ...Toolbar.stories.js => Toolbar.stories.tsx} | 86 +++++++++++- packages/devui/src/Toolbar/index.js | 3 - packages/devui/src/Toolbar/index.ts | 3 + .../Toolbar/styles/{Divider.js => Divider.ts} | 0 .../Toolbar/styles/{Spacer.js => Spacer.ts} | 0 .../Toolbar/styles/{Toolbar.js => Toolbar.ts} | 14 +- .../{atom-one-dark.js => atom-one-dark.ts} | 0 .../colorSchemes/{default.js => default.ts} | 1 + .../colorSchemes/{dracula.js => dracula.ts} | 0 .../src/colorSchemes/{github.js => github.ts} | 0 .../src/colorSchemes/{index.js => index.ts} | 0 .../colorSchemes/{ir-black.js => ir-black.ts} | 0 .../{macintosh.js => macintosh.ts} | 0 .../colorSchemes/{materia.js => materia.ts} | 0 .../{oceanic-next.js => oceanic-next.ts} | 0 .../devui/src/colorSchemes/{phd.js => phd.ts} | 0 .../src/colorSchemes/{pico.js => pico.ts} | 0 .../{solar-flare.js => solar-flare.ts} | 0 .../{spacemacs.js => spacemacs.ts} | 0 .../colorSchemes/{unikitty.js => unikitty.ts} | 0 .../colorSchemes/{woodland.js => woodland.ts} | 0 packages/devui/src/{index.js => index.ts} | 2 +- packages/devui/src/{presets.js => presets.ts} | 0 .../src/simple-element-resize-detector.ts | 6 + packages/devui/src/themes/default.js | 14 -- packages/devui/src/themes/default.ts | 34 +++++ .../devui/src/themes/{index.js => index.ts} | 0 .../src/themes/{material.js => material.ts} | 4 +- .../utils/{animations.js => animations.ts} | 5 +- packages/devui/src/utils/autoPrefix.js | 2 - packages/devui/src/utils/autoPrefix.ts | 5 + .../devui/src/utils/{color.js => color.ts} | 7 +- .../devui/src/utils/createStyledComponent.js | 22 --- .../devui/src/utils/createStyledComponent.ts | 78 +++++++++++ .../devui/src/utils/createThemedComponent.js | 13 -- .../devui/src/utils/createThemedComponent.tsx | 41 ++++++ .../{invertColors.js => invertColors.ts} | 4 +- .../devui/src/utils/{theme.js => theme.ts} | 20 ++- .../tests/{Button.test.js => Button.test.tsx} | 0 .../{Container.test.js => Container.test.tsx} | 2 +- ...ntextMenu.test.js => ContextMenu.test.tsx} | 9 +- .../tests/{Dialog.test.js => Dialog.test.tsx} | 55 +++++++- .../tests/{Editor.test.js => Editor.test.tsx} | 9 +- .../tests/{Form.test.js => Form.test.tsx} | 0 ...fication.test.js => Notification.test.tsx} | 7 +- ...trol.test.js => SegmentedControl.test.tsx} | 4 +- .../tests/{Select.test.js => Select.test.tsx} | 19 ++- .../tests/{Slider.test.js => Slider.test.tsx} | 15 +- .../tests/{Tabs.test.js => Tabs.test.tsx} | 25 +++- .../{Toolbar.test.js => Toolbar.test.tsx} | 0 ...tton.test.js.snap => Button.test.tsx.snap} | 0 ...r.test.js.snap => Container.test.tsx.snap} | 0 ...test.js.snap => ContextMenu.test.tsx.snap} | 0 ...alog.test.js.snap => Dialog.test.tsx.snap} | 0 ...itor.test.js.snap => Editor.test.tsx.snap} | 1 + .../{Form.test.js.snap => Form.test.tsx.snap} | 0 ...est.js.snap => Notification.test.tsx.snap} | 0 ...js.snap => SegmentedControl.test.tsx.snap} | 0 ...lect.test.js.snap => Select.test.tsx.snap} | 8 +- ...ider.test.js.snap => Slider.test.tsx.snap} | 1 - .../{Tabs.test.js.snap => Tabs.test.tsx.snap} | 0 ...bar.test.js.snap => Toolbar.test.tsx.snap} | 0 packages/devui/tests/{setup.js => setup.ts} | 0 packages/devui/tests/tsconfig.json | 4 + packages/devui/tsconfig.json | 7 + packages/react-base16-styling/CHANGELOG.md | 12 +- packages/react-dock/CHANGELOG.md | 7 +- packages/react-json-tree/CHANGELOG.md | 14 +- .../react-json-tree/examples/CHANGELOG.md | 9 +- .../redux-devtools-chart-monitor/CHANGELOG.md | 4 - packages/redux-devtools-cli/CHANGELOG.md | 4 - packages/redux-devtools-core/CHANGELOG.md | 7 +- .../redux-devtools-dock-monitor/CHANGELOG.md | 11 +- .../redux-devtools-inspector/CHANGELOG.md | 7 +- .../redux-devtools-inspector/jest.config.js | 3 - .../redux-devtools-inspector/package.json | 1 + .../redux-devtools-instrument/CHANGELOG.md | 9 +- .../redux-devtools-log-monitor/CHANGELOG.md | 11 +- .../redux-devtools-serialize/CHANGELOG.md | 7 +- .../CHANGELOG.md | 4 - .../examples/todomvc/CHANGELOG.md | 4 - .../CHANGELOG.md | 4 - .../redux-devtools-trace-monitor/CHANGELOG.md | 4 - packages/redux-devtools/CHANGELOG.md | 16 +-- .../examples/counter/CHANGELOG.md | 9 +- .../examples/todomvc/CHANGELOG.md | 7 +- yarn.lock | 71 +++++++++- 167 files changed, 1563 insertions(+), 852 deletions(-) create mode 100644 packages/devui/.eslintignore create mode 100644 packages/devui/.eslintrc.js rename packages/devui/.storybook/{main.js => main.ts} (100%) rename packages/devui/.storybook/{preview.js => preview.tsx} (97%) create mode 100644 packages/devui/.storybook/tsconfig.json create mode 100644 packages/devui/jest.config.js delete mode 100644 packages/devui/src/Button/Button.js rename packages/devui/src/Button/{Button.stories.js => Button.stories.tsx} (86%) create mode 100644 packages/devui/src/Button/Button.tsx rename packages/devui/src/Button/{index.js => index.ts} (100%) rename packages/devui/src/Button/styles/{common.js => common.ts} (84%) rename packages/devui/src/Button/styles/{default.js => default.ts} (73%) rename packages/devui/src/Button/styles/{index.js => index.ts} (100%) rename packages/devui/src/Button/styles/{material.js => material.ts} (78%) rename packages/devui/src/Container/{index.js => index.tsx} (63%) rename packages/devui/src/Container/styles/{index.js => index.ts} (100%) rename packages/devui/src/ContextMenu/{ContextMenu.stories.js => ContextMenu.stories.tsx} (81%) rename packages/devui/src/ContextMenu/{ContextMenu.js => ContextMenu.tsx} (56%) rename packages/devui/src/ContextMenu/{data.js => data.ts} (100%) delete mode 100644 packages/devui/src/ContextMenu/index.js create mode 100644 packages/devui/src/ContextMenu/index.ts rename packages/devui/src/ContextMenu/styles/{index.js => index.ts} (74%) rename packages/devui/src/Dialog/{Dialog.stories.js => Dialog.stories.tsx} (82%) rename packages/devui/src/Dialog/{Dialog.js => Dialog.tsx} (58%) rename packages/devui/src/Dialog/{index.js => index.ts} (100%) rename packages/devui/src/Dialog/styles/{default.js => default.ts} (88%) rename packages/devui/src/Dialog/styles/{index.js => index.ts} (100%) rename packages/devui/src/Dialog/styles/{material.js => material.ts} (89%) delete mode 100644 packages/devui/src/Editor/Editor.js rename packages/devui/src/Editor/{Editor.stories.js => Editor.stories.tsx} (75%) create mode 100644 packages/devui/src/Editor/Editor.tsx rename packages/devui/src/Editor/{WithTabs.js => WithTabs.tsx} (55%) rename packages/devui/src/Editor/{index.js => index.ts} (100%) rename packages/devui/src/Editor/styles/{index.js => index.ts} (97%) rename packages/devui/src/Form/{Form.stories.js => Form.stories.tsx} (75%) rename packages/devui/src/Form/{Form.js => Form.tsx} (54%) rename packages/devui/src/Form/{index.js => index.ts} (100%) delete mode 100644 packages/devui/src/Form/schema.js create mode 100644 packages/devui/src/Form/schema.ts rename packages/devui/src/Form/styles/{index.js => index.ts} (97%) delete mode 100644 packages/devui/src/Form/widgets.js create mode 100644 packages/devui/src/Form/widgets.tsx rename packages/devui/src/Notification/{Notification.stories.js => Notification.stories.tsx} (79%) rename packages/devui/src/Notification/{Notification.js => Notification.tsx} (64%) rename packages/devui/src/Notification/{index.js => index.ts} (100%) rename packages/devui/src/Notification/styles/{index.js => index.ts} (76%) rename packages/devui/src/SegmentedControl/{SegmentedControl.stories.js => SegmentedControl.stories.tsx} (79%) rename packages/devui/src/SegmentedControl/{SegmentedControl.js => SegmentedControl.tsx} (54%) rename packages/devui/src/SegmentedControl/{index.js => index.tsx} (100%) rename packages/devui/src/SegmentedControl/styles/{index.js => index.ts} (79%) rename packages/devui/src/Select/{Select.stories.js => Select.stories.tsx} (75%) rename packages/devui/src/Select/{Select.js => Select.tsx} (56%) delete mode 100644 packages/devui/src/Select/index.js create mode 100644 packages/devui/src/Select/index.ts rename packages/devui/src/Select/{options.js => options.ts} (100%) rename packages/devui/src/Slider/{Slider.stories.js => Slider.stories.tsx} (82%) rename packages/devui/src/Slider/{Slider.js => Slider.tsx} (66%) delete mode 100644 packages/devui/src/Slider/index.js create mode 100644 packages/devui/src/Slider/index.ts rename packages/devui/src/Slider/styles/{common.js => common.ts} (53%) rename packages/devui/src/Slider/styles/{default.js => default.ts} (86%) rename packages/devui/src/Slider/styles/{index.js => index.ts} (100%) rename packages/devui/src/Slider/styles/{material.js => material.ts} (87%) rename packages/devui/src/Tabs/{Tabs.stories.js => Tabs.stories.tsx} (79%) rename packages/devui/src/Tabs/{Tabs.js => Tabs.tsx} (54%) rename packages/devui/src/Tabs/{TabsHeader.js => TabsHeader.tsx} (64%) rename packages/devui/src/Tabs/{data.js => data.tsx} (74%) delete mode 100644 packages/devui/src/Tabs/index.js create mode 100644 packages/devui/src/Tabs/index.ts rename packages/devui/src/Tabs/styles/{common.js => common.ts} (79%) rename packages/devui/src/Tabs/styles/{default.js => default.ts} (85%) rename packages/devui/src/Tabs/styles/{index.js => index.ts} (100%) rename packages/devui/src/Tabs/styles/{material.js => material.ts} (83%) rename packages/devui/src/Toolbar/{Toolbar.stories.js => Toolbar.stories.tsx} (65%) delete mode 100644 packages/devui/src/Toolbar/index.js create mode 100644 packages/devui/src/Toolbar/index.ts rename packages/devui/src/Toolbar/styles/{Divider.js => Divider.ts} (100%) rename packages/devui/src/Toolbar/styles/{Spacer.js => Spacer.ts} (100%) rename packages/devui/src/Toolbar/styles/{Toolbar.js => Toolbar.ts} (76%) rename packages/devui/src/colorSchemes/{atom-one-dark.js => atom-one-dark.ts} (100%) rename packages/devui/src/colorSchemes/{default.js => default.ts} (89%) rename packages/devui/src/colorSchemes/{dracula.js => dracula.ts} (100%) rename packages/devui/src/colorSchemes/{github.js => github.ts} (100%) rename packages/devui/src/colorSchemes/{index.js => index.ts} (100%) rename packages/devui/src/colorSchemes/{ir-black.js => ir-black.ts} (100%) rename packages/devui/src/colorSchemes/{macintosh.js => macintosh.ts} (100%) rename packages/devui/src/colorSchemes/{materia.js => materia.ts} (100%) rename packages/devui/src/colorSchemes/{oceanic-next.js => oceanic-next.ts} (100%) rename packages/devui/src/colorSchemes/{phd.js => phd.ts} (100%) rename packages/devui/src/colorSchemes/{pico.js => pico.ts} (100%) rename packages/devui/src/colorSchemes/{solar-flare.js => solar-flare.ts} (100%) rename packages/devui/src/colorSchemes/{spacemacs.js => spacemacs.ts} (100%) rename packages/devui/src/colorSchemes/{unikitty.js => unikitty.ts} (100%) rename packages/devui/src/colorSchemes/{woodland.js => woodland.ts} (100%) rename packages/devui/src/{index.js => index.ts} (88%) mode change 100755 => 100644 rename packages/devui/src/{presets.js => presets.ts} (100%) create mode 100644 packages/devui/src/simple-element-resize-detector.ts delete mode 100644 packages/devui/src/themes/default.js create mode 100644 packages/devui/src/themes/default.ts rename packages/devui/src/themes/{index.js => index.ts} (100%) rename packages/devui/src/themes/{material.js => material.ts} (76%) rename packages/devui/src/utils/{animations.js => animations.ts} (90%) delete mode 100644 packages/devui/src/utils/autoPrefix.js create mode 100644 packages/devui/src/utils/autoPrefix.ts rename packages/devui/src/utils/{color.js => color.ts} (56%) delete mode 100644 packages/devui/src/utils/createStyledComponent.js create mode 100644 packages/devui/src/utils/createStyledComponent.ts delete mode 100644 packages/devui/src/utils/createThemedComponent.js create mode 100644 packages/devui/src/utils/createThemedComponent.tsx rename packages/devui/src/utils/{invertColors.js => invertColors.ts} (76%) rename packages/devui/src/utils/{theme.js => theme.ts} (64%) rename packages/devui/tests/{Button.test.js => Button.test.tsx} (100%) rename packages/devui/tests/{Container.test.js => Container.test.tsx} (83%) rename packages/devui/tests/{ContextMenu.test.js => ContextMenu.test.tsx} (82%) rename packages/devui/tests/{Dialog.test.js => Dialog.test.tsx} (50%) rename packages/devui/tests/{Editor.test.js => Editor.test.tsx} (88%) rename packages/devui/tests/{Form.test.js => Form.test.tsx} (100%) rename packages/devui/tests/{Notification.test.js => Notification.test.tsx} (88%) rename packages/devui/tests/{SegmentedControl.test.js => SegmentedControl.test.tsx} (93%) rename packages/devui/tests/{Select.test.js => Select.test.tsx} (77%) rename packages/devui/tests/{Slider.test.js => Slider.test.tsx} (75%) rename packages/devui/tests/{Tabs.test.js => Tabs.test.tsx} (69%) rename packages/devui/tests/{Toolbar.test.js => Toolbar.test.tsx} (100%) rename packages/devui/tests/__snapshots__/{Button.test.js.snap => Button.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{Container.test.js.snap => Container.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{ContextMenu.test.js.snap => ContextMenu.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{Dialog.test.js.snap => Dialog.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{Editor.test.js.snap => Editor.test.tsx.snap} (93%) rename packages/devui/tests/__snapshots__/{Form.test.js.snap => Form.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{Notification.test.js.snap => Notification.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{SegmentedControl.test.js.snap => SegmentedControl.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{Select.test.js.snap => Select.test.tsx.snap} (99%) rename packages/devui/tests/__snapshots__/{Slider.test.js.snap => Slider.test.tsx.snap} (96%) rename packages/devui/tests/__snapshots__/{Tabs.test.js.snap => Tabs.test.tsx.snap} (100%) rename packages/devui/tests/__snapshots__/{Toolbar.test.js.snap => Toolbar.test.tsx.snap} (100%) rename packages/devui/tests/{setup.js => setup.ts} (100%) create mode 100644 packages/devui/tests/tsconfig.json create mode 100644 packages/devui/tsconfig.json delete mode 100644 packages/redux-devtools-inspector/jest.config.js diff --git a/.eslintignore b/.eslintignore index 65bea899..b8937bc4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,6 +7,3 @@ build coverage node_modules __snapshots__ - -# Ignore until TS linting is configured in redux-devtools package -packages/redux-devtools/index.d.ts diff --git a/package.json b/package.json index 41b77f38..c21a3c04 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,11 @@ "raw-loader": "^4.0.1", "rimraf": "^3.0.2", "style-loader": "^1.2.1", + "stylelint": "^13.6.1", + "stylelint-config-prettier": "^8.0.2", + "stylelint-config-standard": "^20.0.0", + "stylelint-config-styled-components": "^0.1.1", + "stylelint-processor-styled-components": "^1.10.0", "ts-jest": "^26.2.0", "ts-node": "^9.0.0", "typescript": "^3.9.7", @@ -40,14 +45,11 @@ }, "scripts": { "lerna": "lerna", - "build": "lerna run prepare --since master --stream --sort -- --scripts-prepend-node-path", "build:all": "lerna run build", "publish": "lerna publish", "canary": "lerna publish --canary preminor --npm-tag alpha", "next": "lerna publish --bump prerelease --npm-tag next", - "lint": "eslint \"**/*.{js,jsx,ts,tsx}\" --cache", - "lint:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix --cache", - "lint:all": "eslint \"**/*.{js,jsx,ts,tsx}\"", + "lint:all": "lerna run lint", "prettify": "prettier --write .", "prettier:check": "prettier --check .", "test": "jest --onlyChanged", diff --git a/packages/d3-state-visualizer/CHANGELOG.md b/packages/d3-state-visualizer/CHANGELOG.md index 5936520d..8a689588 100644 --- a/packages/d3-state-visualizer/CHANGELOG.md +++ b/packages/d3-state-visualizer/CHANGELOG.md @@ -7,10 +7,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package d3-state-visualizer - - - - ## 1.3.3 (2020-08-14) **Note:** Version bump only for package d3-state-visualizer diff --git a/packages/d3-state-visualizer/examples/tree/CHANGELOG.md b/packages/d3-state-visualizer/examples/tree/CHANGELOG.md index 39e1dabd..924d357c 100644 --- a/packages/d3-state-visualizer/examples/tree/CHANGELOG.md +++ b/packages/d3-state-visualizer/examples/tree/CHANGELOG.md @@ -7,10 +7,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package d3-state-visualizer-tree-example - - - - ## 0.0.1 (2020-08-14) **Note:** Version bump only for package d3-state-visualizer-tree-example diff --git a/packages/devui/.babelrc b/packages/devui/.babelrc index 2d8ea82b..0d42ef44 100755 --- a/packages/devui/.babelrc +++ b/packages/devui/.babelrc @@ -1,7 +1,8 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": [ - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-export-default-from" - ] + "presets": [ + "@babel/preset-env", + "@babel/preset-react", + "@babel/preset-typescript" + ], + "plugins": ["@babel/plugin-proposal-class-properties"] } diff --git a/packages/devui/.eslintignore b/packages/devui/.eslintignore new file mode 100644 index 00000000..a65b4177 --- /dev/null +++ b/packages/devui/.eslintignore @@ -0,0 +1 @@ +lib diff --git a/packages/devui/.eslintrc.js b/packages/devui/.eslintrc.js new file mode 100644 index 00000000..c7232941 --- /dev/null +++ b/packages/devui/.eslintrc.js @@ -0,0 +1,29 @@ +module.exports = { + extends: '../../.eslintrc', + overrides: [ + { + files: ['*.ts', '*.tsx'], + extends: '../../eslintrc.ts.react.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./tsconfig.json'], + }, + }, + { + files: ['tests/*.ts', 'tests/*.tsx'], + extends: '../../eslintrc.ts.react.jest.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./tests/tsconfig.json'], + }, + }, + { + files: ['.storybook/tests/*.ts', '.storybook/tests/*.tsx'], + extends: '../../eslintrc.ts.react.jest.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./.storybook/tsconfig.json'], + }, + }, + ], +}; diff --git a/packages/devui/.storybook/main.js b/packages/devui/.storybook/main.ts similarity index 100% rename from packages/devui/.storybook/main.js rename to packages/devui/.storybook/main.ts diff --git a/packages/devui/.storybook/preview.js b/packages/devui/.storybook/preview.tsx similarity index 97% rename from packages/devui/.storybook/preview.js rename to packages/devui/.storybook/preview.tsx index 48e5eabc..47b89177 100644 --- a/packages/devui/.storybook/preview.js +++ b/packages/devui/.storybook/preview.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Container } from '../src'; import { listSchemes, listThemes } from '../src/utils/theme'; -import '../src/presets.js'; +import '../src/presets'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/packages/devui/.storybook/tsconfig.json b/packages/devui/.storybook/tsconfig.json new file mode 100644 index 00000000..ca19def4 --- /dev/null +++ b/packages/devui/.storybook/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../tsconfig.react.base.json", + "include": ["../src", "."] +} diff --git a/packages/devui/CHANGELOG.md b/packages/devui/CHANGELOG.md index c673e227..989d09c5 100644 --- a/packages/devui/CHANGELOG.md +++ b/packages/devui/CHANGELOG.md @@ -7,10 +7,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package devui - - - - # [1.0.0-5](https://github.com/reduxjs/redux-devtools/compare/devui@1.0.0-4...devui@1.0.0-5) (2020-08-14) **Note:** Version bump only for package devui diff --git a/packages/devui/jest.config.js b/packages/devui/jest.config.js new file mode 100644 index 00000000..afe39ab7 --- /dev/null +++ b/packages/devui/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + preset: 'ts-jest', + setupFilesAfterEnv: ['/tests/setup.ts'], +}; diff --git a/packages/devui/package.json b/packages/devui/package.json index 30a76941..b09a5b82 100755 --- a/packages/devui/package.json +++ b/packages/devui/package.json @@ -2,79 +2,69 @@ "name": "devui", "version": "1.0.0-6", "description": "Reusable React components for building DevTools monitors and apps.", + "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/devui", + "bugs": { + "url": "https://github.com/reduxjs/redux-devtools/issues" + }, + "license": "MIT", + "author": "Mihail Diordiev (https://github.com/zalmoxisus)", "files": [ "lib", "fonts" ], + "main": "lib/index.js", + "types": "lib/index.d.ts", "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, - "author": "Mihail Diordiev (https://github.com/zalmoxisus)", - "license": "MIT", "scripts": { "start": "npm run storybook", - "build": "rimraf ./lib && babel ./src --out-dir ./lib --ignore tests,stories", - "lint:css": "stylelint \"./src/**/*.js\"", - "test:update": "npm run jest -- -u", - "test": "jest --no-cache", "storybook": "start-storybook -p 6006 -s ./fonts", "build-storybook": "build-storybook -s ./fonts", - "prepare": "npm run build", - "prepublishOnly": "npm run test && npm run build" - }, - "bugs": { - "url": "https://github.com/reduxjs/redux-devtools/issues" - }, - "homepage": "https://github.com/reduxjs/redux-devtools", - "devDependencies": { - "@babel/cli": "^7.10.5", - "@babel/core": "^7.11.1", - "@babel/plugin-proposal-class-properties": "^7.10.4", - "@babel/plugin-proposal-decorators": "^7.10.5", - "@babel/plugin-proposal-export-default-from": "^7.10.4", - "@babel/plugin-transform-runtime": "^7.11.0", - "@babel/preset-env": "^7.11.0", - "@babel/preset-react": "^7.10.4", - "@storybook/addon-essentials": "^6.0.21", - "@storybook/react": "^6.0.21", - "babel-loader": "^8.1.0", - "enzyme": "^3.11.0", - "enzyme-adapter-react-16": "^1.15.3", - "enzyme-to-json": "^3.5.0", - "jest": "^26.2.2", - "jsdom": "^16.4.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-is": "^16.13.1", - "react-test-renderer": "^16.13.1", - "rimraf": "^3.0.2", - "stylelint": "^13.6.1", - "stylelint-config-prettier": "^8.0.2", - "stylelint-config-standard": "^20.0.0", - "stylelint-config-styled-components": "^0.1.1", - "stylelint-processor-styled-components": "^1.10.0" - }, - "peerDependencies": { - "react": "^16.3.0" + "build": "npm run build:types && npm run build:js", + "build:types": "tsc --emitDeclarationOnly", + "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline", + "clean": "rimraf lib", + "test": "jest", + "lint": "eslint . --ext .ts,.tsx", + "lint:fix": "eslint . --ext .ts,.tsx --fix", + "lint:css": "stylelint \"./src/**/*.js\"", + "type-check": "tsc --noEmit", + "type-check:watch": "npm run type-check -- --watch", + "preversion": "npm run type-check && npm run lint && npm run test", + "prepublishOnly": "npm run clean && npm run build" }, "dependencies": { "base16": "^1.0.0", "codemirror": "^5.56.0", "color": "^3.1.2", + "hoist-non-react-statics": "^3.3.2", "prop-types": "^15.7.2", "react-icons": "^3.10.0", - "react-is": "^16.13.1", "react-jsonschema-form": "^1.8.1", "react-select": "^3.1.0", "redux-devtools-themes": "^1.0.0", "simple-element-resize-detector": "^1.3.0", "styled-components": "^5.1.1" }, - "jest": { - "setupFilesAfterEnv": [ - "/tests/setup.js" - ] + "devDependencies": { + "@storybook/addon-essentials": "^6.0.21", + "@storybook/react": "^6.0.21", + "@types/codemirror": "^0.0.97", + "@types/enzyme": "^3.10.5", + "@types/enzyme-adapter-react-16": "^1.0.6", + "@types/react-jsonschema-form": "^1.7.4", + "@types/react-select": "^3.0.19", + "csstype": "^3.0.2", + "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.3", + "enzyme-to-json": "^3.5.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-is": "^16.13.1" }, - "main": "lib/index.js" + "peerDependencies": { + "react": "^16.3.0" + } } diff --git a/packages/devui/src/Button/Button.js b/packages/devui/src/Button/Button.js deleted file mode 100644 index c172f998..00000000 --- a/packages/devui/src/Button/Button.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import createStyledComponent from '../utils/createStyledComponent'; -import * as styles from './styles'; -import { commonStyle, tooltipStyle } from './styles/common'; - -const ButtonWrapper = createStyledComponent(styles, 'button'); -const TooltipWrapper = createStyledComponent(tooltipStyle); -const CommonWrapper = createStyledComponent(commonStyle); - -export default class Button extends Component { - shouldComponentUpdate(nextProps) { - return ( - nextProps.children !== this.props.children || - nextProps.disabled !== this.props.disabled || - nextProps.mark !== this.props.mark || - nextProps.size !== this.props.size || - nextProps.primary !== this.props.primary || - nextProps.tooltipPosition !== this.props.tooltipPosition || - nextProps.title !== this.props.title - ); - } - - onMouseUp = (e) => { - e.target.blur(); - }; - - render() { - const button = ( - - {this.props.children} - - ); - - const Wrapper = this.props.title ? TooltipWrapper : CommonWrapper; - return ( - - {button} - - ); - } -} - -Button.propTypes = { - children: PropTypes.any.isRequired, - title: PropTypes.string, - tooltipPosition: PropTypes.oneOf([ - 'top', - 'bottom', - 'left', - 'right', - 'bottom-left', - 'bottom-right', - 'top-left', - 'top-right', - ]), - onClick: PropTypes.func, - type: PropTypes.string, - disabled: PropTypes.bool, - primary: PropTypes.bool, - size: PropTypes.oneOf(['big', 'normal', 'small']), - mark: PropTypes.oneOf([ - false, - 'base08', - 'base09', - 'base0A', - 'base0B', - 'base0C', - 'base0D', - 'base0E', - 'base0F', - ]), - theme: PropTypes.object, -}; - -Button.defaultProps = { - tooltipPosition: 'top', -}; diff --git a/packages/devui/src/Button/Button.stories.js b/packages/devui/src/Button/Button.stories.tsx similarity index 86% rename from packages/devui/src/Button/Button.stories.js rename to packages/devui/src/Button/Button.stories.tsx index f87480f0..3ac47574 100644 --- a/packages/devui/src/Button/Button.stories.js +++ b/packages/devui/src/Button/Button.stories.tsx @@ -1,7 +1,9 @@ import React from 'react'; import styled from 'styled-components'; import { MdFiberManualRecord } from 'react-icons/md'; +import { Story } from '@storybook/react'; import Button from './'; +import { ButtonProps } from './Button'; export default { title: 'Button', @@ -16,7 +18,7 @@ const Container = styled.div` align-items: center; `; -const Template = (args) => ( +const Template: Story = (args) => (