How to use jsx method in storybook-root

Best JavaScript code snippet using storybook-root

_app.js

Source:_app.js

...60  const {61    urlPath,62    navItemName63  } = props;64  return /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {65    href: urlPath,66    children: /*#__PURE__*/jsx_runtime_.jsx("a", {67      children: /*#__PURE__*/jsx_runtime_.jsx("li", {68        className: (nav_item_module_default()).navItem,69        children: /*#__PURE__*/jsx_runtime_.jsx("nav", {70          children: navItemName71        })72      })73    })74  });75}76// EXTERNAL MODULE: ./components/layout/dropdown-menu.module.css77var dropdown_menu_module = __webpack_require__(2487);78var dropdown_menu_module_default = /*#__PURE__*/__webpack_require__.n(dropdown_menu_module);79;// CONCATENATED MODULE: ./components/layout/dropdown-menu.js80function DropdownMenu() {81  return /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {82    className: (dropdown_menu_module_default()).dropdown,83    children: [/*#__PURE__*/jsx_runtime_.jsx(NavItem, {84      navItemName: "Calculus 1",85      urlPath: "/courses/calculus-1",86      className: (dropdown_menu_module_default()).menuItem87    }), /*#__PURE__*/jsx_runtime_.jsx(NavItem, {88      navItemName: "Calculus 2",89      urlPath: "/courses/calculus-2",90      className: (dropdown_menu_module_default()).menuItem91    }), /*#__PURE__*/jsx_runtime_.jsx(NavItem, {92      navItemName: "Calculus 3",93      urlPath: "/courses/calculus-3",94      className: (dropdown_menu_module_default()).menuItem95    }), /*#__PURE__*/jsx_runtime_.jsx(NavItem, {96      navItemName: "MGT 100",97      urlPath: "/courses/mgt-100",98      className: (dropdown_menu_module_default()).menuItem99    })]100  });101}102;// CONCATENATED MODULE: external "@material-ui/icons/ArrowDropDown"103var ArrowDropDown_namespaceObject = require("@material-ui/icons/ArrowDropDown");;104var ArrowDropDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDropDown_namespaceObject);105;// CONCATENATED MODULE: external "@material-ui/icons/ArrowRight"106var ArrowRight_namespaceObject = require("@material-ui/icons/ArrowRight");;107var ArrowRight_default = /*#__PURE__*/__webpack_require__.n(ArrowRight_namespaceObject);108// EXTERNAL MODULE: ./components/layout/menu.module.css109var menu_module = __webpack_require__(7426);110var menu_module_default = /*#__PURE__*/__webpack_require__.n(menu_module);111;// CONCATENATED MODULE: ./components/layout/menu.js112function Menu(props) {113  // Set useState var for dropdown114  const {115    0: showDropdown,116    1: setShowDropdown117  } = (0,external_react_.useState)(); // Get token when page loads118  if (false) { var token; }119  return /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {120    className: (menu_module_default()).navigation,121    children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {122      className: (menu_module_default()).menuItems,123      children: [/*#__PURE__*/jsx_runtime_.jsx("nav", {124        onClick: () => setShowDropdown(!showDropdown),125        children: "Courses"126      }), /*#__PURE__*/jsx_runtime_.jsx((ArrowDropDown_default()), {127        className: (menu_module_default()).icon,128        width: "20px"129      }), showDropdown && props.children]130    }), /*#__PURE__*/jsx_runtime_.jsx("div", {131      children: /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {132        href: `/about`,133        children: /*#__PURE__*/(0,jsx_runtime_.jsxs)("a", {134          className: (menu_module_default()).menuItems,135          children: [/*#__PURE__*/jsx_runtime_.jsx("nav", {136            children: "About"137          }), /*#__PURE__*/jsx_runtime_.jsx((ArrowRight_default()), {138            className: (menu_module_default()).icon,139            width: "20px"140          })]141        })142      })143    }), /*#__PURE__*/jsx_runtime_.jsx("div", {144      children: token && /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {145        href: `/profile`,146        children: /*#__PURE__*/(0,jsx_runtime_.jsxs)("a", {147          className: (menu_module_default()).menuItems,148          children: [/*#__PURE__*/jsx_runtime_.jsx("nav", {149            children: "Profile"150          }), /*#__PURE__*/jsx_runtime_.jsx((ArrowRight_default()), {151            className: (menu_module_default()).icon,152            width: "20px"153          })]154        })155      })156    })]157  });158}159// EXTERNAL MODULE: ./components/search/search-row.module.css160var search_row_module = __webpack_require__(7129);161var search_row_module_default = /*#__PURE__*/__webpack_require__.n(search_row_module);162;// CONCATENATED MODULE: ./components/search/search-row.js163function SearchRow({164  album165}) {166  return /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {167    href: "/album/?slug=${album.slug}",168    as: `/album/${album.slug}`,169    children: /*#__PURE__*/jsx_runtime_.jsx("a", {170      children: /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {171        className: (search_row_module_default()).fullRow,172        children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {173          className: (search_row_module_default()).albumRow,174          children: [/*#__PURE__*/jsx_runtime_.jsx("img", {175            src: album.album_cover,176            alt: `${album.album_name}: ${album.artist}`,177            className: (search_row_module_default()).albumCover178          }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {179            className: (search_row_module_default()).text,180            children: [/*#__PURE__*/jsx_runtime_.jsx("h2", {181              children: album.album_name182            }), /*#__PURE__*/jsx_runtime_.jsx("h3", {183              children: album.artist184            })]185          })]186        }), /*#__PURE__*/jsx_runtime_.jsx("hr", {})]187      })188    })189  });190}191// EXTERNAL MODULE: ./components/search/search-list.module.css192var search_list_module = __webpack_require__(6811);193var search_list_module_default = /*#__PURE__*/__webpack_require__.n(search_list_module);194;// CONCATENATED MODULE: ./components/search/search-list.js195function SearchList({196  albums197}) {198  // make sure albums is an array and then map it to search row199  if (Array.isArray(albums)) {200    return /*#__PURE__*/jsx_runtime_.jsx("div", {201      className: (search_list_module_default()).list,202      children: albums.map(album => /*#__PURE__*/jsx_runtime_.jsx(SearchRow, {203        album: album204      }, album.objectID))205    });206  } else {207    return null;208  }209}210;// CONCATENATED MODULE: external "@material-ui/icons/Search"211var Search_namespaceObject = require("@material-ui/icons/Search");;212var Search_default = /*#__PURE__*/__webpack_require__.n(Search_namespaceObject);213// EXTERNAL MODULE: ./components/search/search-bar.module.css214var search_bar_module = __webpack_require__(7570);215var search_bar_module_default = /*#__PURE__*/__webpack_require__.n(search_bar_module);216;// CONCATENATED MODULE: ./components/search/search-bar.js217function SearchBar() {218  //Set empty array for search results219  const {220    0: searchResults,221    1: setSearchResults222  } = (0,external_react_.useState)([]);223  const handleChange = async event => {224    event.preventDefault();225    let formattedSearch = event.target.value + ""; // replace spaces in search term with "%20"226    formattedSearch.replace(/ /g, "%20");227    const beatlyURL = `https://${process.env.applicationID}-dsn.algolia.net/1/indexes/beatly_index?query=${formattedSearch}&hitsPerPage=7`; //Include Algolia app ID and key with search request228    const response = await fetch(beatlyURL, {229      headers: {230        "X-Algolia-API-Key": process.env.algoliaApiKey,231        "X-Algolia-Application-Id": process.env.applicationID232      }233    });234    const data = await response.json();235    await setSearchResults(data.hits);236  };237  return /*#__PURE__*/jsx_runtime_.jsx("div", {238    children: /*#__PURE__*/(0,jsx_runtime_.jsxs)("form", {239      className: (search_bar_module_default()).searchBar // onChange={handleChange}240      ,241      onSubmit: e => e.preventDefault(),242      children: [/*#__PURE__*/jsx_runtime_.jsx((Search_default()), {243        className: (search_bar_module_default()).icon,244        width: "25px"245      }), /*#__PURE__*/jsx_runtime_.jsx("input", {246        id: "searchTerm",247        type: "text",248        placeholder: "Search...",249        required: true250      }), /*#__PURE__*/jsx_runtime_.jsx(SearchList, {251        albums: searchResults,252        width: "25px"253      })]254    })255  });256}257;// CONCATENATED MODULE: external "@material-ui/icons/Close"258var Close_namespaceObject = require("@material-ui/icons/Close");;259var Close_default = /*#__PURE__*/__webpack_require__.n(Close_namespaceObject);260;// CONCATENATED MODULE: external "@material-ui/icons/Menu"261var Menu_namespaceObject = require("@material-ui/icons/Menu");;262var Menu_default = /*#__PURE__*/__webpack_require__.n(Menu_namespaceObject);263// EXTERNAL MODULE: ./components/layout/header.module.css264var header_module = __webpack_require__(4005);265var header_module_default = /*#__PURE__*/__webpack_require__.n(header_module);266;// CONCATENATED MODULE: ./components/layout/header.js267function Header() {268  // Create useState vars for menu and search269  const {270    0: menu,271    1: setMenu272  } = (0,external_react_.useState)(false);273  const {274    0: search,275    1: setSearch276  } = (0,external_react_.useState)(false); // Show and hide menu277  const showMenu = () => setMenu(!menu); // Show and hide search278  const showSearch = () => setSearch(!search);279  return /*#__PURE__*/(0,jsx_runtime_.jsxs)("header", {280    className: (header_module_default()).navbar,281    children: [!menu && /*#__PURE__*/jsx_runtime_.jsx((Menu_default()), {282      className: (header_module_default()).menuIcon,283      onClick: showMenu,284      width: "25px"285    }), menu && /*#__PURE__*/jsx_runtime_.jsx((Close_default()), {286      className: (header_module_default()).menuIcon,287      onClick: showMenu,288      width: "25px"289    }), /*#__PURE__*/jsx_runtime_.jsx("div", {290      className: (header_module_default()).navlinksDesktop,291      children: /*#__PURE__*/jsx_runtime_.jsx(Menu, {292        children: /*#__PURE__*/jsx_runtime_.jsx(DropdownMenu, {})293      })294    }), menu && /*#__PURE__*/jsx_runtime_.jsx(Menu, {295      className: (header_module_default()).navlinksMobile,296      children: /*#__PURE__*/jsx_runtime_.jsx(DropdownMenu, {})297    }), /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {298      href: "/",299      children: /*#__PURE__*/jsx_runtime_.jsx("a", {300        className: (header_module_default()).logo,301        children: /*#__PURE__*/jsx_runtime_.jsx("div", {302          className: (header_module_default()).logoIcon,303          children: /*#__PURE__*/jsx_runtime_.jsx(next_image.default, {304            src: "/images/logo/logo.png",305            alt: "Beatly Music Icon",306            width: 166,307            height: 45308          })309        })310      })311    }), /*#__PURE__*/jsx_runtime_.jsx("div", {312      className: (header_module_default()).searchDesktop,313      children: /*#__PURE__*/jsx_runtime_.jsx(SearchBar, {})314    }), search && /*#__PURE__*/jsx_runtime_.jsx(SearchBar, {315      className: (header_module_default()).searchActive316    }), !search && /*#__PURE__*/jsx_runtime_.jsx((Search_default()), {317      className: (header_module_default()).searchIcon,318      onClick: showSearch,319      width: "25px"320    }), search && /*#__PURE__*/jsx_runtime_.jsx((Close_default()), {321      className: (header_module_default()).searchIcon,322      onClick: showSearch,323      width: "25px"324    })]325  });326}327// EXTERNAL MODULE: ./components/layout/footer.module.css328var footer_module = __webpack_require__(222);329var footer_module_default = /*#__PURE__*/__webpack_require__.n(footer_module);330;// CONCATENATED MODULE: ./components/layout/footer.js331function Footer() {332  return /*#__PURE__*/(0,jsx_runtime_.jsxs)("footer", {333    children: [/*#__PURE__*/jsx_runtime_.jsx("hr", {334      className: (footer_module_default()).divider335    }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {336      className: (footer_module_default()).navigation,337      children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)("section", {338        className: (footer_module_default()).links,339        children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {340          className: (footer_module_default()).pages,341          children: [/*#__PURE__*/jsx_runtime_.jsx("h3", {342            children: "Pages"343          }), /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {344            href: "/home",345            children: /*#__PURE__*/jsx_runtime_.jsx("p", {346              className: (footer_module_default()).footerItem,347              children: "Home"348            })349          }), /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {350            href: "/about",351            children: /*#__PURE__*/jsx_runtime_.jsx("p", {352              className: (footer_module_default()).footerItem,353              children: "About"354            })355          }), /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {356            href: "/learn",357            children: /*#__PURE__*/jsx_runtime_.jsx("p", {358              className: (footer_module_default()).footerItem,359              children: "Learn"360            })361          })]362        }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {363          className: (footer_module_default()).socials,364          children: [/*#__PURE__*/jsx_runtime_.jsx("h3", {365            children: "Socials"366          }), /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {367            href: "https://www.twitter.com/BeatlyMusic/",368            passHref: true,369            children: /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {370              className: (footer_module_default()).socialLink,371              children: [/*#__PURE__*/jsx_runtime_.jsx(next_image.default, {372                src: "/social-media-icons/twitter.svg",373                alt: "Twitter icon",374                width: 20,375                height: 20376              }), /*#__PURE__*/jsx_runtime_.jsx("p", {377                children: "Twitter"378              })]379            })380          }), /*#__PURE__*/jsx_runtime_.jsx(next_link.default, {381            href: "https://www.instagram.com/beatly.music/",382            passHref: true,383            children: /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {384              className: (footer_module_default()).socialLink,385              children: [/*#__PURE__*/jsx_runtime_.jsx(next_image.default, {386                src: "/social-media-icons/discord.svg",387                alt: "Discord icon",388                width: 20,389                height: 20390              }), /*#__PURE__*/jsx_runtime_.jsx("p", {391                children: "Discord"392              })]393            })394          })]395        })]396      }), /*#__PURE__*/jsx_runtime_.jsx("section", {397        className: (footer_module_default()).missionStatement,398        children: /*#__PURE__*/jsx_runtime_.jsx("p", {399          children: "Our mission is to provide a free, world-class education to anyone, anywhere."400        })401      })]402    }), /*#__PURE__*/jsx_runtime_.jsx("hr", {403      className: (footer_module_default()).dividerTwo404    }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("section", {405      className: (footer_module_default()).copyright,406      children: [/*#__PURE__*/jsx_runtime_.jsx(next_image.default, {407        src: "/images/logo/logo.png",408        alt: "Logo",409        width: 130,410        height: 37411      }), /*#__PURE__*/jsx_runtime_.jsx("h3", {412        children: "Copyright \xA9 2022"413      })]414    })]415  });416}417// EXTERNAL MODULE: ./components/layout/layout.module.css418var layout_module = __webpack_require__(2287);419var layout_module_default = /*#__PURE__*/__webpack_require__.n(layout_module);420;// CONCATENATED MODULE: ./components/layout/layout.js421function Layout(props) {422  // Create useState var for the page url423  const {424    0: pageURL,425    1: setPageURL426  } = (0,external_react_.useState)(); // Get href of page427  (0,external_react_.useEffect)(() => {428    setPageURL(window.location.href);429  });430  return /*#__PURE__*/(0,jsx_runtime_.jsxs)(external_react_.Fragment, {431    children: [/*#__PURE__*/jsx_runtime_.jsx("header", {432      className: (layout_module_default()).header,433      children: /*#__PURE__*/jsx_runtime_.jsx(Header, {})434    }, pageURL), /*#__PURE__*/jsx_runtime_.jsx("main", {435      className: (layout_module_default()).body,436      children: props.children437    }), /*#__PURE__*/jsx_runtime_.jsx(Footer, {438      className: (layout_module_default()).bottom439    })]440  });441}442// EXTERNAL MODULE: external "next/head"443var head_ = __webpack_require__(701);444var head_default = /*#__PURE__*/__webpack_require__.n(head_);445;// CONCATENATED MODULE: ./pages/_app.js446function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }447function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }448function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }449function MyApp({450  Component,451  pageProps452}) {453  const isProduction = true;454  if (isProduction) {455    const router = (0,router_.useRouter)();456    (0,external_react_.useEffect)(() => {457      const handleRouteChange = url => {458        gtag/* pageview */.LV(url);459      };460      router.events.on("routeChangeComplete", handleRouteChange);461      return () => {462        router.events.off("routeChangeComplete", handleRouteChange);463      };464    }, [router.events]);465  }466  return /*#__PURE__*/(0,jsx_runtime_.jsxs)(Layout, {467    children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)((head_default()), {468      children: [/*#__PURE__*/jsx_runtime_.jsx("meta", {469        name: "viewport",470        content: "initial-scale=1.0, width=device-width"471      }), /*#__PURE__*/jsx_runtime_.jsx("meta", {472        charSet: "UTF-8"473      }), /*#__PURE__*/jsx_runtime_.jsx("link", {474        rel: "apple-touch-icon",475        sizes: "180x180",476        href: "/favicons/apple-touch-icon.png"477      }), /*#__PURE__*/jsx_runtime_.jsx("link", {478        rel: "icon",479        type: "image/png",480        sizes: "32x32",481        href: "/favicons/favicon-32x32.png"482      }), /*#__PURE__*/jsx_runtime_.jsx("link", {483        rel: "icon",484        type: "image/png",485        sizes: "16x16",486        href: "/favicons/favicon-16x16.png"487      }), /*#__PURE__*/jsx_runtime_.jsx("link", {488        rel: "manifest",489        href: "/favicons/site.webmanifest"490      })]491    }), /*#__PURE__*/jsx_runtime_.jsx(Component, _objectSpread({}, pageProps))]492  });493}494/* harmony default export */ var _app = (MyApp);495/***/ }),496/***/ 2487:497/***/ (function(module) {498// Exports499module.exports = {500	"dropdown": "dropdown-menu_dropdown__1zbl_",501	"menuItem": "dropdown-menu_menuItem__2Voe2"502};503/***/ }),504/***/ 222:505/***/ (function(module) {...

[slug].js

Source:[slug].js

...35    children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {36      className: (course_module_default()).coursePreview,37      children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)("section", {38        className: (course_module_default()).cover,39        children: [/*#__PURE__*/jsx_runtime_.jsx("img", {40          src: cover41        }), /*#__PURE__*/jsx_runtime_.jsx("div", {42          className: (course_module_default()).playBtn,43          children: /*#__PURE__*/jsx_runtime_.jsx(next_image.default, {44            src: "/play.svg",45            width: 45,46            height: 4547          })48        })]49      }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("section", {50        className: (course_module_default()).text,51        children: [/*#__PURE__*/jsx_runtime_.jsx("h2", {52          children: title53        }), /*#__PURE__*/jsx_runtime_.jsx("h5", {54          children: `${lessons.length} sections - 3 hours of videos`55        }), /*#__PURE__*/jsx_runtime_.jsx("p", {56          children: description57        })]58      })]59    }), /*#__PURE__*/jsx_runtime_.jsx("hr", {60      className: (course_module_default()).divider61    }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {62      className: (course_module_default()).lessons,63      children: [/*#__PURE__*/jsx_runtime_.jsx("h5", {64        children: `${lessons.length} lessons`65      }), /*#__PURE__*/jsx_runtime_.jsx("p", {66        children: "All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way."67      })]68    })]69  });70}71// EXTERNAL MODULE: ./components/course/lesson-row.module.css72var lesson_row_module = __webpack_require__(9821);73var lesson_row_module_default = /*#__PURE__*/__webpack_require__.n(lesson_row_module);74;// CONCATENATED MODULE: ./components/course/lesson-row.js75function LessonRow({76  index,77  lesson78}) {79  return /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {80    className: (lesson_row_module_default()).container,81    children: [/*#__PURE__*/jsx_runtime_.jsx("section", {82      className: (lesson_row_module_default()).circle,83      children: /*#__PURE__*/jsx_runtime_.jsx("p", {84        className: (lesson_row_module_default()).inner,85        children: index + 186      })87    }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("section", {88      className: (lesson_row_module_default()).text,89      children: [/*#__PURE__*/jsx_runtime_.jsx("h5", {90        children: lesson.title91      }), /*#__PURE__*/jsx_runtime_.jsx("p", {92        children: lesson.description93      })]94    }), /*#__PURE__*/jsx_runtime_.jsx("section", {95      className: (lesson_row_module_default()).timeBackground,96      children: /*#__PURE__*/jsx_runtime_.jsx("p", {97        className: (lesson_row_module_default()).length,98        children: lesson.length99      })100    })]101  });102}103// EXTERNAL MODULE: ./components/course/lessons-container.module.css104var lessons_container_module = __webpack_require__(4977);105var lessons_container_module_default = /*#__PURE__*/__webpack_require__.n(lessons_container_module);106;// CONCATENATED MODULE: ./components/course/lessons-container.js107function LessonsContainer({108  lessons109}) {110  const half = Math.ceil(lessons.length / 2);111  const firstHalf = lessons.slice(0, half);112  const secondHalf = lessons.slice(-half);113  return /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {114    className: (lessons_container_module_default()).container,115    children: [/*#__PURE__*/jsx_runtime_.jsx("section", {116      children: firstHalf.map((lesson, index) => {117        return /*#__PURE__*/jsx_runtime_.jsx(LessonRow, {118          index: index,119          lesson: lesson120        }, lesson.id);121      })122    }), /*#__PURE__*/jsx_runtime_.jsx("section", {123      children: secondHalf.map((lesson, index) => {124        return /*#__PURE__*/jsx_runtime_.jsx(LessonRow, {125          index: index + half,126          lesson: lesson127        }, lesson.id);128      })129    })]130  });131}132// EXTERNAL MODULE: external "next/router"133var router_ = __webpack_require__(6731);134// EXTERNAL MODULE: external "react"135var external_react_ = __webpack_require__(9297);136;// CONCATENATED MODULE: ./pages/courses/[slug].js137function CoursePage({138  course139}) {140  const router = (0,router_.useRouter)();141  if (router.isFallback) {142    return /*#__PURE__*/jsx_runtime_.jsx("div", {143      children: "Loading..."144    });145  }146  const sampleDescription = `Welcome to our course on ${course}. In this course we'll start off with a basic intro to the subject and then dive into harder more complex problems at the end. With this course, we'll take you from zero to hero in only a couple hours.`;147  const sampleLessons = [{148    id: 1,149    title: "Lesson 1",150    description: "Dive into the subject",151    length: "10:45"152  }, {153    id: 2,154    title: "Lesson 2",155    description: "In depth graphing",156    length: "9:55"157  }, {158    id: 3,159    title: "Lesson 3",160    description: "Complex math problems",161    length: "12:20"162  }, {163    id: 4,164    title: "Lesson 4",165    description: "Wrapping up the course",166    length: "14:40"167  }];168  return /*#__PURE__*/(0,jsx_runtime_.jsxs)(external_react_.Fragment, {169    children: [/*#__PURE__*/(0,jsx_runtime_.jsxs)((head_default()), {170      children: [/*#__PURE__*/jsx_runtime_.jsx("title", {171        children: "Leap Education | Math Course"172      }), /*#__PURE__*/jsx_runtime_.jsx("meta", {173        name: "description",174        content: "Learn college level math"175      })]176    }), /*#__PURE__*/(0,jsx_runtime_.jsxs)("div", {177      children: [/*#__PURE__*/jsx_runtime_.jsx(CourseHeader, {178        cover: "/images/covers/math.png",179        title: course,180        description: sampleDescription,181        lessons: sampleLessons182      }), /*#__PURE__*/jsx_runtime_.jsx(LessonsContainer, {183        lessons: sampleLessons184      })]185    })]186  });187} // This function gets called at build time188async function getStaticPaths() {189  return {190    paths: [{191      params: {192        slug: "Calculus 1"193      }194    }, {195      params: {196        slug: "Calculus 2"...

jsx-a11y.js

Source:jsx-a11y.js

1module.exports = {2  rules: {3    // "jsx-a11y/accessible-emoji": "off",4    // 'jsx-a11y/alt-text': 'off',5    // "jsx-a11y/anchor-has-content": "off",6    // "jsx-a11y/anchor-is-valid": "off",7    // "jsx-a11y/aria-activedescendant-has-tabindex": "off",8    // "jsx-a11y/aria-props": "off",9    // "jsx-a11y/aria-proptypes": "off",10    // "jsx-a11y/aria-role": "off",11    // "jsx-a11y/aria-unsupported-elements": "off",12    // "jsx-a11y/autocomplete-valid": "off",13    // "jsx-a11y/click-events-have-key-events": "off",14    // "jsx-a11y/control-has-associated-label": "off",15    // "jsx-a11y/heading-has-content": "off",16    // "jsx-a11y/html-has-lang": "off",17    //   'jsx-a11y/iframe-has-title': 'off',18    // "jsx-a11y/img-redundant-alt": "off",19    // "jsx-a11y/interactive-supports-focus": "off",20    // "jsx-a11y/label-has-associated-control": "off",21    // "jsx-a11y/label-has-for": "off",22    // "jsx-a11y/lang": "off",23    // "jsx-a11y/media-has-caption": "off",24    // "jsx-a11y/mouse-events-have-key-events": "off",25    // "jsx-a11y/no-access-key": "off",26    // "jsx-a11y/no-autofocus": "off",27    // "jsx-a11y/no-distracting-elements": "off",28    // "jsx-a11y/no-interactive-element-to-noninteractive-role": "off",29    // "jsx-a11y/no-noninteractive-element-interactions": "off",30    // "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",31    // "jsx-a11y/no-noninteractive-tabindex": "off",32    // "jsx-a11y/no-onchange": "off",33    // "jsx-a11y/no-redundant-roles": "off",34    // "jsx-a11y/no-static-element-interactions": "off",35    // "jsx-a11y/role-has-required-aria-props": "off",36    // "jsx-a11y/role-supports-aria-props": "off",37    // "jsx-a11y/scope": "off",38    // "jsx-a11y/tabindex-no-positive": "off",39  },...

Using AI Code Generation

1import { configure } from '@storybook/react';2const req = require.context('../src', true, /.stories.js$/);3function loadStories() {4  req.keys().forEach(filename => req(filename));5}6configure(loadStories, module);7import { configure, addDecorator } from '@storybook/react';8import { withInfo } from '@storybook/addon-info';9const req = require.context('../src', true, /.stories.js$/);10function loadStories() {11  req.keys().forEach(filename => req(filename));12}13addDecorator(withInfo);14configure(loadStories, module);15import { configure } from '@storybook/react';16const req = require.context('../src', true, /.stories.js$/);17function loadStories() {18  req.keys().forEach(filename => req(filename));19}20configure(loadStories, module);21import { configure, addDecorator } from '@storybook/react';22import { withInfo } from '@storybook/addon-info';23const req = require.context('../src', true, /.stories.js$/);24function loadStories() {25  req.keys().forEach(filename => req(filename));26}27addDecorator(withInfo);28configure(loadStories, module);29import { configure } from '@storybook/react';30const req = require.context('../src', true, /.stories.js$/);31function loadStories() {32  req.keys().forEach(filename => req(filename));33}34configure(loadStories, module);35import { configure, addDecorator } from '@storybook/react';36import { withInfo } from '@storybook/addon-info';

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withKnobs, text } from '@storybook/addon-knobs/react';4import { withInfo } from '@storybook/addon-info';5import { withNotes } from '@storybook/addon-notes';6import { jsxDecorator } from 'storybook-addon-jsx';7import { withReadme } from 'storybook-readme';8import { action } from '@storybook/addon-actions';9import { linkTo } from '@storybook/addon-links';10import MyComponent from './MyComponent';11import readme from './MyComponent.md';12storiesOf('MyComponent', module)13  .addDecorator(withKnobs)14  .addDecorator(jsxDecorator)15  .addDecorator(withInfo)16  .addDecorator(withReadme(readme))17  .addDecorator(withNotes)18  .add('with text', () => (19    <MyComponent onClick={action('clicked')} text={text('Text', 'Hello Button')} />20  .add('with some emoji', () => (21    <MyComponent onClick={action('clicked')} text={text('Text', '😀 😎 👍 💯')} />22  .add('with some linkTo', () => (23    <MyComponent onClick={linkTo('Button', 'with some emoji')} text={text('Text', 'Go to "with some emoji"')} />24  ));25import React from 'react';26import PropTypes from 'prop-types';27const MyComponent = ({ text, onClick }) => (28  <button onClick={onClick}>29    {text}30);31MyComponent.propTypes = {32};33MyComponent.defaultProps = {34  onClick: () => {},35};36export default MyComponent;37import MyComponent from './MyComponent';38| onClick | func | () => {} | Function to call when the button is clicked |

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withRoot } from 'storybook-root-decorator';3addDecorator(withRoot);4import { addDecorator } from '@storybook/react';5import { render } from 'storybook-root-decorator';6addDecorator(render);7import { addDecorator } from '@storybook/react';8import { renderWithTheme } from 'storybook-root-decorator';9addDecorator(renderWithTheme);10import { addDecorator } from '@storybook/react';11import { renderWithThemeAndI18n } from 'storybook-root-decorator';12addDecorator(renderWithThemeAndI18n);13import { addDecorator } from '@storybook/react';14import { renderWithThemeAndI18nAndRouter } from 'storybook-root-decorator';15addDecorator(renderWithThemeAndI18nAndRouter);16import { addDecorator } from '@storybook/react';17import { renderWithThemeAndI18nAndRouterAndStore } from 'storybook-root-decorator';18addDecorator(renderWithThemeAndI18nAndRouterAndStore);19import { addDecorator } from '@storybook/react';20import { renderWithThemeAndI18nAndRouterAndStoreAndProviders } from 'storybook-root-decorator';21addDecorator(renderWithThemeAndI18nAndRouterAndStoreAndProviders);22import { addDecorator } from '@storybook/react';23import { renderWithThemeAndI18nAndRouterAndStoreAndProvidersAndApollo } from 'storybook-root-decorator';24addDecorator(renderWithThemeAndI18nAndRouterAndStoreAndProvidersAndApollo);25import

Using AI Code Generation

1import { configure } from '@storybook/react';2import requireContext from 'require-context.macro';3import { addParameters } from '@storybook/react';4import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';5import { withInfo } from '@storybook/addon-info';6import { withKnobs } from '@storybook/addon-knobs';7import { withA11y } from '@storybook/addon-a11y';8import { withTests } from '@storybook/addon-jest';9import results from '../.jest-test-results.json';10import './storybook.scss';11addParameters({12  viewport: {13  },14});15const req = requireContext('../src', true, /\.stories\.js$/);16function loadStories() {17  req.keys().forEach(filename => req(filename));18}19configure(loadStories, module);20addDecorator(withA11y);21addDecorator(withKnobs);22addDecorator(withInfo);23addDecorator(withTests({ results }));24-   [a11y](

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withRoot } from 'storybook-root-decorator';3import React from 'react';4import { ThemeProvider } from 'styled-components';5import theme from '../src/theme';6addDecorator(withRoot(<ThemeProvider theme={theme} />));7import { configure } from '@storybook/react';8import '../src/index.css';9const req = require.context('../src', true, /\.stories\.js$/);10function loadStories() {11  req.keys().forEach(filename => req(filename));12}13configure(loadStories, module);

Using AI Code Generation

1import { jsxDecorator } from 'storybook-addon-jsx';2addDecorator(jsxDecorator);3configure(require.context('../src', true, /\.stories\.js$/), module);4setAddon(JSXAddon);5addDecorator(withKnobs);6addDecorator(withInfo);7addDecorator(withA11y);8addDecorator(withOptions({

Using AI Code Generation

1import { jsxDecorator } from 'storybook-addon-jsx';2addDecorator(jsxDecorator);3import { configure } from '@storybook/react';4configure(require.context('../src', true, /\.stories\.js$/), module);5import { configure, addDecorator } from '@storybook/react';6import { withKnobs } from '@storybook/addon-knobs';7import { jsxDecorator } from 'storybook-addon-jsx';8addDecorator(jsxDecorator);9addDecorator(withKnobs);10configure(require.context('../src', true, /\.stories\.js$/), module);11import { jsxDecorator } from 'storybook-addon-jsx';12addDecorator(jsxDecorator);13import { configure } from '@storybook/react';14configure(require.context('../src', true, /\.stories\.js$/), module);15import { configure, addDecorator } from '@storybook/react';16import { withKnobs } from '@storybook/addon-knobs';17import { jsxDecorator } from 'storybook-addon-jsx';18addDecorator(jsxDecorator);19addDecorator(withKnobs);20configure(require.context('../src', true, /\.stories\.js$/), module);

Using AI Code Generation

1import initStoryshots from '@storybook/addon-storyshots';2initStoryshots();3"scripts": {4},5"scripts": {6},7import React from 'react';8import { action } from '@storybook/addon-actions';9import { Button } from '@storybook/react/demo';10export default {11};12export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;13export const Emoji = () => (14  <Button onClick={action('clicked')}>15);16Emoji.story = {17};

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.