From 6754293a53b7d4b39faa824e33e075ea08541e78 Mon Sep 17 00:00:00 2001 From: majakomel Date: Tue, 20 Feb 2024 17:57:20 +0100 Subject: [PATCH 1/2] Setup dependencies --- package.json | 5 ++ vite.config.ts | 9 +- yarn.lock | 221 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 223 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 88bbc59..b655631 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "dependencies": { "@styled-system/css": "^5.1.5", "@styled-system/should-forward-prop": "^5.1.5", + "@vanilla-extract/css": "^1.14.1", + "@vanilla-extract/recipes": "^0.5.1", "react-select": "^5.8.0", "styled-system": "^5.1.5" }, @@ -46,9 +48,11 @@ "@types/react-dom": "^18.2.19", "@types/styled-system": "^5.1.22", "@types/styled-system__css": "^5.0.21", + "@vanilla-extract/vite-plugin": "^4.0.4", "babel-plugin-inline-react-svg": "^2.0.2", "babel-plugin-styled-components": "^2.1.4", "cheerio": "^1.0.0-rc.12", + "css-loader": "^6.10.0", "gh-pages": "^6.1.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -67,6 +71,7 @@ "rollup-plugin-typescript2": "^0.36.0", "rollup-plugin-visualizer": "^5.12.0", "storybook": "^7.6.17", + "style-loader": "^3.3.4", "styled-components": "^6.1.8", "ts-jest": "^29.1.2", "tslib": "^2.6.2", diff --git a/vite.config.ts b/vite.config.ts index 36f7f4e..3af5aa7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,8 @@ -import react from '@vitejs/plugin-react' -import { defineConfig } from 'vite' +import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; +import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vite'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], -}) + plugins: [react(), vanillaExtractPlugin()], +}); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ffe7897..382ebee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1199,7 +1199,7 @@ "@emotion/weak-memoize" "^0.3.1" stylis "4.2.0" -"@emotion/hash@^0.9.1": +"@emotion/hash@^0.9.0", "@emotion/hash@^0.9.1": version "0.9.1" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== @@ -3758,6 +3758,66 @@ dependencies: "@types/yargs-parser" "*" +"@vanilla-extract/babel-plugin-debug-ids@^1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@vanilla-extract/babel-plugin-debug-ids/-/babel-plugin-debug-ids-1.0.5.tgz#e24424f46dd7737764a4bb5ac6dcdf19240f88bc" + integrity sha512-Rc9A6ylsw7EBErmpgqCMvc/Z/eEZxI5k1xfLQHw7f5HHh3oc5YfzsAsYU/PdmSNjF1dp3sGEViBdDltvwnfVaA== + dependencies: + "@babel/core" "^7.23.9" + +"@vanilla-extract/css@^1.14.0", "@vanilla-extract/css@^1.14.1": + version "1.14.1" + resolved "https://registry.yarnpkg.com/@vanilla-extract/css/-/css-1.14.1.tgz#ae24b2d2ff6abd452f8e72440073b05a0372d62e" + integrity sha512-V4JUuHNjZgl64NGfkDJePqizkNgiSpphODtZEs4cCPuxLAzwOUJYATGpejwimJr1n529kq4DEKWexW22LMBokw== + dependencies: + "@emotion/hash" "^0.9.0" + "@vanilla-extract/private" "^1.0.3" + chalk "^4.1.1" + css-what "^6.1.0" + cssesc "^3.0.0" + csstype "^3.0.7" + deep-object-diff "^1.1.9" + deepmerge "^4.2.2" + media-query-parser "^2.0.2" + modern-ahocorasick "^1.0.0" + outdent "^0.8.0" + +"@vanilla-extract/integration@^7.1.0": + version "7.1.1" + resolved "https://registry.yarnpkg.com/@vanilla-extract/integration/-/integration-7.1.1.tgz#fd7781f859efea5698a2f1bb0b3d1107096ea496" + integrity sha512-2JjDKL2HDTazis4oTkUFsQFUyw61k8oym9r0NOLSJC0JB0W25W1ryVZvDx74d3deIyB5AWbCselyzl3gja30kQ== + dependencies: + "@babel/core" "^7.23.9" + "@babel/plugin-syntax-typescript" "^7.23.3" + "@vanilla-extract/babel-plugin-debug-ids" "^1.0.5" + "@vanilla-extract/css" "^1.14.0" + esbuild "npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0" + eval "0.1.8" + find-up "^5.0.0" + javascript-stringify "^2.0.1" + lodash "^4.17.21" + mlly "^1.4.2" + outdent "^0.8.0" + vite "^5.0.11" + vite-node "^1.2.0" + +"@vanilla-extract/private@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@vanilla-extract/private/-/private-1.0.3.tgz#7ec72bc2ff6fe51f9d650f962e8d1989b073690f" + integrity sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ== + +"@vanilla-extract/recipes@^0.5.1": + version "0.5.1" + resolved "https://registry.yarnpkg.com/@vanilla-extract/recipes/-/recipes-0.5.1.tgz#617d1a0375af60835341770397810317d2f61998" + integrity sha512-7dCuBgPQQ/89siQ0w2lkfjgkmToPUUDzFlHf5DRmt9ykiiycfA52tmPJ2RI/mr7jXi7U/vEN2aGP9QJSXEpGlA== + +"@vanilla-extract/vite-plugin@^4.0.4": + version "4.0.4" + resolved "https://registry.yarnpkg.com/@vanilla-extract/vite-plugin/-/vite-plugin-4.0.4.tgz#8975d1e584e7bb8bbc241d31d49db3b134328627" + integrity sha512-cfg4GK274xzwbVFh8YWvQXNnsCMemvMMwej7V93TTBP2O8qzyTgsx5VJuiAPov3oUU8JWGboaTs16Vnoe5bZ9w== + dependencies: + "@vanilla-extract/integration" "^7.1.0" + "@vitejs/plugin-react@^3.0.1": version "3.1.0" resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz#d1091f535eab8b83d6e74034d01e27d73c773240" @@ -4382,6 +4442,11 @@ bytes@3.1.2: resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5" integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg== +cac@^6.7.14: + version "6.7.14" + resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959" + integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ== + cacache@^16.1.0: version "16.1.3" resolved "https://registry.yarnpkg.com/cacache/-/cacache-16.1.3.tgz#a02b9f34ecfaf9a78c9f4bc16fceb94d5d67a38e" @@ -4495,7 +4560,7 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: +chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -4864,6 +4929,20 @@ css-color-keywords@^1.0.0: resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== +css-loader@^6.10.0: + version "6.10.0" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.10.0.tgz#7c172b270ec7b833951b52c348861206b184a4b7" + integrity sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw== + dependencies: + icss-utils "^5.1.0" + postcss "^8.4.33" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.4" + postcss-modules-scope "^3.1.1" + postcss-modules-values "^4.0.0" + postcss-value-parser "^4.2.0" + semver "^7.5.4" + css-select@^4.1.3: version "4.3.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b" @@ -4929,6 +5008,11 @@ css.escape@^1.5.1: resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg== +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + csso@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529" @@ -4965,7 +5049,7 @@ csstype@3.1.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== -csstype@^3.0.2: +csstype@^3.0.2, csstype@^3.0.7: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== @@ -5041,6 +5125,11 @@ deep-equal@^2.0.5: which-collection "^1.0.1" which-typed-array "^1.1.13" +deep-object-diff@^1.1.9: + version "1.1.9" + resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595" + integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA== + deepmerge@^4.2.2, deepmerge@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" @@ -5469,7 +5558,7 @@ esbuild@^0.18.0: "@esbuild/win32-ia32" "0.18.20" "@esbuild/win32-x64" "0.18.20" -esbuild@^0.19.3: +esbuild@^0.19.3, "esbuild@npm:esbuild@~0.17.6 || ~0.18.0 || ~0.19.0": version "0.19.12" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04" integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg== @@ -5564,6 +5653,14 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== +eval@0.1.8: + version "0.1.8" + resolved "https://registry.yarnpkg.com/eval/-/eval-0.1.8.tgz#2b903473b8cc1d1989b83a1e7923f883eb357f85" + integrity sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw== + dependencies: + "@types/node" "*" + require-like ">= 0.1.1" + execa@^5.0.0, execa@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd" @@ -6346,6 +6443,11 @@ iconv-lite@0.6.3, iconv-lite@^0.6.2: dependencies: safer-buffer ">= 2.1.2 < 3.0.0" +icss-utils@^5.0.0, icss-utils@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" + integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== + ieee754@^1.1.13: version "1.2.1" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" @@ -6816,6 +6918,11 @@ jake@^10.8.5: filelist "^1.0.4" minimatch "^3.1.2" +javascript-stringify@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79" + integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg== + jest-changed-files@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a" @@ -7316,6 +7423,11 @@ json5@^2.2.3: resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== +jsonc-parser@^3.2.0: + version "3.2.1" + resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.1.tgz#031904571ccf929d7670ee8c547545081cb37f1a" + integrity sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA== + jsonfile@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" @@ -7724,6 +7836,13 @@ mdn-data@2.0.30: resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc" integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA== +media-query-parser@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/media-query-parser/-/media-query-parser-2.0.2.tgz#ff79e56cee92615a304a1c2fa4f2bd056c0a1d29" + integrity sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w== + dependencies: + "@babel/runtime" "^7.12.5" + media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -8210,6 +8329,21 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +mlly@^1.2.0, mlly@^1.4.2: + version "1.5.0" + resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.5.0.tgz#8428a4617d54cc083d3009030ac79739a0e5447a" + integrity sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ== + dependencies: + acorn "^8.11.3" + pathe "^1.1.2" + pkg-types "^1.0.3" + ufo "^1.3.2" + +modern-ahocorasick@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283" + integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA== + mri@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b" @@ -8536,6 +8670,11 @@ ora@^5.4.1: strip-ansi "^6.0.0" wcwidth "^1.0.1" +outdent@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0" + integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A== + p-limit@^2.0.0, p-limit@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" @@ -8704,7 +8843,7 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -pathe@^1.1.1, pathe@^1.1.2: +pathe@^1.1.0, pathe@^1.1.1, pathe@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec" integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ== @@ -8786,6 +8925,15 @@ pkg-dir@^5.0.0: dependencies: find-up "^5.0.0" +pkg-types@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868" + integrity sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A== + dependencies: + jsonc-parser "^3.2.0" + mlly "^1.2.0" + pathe "^1.1.0" + polished@^4.2.2: version "4.3.1" resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548" @@ -8798,7 +8946,43 @@ possible-typed-array-names@^1.0.0: resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f" integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q== -postcss-value-parser@^4.0.2: +postcss-modules-extract-imports@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" + integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== + +postcss-modules-local-by-default@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6" + integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q== + dependencies: + icss-utils "^5.0.0" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + +postcss-modules-scope@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz#32cfab55e84887c079a19bbb215e721d683ef134" + integrity sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA== + dependencies: + postcss-selector-parser "^6.0.4" + +postcss-modules-values@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" + integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== + dependencies: + icss-utils "^5.0.0" + +postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: + version "6.0.15" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535" + integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + +postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -8812,7 +8996,7 @@ postcss@8.4.31: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.4.35: +postcss@^8.4.33, postcss@^8.4.35: version "8.4.35" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7" integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA== @@ -9332,6 +9516,11 @@ require-directory@^2.1.1: resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q== +"require-like@>= 0.1.1": + version "0.1.2" + resolved "https://registry.yarnpkg.com/require-like/-/require-like-0.1.2.tgz#ad6f30c13becd797010c468afa775c0c0a6b47fa" + integrity sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A== + requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" @@ -9958,6 +10147,11 @@ strip-outer@^1.0.1: dependencies: escape-string-regexp "^1.0.2" +style-loader@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7" + integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w== + styled-components@^6.1.8: version "6.1.8" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201" @@ -10631,7 +10825,18 @@ vfile@^5.0.0: unist-util-stringify-position "^3.0.0" vfile-message "^3.0.0" -vite@^5.1.3: +vite-node@^1.2.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-1.3.1.tgz#a93f7372212f5d5df38e945046b945ac3f4855d2" + integrity sha512-azbRrqRxlWTJEVbzInZCTchx0X69M/XPTCz4H+TLvlTcR/xH/3hkRqhOakT41fMJCMzXTu4UvegkZiEoJAWvng== + dependencies: + cac "^6.7.14" + debug "^4.3.4" + pathe "^1.1.1" + picocolors "^1.0.0" + vite "^5.0.0" + +vite@^5.0.0, vite@^5.0.11, vite@^5.1.3: version "5.1.3" resolved "https://registry.yarnpkg.com/vite/-/vite-5.1.3.tgz#dd072653a80225702265550a4700561740dfde55" integrity sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew== From 2c18f8bc41fd1bc28501ad2d929952f578fbf1bf Mon Sep 17 00:00:00 2001 From: majakomel Date: Wed, 28 Feb 2024 21:43:52 +0100 Subject: [PATCH 2/2] Implement button with vanilla-extract --- package.json | 1 + src/components/ButtonVE.css.ts | 142 ++++++++++++++++++++++++ src/components/ButtonVE.tsx | 56 ++++++++++ src/components/ButtonVESprinkles.css.ts | 17 +++ stories/ButtonVE.stories.tsx | 51 +++++++++ vite.config.ts | 8 +- yarn.lock | 5 + 7 files changed, 276 insertions(+), 4 deletions(-) create mode 100644 src/components/ButtonVE.css.ts create mode 100644 src/components/ButtonVE.tsx create mode 100644 src/components/ButtonVESprinkles.css.ts create mode 100644 stories/ButtonVE.stories.tsx diff --git a/package.json b/package.json index b655631..a4fdbc5 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@styled-system/should-forward-prop": "^5.1.5", "@vanilla-extract/css": "^1.14.1", "@vanilla-extract/recipes": "^0.5.1", + "@vanilla-extract/sprinkles": "^1.6.1", "react-select": "^5.8.0", "styled-system": "^5.1.5" }, diff --git a/src/components/ButtonVE.css.ts b/src/components/ButtonVE.css.ts new file mode 100644 index 0000000..0779631 --- /dev/null +++ b/src/components/ButtonVE.css.ts @@ -0,0 +1,142 @@ +import { createGlobalTheme } from '@vanilla-extract/css' +import { recipe } from '@vanilla-extract/recipes' +import { sprinkles } from './ButtonVESprinkles.css' + +export const vars = createGlobalTheme(':root', { + color: { + blue: { + '100': '#c9e8ff', + '200': '#8dd5f8', + '300': '#5db8fe', + '400': '#37a6ed', + '500': '#0588cb', + '600': '#0f77b8', + '700': '#056aa6', + '800': '#005f9c', + '900': '#005a99', + }, + }, + fontSize: { + sm: { fontSize: '0.875rem', lineHeight: '1.25rem' }, + }, + space: { + sm: '0.5rem', + }, +}) + +export const button = recipe({ + base: { + display: 'flex', + justifyItems: 'center', + alignItems: 'center', + borderRadius: 999, + cursor: 'pointer', + fontFamily: 'inherit', + // display: 'inline-block', + textTransform: 'capitalize', + // textAlign: 'center', + letterSpacing: '0.5px', + // verticalAlign: 'middle', + // Gets rid of tap active state + WebkitTapHighlightColor: 'transparent', + transition: '.2s ease-out', + outline: 0, + borderWidth: '2px', + borderStyle: 'solid', + ':focus-visible': { + transition: 'none', + outline: '2px solid', + outlineColor: vars.color.blue[500], + outlineOffset: '1px', + }, + }, + variants: { + variant: { + primary: { + background: vars.color.blue[500], + color: 'white', + borderColor: vars.color.blue[500], + ':hover': { + background: vars.color.blue[900], + borderColor: vars.color.blue[900], + }, + }, + dark: { + background: 'black', + borderColor: 'black', + color: 'white', + ':hover': { + background: 'black', + borderColor: 'black', + }, + }, + }, + size: { + s: [{ padding: '0.25rem 1rem' }, sprinkles({ textStyle: 'sm' })], + m: [{ padding: '0.5rem 1.5rem' }, sprinkles({ textStyle: 'md' })], + l: [{ padding: '0.5rem 2rem' }, sprinkles({ textStyle: 'xxl' })], + xl: [{ padding: '0.875rem 4rem' }, sprinkles({ textStyle: 'xxl' })], + }, + hollow: { + true: { background: 'transparent' }, + }, + }, + defaultVariants: { + size: 'm', + hollow: false, + variant: 'primary', + }, + compoundVariants: [ + { + variants: { + variant: 'primary', + hollow: true, + }, + style: { + background: 'transparent', + color: vars.color.blue[500], + ':hover': { + background: 'transparent', + borderColor: vars.color.blue[900], + color: vars.color.blue[900], + }, + }, + }, + ], +}) + +// export const storybookButton = style({ +// fontFamily: 'Nunito Sans , Helvetica Neue , Helvetica , Arial , sans-serif', +// fontWeight: '700', +// border: '0', +// borderRadius: '3em', +// cursor: 'pointer', +// display: 'inline-block', +// lineHeight: '1', +// }); + +// export const storybookButtonLarge = style({ +// fontSize: '16px', +// padding: '12px 24px', +// }); + +// export const storybookButtonMedium = style({ +// fontSize: '14px', +// padding: '11px 20px', +// }); + +// export const storybookButtonPrimary = style({ +// color: 'white', +// backgroundColor: '#1ea7fd', +// }); + +// export const storybookButtonSecondary = style({ +// color: '#333', +// backgroundColor: 'transparent', +// boxShadow: 'rgba(0,0,0,0.15) 0px 0px 0px 1px inset', +// }); + +// export const storybookButtonSmall = style({ +// fontSize: '12px', +// padding: '10px 16px', +// }); diff --git a/src/components/ButtonVE.tsx b/src/components/ButtonVE.tsx new file mode 100644 index 0000000..6356ad7 --- /dev/null +++ b/src/components/ButtonVE.tsx @@ -0,0 +1,56 @@ +import React, { forwardRef } from 'react' +import { button } from './ButtonVE.css' +import { sprinkles } from './ButtonVESprinkles.css' + +type Size = 's' | 'm' | 'l' | 'xl' +type Variant = 'primary' | 'dark' + +console.log(' sprinkles', sprinkles({ textStyle: 'sm' })) + +export interface ButtonProps + extends React.ButtonHTMLAttributes { + disabled?: boolean + inverted?: boolean + hollow?: boolean + variant?: Variant + size?: Size + startIcon?: React.ReactNode + endIcon?: React.ReactNode +} + +const Button = forwardRef( + ( + { + hollow = false, + inverted = false, + disabled = false, + variant = 'primary', + size = 'm', + type = 'button', + children, + startIcon, + endIcon, + ...rest + }: ButtonProps, + ref, + ) => { + return ( + + ) + }, +) + +export default Button diff --git a/src/components/ButtonVESprinkles.css.ts b/src/components/ButtonVESprinkles.css.ts new file mode 100644 index 0000000..c0554ba --- /dev/null +++ b/src/components/ButtonVESprinkles.css.ts @@ -0,0 +1,17 @@ +import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles' + +const properties = defineProperties({ + properties: { + textStyle: { + sm: { fontSize: '0.875rem', lineHeight: '1.25rem' }, + md: { fontSize: '1rem', lineHeight: '1.5rem' }, + lg: { fontSize: '1.125rem', lineHeight: '1.75rem' }, + xl: { fontSize: '1.25rem', lineHeight: '1.75rem' }, + xxl: { fontSize: '1.5rem', lineHeight: '2rem' }, + }, + }, +}) + +export const sprinkles = createSprinkles(properties) + +export type Sprinkles = Parameters[0] diff --git a/stories/ButtonVE.stories.tsx b/stories/ButtonVE.stories.tsx new file mode 100644 index 0000000..7964547 --- /dev/null +++ b/stories/ButtonVE.stories.tsx @@ -0,0 +1,51 @@ +import { Meta, StoryObj } from '@storybook/react' +import React from 'react' +import { BsTwitter } from 'react-icons/bs' +import Box from '../src/components/Box' +import Button from '../src/components/ButtonVE' + +const meta = { + title: 'Components/ButtonVE', + component: Button, + tags: ['autodocs'], + argTypes: { + onClick: { action: 'clicked' }, + hollow: { control: 'boolean' }, + disabled: { control: 'boolean' }, + inverted: { control: 'boolean' }, + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Primary: Story = { + args: { + children: 'Button', + }, +} + +export const ColorVariant: Story = { + args: { + variant: 'dark', + children: 'Button', + size: 's', + endIcon: , + }, +} + +export const Hollow: Story = { + args: { + hollow: true, + size: 'l', + children: 'Button', + }, +} + +export const LongButton = () => { + return ( + + + + ) +} diff --git a/vite.config.ts b/vite.config.ts index 3af5aa7..f88d398 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,8 +1,8 @@ -import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; -import react from '@vitejs/plugin-react'; -import { defineConfig } from 'vite'; +import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin' +import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), vanillaExtractPlugin()], -}); \ No newline at end of file +}) diff --git a/yarn.lock b/yarn.lock index 382ebee..2016b05 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3811,6 +3811,11 @@ resolved "https://registry.yarnpkg.com/@vanilla-extract/recipes/-/recipes-0.5.1.tgz#617d1a0375af60835341770397810317d2f61998" integrity sha512-7dCuBgPQQ/89siQ0w2lkfjgkmToPUUDzFlHf5DRmt9ykiiycfA52tmPJ2RI/mr7jXi7U/vEN2aGP9QJSXEpGlA== +"@vanilla-extract/sprinkles@^1.6.1": + version "1.6.1" + resolved "https://registry.yarnpkg.com/@vanilla-extract/sprinkles/-/sprinkles-1.6.1.tgz#2c8a832757a0d8104dc6bd5d961db2c70d1dbdcb" + integrity sha512-N/RGKwGAAidBupZ436RpuweRQHEFGU+mvAqBo8PRMAjJEmHoPDttV8RObaMLrJHWLqvX+XUMinHUnD0hFRQISw== + "@vanilla-extract/vite-plugin@^4.0.4": version "4.0.4" resolved "https://registry.yarnpkg.com/@vanilla-extract/vite-plugin/-/vite-plugin-4.0.4.tgz#8975d1e584e7bb8bbc241d31d49db3b134328627"