@jetbrains/kotlin-web-site-ui 4.0.0-alpha.0 → 4.0.0-alpha.3

package/out/components/top-menu/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,3 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -37,45 +36,34 @@ const DropdownMenu = ({
 
   const handleClick = () => setIsExpanded(!isExpanded);
 
-  return jsxs(Fragment, {
-    children: [jsxs("div", Object.assign({
-      className: classNames(styles.dropdownMenu, {
-        [styles.dropdownMenuExpanded]: isExpanded
-      }),
-      onClick: handleClick
-    }, {
-      children: [jsxs("button", Object.assign({
-        className: classNames(styles.button, textCn('rs-text-2')),
-        "aria-haspopup": "true"
-      }, {
-        children: [jsx("span", {
-          children: activeItem.title
-        }, void 0), jsx(SvgArrowDropdownIcon, {
-          className: styles.icon
-        }, void 0)]
-      }), void 0), jsx("nav", Object.assign({
-        className: classNames(styles.dropdownList, {
-          [styles.dropdownListDarkTheme]: theme === 'dark'
-        })
-      }, {
-        children: _items.map((item, index) => jsx("a", Object.assign({
-          href: item.url,
-          className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
-            [styles.dropdownItemActive]: index === _activeIndex
-          }),
-          onClick: event => linkHandler?.(event, item.url),
-          target: item.isExternal ? '_blank' : undefined
-        }, {
-          children: item.title
-        }), item.url))
-      }), void 0)]
-    }), void 0), !!portalRoot && ReactDOM.createPortal(jsx("div", {
-      className: classNames(styles.overlay, {
-        [styles.overlayVisible]: isExpanded
-      }),
-      onClick: handleClick
-    }, void 0), portalRoot)]
-  }, void 0);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: classNames(styles.dropdownMenu, {
+      [styles.dropdownMenuExpanded]: isExpanded
+    }),
+    onClick: handleClick
+  }, React__default.createElement("button", {
+    className: classNames(styles.button, textCn('rs-text-2')),
+    "aria-haspopup": "true"
+  }, React__default.createElement("span", null, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+    className: styles.icon
+  })), React__default.createElement("nav", {
+    className: classNames(styles.dropdownList, {
+      [styles.dropdownListDarkTheme]: theme === 'dark'
+    })
+  }, _items.map((item, index) => React__default.createElement("a", {
+    key: item.url,
+    href: item.url,
+    className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
+      [styles.dropdownItemActive]: index === _activeIndex
+    }),
+    onClick: event => linkHandler?.(event, item.url),
+    target: item.isExternal ? '_blank' : undefined
+  }, item.title)))), !!portalRoot && ReactDOM.createPortal(React__default.createElement("div", {
+    className: classNames(styles.overlay, {
+      [styles.overlayVisible]: isExpanded
+    }),
+    onClick: handleClick
+  }), portalRoot));
 };
 
 export { DropdownMenu };

package/out/components/top-menu/horizontal-menu/horizontal-menu.js

@@ -1,5 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import classNames from 'classnames';
 import styles from './horizontal-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
@@ -11,21 +10,19 @@ const HorizontalMenuItem = ({
 }) => {
   const textCn = useTextStyles();
   const handleLink = useCallback(event => linkHandler(event, item.url), [item]);
-  return isActive ? jsx("span", Object.assign({
+  return isActive ? React__default.createElement("span", {
+    key: item.url,
     className: styles.itemActive
-  }, {
-    children: item.title
-  }), item.url) : jsx("a", Object.assign({
+  }, item.title) : React__default.createElement("a", {
     href: item.url,
+    key: item.url,
     className: classNames(styles.item, textCn('rs-link', {
       hardness: 'average',
       mode: 'clear'
     })),
     onClick: handleLink,
     target: item.isExternal ? '_blank' : undefined
-  }, {
-    children: item.title
-  }), item.url);
+  }, item.title);
 };
 
 const HorizontalMenu = ({
@@ -34,15 +31,14 @@ const HorizontalMenu = ({
   linkHandler
 }) => {
   const textCn = useTextStyles();
-  return jsx("nav", Object.assign({
+  return React__default.createElement("nav", {
     className: classNames(styles.horizontalMenu, textCn('rs-text-2'))
-  }, {
-    children: items.map((item, index) => jsx(HorizontalMenuItem, {
-      isActive: index === activeIndex,
-      item: item,
-      linkHandler: linkHandler
-    }, item.url))
-  }), void 0);
+  }, items.map((item, index) => React__default.createElement(HorizontalMenuItem, {
+    key: item.url,
+    isActive: index === activeIndex,
+    item: item,
+    linkHandler: linkHandler
+  })));
 };
 
 export { HorizontalMenu };

package/out/components/top-menu/top-menu.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import { useTheme } from '@rescui/ui-contexts';
 import classNames from 'classnames';
 import styles from './top-menu.module.pcss.js';
@@ -20,32 +20,28 @@ const TopMenu = ({
 }) => {
   const theme = useTheme();
   const textCn = useTextStyles();
-  return jsxs("div", Object.assign({
+  return React__default.createElement("div", {
     className: classNames(styles.topMenu, className, {
       [styles.topMenuDarkTheme]: theme === 'dark'
     }),
     ref: forwardedRef
-  }, {
-    children: [jsx("a", Object.assign({
-      href: homeUrl,
-      className: classNames(styles.logo, textCn('rs-h3')),
-      onClick: event => linkHandler(event, homeUrl)
-    }, {
-      children: title
-    }), void 0), jsx(DropdownMenu, {
-      items: items,
-      activeIndex: activeIndex,
-      linkHandler: linkHandler,
-      title: title,
-      mobileTitle: mobileTitle,
-      homeUrl: homeUrl,
-      mobileOverview: mobileOverview
-    }, void 0), jsx(HorizontalMenu, {
-      items: items,
-      activeIndex: activeIndex,
-      linkHandler: linkHandler
-    }, void 0), children]
-  }), void 0);
+  }, React__default.createElement("a", {
+    href: homeUrl,
+    className: classNames(styles.logo, textCn('rs-h3')),
+    onClick: event => linkHandler(event, homeUrl)
+  }, title), React__default.createElement(DropdownMenu, {
+    items: items,
+    activeIndex: activeIndex,
+    linkHandler: linkHandler,
+    title: title,
+    mobileTitle: mobileTitle,
+    homeUrl: homeUrl,
+    mobileOverview: mobileOverview
+  }), React__default.createElement(HorizontalMenu, {
+    items: items,
+    activeIndex: activeIndex,
+    linkHandler: linkHandler
+  }), children);
 };
 
 export { TopMenu };

package/out/components/typography/index.css

@@ -18,7 +18,7 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
-:global .ktl-hero {
+.ktl-hero {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: normal;
@@ -28,20 +28,20 @@
         margin: 0;
     }
 
-:global .ktl-hero_theme_dark {
+.ktl-hero_theme_dark {
             color: #fff;
         }
 
 @media (min-width: 1200px) {
 
-:global .ktl-hero {
+.ktl-hero {
             font-size: 64px;
             line-height: 72px;
             letter-spacing: -3px
     }
         }
 
-:global .ktl-h1 {
+.ktl-h1 {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: normal;
@@ -51,20 +51,20 @@
         margin: 0;
     }
 
-:global .ktl-h1_theme_dark {
+.ktl-h1_theme_dark {
             color: #fff;
         }
 
 @media (min-width: 1200px) {
 
-:global .ktl-h1 {
+.ktl-h1 {
             font-size: 43px;
             line-height: 48px
     }
 
         }
 
-:global .ktl-h2 {
+.ktl-h2 {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: 500;
@@ -75,13 +75,13 @@
 
     }
 
-:global .ktl-h2_theme_dark {
+.ktl-h2_theme_dark {
             color: #fff;
         }
 
 @media (min-width: 1200px) {
 
-:global .ktl-h2 {
+.ktl-h2 {
             font-size: 31px;
             line-height: 40px
 
@@ -89,7 +89,7 @@
 
         }
 
-:global .ktl-subtitle {
+.ktl-subtitle {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: normal;
@@ -98,19 +98,19 @@
         margin: 0;
     }
 
-:global .ktl-subtitle_theme_dark {
+.ktl-subtitle_theme_dark {
             color: #fff;
         }
 
 @media (min-width: 1200px) {
 
-:global .ktl-subtitle {
+.ktl-subtitle {
             font-size: 31px;
             line-height: 40px
     }
         }
 
-:global .ktl-h3 {
+.ktl-h3 {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: 600;
@@ -119,11 +119,11 @@
         margin: 0;
     }
 
-:global .ktl-h3_theme_dark {
+.ktl-h3_theme_dark {
             color: #fff;
         }
 
-:global .ktl-h4 {
+.ktl-h4 {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: 600;
@@ -132,11 +132,11 @@
         margin: 0;
     }
 
-:global .ktl-h4_theme_dark {
+.ktl-h4_theme_dark {
             color: #fff;
         }
 
-:global .ktl-text-1 {
+.ktl-text-1 {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: normal;
@@ -145,11 +145,11 @@
         margin: 0;
     }
 
-:global .ktl-text-1_theme_dark {
+.ktl-text-1_theme_dark {
             color: #fff;
         }
 
-:global .ktl-text-2 {
+.ktl-text-2 {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: normal;
@@ -158,11 +158,11 @@
         margin: 0;
     }
 
-:global .ktl-text-2_theme_dark {
+.ktl-text-2_theme_dark {
             color: #fff;
         }
 
-:global .ktl-text-3 {
+.ktl-text-3 {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);
         font-weight: normal;
@@ -171,6 +171,6 @@
         margin: 0;
     }
 
-:global .ktl-text-3_theme_dark {
+.ktl-text-3_theme_dark {
             color: #fff;
         }

package/out/components/youtube-player/youtube-player.js

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import styles from './youtube-player.module.pcss.js';
 import SvgPlay24 from './play_24.svg.js';
@@ -108,7 +107,7 @@ const YoutubePlayer = ({
       }
     };
   }, [isAPILoaded, showVideo, startTime, id, mode]);
-  return jsxs("div", Object.assign({
+  return React__default.createElement("div", {
     ref: playerWrapperDivRef,
     onClick: e => {
       e.preventDefault();
@@ -119,34 +118,28 @@ const YoutubePlayer = ({
       [styles.showVideo]: showVideo
     }),
     style: wrapperStyles
-  }, {
-    children: [jsxs("div", Object.assign({
-      className: classNames(styles.preview, {
-        [styles.previewPlaylist]: !preview && !imgPreview && mode === YoutubePlayerMode.Playlist
-      })
-    }, {
-      children: [preview ? preview : imgPreview && jsx("img", {
-        src: imgPreview,
-        alt: previewImgAlt ? previewImgAlt : '',
-        className: styles.imagePreview
-      }, void 0), jsx("button", Object.assign({
-        type: "button",
-        className: classNames(styles.playButton, {
-          [styles.hide]: showVideo && !videoLoading,
-          [styles.playButtonWhite]: playButtonMode === YoutubePlayButtonMode.White,
-          [styles.playButtonBlack]: playButtonMode === YoutubePlayButtonMode.Black,
-          [styles.playButtonPrimary]: playButtonMode === YoutubePlayButtonMode.Primary
-        })
-      }, {
-        children: videoLoading ? jsx(SvgLoading24, {
-          className: styles.iconLoading
-        }, void 0) : jsx(SvgPlay24, {}, void 0)
-      }), void 0)]
-    }), void 0), jsx("div", {
-      className: styles.player,
-      ref: playerDivRef
-    }, void 0)]
-  }), void 0);
+  }, React__default.createElement("div", {
+    className: classNames(styles.preview, {
+      [styles.previewPlaylist]: !preview && !imgPreview && mode === YoutubePlayerMode.Playlist
+    })
+  }, preview ? preview : imgPreview && React__default.createElement("img", {
+    src: imgPreview,
+    alt: previewImgAlt ? previewImgAlt : '',
+    className: styles.imagePreview
+  }), React__default.createElement("button", {
+    type: "button",
+    className: classNames(styles.playButton, {
+      [styles.hide]: showVideo && !videoLoading,
+      [styles.playButtonWhite]: playButtonMode === YoutubePlayButtonMode.White,
+      [styles.playButtonBlack]: playButtonMode === YoutubePlayButtonMode.Black,
+      [styles.playButtonPrimary]: playButtonMode === YoutubePlayButtonMode.Primary
+    })
+  }, videoLoading ? React__default.createElement(SvgLoading24, {
+    className: styles.iconLoading
+  }) : React__default.createElement(SvgPlay24, null))), React__default.createElement("div", {
+    className: styles.player,
+    ref: playerDivRef
+  }));
 };
 
 export { YoutubePlayButtonMode, YoutubePlayer, YoutubePlayerMode };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.3",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -33,10 +33,13 @@
     "@rescui/ui-contexts": "0.x",
     "formik": "2.x",
     "react": ">= 16.8.6 < 18",
-    "react-dom": ">= 16.8.6 < 18"
+    "react-dom": ">= 16.8.6 < 18",
+    "react-swipeable-views": "0.x",
+    "sha.js": "2.x"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
@@ -97,6 +100,7 @@
     "postcss-loader": "^5.2.0",
     "postcss-mixins": "^7.0.3",
     "postcss-nested": "^5.0.5",
+    "postcss-remove-global": "^0.1.1",
     "prettier": "2.2.1",
     "query-string": "^7.0.1",
     "react": "^16.8.6",

package/out/components/header/menu-popup/menu-button/menu-button.pcss.js

@@ -1,2 +0,0 @@
-var styles = undefined;
-export { styles as default };