From d7f8301e59ab6e0ddf511e821ebe25d21c39765d Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 17:04:45 +0300 Subject: [PATCH 01/11] add styled-jsx dependency --- .babelrc | 3 + package.json | 3 + src/types/custom.d.ts | 8 ++ yarn.lock | 199 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 213 insertions(+) create mode 100644 .babelrc create mode 100644 src/types/custom.d.ts diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..333eb64 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "plugins": ["styled-jsx/babel"] +} diff --git a/package.json b/package.json index 21c8d86..1d1b343 100644 --- a/package.json +++ b/package.json @@ -16,13 +16,16 @@ "dependencies": { "@szhsin/react-menu": "^3.0.2", "@types/": "szhsin/react-menu", + "@types/styled-jsx": "^3.4.4", "@types/uuid": "^8.3.4", "mancala.js": "^0.0.2-beta.3", "react": "^17.0.2", "react-dom": "^17.0.2", + "styled-jsx": "^5.0.2", "uuid": "^8.3.2" }, "devDependencies": { + "@babel/core": "^7.18.6", "@types/react": "^17.0.11", "@types/react-dom": "^17.0.8", "parcel-bundler": "^1.12.5", diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts new file mode 100644 index 0000000..7ac7993 --- /dev/null +++ b/src/types/custom.d.ts @@ -0,0 +1,8 @@ +import 'react'; + +declare module 'react' { + interface StyleHTMLAttributes extends React.HTMLAttributes { + jsx?: boolean; + global?: boolean; + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3674035..9b1ca64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17,11 +17,44 @@ dependencies: "@babel/highlight" "^7.16.7" +"@babel/code-frame@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" + integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== + dependencies: + "@babel/highlight" "^7.18.6" + "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.10": version "7.17.10" resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz" integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw== +"@babel/compat-data@^7.18.6": + version "7.18.8" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d" + integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ== + +"@babel/core@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.6.tgz#54a107a3c298aee3fe5e1947a6464b9b6faca03d" + integrity sha512-cQbWBpxcbbs/IUredIPkHiAGULLV8iwgNRMFzvbhEXISp4f3rUUXE5+TIw6KwUWUR3DwyI6gmBRnmAtYaWehwQ== + dependencies: + "@ampproject/remapping" "^2.1.0" + "@babel/code-frame" "^7.18.6" + "@babel/generator" "^7.18.6" + "@babel/helper-compilation-targets" "^7.18.6" + "@babel/helper-module-transforms" "^7.18.6" + "@babel/helpers" "^7.18.6" + "@babel/parser" "^7.18.6" + "@babel/template" "^7.18.6" + "@babel/traverse" "^7.18.6" + "@babel/types" "^7.18.6" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.1" + semver "^6.3.0" + "@babel/core@^7.4.4": version "7.17.10" resolved "https://registry.npmjs.org/@babel/core/-/core-7.17.10.tgz" @@ -52,6 +85,15 @@ "@jridgewell/gen-mapping" "^0.1.0" jsesc "^2.5.1" +"@babel/generator@^7.18.6", "@babel/generator@^7.18.7": + version "7.18.7" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.7.tgz#2aa78da3c05aadfc82dbac16c99552fc802284bd" + integrity sha512-shck+7VLlY72a2w9c3zYWuE1pwOKEiQHV7GTUbSnhyl5eu3i04t30tBY82ZRWrDfo3gkakCFtevExnxbkf2a3A== + dependencies: + "@babel/types" "^7.18.7" + "@jridgewell/gen-mapping" "^0.3.2" + jsesc "^2.5.1" + "@babel/helper-annotate-as-pure@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz" @@ -77,6 +119,16 @@ browserslist "^4.20.2" semver "^6.3.0" +"@babel/helper-compilation-targets@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.6.tgz#18d35bfb9f83b1293c22c55b3d576c1315b6ed96" + integrity sha512-vFjbfhNCzqdeAtZflUFrG5YIFqGTqsctrtkZ1D/NB0mDW9TwW3GmmUepYY4G9wCET5rY5ugz4OGTcLd614IzQg== + dependencies: + "@babel/compat-data" "^7.18.6" + "@babel/helper-validator-option" "^7.18.6" + browserslist "^4.20.2" + semver "^6.3.0" + "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6": version "7.17.9" resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz" @@ -119,6 +171,11 @@ dependencies: "@babel/types" "^7.16.7" +"@babel/helper-environment-visitor@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.6.tgz#b7eee2b5b9d70602e59d1a6cad7dd24de7ca6cd7" + integrity sha512-8n6gSfn2baOY+qlp+VSzsosjCVGFqWKmDF0cCWOybh52Dw3SEyoWR1KrhMJASjLwIEkkAufZ0xvr+SxLHSpy2Q== + "@babel/helper-explode-assignable-expression@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz" @@ -134,6 +191,14 @@ "@babel/template" "^7.16.7" "@babel/types" "^7.17.0" +"@babel/helper-function-name@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.6.tgz#8334fecb0afba66e6d87a7e8c6bb7fed79926b83" + integrity sha512-0mWMxV1aC97dhjCah5U5Ua7668r5ZmSC2DLfH2EZnf9c3/dHZKiFa5pRLMH5tjSl471tY6496ZWk/kjNONBxhw== + dependencies: + "@babel/template" "^7.18.6" + "@babel/types" "^7.18.6" + "@babel/helper-hoist-variables@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz" @@ -141,6 +206,13 @@ dependencies: "@babel/types" "^7.16.7" +"@babel/helper-hoist-variables@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678" + integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q== + dependencies: + "@babel/types" "^7.18.6" + "@babel/helper-member-expression-to-functions@^7.16.7", "@babel/helper-member-expression-to-functions@^7.17.7": version "7.17.7" resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz" @@ -155,6 +227,13 @@ dependencies: "@babel/types" "^7.16.7" +"@babel/helper-module-imports@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" + integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== + dependencies: + "@babel/types" "^7.18.6" + "@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7": version "7.17.7" resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz" @@ -169,6 +248,20 @@ "@babel/traverse" "^7.17.3" "@babel/types" "^7.17.0" +"@babel/helper-module-transforms@^7.18.6": + version "7.18.8" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz#4f8408afead0188cfa48672f9d0e5787b61778c8" + integrity sha512-che3jvZwIcZxrwh63VfnFTUzcAM9v/lznYkkRxIBGMPt1SudOKHAEec0SIRCfiuIzTcF7VGj/CaTT6gY4eWxvA== + dependencies: + "@babel/helper-environment-visitor" "^7.18.6" + "@babel/helper-module-imports" "^7.18.6" + "@babel/helper-simple-access" "^7.18.6" + "@babel/helper-split-export-declaration" "^7.18.6" + "@babel/helper-validator-identifier" "^7.18.6" + "@babel/template" "^7.18.6" + "@babel/traverse" "^7.18.8" + "@babel/types" "^7.18.8" + "@babel/helper-optimise-call-expression@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz" @@ -208,6 +301,13 @@ dependencies: "@babel/types" "^7.17.0" +"@babel/helper-simple-access@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea" + integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g== + dependencies: + "@babel/types" "^7.18.6" + "@babel/helper-skip-transparent-expression-wrappers@^7.16.0": version "7.16.0" resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz" @@ -222,16 +322,33 @@ dependencies: "@babel/types" "^7.16.7" +"@babel/helper-split-export-declaration@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075" + integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA== + dependencies: + "@babel/types" "^7.18.6" + "@babel/helper-validator-identifier@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz" integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw== +"@babel/helper-validator-identifier@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076" + integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g== + "@babel/helper-validator-option@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz" integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ== +"@babel/helper-validator-option@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8" + integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw== + "@babel/helper-wrap-function@^7.16.8": version "7.16.8" resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz" @@ -251,6 +368,15 @@ "@babel/traverse" "^7.17.9" "@babel/types" "^7.17.0" +"@babel/helpers@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.6.tgz#4c966140eaa1fcaa3d5a8c09d7db61077d4debfd" + integrity sha512-vzSiiqbQOghPngUYt/zWGvK3LAsPhz55vc9XNN0xAl2gV4ieShI2OQli5duxWHD+72PZPTKAcfcZDE1Cwc5zsQ== + dependencies: + "@babel/template" "^7.18.6" + "@babel/traverse" "^7.18.6" + "@babel/types" "^7.18.6" + "@babel/highlight@^7.16.7": version "7.17.9" resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz" @@ -260,11 +386,25 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/highlight@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf" + integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g== + dependencies: + "@babel/helper-validator-identifier" "^7.18.6" + chalk "^2.0.0" + js-tokens "^4.0.0" + "@babel/parser@^7.16.7", "@babel/parser@^7.17.10", "@babel/parser@^7.4.4": version "7.17.10" resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.10.tgz" integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ== +"@babel/parser@^7.18.6", "@babel/parser@^7.18.8": + version "7.18.8" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf" + integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA== + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7": version "7.16.7" resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz" @@ -897,6 +1037,15 @@ "@babel/parser" "^7.16.7" "@babel/types" "^7.16.7" +"@babel/template@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31" + integrity sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/parser" "^7.18.6" + "@babel/types" "^7.18.6" + "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9", "@babel/traverse@^7.4.4": version "7.17.10" resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz" @@ -913,6 +1062,22 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.18.6", "@babel/traverse@^7.18.8": + version "7.18.8" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.8.tgz#f095e62ab46abf1da35e5a2011f43aee72d8d5b0" + integrity sha512-UNg/AcSySJYR/+mIcJQDCv00T+AqRO7j/ZEJLzpaYtgM48rMg5MnkJgyNqkzo88+p4tfRvZJCEiwwfG6h4jkRg== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/generator" "^7.18.7" + "@babel/helper-environment-visitor" "^7.18.6" + "@babel/helper-function-name" "^7.18.6" + "@babel/helper-hoist-variables" "^7.18.6" + "@babel/helper-split-export-declaration" "^7.18.6" + "@babel/parser" "^7.18.8" + "@babel/types" "^7.18.8" + debug "^4.1.0" + globals "^11.1.0" + "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.4.4": version "7.17.10" resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.10.tgz" @@ -921,6 +1086,14 @@ "@babel/helper-validator-identifier" "^7.16.7" to-fast-properties "^2.0.0" +"@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.18.8": + version "7.18.8" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.8.tgz#c5af199951bf41ba4a6a9a6d0d8ad722b30cd42f" + integrity sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw== + dependencies: + "@babel/helper-validator-identifier" "^7.18.6" + to-fast-properties "^2.0.0" + "@iarna/toml@^2.2.0": version "2.2.5" resolved "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz" @@ -934,6 +1107,15 @@ "@jridgewell/set-array" "^1.0.0" "@jridgewell/sourcemap-codec" "^1.4.10" +"@jridgewell/gen-mapping@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9" + integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A== + dependencies: + "@jridgewell/set-array" "^1.0.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + "@jridgewell/resolve-uri@^3.0.3": version "3.0.6" resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.6.tgz" @@ -944,6 +1126,11 @@ resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.0.tgz" integrity sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg== +"@jridgewell/set-array@^1.0.1": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" + integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== + "@jridgewell/sourcemap-codec@^1.4.10": version "1.4.12" resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.12.tgz" @@ -1057,6 +1244,13 @@ resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz" integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== +"@types/styled-jsx@^3.4.4": + version "3.4.4" + resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-3.4.4.tgz#643b49a892f596ee8d8e588e0270d6c05947048d" + integrity sha512-PRRa7gU7ske4Vs7sKWrqfKnuIIS6E/Yj5oKyxuM11AwOKhH9HlbQ7cKGLluXkOXzpEoDJE+6kQMj3AE34/JooQ== + dependencies: + styled-jsx "*" + "@types/uuid@^8.3.4": version "8.3.4" resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc" @@ -5061,6 +5255,11 @@ strip-ansi@^4.0.0: dependencies: ansi-regex "^3.0.0" +styled-jsx@*, styled-jsx@^5.0.2: + version "5.0.2" + resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.2.tgz#ff230fd593b737e9e68b630a694d460425478729" + integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ== + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz" From 8f028e2b51376da87ea976e747f4f97da3b06120 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 17:46:59 +0300 Subject: [PATCH 02/11] use styled-jsx in FloatingPanel --- src/components/FloatingPanel.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx index 540bced..5a04259 100644 --- a/src/components/FloatingPanel.tsx +++ b/src/components/FloatingPanel.tsx @@ -10,15 +10,19 @@ const FloatingPanel: FunctionComponent<{ if(!props.visible) return <> return (
+ {props.children}
) From 2711f4061f71efb53dc535f70275a9926929bd7c Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 22:36:04 +0300 Subject: [PATCH 03/11] use styled-jsx in InfoPanel --- src/components/InfoPanel.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx index b219a01..856023b 100644 --- a/src/components/InfoPanel.tsx +++ b/src/components/InfoPanel.tsx @@ -57,12 +57,17 @@ const InfoPanelContainer: FunctionComponent<{ return (
+ {props.children}
); From 0b308e570e481250e425480e44e43d949d5c4103 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 22:38:33 +0300 Subject: [PATCH 04/11] use styled-jsx in PageContainer --- src/components/PageContainer.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx index 4bdac52..82233f4 100644 --- a/src/components/PageContainer.tsx +++ b/src/components/PageContainer.tsx @@ -2,16 +2,20 @@ import * as React from "react"; import { FunctionComponent } from "react"; import { Theme } from "../theme/Theme"; -const PageContainer: FunctionComponent<{theme: Theme}> = (props) => { +const PageContainer: FunctionComponent<{ theme: Theme }> = (props) => { return (
+ {props.children}
); From 57bf32cad9062fcdf7e88f9bf1a0459c4ea0949a Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 22:59:48 +0300 Subject: [PATCH 05/11] use styled-jsx in HeaderBar --- src/components/HeaderBar.tsx | 117 +++++++++++++++++++---------------- 1 file changed, 65 insertions(+), 52 deletions(-) diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx index 202d479..e1f85a5 100644 --- a/src/components/HeaderBar.tsx +++ b/src/components/HeaderBar.tsx @@ -9,8 +9,8 @@ import "@szhsin/react-menu/dist/index.css"; import "@szhsin/react-menu/dist/transitions/slide.css"; function renderNewGameButton( - context: Context, game: - MancalaGame | undefined, + context: Context, + game: MancalaGame | undefined, onNewGameClick: () => void, userKeyWhoLeave: string | undefined, crashMessage: string | undefined): JSX.Element { @@ -51,31 +51,12 @@ const HeaderBar: FunctionComponent<{ context.themeManager.theme.textLightColor ); return ( -
-

+
+

{context.texts.Mancala}

-
-
- -
+
+ {renderNewGameButton(context, game, onNewGameClick, userKeyWhoLeave, crashMessage)} {game && !userKeyWhoLeave && @@ -88,6 +69,25 @@ const HeaderBar: FunctionComponent<{ onClick={onLeaveGameClick} /> )}
+
) } export default HeaderBar; @@ -100,33 +100,46 @@ const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string } light_mode ; const menuItems = context.themeManager.themes.map((theme, index) => { - return ( (event.target.style.background = - context.themeManager.theme.background)} - //@ts-ignore - onMouseOut={(event) => (event.target.style.background = "transparent")} - onClick={() => (context.themeManager.theme = theme)}> -
- {theme.name} - ); + const themeBackground = context.themeManager.theme.background; + return ( + (event.target.style.background = themeBackground)} + //@ts-ignore + onMouseOut={(event) => (event.target.style.background = "transparent")} + onClick={() => (context.themeManager.theme = theme)}> +
+ {theme.name} + + + ); }) - return ( - {menuItems} - ); + return ( +
+ + {menuItems} + + +
+ ); } From adeb5ba97707caa7558382a4b9f8dd3e2bfc15a9 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 23:10:39 +0300 Subject: [PATCH 06/11] add styledjsx snippet --- .vscode/.snippet.code-snippets | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 .vscode/.snippet.code-snippets diff --git a/.vscode/.snippet.code-snippets b/.vscode/.snippet.code-snippets new file mode 100644 index 0000000..f4961fc --- /dev/null +++ b/.vscode/.snippet.code-snippets @@ -0,0 +1,19 @@ +{ + // Place your mancala-frontend workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and + // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope + // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is + // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: + // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. + // Placeholders with the same ids are connected. + // Example: + "styled jsx": { + "scope": "typescriptreact", + "prefix": "styledjsx", + "body": [ + "" + ], + "description": "Log output to console" + } +} \ No newline at end of file From e59c91f080ed6e1cc2a6f6a83b0f536b6530a35b Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 23:13:41 +0300 Subject: [PATCH 07/11] use styled-jsx in BoardView --- src/components/board/BoardView.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx index 922ef91..5e2ebc2 100644 --- a/src/components/board/BoardView.tsx +++ b/src/components/board/BoardView.tsx @@ -39,18 +39,7 @@ const BoardView: FunctionComponent<{ boardViewModel.pits[game.board.player2BankIndex()]; const isPlayer2 = userKey === game?.player2Id; return ( -
+
{isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()} {isPlayer2 ? player2Pits : player1Pits} +
); }; From 07bf32568c09a111bebe0af2f9f4df0144a91d62 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 23:17:34 +0300 Subject: [PATCH 08/11] use styled-jsx in PitView --- src/components/board/PitView.tsx | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/board/PitView.tsx b/src/components/board/PitView.tsx index 5691042..f3a2850 100644 --- a/src/components/board/PitView.tsx +++ b/src/components/board/PitView.tsx @@ -4,7 +4,6 @@ import Util from "../../util/Util"; import PitViewModel from "../../viewmodel/PitViewModel"; import StoneView from "./StoneView"; - const PitView: FunctionComponent<{ pitViewModel: PitViewModel; onClick: () => void; @@ -14,23 +13,22 @@ const PitView: FunctionComponent<{ )); return ( -
+
{stones} +
); }; From 5c01be8b2ec3c62a97781f0a8f1ff3f02f79a1f5 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 23:21:20 +0300 Subject: [PATCH 09/11] use styled-jsx in StoneView --- src/components/board/StoneView.tsx | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/board/StoneView.tsx b/src/components/board/StoneView.tsx index fdae813..e795b33 100644 --- a/src/components/board/StoneView.tsx +++ b/src/components/board/StoneView.tsx @@ -2,18 +2,19 @@ import * as React from "react"; import { FunctionComponent } from "react"; const StoneView: FunctionComponent<{ color: string }> = ({ color }) => { - return ( -
- ); - }; + return ( +
+ +
+ ); +}; - export default StoneView; \ No newline at end of file +export default StoneView; \ No newline at end of file From 3651936497fd0fd14b7b527aac990e52f0873c20 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 23:28:58 +0300 Subject: [PATCH 10/11] use styled-jsx in StoreView --- src/components/board/StoreView.tsx | 94 +++++++++++++++--------------- 1 file changed, 48 insertions(+), 46 deletions(-) diff --git a/src/components/board/StoreView.tsx b/src/components/board/StoreView.tsx index f149d30..58f762e 100644 --- a/src/components/board/StoreView.tsx +++ b/src/components/board/StoreView.tsx @@ -7,50 +7,52 @@ import PitViewModel from "../../viewmodel/PitViewModel"; import StoneView from "./StoneView"; const StoreView: FunctionComponent<{ - context: Context; - pitViewModel: PitViewModel; - gridColumn: string; - gridRow: string; - }> = ({ context, pitViewModel, gridColumn, gridRow }) => { - const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => ( - - )); - const textColor = getColorByBrightness( - pitViewModel.pitColor, - context.themeManager.theme.textColor, - context.themeManager.theme.textLightColor - ); - return ( -
- {stones} - - {stones.length} - -
- ); - }; + context: Context; + pitViewModel: PitViewModel; + gridColumn: string; + gridRow: string; +}> = ({ context, pitViewModel, gridColumn, gridRow }) => { + const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => ( + + )); + const textColor = getColorByBrightness( + pitViewModel.pitColor, + context.themeManager.theme.textColor, + context.themeManager.theme.textLightColor + ); + return ( +
+ {stones} + + {stones.length} + + +
+ ); +}; - export default StoreView; \ No newline at end of file +export default StoreView; \ No newline at end of file From 40b37accbb6977496f411aec5878f0df74fe51e4 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Thu, 14 Jul 2022 17:27:32 +0300 Subject: [PATCH 11/11] use styled-jsx in button --- src/components/Button.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 1d43a30..317c713 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -20,12 +20,16 @@ const Button: FunctionComponent<{ style={{ background: color, color: textColor, - margin: "5px", - padding: "10px", - border: "none", - borderRadius: "4vw", }} > + {text} );