From 020d14cff69140061b604023ff7254cc775862ff Mon Sep 17 00:00:00 2001 From: Yannis Petitot <46972108+yadPe@users.noreply.github.com> Date: Mon, 18 Nov 2019 20:37:43 +0100 Subject: [PATCH] Add Reason React + Checkbox in Reason (#86) --- .eslintignore | 3 +- .gitignore | 3 + .vscode/extensions.json | 3 +- bsconfig.json | 28 +++++ package-lock.json | 144 ++++++++++++++++++++++- package.json | 9 +- src/App/components/Settings/Setting.js | 10 +- src/App/components/common/CheckBox.js | 20 +--- src/App/components/common/Checkbox.bs.js | 63 ++++++++++ src/App/components/common/Checkbox.re | 28 +++++ 10 files changed, 288 insertions(+), 23 deletions(-) create mode 100644 bsconfig.json create mode 100644 src/App/components/common/Checkbox.bs.js create mode 100644 src/App/components/common/Checkbox.re diff --git a/.eslintignore b/.eslintignore index 132a4e8..b149d6e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,4 +3,5 @@ build node_modules assets config -scripts \ No newline at end of file +scripts +**/*.bs.js \ No newline at end of file diff --git a/.gitignore b/.gitignore index 900f1b3..22fcffe 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,9 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +lib +.merlin + todo conf.json src/Bot/conf.js diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 7663fdf..f708eaa 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -4,6 +4,7 @@ "recommendations": [ // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp "esbenp.prettier-vscode", - "dbaeumer.vscode-eslint" + "dbaeumer.vscode-eslint", + "jaredly.reason-vscode" ] } diff --git a/bsconfig.json b/bsconfig.json new file mode 100644 index 0000000..b6187fd --- /dev/null +++ b/bsconfig.json @@ -0,0 +1,28 @@ +{ + "name": "beatconnect_client", + "reason": { + "react-jsx": 3 + }, + "sources": [ + { + "dir": "src", + "subdirs": true + } + ], + "package-specs": [ + { + "module": "es6", + "in-source": true + } + ], + "suffix": ".bs.js", + "namespace": true, + "bs-dependencies": ["reason-react", "bs-css"], + "refmt": 3, + "gentypeconfig": { + "language": "untyped", + "shims": { + "ReasonReact": "ReactShim" + } + } +} diff --git a/package-lock.json b/package-lock.json index ad391d3..96e8307 100644 --- a/package-lock.json +++ b/package-lock.json @@ -931,6 +931,64 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz", "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==" }, + "@emotion/cache": { + "version": "10.0.19", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz", + "integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==", + "requires": { + "@emotion/sheet": "0.9.3", + "@emotion/stylis": "0.8.4", + "@emotion/utils": "0.11.2", + "@emotion/weak-memoize": "0.2.4" + } + }, + "@emotion/hash": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz", + "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==" + }, + "@emotion/memoize": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz", + "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==" + }, + "@emotion/serialize": { + "version": "0.11.14", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz", + "integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==", + "requires": { + "@emotion/hash": "0.7.3", + "@emotion/memoize": "0.7.3", + "@emotion/unitless": "0.7.4", + "@emotion/utils": "0.11.2", + "csstype": "^2.5.7" + } + }, + "@emotion/sheet": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz", + "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==" + }, + "@emotion/stylis": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz", + "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==" + }, + "@emotion/unitless": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz", + "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==" + }, + "@emotion/utils": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz", + "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==" + }, + "@emotion/weak-memoize": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz", + "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==" + }, "@hapi/address": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.2.tgz", @@ -2229,6 +2287,23 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-emotion": { + "version": "10.0.23", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz", + "integrity": "sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.7.3", + "@emotion/memoize": "0.7.3", + "@emotion/serialize": "^0.11.14", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + } + }, "babel-plugin-istanbul": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz", @@ -2263,6 +2338,11 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz", "integrity": "sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw==" }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -2802,6 +2882,20 @@ "node-releases": "^1.1.38" } }, + "bs-css": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/bs-css/-/bs-css-11.0.0.tgz", + "integrity": "sha512-bpSwj1VvmWNMoJ5qnsHMQC+Mj0zjL9iwcOhl5ipP7Hfr7v+ZyKqjSMaMK+L1EdukuCp0rJmRD2I/MbS4BHnMmQ==", + "requires": { + "emotion": "^10.0.7" + } + }, + "bs-platform": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/bs-platform/-/bs-platform-5.2.1.tgz", + "integrity": "sha512-3ISP+RBC/NYILiJnphCY0W3RTYpQ11JGa2dBBLVug5fpFZ0qtSaL3ZplD8MyjNeXX2bC7xgrWfgBSn8Tc9om7Q==", + "dev": true + }, "bser": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz", @@ -3560,6 +3654,17 @@ "elliptic": "^6.0.0" } }, + "create-emotion": { + "version": "10.0.14", + "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.14.tgz", + "integrity": "sha512-5G4naKMxokOur+94eDz7iPKBfwzy4wa/+0isnPhxXyosIQHBq7yvBy4jjdZw/nnRm7G3PM7P9Ug8mUmtoqcaHg==", + "requires": { + "@emotion/cache": "^10.0.14", + "@emotion/serialize": "^0.11.8", + "@emotion/sheet": "0.9.3", + "@emotion/utils": "0.11.2" + } + }, "create-hash": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", @@ -3915,6 +4020,11 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz", + "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==" + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -4579,7 +4689,7 @@ } }, "electron-download-manager": { - "version": "git+https://github.com/yadPe/electron-download-manager.git#51e0ed8f1b6dfd063b46f39f24cec73586586805", + "version": "git+https://github.com/yadPe/electron-download-manager.git#0d0754e28c923ec32c3cf172ce8d18f89969949e", "from": "git+https://github.com/yadPe/electron-download-manager.git" }, "electron-is-dev": { @@ -4709,6 +4819,15 @@ "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" }, + "emotion": { + "version": "10.0.23", + "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.23.tgz", + "integrity": "sha512-H/x+5rJUnSvI0rdYsAFyDfuQwE0poZgTMj5TQsKirLzyHVWqs6CiUponsdE86sisXw0vS60j91HAbidJJeDt1g==", + "requires": { + "babel-plugin-emotion": "^10.0.23", + "create-emotion": "^10.0.14" + } + }, "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -6008,6 +6127,11 @@ "pkg-dir": "^3.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -6768,6 +6892,12 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "gentype": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/gentype/-/gentype-3.4.2.tgz", + "integrity": "sha512-0VjtYFR2EZgLYRAHi9eLVoTWQqBksBmQTccMiNEo1FUTjMxe7KaD4nViFKKF6uWYsrDLj6IS4vtq5v5VyhCBmQ==", + "dev": true + }, "get-caller-file": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", @@ -6966,6 +7096,7 @@ "version": "4.5.2", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.2.tgz", "integrity": "sha512-29Zxv/cynYB7mkT1rVWQnV7mGX6v7H/miQ6dbEpYTKq5eJBN7PsRB+ViYJlcT6JINTSu4dVB9kOqEun78h6Exg==", + "dev": true, "requires": { "neo-async": "^2.6.0", "optimist": "^0.6.1", @@ -7507,7 +7638,7 @@ "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==" }, "irc": { - "version": "git+https://github.com/yadPe/node-irc.git#c39f303175957332ddf7c07620566a6185087078", + "version": "git+https://github.com/yadPe/node-irc.git#78a7442744e37bd72ff52e7fcb7c3d8832619aab", "from": "git+https://github.com/yadPe/node-irc.git", "requires": { "irc-colors": "^1.1.0" @@ -12072,6 +12203,15 @@ "util.promisify": "^1.0.0" } }, + "reason-react": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/reason-react/-/reason-react-0.7.0.tgz", + "integrity": "sha512-czR/f0lY5iyLCki9gwftOFF5Zs40l7ZSFmpGK/Z6hx2jBVeFDmIiXB8bAQW/cO6IvtuEt97OmsYueiuOYG9XjQ==", + "requires": { + "react": ">=16.8.1", + "react-dom": ">=16.8.1" + } + }, "recursive-readdir": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz", diff --git a/package.json b/package.json index 1e1a330..94483f3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,9 @@ "lint:fix:prettier": "prettier --write '**/*.{json,jsx,tsx,mjs,js,ts}'", "lint:es": "eslint '**/*.{js,jsx,mjs,ts,tsx}'", "lint:fix:es": "eslint --fix '**/*.{js,jsx,mjs,ts,tsx}'", + "bsb": "bsb -make-world", + "bsb:watch": "bsb -make-world -w", + "bsb:clean": "bsb -clean-world", "go": "electron .", "dist": "cross-env NODE_ENV=production npm run build && npx electron-builder build --win --linux --mac --ia32 --x64", "dist:win": "npm run build && npx electron-builder build --win --x64", @@ -96,6 +99,7 @@ "babel-loader": "8.0.5", "babel-plugin-named-asset-import": "^0.3.2", "babel-preset-react-app": "^9.0.0", + "bs-css": "^11.0.0", "camelcase": "^5.2.0", "case-sensitive-paths-webpack-plugin": "2.2.0", "css-loader": "2.1.1", @@ -128,6 +132,7 @@ "react-jss": "^8.6.1", "react-redux": "^7.1.0", "react-window": "^1.8.5", + "reason-react": "^0.7.0", "redux": "^4.0.1", "resolve": "1.10.0", "sass-loader": "7.1.0", @@ -150,19 +155,21 @@ "@typescript-eslint/eslint-plugin": "1.6.0", "@typescript-eslint/parser": "1.6.0", "babel-eslint": "10.0.1", + "bs-platform": "^5.2.1", "cross-env": "^6.0.3", "electron": "^5.0.5", "electron-builder": "^20.44.4", "eslint": "^6.1.0", "eslint-config-airbnb": "^18.0.1", - "eslint-config-react-app": "^4.0.1", "eslint-config-prettier": "^6.4.0", + "eslint-config-react-app": "^4.0.1", "eslint-loader": "2.1.2", "eslint-plugin-flowtype": "2.50.1", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.16.0", "eslint-plugin-react-hooks": "^1.7.0", + "gentype": "^3.4.2", "is-wsl": "^1.1.0", "jest": "24.7.1", "jest-environment-jsdom-fourteen": "0.1.0", diff --git a/src/App/components/Settings/Setting.js b/src/App/components/Settings/Setting.js index 03ed37f..89c7c0f 100644 --- a/src/App/components/Settings/Setting.js +++ b/src/App/components/Settings/Setting.js @@ -3,8 +3,9 @@ import injectSheet from 'react-jss'; import TextInput from '../common/TextInput'; import Toggle from '../common/Toggle'; import DropDown from '../common/DropDown'; -import CheckBox from '../common/CheckBox'; +// import CheckBox from '../common/CheckBox'; import Button from '../common/Button'; +import { make as CheckBox } from '../common/Checkbox.bs'; const styles = { settingWrapper: { @@ -152,7 +153,12 @@ const Setting = ({ classes, theme, settingCategory }) => { {item.description}

- + ); default: diff --git a/src/App/components/common/CheckBox.js b/src/App/components/common/CheckBox.js index bb2a3e8..bd43ecf 100644 --- a/src/App/components/common/CheckBox.js +++ b/src/App/components/common/CheckBox.js @@ -4,10 +4,8 @@ import { compose } from 'redux'; import { withTheme } from 'theming'; const styles = { - CheckBox: { - margin: 'auto 0', - }, input: { + margin: 'auto 1rem', '-webkit-appearance': 'none', border: ({ theme }) => `1px solid ${theme.palette.primary.main}`, verticalAlign: 'middle', @@ -21,19 +19,9 @@ const styles = { }, }, }; -const CheckBox = ({ classes, checked, onChange, disabled }) => { - return ( -
- -
- ); -}; +const CheckBox = ({ classes, checked, disabled }) => ( + +); export default compose( withTheme, diff --git a/src/App/components/common/Checkbox.bs.js b/src/App/components/common/Checkbox.bs.js new file mode 100644 index 0000000..4109df4 --- /dev/null +++ b/src/App/components/common/Checkbox.bs.js @@ -0,0 +1,63 @@ +// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE + +import * as Css from "bs-css/src/Css.js"; +import * as React from "react"; + +function checkBoxStyle(color, activeColor) { + return Css.style(/* :: */[ + Css.unsafe("-webkit-appearance", "none"), + /* :: */[ + Css.margin2(Css.auto, Css.rem(1)), + /* :: */[ + Css.width(Css.px(20)), + /* :: */[ + Css.height(Css.px(20)), + /* :: */[ + Css.border(Css.px(1), Css.solid, Css.hex(color)), + /* :: */[ + Css.borderRadius(Css.px(2)), + /* :: */[ + Css.verticalAlign(Css.middle), + /* :: */[ + Css.backgroundColor(Css.transparent), + /* :: */[ + Css.selector("&:checked", /* :: */[ + Css.borderColor(Css.hex(activeColor)), + /* :: */[ + Css.backgroundColor(Css.hex(activeColor)), + /* [] */0 + ] + ]), + /* [] */0 + ] + ] + ] + ] + ] + ] + ] + ] + ]); +} + +function Checkbox(Props, _children) { + var checked = Props.checked; + var disabled = Props.disabled; + var color = Props.color; + var activeColor = Props.activeColor; + return React.createElement("input", { + className: checkBoxStyle(color, activeColor), + checked: checked, + disabled: disabled, + type: "checkbox" + }); +} + +var make = Checkbox; + +export { + checkBoxStyle , + make , + +} +/* Css Not a pure module */ diff --git a/src/App/components/common/Checkbox.re b/src/App/components/common/Checkbox.re new file mode 100644 index 0000000..13e5e6b --- /dev/null +++ b/src/App/components/common/Checkbox.re @@ -0,0 +1,28 @@ +open Css; + +let checkBoxStyle = (~color, ~activeColor) => + style([ + unsafe("-webkit-appearance", "none"), + margin2(~v=auto, ~h=rem(1.)), + width(px(20)), + height(px(20)), + border(px(1), solid, hex(color)), + borderRadius(px(2)), + verticalAlign(middle), + backgroundColor(transparent), + selector( + "&:checked", + [borderColor(hex(activeColor)), backgroundColor(hex(activeColor))], + ), + ]); + +[@react.component] +[@genType] +let make = (~checked, ~disabled, ~color, ~activeColor, _children) => { + ; +}; \ No newline at end of file