preview.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. import { useMemo, useEffect } from '@storybook/preview-api';
  2. import { global } from '@storybook/global';
  3. import { dedent } from 'ts-dedent';
  4. var clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=input=>{let selector=typeof input=="string"?input:input.join(""),element=global.document.getElementById(selector);element&&element.parentElement&&element.parentElement.removeChild(element);},addOutlineStyles=(selector,css)=>{let existingStyle=global.document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=global.document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,global.document.head.appendChild(style);}};var PARAM_KEY="outline";function outlineCSS(selector){return dedent`
  5. ${selector} body {
  6. outline: 1px solid #2980b9 !important;
  7. }
  8. ${selector} article {
  9. outline: 1px solid #3498db !important;
  10. }
  11. ${selector} nav {
  12. outline: 1px solid #0088c3 !important;
  13. }
  14. ${selector} aside {
  15. outline: 1px solid #33a0ce !important;
  16. }
  17. ${selector} section {
  18. outline: 1px solid #66b8da !important;
  19. }
  20. ${selector} header {
  21. outline: 1px solid #99cfe7 !important;
  22. }
  23. ${selector} footer {
  24. outline: 1px solid #cce7f3 !important;
  25. }
  26. ${selector} h1 {
  27. outline: 1px solid #162544 !important;
  28. }
  29. ${selector} h2 {
  30. outline: 1px solid #314e6e !important;
  31. }
  32. ${selector} h3 {
  33. outline: 1px solid #3e5e85 !important;
  34. }
  35. ${selector} h4 {
  36. outline: 1px solid #449baf !important;
  37. }
  38. ${selector} h5 {
  39. outline: 1px solid #c7d1cb !important;
  40. }
  41. ${selector} h6 {
  42. outline: 1px solid #4371d0 !important;
  43. }
  44. ${selector} main {
  45. outline: 1px solid #2f4f90 !important;
  46. }
  47. ${selector} address {
  48. outline: 1px solid #1a2c51 !important;
  49. }
  50. ${selector} div {
  51. outline: 1px solid #036cdb !important;
  52. }
  53. ${selector} p {
  54. outline: 1px solid #ac050b !important;
  55. }
  56. ${selector} hr {
  57. outline: 1px solid #ff063f !important;
  58. }
  59. ${selector} pre {
  60. outline: 1px solid #850440 !important;
  61. }
  62. ${selector} blockquote {
  63. outline: 1px solid #f1b8e7 !important;
  64. }
  65. ${selector} ol {
  66. outline: 1px solid #ff050c !important;
  67. }
  68. ${selector} ul {
  69. outline: 1px solid #d90416 !important;
  70. }
  71. ${selector} li {
  72. outline: 1px solid #d90416 !important;
  73. }
  74. ${selector} dl {
  75. outline: 1px solid #fd3427 !important;
  76. }
  77. ${selector} dt {
  78. outline: 1px solid #ff0043 !important;
  79. }
  80. ${selector} dd {
  81. outline: 1px solid #e80174 !important;
  82. }
  83. ${selector} figure {
  84. outline: 1px solid #ff00bb !important;
  85. }
  86. ${selector} figcaption {
  87. outline: 1px solid #bf0032 !important;
  88. }
  89. ${selector} table {
  90. outline: 1px solid #00cc99 !important;
  91. }
  92. ${selector} caption {
  93. outline: 1px solid #37ffc4 !important;
  94. }
  95. ${selector} thead {
  96. outline: 1px solid #98daca !important;
  97. }
  98. ${selector} tbody {
  99. outline: 1px solid #64a7a0 !important;
  100. }
  101. ${selector} tfoot {
  102. outline: 1px solid #22746b !important;
  103. }
  104. ${selector} tr {
  105. outline: 1px solid #86c0b2 !important;
  106. }
  107. ${selector} th {
  108. outline: 1px solid #a1e7d6 !important;
  109. }
  110. ${selector} td {
  111. outline: 1px solid #3f5a54 !important;
  112. }
  113. ${selector} col {
  114. outline: 1px solid #6c9a8f !important;
  115. }
  116. ${selector} colgroup {
  117. outline: 1px solid #6c9a9d !important;
  118. }
  119. ${selector} button {
  120. outline: 1px solid #da8301 !important;
  121. }
  122. ${selector} datalist {
  123. outline: 1px solid #c06000 !important;
  124. }
  125. ${selector} fieldset {
  126. outline: 1px solid #d95100 !important;
  127. }
  128. ${selector} form {
  129. outline: 1px solid #d23600 !important;
  130. }
  131. ${selector} input {
  132. outline: 1px solid #fca600 !important;
  133. }
  134. ${selector} keygen {
  135. outline: 1px solid #b31e00 !important;
  136. }
  137. ${selector} label {
  138. outline: 1px solid #ee8900 !important;
  139. }
  140. ${selector} legend {
  141. outline: 1px solid #de6d00 !important;
  142. }
  143. ${selector} meter {
  144. outline: 1px solid #e8630c !important;
  145. }
  146. ${selector} optgroup {
  147. outline: 1px solid #b33600 !important;
  148. }
  149. ${selector} option {
  150. outline: 1px solid #ff8a00 !important;
  151. }
  152. ${selector} output {
  153. outline: 1px solid #ff9619 !important;
  154. }
  155. ${selector} progress {
  156. outline: 1px solid #e57c00 !important;
  157. }
  158. ${selector} select {
  159. outline: 1px solid #e26e0f !important;
  160. }
  161. ${selector} textarea {
  162. outline: 1px solid #cc5400 !important;
  163. }
  164. ${selector} details {
  165. outline: 1px solid #33848f !important;
  166. }
  167. ${selector} summary {
  168. outline: 1px solid #60a1a6 !important;
  169. }
  170. ${selector} command {
  171. outline: 1px solid #438da1 !important;
  172. }
  173. ${selector} menu {
  174. outline: 1px solid #449da6 !important;
  175. }
  176. ${selector} del {
  177. outline: 1px solid #bf0000 !important;
  178. }
  179. ${selector} ins {
  180. outline: 1px solid #400000 !important;
  181. }
  182. ${selector} img {
  183. outline: 1px solid #22746b !important;
  184. }
  185. ${selector} iframe {
  186. outline: 1px solid #64a7a0 !important;
  187. }
  188. ${selector} embed {
  189. outline: 1px solid #98daca !important;
  190. }
  191. ${selector} object {
  192. outline: 1px solid #00cc99 !important;
  193. }
  194. ${selector} param {
  195. outline: 1px solid #37ffc4 !important;
  196. }
  197. ${selector} video {
  198. outline: 1px solid #6ee866 !important;
  199. }
  200. ${selector} audio {
  201. outline: 1px solid #027353 !important;
  202. }
  203. ${selector} source {
  204. outline: 1px solid #012426 !important;
  205. }
  206. ${selector} canvas {
  207. outline: 1px solid #a2f570 !important;
  208. }
  209. ${selector} track {
  210. outline: 1px solid #59a600 !important;
  211. }
  212. ${selector} map {
  213. outline: 1px solid #7be500 !important;
  214. }
  215. ${selector} area {
  216. outline: 1px solid #305900 !important;
  217. }
  218. ${selector} a {
  219. outline: 1px solid #ff62ab !important;
  220. }
  221. ${selector} em {
  222. outline: 1px solid #800b41 !important;
  223. }
  224. ${selector} strong {
  225. outline: 1px solid #ff1583 !important;
  226. }
  227. ${selector} i {
  228. outline: 1px solid #803156 !important;
  229. }
  230. ${selector} b {
  231. outline: 1px solid #cc1169 !important;
  232. }
  233. ${selector} u {
  234. outline: 1px solid #ff0430 !important;
  235. }
  236. ${selector} s {
  237. outline: 1px solid #f805e3 !important;
  238. }
  239. ${selector} small {
  240. outline: 1px solid #d107b2 !important;
  241. }
  242. ${selector} abbr {
  243. outline: 1px solid #4a0263 !important;
  244. }
  245. ${selector} q {
  246. outline: 1px solid #240018 !important;
  247. }
  248. ${selector} cite {
  249. outline: 1px solid #64003c !important;
  250. }
  251. ${selector} dfn {
  252. outline: 1px solid #b4005a !important;
  253. }
  254. ${selector} sub {
  255. outline: 1px solid #dba0c8 !important;
  256. }
  257. ${selector} sup {
  258. outline: 1px solid #cc0256 !important;
  259. }
  260. ${selector} time {
  261. outline: 1px solid #d6606d !important;
  262. }
  263. ${selector} code {
  264. outline: 1px solid #e04251 !important;
  265. }
  266. ${selector} kbd {
  267. outline: 1px solid #5e001f !important;
  268. }
  269. ${selector} samp {
  270. outline: 1px solid #9c0033 !important;
  271. }
  272. ${selector} var {
  273. outline: 1px solid #d90047 !important;
  274. }
  275. ${selector} mark {
  276. outline: 1px solid #ff0053 !important;
  277. }
  278. ${selector} bdi {
  279. outline: 1px solid #bf3668 !important;
  280. }
  281. ${selector} bdo {
  282. outline: 1px solid #6f1400 !important;
  283. }
  284. ${selector} ruby {
  285. outline: 1px solid #ff7b93 !important;
  286. }
  287. ${selector} rt {
  288. outline: 1px solid #ff2f54 !important;
  289. }
  290. ${selector} rp {
  291. outline: 1px solid #803e49 !important;
  292. }
  293. ${selector} span {
  294. outline: 1px solid #cc2643 !important;
  295. }
  296. ${selector} br {
  297. outline: 1px solid #db687d !important;
  298. }
  299. ${selector} wbr {
  300. outline: 1px solid #db175b !important;
  301. }`}var withOutline=(StoryFn,context)=>{let{globals:globals2}=context,isActive=[!0,"true"].includes(globals2[PARAM_KEY]),isInDocs=context.viewMode==="docs",outlineStyles=useMemo(()=>outlineCSS(isInDocs?'[data-story-block="true"]':".sb-show-main"),[context]);return useEffect(()=>{let selectorId=isInDocs?`addon-outline-docs-${context.id}`:"addon-outline";return isActive?addOutlineStyles(selectorId,outlineStyles):clearStyles(selectorId),()=>{clearStyles(selectorId);}},[isActive,outlineStyles,context]),StoryFn()};var decorators=[withOutline],globals={[PARAM_KEY]:!1};
  302. export { decorators, globals };