spawntree
/
ihk24
4
0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 Комити
6 Гране
88 MiB
 
 
 
 
Дрво: fcf8608d39
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from 'fcf8608d39'
${ noResults }
ihk24/gfi-ihk-2024/storybook-static/iframe.html

719 lines
19 KiB
Датотека Blame Историја 

  1. <!doctype html>

  2. <!--suppress HtmlUnknownTarget -->

  3. <html lang="en">

  4.   <head><script type="module" src="./vite-inject-mocker-entry.js"></script>

  5.     <meta charset="utf-8" />

  6.     <title>Storybook</title>

  7.     <meta name="viewport" content="width=device-width, initial-scale=1" />

  8. 

  9.     <style>

  10.       @font-face {

  11.         font-family: 'Nunito Sans';

  12.         font-style: normal;

  13.         font-weight: 400;

  14.         font-display: swap;

  15.         src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');

  16.       }

  17. 

  18.       @font-face {

  19.         font-family: 'Nunito Sans';

  20.         font-style: italic;

  21.         font-weight: 400;

  22.         font-display: swap;

  23.         src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');

  24.       }

  25. 

  26.       @font-face {

  27.         font-family: 'Nunito Sans';

  28.         font-style: normal;

  29.         font-weight: 700;

  30.         font-display: swap;

  31.         src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');

  32.       }

  33. 

  34.       @font-face {

  35.         font-family: 'Nunito Sans';

  36.         font-style: italic;

  37.         font-weight: 700;

  38.         font-display: swap;

  39.         src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');

  40.       }

  41.     </style>

  42. 

  43.     <script>

  44.       window.CONFIG_TYPE = 'PRODUCTION';

  45.       window.LOGLEVEL = 'info';

  46.       window.FRAMEWORK_OPTIONS = {};

  47.       window.CHANNEL_OPTIONS = {};

  48.       window.FEATURES = {"actions":true,"argTypeTargetsV7":true,"backgrounds":true,"changeDetection":true,"componentsManifest":false,"controls":true,"disallowImplicitActionsInRenderV8":true,"highlight":true,"interactions":true,"legacyDecoratorFileOrder":false,"measure":true,"outline":true,"sidebarOnboardingChecklist":true,"viewport":true};

  49.       window.STORIES = [{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];

  50.       window.DOCS_OPTIONS = {"defaultName":"Docs"};

  51.       window.TAGS_OPTIONS = {};

  52. 

  53.       

  54. 

  55.       // We do this so that "module && module.hot" etc. in Storybook source code

  56.       // doesn't fail (it will simply be disabled)

  57.       window.module = undefined;

  58.       window.global = window;

  59.     </script>

  60.     <base target="_parent" />

  61. 

  62. <style>

  63.   /* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */

  64.   .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {

  65.     display: none;

  66.   }

  67. 

  68.   .sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {

  69.     display: none;

  70.   }

  71. 

  72.   /* Hide our own blocks when we aren't supposed to be showing them */

  73.   :not(.sb-show-preparing-story) > .sb-preparing-story,

  74.   :not(.sb-show-preparing-docs) > .sb-preparing-docs,

  75.   :not(.sb-show-nopreview) > .sb-nopreview,

  76.   :not(.sb-show-errordisplay) > .sb-errordisplay {

  77.     display: none;

  78.   }

  79. 

  80.   .sb-show-main.sb-main-centered {

  81.     margin: 0;

  82.     display: flex;

  83.     align-items: center;

  84.     min-height: 100vh;

  85.   }

  86. 

  87.   .sb-show-main.sb-main-centered #storybook-root {

  88.     box-sizing: border-box;

  89.     margin: auto;

  90.     padding: 1rem;

  91.     max-height: 100%;

  92.     /* Hack for centering correctly in IE11 */

  93.   }

  94. 

  95.   /* Vertical centering fix for IE11 */

  96.   @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  97.     .sb-show-main.sb-main-centered:after {

  98.       content: '';

  99.       min-height: inherit;

  100.       font-size: 0;

  101.     }

  102.   }

  103. 

  104.   .sb-show-main.sb-main-fullscreen {

  105.     margin: 0;

  106.     padding: 0;

  107.     display: block;

  108.   }

  109. 

  110.   .sb-show-main.sb-main-padded {

  111.     margin: 0;

  112.     padding: 1rem;

  113.     display: block;

  114.     box-sizing: border-box;

  115.   }

  116. 

  117.   .sb-wrapper {

  118.     position: fixed;

  119.     top: 0;

  120.     bottom: 0;

  121.     left: 0;

  122.     right: 0;

  123.     box-sizing: border-box;

  124. 

  125.     padding: 40px;

  126.     font-family:

  127.       'Nunito Sans',

  128.       -apple-system,

  129.       '.SFNSText-Regular',

  130.       'San Francisco',

  131.       BlinkMacSystemFont,

  132.       'Segoe UI',

  133.       'Helvetica Neue',

  134.       Helvetica,

  135.       Arial,

  136.       sans-serif;

  137.     -webkit-font-smoothing: antialiased;

  138.     overflow: auto;

  139.   }

  140. 

  141.   @media (max-width: 700px) {

  142.     .sb-wrapper {

  143.       padding: 20px;

  144.     }

  145.   }

  146. 

  147.   @media (max-width: 500px) {

  148.     .sb-wrapper {

  149.       padding: 10px;

  150.     }

  151.   }

  152. 

  153.   .sb-heading {

  154.     font-size: 14px;

  155.     font-weight: 600;

  156.     letter-spacing: 0.2px;

  157.     margin: 10px 0;

  158.     padding-right: 25px;

  159.   }

  160. 

  161.   .sb-nopreview {

  162.     display: flex;

  163.     align-content: center;

  164.     justify-content: center;

  165.     box-sizing: border-box;

  166.   }

  167. 

  168.   .sb-nopreview_main {

  169.     margin: auto;

  170.     padding: 30px;

  171.     border-radius: 10px;

  172.     background: rgb(247, 247, 247);

  173.     color: rgb(46, 52, 56);

  174.   }

  175. 

  176.   .sb-nopreview_main * {

  177.     background: rgb(247, 247, 247);

  178.     color: rgb(46, 52, 56);

  179.   }

  180. 

  181.   .sb-nopreview_heading {

  182.     text-align: center;

  183.   }

  184. 

  185.   .sb-errordisplay {

  186.     background: #f6f9fc;

  187.     color: black;

  188.     z-index: 999999;

  189.     width: 100vw;

  190.     min-height: 100vh;

  191.     box-sizing: border-box;

  192.   }

  193. 

  194.   .sb-errordisplay_main {

  195.     margin: auto;

  196.     padding: 24px;

  197.     display: flex;

  198.     box-sizing: border-box;

  199. 

  200.     flex-direction: column;

  201.     min-height: 100%;

  202.     width: 100%;

  203.     border-radius: 6px;

  204.     background: white;

  205.     color: black;

  206.     border: 1px solid #ff0000;

  207.     box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);

  208.     gap: 24px;

  209.   }

  210. 

  211.   .sb-errordisplay_main ol {

  212.     padding-left: 18px;

  213.     margin: 0;

  214.   }

  215. 

  216.   /* Redefine colors to ensure readability regardless of user-provided * selectors. */

  217.   .sb-errordisplay_main * {

  218.     background: white;

  219.     color: black;

  220.   }

  221. 

  222.   /* Exclude error code block from the universal reset to preserve ANSI colors and dark theme */

  223.   .sb-errordisplay_main .sb-errordisplay_code,

  224.   .sb-errordisplay_main .sb-errordisplay_code * {

  225.     background: #242424;

  226.     color: #c6c6c6;

  227.   }

  228. 

  229.   .sb-errordisplay_main h1 {

  230.     font-family: inherit;

  231.     font-size: 22px;

  232.     font-weight: 400;

  233.     line-height: 30px;

  234.     margin: 0;

  235.   }

  236. 

  237.   .sb-errordisplay_main h1::before {

  238.     content: '';

  239.     display: inline-block;

  240.     width: 12px;

  241.     height: 12px;

  242.     background: #ff4400;

  243.     border-radius: 50%;

  244.     margin-right: 8px;

  245.   }

  246. 

  247.   .sb-errordisplay_main p,

  248.   .sb-errordisplay_main ol {

  249.     font-family: inherit;

  250.     font-size: 14px;

  251.     font-weight: 400;

  252.     line-height: 19px;

  253.     margin: 0;

  254.   }

  255. 

  256.   .sb-errordisplay_main li + li {

  257.     margin: 0;

  258.     padding: 0;

  259.     padding-top: 12px;

  260.   }

  261. 

  262.   .sb-errordisplay_main a {

  263.     color: currentColor;

  264.   }

  265. 

  266.   .sb-errordisplay_main .sb-errordisplay_code {

  267.     padding: 10px;

  268.     flex: 1;

  269.     background: #242424;

  270.     color: #c6c6c6;

  271.     box-sizing: border-box;

  272. 

  273.     font-size: 14px;

  274.     font-weight: 400;

  275.     line-height: 19px;

  276.     border-radius: 4px;

  277. 

  278.     font-family:

  279.       'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',

  280.       'Lucida Console', Consolas, Monaco, monospace;

  281.     margin: 0;

  282.     overflow: auto;

  283.   }

  284. 

  285.   .sb-errordisplay_main .sb-errordisplay_code code {

  286.     background-color: inherit;

  287.     color: inherit;

  288.   }

  289. 

  290.   .sb-errordisplay_main .sb-errordisplay_code {

  291.     white-space: pre-wrap;

  292.   }

  293. 

  294.   @-webkit-keyframes sb-rotate360 {

  295.     from {

  296.       transform: rotate(0deg);

  297.     }

  298. 

  299.     to {

  300.       transform: rotate(360deg);

  301.     }

  302.   }

  303. 

  304.   @keyframes sb-rotate360 {

  305.     from {

  306.       transform: rotate(0deg);

  307.     }

  308. 

  309.     to {

  310.       transform: rotate(360deg);

  311.     }

  312.   }

  313. 

  314.   @-webkit-keyframes sb-glow {

  315.     0%,

  316.     100% {

  317.       opacity: 1;

  318.     }

  319. 

  320.     50% {

  321.       opacity: 0.4;

  322.     }

  323.   }

  324. 

  325.   @keyframes sb-glow {

  326.     0%,

  327.     100% {

  328.       opacity: 1;

  329.     }

  330. 

  331.     50% {

  332.       opacity: 0.4;

  333.     }

  334.   }

  335. 

  336.   /* We display the preparing loaders *over* the rendering story */

  337.   .sb-preparing-story,

  338.   .sb-preparing-docs {

  339.     background-color: white;

  340.     /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always

  341.     on top, but this isn't possible as it would require making CSS changes that could affect user code */

  342.     z-index: 2147483647;

  343.   }

  344. 

  345.   .sb-loader {

  346.     -webkit-animation: sb-rotate360 0.7s linear infinite;

  347.     animation: sb-rotate360 0.7s linear infinite;

  348.     border-color: rgba(97, 97, 97, 0.29);

  349.     border-radius: 50%;

  350.     border-style: solid;

  351.     border-top-color: #646464;

  352.     border-width: 2px;

  353.     display: inline-block;

  354.     height: 32px;

  355.     left: 50%;

  356.     margin-left: -16px;

  357.     margin-top: -16px;

  358.     mix-blend-mode: difference;

  359.     overflow: hidden;

  360.     position: absolute;

  361.     top: 50%;

  362.     transition: all 200ms ease-out;

  363.     vertical-align: top;

  364.     width: 32px;

  365.     z-index: 4;

  366.   }

  367. 

  368.   .sb-previewBlock {

  369.     background: #fff;

  370.     border: 1px solid rgba(0, 0, 0, 0.1);

  371.     border-radius: 4px;

  372.     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;

  373.     margin: 25px auto 40px;

  374.     max-width: 600px;

  375.   }

  376. 

  377.   .sb-previewBlock_header {

  378.     align-items: center;

  379.     box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;

  380.     display: flex;

  381.     gap: 14px;

  382.     height: 40px;

  383.     padding: 0 12px;

  384.   }

  385. 

  386.   .sb-previewBlock_icon {

  387.     -webkit-animation: sb-glow 1.5s ease-in-out infinite;

  388.     animation: sb-glow 1.5s ease-in-out infinite;

  389.     background: #e6e6e6;

  390.     height: 14px;

  391.     width: 14px;

  392.   }

  393. 

  394.   .sb-previewBlock_icon:last-child {

  395.     margin-left: auto;

  396.   }

  397. 

  398.   .sb-previewBlock_body {

  399.     -webkit-animation: sb-glow 1.5s ease-in-out infinite;

  400.     animation: sb-glow 1.5s ease-in-out infinite;

  401.     height: 182px;

  402.     position: relative;

  403.   }

  404. 

  405.   .sb-argstableBlock {

  406.     border-collapse: collapse;

  407.     border-spacing: 0;

  408.     font-size: 13px;

  409.     line-height: 20px;

  410.     margin: 25px auto 40px;

  411.     max-width: 600px;

  412.     text-align: left;

  413.     width: 100%;

  414.   }

  415. 

  416.   .sb-argstableBlock th:first-of-type,

  417.   .sb-argstableBlock td:first-of-type {

  418.     padding-left: 20px;

  419.   }

  420. 

  421.   .sb-argstableBlock th:nth-of-type(2),

  422.   .sb-argstableBlock td:nth-of-type(2) {

  423.     width: 35%;

  424.   }

  425. 

  426.   .sb-argstableBlock th:nth-of-type(3),

  427.   .sb-argstableBlock td:nth-of-type(3) {

  428.     width: 15%;

  429.   }

  430. 

  431.   .sb-argstableBlock th:last-of-type,

  432.   .sb-argstableBlock td:last-of-type {

  433.     width: 25%;

  434.     padding-right: 20px;

  435.   }

  436. 

  437.   .sb-argstableBlock th span,

  438.   .sb-argstableBlock td span {

  439.     -webkit-animation: sb-glow 1.5s ease-in-out infinite;

  440.     animation: sb-glow 1.5s ease-in-out infinite;

  441.     background-color: rgba(0, 0, 0, 0.1);

  442.     border-radius: 0;

  443.     box-shadow: none;

  444.     color: transparent;

  445.   }

  446. 

  447.   .sb-argstableBlock th {

  448.     padding: 10px 15px;

  449.   }

  450. 

  451.   .sb-argstableBlock-body {

  452.     border-radius: 4px;

  453.     box-shadow:

  454.       rgba(0, 0, 0, 0.1) 0 1px 3px 1px,

  455.       rgba(0, 0, 0, 0.065) 0 0 0 1px;

  456.   }

  457. 

  458.   .sb-argstableBlock-body tr {

  459.     background: transparent;

  460.     overflow: hidden;

  461.   }

  462. 

  463.   .sb-argstableBlock-body tr:not(:first-child) {

  464.     border-top: 1px solid #e6e6e6;

  465.   }

  466. 

  467.   .sb-argstableBlock-body tr:first-child td:first-child {

  468.     border-top-left-radius: 4px;

  469.   }

  470. 

  471.   .sb-argstableBlock-body tr:first-child td:last-child {

  472.     border-top-right-radius: 4px;

  473.   }

  474. 

  475.   .sb-argstableBlock-body tr:last-child td:first-child {

  476.     border-bottom-left-radius: 4px;

  477.   }

  478. 

  479.   .sb-argstableBlock-body tr:last-child td:last-child {

  480.     border-bottom-right-radius: 4px;

  481.   }

  482. 

  483.   .sb-argstableBlock-body td {

  484.     background: #fff;

  485.     padding-bottom: 10px;

  486.     padding-top: 10px;

  487.     vertical-align: top;

  488.   }

  489. 

  490.   .sb-argstableBlock-body td:not(:first-of-type) {

  491.     padding-left: 15px;

  492.     padding-right: 15px;

  493.   }

  494. 

  495.   .sb-argstableBlock-body button {

  496.     -webkit-animation: sb-glow 1.5s ease-in-out infinite;

  497.     animation: sb-glow 1.5s ease-in-out infinite;

  498.     background-color: rgba(0, 0, 0, 0.1);

  499.     border: 0;

  500.     border-radius: 0;

  501.     box-shadow: none;

  502.     color: transparent;

  503.     display: inline;

  504.     font-size: 12px;

  505.     line-height: 1;

  506.     padding: 10px 16px;

  507.   }

  508. 

  509.   .sb-argstableBlock-summary {

  510.     margin-top: 4px;

  511.   }

  512. 

  513.   .sb-argstableBlock-code {

  514.     margin-right: 4px;

  515.     margin-bottom: 4px;

  516.     padding: 2px 5px;

  517.   }

  518. 

  519.   .sb-sr-only,

  520.   .sb-hidden-until-focus:not(:focus) {

  521.     position: absolute;

  522.     width: 1px;

  523.     height: 1px;

  524.     padding: 0px;

  525.     margin: -1px;

  526.     overflow: hidden;

  527.     clip: rect(0, 0, 0, 0);

  528.     border: none;

  529.   }

  530. 

  531.   .sb-hidden-until-focus {

  532.     opacity: 0;

  533.     transition: opacity 150ms ease-out;

  534.   }

  535. 

  536.   .sb-hidden-until-focus:focus {

  537.     opacity: 1;

  538.   }

  539. </style>

  540. 

  541. <script>

  542.   /* globals window */

  543.   try {

  544.     if (window.top !== window) {

  545.       window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;

  546.       window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;

  547.       window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;

  548.     }

  549.   } catch (e) {

  550.     // eslint-disable-next-line no-console

  551.     console.warn('unable to connect to top frame for connecting dev tools');

  552.   }

  553. </script>

  554. <script>

  555.   var ihk = ihk || {};

  556.   ihk.translations = {

  557.     overview: "Übersicht",

  558.     loadMoreImages: "Mehr Bilder laden",

  559.     loadMoreArticles: "Mehr laden",

  560.     ihkFinderYourIhkButton:"ihk.finder.page.yourIhkButton"

  561.   };

  562. </script>

  563.     <script type="module" crossorigin src="./assets/iframe-CLehcUMy.js"></script>

  564.     <link rel="modulepreload" crossorigin href="./assets/preload-helper-C1FmrZbK.js">

  565.     <link rel="stylesheet" crossorigin href="./assets/iframe-DvUCq3K3.css">

  566.   </head>

  567. 

  568.   <body>

  569.     <div class="sb-preparing-story sb-wrapper">

  570.   <div class="sb-loader"></div>

  571. </div>

  572. 

  573. <div class="sb-preparing-docs sb-wrapper">

  574.   <div class="sb-previewBlock">

  575.     <div class="sb-previewBlock_header">

  576.       <div class="sb-previewBlock_icon"></div>

  577.       <div class="sb-previewBlock_icon"></div>

  578.       <div class="sb-previewBlock_icon"></div>

  579.       <div class="sb-previewBlock_icon"></div>

  580.     </div>

  581.     <div class="sb-previewBlock_body">

  582.       <div class="sb-loader"></div>

  583.     </div>

  584.   </div>

  585.   <table aria-hidden="true" class="sb-argstableBlock">

  586.     <thead class="sb-argstableBlock-head">

  587.       <tr>

  588.         <th><span>Name</span></th>

  589.         <th><span>Description</span></th>

  590.         <th><span>Default</span></th>

  591.         <th><span>Control </span></th>

  592.       </tr>

  593.     </thead>

  594.     <tbody class="sb-argstableBlock-body">

  595.       <tr>

  596.         <td><span>propertyName</span><span title="Required">*</span></td>

  597.         <td>

  598.           <div><span>This is a short description</span></div>

  599.           <div class="sb-argstableBlock-summary">

  600.             <div><span class="sb-argstableBlock-code">summary</span></div>

  601.           </div>

  602.         </td>

  603.         <td>

  604.           <div><span class="sb-argstableBlock-code">defaultValue</span></div>

  605.         </td>

  606.         <td><button>Set string</button></td>

  607.       </tr>

  608.       <tr>

  609.         <td><span>propertyName</span><span>*</span></td>

  610.         <td>

  611.           <div><span>This is a short description</span></div>

  612.           <div class="sb-argstableBlock-summary">

  613.             <div><span class="sb-argstableBlock-code">summary</span></div>

  614.           </div>

  615.         </td>

  616.         <td>

  617.           <div><span class="sb-argstableBlock-code">defaultValue</span></div>

  618.         </td>

  619.         <td><button>Set string</button></td>

  620.       </tr>

  621.       <tr>

  622.         <td><span>propertyName</span><span>*</span></td>

  623.         <td>

  624.           <div><span>This is a short description</span></div>

  625.           <div class="sb-argstableBlock-summary">

  626.             <div><span class="sb-argstableBlock-code">summary</span></div>

  627.           </div>

  628.         </td>

  629.         <td>

  630.           <div><span class="sb-argstableBlock-code">defaultValue</span></div>

  631.         </td>

  632.         <td><button>Set string</button></td>

  633.       </tr>

  634.     </tbody>

  635.   </table>

  636. </div>

  637. 

  638. <div class="sb-nopreview sb-wrapper">

  639.   <div class="sb-nopreview_main">

  640.     <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>

  641.     <p>Sorry, but you either have no stories or none are selected somehow.</p>

  642.     <ul>

  643.       <li>Please check the Storybook config.</li>

  644.       <li>Try reloading the page.</li>

  645.     </ul>

  646.     <p>

  647.       If the problem persists, check the browser console, or the terminal you've run Storybook from.

  648.     </p>

  649.   </div>

  650. </div>

  651. 

  652. <div class="sb-errordisplay sb-wrapper">

  653.   <div class="sb-errordisplay_main">

  654.     <h1 id="error-message"></h1>

  655.     <p>

  656.       The component failed to render properly, likely due to a configuration issue in Storybook.

  657.       Here are some common causes and how you can address them:

  658.     </p>

  659.     <ol>

  660.       <li>

  661.         <strong>Missing Context/Providers</strong>: You can use decorators to supply specific

  662.         contexts or providers, which are sometimes necessary for components to render correctly. For

  663.         detailed instructions on using decorators, please visit the

  664.         <a href="https://storybook.js.org/docs/writing-stories/decorators"

  665.           >Decorators documentation</a

  666.         >.

  667.       </li>

  668.       <li>

  669.         <strong>Misconfigured Webpack or Vite</strong>: Verify that Storybook picks up all necessary

  670.         settings for loaders, plugins, and other relevant parameters. You can find step-by-step

  671.         guides for configuring

  672.         <a href="https://storybook.js.org/docs/builders/webpack">Webpack</a> or

  673.         <a href="https://storybook.js.org/docs/builders/vite">Vite</a>

  674.         with Storybook.

  675.       </li>

  676.       <li>

  677.         <strong>Missing Environment Variables</strong>: Your Storybook may require specific

  678.         environment variables to function as intended. You can set up custom environment variables

  679.         as outlined in the

  680.         <a href="https://storybook.js.org/docs/configure/environment-variables"

  681.           >Environment Variables documentation</a

  682.         >.

  683.       </li>

  684.     </ol>

  685.     <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>

  686.   </div>

  687. </div>

  688. 

  689.     <div id="storybook-root"></div>

  690.     <div id="storybook-docs"></div>

  691.     <script>

  692.       function __onViteAppLoadingError(event) {

  693.         const hostname = globalThis.location.hostname;

  694.         if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {

  695.           const message = `Failed to load the Storybook preview file 'vite-app.js':

  696. 

  697.       It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.

  698.       Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal.

  699. 

  700.       See:`;

  701.           const docs = [

  702.             'https://storybook.js.org/docs/api/cli-options#dev',

  703.             'https://storybook.js.org/docs/api/main-config/main-config-vite-final',

  704.             'https://vite.dev/config/server-options.html#server-allowedhosts',

  705.           ];

  706.           console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`);

  707. 

  708.           document.getElementById('storybook-root').innerHTML =

  709.             `<p style="color: red; max-width: 70ch">${message.replaceAll(

  710.               '\n',

  711.               '<br/>'

  712.             )}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}</ul></p>`;

  713.           return;

  714.         }

  715.       }

  716.     </script>

  717.   </body>

  718. </html>