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

How to use WithData method in storybook-root

Best JavaScript code snippet using storybook-root

display.js

Source:display.js

1function display(withData, i){2	let text = "Erreur",3		icon = false,4		className = false,5		otherData = false,6		customIcon = false,7		href = withData.url,8		onclick = false;9	switch (withData.nature) {10		case "github-file":11			onclick = "quick("+i+", event)";12			className = "github";13			text = withData.file+"<span> - "+withData.user+"/"+withData.repos+"</span>";14			icon = "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z";15			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='code quick quick"+i+"'><pre><code></code></pre></div>");16			fetch('https://api.github.com/repos/'+withData.user+"/"+withData.repos+'/contents/'+withData.url.split("/blob/master/")[1])17			.then(function(response) {18				return response.json();19			}).then(function(data) {20				$(".quick"+i+" pre code").addClass(withData.ext);21				hljs.highlightBlock($(".quick"+i+" pre code").selector[0]);22				var iframe = document.querySelector('.quick'+i+" pre code"),23					code = atob(decodeURIComponent(data.content));24				iframe.innerHTML = code.length >= 1500 ? code.substring(0, 1450)+"...<a class='more-github' target='blank' href='"+withData.url+"'>Voir le code on Github</span" : code;25			});26		break;27		case "github-folder":28			className = "github";29			text = withData.path+"<span> - "+withData.user+"/"+withData.repos+"</span>";30			icon = "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z";31		break;32		case "github-user":33			className = "github";34			text = withData.user+" <span>on Github</span>";35			icon = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z";36		break;37		case "github-repos":38			className = "github";39			text = withData.user+"/"+withData.repos+" <span>on Github</span>";40			icon = "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z";41		break;42		case "short-url":43			className = "short-url";44			text = "<span>"+withData.shortener+'<svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></span>'+withData.target;45			icon = "M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z";46			otherData = withData.full;47		break;48		case "youtube-video":49			let d = new Date(withData.date),50				day = d.getDate(),51				sup = "th",52				year = d.getFullYear();53				month = d.getMonth();54				month = [55					"January",56					"Februar",57					"March",58					"April",59					"May",60					"June",61					"July",62					"August",63					"September",64					"October",65					"November",66					"December"67				][month];68				switch (day) {69					case 1: sup = "st"; break;70					case 2: sup = "nd"; break;71					case 3: sup = "rd"; break;72				}73			onclick = "quick("+i+", event)";74			className = "youtube";75			text = withData.title.replace("- "+withData.author, '<span><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>'+withData.author+"</span>");76			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='youtube quick quick"+i+"'><iframe frameborder='0' height='315' width='560' allowfullscreen data-src='https://www.youtube-nocookie.com/embed/"+withData.id+"'></iframe><h3>"+(withData.title.length >= 35 ? withData.title.substring(0, 32)+"..." : withData.title)+"</h3><h4>posted by <a class='inline' href='"+withData.channelUrl+"' target='blank'>"+withData.author+"</a> the "+day+"<sup>"+sup+"</sup> "+month+" "+year+"</h4><p>"+(withData.description.length > 300 ? withData.description.substring(0, 250)+"<span class='text-end'>"+withData.description.substring(250, 300)+"...</span> <a href='https://youtube.com/watch/?v="+withData.id+"' target='blank'>Read more on Youtube</a>" : withData.description)+"</p></div>");77			icon = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z";78		break;79		case "youtube-channel":80			className = "youtube";81			text = withData.channel;82			icon = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z";83		break;84		case "discord-invite":85			className = "discord";86			text = 'Discord invite<span><svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>'+withData.id+"</span>";87			icon = "M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z";88		break;89		case "codepen-user":90			className = "codepen";91			text = withData.user;92			icon = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z";93		break;94		case "codepen-pen":95			onclick = "quick("+i+", event)";96			className = "codepen";97			text = "Pen de "+upCase(withData.user);98			icon = "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z";99			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='quick quick"+i+"'><iframe frameborder='0' height='330' width='90%' allowfullscreen data-src='https://codepen.io/"+withData.user+"/embed/"+withData.id+"/?theme-id=light&default-tab=result'></iframe></div>");100		break;101		case "instagram-user":102			className = "instagram";103			text = withData.user;104			icon = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z";105		break;106		case "google-docs-file":107			text = "Google "+withData.type;108			switch (withData.type) {109				case "presentation": text = "Google slide"; icon = "M10 8v8l5-4-5-4zm9-5H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"; break;110				case "document": icon = "M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"; break;111				case "spreadsheets": text = "Google sheet"; icon = "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"; break;112			}113			className = "gdocs-"+text.replace("Google ", "");114			text += '<span><svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>'+withData.id.substring(0, 20)+"...</span>";115		break;116		case "google-font":117			className = "gfont";118			text = withData.font+" <span>on Google Fonts</span>";119			icon = "M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z";120		break;121		case "instagram-picture":122			className = "instagram";123			text = "Photo Instagram";124			icon = "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.9 13.98l2.1 2.53 3.1-3.99c.2-.26.6-.26.8.01l3.51 4.68c.25.33.01.8-.4.8H6.02c-.42 0-.65-.48-.39-.81L8.12 14c.19-.26.57-.27.78-.02z";125		break;126		case "instagram-story":127			className = "instagram";128			text = "story de "+upCase(withData.user);129			icon = "M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z";130		break;131		case "twitter-user":132			className = "twitter";133			text = withData.user;134			icon = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z";135		break;136		case "twitter-status":137			className = "twitter";138			text = "Tweet de "+withData.user;139			icon = "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z";140		break;141		case "xml":142			let length = withData.title.length+1+withData.description.length;143			className = "xml";144			text = withData.title+'<span><svg viewBox="0 0 24 24"><path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>'+(length > 70 ? withData.description.substring(0, 67)+"..." : withData.description);145			customIcon = true;146			icon = '<circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>';147			onclick = "quick("+i+", event)";148			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', `<div class='xml quick quick${i}'>149				<div class="header"><img src="${withData.img}" /><h4>${withData.title}</h4></div>150				<div class="latest">151					<p>LATEST <span>Â· ${fancyDate(withData.lastModif)}</span></p>152					<a target="blank" href="${withData.items[0].link}">${withData.items[0].title}<span>${fancyLink(withData.items[0].link)}</span></a>153				</div>154			</div>`);155		break;156		case "google-search":157			onclick = "quick("+i+", event)";158			let results = "";159			for (let i = 0; i<4; i++) {160				let title = withData.results[i].title;161				results += "<a target='blank' href='"+withData.results[i].url+"'><span class='title'>"+(title.length >= 45 ? title.substring(0, 42)+"..." : title)+"</span><span class='url'>"+withData.results[i].displayUrl+"</span></a>";162			}163			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='search quick quick"+i+"'>"+results+"</div>");164		break;165		case "newspaper-article":166			text = '<span>'+withData.newspaperText+'</span><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>'+withData.title+(["lemonde", "nytimes", "lefigaro", "lepoint", "20minutes"].includes(withData.newspaper) ?'<span><svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>'+withData.date+"</span>" : "");167			icon = "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z";168		break;169		case "franceculture-emission":170			className = "franceculture"171			text = '<span>'+withData.emission+'</span><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>'+withData.title;172			icon = "M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.89 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.11-.89-2-2-2H8.3l8.26-3.34L15.88 1 3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-2h-2v2H4V8h16v4z";173		break;174		case "franceculture-actu":175			className = "franceculture"176			text = '<span>'+withData.category+'</span><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>'+withData.title;177			icon = "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z";178		break;179		case "gmaps-place":180			onclick = "quick("+i+", event)";181			text = withData.place;182			icon = "M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z";183			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='quick quick"+i+"'><iframe frameborder='0' height='315' width='90%' data-src='https://www.google.com/maps/embed/v1/place?key=AIzaSyAJSyBgYsGbs7br8JiQw70NYIFbaQClaXc&q="+withData.place+"'></iframe></div>");184		break;185		case "gmaps-location":186			onclick = "quick("+i+", event)";187			text = "Google maps location";188			icon = "M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z";189			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='quick quick"+i+"'><iframe frameborder='0' height='315' width='90%' data-src='https://www.google.com/maps/embed/v1/view?key=AIzaSyAJSyBgYsGbs7br8JiQw70NYIFbaQClaXc&center="+withData.lat+","+withData.lng+"&zoom="+withData.zoom+"'></iframe></div>");190		break;191		case "stackoverflow-question":192			className = "stackoverflow";193			text = withData.question;194			icon = "M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z";195		break;196		case "deezer-track":197			let date = withData.album.date.split("-"),198				duration = withData.duration,199				minutes = Math.floor(duration / 60),200				seconds = duration - minutes * 60,201				albumName = withData.album.title.length > 25 ? withData.album.title.substring(0, 20)+"..." : withData.album.title;202			seconds = (seconds < 10 ? "0"+seconds : seconds);203				204			duration = minutes+":"+seconds;205			date.reverse();206			date.join("O");207			date = date[0]+"/"+date[1]+"/"+date[2];208			onclick = "quick("+i+", event)";209			className = "deezer";210			text = withData.title+" - "+withData.artist.name;211			icon = "M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z";212			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='quick deezer quick"+i+"'><a class='img' href='"+withData.album.url+"' target='blank'><img class='cover' src='"+withData.album.cover+"'></a><h4>"+(withData.title.length > 25 ? withData.title.substring(0, 22)+"..." : withData.title)+"</h4><a href='"+withData.url+"' class='play' target='blank'><svg viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/></svg><span class='duration'>"+duration+"</span><span class='listen'>Listen \""+albumName+"\" on Deezer</span></a><a class='author' href='"+withData.artist.url+"' target='blank'><img src='"+withData.artist.picture+"' /><span class='text'>"+withData.artist.name+"</span><span class='date'>"+date+"</span></a></div>");213		break;214		case "wikipedia-page":215			text = withData.page+" <span>on Wikipedia</span>";216			icon = "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z";217		break;218		case "image-file":219			onclick = "quick("+i+", event)";220			className = "file";221			text = withData.title;222			icon = "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.9 13.98l2.1 2.53 3.1-3.99c.2-.26.6-.26.8.01l3.51 4.68c.25.33.01.8-.4.8H6.02c-.42 0-.65-.48-.39-.81L8.12 14c.19-.26.57-.27.78-.02z";223			$("#playlist .links a.child").selector[i].insertAdjacentHTML('afterend', "<div class='quick quick"+i+"'><img src='"+withData.url+"'></div>");224		break;225		default:226			text = withData.url.split("//")[1];227			if (text.endsWith("/")) {228				text = text.substring(0, text.length - 1);229			}230			icon = "M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z";231	}232	if (withData.nature.endsWith("search")) {233		className = "search";234		text = "Recherche "+withData.engine+": <span>"+withData.search+"</span>";235		icon = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z";236	}237	$("#playlist .links a.child .text").selector[i].innerHTML = text;	238	if (customIcon) {239		$("#playlist .links a.child > svg").selector[i].innerHTML = icon;240	} else {241		$("#playlist .links a.child > svg").selector[i].innerHTML = "<path class='icon' d='"+icon+"'></path>";242	}243	if (href != false) {244		$("#playlist .links a.child").selector[i].setAttribute("href", withData.url);245	}246	if (otherData) {247		$("#playlist .links a.child .otherData").selector[i].innerHTML = otherData;248	}249	if (className) {250		$("#playlist .links a.child").selector[i].classList.add(className);251	}252	if (onclick) {253		$("#playlist .links a.child").selector[i].setAttribute("onclick", onclick);254	}...

dateTimePicker.js

Source:dateTimePicker.js

1function withData(param) {2  return param < 10 ? '0' + param : '' + param;3}4function getLoopArray(start, end) {5  var start = start || 0;6  var end = end || 1;7  var array = [];8  for (var i = start; i <= end; i++) {9    array.push(withData(i));10  }11  return array;12}13function getMonthDay(year, month) {14  var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;15  switch (month) {16    case '01':17    case '03':18    case '05':19    case '07':20    case '08':21    case '10':22    case '12':23      array = getLoopArray(1, 31)24      break;25    case '04':26    case '06':27    case '09':28    case '11':29      array = getLoopArray(1, 30)30      break;31    case '02':32      array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)33      break;34    default:35      array = 'æä»½æ ¼å¼ä¸æ£ç¡®ï¼è¯·éæ°è¾å¥ï¼'36  }37  return array;38}39function getNewDateArry() {40  // å½åæ¶é´çå¤ç41  var newDate = new Date();42  var year = withData(newDate.getFullYear()),43    mont = withData(newDate.getMonth() + 1),44    date = withData(newDate.getDate()),45    hour = withData(newDate.getHours()),46    minu = withData(newDate.getMinutes()),47    seco = withData(newDate.getSeconds());48  return [year, mont, date, hour, minu, seco];49}50function dateTimePicker(startYear, endYear, date) {51  // è¿åé»è®¤æ¾ç¤ºçæ°ç»åèå¨æ°ç»çå£°æ52  var dateTime = [], dateTimeArray = [[], [], [], [], [], []];53  var start = startYear || 1978;54  var end = endYear || 2100;55  // é»è®¤å¼å§æ¾ç¤ºæ°æ®56  var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();57  // å¤çèå¨åè¡¨æ°æ®58  /*å¹´ææ¥ æ¶åç§*/59  dateTimeArray[0] = getLoopArray(start, end);60  dateTimeArray[1] = getLoopArray(1, 12);61  dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);62  dateTimeArray[3] = getLoopArray(0, 23);63  dateTimeArray[4] = getLoopArray(0, 59);64  dateTimeArray[5] = getLoopArray(0, 59);65  dateTimeArray.forEach((current, index) => {66    dateTime.push(current.indexOf(defaultDate[index]));67  });68  return {69    dateTimeArray: dateTimeArray,70    dateTime: dateTime71  }72}73module.exports = {74  dateTimePicker: dateTimePicker,75  getMonthDay: getMonthDay,76  withData: withData...

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4import { linkTo } from '@storybook/addon-links';5import { WithData } from 'storybook-root-decorator';6import { Button, Welcome } from '@storybook/react/demo';7storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);8storiesOf('Button', module)9  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)10  .add('with some emoji', () => (11    <Button onClick={action('clicked')}>12  .addDecorator(WithData);13import React from 'react';14import { storiesOf } from '@storybook/react';15import { action } from '@storybook/addon-actions';16import { linkTo } from '@storybook/addon-links';17import { WithData } from 'storybook-root-decorator';18import { Button, Welcome } from '@storybook/react/demo';19storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);20storiesOf('Button', module)21  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)22  .add('with some emoji', () => (23    <Button onClick={action('clicked')}>24  .addDecorator(WithData);25import React from 'react';26import { storiesOf } from '@storybook/react';27import { action } from '@storybook/addon-actions';28import { linkTo } from '@storybook/addon-links';29import { WithData } from 'storybook-root-decorator';30import { Button, Welcome } from '@storybook/react/demo';31storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

Using AI Code Generation

1import { WithData } from "storybook-root-decorator";2import { storiesOf } from "@storybook/react";3import { action } from "@storybook/addon-actions";4import { linkTo } from "@storybook/addon-links";5import { Button } from "@storybook/react/demo";6import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";7storiesOf("Button", module)8  .addDecorator(withKnobs)9  .addDecorator(WithData)10  .add("with text", () => (11    <Button onClick={action("clicked")}>12      {text("Label", "Hello Storybook")}13  .add("with some emoji", () => (14    <Button onClick={action("clicked")}>15      {text("Label", "😀 😎 👍 💯")}16  .add("with some emoji and action", () => (17    <Button onClick={action("clicked")}>18      {text("Label", "😀 😎 👍 💯")}19  .add("with some emoji and action", () => (20    <Button onClick={action("clicked")}>21      {text("Label", "😀 😎 👍 💯")}22  .add("with some emoji and action", () => (23    <Button onClick={action("clicked")}>24      {text("Label", "😀 😎 👍 💯")}25  .add("with some emoji and action", () => (26    <Button onClick={action("clicked")}>27      {text("Label", "😀 😎 👍 💯")}28  .add("with some emoji and action", () => (29    <Button onClick={action("clicked")}>30      {text("Label", "😀 😎 👍 💯")}31  .add("with some emoji and action", () => (32    <Button onClick={action("clicked")}>33      {text("Label", "😀 😎 👍 💯")}34  .add("with some emoji and action", () => (35    <Button onClick={action("clicked")}>36      {text("Label", "😀 😎 👍 💯")}

Using AI Code Generation

1import { WithData } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';4import { withInfo } from '@storybook/addon-info';5const stories = storiesOf('Storybook Knobs', module);6stories.addDecorator(withKnobs);7stories.add('with knobs', WithData(8  {9    title: text('Title', 'Hello Storybook'),10    isTrue: boolean('Is True', true),11    count: number('Count', 42),12  },13  (data) => (14      <h1>{data.title}</h1>15      <p>Is True: {data.isTrue}</p>16      <p>Count: {data.count}</p>17));18MIT © [Ashish](

Using AI Code Generation

1import { WithData } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';4const stories = storiesOf('MyComponent', module);5stories.addDecorator(withKnobs);6stories.add('default', () => (7    data={text('data', 'This is a test')}8    loading={boolean('loading', false)}9    error={text('error', '')}10    {({ data, loading, error }) => (11      <MyComponent data={data} loading={loading} error={error} />12    )}13));

Using AI Code Generation

1import { WithData } from 'storybook-root-decorator';2export default {3};4export const Test = () => {5  const [data, setData] = useState('Initial Data');6  return (7        value={data}8        onChange={(e) => setData(e.target.value)}9      <p>{data}</p>10  );11};12Test.parameters = {13  data: {14    setData: (data) => {15      setData(data);16    },17  },18};

Using AI Code Generation

1import { WithData } from 'storybook-root-decorator';2export default {3};4export const test = () => {5  return <div>test</div>;6};7import { WithData } from 'storybook-root-decorator';8export default {9};10export const test = () => {11  return <div>test</div>;12};13import { WithTheme } from 'storybook-root-decorator';14export default {15};16export const test = () => {17  return <div>test</div>;18};19import { WithProvider } from 'storybook-root-decorator';20export default {21};22export const test = () => {23  return <div>test</div>;24};25import { WithApollo } from 'storybook-root-decorator';

Using AI Code Generation

1import { WithData } from '@storybook/addon-data';2storiesOf('Test', module)3  .addDecorator(WithData({4    data: {5    },6  }))7  .add('default', () => (8      {this.foo}9  ));10Default: `{}`11MIT © [Dmitriy Kovalenko](

Using AI Code Generation

1import { WithData } from "storybook-root-decorator";2export default {3  parameters: {4    data: {5    },6  },7};8export const Example = () => {9  return <h1>Example</h1>;10};11Example.story = {12  parameters: {13    data: {14    },15  },16};17import { addDecorator } from "@storybook/react";18import { WithData } from "storybook-root-decorator";19addDecorator(WithData);20import { addDecorator } from "@storybook/react";21import { WithData } from "storybook-root-decorator";22addDecorator(WithData);23export const parameters = {24  data: {25  },26};27export const decorators = [WithData];28import { addDecorator } from "@storybook/react";29import { WithData } from "storybook-root-decorator";30addDecorator(WithData);31export const parameters = {32  data: {33  },34};35export const decorators = [WithData];36import { WithData } from "storybook-root-decorator";

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.