Add support for JSX copy paste in Storybook (#14591)
* add support for JSX and HTML copy paste * remove html addon, refactor dropdown story * undo html addon settings
This commit is contained in:
Suzanne Aitchison
GitHub
parent
a885483059
commit
3b67810b9d
5 changed files with 105 additions and 39 deletions
|
|
@ -13,6 +13,7 @@ module.exports = {
|
|||
'@storybook/addon-links',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-notes/register-panel',
|
||||
'storybook-addon-jsx',
|
||||
'@whitespace/storybook-addon-html',
|
||||
{
|
||||
name: '@storybook/addon-storysource',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { h } from 'preact';
|
||||
import { addDecorator, addParameters } from '@storybook/preact';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
import { jsxDecorator } from 'storybook-addon-jsx';
|
||||
|
||||
import '../../assets/stylesheets/minimal.scss';
|
||||
import '../../assets/stylesheets/views.scss';
|
||||
|
|
@ -66,6 +67,7 @@ const themeSwitcherDecorator = (storyFn) => {
|
|||
);
|
||||
};
|
||||
|
||||
addDecorator(jsxDecorator);
|
||||
addDecorator(themeSwitcherDecorator);
|
||||
addDecorator((Story) => <Story />);
|
||||
|
||||
|
|
@ -103,6 +105,13 @@ export const parameters = {
|
|||
],
|
||||
},
|
||||
},
|
||||
jsx: {
|
||||
filterProps: (val) => val !== undefined,
|
||||
functionValue: (fn) => {
|
||||
fn.toString = () => '() => {}';
|
||||
return fn;
|
||||
},
|
||||
},
|
||||
html: {
|
||||
root: '#story-content',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,45 +10,29 @@ export default {
|
|||
parameters: { notes },
|
||||
};
|
||||
|
||||
const DropdownWithActivator = ({ additionalDropdownClasses }) => {
|
||||
return (
|
||||
<div className="dropdown-trigger-container">
|
||||
<button
|
||||
id="storybook-dropdown-trigger"
|
||||
className="crayons-btn dropdown-trigger"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
Click to trigger dropdown
|
||||
</button>
|
||||
<Dropdown
|
||||
triggerButtonId="storybook-dropdown-trigger"
|
||||
dropdownContentId="storybook-dropdown"
|
||||
className={additionalDropdownClasses}
|
||||
>
|
||||
<p>
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet,
|
||||
consectetur adipisicing elit.
|
||||
</p>
|
||||
<a href="/">Sequi ea voluptates</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = () => (
|
||||
<DropdownWithActivator
|
||||
additionalDropdownClasses={text('className', 'mb-2')}
|
||||
/>
|
||||
<div className="dropdown-trigger-container">
|
||||
<button
|
||||
id="storybook-dropdown-trigger"
|
||||
className="crayons-btn dropdown-trigger"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
Click to trigger dropdown
|
||||
</button>
|
||||
<Dropdown
|
||||
triggerButtonId="storybook-dropdown-trigger"
|
||||
dropdownContentId="storybook-dropdown"
|
||||
className={text('className', 'mb-2')}
|
||||
>
|
||||
<p>
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet,
|
||||
consectetur adipisicing elit.
|
||||
</p>
|
||||
<a href="/">Sequi ea voluptates</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
|
||||
Default.story = {
|
||||
name: 'default',
|
||||
};
|
||||
|
||||
export const AdditonalCssClasses = () => (
|
||||
<DropdownWithActivator additionalDropdownClasses={text('className', 'p-6')} />
|
||||
);
|
||||
|
||||
AdditonalCssClasses.story = {
|
||||
name: 'additional CSS classes',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -125,6 +125,7 @@
|
|||
"prettier": "^2.3.2",
|
||||
"sass": "1.38.0",
|
||||
"sass-loader": "^10.1.1",
|
||||
"storybook-addon-jsx": "^7.3.13",
|
||||
"style-loader": "^2.0.0",
|
||||
"svgo": "2.4.0",
|
||||
"webpack-bundle-analyzer": "^4.4.2",
|
||||
|
|
|
|||
77
yarn.lock
77
yarn.lock
|
|
@ -5357,7 +5357,7 @@ comma-separated-tokens@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
|
||||
integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
|
||||
|
||||
commander@^2.20.0:
|
||||
commander@^2.19.0, commander@^2.20.0:
|
||||
version "2.20.3"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
||||
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
|
||||
|
|
@ -5448,6 +5448,14 @@ concat-stream@^1.5.0:
|
|||
readable-stream "^2.2.2"
|
||||
typedarray "^0.0.6"
|
||||
|
||||
config-chain@^1.1.12:
|
||||
version "1.1.13"
|
||||
resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
|
||||
integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
|
||||
dependencies:
|
||||
ini "^1.3.4"
|
||||
proto-list "~1.2.1"
|
||||
|
||||
connect-history-api-fallback@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
|
||||
|
|
@ -5514,7 +5522,7 @@ copy-descriptor@^0.1.0:
|
|||
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
|
||||
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
|
||||
|
||||
copy-to-clipboard@^3.3.1:
|
||||
copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.3.1:
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
|
||||
integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
|
||||
|
|
@ -6510,6 +6518,16 @@ ecc-jsbn@~0.1.1:
|
|||
jsbn "~0.1.0"
|
||||
safer-buffer "^2.1.0"
|
||||
|
||||
editorconfig@^0.15.3:
|
||||
version "0.15.3"
|
||||
resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
|
||||
integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
|
||||
dependencies:
|
||||
commander "^2.19.0"
|
||||
lru-cache "^4.1.5"
|
||||
semver "^5.6.0"
|
||||
sigmund "^1.0.1"
|
||||
|
||||
ee-first@1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
|
||||
|
|
@ -9675,6 +9693,16 @@ jest@26.6.3:
|
|||
import-local "^3.0.2"
|
||||
jest-cli "^26.6.3"
|
||||
|
||||
js-beautify@^1.8.8:
|
||||
version "1.14.0"
|
||||
resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.0.tgz#2ce790c555d53ce1e3d7363227acf5dc69024c2d"
|
||||
integrity sha512-yuck9KirNSCAwyNJbqW+BxJqJ0NLJ4PwBUzQQACl5O3qHMBXVkXb/rD0ilh/Lat/tn88zSZ+CAHOlk0DsY7GuQ==
|
||||
dependencies:
|
||||
config-chain "^1.1.12"
|
||||
editorconfig "^0.15.3"
|
||||
glob "^7.1.3"
|
||||
nopt "^5.0.0"
|
||||
|
||||
js-string-escape@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
|
||||
|
|
@ -10228,6 +10256,14 @@ lowlight@~1.11.0:
|
|||
fault "^1.0.2"
|
||||
highlight.js "~9.13.0"
|
||||
|
||||
lru-cache@^4.1.5:
|
||||
version "4.1.5"
|
||||
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
|
||||
integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
|
||||
dependencies:
|
||||
pseudomap "^1.0.2"
|
||||
yallist "^2.1.2"
|
||||
|
||||
lru-cache@^5.1.1:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
|
||||
|
|
@ -12814,6 +12850,11 @@ property-information@^5.0.0, property-information@^5.3.0:
|
|||
dependencies:
|
||||
xtend "^4.0.0"
|
||||
|
||||
proto-list@~1.2.1:
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
|
||||
integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
|
||||
|
||||
proxy-addr@~2.0.5:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
|
||||
|
|
@ -12827,6 +12868,11 @@ prr@~1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
|
||||
integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
|
||||
|
||||
pseudomap@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
|
||||
integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
|
||||
|
||||
psl@^1.1.28, psl@^1.1.33:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
|
||||
|
|
@ -13067,7 +13113,7 @@ react-draggable@^4.4.3:
|
|||
classnames "^2.2.5"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react-element-to-jsx-string@^14.3.2:
|
||||
react-element-to-jsx-string@^14.3.1, react-element-to-jsx-string@^14.3.2:
|
||||
version "14.3.2"
|
||||
resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.2.tgz#c0000ed54d1f8b4371731b669613f2d4e0f63d5c"
|
||||
integrity sha512-WZbvG72cjLXAxV7VOuSzuHEaI3RHj10DZu8EcKQpkKcAj7+qAkG5XUeSdX5FXrA0vPrlx0QsnAzZEBJwzV0e+w==
|
||||
|
|
@ -14130,6 +14176,11 @@ side-channel@^1.0.4:
|
|||
get-intrinsic "^1.0.2"
|
||||
object-inspect "^1.9.0"
|
||||
|
||||
sigmund@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
|
||||
integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
|
||||
|
||||
signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
|
||||
|
|
@ -14471,6 +14522,21 @@ store2@^2.12.0, store2@^2.7.1:
|
|||
resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
|
||||
integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
|
||||
|
||||
storybook-addon-jsx@^7.3.13:
|
||||
version "7.3.13"
|
||||
resolved "https://registry.yarnpkg.com/storybook-addon-jsx/-/storybook-addon-jsx-7.3.13.tgz#401c729bb4f49473ad648629acf47fdfdbb398af"
|
||||
integrity sha512-u37d/p3+p5ARPzQZPOC5mlpNS4r06H0F/wlvTov+EuVI5r0eoXTyXxUeb/dATGPww3tUraHaITR0r8eOO+JHbw==
|
||||
dependencies:
|
||||
copy-to-clipboard "^3.0.8"
|
||||
js-beautify "^1.8.8"
|
||||
react-element-to-jsx-string "^14.3.1"
|
||||
storybook-pretty-props "^1.0.3"
|
||||
|
||||
storybook-pretty-props@^1.0.3:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/storybook-pretty-props/-/storybook-pretty-props-1.2.1.tgz#04c6e7c80efc0190a5dd94dceaf50579c159e182"
|
||||
integrity sha512-3dUtu0UbBA6idA3Qo0i+CYGGz8GiqlXzhgCJdT065jnuJ3y9intKxZpv05ZbnQXCPnsPVSDos+hgOZ444hf6xA==
|
||||
|
||||
stream-browserify@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
|
||||
|
|
@ -16108,6 +16174,11 @@ y18n@^5.0.5:
|
|||
resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
|
||||
integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
|
||||
|
||||
yallist@^2.1.2:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
|
||||
integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
|
||||
|
||||
yallist@^3.0.2:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue