From cc4fdffdbc58e7374c734a221c6bc1a32738cbf3 Mon Sep 17 00:00:00 2001 From: Nancy <68706811+nancy-dassana@users.noreply.github.com> Date: Thu, 20 Aug 2020 17:10:57 -0700 Subject: [PATCH] feat #3 - Input field component (#53) * feat #3 - Create input field component + refactor button component + bump storybook version and fix glob error Closes #3 --- .storybook/main.js | 2 +- package-lock.json | 431 +++++++++--------- package.json | 13 +- src/__snapshots__/storybook.test.ts.snap | 108 +++++ src/components/Button/Button.stories.tsx | 15 +- src/components/Button/index.tsx | 1 - .../InputField/InputField.stories.tsx | 26 ++ src/components/InputField/InputField.test.tsx | 140 ++++++ src/components/InputField/index.tsx | 176 +++++++ src/components/index.ts | 1 + 10 files changed, 676 insertions(+), 237 deletions(-) create mode 100644 src/components/InputField/InputField.stories.tsx create mode 100644 src/components/InputField/InputField.test.tsx create mode 100644 src/components/InputField/index.tsx diff --git a/.storybook/main.js b/.storybook/main.js index bf3c7a6f..866086e2 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,5 +1,5 @@ module.exports = { - stories: ['../src/**/*.stories.(ts|tsx|js|jsx|mdx)'], + stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', diff --git a/package-lock.json b/package-lock.json index 8c9ed346..ee34900e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1278,7 +1278,6 @@ "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", - "dev": true, "requires": { "@emotion/sheet": "0.9.4", "@emotion/stylis": "0.8.5", @@ -1287,10 +1286,9 @@ } }, "@emotion/core": { - "version": "10.0.35", - "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.35.tgz", - "integrity": "sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==", - "dev": true, + "version": "10.0.28", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz", + "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==", "requires": { "@babel/runtime": "^7.5.5", "@emotion/cache": "^10.0.27", @@ -1304,7 +1302,6 @@ "version": "10.0.27", "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", - "dev": true, "requires": { "@emotion/serialize": "^0.11.15", "@emotion/utils": "0.11.3", @@ -1314,8 +1311,7 @@ "@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", - "dev": true + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, "@emotion/is-prop-valid": { "version": "0.8.8", @@ -1329,14 +1325,12 @@ "@emotion/memoize": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "dev": true + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, "@emotion/serialize": { "version": "0.11.16", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", - "dev": true, "requires": { "@emotion/hash": "0.8.0", "@emotion/memoize": "0.7.4", @@ -1348,8 +1342,7 @@ "@emotion/sheet": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", - "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==", - "dev": true + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" }, "@emotion/styled": { "version": "10.0.27", @@ -1376,26 +1369,22 @@ "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "dev": true + "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==", - "dev": true + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, "@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", - "dev": true + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" }, "@emotion/weak-memoize": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", - "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", - "dev": true + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, "@hapi/address": { "version": "2.1.4", @@ -2171,17 +2160,17 @@ } }, "@storybook/addon-actions": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.0.12.tgz", - "integrity": "sha512-Qs54RCIKXoBo3lYbAevrDHnKm6BMIxN+WNkVrBfxCvlgk+jxaSvyjoU/UkfVAmZWDuPLcKNmONIK0HoQS9xhtQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.0.16.tgz", + "integrity": "sha512-kyPGMP2frdhUgJAm6ChqvndaUawwQE9Vx7pN1pk/Q4qnyVlWCneZVojQf0iAgL45q0az0XI1tOPr4ooroaniYg==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/client-api": "6.0.12", - "@storybook/components": "6.0.12", - "@storybook/core-events": "6.0.12", - "@storybook/theming": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/client-api": "6.0.16", + "@storybook/components": "6.0.16", + "@storybook/core-events": "6.0.16", + "@storybook/theming": "6.0.16", "core-js": "^3.0.1", "fast-deep-equal": "^3.1.1", "global": "^4.3.2", @@ -2205,17 +2194,17 @@ } }, "@storybook/addon-backgrounds": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.0.12.tgz", - "integrity": "sha512-udRYxbjCvb7ZNcsIv5zyEUVpBXGQrKeAkfn/pVdzTFZhv1A5G5ho0gtVrbpfz7k8gj4tb3CGb3hLM4D7chLVKg==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.0.16.tgz", + "integrity": "sha512-0sH7hlZh4bHt6zV6QyG3ryNGJsxD42iXVwWdwAShzfWJKGfLy5XwdvHUKkMEBbY9bOPeoI9oMli2RAfsD6juLQ==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/components": "6.0.12", - "@storybook/core-events": "6.0.12", - "@storybook/theming": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/components": "6.0.16", + "@storybook/core-events": "6.0.16", + "@storybook/theming": "6.0.16", "core-js": "^3.0.1", "memoizerific": "^1.11.3", "react": "^16.8.3", @@ -2223,25 +2212,25 @@ } }, "@storybook/addon-controls": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.0.12.tgz", - "integrity": "sha512-tTyvJLvLIZOI4Zz8S9z9fcWU2FNJ28973AKiSoqjVr0VM2Rs9MsvPMibaZCsKgaTuHvtBpinBsZdWSEOz8Oagw==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.0.16.tgz", + "integrity": "sha512-RgBOply9o3PYoWI7TNKef2AQixw7l620pT1fCJbXykp/lu17eqKaIa5KYHRE9vEajun5RuEQxGnSzQOV3OZAsA==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/client-api": "6.0.12", - "@storybook/components": "6.0.12", - "@storybook/node-logger": "6.0.12", - "@storybook/theming": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/client-api": "6.0.16", + "@storybook/components": "6.0.16", + "@storybook/node-logger": "6.0.16", + "@storybook/theming": "6.0.16", "core-js": "^3.0.1", "ts-dedent": "^1.1.1" } }, "@storybook/addon-docs": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.0.12.tgz", - "integrity": "sha512-OsIDSYQWCNY0y6HOehDcrgOyPKD9bKhA0XkFjYUURLF/vnW8/+cxU2IDaDjdtLmjVQUdEe413B8stbb0tZDuVA==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.0.16.tgz", + "integrity": "sha512-7gM/0lQ3mSybpOpQbgR8fjAU+u3zgAWyOM1a+LR7zVn5lNjgBhZD2pfHuwViTeAGG/IIpvmOsd57BKlFJw5TPA==", "dev": true, "requires": { "@babel/generator": "^7.9.6", @@ -2252,18 +2241,18 @@ "@mdx-js/loader": "^1.5.1", "@mdx-js/mdx": "^1.5.1", "@mdx-js/react": "^1.5.1", - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/client-api": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/components": "6.0.12", - "@storybook/core": "6.0.12", - "@storybook/core-events": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/client-api": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/components": "6.0.16", + "@storybook/core": "6.0.16", + "@storybook/core-events": "6.0.16", "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.0.12", - "@storybook/postinstall": "6.0.12", - "@storybook/source-loader": "6.0.12", - "@storybook/theming": "6.0.12", + "@storybook/node-logger": "6.0.16", + "@storybook/postinstall": "6.0.16", + "@storybook/source-loader": "6.0.16", + "@storybook/theming": "6.0.16", "acorn": "^7.1.0", "acorn-jsx": "^5.1.0", "acorn-walk": "^7.0.0", @@ -2585,36 +2574,36 @@ } }, "@storybook/addon-essentials": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.0.12.tgz", - "integrity": "sha512-HPag/8EatgKIoPDEJKecvvwBXT2BYr8d19qaeqvlk+wItnOuULvF8hRlrovLx4P1AsXRI5laFE9UrH28tIVN+w==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.0.16.tgz", + "integrity": "sha512-tHH2B4cGYihaPytzIlcFlc/jDSu1PUMgaQM4uzIDOn6SCYZJMp5vygK97zF7hf41x/TXv+8i9ZMN5iUJ7l1+fw==", "dev": true, "requires": { - "@storybook/addon-actions": "6.0.12", - "@storybook/addon-backgrounds": "6.0.12", - "@storybook/addon-controls": "6.0.12", - "@storybook/addon-docs": "6.0.12", - "@storybook/addon-toolbars": "6.0.12", - "@storybook/addon-viewport": "6.0.12", - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/node-logger": "6.0.12", + "@storybook/addon-actions": "6.0.16", + "@storybook/addon-backgrounds": "6.0.16", + "@storybook/addon-controls": "6.0.16", + "@storybook/addon-docs": "6.0.16", + "@storybook/addon-toolbars": "6.0.16", + "@storybook/addon-viewport": "6.0.16", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/node-logger": "6.0.16", "core-js": "^3.0.1", "regenerator-runtime": "^0.13.3", "ts-dedent": "^1.1.1" } }, "@storybook/addon-links": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.0.12.tgz", - "integrity": "sha512-qc5fkfwP8BWEhXp0eA0VnK8UB9OyVve0itx109st6Y1q8JT7ruDrI2E1V/b5AjUEQDFTRA7yekInKnes2zLefA==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.0.16.tgz", + "integrity": "sha512-5rQLzrjqQWmukBAIYghrQKZUrz/X9bx83DSh0W3RH+y1X+MJguah0WxbARePtJxggwb0s2rkoE/oR/uFePO+Pg==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/core-events": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/core-events": "6.0.16", "@storybook/csf": "0.0.1", - "@storybook/router": "6.0.12", + "@storybook/router": "6.0.16", "@types/qs": "^6.9.0", "core-js": "^3.0.1", "global": "^4.3.2", @@ -2633,15 +2622,15 @@ } }, "@storybook/addon-storyshots": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.0.12.tgz", - "integrity": "sha512-m0CnVg02voPG85KMJtQBhYoQKPW339ejaWeeRMBb8h8DwJhcKKuixn9QLXa+Zt15FMR19XgLblFUEkp3XOPGKQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.0.16.tgz", + "integrity": "sha512-wQhM6pnjUCLTr/6BMXTptGeqiMPnnTrvLeaRwG1cDChGK/qs3YqTsa2QqLXQ17IvNUDTHLUNQlYk5af+HrCGhg==", "dev": true, "requires": { "@jest/transform": "^26.0.0", - "@storybook/addons": "6.0.12", - "@storybook/client-api": "6.0.12", - "@storybook/core": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/client-api": "6.0.16", + "@storybook/core": "6.0.16", "@types/glob": "^7.1.1", "@types/jest": "^25.1.1", "@types/jest-specific-snapshot": "^0.5.3", @@ -3166,30 +3155,30 @@ } }, "@storybook/addon-toolbars": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.0.12.tgz", - "integrity": "sha512-mxn52Zz6LR6uQAXK6NmGXnGs9iepkoYiZblvnulouq8fBhpSuS5A0fQggIdmYzuP8XHR9K/3hZ7Hqe4TrgCI4w==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.0.16.tgz", + "integrity": "sha512-6ulvPqe38NJRbQp0zajeNsDJQKZzGqbCMsSw3gtkFOMt8D/V625MF8YY/Y9UZ+xHWor17GUgE1k9hljdyZe1Nw==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/client-api": "6.0.12", - "@storybook/components": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/client-api": "6.0.16", + "@storybook/components": "6.0.16", "core-js": "^3.0.1" } }, "@storybook/addon-viewport": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.0.12.tgz", - "integrity": "sha512-P9DEi2LRgYYSiJGqNc10JwLAXWQWdW9a8MhUX4PFZtgLq6Aao+c2fxFkCsRbotSy321v8xLvVDKXnKQshIhf0Q==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.0.16.tgz", + "integrity": "sha512-3vk6lBZrKJrK9rwxglLT1p579WkLvoJxgW5ddpvSsu31NPAKfDufkDqOZOQGyMmcgIFzZJEc9eKjoTcLiHxppw==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/components": "6.0.12", - "@storybook/core-events": "6.0.12", - "@storybook/theming": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/components": "6.0.16", + "@storybook/core-events": "6.0.16", + "@storybook/theming": "6.0.16", "core-js": "^3.0.1", "global": "^4.3.2", "memoizerific": "^1.11.3", @@ -3198,36 +3187,36 @@ } }, "@storybook/addons": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.12.tgz", - "integrity": "sha512-gVCyWK4jys5cUY0d3/Bxi02oeCsgdi6xVvA+T4v+SgeduAfm/k01tdO2qDXL37Sl+2TT9HBQGazDrsIUW4d7Ug==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.16.tgz", + "integrity": "sha512-jGMaOJYTM2yZeX1tI6whEn+4xpI1aAybZBrc+OD21CcGoQrbF/jplZMq7xKI0Y6vOMguuTGulpUNCezD3LbBjA==", "dev": true, "requires": { - "@storybook/api": "6.0.12", - "@storybook/channels": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/core-events": "6.0.12", - "@storybook/router": "6.0.12", - "@storybook/theming": "6.0.12", + "@storybook/api": "6.0.16", + "@storybook/channels": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/core-events": "6.0.16", + "@storybook/router": "6.0.16", + "@storybook/theming": "6.0.16", "core-js": "^3.0.1", "global": "^4.3.2", "regenerator-runtime": "^0.13.3" } }, "@storybook/api": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.12.tgz", - "integrity": "sha512-8+jPtfhUVM1hT22OT4rjHRxkW924gbWrAxCFYUXOw80a0x7BcT4sL2ah1D4FWf0IpCT/onLf9jLvSVXr8V0xOw==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.16.tgz", + "integrity": "sha512-RTC4BKmH5i8bJUQejOHEtjebVKtOaHkmEagI2HQRalsokBc1GLAf84EGrO2TaZiRrItAPL5zZQgEnKUblsGJGw==", "dev": true, "requires": { "@reach/router": "^1.3.3", - "@storybook/channels": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/core-events": "6.0.12", + "@storybook/channels": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/core-events": "6.0.16", "@storybook/csf": "0.0.1", - "@storybook/router": "6.0.12", + "@storybook/router": "6.0.16", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.0.12", + "@storybook/theming": "6.0.16", "@types/reach__router": "^1.3.5", "core-js": "^3.0.1", "fast-deep-equal": "^3.1.1", @@ -3289,14 +3278,14 @@ } }, "@storybook/channel-postmessage": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.12.tgz", - "integrity": "sha512-Hmb8/g1nqErOHcGBagIFlIuLb/Rc9cOSFrGumbYckl7M90CHFGJsgxhO5JwGzIR3WevYHrTutVlMHl1xs7S1mQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.16.tgz", + "integrity": "sha512-66B4FH5R7k9i7LBhGsr/hYOxwE4UBM1JMPGV0rhAnFY8m91GiUWl4YWTRdbYIkeaZxf/0oT4sgPScqz44hnw6Q==", "dev": true, "requires": { - "@storybook/channels": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/core-events": "6.0.12", + "@storybook/channels": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/core-events": "6.0.16", "core-js": "^3.0.1", "global": "^4.3.2", "qs": "^6.6.0", @@ -3312,9 +3301,9 @@ } }, "@storybook/channels": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.12.tgz", - "integrity": "sha512-0EMtjde4tRrBnJj5jOXSgtMYfMxGZgoe/0hvVSJuOABf0FY5x6xrqNNDfory7+TtgieuoQE4idl2/tdHE6QJJA==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.16.tgz", + "integrity": "sha512-TsI4GA7lKD4L2w6IjODMRfnEOkmvEp4eJDgf3MKm7+sMbxwi1y1d6yrW1UQbnmwoNJWk60ArMN2yqDBV+5MNJQ==", "dev": true, "requires": { "core-js": "^3.0.1", @@ -3323,16 +3312,16 @@ } }, "@storybook/client-api": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.12.tgz", - "integrity": "sha512-mG5H+2UTbnwN4i8mTZ2ArO5WqHaB1oUgyN7yA1S2dweqQ9hkgKw4AkqZM+SYOXZmvSHc69ZuCiq+SQDKlj2vkQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.16.tgz", + "integrity": "sha512-fFsp53lt9W2QHSumqdfFRbh+DI9fvd7li0GDxqLeNESXaUVw48yg8lQiyRNK+j5Pl4VBS3AqytLugJ+0MGm2cA==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/channel-postmessage": "6.0.12", - "@storybook/channels": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/core-events": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/channel-postmessage": "6.0.16", + "@storybook/channels": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/core-events": "6.0.16", "@storybook/csf": "0.0.1", "@types/qs": "^6.9.0", "@types/webpack-env": "^1.15.2", @@ -3356,9 +3345,9 @@ } }, "@storybook/client-logger": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.12.tgz", - "integrity": "sha512-MEFDlBbbqcivF/Xmxitx/ky8kxN7TVBZ7K754/pPEI5q6UW32DecJIRg79UWp/1nBPMX/A0U3ORwv+0MjgDZBQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.16.tgz", + "integrity": "sha512-xM61Aewxqoo8500UxV7iPpfqwikITojiCX3+w8ZiCJ2NizSaXkis95TEFAeHqyozfNym5CqG+6v2NWvGYV3ncQ==", "dev": true, "requires": { "core-js": "^3.0.1", @@ -3366,14 +3355,14 @@ } }, "@storybook/components": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.0.12.tgz", - "integrity": "sha512-w41jNwqhYYpc3S3g/IPqQG9Q9yI+6FaXwJtUjl2BvP4L0nJI3EH2s5lwFG59fp04FNifp7pQfyJb2RjmKZqg1g==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.0.16.tgz", + "integrity": "sha512-zpYGt3tWiN0yT7V0VhBl2T5Mr0COiNnTQUGCpA9Gl3pUBmAov2jCVf1sUxsIcBcMMZmDRcfo6NbJ/LqCFeUg+Q==", "dev": true, "requires": { - "@storybook/client-logger": "6.0.12", + "@storybook/client-logger": "6.0.16", "@storybook/csf": "0.0.1", - "@storybook/theming": "6.0.12", + "@storybook/theming": "6.0.16", "@types/overlayscrollbars": "^1.9.0", "@types/react-color": "^3.0.1", "@types/react-syntax-highlighter": "11.0.4", @@ -3396,9 +3385,9 @@ } }, "@storybook/core": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.0.12.tgz", - "integrity": "sha512-eivPFB/j+QLpfpJixy/g+yIr3XkRcsL8r6SUMhHJkEB+zbKz10q7MfQMaiXZwRDRrhjck1eIPxY2Uu/BvmJ2+w==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.0.16.tgz", + "integrity": "sha512-dVgw03bB8rSMrYDw+v07Yiqyy4yas1olnXpytscWCWdbBuflSAQU+mtqcHMIH9YlhucIT2dYiErDDDNmqP+6tw==", "dev": true, "requires": { "@babel/plugin-proposal-class-properties": "^7.8.3", @@ -3422,20 +3411,20 @@ "@babel/preset-react": "^7.8.3", "@babel/preset-typescript": "^7.9.0", "@babel/register": "^7.10.5", - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/channel-postmessage": "6.0.12", - "@storybook/channels": "6.0.12", - "@storybook/client-api": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/components": "6.0.12", - "@storybook/core-events": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/channel-postmessage": "6.0.16", + "@storybook/channels": "6.0.16", + "@storybook/client-api": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/components": "6.0.16", + "@storybook/core-events": "6.0.16", "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.0.12", - "@storybook/router": "6.0.12", + "@storybook/node-logger": "6.0.16", + "@storybook/router": "6.0.16", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.0.12", - "@storybook/ui": "6.0.12", + "@storybook/theming": "6.0.16", + "@storybook/ui": "6.0.16", "@types/glob-base": "^0.3.0", "@types/micromatch": "^4.0.1", "@types/node-fetch": "^2.5.4", @@ -4257,9 +4246,9 @@ } }, "@storybook/core-events": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.12.tgz", - "integrity": "sha512-52yNnp+dBkHiG9S+rQO7Nv3PdSDi0XnBt7FoQ+v8H31vGpgdBLEhy8w5ZA4eTrL951VaU/4/XoOaG2+yPALaoA==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.16.tgz", + "integrity": "sha512-ib+58N4OY8AOix2qcBH9ICRmVHUocpGaGRVlIo79WxJrpnB/HNQ8pEaniD+OAavDRq1B7uJqFlMkTXCC0GoFiQ==", "dev": true, "requires": { "core-js": "^3.0.1" @@ -4275,9 +4264,9 @@ } }, "@storybook/node-logger": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.0.12.tgz", - "integrity": "sha512-7Yr0b25ktt8ea9cPKVHtbmf5oKW3LiMkRcT6j5+LUtsNaDf3FUZF6Z1Rz6cTJLqoI2VYhQKsAcS0cc9b5JpCHw==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.0.16.tgz", + "integrity": "sha512-mD6so/puFV5oByBkDp9rv2mV/WyGy21QdrwXpXdtLDKNgqPuJjHZuF1RA/+MmDK4P1CjvP1no2H5WDKg+aW4QQ==", "dev": true, "requires": { "@types/npmlog": "^4.1.2", @@ -4340,9 +4329,9 @@ } }, "@storybook/postinstall": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.0.12.tgz", - "integrity": "sha512-Tu1j9KWC+6WjBYxodXrkkKs+XzKLOqzsQLecasvG1Z9Ivhj0dTsAkq8BbCrTY+kJGBb5I+DQzvftON4voPBlMA==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.0.16.tgz", + "integrity": "sha512-gZgPNJK/58VepIBodK0pSlD1jPQgIVTEFWot5/iDjxv9cnSl9V+LbIEW5jZp/lzoAONSj8AS646ZZjAM87S4RQ==", "dev": true, "requires": { "core-js": "^3.0.1" @@ -4371,16 +4360,16 @@ } }, "@storybook/react": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/react/-/react-6.0.12.tgz", - "integrity": "sha512-5GSEyEXtiAYY7U8nb5jcG73tY2RI9/VRkyzjArBfvOL3sAiWf1Nrs4p33jIndrBtoopnulAsPtJLVCT2ZpsufQ==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/react/-/react-6.0.16.tgz", + "integrity": "sha512-cxnBwewx37rL1BjXo3TQFIvvCv9z26r3yuRRWh527/0QODfwGz8TT+/sJHeqBA5JIQzLwAHNqNJhLp6xzfr5Dw==", "dev": true, "requires": { "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@storybook/addons": "6.0.12", - "@storybook/core": "6.0.12", - "@storybook/node-logger": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/core": "6.0.16", + "@storybook/node-logger": "6.0.16", "@storybook/semver": "^7.3.2", "@svgr/webpack": "^5.4.0", "@types/webpack-env": "^1.15.2", @@ -4942,9 +4931,9 @@ } }, "@storybook/router": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.12.tgz", - "integrity": "sha512-vv1jHOOGelSzmDJnp9SdC/KR5RpE2am568ImOAQ9/XCmXNDhVshVlIS7ajy6yCKN/mS/63zKflbRNef+3SLU9Q==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.16.tgz", + "integrity": "sha512-zijPJ3CR4ytHE0v+pGdaWT3H+es+mLHRkR6hkqcD0ABT5HVfwMlmXJ9FkQGCVpnnNeBOz7+QKCdE13HMelQpqg==", "dev": true, "requires": { "@reach/router": "^1.3.3", @@ -4964,13 +4953,13 @@ } }, "@storybook/source-loader": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.0.12.tgz", - "integrity": "sha512-NX0ewdGc1semXAqCXL9bJS7aB57gZjJ/j8KyI8KJag7hgY/XfFsBHtAuuqH8ZJ6b6JjBqyyEKbKvWN14+YVteA==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.0.16.tgz", + "integrity": "sha512-Ub6bU7o2JJUigzu9MSrFH1RD2SmpZZnym+WEidWI9A1gseKp1Rd4KDq36AqJo/oL3hAzoAOirrv3ZixIwXLFMg==", "dev": true, "requires": { - "@storybook/addons": "6.0.12", - "@storybook/client-logger": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/client-logger": "6.0.16", "@storybook/csf": "0.0.1", "core-js": "^3.0.1", "estraverse": "^4.2.0", @@ -4995,15 +4984,15 @@ } }, "@storybook/theming": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.12.tgz", - "integrity": "sha512-hmF6EIbm2A7G84+JR36UQWteElSwSNfGLzccAlUMiZIhdMG0SuCtyHe6FmckAWC226Mv+MW14fr+a4+OuRpM4g==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.16.tgz", + "integrity": "sha512-6D7oMEbeABYZdDY8e3i+O39XLrk6fvG3GBaSGp31BE30d269NcPkGPxMKY/nzc6MY30a+/LbBbM7b6gRKe6b4Q==", "dev": true, "requires": { "@emotion/core": "^10.0.20", "@emotion/is-prop-valid": "^0.8.6", "@emotion/styled": "^10.0.17", - "@storybook/client-logger": "6.0.12", + "@storybook/client-logger": "6.0.16", "core-js": "^3.0.1", "deep-object-diff": "^1.1.0", "emotion-theming": "^10.0.19", @@ -5023,21 +5012,21 @@ } }, "@storybook/ui": { - "version": "6.0.12", - "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.0.12.tgz", - "integrity": "sha512-uo2YVozW7HP0kA6YfVw8C/CHU9GWXo4KhiJ8KGxMsGH2RhukQ02316a6Q7EM65pAFu698QSnL/2NJ9+e056k+w==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.0.16.tgz", + "integrity": "sha512-4F21kwQVaMwgqoJmO+566j7MXmvPp+7jfWBMPAvyGsf5uIZ4q6V29h5mMLvTOFA4qHw0lHZk2k8V0g5gk/tjCA==", "dev": true, "requires": { "@emotion/core": "^10.0.20", - "@storybook/addons": "6.0.12", - "@storybook/api": "6.0.12", - "@storybook/channels": "6.0.12", - "@storybook/client-logger": "6.0.12", - "@storybook/components": "6.0.12", - "@storybook/core-events": "6.0.12", - "@storybook/router": "6.0.12", + "@storybook/addons": "6.0.16", + "@storybook/api": "6.0.16", + "@storybook/channels": "6.0.16", + "@storybook/client-logger": "6.0.16", + "@storybook/components": "6.0.16", + "@storybook/core-events": "6.0.16", + "@storybook/router": "6.0.16", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.0.12", + "@storybook/theming": "6.0.16", "@types/markdown-to-jsx": "^6.11.0", "copy-to-clipboard": "^3.0.8", "core-js": "^3.0.1", @@ -7163,7 +7152,6 @@ "version": "10.0.33", "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz", "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==", - "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", "@emotion/hash": "0.8.0", @@ -7378,8 +7366,7 @@ "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", - "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", - "dev": true + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", @@ -11179,10 +11166,9 @@ } }, "csstype": { - "version": "2.6.13", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz", - "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==", - "dev": true + "version": "2.6.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz", + "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==" }, "cyclist": { "version": "1.0.1", @@ -13243,8 +13229,7 @@ "find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "dev": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "find-up": { "version": "3.0.0", @@ -15565,15 +15550,15 @@ "dev": true }, "expect": { - "version": "26.4.0", - "resolved": "https://registry.npmjs.org/expect/-/expect-26.4.0.tgz", - "integrity": "sha512-dbYDJhFcqQsamlos6nEwAMe+ahdckJBk5fmw1DYGLQGabGSlUuT+Fm2jHYw5119zG3uIhP+lCQbjJhFEdZMJtg==", + "version": "26.4.1", + "resolved": "https://registry.npmjs.org/expect/-/expect-26.4.1.tgz", + "integrity": "sha512-PnsyF/VmPRH/HAWELjrIAgQ5h+4JLTiomA1A2djx+jXrCQzQ/4egZYBOEx9hShoX+mQLS4enYk6Ouxk8b4kcEw==", "dev": true, "requires": { "@jest/types": "^26.3.0", "ansi-styles": "^4.0.0", "jest-get-type": "^26.3.0", - "jest-matcher-utils": "^26.4.0", + "jest-matcher-utils": "^26.4.1", "jest-message-util": "^26.3.0", "jest-regex-util": "^26.0.0" } @@ -15650,9 +15635,9 @@ } }, "jest-matcher-utils": { - "version": "26.4.0", - "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.4.0.tgz", - "integrity": "sha512-u+xdCdq+F262DH+PutJKXLGr2H5P3DImdJCir51PGSfi3TtbLQ5tbzKaN8BkXbiTIU6ayuAYBWTlU1nyckVdzA==", + "version": "26.4.1", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.4.1.tgz", + "integrity": "sha512-nmHWaOz54R/w6zJju5tuW0bw6+m38Rb1jnDKehKM/bOngDDL0UwtN634cRxpFoUNVRUrX8Wa0Z34xq/f8iuP5A==", "dev": true, "requires": { "chalk": "^4.0.0", @@ -15710,21 +15695,21 @@ } }, "jest-snapshot": { - "version": "26.4.0", - "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.4.0.tgz", - "integrity": "sha512-vFGmNGWHMBomrlOpheTMoqihymovuH3GqfmaEIWoPpsxUXyxT3IlbxI5I4m2vg0uv3HUJYg5JoGrkgMzVsAwCg==", + "version": "26.4.1", + "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.4.1.tgz", + "integrity": "sha512-5DsxbSSuYA8rZ/ynO+l5J65wSIyzDB2AXjuIvep90YmtslrROqDtba2hBgq1Cj6L6A0j/jv6h8JydEe2WYPM/g==", "dev": true, "requires": { "@babel/types": "^7.0.0", "@jest/types": "^26.3.0", "@types/prettier": "^2.0.0", "chalk": "^4.0.0", - "expect": "^26.4.0", + "expect": "^26.4.1", "graceful-fs": "^4.2.4", "jest-diff": "^26.4.0", "jest-get-type": "^26.3.0", "jest-haste-map": "^26.3.0", - "jest-matcher-utils": "^26.4.0", + "jest-matcher-utils": "^26.4.1", "jest-message-util": "^26.3.0", "jest-resolve": "^26.4.0", "natural-compare": "^1.4.0", @@ -20709,6 +20694,14 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", "dev": true }, + "react-loading-skeleton": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-2.1.1.tgz", + "integrity": "sha512-+fGvgG9ieUw4D5QVgpqJkJ75jhzUdz96GRsA0HjTlR0Mpj9DJUEFc0AKELs7ZkqWVH8/DiroaaufSrOPld1kGA==", + "requires": { + "@emotion/core": "^10.0.22" + } + }, "react-popper": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", diff --git a/package.json b/package.json index c16b7a2b..52bc2805 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-jss": "^10.4.0", + "react-loading-skeleton": "^2.1.1", "react-scripts": "^3.4.3", "rollup": "^2.23.0", "rollup-plugin-typescript2": "^0.27.1", @@ -59,13 +60,13 @@ ] }, "devDependencies": { - "@storybook/addon-actions": "^6.0.12", - "@storybook/addon-essentials": "^6.0.12", - "@storybook/addon-links": "^6.0.12", - "@storybook/addon-storyshots": "^6.0.12", - "@storybook/addons": "^6.0.12", + "@storybook/addon-actions": "^6.0.16", + "@storybook/addon-essentials": "^6.0.16", + "@storybook/addon-links": "^6.0.16", + "@storybook/addon-storyshots": "^6.0.16", + "@storybook/addons": "^6.0.16", "@storybook/preset-create-react-app": "^3.1.4", - "@storybook/react": "^6.0.12", + "@storybook/react": "^6.0.16", "@types/classnames": "^2.2.10", "@types/enzyme": "^3.10.5", "@types/enzyme-adapter-react-16": "^1.0.6", diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index bde56b6f..2f9fd953 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -85,6 +85,114 @@ exports[`Storyshots Button Primary Disabled 1`] = ` `; +exports[`Storyshots InputField Default 1`] = ` +
+
+ Field Label +
+ +
+`; + +exports[`Storyshots InputField Error 1`] = ` +
+
+ Field Label +
+ +
+`; + +exports[`Storyshots InputField Full Width 1`] = ` +
+
+ Field Label +
+ +
+`; + +exports[`Storyshots InputField Loading 1`] = ` +
+
+ + + ‌ + + +
+
+ + + ‌ + + +
+
+`; + exports[`Storyshots Link Default 1`] = ` = args => ( ) export const Default = Template.bind({}) -Default.args = { ...actionsData, children: 'Default' } +Default.args = { children: 'Default' } export const Disabled = Template.bind({}) -Disabled.args = { ...actionsData, children: 'Disabled', disabled: true } +Disabled.args = { children: 'Disabled', disabled: true } export const Primary = Template.bind({}) -Primary.args = { ...actionsData, children: 'Primary', primary: true } +Primary.args = { children: 'Primary', primary: true } export const PrimaryDisabled = Template.bind({}) PrimaryDisabled.args = { - ...actionsData, children: 'Primary Disabled', disabled: true, primary: true @@ -65,7 +61,6 @@ const GoogleTemplate: Story = ({ ...args }: ButtonProps) => { export const Google = GoogleTemplate.bind({}) Google.args = { - ...actionsData, children: 'Sign in with Google', classes: ['google'] } diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 15454d1c..8d82328e 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -2,7 +2,6 @@ import 'antd/lib/button/style/index.css' import { Button as AntDButton } from 'antd' import { ButtonProps as AntDButtonProps } from 'antd/es/button' import classnames from 'classnames' - import React, { FC, ReactNode } from 'react' export interface ButtonProps { diff --git a/src/components/InputField/InputField.stories.tsx b/src/components/InputField/InputField.stories.tsx new file mode 100644 index 00000000..0e1e1078 --- /dev/null +++ b/src/components/InputField/InputField.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import InputField, { InputFieldProps } from './index' +import { Meta, Story } from '@storybook/react/types-6-0' + +export default { + argTypes: { + classes: { control: 'array' }, + fieldLabel: { defaultValue: 'Field Label' }, + value: { control: { disable: true } } + }, + component: InputField, + title: 'InputField' +} as Meta + +const Template: Story = args => + +export const Default = Template.bind({}) + +export const Loading = Template.bind({}) +Loading.args = { loading: true } + +export const FullWidth = Template.bind({}) +FullWidth.args = { fullWidth: true } + +export const Error = Template.bind({}) +Error.args = { error: true } diff --git a/src/components/InputField/InputField.test.tsx b/src/components/InputField/InputField.test.tsx new file mode 100644 index 00000000..6e089062 --- /dev/null +++ b/src/components/InputField/InputField.test.tsx @@ -0,0 +1,140 @@ +import { Input } from 'antd' +import React from 'react' +import Skeleton from 'react-loading-skeleton' +import InputField, { InputFieldProps } from './index' +import { mount, ReactWrapper, shallow } from 'enzyme' + +let wrapper: ReactWrapper + +const mockProps: InputFieldProps = { + fieldLabel: 'Field Label' +} + +beforeEach(() => { + wrapper = mount() +}) + +describe('InputField', () => { + it('renders', () => { + const inputField = wrapper.find(InputField) + + expect(inputField).toHaveLength(1) + }) + + it('renders a label if one exists', () => { + const inputField = wrapper.find(InputField) + + expect(inputField.text()).toContain('Field Label') + }) + + it('throws an error if value is passed without an onClick', () => { + expect(() => shallow()).toThrow() + }) + + it('should pass onChange and value to the input component if the props exist', () => { + const mockOnChange = jest.fn() + wrapper = mount() + + expect(wrapper.find(Input).props().onChange).toEqual(mockOnChange) + expect(wrapper.find(Input).props().value).toEqual('abc') + }) + + it('correctly passes the disabled prop', () => { + wrapper = mount() + + expect(wrapper.find(Input).props().disabled).toBeTruthy() + }) + + it('correctly passes the placeholder prop', () => { + wrapper = mount() + + expect(wrapper.find(Input).props().placeholder).toEqual('Testing') + }) + + describe('type', () => { + it('defaults to type text if no type is specified', () => { + expect(wrapper.find(Input).props().type).toEqual('text') + }) + + it('correctly passes the input type prop', () => { + wrapper = mount() + + expect(wrapper.find(Input).props().type).toEqual('password') + }) + }) + + describe('loading', () => { + it('renders a loading skeleton', () => { + wrapper = mount() + + expect(wrapper.find(Skeleton)).toHaveLength(1) + }) + + it('renders a loading skeleton for the label if there is one', () => { + wrapper = mount() + + expect(wrapper.find(Skeleton)).toHaveLength(2) + }) + }) + + describe('fullWidth', () => { + beforeEach(() => { + // Mounting to document.body throws a React error, so create a temporary container div for the tests to mount the element to + const div = document.createElement('div') + div.setAttribute('id', 'container') + document.body.appendChild(div) + }) + + afterEach(() => { + const div = document.getElementById('container') + + if (div) { + document.body.removeChild(div) + } + }) + + it('renders a container that will span the width of its parent container if set to true', () => { + wrapper = mount(, { + attachTo: document.getElementById('container') + }) + + const element = document.getElementsByClassName( + wrapper.getDOMNode().className + )[0] + const style = window.getComputedStyle(element) + + expect(style.width).toEqual('100%') + }) + + it('does not render a container that will span the width of its parent container by default', () => { + wrapper = mount(, { + attachTo: document.getElementById('container') + }) + + const element = document.getElementsByClassName( + wrapper.getDOMNode().className + )[0] + const style = window.getComputedStyle(element) + + expect(style.width).not.toEqual('100%') + }) + }) + + describe('required', () => { + it('passes the correct required class to field label container', () => { + wrapper = mount() + + expect(wrapper.getDOMNode().children[0].className).toContain( + 'required' + ) + }) + }) + + describe('error', () => { + it('passes the correct error class to input', () => { + wrapper = mount() + + expect(wrapper.find(Input).hasClass(/error-*/)).toBeTruthy() + }) + }) +}) diff --git a/src/components/InputField/index.tsx b/src/components/InputField/index.tsx new file mode 100644 index 00000000..cbdc02f0 --- /dev/null +++ b/src/components/InputField/index.tsx @@ -0,0 +1,176 @@ +import 'antd/lib/input/style/index.css' +import cn from 'classnames' +import { createUseStyles } from 'react-jss' +import { Input } from 'antd' +import Skeleton from 'react-loading-skeleton' +import React, { FC } from 'react' + +const useStyles = createUseStyles({ + '@keyframes shake': { + '0%, 100%': { left: '0rem' }, + '20%, 60%': { left: '0.5rem' }, + '40%, 80%': { left: '-0.5rem' } + }, + container: { + display: 'flex', + flexDirection: 'column', + width: props => (props.fullWidth ? '100%' : '300px') + }, + error: { + animation: 'shake 0.2s ease-in-out 0s 2', + border: '1px solid orange' + }, + input: { + border: '1px solid #DEDEDF', + borderRadius: '4px', + padding: '8.5px 14px' + }, + label: { + fontSize: '14px', + paddingBottom: '5px' + }, + required: { + '&::after': { + color: 'red', + // eslint-disable-next-line quotes + content: "'*'", + paddingLeft: '5px' + } + } +}) + +const InputFieldSkeleton: FC = (props: InputFieldProps) => { + const { fieldLabel } = props + const classes = useStyles(props) + + return ( +
+ {fieldLabel && ( +
+ +
+ )} +
+ +
+
+ ) +} + +export interface InputFieldProps { + /** + * Array of classes to pass to button. + * @default [] + */ + classes?: string[] + /** + * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events). + * @default false + */ + disabled?: boolean + /** + * Whether or not to show error state and animation + * @default false + */ + error?: boolean + /** + * Adds a label above the input + */ + fieldLabel?: string + /** + * Whether or not input spans the full width of the parent container + * @default false + */ + fullWidth?: boolean + /** + * Whether or not to show skeleton loader + * @default false + */ + loading?: boolean + /** + * Callback that runs when input is updated + * @default () => {} + */ + onChange?: () => void + /** + * Describes expected value of input + */ + placeholder?: string + /** + * Adds an asterisk to the label that indicates field is required + * @default false + */ + required?: boolean + /** + * Type of input (ex: text, password) + * @default text + */ + type?: 'text' | 'password' + /** + * Input content value for controlled inputs. Requires an onChange to be passed + */ + value?: string +} + +const InputField: FC = (props: InputFieldProps) => { + const { + classes = [], + disabled = false, + onChange, + error = false, + fieldLabel = '', + loading = false, + placeholder = '', + required = false, + type = 'text', + value + } = props + + const componentClasses = useStyles(props) + + const inputClasses: string = cn( + { + [componentClasses.error]: error + }, + classes + ) + + let controlledCmpProps = {} + + if (onChange) { + controlledCmpProps = { + onChange, + value + } + } + + if (value && !onChange) { + throw new Error('Controlled inputs require an onChange prop') + } + + return loading ? ( + + ) : ( +
+ {fieldLabel && ( +
+ {fieldLabel} +
+ )} + +
+ ) +} + +export default InputField diff --git a/src/components/index.ts b/src/components/index.ts index 49944001..124c4d6e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,6 @@ import 'normalize.css' import '../styles/index.css' export { default as Button } from './Button' +export { default as InputField } from './InputField' export { default as Link } from './Link' export { default as Tag } from './Tag'