From 2a2ecb319ef40ca4988a0923b6cd22b2d60bf645 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 18 Nov 2022 17:23:54 +0900 Subject: [PATCH] Storybook: Add link to component folder on GitHub, retire Storysource (#45727) * Storybook: Add source link button * Remove storysource addon * Update docs * Add link to relevant plugin --- package-lock.json | 153 +++++------------- package.json | 2 +- storybook/main.js | 2 +- storybook/preview.js | 1 + storybook/stories/docs/inline-icon.js | 14 ++ storybook/stories/docs/introduction.story.mdx | 20 +-- storybook/stories/playground/index.js | 3 + storybook/webpack.config.js | 9 ++ storybook/webpack/source-link-loader.js | 67 ++++++++ 9 files changed, 146 insertions(+), 125 deletions(-) create mode 100644 storybook/stories/docs/inline-icon.js create mode 100644 storybook/webpack/source-link-loader.js diff --git a/package-lock.json b/package-lock.json index 9f0f34dd3c5bf..adb96b28da921 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9831,87 +9831,6 @@ } } }, - "@storybook/addon-storysource": { - "version": "6.5.7", - "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-6.5.7.tgz", - "integrity": "sha512-4cquq0Oqf9skPdIYkVtO5lAPS7+83TyY4vT52HQ5LSpSekZELQkRxN793jNMQdu2IGQ/l9WqvyzFGaN62bRg7Q==", - "dev": true, - "requires": { - "@storybook/addons": "6.5.7", - "@storybook/api": "6.5.7", - "@storybook/client-logger": "6.5.7", - "@storybook/components": "6.5.7", - "@storybook/router": "6.5.7", - "@storybook/source-loader": "6.5.7", - "@storybook/theming": "6.5.7", - "core-js": "^3.8.2", - "estraverse": "^5.2.0", - "loader-utils": "^2.0.0", - "prop-types": "^15.7.2", - "react-syntax-highlighter": "^15.4.5", - "regenerator-runtime": "^0.13.7" - }, - "dependencies": { - "estraverse": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", - "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", - "dev": true - }, - "parse-entities": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", - "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", - "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" - } - }, - "prismjs": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", - "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==", - "dev": true - }, - "react-syntax-highlighter": { - "version": "15.5.0", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", - "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==", - "dev": true, - "requires": { - "@babel/runtime": "^7.3.1", - "highlight.js": "^10.4.1", - "lowlight": "^1.17.0", - "prismjs": "^1.27.0", - "refractor": "^3.6.0" - } - }, - "refractor": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz", - "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==", - "dev": true, - "requires": { - "hastscript": "^6.0.0", - "parse-entities": "^2.0.0", - "prismjs": "~1.27.0" - }, - "dependencies": { - "prismjs": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", - "dev": true - } - } - } - } - }, "@storybook/addon-toolbars": { "version": "6.5.7", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.7.tgz", @@ -19608,7 +19527,7 @@ "app-root-dir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz", - "integrity": "sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=", + "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==", "dev": true }, "app-root-path": { @@ -26253,7 +26172,7 @@ "array-find-index": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", - "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=", + "integrity": "sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw==", "dev": true, "optional": true }, @@ -27890,7 +27809,7 @@ "babel-plugin-add-react-displayname": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz", - "integrity": "sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=", + "integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==", "dev": true }, "babel-plugin-apply-mdx-type-prop": { @@ -28313,7 +28232,7 @@ "batch-processor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", - "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=", + "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==", "dev": true }, "bcrypt-pbkdf": { @@ -29276,7 +29195,7 @@ "camelcase-keys": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", - "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", + "integrity": "sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==", "dev": true, "optional": true, "requires": { @@ -29287,7 +29206,7 @@ "camelcase": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", - "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=", + "integrity": "sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw==", "dev": true, "optional": true } @@ -31676,7 +31595,7 @@ "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", - "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=", + "integrity": "sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==", "dev": true, "optional": true, "requires": { @@ -36599,7 +36518,7 @@ "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", - "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", + "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==", "dev": true, "optional": true }, @@ -36830,7 +36749,7 @@ "glob-to-regexp": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz", - "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=", + "integrity": "sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==", "dev": true }, "global": { @@ -37125,7 +37044,7 @@ "has-glob": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz", - "integrity": "sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=", + "integrity": "sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==", "dev": true, "requires": { "is-glob": "^3.0.0" @@ -37134,7 +37053,7 @@ "is-glob": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", + "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==", "dev": true, "requires": { "is-extglob": "^2.1.0" @@ -38999,7 +38918,7 @@ "is-utf8": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", - "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", + "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==", "dev": true, "optional": true }, @@ -39021,7 +38940,7 @@ "is-window": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz", - "integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0=", + "integrity": "sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==", "dev": true }, "is-windows": { @@ -42398,7 +42317,7 @@ "js-string-escape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz", - "integrity": "sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=", + "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==", "dev": true }, "js-tokens": { @@ -43719,7 +43638,7 @@ "load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", - "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", + "integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==", "dev": true, "optional": true, "requires": { @@ -43733,7 +43652,7 @@ "parse-json": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", - "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", + "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==", "dev": true, "optional": true, "requires": { @@ -44041,7 +43960,7 @@ "loud-rejection": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", - "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=", + "integrity": "sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==", "dev": true, "optional": true, "requires": { @@ -44291,7 +44210,7 @@ "map-obj": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", - "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", + "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==", "dev": true, "optional": true }, @@ -47331,7 +47250,7 @@ "num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", - "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==", "dev": true }, "number-is-nan": { @@ -48809,7 +48728,7 @@ "p-defer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", - "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=", + "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==", "dev": true }, "p-event": { @@ -50383,7 +50302,7 @@ "pretty-hrtime": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", - "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", + "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==", "dev": true }, "prismjs": { @@ -52435,7 +52354,7 @@ "redent": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", - "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=", + "integrity": "sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==", "dev": true, "optional": true, "requires": { @@ -52446,7 +52365,7 @@ "indent-string": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", - "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", + "integrity": "sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==", "dev": true, "optional": true, "requires": { @@ -52689,7 +52608,7 @@ "relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", - "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", + "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==", "dev": true }, "remark": { @@ -53227,7 +53146,7 @@ "repeating": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz", - "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=", + "integrity": "sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==", "dev": true, "optional": true, "requires": { @@ -54021,7 +53940,7 @@ "serve-favicon": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz", - "integrity": "sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=", + "integrity": "sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA==", "dev": true, "requires": { "etag": "~1.8.1", @@ -55362,6 +55281,12 @@ "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==", "dev": true }, + "storybook-source-link": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/storybook-source-link/-/storybook-source-link-2.0.3.tgz", + "integrity": "sha512-Vw/ECmTObbcGbS6mX2bolQUF6c/Z4iBtcJBQh6T/3uFDz8pmzGo840hfSJDKXwwatHWDZ1V70jDLCDb4fbXQYg==", + "dev": true + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -56174,7 +56099,7 @@ "strip-bom": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", - "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", + "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==", "dev": true, "optional": true, "requires": { @@ -56195,7 +56120,7 @@ "strip-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz", - "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=", + "integrity": "sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==", "dev": true, "optional": true, "requires": { @@ -57942,7 +57867,7 @@ "trim-newlines": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz", - "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=", + "integrity": "sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==", "dev": true, "optional": true }, @@ -58455,7 +58380,7 @@ "untildify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz", - "integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=", + "integrity": "sha512-sJjbDp2GodvkB0FZZcn7k6afVisqX5BZD7Yq3xp4nN2O15BBK0cLm3Vwn2vQaF7UDS0UUsrQMkkplmDI5fskig==", "dev": true, "optional": true, "requires": { @@ -58731,7 +58656,7 @@ "utila": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz", - "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=", + "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==", "dev": true }, "utility-types": { @@ -58752,7 +58677,7 @@ "uuid-browser": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/uuid-browser/-/uuid-browser-3.1.0.tgz", - "integrity": "sha1-DwWkCu90+eWVHiDvv0SxGHHlZBA=", + "integrity": "sha512-dsNgbLaTrd6l3MMxTtouOCFw4CBFc/3a+GgYA2YyrJvyQ1u6q4pcu3ktLoUZ/VN/Aw9WsauazbgsgdfVWgAKQg==", "dev": true }, "v8-compile-cache": { @@ -60615,7 +60540,7 @@ "x-default-browser": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/x-default-browser/-/x-default-browser-0.4.0.tgz", - "integrity": "sha1-cM8NqF2nwKtcsPFaiX8jIqa91IE=", + "integrity": "sha512-7LKo7RtWfoFN/rHx1UELv/2zHGMx8MkZKDq1xENmOCTkfIqZJ0zZ26NEJX8czhnPXVcqS0ARjjfJB+eJ0/5Cvw==", "dev": true, "requires": { "default-browser-id": "^1.0.4" diff --git a/package.json b/package.json index 98f8d07607f67..0168806a72ec3 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,6 @@ "@storybook/addon-controls": "6.5.7", "@storybook/addon-docs": "6.5.7", "@storybook/addon-knobs": "6.2.9", - "@storybook/addon-storysource": "6.5.7", "@storybook/addon-toolbars": "6.5.7", "@storybook/addon-viewport": "6.5.7", "@storybook/builder-webpack5": "6.5.7", @@ -234,6 +233,7 @@ "snapshot-diff": "0.8.1", "source-map-loader": "3.0.0", "sprintf-js": "1.1.1", + "storybook-source-link": "2.0.3", "style-loader": "3.2.1", "terser-webpack-plugin": "5.1.4", "typescript": "4.4.2", diff --git a/storybook/main.js b/storybook/main.js index 99c8c2ea84bec..717f42f7fb5e6 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -19,11 +19,11 @@ module.exports = { }, '@storybook/addon-controls', '@storybook/addon-knobs', // Deprecated, new stories should use addon-controls. - '@storybook/addon-storysource', '@storybook/addon-viewport', '@storybook/addon-a11y', '@storybook/addon-toolbars', '@storybook/addon-actions', + 'storybook-source-link', ], features: { babelModeV7: true, diff --git a/storybook/preview.js b/storybook/preview.js index 16e8f71cf5346..c7c2463f797d7 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -107,4 +107,5 @@ export const parameters = { ], }, }, + sourceLinkPrefix: 'https://github.com/WordPress/gutenberg/blob/trunk/', }; diff --git a/storybook/stories/docs/inline-icon.js b/storybook/stories/docs/inline-icon.js new file mode 100644 index 0000000000000..2a1056b0069b7 --- /dev/null +++ b/storybook/stories/docs/inline-icon.js @@ -0,0 +1,14 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; +import { Icons } from '@storybook/components'; + +const StyledIcons = styled( Icons )` + display: inline-block !important; + width: 14px; +`; + +export const InlineIcon = ( props ) => ( + +); diff --git a/storybook/stories/docs/introduction.story.mdx b/storybook/stories/docs/introduction.story.mdx index bdad5c0336ebf..f353cf7c7e0ab 100644 --- a/storybook/stories/docs/introduction.story.mdx +++ b/storybook/stories/docs/introduction.story.mdx @@ -1,4 +1,5 @@ import { Meta } from '@storybook/addon-docs'; +import { InlineIcon } from './inline-icon'; @@ -17,24 +18,25 @@ Import them from the components root directory like in below example: import { Button } from '@wordpress/components'; export default function MyButton() { - return ; + return ; } -```` +``` ## How this site works -The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the Canvas tab. If the component also has controls/arguments, you can modify them on the Controls tab on the lower half of the screen. +The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the **Canvas** tab. If the component also has controls/arguments, you can modify them on the **Controls** tab on the lower half of the screen. To view the documentation for each component use the **Docs** menu item in the top toolbar. +To view the source code for the component and its stories on GitHub, click the View Source Repository button in the top right corner. + To use it in your local development environment run the following command in the top level Gutenberg directory: - ```bash - npm run storybook:dev - ``` +```bash +npm run storybook:dev +``` ## Resources to learn more: -- [Storybook.js.org](https://storybook.js.org/) - Storybook is a frontend workshop for building UI components and pages in isolation. -- [[Package] Components](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Components%22) - Open Issue Gutenberg Repo -- [On the known "loading source..." issue](https://github.com/WordPress/gutenberg/issues/45095) at the 'Story' tab for some components +- [Storybook.js.org](https://storybook.js.org/) - Storybook is a frontend workshop for building UI components and pages in isolation. +- [[Package] Components](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Components%22) - Open Issue Gutenberg Repo diff --git a/storybook/stories/playground/index.js b/storybook/stories/playground/index.js index a13001f96f28b..92ccd78ae58b7 100644 --- a/storybook/stories/playground/index.js +++ b/storybook/stories/playground/index.js @@ -70,6 +70,9 @@ function App() { export default { title: 'Playground/Block Editor', + parameters: { + sourceLink: 'storybook/stories/playground', + }, }; export const _default = () => { diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js index 000c6930574f9..1747cc2f9caa0 100644 --- a/storybook/webpack.config.js +++ b/storybook/webpack.config.js @@ -44,6 +44,15 @@ module.exports = ( { config } ) => { ), enforce: 'post', }, + { + // Adds a `sourceLink` parameter to the story metadata, based on the file path + test: /\/stories\/.+\.(j|t)sx?$/, + loader: path.resolve( + __dirname, + './webpack/source-link-loader.js' + ), + enforce: 'post', + }, { test: /\.scss$/, exclude: /\.lazy\.scss$/, diff --git a/storybook/webpack/source-link-loader.js b/storybook/webpack/source-link-loader.js new file mode 100644 index 0000000000000..d9501aa737dad --- /dev/null +++ b/storybook/webpack/source-link-loader.js @@ -0,0 +1,67 @@ +/** + * External dependencies + */ +const babel = require( '@babel/core' ); +const path = require( 'path' ); + +const REPO_ROOT = path.resolve( __dirname, '../../' ); + +/** + * Adds a `sourceLink` parameter to the story metadata, based on the file path. + * + * @see https://storybook.js.org/addons/storybook-source-link + */ +function addSourceLinkPlugin() { + return { + visitor: { + ExportDefaultDeclaration( visitorPath, state ) { + const componentPath = getComponentPathFromStoryPath( + state.file.opts.filename + ); + const properties = + // When default export is anonymous, the declaration is an object expression + visitorPath.node.declaration.properties ?? + // When default export is named, the declaration is an identifier, usually the previous node + visitorPath.getPrevSibling().node.declarations[ 0 ].init + .properties; + + alterParameters( properties, componentPath ); + }, + }, + }; +} + +function getComponentPathFromStoryPath( storyPath ) { + const componentRoot = path.resolve( storyPath, '../../' ); + return path.relative( REPO_ROOT, componentRoot ); +} + +function alterParameters( properties, componentPath ) { + const sourceLink = babel.types.objectProperty( + babel.types.identifier( 'sourceLink' ), + babel.types.stringLiteral( componentPath ) + ); + + let parameters = properties.find( ( op ) => op.key.name === 'parameters' ); + + if ( ! parameters ) { + parameters = babel.types.objectProperty( + babel.types.identifier( 'parameters' ) + ); + properties.push( parameters ); + } + + parameters.value.properties = [ + sourceLink, + ...parameters.value.properties, + ]; +} + +module.exports = function ( source, { sources } ) { + const output = babel.transform( source, { + plugins: [ addSourceLinkPlugin ], + filename: sources[ 0 ], + sourceType: 'module', + } ); + return output.code; +};