From 307c9c20d99829a0bf297b062ab6f5a2251ca096 Mon Sep 17 00:00:00 2001 From: Devin Fee Date: Thu, 13 Dec 2018 12:05:01 -0800 Subject: [PATCH] updated storybook config --- .storybook/addons.js | 4 +- .storybook/config.ts | 93 ++++++++- package-lock.json | 263 ++++++++++++++++++++++--- package.json | 3 +- src/base/generic.tsx | 11 +- stories/storybook__addon-viewport.d.ts | 1 + 6 files changed, 328 insertions(+), 47 deletions(-) create mode 100644 stories/storybook__addon-viewport.d.ts diff --git a/.storybook/addons.js b/.storybook/addons.js index edc81c6f..fa1376d8 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,5 +1,5 @@ import "@storybook/addon-knobs/register"; +import "@storybook/addon-viewport/register"; +import "@storybook/addon-storysource/register"; import "@storybook/addon-actions/register"; import "@storybook/addon-options/register"; -import "@storybook/addon-a11y/register"; -import "@storybook/addon-viewport/register"; diff --git a/.storybook/config.ts b/.storybook/config.ts index e8aac894..9ed6f3ab 100644 --- a/.storybook/config.ts +++ b/.storybook/config.ts @@ -1,25 +1,98 @@ -import { checkA11y } from "@storybook/addon-a11y"; -import { withInfo } from "@storybook/addon-info"; import { withKnobs } from "@storybook/addon-knobs"; import { setOptions } from "@storybook/addon-options"; +import { + configureViewport, + INITIAL_VIEWPORTS, +} from "@storybook/addon-viewport"; import { addDecorator, configure } from "@storybook/react"; import "../src/index.module.sass"; +// addon-info is currently broken with prop types +// import { withInfo } from "@storybook/addon-info"; +// addDecorator( +// withInfo({ +// // propTables: false, +// source: false, +// }), +// ); + setOptions({ - name: "RBX", + name: "👟 rbx - Bulma UI", showAddonPanel: true, url: "https://github.com/dfee/rbx", }); -addDecorator( - withInfo({ - // propTables: false, - source: false, - }), -); addDecorator(withKnobs); -addDecorator(checkA11y); + +configureViewport({ + defaultViewport: "responsive", + // tslint:disable:object-literal-sort-keys + viewports: { + mobileSmall: { + name: "Mobile @ 480px", + styles: { + width: "480px", + }, + }, + mobileMax: { + name: "Mobile @ 768px (max)", + styles: { + width: "768px", + }, + }, + tabletMin: { + name: "Tablet @ 769px (min)", + styles: { + width: "769px", + }, + }, + tabletMax: { + name: "Tablet @ 1023px (max)", + styles: { + width: "1023px", + }, + }, + desktopMin: { + name: "Desktop @ 1024px (min)", + styles: { + width: "1024px", + }, + }, + desktopMax: { + name: "Desktop @ 1215px (max)", + styles: { + width: "1215px", + }, + }, + widescreenMin: { + name: "Widescreen @ 1216px (min)", + styles: { + width: "1216px", + }, + }, + widescreenMax: { + name: "Widescreen @ 1407px (max)", + styles: { + width: "1407px", + }, + }, + fullhdMin: { + name: "FullHD @ 1408px (min)", + styles: { + width: "1408px", + }, + }, + fullhdMax: { + name: "FullHD @ 2880px", + styles: { + width: "2880px", + }, + }, + ...INITIAL_VIEWPORTS, + }, + // tslint:enable:object-literal-sort-keys +}); function loadStories() { const req = require.context("../stories", true, /\.story\.tsx$/); diff --git a/package-lock.json b/package-lock.json index 5c974d30..5c1c6067 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1136,23 +1136,6 @@ "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==", "dev": true }, - "@storybook/addon-a11y": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-4.1.0.tgz", - "integrity": "sha512-Ah4wNRkaIzVMQZUXCSsykoBiS+m8eJX/LnzthdogFTitdmgs97cdEUjm/XNG5dpOlr3eHeEw/JJy2ET8Xv+Www==", - "dev": true, - "requires": { - "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0", - "@storybook/client-logger": "4.1.0", - "@storybook/components": "4.1.0", - "@storybook/core-events": "4.1.0", - "axe-core": "^3.1.2", - "core-js": "^2.5.7", - "global": "^4.3.2", - "prop-types": "^15.6.2" - } - }, "@storybook/addon-actions": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-4.1.0.tgz", @@ -1228,6 +1211,67 @@ "util-deprecate": "^1.0.2" } }, + "@storybook/addon-storysource": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-4.1.1.tgz", + "integrity": "sha512-pSBOsjT+MLUmMrgaZc477TAamH9F5NHUifSbhEtaioeu4BmsKx4N3nKEshpkpOzmpRMP7WTHEb5MMqIuU+d+zA==", + "dev": true, + "requires": { + "@storybook/addons": "4.1.1", + "@storybook/components": "4.1.1", + "core-js": "^2.5.7", + "estraverse": "^4.2.0", + "loader-utils": "^1.1.0", + "prettier": "^1.14.3", + "prop-types": "^15.6.2", + "react-syntax-highlighter": "^10.0.0", + "regenerator-runtime": "^0.12.1" + }, + "dependencies": { + "@storybook/addons": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-4.1.1.tgz", + "integrity": "sha512-Q6d754uRHBEf2aUCyAgIfL4JF0RZ6Yf/FcZYXKG1MsKVLonbRVSGjsm+R4wsndjvnZF3Ts37WhpZ/1fGP78Zzg==", + "dev": true, + "requires": { + "@storybook/channels": "4.1.1", + "@storybook/components": "4.1.1", + "global": "^4.3.2", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channels": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-4.1.1.tgz", + "integrity": "sha512-ILOi+y9wtqOP7cYcVNBCx8vYTXsObz6O9jFKxQKL55lbnlUqyRVTEf4qlA1ilkZqPBM7PwtZs+zX31hgJfWYog==", + "dev": true + }, + "@storybook/components": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-4.1.1.tgz", + "integrity": "sha512-dJE1vKg8NOiWt/FpQ60ym7xn+WcVkoiUeXG8vXPFxOqcI00yZizHtwJexWT6ltX8u7i2ODF6IU9dyUI3L2nOyQ==", + "dev": true, + "requires": { + "@emotion/core": "^0.13.1", + "@emotion/provider": "^0.11.2", + "@emotion/styled": "^0.10.6", + "global": "^4.3.2", + "lodash": "^4.17.11", + "prop-types": "^15.6.2", + "react-inspector": "^2.3.0", + "react-split-pane": "^0.1.84", + "react-textarea-autosize": "^7.0.4", + "render-fragment": "^0.1.1" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", + "dev": true + } + } + }, "@storybook/addon-viewport": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-4.1.0.tgz", @@ -1819,12 +1863,6 @@ "@types/react": "*" } }, - "@types/storybook__addon-a11y": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@types/storybook__addon-a11y/-/storybook__addon-a11y-3.3.1.tgz", - "integrity": "sha512-pmRviAq4uXuE9wIGuiG7fHsS82KN+CVHG670SsSwefc2Sbvi3G3rNov+KRd0/A2ppAgO40SRiecZ6UK3kgrhsA==", - "dev": true - }, "@types/storybook__addon-actions": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/@types/storybook__addon-actions/-/storybook__addon-actions-3.4.1.tgz", @@ -2621,12 +2659,6 @@ "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", "dev": true }, - "axe-core": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.1.2.tgz", - "integrity": "sha512-e1WVs0SQu3tM29J9a/mISGvlo2kdCStE+yffIAJF6eb42FS+eUFEVz9j4rgDeV2TAfPJmuOZdRetWYycIbK7Vg==", - "dev": true - }, "babel-code-frame": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", @@ -4201,6 +4233,24 @@ "supports-color": "^5.3.0" } }, + "character-entities": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.2.tgz", + "integrity": "sha512-sMoHX6/nBiy3KKfC78dnEalnpn0Az0oSNvqUWYTtYrhRI5iUIYsROU48G+E+kMFQzqXaJ8kHJZ85n7y6/PHgwQ==", + "dev": true + }, + "character-entities-legacy": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.2.tgz", + "integrity": "sha512-9NB2VbXtXYWdXzqrvAHykE/f0QJxzaKIpZ5QzNZrrgQ7Iyxr2vnfS8fCBNVW9nUEZE0lo57nxKRqnzY/dKrwlA==", + "dev": true + }, + "character-reference-invalid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.2.tgz", + "integrity": "sha512-7I/xceXfKyUJmSAn/jw8ve/9DyOP7XxufNYLI9Px7CmsKgEUaZLUTax6nZxGQtaoiZCjpu6cHPj20xC/vqRReQ==", + "dev": true + }, "chardet": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", @@ -4457,6 +4507,18 @@ "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, + "clipboard": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", + "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", + "dev": true, + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "cliui": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", @@ -5410,6 +5472,13 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "dev": true, + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -6367,6 +6436,15 @@ "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", "dev": true }, + "fault": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.2.tgz", + "integrity": "sha512-o2eo/X2syzzERAtN5LcGbiVQ0WwZSlN3qLtadwAz3X8Bu+XWD16dja/KMsjZLiQr+BLGPDnHGkc4yUJf1Xpkpw==", + "dev": true, + "requires": { + "format": "^0.2.2" + } + }, "faye-websocket": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz", @@ -6604,6 +6682,12 @@ "mime-types": "^2.1.12" } }, + "format": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", + "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=", + "dev": true + }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -7475,6 +7559,16 @@ "minimatch": "~3.0.2" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "dev": true, + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "got": { "version": "8.3.2", "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz", @@ -7704,6 +7798,12 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "highlight.js": { + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", + "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=", + "dev": true + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -8242,6 +8342,22 @@ } } }, + "is-alphabetical": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.2.tgz", + "integrity": "sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg==", + "dev": true + }, + "is-alphanumerical": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.2.tgz", + "integrity": "sha512-pyfU/0kHdISIgslFfZN9nfY1Gk3MquQgUm1mJTjdkEPpkAKNWuBTSqFwewOpR7N351VkErCiyV71zX7mlQQqsg==", + "dev": true, + "requires": { + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0" + } + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -8319,6 +8435,12 @@ "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=", "dev": true }, + "is-decimal": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.2.tgz", + "integrity": "sha512-TRzl7mOCchnhchN+f3ICUCzYvL9ul7R+TYOsZ8xia++knyZAJfv/uA1FvQXsAnYIl1T3B2X5E/J7Wb1QXiIBXg==", + "dev": true + }, "is-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", @@ -8410,6 +8532,12 @@ "is-extglob": "^2.1.1" } }, + "is-hexadecimal": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz", + "integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==", + "dev": true + }, "is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -10234,6 +10362,16 @@ "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", "dev": true }, + "lowlight": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz", + "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==", + "dev": true, + "requires": { + "fault": "^1.0.2", + "highlight.js": "~9.12.0" + } + }, "lru-cache": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", @@ -11495,6 +11633,20 @@ "mocha": "^5.2.0" } }, + "parse-entities": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.0.tgz", + "integrity": "sha512-XXtDdOPLSB0sHecbEapQi6/58U/ODj/KWfIXmmMCJF/eRn8laX6LZbOyioMoETOOJoWRW8/qTSl5VQkUIfKM5g==", + "dev": true, + "requires": { + "character-entities": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "character-reference-invalid": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-hexadecimal": "^1.0.0" + } + }, "parse-glob": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz", @@ -11961,6 +12113,12 @@ "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=", "dev": true }, + "prettier": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.15.3.tgz", + "integrity": "sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg==", + "dev": true + }, "pretty-error": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz", @@ -11995,6 +12153,15 @@ "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, + "prismjs": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz", + "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==", + "dev": true, + "requires": { + "clipboard": "^2.0.0" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -12638,6 +12805,19 @@ "prop-types": "^15.5.4" } }, + "react-syntax-highlighter": { + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-10.1.2.tgz", + "integrity": "sha512-p/xy9rb13Cr+SaErdOvJWTYH8moDrlszv4LPDd314pk5PmT6OTWQYFy66tBZFWhM2xk6bh4BttTU9SYje5c75g==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "highlight.js": "~9.12.0", + "lowlight": "~1.9.1", + "prismjs": "^1.8.4", + "refractor": "^2.4.1" + } + }, "react-test-renderer": { "version": "16.6.3", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.6.3.tgz", @@ -12850,6 +13030,17 @@ "symbol-observable": "^1.2.0" } }, + "refractor": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.6.2.tgz", + "integrity": "sha512-AMNEGkhaXfhoa0/0mW0bHdfizDJnuHDK29/D5oQaKICf6DALQ+kDEHW/36oDHCdfva4XrZ+cdMhRvPsTI4OIjA==", + "dev": true, + "requires": { + "hastscript": "^5.0.0", + "parse-entities": "^1.1.2", + "prismjs": "~1.15.0" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -13759,6 +13950,13 @@ } } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "dev": true, + "optional": true + }, "semver": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz", @@ -14878,6 +15076,13 @@ "setimmediate": "^1.0.4" } }, + "tiny-emitter": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", + "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", + "dev": true, + "optional": true + }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", diff --git a/package.json b/package.json index ca018b9c..0a5140f7 100644 --- a/package.json +++ b/package.json @@ -56,11 +56,11 @@ "@fortawesome/free-brands-svg-icons": "^5.6.1", "@fortawesome/free-solid-svg-icons": "^5.6.1", "@fortawesome/react-fontawesome": "^0.1.3", - "@storybook/addon-a11y": "4.1.0", "@storybook/addon-actions": "4.1.0", "@storybook/addon-info": "4.1.0", "@storybook/addon-knobs": "4.1.0", "@storybook/addon-options": "4.1.0", + "@storybook/addon-storysource": "^4.1.1", "@storybook/addon-viewport": "4.1.0", "@storybook/react": "^4.1.0", "@storybook/storybook-deployer": "^2.8.1", @@ -72,7 +72,6 @@ "@types/react": "^16.7.14", "@types/react-dom": "^16.0.11", "@types/react-test-renderer": "^16.0.3", - "@types/storybook__addon-a11y": "^3.3.1", "@types/storybook__addon-actions": "^3.4.1", "@types/storybook__addon-info": "^3.4.2", "@types/storybook__addon-knobs": "^3.4.1", diff --git a/src/base/generic.tsx b/src/base/generic.tsx index 080ea05e..e1345bef 100644 --- a/src/base/generic.tsx +++ b/src/base/generic.tsx @@ -5,7 +5,10 @@ import { ModifierProps, transformModifiers } from "@/modifiers"; export type GenericProps = ModifierProps; -export const Generic = forwardRefAs((props, ref) => { - const { as, ...rest } = transformModifiers(props); - return React.createElement(as!, { ref, ...rest }); -}, { as: "div" }); +export const Generic = forwardRefAs( + (props, ref) => { + const { as, ...rest } = transformModifiers(props); + return React.createElement(as!, { ref, ...rest }); + }, + { as: "div" }, +); diff --git a/stories/storybook__addon-viewport.d.ts b/stories/storybook__addon-viewport.d.ts new file mode 100644 index 00000000..4c5e19a0 --- /dev/null +++ b/stories/storybook__addon-viewport.d.ts @@ -0,0 +1 @@ +declare module "@storybook/addon-viewport";