From 51ec8538c6d4c96bb70f345c1ece970c8bb10587 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Fri, 21 Aug 2020 21:34:55 -0400 Subject: [PATCH] Example --- package.json | 13 +----- packages/react-base16-styling/src/index.ts | 11 +++-- packages/react-base16-styling/src/types.ts | 6 +-- .../react-base16-styling/test/index.test.ts | 18 +++++++- packages/react-json-tree/.eslintignore | 1 + packages/react-json-tree/examples/.babelrc | 6 ++- .../react-json-tree/examples/.eslintrc.js | 21 ++++++++++ .../react-json-tree/examples/package.json | 42 +++++-------------- .../examples/src/{App.js => App.tsx} | 33 +++++++++------ .../examples/src/{index.js => index.tsx} | 0 .../react-json-tree/examples/tsconfig.json | 7 ++++ .../examples/tsconfig.webpack.json | 4 ++ .../{webpack.config.js => webpack.config.ts} | 17 ++++---- packages/react-json-tree/package.json | 2 + .../src/createStylingFromTheme.ts | 3 +- packages/react-json-tree/src/index.tsx | 3 ++ yarn.lock | 15 +++++-- 17 files changed, 126 insertions(+), 76 deletions(-) create mode 100644 packages/react-json-tree/examples/.eslintrc.js rename packages/react-json-tree/examples/src/{App.js => App.tsx} (88%) mode change 100755 => 100644 rename packages/react-json-tree/examples/src/{index.js => index.tsx} (100%) mode change 100755 => 100644 create mode 100644 packages/react-json-tree/examples/tsconfig.json create mode 100644 packages/react-json-tree/examples/tsconfig.webpack.json rename packages/react-json-tree/examples/{webpack.config.js => webpack.config.ts} (70%) mode change 100755 => 100644 diff --git a/package.json b/package.json index f3a8e428..8ebdde44 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "@babel/preset-typescript": "^7.10.4", "@types/jest": "^26.0.9", "@types/node": "^14.6.0", + "@types/react": "^16.9.46", + "@types/react-dom": "^16.9.8", "@types/react-test-renderer": "^16.9.3", "@types/webpack": "^4.41.21", "@types/webpack-dev-server": "^3.11.0", @@ -58,16 +60,5 @@ ], "engines": { "node": ">=10.13.0" - }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, - "lint-staged": { - "**/*": [ - "eslint --fix", - "prettier --write" - ] } } diff --git a/packages/react-base16-styling/src/index.ts b/packages/react-base16-styling/src/index.ts index 6f3c36db..8f65c04d 100644 --- a/packages/react-base16-styling/src/index.ts +++ b/packages/react-base16-styling/src/index.ts @@ -29,8 +29,8 @@ const invertColor = (hexString: string) => { return Color.rgb(rgb).hex(); }; -const merger = (styling: Styling) => { - return (prevStyling: Styling) => ({ +const merger = (styling: Partial) => { + return (prevStyling: Partial) => ({ className: [prevStyling.className, styling.className] .filter(Boolean) .join(' '), @@ -109,7 +109,10 @@ const mergeStyling = ( case 'function': return (styling, ...args) => (customStyling as StylingValueFunction)( - (defaultStyling as StylingValueFunction)(styling, ...args), + (defaultStyling as StylingValueFunction)( + styling, + ...args + ) as Styling, ...args ); } @@ -143,7 +146,7 @@ const getStylingByKeys = ( ...args: any[] ): Styling => { if (keys === null) { - return mergedStyling as Styling; + return (mergedStyling as unknown) as Styling; } if (!Array.isArray(keys)) { diff --git a/packages/react-base16-styling/src/types.ts b/packages/react-base16-styling/src/types.ts index f5e93f0e..7226b163 100644 --- a/packages/react-base16-styling/src/types.ts +++ b/packages/react-base16-styling/src/types.ts @@ -2,14 +2,14 @@ import { Base16Theme } from 'base16'; import * as CSS from 'csstype'; export interface Styling { - className?: string; - style?: CSS.Properties; + className: string; + style: CSS.Properties; } export type StylingValueFunction = ( styling: Styling, ...rest: any[] -) => Styling; +) => Partial; export type StylingValue = | string diff --git a/packages/react-base16-styling/test/index.test.ts b/packages/react-base16-styling/test/index.test.ts index 1ee0e6ae..e45bf789 100644 --- a/packages/react-base16-styling/test/index.test.ts +++ b/packages/react-base16-styling/test/index.test.ts @@ -84,6 +84,9 @@ const getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({ additionalStyle: { border: 0, }, + testFuncNoStyle: (_, arg: string) => ({ + className: `testClass--${arg}`, + }), }); test('invertTheme', () => { @@ -124,7 +127,14 @@ test('createStyling (custom)', () => { testClass: 'customClass', testStyle: { height: 0 }, testFunc: (styling: Styling, arg: string) => ({ - className: `${styling.className!} customClass--${arg}`, + className: `${styling.className} customClass--${arg}`, + style: { + ...styling.style, + border: 0, + }, + }), + testFuncNoStyle: (styling: Styling, arg: string) => ({ + className: `${styling.className} customClass--${arg}`, style: { ...styling.style, border: 0, @@ -146,6 +156,12 @@ test('createStyling (custom)', () => { border: 0, }, }); + expect(customStyling('testFuncNoStyle', 'mod')).toEqual({ + className: 'testClass--mod customClass--mod', + style: { + border: 0, + }, + }); customStyling = styling({ testClass: () => ({ diff --git a/packages/react-json-tree/.eslintignore b/packages/react-json-tree/.eslintignore index 79681bfb..ed3bf25e 100644 --- a/packages/react-json-tree/.eslintignore +++ b/packages/react-json-tree/.eslintignore @@ -1,2 +1,3 @@ +examples lib umd diff --git a/packages/react-json-tree/examples/.babelrc b/packages/react-json-tree/examples/.babelrc index e60d3036..0d42ef44 100644 --- a/packages/react-json-tree/examples/.babelrc +++ b/packages/react-json-tree/examples/.babelrc @@ -1,4 +1,8 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react"], + "presets": [ + "@babel/preset-env", + "@babel/preset-react", + "@babel/preset-typescript" + ], "plugins": ["@babel/plugin-proposal-class-properties"] } diff --git a/packages/react-json-tree/examples/.eslintrc.js b/packages/react-json-tree/examples/.eslintrc.js new file mode 100644 index 00000000..b6ad52e0 --- /dev/null +++ b/packages/react-json-tree/examples/.eslintrc.js @@ -0,0 +1,21 @@ +module.exports = { + extends: '../../../.eslintrc', + overrides: [ + { + files: ['*.ts', '*.tsx'], + extends: '../../../eslintrc.ts.react.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./tsconfig.json'], + }, + }, + { + files: ['webpack.config.ts'], + extends: '../../../eslintrc.ts.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./tsconfig.webpack.json'], + }, + }, + ], +}; diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json index 6279c6f9..a57da8d1 100644 --- a/packages/react-json-tree/examples/package.json +++ b/packages/react-json-tree/examples/package.json @@ -2,45 +2,25 @@ "name": "react-json-tree-example", "version": "1.0.1", "description": "React-Json-Tree example", - "private": true, + "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree/examples", + "bugs": { + "url": "https://github.com/reduxjs/redux-devtools/issues" + }, + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/reduxjs/redux-devtools.git" + }, "scripts": { "start": "webpack-dev-server --open", "stats": "NODE_ENV=production webpack --json > dist/stats.json" }, - "repository": { - "type": "git", - "url": "https://github.com/gaearon/react-hot-boilerplate.git" - }, - "keywords": [ - "react", - "reactjs", - "boilerplate", - "hot", - "reload", - "hmr", - "live", - "edit", - "webpack" - ], - "license": "MIT", - "bugs": { - "url": "https://github.com/gaearon/react-hot-boilerplate/issues" - }, - "homepage": "https://github.com/gaearon/react-hot-boilerplate", - "devDependencies": { - "@babel/core": "^7.11.1", - "@babel/plugin-proposal-class-properties": "^7.10.4", - "@babel/preset-env": "^7.11.0", - "@babel/preset-react": "^7.10.4", - "babel-loader": "^8.1.0", - "webpack": "^4.44.1", - "webpack-dev-server": "^3.11.0" - }, "dependencies": { "immutable": "^4.0.0-rc.12", "react": "^16.13.1", "react-base16-styling": "^0.7.0", "react-dom": "^16.13.1", "react-json-tree": "^0.12.1" - } + }, + "private": true } diff --git a/packages/react-json-tree/examples/src/App.js b/packages/react-json-tree/examples/src/App.tsx old mode 100755 new mode 100644 similarity index 88% rename from packages/react-json-tree/examples/src/App.js rename to packages/react-json-tree/examples/src/App.tsx index be3e19e1..e79e4d01 --- a/packages/react-json-tree/examples/src/App.js +++ b/packages/react-json-tree/examples/src/App.tsx @@ -1,15 +1,15 @@ import React from 'react'; import { Map } from 'immutable'; -import JSONTree from 'react-json-tree'; +import JSONTree, { StylingValue } from 'react-json-tree'; -const getLabelStyle = ({ style }, nodeType, expanded) => ({ +const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({ style: { ...style, textTransform: expanded ? 'uppercase' : style.textTransform, }, }); -const getBoolStyle = ({ style }, nodeType) => ({ +const getBoolStyle: StylingValue = ({ style }, nodeType) => ({ style: { ...style, border: nodeType === 'Boolean' ? '1px solid #DD3333' : style.border, @@ -17,14 +17,14 @@ const getBoolStyle = ({ style }, nodeType) => ({ }, }); -const getItemString = (type) => ( +const getItemString = (type: string) => ( {' // '} {type} ); -const getValueLabelStyle = ({ style }, nodeType, keyPath) => ({ +const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({ style: { ...style, color: @@ -37,10 +37,17 @@ const getValueLabelStyle = ({ style }, nodeType, keyPath) => ({ const longString = 'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.'; // eslint-disable-line max-len -const Custom = function (value) { - this.value = value; -}; -Custom.prototype[Symbol.toStringTag] = 'Custom'; +class Custom { + value: unknown; + + constructor(value: unknown) { + this.value = value; + } + + get [Symbol.toStringTag]() { + return 'Custom'; + } +} const data = { array: [1, 2, 3], @@ -64,16 +71,18 @@ const data = { }, }, baz: undefined, - func: function User() {}, + func: function User() { + // noop + }, }, emptyObject: {}, symbol: Symbol('value'), // eslint-disable-next-line new-cap - immutable: Map([ + immutable: Map([ ['key', 'value'], [{ objectKey: 'value' }, { objectKey: 'value' }], ]), - map: new window.Map([ + map: new window.Map([ ['key', 'value'], [0, 'value'], [{ objectKey: 'value' }, { objectKey: 'value' }], diff --git a/packages/react-json-tree/examples/src/index.js b/packages/react-json-tree/examples/src/index.tsx old mode 100755 new mode 100644 similarity index 100% rename from packages/react-json-tree/examples/src/index.js rename to packages/react-json-tree/examples/src/index.tsx diff --git a/packages/react-json-tree/examples/tsconfig.json b/packages/react-json-tree/examples/tsconfig.json new file mode 100644 index 00000000..47fb1215 --- /dev/null +++ b/packages/react-json-tree/examples/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../tsconfig.react.base.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": ["src"] +} diff --git a/packages/react-json-tree/examples/tsconfig.webpack.json b/packages/react-json-tree/examples/tsconfig.webpack.json new file mode 100644 index 00000000..95fbb8a6 --- /dev/null +++ b/packages/react-json-tree/examples/tsconfig.webpack.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../tsconfig.base.json", + "include": ["webpack.config.ts"] +} diff --git a/packages/react-json-tree/examples/webpack.config.js b/packages/react-json-tree/examples/webpack.config.ts old mode 100755 new mode 100644 similarity index 70% rename from packages/react-json-tree/examples/webpack.config.js rename to packages/react-json-tree/examples/webpack.config.ts index 9633b3d2..d9ba450e --- a/packages/react-json-tree/examples/webpack.config.js +++ b/packages/react-json-tree/examples/webpack.config.ts @@ -1,11 +1,10 @@ -var path = require('path'); -var webpack = require('webpack'); +import * as path from 'path'; +import * as webpack from 'webpack'; -var isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === 'production'; module.exports = { mode: isProduction ? 'production' : 'development', - devtool: 'eval-source-map', entry: [ !isProduction && 'webpack-dev-server/client?http://localhost:3000', !isProduction && 'webpack/hot/only-dev-server', @@ -16,19 +15,23 @@ module.exports = { filename: 'bundle.js', publicPath: '/static/', }, - plugins: [new webpack.HotModuleReplacementPlugin()], module: { rules: [ { - test: /\.js$/, + test: /\.(js|ts)x$/, loader: 'babel-loader', - include: path.join(__dirname, 'src'), + exclude: /node_modules/, }, ], }, + resolve: { + extensions: ['.js', '.jsx', '.ts', '.tsx'], + }, + plugins: [new webpack.HotModuleReplacementPlugin()], devServer: { historyApiFallback: true, hot: true, port: 3000, }, + devtool: 'eval-source-map', }; diff --git a/packages/react-json-tree/package.json b/packages/react-json-tree/package.json index fe8c3f61..2523bbc6 100644 --- a/packages/react-json-tree/package.json +++ b/packages/react-json-tree/package.json @@ -46,10 +46,12 @@ "prepublishOnly": "npm run clean && npm run build" }, "dependencies": { + "@types/prop-types": "^15.7.3", "prop-types": "^15.7.2", "react-base16-styling": "^0.7.0" }, "peerDependencies": { + "@types/react": "^16.3.18", "react": "^16.3.0" } } diff --git a/packages/react-json-tree/src/createStylingFromTheme.ts b/packages/react-json-tree/src/createStylingFromTheme.ts index b5a0f28a..bb2a5bd5 100644 --- a/packages/react-json-tree/src/createStylingFromTheme.ts +++ b/packages/react-json-tree/src/createStylingFromTheme.ts @@ -1,7 +1,6 @@ import { Base16Theme, createStyling, - Styling, StylingConfig, } from 'react-base16-styling'; import solarized from './themes/solarized'; @@ -56,7 +55,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => { backgroundColor: colors.BACKGROUND_COLOR, }, - value: ({ style }, nodeType, keyPath: (string | number)[]): Styling => ({ + value: ({ style }, nodeType, keyPath: (string | number)[]) => ({ style: { ...style, paddingTop: '0.25em', diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx index 84f3d945..50a5524b 100644 --- a/packages/react-json-tree/src/index.tsx +++ b/packages/react-json-tree/src/index.tsx @@ -11,6 +11,7 @@ import { invertTheme, StylingConfig, StylingFunction, + StylingValue, Theme, } from 'react-base16-styling'; import { CircularPropsPassedThroughJSONTree } from './types'; @@ -174,3 +175,5 @@ export default class JSONTree extends React.Component { ); } } + +export { StylingValue }; diff --git a/yarn.lock b/yarn.lock index 6a4fcc7b..2c13c519 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3279,6 +3279,13 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c" integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA== +"@types/react-dom@^16.9.8": + version "16.9.8" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423" + integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA== + dependencies: + "@types/react" "*" + "@types/react-test-renderer@^16.9.3": version "16.9.3" resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.3.tgz#96bab1860904366f4e848b739ba0e2f67bcae87e" @@ -3293,10 +3300,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.9.11", "@types/react@^16.9.35": - version "16.9.45" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.45.tgz#b43ccf3d8a3d2020e6a48c8c8492e5a4bc10f097" - integrity sha512-vv950slTF5UZ5eDOf13b8qC1SD4rTvkqg3HfaUKzr17U97oeJZAa+dUaIHn0QoOJflNTIt6Pem9MmapULs9dkA== +"@types/react@*", "@types/react@^16.9.11", "@types/react@^16.9.35", "@types/react@^16.9.46": + version "16.9.46" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.46.tgz#f0326cd7adceda74148baa9bff6e918632f5069e" + integrity sha512-dbHzO3aAq1lB3jRQuNpuZ/mnu+CdD3H0WVaaBQA8LTT3S33xhVBUj232T8M3tAhSWJs/D/UqORYUlJNl/8VQZg== dependencies: "@types/prop-types" "*" csstype "^3.0.2"