KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

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.