diff --git a/package-lock.json b/package-lock.json index d17d261..d19e842 100644 --- a/package-lock.json +++ b/package-lock.json @@ -92,7 +92,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", - "dev": true, "dependencies": { "@babel/highlight": "^7.18.6" }, @@ -143,7 +142,6 @@ "version": "7.20.4", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.4.tgz", "integrity": "sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==", - "dev": true, "dependencies": { "@babel/types": "^7.20.2", "@jridgewell/gen-mapping": "^0.3.2", @@ -157,7 +155,6 @@ "version": "0.3.2", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", - "dev": true, "dependencies": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -171,7 +168,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -201,7 +197,6 @@ "version": "7.18.9", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -210,7 +205,6 @@ "version": "7.19.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", - "dev": true, "dependencies": { "@babel/template": "^7.18.10", "@babel/types": "^7.19.0" @@ -223,7 +217,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -235,7 +228,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -287,7 +279,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -299,7 +290,6 @@ "version": "7.19.4", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -308,7 +298,6 @@ "version": "7.19.1", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -340,7 +329,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.18.6", "chalk": "^2.0.0", @@ -354,7 +342,6 @@ "version": "7.20.3", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.3.tgz", "integrity": "sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==", - "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -456,7 +443,6 @@ "version": "7.18.10", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.18.6", "@babel/parser": "^7.18.10", @@ -470,7 +456,6 @@ "version": "7.20.1", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.1.tgz", "integrity": "sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.18.6", "@babel/generator": "^7.20.1", @@ -491,7 +476,6 @@ "version": "7.20.2", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.2.tgz", "integrity": "sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==", - "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.19.4", "@babel/helper-validator-identifier": "^7.19.1", @@ -501,6 +485,29 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@esbuild/android-arm": { "version": "0.15.13", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.13.tgz", @@ -550,7 +557,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", - "dev": true, "engines": { "node": ">=6.0.0" } @@ -559,7 +565,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", - "dev": true, "engines": { "node": ">=6.0.0" } @@ -567,14 +572,12 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", - "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", - "dev": true + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.17", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", - "dev": true, "dependencies": { "@jridgewell/resolve-uri": "3.1.0", "@jridgewell/sourcemap-codec": "1.4.14" @@ -623,6 +626,16 @@ "node": ">=14" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/node": { "version": "18.11.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz", @@ -667,6 +680,17 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "node_modules/@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@ui-blox/core": { "resolved": "packages/core", "link": true @@ -732,7 +756,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -792,6 +815,26 @@ "postcss": "^8.1.0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/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": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -854,6 +897,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001431", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz", @@ -874,7 +925,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -927,7 +977,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -935,8 +984,7 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/convert-source-map": { "version": "1.9.0", @@ -948,6 +996,24 @@ "resolved": "packages/create-blox-app", "link": true }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -970,7 +1036,6 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -1412,7 +1477,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -1524,7 +1588,6 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, "engines": { "node": ">=4" } @@ -1565,11 +1628,23 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -1633,7 +1708,6 @@ "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true, "bin": { "jsesc": "bin/jsesc" }, @@ -1662,6 +1736,11 @@ "node": ">=10" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -1729,8 +1808,7 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { "version": "3.3.4", @@ -1798,7 +1876,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -1939,8 +2016,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/prismjs": { "version": "1.29.0", @@ -2028,6 +2104,12 @@ "react": ">=16.13.1" } }, + "node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "peer": true + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -2184,6 +2266,11 @@ "semver": "bin/semver.js" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -2207,11 +2294,40 @@ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", "dev": true }, + "node_modules/styled-components": { + "version": "5.3.6", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz", + "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", + "hasInstallScript": true, + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -2282,7 +2398,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, "engines": { "node": ">=4" } @@ -2433,13 +2548,15 @@ "devDependencies": { "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", + "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^2.2.0", "typescript": "^4.6.4", "vite": "^3.2.3" }, "peerDependencies": { "react": "18.x", - "react-dom": "18.x" + "react-dom": "18.x", + "styled-components": "^5.3.6" } }, "packages/core": { @@ -2463,7 +2580,8 @@ }, "peerDependencies": { "react": "18.x", - "react-dom": "18.x" + "react-dom": "18.x", + "styled-components": "^5.3.6" } }, "packages/create-blox-app": { @@ -2479,7 +2597,8 @@ "@ui-blox/scripts": "^1.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.4.3" + "react-router-dom": "^6.4.3", + "styled-components": "^5.3.6" }, "devDependencies": { "@types/node": "^18.11.9", @@ -2538,7 +2657,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", - "dev": true, "requires": { "@babel/highlight": "^7.18.6" } @@ -2576,7 +2694,6 @@ "version": "7.20.4", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.4.tgz", "integrity": "sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==", - "dev": true, "requires": { "@babel/types": "^7.20.2", "@jridgewell/gen-mapping": "^0.3.2", @@ -2587,7 +2704,6 @@ "version": "0.3.2", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", - "dev": true, "requires": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -2600,7 +2716,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "requires": { "@babel/types": "^7.18.6" } @@ -2620,14 +2735,12 @@ "@babel/helper-environment-visitor": { "version": "7.18.9", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", - "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", - "dev": true + "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==" }, "@babel/helper-function-name": { "version": "7.19.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", - "dev": true, "requires": { "@babel/template": "^7.18.10", "@babel/types": "^7.19.0" @@ -2637,7 +2750,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", - "dev": true, "requires": { "@babel/types": "^7.18.6" } @@ -2646,7 +2758,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", - "dev": true, "requires": { "@babel/types": "^7.18.6" } @@ -2686,7 +2797,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", - "dev": true, "requires": { "@babel/types": "^7.18.6" } @@ -2694,14 +2804,12 @@ "@babel/helper-string-parser": { "version": "7.19.4", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", - "dev": true + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==" }, "@babel/helper-validator-identifier": { "version": "7.19.1", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", - "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", - "dev": true + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==" }, "@babel/helper-validator-option": { "version": "7.18.6", @@ -2724,7 +2832,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.18.6", "chalk": "^2.0.0", @@ -2734,8 +2841,7 @@ "@babel/parser": { "version": "7.20.3", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.3.tgz", - "integrity": "sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==", - "dev": true + "integrity": "sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==" }, "@babel/plugin-syntax-jsx": { "version": "7.18.6", @@ -2798,7 +2904,6 @@ "version": "7.18.10", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==", - "dev": true, "requires": { "@babel/code-frame": "^7.18.6", "@babel/parser": "^7.18.10", @@ -2809,7 +2914,6 @@ "version": "7.20.1", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.1.tgz", "integrity": "sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==", - "dev": true, "requires": { "@babel/code-frame": "^7.18.6", "@babel/generator": "^7.20.1", @@ -2827,13 +2931,35 @@ "version": "7.20.2", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.2.tgz", "integrity": "sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==", - "dev": true, "requires": { "@babel/helper-string-parser": "^7.19.4", "@babel/helper-validator-identifier": "^7.19.1", "to-fast-properties": "^2.0.0" } }, + "@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "requires": { + "@emotion/memoize": "^0.8.0" + } + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@esbuild/android-arm": { "version": "0.15.13", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.13.tgz", @@ -2861,26 +2987,22 @@ "@jridgewell/resolve-uri": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", - "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", - "dev": true + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==" }, "@jridgewell/set-array": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", - "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", - "dev": true + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==" }, "@jridgewell/sourcemap-codec": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", - "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", - "dev": true + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, "@jridgewell/trace-mapping": { "version": "0.3.17", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", - "dev": true, "requires": { "@jridgewell/resolve-uri": "3.1.0", "@jridgewell/sourcemap-codec": "1.4.14" @@ -2917,6 +3039,16 @@ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==" }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/node": { "version": "18.11.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz", @@ -2961,6 +3093,17 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "@ui-blox/core": { "version": "file:packages/core", "requires": { @@ -3027,7 +3170,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -3062,6 +3204,23 @@ "postcss-value-parser": "^4.2.0" } }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "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": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -3073,6 +3232,7 @@ "requires": { "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", + "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^2.2.0", "typescript": "^4.6.4", "vite": "^3.2.3" @@ -3105,6 +3265,11 @@ "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", "dev": true }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-lite": { "version": "1.0.30001431", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz", @@ -3115,7 +3280,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -3153,7 +3317,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -3161,8 +3324,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "convert-source-map": { "version": "1.9.0", @@ -3173,6 +3335,21 @@ "create-blox-app": { "version": "file:packages/create-blox-app" }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -3189,7 +3366,6 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, "requires": { "ms": "2.1.2" } @@ -3237,6 +3413,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.4.3", + "styled-components": "^5.3.6", "tailwindcss": "^3.2.4", "typescript": "^4.6.4", "vite": "^3.2.3" @@ -3432,8 +3609,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" }, "fast-glob": { "version": "3.2.12", @@ -3514,8 +3690,7 @@ "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" }, "handlebars": { "version": "4.7.7", @@ -3541,8 +3716,22 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } }, "is-binary-path": { "version": "2.1.0", @@ -3591,8 +3780,7 @@ "jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" }, "json5": { "version": "2.2.1", @@ -3606,6 +3794,11 @@ "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==", "dev": true }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -3652,8 +3845,7 @@ "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "nanoid": { "version": "3.3.4", @@ -3705,8 +3897,7 @@ "picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, "pify": { "version": "2.3.0", @@ -3777,8 +3968,7 @@ "postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "prismjs": { "version": "1.29.0", @@ -3828,6 +4018,12 @@ "@babel/runtime": "^7.12.5" } }, + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "peer": true + }, "react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -3929,6 +4125,11 @@ "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -3946,11 +4147,27 @@ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", "dev": true }, + "styled-components": { + "version": "5.3.6", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz", + "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -4003,8 +4220,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" }, "to-regex-range": { "version": "5.0.1", diff --git a/packages/components/package.json b/packages/components/package.json index ad961e8..507b31f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -16,13 +16,15 @@ }, "peerDependencies": { "react": "18.x", - "react-dom": "18.x" + "react-dom": "18.x", + "styled-components": "^5.3.6" }, "devDependencies": { "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", + "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^2.2.0", "typescript": "^4.6.4", "vite": "^3.2.3" } -} \ No newline at end of file +} diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx index 9ddf365..0ecdec3 100644 --- a/packages/components/src/Button/Button.tsx +++ b/packages/components/src/Button/Button.tsx @@ -1,5 +1,28 @@ -import { PropsWithChildren } from "react"; +import { PropsWithChildren } from 'react'; +import styled from 'styled-components'; -export const Button: React.FC void, size?: number}>> = ({ children, onClick, size = 200 }) => { - return ; -}; \ No newline at end of file +const StyledButton = styled.button<{ $size: number }>` + border-radius: 1rem; + background-color: rgb(237 40 126 / 1); + padding: 0.5rem 1rem; + color: white; + width: ${(props) => props.$size}px; + outline: none; + border: none; + cursor: pointer; + transition: all 0.3s; + + :hover { + background-color: rgb(251 57 151 /1); + } +`; + +export const Button: React.FC< + PropsWithChildren<{ onClick?: () => void; size?: number; className?: string }> +> = ({ children, onClick, size = 200, className }) => { + return ( + + {children} + + ); +}; diff --git a/packages/components/src/Button/index.ts b/packages/components/src/Button/index.ts new file mode 100644 index 0000000..8b166a8 --- /dev/null +++ b/packages/components/src/Button/index.ts @@ -0,0 +1 @@ +export * from './Button'; diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx index c4594c3..dde7823 100644 --- a/packages/components/src/Card/Card.tsx +++ b/packages/components/src/Card/Card.tsx @@ -1,17 +1,40 @@ -import { PropsWithChildren } from "react"; +import { PropsWithChildren } from 'react'; +import styled from 'styled-components'; +import { Button } from '../Button'; -export const Card: React.FC> = ({ children, title }) => { +const StyledContainer = styled.div` + padding: 1rem; + border-radius: 0.375rem; + border-width: 1px; + border-color: #f3f4f6; + border-style: solid; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +`; + +const StyledButton = styled(Button)` + margin-top: 1.5rem; +`; + +const StyledContent = styled.div` + padding-top: 0.5rem; +`; + +const StyledTitle = styled.h2` + font-size: 1.25rem; + line-height: 1.75rem; +`; + +export const Card: React.FC> = ({ + children, + title, +}) => { return ( -
-
-
-

{title}

-

{children}

-
- -
-
+ + {title} + {children} +
+ Done
-
+ ); -}; \ No newline at end of file +}; diff --git a/packages/components/src/Card/index.ts b/packages/components/src/Card/index.ts new file mode 100644 index 0000000..ca0b060 --- /dev/null +++ b/packages/components/src/Card/index.ts @@ -0,0 +1 @@ +export * from './Card'; diff --git a/packages/components/src/MenuButton/MenuButton.tsx b/packages/components/src/MenuButton/MenuButton.tsx new file mode 100644 index 0000000..5c237cb --- /dev/null +++ b/packages/components/src/MenuButton/MenuButton.tsx @@ -0,0 +1,46 @@ +import styled from 'styled-components'; +import { PropsWithChildren } from 'react'; + +const StyledButton = styled.button` + margin-top: 0.25rem; + width: 100%; + text-align: start; + color: rgb(40 49 115/1); + background-color: transparent; + outline: none; + border: none; + cursor: pointer; + transition: all 0.3s; + + & > a { + transition: color 150ms linear; + cursor: pointer; + text-decoration: none; + display: block; + width: 100%; + padding: 0.5rem 1rem; + background-color: #ffffff; + transition-property: all; + font-weight: 500; + border-radius: 9999px; + border-width: 0; + color: rgb(40 49 115); + outline: 0; + + :hover { + background-color: #f3f4f6; + } + } + + & > .active { + background-color: #e5e7eb; + font-weight: 500; + } +`; + +export const MenuButton = ({ + children, + className, +}: PropsWithChildren<{ className?: string }>) => { + return {children}; +}; diff --git a/packages/components/src/MenuButton/index.ts b/packages/components/src/MenuButton/index.ts new file mode 100644 index 0000000..727d0f9 --- /dev/null +++ b/packages/components/src/MenuButton/index.ts @@ -0,0 +1 @@ +export * from './MenuButton'; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 34105a3..ba1aa46 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -1,2 +1,3 @@ -export * from './Button/Button'; -export * from './Card/Card'; \ No newline at end of file +export * from './Button'; +export * from './Card'; +export * from './MenuButton'; diff --git a/packages/core/package.json b/packages/core/package.json index db240dc..7390fbf 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -19,7 +19,8 @@ }, "peerDependencies": { "react": "18.x", - "react-dom": "18.x" + "react-dom": "18.x", + "styled-components": "^5.3.6" }, "dependencies": { "esbuild-wasm": "^0.15.14", diff --git a/packages/core/src/components/Button/Button.tsx b/packages/core/src/components/Button/Button.tsx new file mode 100644 index 0000000..419a3d1 --- /dev/null +++ b/packages/core/src/components/Button/Button.tsx @@ -0,0 +1,24 @@ +import { PropsWithChildren } from 'react'; +import styled from 'styled-components'; + +const StyledButton = styled.button<{ $size: number }>` + border-radius: 1rem; + background-color: rgb(237 40 126 / 1); + padding: 0.5rem 1rem; + color: white; + width: ${(props) => props.$size}; + + :hover { + background-color: rgb(251 57 151 /1); + } +`; + +export const Button: React.FC< + PropsWithChildren<{ onClick?: () => void; size?: number; className?: string }> +> = ({ children, onClick, size = 200, className }) => { + return ( + + {children} + + ); +}; diff --git a/packages/core/src/components/Button/index.ts b/packages/core/src/components/Button/index.ts new file mode 100644 index 0000000..8b166a8 --- /dev/null +++ b/packages/core/src/components/Button/index.ts @@ -0,0 +1 @@ +export * from './Button'; diff --git a/packages/core/src/components/DocsCode.tsx b/packages/core/src/components/DocsCode.tsx index e49867f..82f68e3 100644 --- a/packages/core/src/components/DocsCode.tsx +++ b/packages/core/src/components/DocsCode.tsx @@ -1,26 +1,54 @@ -import { PropsWithChildren, useEffect, useState } from "react"; -import { Preview } from "./Preview"; +import { PropsWithChildren, useEffect, useState } from 'react'; +import styled from 'styled-components'; import Editor from 'react-simple-code-editor'; import { highlight, languages } from 'prismjs'; import 'prismjs/components/prism-jsx'; +import { Preview } from './Preview'; -export const DocsCode: React.FC> = ({ code: defaultCode, dependencies }) => { +const StyledEditor = styled(Editor).attrs((props) => ({ + className: 'blox-code-editor', +}))` + margin-bottom: 1rem; + background-color: #111827; + color: #d1d5db; + font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + font-size: 0.875rem; + line-height: 1.25rem; + border-radius: 0.5rem; +`; + +const StyledCodePreview = styled.div.attrs((props) => ({ + className: 'blox-code-preview', +}))` + padding: 2rem; + margin-bottom: 2rem; + border-radius: 0.5rem; + border-width: 1px; + border-color: #f3f4f6; + border-style: solid; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +`; + +export const DocsCode: React.FC< + PropsWithChildren<{ code: string; dependencies: object }> +> = ({ code: defaultCode, dependencies }) => { const [code, setCode] = useState(defaultCode); useEffect(() => { setCode(defaultCode); }, [defaultCode]); return ( <> - setCode(code)} - highlight={code => highlight(code, languages.jsx, 'jsx')} + onValueChange={(code) => setCode(code)} + highlight={(code) => highlight(code, languages.jsx, 'jsx')} padding={10} - className="blox-code-editor" /> -
- docs code: {code} -
+ + + docs code: {code} + + ); -}; \ No newline at end of file +}; diff --git a/packages/core/src/components/Preview.tsx b/packages/core/src/components/Preview.tsx index a8e8365..ca64319 100644 --- a/packages/core/src/components/Preview.tsx +++ b/packages/core/src/components/Preview.tsx @@ -2,6 +2,7 @@ import React, { PropsWithChildren, useCallback, useState, useEffect } from "reac import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; import * as reactLib from 'react'; import { transpile } from "../utils/transpiler"; +import { Button } from "./Button"; const evalCode = (code: string, scope: Record) => { const scopeKeys = Object.keys(scope); @@ -21,7 +22,7 @@ const ErrorFallback: React.FC = ({ error, resetErrorBoundary }) = return (
{error.message} - +
) } @@ -87,4 +88,4 @@ export const Preview: React.FC -); \ No newline at end of file +); diff --git a/packages/core/src/components/PropsTable.tsx b/packages/core/src/components/PropsTable.tsx index ffb2379..270cc97 100644 --- a/packages/core/src/components/PropsTable.tsx +++ b/packages/core/src/components/PropsTable.tsx @@ -1,14 +1,62 @@ -import { PropsWithChildren } from "react"; +import { PropsWithChildren } from 'react'; +import styled from 'styled-components'; -export const PropsTable: React.FC> = ({ table }) => { +const StyledTable = styled.table.attrs((props) => ({ + className: 'blox-props-table', +}))` + margin-top: 1.25rem; + margin-bottom: 1.25rem; + font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + font-size: 0.875rem; + line-height: 1.25rem; + width: 100%; + color: rgb(40 49 115 / 1); +`; + +const StyledHeader = styled.th` + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + text-align: left; + width: 33.333333%; +`; + +const StyledRow = styled.tr` + border-bottom-width: 1px; +`; + +const StyledData = styled.td` + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; +`; + +const StyledType = styled(StyledData)` + color: #8d0e40; +`; + +export const PropsTable: React.FC< + PropsWithChildren<{ table: { props: object } }> +> = ({ table }) => { return ( - - - { - Object.entries(table['props']).map(([key, value]) => ( - - )) - } -
PropTypeDefault
{key}{!value.required && '?'}{value.type.name}{value.defaultValue?.value || '-'}
+ + + Prop + Type + Default + + {Object.entries(table['props']).map(([key, value]) => ( + + + {key} + {!value.required && '?'} + + {value.type.name} + {value.defaultValue?.value || '-'} + + ))} + ); -}; \ No newline at end of file +}; diff --git a/packages/docs/blox/Menu.template.hbs b/packages/docs/blox/Menu.template.hbs index 77d3b70..d90e2cf 100644 --- a/packages/docs/blox/Menu.template.hbs +++ b/packages/docs/blox/Menu.template.hbs @@ -1,13 +1,20 @@ import { NavLink } from "react-router-dom"; +import { MenuButton } from 'blox-example-components' +import styled from "styled-components"; + +const StyledMenuButton = styled(MenuButton)` + margin-top: 0.25rem; +`; export const Menu = ({className}) => ( +
{{#each components}} -
+ {{this}} -
+ {{/each}}
-); \ No newline at end of file +); diff --git a/packages/docs/blox/Page.template.hbs b/packages/docs/blox/Page.template.hbs index be33859..f964b90 100644 --- a/packages/docs/blox/Page.template.hbs +++ b/packages/docs/blox/Page.template.hbs @@ -1,12 +1,58 @@ {{#if propsTablePath}} import { DocsCode, PropsTable } from '@ui-blox/core'; +import styled from "styled-components"; import propsTable from '{{propsTablePath}}'; {{else}} import { DocsCode } from '@ui-blox/core'; +import styled from "styled-components"; {{/if}} +const StyledContainer = styled.div.attrs((props) => ({ +className: 'blox-markdown', +}))` + h1 { + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 2.25rem; + line-height: 2.5rem; + } + h2 { + font-size: 1.25rem; + line-height: 1.75rem; + } + h2, + h4, + h4, + h5, + h6 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-weight: 700; + } + & > p > code { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + background-color: #e5e7eb; + color: #4b5563; + font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + font-size: 0.875rem; + line-height: 1.25rem; + border-radius: 0.375rem; + } + & > p { + font-weight: 100; + line-height: 1.75rem; + } + & > p > a { + font-weight: 500; + } +` + + export const {{name}}Demo = ({ dependencies }) => ( -
+ {{{mdContent}}} -
-); \ No newline at end of file + +); diff --git a/packages/docs/data/Button.OnClick.blox.tsx b/packages/docs/data/Button.OnClick.blox.tsx index 608d858..c85034a 100644 --- a/packages/docs/data/Button.OnClick.blox.tsx +++ b/packages/docs/data/Button.OnClick.blox.tsx @@ -1,14 +1,14 @@ -import { Button } from 'blox-example-components' -import { useState } from 'react' +import { Button } from 'blox-example-components'; +import { useState } from 'react'; export default () => { - const [counter, setCounter] = useState(0) + const [counter, setCounter] = useState(0); return ( -
- -
counter: {counter}
+
counter: {counter}
); -} \ No newline at end of file +}; diff --git a/packages/docs/data/Button.Sizes.blox.tsx b/packages/docs/data/Button.Sizes.blox.tsx index 0a92a58..cd5843b 100644 --- a/packages/docs/data/Button.Sizes.blox.tsx +++ b/packages/docs/data/Button.Sizes.blox.tsx @@ -1,23 +1,21 @@ -import { Button } from 'blox-example-components' +import { Button } from 'blox-example-components'; export default () => { return (
-
- +
+
-
+
-
+
); -} \ No newline at end of file +}; diff --git a/packages/docs/package.json b/packages/docs/package.json index 7d16a77..55e8b5f 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -12,7 +12,8 @@ "@ui-blox/scripts": "^1.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.4.3" + "react-router-dom": "^6.4.3", + "styled-components": "^5.3.6" }, "devDependencies": { "@types/node": "^18.11.9", diff --git a/packages/docs/src/App.tsx b/packages/docs/src/App.tsx index cecbb29..7d94f69 100644 --- a/packages/docs/src/App.tsx +++ b/packages/docs/src/App.tsx @@ -1,9 +1,8 @@ -import { BloxRoutes } from './generated-docs/Routes' -import { Menu } from './generated-docs/Menu' +import { BloxRoutes } from './generated-docs/Routes'; import * as componentLib from 'blox-example-components'; -import { BrowserRouter as Router } from "react-router-dom"; -import bloxLogo from './assets/blox-logo.svg' -import githubLogo from './assets/github.svg' +import { BrowserRouter as Router } from 'react-router-dom'; +import { Layout } from './Layout'; +import { ThemeProvider } from './theme'; const dependencies = { 'blox-example-components': componentLib, @@ -11,21 +10,10 @@ const dependencies = { export default () => ( -
-
- blox logo - -
-
-
- - Github logo - -
-
- -
-
-
+ + + + + -) +); diff --git a/packages/docs/src/Layout/Header/Header.tsx b/packages/docs/src/Layout/Header/Header.tsx new file mode 100644 index 0000000..3cc6977 --- /dev/null +++ b/packages/docs/src/Layout/Header/Header.tsx @@ -0,0 +1,37 @@ +import styled from 'styled-components'; +import githubLogo from '../../assets/github.svg'; + +const StyledHeader = styled.header` + display: flex; + flex-shrink: 0; + align-items: center; + height: 4rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + background-color: ${(props) => props.theme.palette.primary.DEFAULT}; +`; + +const StyledGithubLink = styled.a` + padding: 0.5rem; + background-color: ${(props) => props.theme.palette.white}; + border-radius: 9999px; + border-width: 0; + position: absolute; + right: 0.5rem; + display: flex; + + :hover { + background-color: #e5e7eb; + transform: scale(1.05, 1.05); + transition-property: all; + } +`; + +export const Header = ({ className }: { className?: string }) => { + return ( + + + Github logo + + + ); +}; diff --git a/packages/docs/src/Layout/Header/index.ts b/packages/docs/src/Layout/Header/index.ts new file mode 100644 index 0000000..266dec8 --- /dev/null +++ b/packages/docs/src/Layout/Header/index.ts @@ -0,0 +1 @@ +export * from './Header'; diff --git a/packages/docs/src/Layout/Layout.tsx b/packages/docs/src/Layout/Layout.tsx new file mode 100644 index 0000000..b14e471 --- /dev/null +++ b/packages/docs/src/Layout/Layout.tsx @@ -0,0 +1,66 @@ +import styled from 'styled-components'; +import { Header } from './Header'; +import { Menu } from './Menu'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + flex-grow: 1; + width: 100%; + height: 100vh; + + ${(props) => props.theme.breakpoints.above('sm')} { + flex-direction: row; + overflow: hidden; + } +`; + +const StyledMain = styled.main` + display: flex; + flex-direction: column; + flex-grow: 1; + width: 100%; + height: 100%; +`; + +const StyledPageContent = styled.div` + height: 100%; + padding-left: 2rem; + padding-right: 2rem; + + ${(props) => props.theme.breakpoints.above('sm')} { + overflow: auto; + } + + ${(props) => props.theme.breakpoints.above('lg')} { + padding-left: 4rem; + padding-right: 4rem; + } + + ${(props) => props.theme.breakpoints.above('xl')} { + padding-left: 4rem; + padding-right: 4rem; + } + + ${(props) => props.theme.breakpoints.above('xl')} { + padding-left: 8rem; + padding-right: 8rem; + } + + ${(props) => props.theme.breakpoints.above('2xl')} { + padding-left: 12rem; + padding-right: 12rem; + } +`; + +export const Layout = ({ children }) => { + return ( + + + +
+ {children} + + + ); +}; diff --git a/packages/docs/src/Layout/Menu/Menu.tsx b/packages/docs/src/Layout/Menu/Menu.tsx new file mode 100644 index 0000000..1cf3501 --- /dev/null +++ b/packages/docs/src/Layout/Menu/Menu.tsx @@ -0,0 +1,42 @@ +import styled from 'styled-components'; +import bloxLogo from '../../assets/blox-logo.svg'; +import { Menu as ComponentsMenu } from '../../generated-docs/Menu'; + +const StyledContainer = styled.div` + padding: 1rem; + background-color: #ffffff; + flex-grow: 0; + flex-shrink: 1; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + width: 100%; + + ${(props) => props.theme.breakpoints.above('sm')} { + width: 30%; + } + + ${(props) => props.theme.breakpoints.above('lg')} { + width: 25%; + } + + ${(props) => props.theme.breakpoints.above('xl')} { + width: 20%; + } +`; + +const StyledLogo = styled.img` + top: 0; + width: 9rem; +`; + +const StyledComponentsMenu = styled(ComponentsMenu)` + margin: 2rem auto auto auto; +`; + +export const Menu = ({ className }: { className?: string }) => { + return ( + + + + + ); +}; diff --git a/packages/docs/src/Layout/Menu/index.ts b/packages/docs/src/Layout/Menu/index.ts new file mode 100644 index 0000000..629d3d0 --- /dev/null +++ b/packages/docs/src/Layout/Menu/index.ts @@ -0,0 +1 @@ +export * from './Menu'; diff --git a/packages/docs/src/Layout/index.ts b/packages/docs/src/Layout/index.ts new file mode 100644 index 0000000..9877e7f --- /dev/null +++ b/packages/docs/src/Layout/index.ts @@ -0,0 +1 @@ +export * from './Layout'; diff --git a/packages/docs/src/Welcome.tsx b/packages/docs/src/Welcome.tsx index 4bf103c..4794778 100644 --- a/packages/docs/src/Welcome.tsx +++ b/packages/docs/src/Welcome.tsx @@ -1 +1 @@ -export const Welcome = () =>
Welcome to BLOX
; \ No newline at end of file +export const Welcome = () =>
Welcome to BLOX
; diff --git a/packages/docs/src/assets/blox-logo.svg b/packages/docs/src/assets/blox-logo.svg index 23ae40f..0d6989b 100644 --- a/packages/docs/src/assets/blox-logo.svg +++ b/packages/docs/src/assets/blox-logo.svg @@ -35,4 +35,4 @@ - \ No newline at end of file + diff --git a/packages/docs/src/assets/github.svg b/packages/docs/src/assets/github.svg index aa05db9..e693cd3 100644 --- a/packages/docs/src/assets/github.svg +++ b/packages/docs/src/assets/github.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/docs/src/blox-styles-overrides.ts b/packages/docs/src/blox-styles-overrides.ts new file mode 100644 index 0000000..30f7cbb --- /dev/null +++ b/packages/docs/src/blox-styles-overrides.ts @@ -0,0 +1,15 @@ +import { css } from "styled-components" + +export const bloxStylesOverrides = css` + .blox-code-editor { + //override editor styles here + } + + .blox-code-preview { + //override code preview styles here + } + + .blox-markdown { + //override markdown styles here + } +`; diff --git a/packages/docs/src/index.css b/packages/docs/src/index.css deleted file mode 100644 index 0f943f4..0000000 --- a/packages/docs/src/index.css +++ /dev/null @@ -1,71 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer components { - /* Docs styling */ - .blox-code-editor { - @apply rounded-lg mb-4 font-mono text-sm bg-gray-900 text-gray-300; - } - .blox-code-preview { - @apply rounded-lg shadow-md border-gray-100 border p-4 mb-8; - } - .blox-github-btn { - @apply bg-white border-0 p-2 rounded-full hover:bg-gray-200 hover:scale-105 transition-all; - } - .blox-menu-btn { - @apply mt-1; - } - .blox-menu-btn > a { - @apply bg-white text-tertiary w-full font-thin border-0 py-2 px-4 rounded-full hover:bg-gray-100 transition-all block; - } - .blox-menu-btn > .active { - @apply bg-gray-200 font-medium; - } - .blox-props-table { - @apply text-tertiary w-full xl:w-1/2 my-5 font-mono text-sm; - } - .blox-props-table tr { - @apply border-b; - } - .blox-props-table th { - @apply text-tertiary px-4 py-2 w-1/3 text-left; - } - .blox-props-table td { - @apply text-tertiary px-4 py-2; - } - .blox-props-table .blox-props-table-type { - @apply text-secondary-900; - } - .blox-markdown h1 { - @apply text-primary text-4xl py-4; - } - .blox-markdown h2 { - @apply text-xl; - } - .blox-markdown h2, h4, h4, h5, h6 { - @apply text-tertiary font-bold py-2; - } - .blox-markdown > p > code { - @apply bg-gray-200 px-2 py-1 text-gray-600 text-sm font-mono rounded-md; - } - .blox-markdown > p { - @apply font-thin leading-7; - } - .blox-markdown > p > a { - @apply font-medium text-secondary; - } - .blox-markdown > p > a:hover { - @apply text-secondary-700; - } - /* Component lib styling */ - .btn { - @apply rounded-2xl bg-secondary text-white p-2 px-4 hover:bg-secondary-500 transition-all; - } - .card { - @apply rounded-md shadow-md border-gray-100 border p-4 mb-8; - } - .card { - @apply rounded-md shadow-md border-gray-100 border p-4 mb-8; - } -} \ No newline at end of file diff --git a/packages/docs/src/main.tsx b/packages/docs/src/main.tsx index 236e395..1a9d382 100644 --- a/packages/docs/src/main.tsx +++ b/packages/docs/src/main.tsx @@ -2,7 +2,6 @@ import { initialize } from '@ui-blox/core'; import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' -import './index.css'; import 'prismjs/themes/prism-okaidia.css'; //Example style, you can use another initialize().then(() => { diff --git a/packages/docs/src/theme/ThemeProvider.tsx b/packages/docs/src/theme/ThemeProvider.tsx new file mode 100755 index 0000000..18742c9 --- /dev/null +++ b/packages/docs/src/theme/ThemeProvider.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { ThemeProvider as StyledThemeProvider } from 'styled-components'; +import defaultTheme from './defaultTheme'; +import GlobalStyle from './global-style'; + +export const ThemeProvider = ({ children, theme = defaultTheme }) => { + return ( + + <> + + {children} + + + ); +}; diff --git a/packages/docs/src/theme/breakpoints.ts b/packages/docs/src/theme/breakpoints.ts new file mode 100755 index 0000000..acde1a8 --- /dev/null +++ b/packages/docs/src/theme/breakpoints.ts @@ -0,0 +1,24 @@ +function createBreakpoints(breakpoints = {}) { + const values = { + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1536px', + ...breakpoints, + }; + + return { + values, + above(key) { + return `@media screen and (min-width: ${values[key]})`; + }, + between(start, end) { + return `@media screen and (min-width: ${values[start]}) and (max-width: ${ + values[end] - 1 + })`; + }, + }; +} + +export default createBreakpoints; diff --git a/packages/docs/src/theme/defaultTheme.ts b/packages/docs/src/theme/defaultTheme.ts new file mode 100755 index 0000000..089be1d --- /dev/null +++ b/packages/docs/src/theme/defaultTheme.ts @@ -0,0 +1,9 @@ +import palette from './palette'; +import createBreakpoints from './breakpoints'; + +const theme = { + breakpoints: createBreakpoints(), + palette, +}; + +export default theme; diff --git a/packages/docs/src/theme/global-style.ts b/packages/docs/src/theme/global-style.ts new file mode 100644 index 0000000..bec33fa --- /dev/null +++ b/packages/docs/src/theme/global-style.ts @@ -0,0 +1,24 @@ +import { createGlobalStyle } from 'styled-components'; +import { bloxStylesOverrides } from "../blox-styles-overrides"; + +const GlobalStyle = createGlobalStyle` + body { + margin: 0; + padding: 0; + line-height: 1.5; + font-size: 1rem; + tab-size: 4; + font-weight: normal; + color: #4a5568; + font-family: Rubik,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"; + font-feature-settings: normal; + } + + * { + box-sizing: border-box; + } + + ${bloxStylesOverrides} +`; + +export default GlobalStyle; diff --git a/packages/docs/src/theme/index.ts b/packages/docs/src/theme/index.ts new file mode 100644 index 0000000..8abd195 --- /dev/null +++ b/packages/docs/src/theme/index.ts @@ -0,0 +1 @@ +export * from './ThemeProvider'; diff --git a/packages/docs/src/theme/palette.js b/packages/docs/src/theme/palette.js new file mode 100755 index 0000000..b324833 --- /dev/null +++ b/packages/docs/src/theme/palette.js @@ -0,0 +1,32 @@ +const palette = { + white: '#ffffff', + primary: { + DEFAULT: '#00b26a', + 50: '#ebfef3', + 100: '#d0fbe1', + 200: '#a4f6c8', + 300: '#6aebac', + 400: '#2fd88a', + 500: '#0abf72', + 600: '#00b26a', + 700: '#007c4d', + 800: '#03623e', + 900: '#045035', + }, + secondary: { + DEFAULT: '#ed287e', + 50: '#fef1f8', + 100: '#fee5f3', + 200: '#ffcbe9', + 300: '#ffa1d4', + 400: '#ff66b6', + 500: '#fb3997', + 600: '#ed287e', + 700: '#cd0958', + 800: '#a90b4a', + 900: '#8d0e40', + }, + tertiary: '#283173', +}; + +export default palette; diff --git a/packages/scripts/src/md-to-react.js b/packages/scripts/src/md-to-react.js index e5da480..c3ac77e 100644 --- a/packages/scripts/src/md-to-react.js +++ b/packages/scripts/src/md-to-react.js @@ -6,7 +6,7 @@ import { getFileContent } from "./scripts-utils.js"; const replacePropsTable = (content) => { const ret = content.replace( - '{{props-table}}', + '{{props-table}}', `` ); return ret; @@ -30,11 +30,11 @@ export const mdToReact = (filePath) => { const templateContent = getFileContent(`${packagePath}/blox/Page.template.hbs`); const mdContent = getFileContent(`${packagePath}/data/${fileName}.md`); - + const template = Handlebars.compile(templateContent); const propsTablePath = mdContent.includes('{{props-table}}') ? `./${fileName}.props-table.json` : null; const compiledTemplate = template({ mdContent: marked.parse(mdContent), name: fileName, propsTablePath }); - + if (!fs.existsSync(dirName)) { fs.mkdirSync(dirName, { recursive: true }); }