How to use optionsRoot method in storybook-root
Best JavaScript code snippet using storybook-root
superselect.js
Source:superselect.js 
1/**2 * @class SuperSelect3 * Javascriptove nahrazeni systemoveho selectu pro rozsirene moznosti vkladani elementu do jednotlivuch optionu apod.4 * Ma vsechny vlastnosti jako systemovy select.5 * @author cHLeB@6 * @group jak-widgets7 */8JAK.SuperSelect = JAK.ClassMaker.makeClass({9 NAME : 'JAK.SuperSelect',10 VERSION : '2.1',11 IMPLEMENT : JAK.ISignals12});13/**14 * @param {object} opt konfiguracni objekt15 * @param {HTMLElement} opt.select element selectu ktery se ma nahradit16 * @param {string} opt.name nazev selectu pro odesilani spravneho nazvu promenne do formulare17 * @param {array} opt.data pole objektu optionu. Vklada se pole [ { elm : '', value : ''}, index{int} ]18 * @param {HTMLElement} opt.place element do ktereho se vybuildi select19 * @param {boolean} opt.onlyTextSelected prepinac zobrazovani jen textu ve vybranem selectu20 * @param {string} opt.optionsRootWidth velikost kontejneru optionu21 * @param {bool} opt.dontClose moznost nezavirani rozbalenych optionu pri vyberu optionu22 * @param {bool} opt.noFocusElm moznost nezobrazovani otevirace selectu23 * @param {object} opt.classNames objekt css trid pro jednotlive elementy superSelectu24 **/25JAK.SuperSelect.prototype.$constructor = function(opt){26 this.value = null;27 this.opt = {28 select : null,29 name : null,30 tabindex : null,31 data : [],32 place : null,33 onlyTextSelected : false,34 suggest : false,35 multiple : false,36 dontClose : false,37 noFocusElm : false,38 classNames : {39 select : 'superSelect',40 focus : 'superSelFocus',41 options: 'superSelOptions',42 option : 'superSelOption',43 active : 'optActive'44 }45 }46 for(var p in opt){47 this.opt[p] = opt[p];48 }49 50 /*- promena udalosti pro zavirani selectu pro kliknuti mimo -*/51 this.wc = false;52 /*- je-li otevreny ci zavreny select -*/53 this.optionsOpen = false;54 /*- aktivni option {index} -*/55 this.selectedOption = this.opt.multiple == true ? [] : 0;56 /*- texty v optionech -*/57 this.selectTexts = [];58 /*- dynamicke pole hledaneho textu -*/59 this.searchWords = [];60 /*- pole pro vyhledavani klavesy -*/61 this.sameWordsArray = [];62 /*- hledane slovo -*/63 this.searchWord = '';64 /*- zasobnik eventu vyhledanych optionu -*/65 this.sec = [];66 /*- pocet zmacknuti hledani slova -*/67 this.multiples = [];68 /*- zasobnik eventu pro multiselectem vybrane optiony -*/69 this.multipleEc = [];70 this.countSearching = 0;71 this.ec = [];72 this.ecOpt = [];73 this.dom = {};74 this.dom.place = this.opt.place ? JAK.gel(this.opt.place) : false;75 this.dom.select = this.opt.select ? JAK.gel(this.opt.select) : false;76 this._build();77 this._getContent();78 this._getSameWords();79 this._link();80};81/**82 * Metoda pro naveseni udalosti83 **/84JAK.SuperSelect.prototype._link = function(){85 this.ec.push( JAK.Events.addListener( this.dom.focusElm, 'click', this, '_open' ) );86 this.ec.push( JAK.Events.addListener(this.dom.focusElm, 'keydown', this, '_isThisKeyTab') );87 this.ec.push( JAK.Events.addListener(this.dom.focusElm, 'keyup', this, '_keyAction') );88 this.ec.push( JAK.Events.addListener( window, 'keydown', this, '_keyEsc') );89 if(this.opt.suggest == true){90 this.ec.push( JAK.Events.addListener( this.dom.suggestInput, 'keyup', this, '_suggestAction' ) );91 }92};93/**94 * Pokud je stisknutá klávesa tabulátor, nebudeme cancelovat eventu95 **/96JAK.SuperSelect.prototype._isThisKeyTab = function(e, elm){97 if (e.keyCode != 9){98 JAK.Events.cancelDef(e);99 }100};101/**102 * Metoda pro zachytavani klavesnice pro suggest103 **/104JAK.SuperSelect.prototype._suggestAction = function(e, elm){105 this.searchWord = elm.value;106 /*- posun aktivniho optionu nahoru ze suggestu -*/107 if(e.keyCode == 38){108 if(this.searchWord.length > 0){109 this.selectedSuggestOption = this.selectedSuggestOption == 0 ? 0 : this.selectedSuggestOption-1;110 this._selectSuggestOption();111 }112 } else if(e.keyCode == 40){ /*- posun aktivniho optionu dolu ze suggestu -*/113 if(this.searchWord.length > 0){114 this.selectedSuggestOption = this.selectedSuggestOption == this.dom.searchOptions.length ? this.dom.searchOptions.length : this.selectedSuggestOption+1;115 this._selectSuggestOption();116 }117 } else if(e.keyCode == 13){ /*- enter na aktivnim optionu ze suggestu -*/118 JAK.Events.cancelDef(e);119 this._close();120 } else {121 if(this.searchWord.length == 1){122 var sChar = this.searchWord.toLowerCase();123 var sameLetter = this._isSelectedLetter(sChar, 1);124 if(sameLetter != false){125 this.searchWordsResult = sameLetter;126 this._showSearchResult(sameLetter[0].words);127 } else {128 /*- nic nenalezeno, vycistim suggest a necham schovany vsechny ostatni optiony -*/129 this._clearSearchSuggest();130 this.dom.optionsRoot.style.display = 'none';131 this.dom.optionsRoot.style.visibility = 'hidden';132 }133 } else {134 if(this.searchWord.length < 1){135 this._clearSearchSuggest();136 } else {137 this._searchSameSearchWords();138 }139 }140 }141};142/**143 * Metoda pro specifictejsi hledani skrz suggest144 **/145JAK.SuperSelect.prototype._searchSameSearchWords = function(){146 /*- filtr pole pro vyhledavani -*/147 if(this.searchWordsResult[0]){148 var sw = this.searchWordsResult[0].words.filter(function(element, index, array){149 return element.word.toLowerCase().indexOf(this.searchWord.toLowerCase()) == 0;150 }, this);151 this._showSearchResult(sw);152 }153};154/**155 * Vycisteni suggest hledani156 **/157JAK.SuperSelect.prototype._clearSearchSuggest = function(){158 /*- smazani veskere suggest aktivity -*/159 this._resetSearch();160 this.searchWordsResult = 0;161 this.dom.searchOptions = [];162 if(this.dom.searchOptionsRoot){163 JAK.DOM.clear(this.dom.searchOptionsRoot);164 this.dom.searchOptionsRoot.parentNode.removeChild(this.dom.searchOptionsRoot);165 }166 this.dom.searchOptionsRoot = 0;167 /*- opetovne zobrazeni normalnich optionu -*/168 this.dom.optionsRoot.style.display = 'block';169 this.dom.optionsRoot.style.visibility = 'visible';170};171/**172 * Zobrazovani vysledku suggestu173 **/174JAK.SuperSelect.prototype._showSearchResult = function(words){175 /*- schovani normalnich optionu -*/176 this.dom.optionsRoot.style.display = 'none';177 this.dom.optionsRoot.style.visibility = 'hidden';178 /*- odebrani vseho predchoziho hledani -*/179 this._removeSuggestEvents();180 if(this.dom.searchOptionsRoot){181 JAK.DOM.clear(this.dom.searchOptionsRoot);182 } else {183 this.dom.searchOptionsRoot = JAK.mel('div', { className : this.opt.classNames.options });184 this.dom.root.appendChild(this.dom.searchOptionsRoot);185 }186 this.selectedSuggestOption = 0;187 this.dom.searchOptions = [];188 for(var i=0;i<words.length;i++){189 var option = JAK.mel('div', { className : this.opt.classNames.option }, { cursor : 'pointer' });190 option.innerHTML = words[i].word;191 this.dom.searchOptionsRoot.appendChild(option);192 this.dom.searchOptions.push({ elm : option, index : words[i].index });193 }194 if(words.length > 0 && !this.opt.multiple){ this._selectSuggestOption(); }195 this._addSuggestEvents();196 this._setBoxesTop();197};198JAK.SuperSelect.prototype._selectSuggestOption = function(){199 this.selectOption(this.dom.searchOptions[this.selectedSuggestOption].index);200 for(var i=0;i<this.dom.searchOptions.length;i++){201 if(i == this.selectedSuggestOption){202 this._optionOver(null, this.dom.searchOptions[i].elm);203 } else {204 this._optionOut(null, this.dom.searchOptions[i].elm);205 }206 }207};208JAK.SuperSelect.prototype._removeSuggestEvents = function(){209 if(this.sec.length > 0){210 while(this.sec.length){211 JAK.Events.removeListener(this.sec[this.sec.length-1]);212 this.sec.pop()213 }214 }215};216JAK.SuperSelect.prototype._addSuggestEvents = function(){217 for(var i=0;i<this.dom.searchOptions.length;i++){218 this.sec.push( JAK.Events.addListener(this.dom.searchOptions[i].elm, 'mouseover', this, '_optionOver') );219 this.sec.push( JAK.Events.addListener(this.dom.searchOptions[i].elm, 'mouseout', this, '_optionOut') );220 this.sec.push( JAK.Events.addListener(this.dom.searchOptions[i].elm, 'click', this, '_getSuggestIndex') );221 }222};223JAK.SuperSelect.prototype._getSuggestIndex = function(e, elm){224 JAK.Events.cancelDef(e);225 for(var i=0;i<this.dom.searchOptions.length;i++){226 if(this.dom.searchOptions[i].elm == elm){227 var index = this.opt.multiple == true ? [this.dom.searchOptions[i].index] : this.dom.searchOptions[i].index;228 this.selectOption(index);229 /*- pridani oznacovaci tridy -*/230 JAK.DOM.addClass(elm, 'optActive');231 232 if(this.opt.multiple == false){233 this._close();234 this.dom.focusElm.focus();235 }236 break;237 }238 }239};240/**241 * Metoda vracejici aktualni hodnotu242 **/243JAK.SuperSelect.prototype.getValue = function(){244 return this.value;245};246/**247 * Metoda vracejici hidden input superSelectu248 **/249JAK.SuperSelect.prototype.getInput = function(){250 return this.dom.input;251};252/**253 * Staticka metoda pro nahrazeni vsech select elementu za superSelect254 * @param {HTMLElement} elm element pro omezeni nahrady selectu pro cast dokumentu. Jelize neni uvedem nahradi se vsechny selecty v documentu.255 **/256JAK.SuperSelect.replaceAllSelects = function(elm){257 var sS = [];258 var selects = elm == null ? JAK.DOM.arrayFromCollection(document.body.getElementsByTagName('select')) : JAK.DOM.arrayFromCollection(JAK.gel(elm).getElementsByTagName('select'));259 for(var i=0;i<selects.length;i++){260 if(selects[i].className != 'superSelect'){261 var sc = selects[i].className != '' ? 'superSelect'+'_'+selects[i].className : 'superSelect';262 } else {263 var sc = 'superSelect';264 }265 266 var tabindex = selects[i].hasAttribute('tabindex') ? selects[i].getAttribute('tabindex') : null;267 var multiple = selects[i].multiple ? true : false;268 269 var opt = {270 select : selects[i],271 name : selects[i].name,272 tabindex : tabindex,273 multiple : multiple,274 classNames : {275 select : sc,276 focus : 'superSelFocus',277 options: 'superSelOptions',278 option : 'superSelOption',279 active : 'optActive'280 }281 };282 /*- aby se dalo na replacovane selecty vubec sahat -*/283 sS.push( new JAK.SuperSelect(opt) );284 }285 return sS;286};287/**288 * destructor289 **/290JAK.SuperSelect.prototype.$destructor = function(){291 /*- odveseni kliknuti mimo -*/292 if(this.wc){ JAK.Events.removeListener(this.wc); }293 this.ec.forEach(JAK.Events.removeListener, JAK.Events);294 this.ecOpt.forEach(JAK.Events.removeListener, JAK.Events);295 for(var p in this.dom){296 this.dom[p] = null;297 }298};299/**300 * Metoda ktera vycisti select od vsech optionu301 **/302JAK.SuperSelect.prototype.clear = function(){303 for(var i=0;i<this.dom.options.length;i++){304 this.dom.optionsRoot.removeChild(this.dom.options[i].elm);305 }306 this.ecOpt.forEach(JAK.Events.removeListener, JAK.Events);307 this.ecOpt = [];308 this.dom.options = [];309 /*- vycisteni inputu aby pri zandym optionu nemel zadnou hodnotu -*/310 this.dom.input.value = '';311 this.value = null;312 /*- vymazani zasobniku se slovy -*/313 this.searchWords = [];314 this.sameWordsArray = [];315};316/**317 * addOptions metoda pro hromadne pridavani optionu do selectu318 * @param {array} data pole objektu optionu319 * @param {object} data[0] object elm,value optionu320 * @param {int} data[1] index optionu v selectu321 **/322JAK.SuperSelect.prototype.addOptions = function(data){323 for(var i=0;i<data.length;i++){324 this.addOption(data[i][0], data[i][1]);325 }326};327/**328 * addOption metoda pro pridani optionu do selectu329 * @param {object} optObj elm,value330 * @param {HTMLElement} optObj.elm elementy vlozene do optionu, muze byt i innerHTML331 * @param {string} optObj.value hodnota optionu332 * @param {int} index index pole optionu kam se ma vlozit, pokud zadny neni vlozi se nakonec333 **/334JAK.SuperSelect.prototype.addOption = function(optObj, index){335 var option = JAK.cel('div', this.opt.classNames.option);336 var obj = {};337 if(typeof(optObj.elm) == 'string'){338 option.innerHTML = optObj.elm;339 obj = { elm : option, value : optObj.value, selected : optObj.selected };340 } else if(typeof(optObj.elm) == 'object'){341 option.appendChild(optObj.elm);342 obj = { elm : option, value : optObj.value, selected : optObj.selected };343 }344 345 var index = (typeof(index) != "undefined")?index:-1;// -1 == posledni prvek346 if( index != -1 ){347 this.dom.optionsRoot.insertBefore(obj.elm, this.dom.options[index].elm);348 this.dom.options.splice(index,0, obj);349 if(optObj.selected){ this.notEvent = 1; this.selectOption(index); }350 } else {351 this.dom.optionsRoot.appendChild(obj.elm);352 this.dom.options.push(obj);353 if(optObj.selected && this.dom.input){ this.notEvent = 1; this.selectOption(this.dom.options.length-1); }354 index = this.dom.options.length-1;355 }356 this.ecOpt.push( JAK.Events.addListener( obj.elm, 'mouseover', this, '_optionOver' ) );357 this.ecOpt.push( JAK.Events.addListener( obj.elm, 'mouseout', this, '_optionOut' ) );358 this.ecOpt.push( JAK.Events.addListener( obj.elm, 'click', this, '_getIndex' ) );359 /*- pridani slov do zasobniku -*/360 this._getContentOption(obj, index);361};362/**363 * Metoda pro ziskani text z jednoho, prave pridaneho optionu364 **/365JAK.SuperSelect.prototype._getContentOption = function(option, index){366 this.length = this.dom.options.length;367 var child = option.elm.childNodes;368 var word = null;369 for(var j=0;j<child.length;j++){370 if(child[j].nodeType == 3){371 word = child[j].data;372 this.searchWords.push(child[j].data);373 break;374 } else {375 if(child[j].innerText){376 word = child[j].innerText.trim();377 this.searchWords.push(child[j].innerText.trim());378 } else {379 word = child[j].textContent.trim();380 this.searchWords.push(child[j].textContent.trim());381 }382 }383 }384 this._getSameWordsOption(word, index);385};386/**387 * Metoda pro ziskani stejnych slov pro vyhledavani v selectu pri pridani jednoho optionu388 **/389JAK.SuperSelect.prototype._getSameWordsOption = function(word, index){390 var letter = word.charAt(0).toLowerCase();391 for(var i=0;i<this.sameWordsArray.length;i++){392 if (letter == this.sameWordsArray[i].letter) {393 this.sameWordsArray[i].words.push({ index : index, word : word }); /*- jestli najde, zaradi se, stopne a vrati -*/394 return;395 }396 }397 /*- pridani noveho slova na konec -*/398 this.sameWordsArray.push({ letter : letter, words : [{ index : index, word : word }] });399};400/**401 * _getContent metoda pro ziskani textoveho kontentu vsech optionu pro vyhledavani a umisteni do pole402 **/403JAK.SuperSelect.prototype._getContent = function(){404 /*- HLAVNI promenna poctu optionu v selectu -*/405 this.length = this.dom.options.length;406 407 this.searchWords = [];408 for(var i=0;i<this.dom.options.length;i++){409 var childs = this.dom.options[i].elm.childNodes;410 for(var j=0;j<childs.length;j++){411 if(childs[j].nodeType == 3){412 this.searchWords.push(childs[j].data);413 break;414 } else {415 if(childs[j].innerText){416 this.searchWords.push(childs[j].innerText.trim());417 } else {418 this.searchWords.push(childs[j].textContent.trim());419 }420 }421 }422 }423};424/**425 * metoda, prochazi vsechny slova a tridi je do stejnych zacatecnich pismen426 **/427JAK.SuperSelect.prototype._getSameWords = function(){428 this.sameWordsArray = [];429 var letters = [];430 if(this.searchWords.length > 0){431 /*- vybrani pismen -*/432 for(var i=0;i<this.searchWords.length;i++){433 var letter = this.searchWords[i].charAt(0).toLowerCase();434 var isOn = true;435 for(var j=0;j<letters.length;j++){436 if(letter == letters[j]){437 isOn = 0;438 break;439 } else {440 isOn = 1;441 }442 }443 if(isOn){444 letters.push(letter);445 }446 }447 /*- roztrideni slov -*/448 for(var i=0;i<letters.length;i++){449 sortWords = [];450 for(var j=0;j<this.searchWords.length;j++){451 if(this.searchWords[j].toLowerCase().indexOf(letters[i]) == 0){452 sortWords.push({ index : j, word : this.searchWords[j] });453 }454 }455 var obj = {456 letter : letters[i],457 words : sortWords458 };459 this.sameWordsArray.push(obj);460 }461 }462};463/**464 * Metoda pro vybuildeni selectu465 **/466JAK.SuperSelect.prototype._build = function(){467 this.dom.root = JAK.mel('div', { className : this.opt.classNames.select }); 468 this.dom.focusElm = JAK.mel('a', { href : '#', className : this.opt.classNames.focus, tabIndex: 0 }, { display : 'block' } );469 470 if(this.opt.noFocusElm){471 this.dom.focusElm.style.display = 'none';472 }473 474 /*- pridani tabindexu -*/475 if(this.opt.tabindex){ this.dom.focusElm.tabIndex = this.opt.tabindex; }476 if(this.opt.multiple == true){ JAK.DOM.addClass(this.dom.root, 'multipleSel'); JAK.DOM.addClass(this.dom.focusElm, 'group'); }477 this.dom.focusFillElm = JAK.mel('span', { className : 'superSelFill' });478 this.dom.optionsRoot = JAK.mel('div', { className : this.opt.classNames.options }, { display : 'none', visibility : 'hidden' });479 this.dom.options = [];480 481 this.ec.push( JAK.Events.addListener(this.dom.focusElm, 'blur', this, '_resetSearch') );482 this.dom.focusElm.appendChild(this.dom.focusFillElm);483 this.dom.root.appendChild(this.dom.focusElm);484 this.dom.root.appendChild(this.dom.optionsRoot);485 486 if(this.dom.select){487 var options = this.dom.select.getElementsByTagName('option');488 for(var i=0;i<options.length;i++){489 var option = JAK.mel('div', { className : this.opt.classNames.option }, { cursor : 'pointer' });490 option.innerHTML = options[i].innerHTML;491 if(options[i].className != ''){492 JAK.DOM.addClass(option, options[i].className);493 }494 if(options[i].selected){495 /*- nastaveni aktivni opsny -*/496 if(this.opt.multiple == true){497 this.selectedOption.push(i);498 } else {499 this.selectedOption = i;500 var selectedOpt = options[i];501 }502 JAK.DOM.addClass(option, this.opt.classNames.active);503 }504 this.ecOpt.push( JAK.Events.addListener( option, 'mouseover', this, '_optionOver' ) );505 this.ecOpt.push( JAK.Events.addListener( option, 'mouseout', this, '_optionOut' ) );506 this.ecOpt.push( JAK.Events.addListener( option, 'click', this, '_getIndex' ) );507 var pushOption = { elm : option, value : options[i].value };508 this.dom.options.push(pushOption);509 this.dom.optionsRoot.appendChild(option);510 this.dom.root.appendChild(this.dom.optionsRoot);511 }512 if(this.opt.multiple == false){513 this.dom.focusFillElm.innerHTML = selectedOpt ? selectedOpt.innerHTML : options[0].innerHTML;514 }515 this.dom.select.parentNode.insertBefore(this.dom.root, this.dom.select);516 517 /*- zahozeni stareho selectu a vytvoreni hidden inputu -*/518 this.dom.select.parentNode.removeChild(this.dom.select);519 } else {520 this.addOptions(this.opt.data);521 this._selectSelectedOption();522 this.dom.place.appendChild(this.dom.root);523 }524 this.dom.input = this.opt.multiple ? [] : JAK.mel('input', { type : 'hidden', name : this.opt.name, value : '' });525 if(!this.opt.multiple){526 this.dom.root.appendChild(this.dom.input);527 }528 /*- vytvoreni suggestu -*/529 if(this.opt.suggest == true){530 this._makeSuggest();531 }532 this.selectOption(this.selectedOption);533};534/**535 * build suggestu536 **/537JAK.SuperSelect.prototype._makeSuggest = function(){538 this.dom.suggestBox = JAK.mel('div', { className : 'ssSuggest' }, { display : 'none' });539 this.dom.suggestInput = JAK.mel('input', { name : '', value : '', type : 'text' });540 this.dom.suggestBox.appendChild(this.dom.suggestInput);541 this.dom.root.insertBefore(this.dom.suggestBox, this.dom.optionsRoot);542};543/**544 * Metoda pro nastaveni vybraneho optionu pri vytvareni superselectu a nastavovani jeho dat545 **/546JAK.SuperSelect.prototype._selectSelectedOption = function(){547 for(var i=0;i<this.dom.options.length;i++){548 if(this.dom.options[i].selected == true){549 if(this.opt.multiple == true){550 this.selectedOption.push(i);551 } else {552 this.selectedOption = i;553 }554 }555 }556};557/**558 * Nuluje vsechna predchozi hledani v zasobnicich559 **/560JAK.SuperSelect.prototype._resetSearch = function(e,elm){561 this.searchWord = '';562 this.countSearching = 0;563 this.sameWords = [];564 if(this.resetTimer){ this.resetTimer = false; }565};566/**567 * Nastavuje aktivni option568 **/569JAK.SuperSelect.prototype._setActiveOption = function(){570 /*- odebrat vsem active classu -*/571 if(this.opt.multiple == true){572 for(var i=0;i<this.dom.options.length;i++){573 JAK.DOM.removeClass(this.dom.options[i].elm, 'optActive');574 }575 }576 /*- pridat active classu -*/577 for(var i=0;i<this.dom.options.length;i++){578 if(this.opt.multiple == true){579 for(var j=0;j<this.multiples.length;j++){580 if(i == this.multiples[j].index){581 JAK.DOM.addClass(this.dom.options[i].elm, 'optActive');582 }583 }584 } else {585 if(i == this.selectedOption){586 JAK.DOM.addClass(this.dom.options[i].elm, 'optActive');587 } else {588 JAK.DOM.removeClass(this.dom.options[i].elm, 'optActive');589 }590 }591 }592};593/**594 * Metoda pro vyber optionu a ziskani jeho indexu595 * @param {event} e udalost596 * @param {HTMLElement} elm element na kterej je navesena udalost 597 **/598JAK.SuperSelect.prototype._getIndex = function(e, elm){599 if(!this.opt.dontClose){600 JAK.Events.cancelDef(e);601 for(var i=0;i<this.dom.options.length;i++){602 if(this.dom.options[i].elm == elm){603 if(!this.opt.multiple){604 this.selectOption(i);605 this._close();606 this.dom.focusElm.focus();607 } else {608 this.selectOption([i]);609 }610 break;611 }612 }613 }614};615/**616 * Memtoda pro kliknuti mimo a zavreni rozbaleneho selectu617 * @param {event} e udalost618 * @param {HTMLElement} elm na kterem je udalost navesena619 **/620JAK.SuperSelect.prototype._windowClick = function(e, elm) {621 var cElm = JAK.Events.getTarget(e);622 while (cElm) {623 if (cElm == this.dom.root) {624 return;625 }626 cElm = cElm.parentNode;627 }628 if(this.optionsOpen){629 this._close();630 }631};632/**633 * Obarvuje option pri najeti mysi634 * @param {event} e udalost635 * @param {HTMLElement} elm na kterem je udalost navesena636 **/637JAK.SuperSelect.prototype._optionOver = function(e,elm){638 JAK.DOM.addClass(elm, 'optOver');639};640/**641 * Obarvuje zpet option pri odjeti mysi642 * @param {event} e udalost643 * @param {HTMLElement} elm na kterem je udalost navesena644 **/645JAK.SuperSelect.prototype._optionOut = function(e,elm){646 JAK.DOM.removeClass(elm, 'optOver');647};648/**649 * Metoda pro akci pri najeti mysi na select650 * @param {event} e udalost651 * @param {HTMLElement} elm na kterem je udalost navesena652 **/653JAK.SuperSelect.prototype._hover = function(e,elm){654 return;655};656/**657 * Otevirani selectu + naveseni udalosti na kliknuti mimo select a jeho zavreni658 * @param {event} e udalost659 * @param {HTMLElement} elm na kterem je udalost navesena660 **/661JAK.SuperSelect.prototype._open = function(e,elm){662 JAK.Events.cancelDef(e);663 elm.focus();664 if(this.optionsOpen){665 this._close();666 } else {667 668 this.makeEvent('superSelectOpen', {});669 670 if(this.opt.suggest == true){671 this.dom.suggestBox.style.display = 'block';672 this.dom.suggestInput.focus();673 }674 this._setBoxesTop();675 this.dom.optionsRoot.style.display = 'block';676 this.dom.optionsRoot.style.visibility = 'visible';677 this.optionsOpen = true;678 this._selectScroll();679 680 /*-681 pozicovani optionu682 var boxpos = JAK.DOM.getBoxPosition(this.dom.optionsRoot, elm);683 var shift = JAK.DOM.shiftBox(this.dom.optionsRoot);684 var optionsPos = boxpos.left+shift[0];685 686 this.dom.optionsRoot.style.left = optionsPos+'px';-*/687 }688 var event = this.opt.noFocusElm ? 'mousedown' : 'click';689 if(!this.wc){ this.wc = JAK.Events.addListener(document, event, this, '_windowClick'); }690};691JAK.SuperSelect.prototype._setBoxesTop = function(){692 var focusH = this.dom.root.offsetHeight-2;693 if(this.opt.suggest == true){694 var suggestH = this.dom.suggestBox.offsetHeight;695 this.dom.suggestBox.style.top = focusH+'px';696 this.dom.optionsRoot.style.top = (focusH+suggestH)+'px';697 } else {698 this.dom.optionsRoot.style.top = (focusH+1)+'px';699 }700 if(this.dom.searchOptions && this.dom.searchOptions.length > 0){701 this.dom.searchOptionsRoot.style.top = (focusH+suggestH)+'px'702 }703};704/**705 * Metoda pro zavreni selectu706 * @param {event} e udalost707 * @param {HTMLElement} elm na kterem je udalost navesena708 **/709JAK.SuperSelect.prototype._close = function(e,elm){710 /*- schovavani suggest vysledku -*/711 this._clearSearchSuggest();712 if(this.opt.suggest == true){713 this.dom.suggestInput.value = '';714 this.dom.suggestBox.style.display = 'none';715 }716 this.dom.optionsRoot.style.display = 'none';717 this.dom.optionsRoot.style.visibility = 'hidden';718 this.optionsOpen = false;719 if(this.wc){ JAK.Events.removeListener(this.wc); }720 this.wc = 0;721 this.makeEvent('superSelectClose', {});722};723/**724 * Metoda pro zpracovavani udalosti pri zmacknuti klavesy725 * @param {event} e udalost726 * @param {HTMLElement} elm na kterem je udalost navesena727 **/728JAK.SuperSelect.prototype._keyAction = function(e,elm){729 var code = e.keyCode;730 if(code == 9){731 return;732 } else {733 JAK.Events.cancelDef(e);734 var do_reset = true;735 switch(code){736 case 37 : this._previousOption();break;737 case 39 : this._nextOption();break;738 case 38 : this._previousOption();break;739 case 40 : this._nextOption();break;740 case 33 : this._startOption();break;741 case 34 : this._endOption();break;742 case 36 : this._startOption();break;743 case 35 : this._endOption();break;744 case 27 : this._close();break;745 default :746 this._searchWord(e);747 do_reset = false;748 }749 if( do_reset ) this._resetSearch();750 }751};752/**753 * Metoda pro hledani stejnych slov a jejich oznacovani754 **/755JAK.SuperSelect.prototype._searchSameWords = function(sameLetter){756 if(sameLetter){757 if(this.countSearching == 0){758 this.searchWord = sameLetter[0].letter;759 this.countSearching = (sameLetter[1]+1);760 }761 var numOfSameWords = sameLetter[0].words.length;762 var num = this.countSearching > (numOfSameWords-1) ? this.countSearching-(numOfSameWords*(Math.floor(this.countSearching/numOfSameWords))) : this.countSearching;763 this.selectOption(sameLetter[0].words[num].index);764 this.countSearching++;765 }766};767/**768 * Metoda pro zjistovani zda je vybrany option stejneho zacatecniho pismena jako hledane pismeno769 * @return false | {array}770 **/771JAK.SuperSelect.prototype._isSelectedLetter = function(sChar){772 for(var i=0;i<this.sameWordsArray.length;i++){773 if(this.sameWordsArray[i].letter == sChar){774 for(var j=0;j<this.sameWordsArray[i].words.length;j++){775 if(this.sameWordsArray[i].words[j].index == this.selectedOption && arguments.length == 1){776 return [this.sameWordsArray[i], j];777 } else {778 return [this.sameWordsArray[i], j];779 }780 }781 break;782 }783 }784 return false;785};786/**787 * Metoda pro hledani slov788 * @param {event} e udalost pro ziskani keyCharCode789 **/790JAK.SuperSelect.prototype._searchWord = function(e){791 if(this.resetTimer){ clearTimeout(this.resetTimer); }792 var sChar = String.fromCharCode(e.keyCode).toLowerCase();793 var sameLetter = this._isSelectedLetter(sChar);794 /*- hledani slov se stejnym zacatecnim pismenem -*/795 if((this.searchWord.length == 1 && this.searchWord == sChar) || sameLetter){796 this._searchSameWords(sameLetter);797 } else {798 this.searchWord += sChar;799 var cropedWords = this._cropSelectTexts(this.searchWord.length);800 for(var i=0;i<cropedWords.length;i++){801 if(this.searchWord.toLowerCase() == cropedWords[i].toLowerCase()){802 this.selectOption(i);803 break;804 }805 }806 }807 this.resetTimer = setTimeout(this._resetSearch.bind(this), 1000);808};809/**810 * Metoda pro orezavani slov811 * @param {int} num pocet kolik ma orezat od zacatku812 **/813JAK.SuperSelect.prototype._cropSelectTexts = function(num){814 var cropedSel = [];815 for(var i=0;i<this.searchWords.length;i++){816 var crop = this.searchWords[i].substring(0,num);817 cropedSel.push(crop);818 }819 return cropedSel;820};821/**822 * MEtoda pro zavreni selectu po zmacknuti Esc823 * @param {event} e udalost824 * @param {HTMLElement} elm na kterem je udalost navesena825 **/826JAK.SuperSelect.prototype._keyEsc = function(e,elm){827 if(e.keyCode == 27){828 this._close();829 }830};831/**832 * Metoda pro spravne odscrolovani zobrazeneho selectu833 **/834JAK.SuperSelect.prototype._selectScroll = function(){835 if(this.optionsOpen && this.dom.options.length > 0){836 var selOpt = this.opt.multiple == true ? this.selectedOption[0] : this.selectedOption;837 838 var scrollTop = this.dom.optionsRoot.scrollTop;839 var optionsHeight = this.dom.optionsRoot.offsetHeight;840 var optionPos = this.dom.options[selOpt].elm.offsetTop;841 var optionHeight = this.dom.options[selOpt].elm.offsetHeight;842 if(optionPos < scrollTop){843 this.dom.optionsRoot.scrollTop = optionPos;844 } else if (optionPos >= (optionsHeight+scrollTop)) {845 this.dom.optionsRoot.scrollTop = (((optionPos+optionHeight)-optionsHeight));846 }847 }848};849/**850 * Metoda pro vybrani optionu851 * @param {int} index index vybraneho optionu852 **/853JAK.SuperSelect.prototype.selectOption = function(index){854 if(this.opt.multiple){855 this._multipleSel(index);856 } else {857 this.selectedOption = index;858 this._selectOption();859 }860};861JAK.SuperSelect.prototype._multipleSel = function(index){862 /*- ozkouseni zda-li je v selectu uz vybrany, jestli ne odeberem -*/863 var isIn = 0;864 if(this.multiples.length > 0){865 for(var i=0;i<this.multiples.length;i++){866 for(var j=0;j<index.length;j++){867 if(this.multiples[i].index == index[j]){868 this.multiples.splice(i, 1);869 isIn = 1;870 }871 }872 }873 }874 if(!isIn){875 for(var i=0;i<index.length;i++){876 this.multiples.push({ index : index[i] });877 }878 }879 /*- vytvareni vyselectenych optionu -*/880 this._setActiveOption();881 this._makeMultiple();882 this.makeEvent('change');883};884JAK.SuperSelect.prototype._makeMultiple = function(){885 /*- odebrani vsech hidden inputu -*/886 this._removeAllMultipleInputs();887 /*- smazani navesenych udalosti na vybrane optiony -*/888 while(this.multipleEc.length){889 JAK.Events.removeListener(this.multipleEc[this.multipleEc.length-1]);890 this.multipleEc.pop();891 }892 /*- vycisteni focus elementu -*/893 JAK.DOM.clear(this.dom.focusElm);894 for(var i=0;i<this.multiples.length;i++){895 896 var elm = this._getElmByIndex(this.multiples[i]);897 this.multiples[i].elm = elm;898 899 var txtCont = elm.elm.innerText ? elm.elm.innerText.trim() : elm.elm.textContent.trim();900 var selopt = JAK.mel('span', { className : 'superSelFillMulti' });901 if(JAK.Browser.client == 'ie'){902 selopt.innerText = this.opt.onlyTextSelected ? txtCont : elm.elm.innerHTML;903 } else {904 selopt.innerHTML = this.opt.onlyTextSelected ? txtCont : elm.elm.innerHTML;905 }906 this.multiples[i].selected = selopt;907 this.dom.focusElm.appendChild(selopt);908 this.multipleEc.push( JAK.Events.addListener(selopt, 'click', this, '_removeSelectedOption') );909 /*- vytvareni hidden inputu pri multiple vyberu -*/910 this._makeMultipleInput(elm);911 }912 /*- nastaveni spravne pozice optionu a suggest boxu -*/913 this._setBoxesTop();914};915/**916 * Odebrani vsech inputu z multiple vyberu917 **/918JAK.SuperSelect.prototype._removeAllMultipleInputs = function(){919 while(this.dom.input.length){920 this.dom.input[this.dom.input.length-1].parentNode.removeChild(this.dom.input[this.dom.input.length-1]);921 this.dom.input.pop();922 }923}924/**925 * Vytvareni hidden inputu926 **/927JAK.SuperSelect.prototype._makeMultipleInput = function(option){928 var input = JAK.mel('input', { type : 'hidden', name : this.opt.name, value : option.value });929 this.dom.root.appendChild(input);930 this.dom.input.push(input);931}932JAK.SuperSelect.prototype._removeSelectedOption = function(e, elm){933 JAK.Events.cancelDef(e);934 JAK.Events.stopEvent(e);935 for(var i=0;i<this.multiples.length;i++){936 if(this.multiples[i].selected == elm){937 this.multiples.splice(i, 1);938 this._makeMultiple();939 break;940 }941 }942};943JAK.SuperSelect.prototype._getElmByIndex = function(index){944 return this.dom.options[index.index];945};946/**947 * Metoda pro vybrani selectu948 **/949JAK.SuperSelect.prototype._selectOption = function(){950 if(this.dom.options.length > 0){951 this.dom.input.value = this.dom.options[this.selectedOption].value;952 /*- nastaveni HLAVNI promenne value a selectedIndex -*/953 this.value = this.dom.options[this.selectedOption].value;954 this.selectedIndex = this.selectedOption;955 956 var txtCont = this.dom.options[this.selectedOption].elm.innerText ? this.dom.options[this.selectedOption].elm.innerText.trim() : this.dom.options[this.selectedOption].elm.textContent.trim();957 if(JAK.Browser.client == 'ie'){958 this.dom.focusFillElm.innerText = this.opt.onlyTextSelected ? txtCont : this.dom.options[this.selectedOption].elm.innerHTML;959 } else {960 this.dom.focusFillElm.innerHTML = this.opt.onlyTextSelected ? txtCont : this.dom.options[this.selectedOption].elm.innerHTML;961 }962 if(!this.notEvent){963 this.makeEvent('change');964 }965 this.notEvent = 0;966 this._setActiveOption();967 this._selectScroll();968 }969};970/**971 * Metoda pro vybrani select podle jeho hodnoty 972 **/973JAK.SuperSelect.prototype.selectOptionByValue = function(value) {974 var indices = []; /* indexy pro zadane hodnoty */975 value = [].concat(value); /* vzdy pole */976 for (var i=0;i<this.dom.options.length;i++) {977 if (value.indexOf(this.dom.options[i].value) > -1) { indices.push(i); }978 }979 if (!indices.length) { return; } /* nic takoveho nemame */980 if (!this.opt.multiple) { indices = indices[0]; } /* neni multiple => chceme jen prvni vyskyt */981 this.selectOption(indices);982};983/**984 * MEtoda pro vybrani predchozi optionu985 **/986JAK.SuperSelect.prototype._previousOption = function(){987 var index = this.selectedOption-1;988 this.selectedOption = index < 0 ? 0 : this.selectedOption-1;989 this._selectOption();990};991/**992 * Metoda pro vybrani dalsiho optionu993 **/994JAK.SuperSelect.prototype._nextOption = function(){995 var index = this.selectedOption+1;996 this.selectedOption = index > (this.dom.options.length-1) ? (this.dom.options.length-1) : this.selectedOption+1;997 this._selectOption();998};999/**1000 * Metoda pro vybrani prvniho optionu1001 **/1002JAK.SuperSelect.prototype._startOption = function(){1003 this.selectedOption = 0;1004 this._selectOption();1005};1006/**1007 * Metoda pro vybrani posledniho optionu1008 **/1009JAK.SuperSelect.prototype._endOption = function(){1010 this.selectedOption = (this.dom.options.length-1);1011 this._selectOption();...
initPanels.js
Source:initPanels.js
1import { createElement, render } from '@wordpress/element'2import OptionsRoot from './OptionsRoot.js'3import { getValueFromInput } from './helpers/get-value-from-input'4import $ from 'jquery'5export const initAllPanels = () =>6 [...document.querySelectorAll('.ct-options-panel')].map((singleTarget) => {7 if (singleTarget.closest('[id="available-widgets"]')) {8 return9 }10 if (singleTarget.ctHasOptions) return11 singleTarget.ctHasOptions = true12 $(singleTarget).on('remove', () => setTimeout(() => initAllPanels()))13 $(singleTarget).on('remove', () => () => initAllPanels())14 render(15 <OptionsRoot16 options={JSON.parse(17 singleTarget.firstElementChild.dataset.ctOptions18 )}19 value={getValueFromInput(20 JSON.parse(21 singleTarget.firstElementChild.dataset.ctOptions22 ),23 JSON.parse(singleTarget.firstElementChild.value),24 null,25 false26 )}27 input_id={singleTarget.firstElementChild.id}28 input_name={singleTarget.firstElementChild.name}29 hasRevertButton={30 Object.keys(singleTarget.dataset).indexOf(31 'disableReverseButton'32 ) === -133 }34 />,35 singleTarget36 )...
Using AI Code Generation
1import { optionsRoot } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withKnobs } from '@storybook/addon-knobs';5storiesOf('Button', module)6 .addDecorator(withInfo)7 .addDecorator(withKnobs)8 .addDecorator(optionsRoot({9 }))10 .add('with text', () => <Button>Hello Button</Button>);11import { configure } from '@storybook/react';12import { withOptions } from '@storybook/addon-options';13import { withRoot } from 'storybook-root-decorator';14const req = require.context('../src', true, /.stories.js$/);15function loadStories() {16 req.keys().forEach(filename => req(filename));17}18configure(loadStories, module);19const path = require('path');20module.exports = (baseConfig, env, defaultConfig) => {21 defaultConfig.module.rules.push(22 {23 {24 loader: require.resolve('@storybook/addon-storysource/loader'),25 options: { parser: 'javascript' }26 }27 },28 {29 include: path.resolve(__dirname, '../')30 }31 );32 defaultConfig.resolve.extensions.push('.scss');33 return defaultConfig;34};35I am using storybook with react and I want to use the storysource addon. I have installed the addon and I have updated my .storybook/config.js file to include the following code: import { configure } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { withOptions } from '@storybook/addon-options'; import { withRoot } from 'storybook-root-decorator'; import { setDefaults } from '@storybook/addon-info'; import { setOptions } from '@storybook/addon-options'; setDefaults({ header: false, inline: true, source: true, styles: stylesheet }); setOptions({ name: 'My Storybook', url: '
Using AI Code Generation
1import { optionsRoot } from 'storybook-root-decorator';2export default {3 decorators: [optionsRoot()],4};5export const Example = () => <div>Example</div>;6import { optionsRoot } from 'storybook-root-decorator';7export const parameters = {8 options: optionsRoot(),9};10const { optionsRoot } = require('storybook-root-decorator');11module.exports = {12 core: {13 },14 webpackFinal: (config) => {15 config.module.rules.push({16 include: path.resolve(__dirname, '../'),17 });18 return config;19 },20 core: {21 },22 webpackFinal: (config) => {23 config.module.rules.push({24 include: path.resolve(__dirname, '../'),25 });26 return config;27 },28 features: {29 },30 typescript: {31 checkOptions: {},32 reactDocgenTypescriptOptions: {33 propFilter: (prop) => {34 if (prop.parent) {35 return !prop.parent.fileName.includes('node_modules');36 }37 return true;38 },39 },40 },41};
Using AI Code Generation
1import { addDecorator } from "@storybook/react";2import { withOptionsRoot } from "storybook-root-decorator";3const options = {4};5addDecorator(withOptionsRoot(options));6import { configure } from "@storybook/react";7import "./test";8configure(require.context("../src", true, /\.stories\.js$/), module);9import { addDecorator } from "@storybook/react";10import { withOptionsRoot } from "storybook-root-decorator";11const options = {12};13addDecorator(withOptionsRoot(options));14import { addons } from "@storybook/addons";15import { withOptionsRoot } from "storybook-root-decorator";16const options = {17};18addons.setConfig({19 sidebar: {20 },21 toolbar: {22 },23 previewTabs: {24 "storybook/docs/panel": {25 },26 },27});28addons.addPanel("storybook/root/panel", {29 render: () => withOptionsRoot(options),30});31const path = require("path");32const root = path.resolve(__dirname, "../");33module.exports = ({ config }) => {34 config.module.rules.push({35 {36 options: {37 resources: [`${root}/src/assets/scss/_variables.scss`],38 },39 },40 include: path.resolve(__dirname, "../"),41 });42 return config;43};44{45 "compilerOptions": {
Using AI Code Generation
1import { optionsRoot } from 'storybook-root-decorator';2export default {3 decorators: [optionsRoot({ theme: 'dark' })],4};5export const Test = () => '<div>Test</div>';6import { addDecorator } from '@storybook/react';7import { optionsRoot } from 'storybook-root-decorator';8addDecorator(optionsRoot({ theme: 'dark' }));9module.exports = {10};11import { optionsRoot } from 'storybook-root-decorator';12export const parameters = {13 optionsRoot: { theme: 'dark' },14};
Using AI Code Generation
1import React from 'react'2import { storiesOf } from '@storybook/react'3import { withRootDecorator } from 'storybook-root-decorator'4const optionsRoot = {5 body {6 background: #000;7 color: #fff;8 }9 console.log('hello world')10}11const HelloWorld = () => <h1>Hello World</h1>12storiesOf('Hello World', module)13 .addDecorator(withRootDecorator(optionsRoot))14 .add('Hello World', () => <HelloWorld />)15import { withRootDecorator } from 'storybook-root-decorator'16const optionsRoot = {17 body {18 background: #000;19 color: #fff;20 }21 console.log('hello world')22}23export const decorators = [withRootDecorator(optionsRoot)]24import { addons } from '@storybook/addons'25import { withRootDecorator } from 'storybook-root-decorator'26const optionsRoot = {27 body {28 background: #000;29 color: #fff;30 }31 console.log('hello world')32}33addons.setConfig({
Using AI Code Generation
1import { optionsRoot } from 'storybook-root-decorator';2const options = {3 theme: {4 },5};6addDecorator(optionsRoot(options));7import { addDecorator } from '@storybook/react';8import { optionsRoot } from 'storybook-root-decorator';9const options = {10 theme: {11 },12};13addDecorator(optionsRoot(options));14import { withRoot } from 'storybook-root-decorator';15storiesOf('test', module)16 .addDecorator(withRoot())17 .add('test', () => <div>test</div>);18import { withRoot } from 'storybook-root-decorator';19storiesOf('test', module)20 .addDecorator(21 withRoot({22 theme: {23 },24 })25 .add('test', () => <div>test</div>);
Using AI Code Generation
1import { optionsRoot } from 'storybook-root-decorator';2import { addDecorator } from '@storybook/react';3addDecorator(optionsRoot);4import { configure } from '@storybook/react';5import { addDecorator } from '@storybook/react';6import { optionsRoot } from 'storybook-root-decorator';7addDecorator(optionsRoot);8const req = require.context('../src', true, /\.stories\.js$/);9function loadStories() {10 req.keys().forEach(filename => req(filename));11}12configure(loadStories, module);13const path = require('path');14module.exports = {15 module: {16 {17 loaders: [require.resolve('@storybook/addon-storysource/loader')],18 },19 {20 loader: require.resolve('babel-loader'),21 options: {22 presets: [['react-app', { flow: false, typescript: true }]],23 },24 },25 },26 resolve: {27 alias: {28 'storybook-root-decorator': path.resolve(__dirname, '../src'),29 },30 },31};32import '@storybook/addon-actions/register';33import '@storybook/addon-links/register';34import 'storybook-root-decorator/register';35import { addDecorator } from '@storybook/react';36import { optionsRoot } from 'storybook-root-decorator';37addDecorator(optionsRoot);38import { configure } from '@storybook/react';39import { addDecorator } from '@storybook/react';40import { optionsRoot } from 'storybook-root-decorator';41addDecorator(optionsRoot);42const req = require.context('../src', true, /\.stories\.js$/);43function loadStories() {44 req.keys().forEach(filename => req(filename));45}46configure(loadStories, module);
Using AI Code Generation
1import { optionsRoot } from 'storybook-root';2import { withKnobs } from '@storybook/addon-knobs';3export default optionsRoot({4});5import { optionsStory } from 'storybook-root';6import Test from './test';7export default optionsStory({8});9import { optionsStory } from 'storybook-root';10import Test from './test';11export default optionsStory({12});13import { optionsStory } from 'storybook-root';14import Test from './test';15export default optionsStory({16});17import { optionsStory } from 'storybook-root';18import Test from './test';19export default optionsStory({20});21import { optionsStory } from 'storybook-root';22import Test from './test';23export default optionsStory({24});25import { optionsStory } from 'storybook-root';26import Test from './test';27export default optionsStory({28});29import { optionsStory } from 'storybook-root';30import Test from './test';31export default optionsStory({32});
Using AI Code Generation
1import { addDecorator } from '@storybook/react';2import { optionsRoot } from 'storybook-root-decorator';3addDecorator(optionsRoot);4import React from 'react';5import { storiesOf } from '@storybook/react';6import { withInfo } from '@storybook/addon-info';7import { text, boolean, number } from '@storybook/addon-knobs';8import { withOptions } from 'storybook-addon-options';9import { withRoot } from 'storybook-root-decorator';10import Test from './test';11storiesOf('Test', module)12 .addDecorator(withInfo)13 .addDecorator(withOptions)14 .addDecorator(withRoot)15 .add('with knobs', () => (16 text={text('text', 'Hello Storybook')}17 bool={boolean('bool', true)}18 num={number('num', 42)}19 ));20import React from 'react';21import { storiesOf } from '@storybook/react';22import { withInfo } from '@storybook/addon-info';23import { text, boolean, number } from '@storybook/addon-knobs';24import { withOptions } from 'storybook-addon-options';25import { withRoot } from 'storybook-root-decorator';26import Test from './test';27storiesOf('Test', module)28 .addDecorator(withInfo)29 .addDecorator(withOptions)30 .addDecorator(withRoot)31 .add('with knobs', () => (32 text={text('text', 'Hello Storybook')}33 bool={boolean('bool', true)}34 num={number('num', 42)}35 ));36import React from 'react';37import { storiesOf } from '@storybook/react';38import { withInfo } from '@storybook/addon-info';39import { text, boolean, number } from '@storybook/addon-knobs';40import { withOptions } from 'storybook-addon-options';41import { withRoot } from 'storybook-root-decorator';42import Test from './test';43storiesOf('Test', module)44 .addDecorator(withInfo)
Using AI Code Generation
1export default optionsStory({2});3module.exports = {4};5import { optionsRoot } from 'storybook-root-decorator';6export const parameters = {7 optionsRoot: { theme: 'dark' },8};
Using AI Code Generation
1import { optionsRoot } from 'storybook-root-decorator';2const options = {3 theme: {4 },5};6addDecorator(optionsRoot(options));7import { addDecorator } from '@storybook/react';8import { optionsRoot } from 'storybook-root-decorator';9const options = {10 theme: {11 },12};13addDecorator(optionsRoot(options));14import { withRoot } from 'storybook-root-decorator';15storiesOf('test', module)16 .addDecorator(withRoot())17 .add('test', () => <div>test</div>);18import { withRoot } from 'storybook-root-decorator';19storiesOf('test', module)20 .addDecorator(21 withRoot({22 theme: {23 },24 })25 .add('test', () => <div>test</div>);
Using AI Code Generation
1import { optionsRoot } from 'storybook-root';2import { withKnobs } from '@storybook/addon-knobs';3export default optionsRoot({4});5import { optionsStory } from 'storybook-root';6import Test from './test';7export default optionsStory({8});9import { optionsStory } from 'storybook-root';10import Test from './test';11export default optionsStory({12});13import { optionsStory } from 'storybook-root';14import Test from './test';15export default optionsStory({16});17import { optionsStory } from 'storybook-root';18import Test from './test';19export default optionsStory({20});21import { optionsStory } from 'storybook-root';22import Test from './test';23export default optionsStory({24});25import { optionsStory } from 'storybook-root';26import Test from './test';27export default optionsStory({28});29import { optionsStory } from 'storybook-root';30import Test from './test';31export default optionsStory({32});
Using AI Code Generation
1import { addDecorator } from '@storybook/react';2import { optionsRoot } from 'storybook-root-decorator';3addDecorator(optionsRoot);4import React from 'react';5import { storiesOf } from '@storybook/react';6import { withInfo } from '@storybook/addon-info';7import { text, boolean, number } from '@storybook/addon-knobs';8import { withOptions } from 'storybook-addon-options';9import { withRoot } from 'storybook-root-decorator';10import Test from './test';11storiesOf('Test', module)12 .addDecorator(withInfo)13 .addDecorator(withOptions)14 .addDecorator(withRoot)15 .add('with knobs', () => (16 text={text('text', 'Hello Storybook')}17 bool={boolean('bool', true)}18 num={number('num', 42)}19 ));20import React from 'react';21import { storiesOf } from '@storybook/react';22import { withInfo } from '@storybook/addon-info';23import { text, boolean, number } from '@storybook/addon-knobs';24import { withOptions } from 'storybook-addon-options';25import { withRoot } from 'storybook-root-decorator';26import Test from './test';27storiesOf('Test', module)28 .addDecorator(withInfo)29 .addDecorator(withOptions)30 .addDecorator(withRoot)31 .add('with knobs', () => (32 text={text('text', 'Hello Storybook')}33 bool={boolean('bool', true)}34 num={number('num', 42)}35 ));36import React from 'react';37import { storiesOf } from '@storybook/react';38import { withInfo } from '@storybook/addon-info';39import { text, boolean, number } from '@storybook/addon-knobs';40import { withOptions } from 'storybook-addon-options';41import { withRoot } from 'storybook-root-decorator';42import Test from './test';43storiesOf('Test', module)44 .addDecorator(withInfo)
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
