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

package/out/components/header/logo-large/logo-large.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './logo-large.module.pcss.js';
+import SvgKotlinLogoLarge from './kotlin-logo-large.svg.js';
+import classNames from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import { KOTLINLANG_URL } from '../consts.js';
+
+const LogoLarge = ({
+  productWebUrl,
+  className
+}) => {
+  const version = productWebUrl ? getProductVersion(productWebUrl) : null;
+  const textCn = useTextStyles();
+  return jsxs("div", Object.assign({
+    className: classNames(styles.container, className, textCn('rs-text-3', {
+      hardness: 'average'
+    }))
+  }, {
+    children: [jsx("a", Object.assign({
+      className: styles.link,
+      href: KOTLINLANG_URL,
+      "aria-label": "Kotlin Home Page"
+    }, {
+      children: jsx(SvgKotlinLogoLarge, {}, void 0)
+    }), void 0), version && jsx("a", Object.assign({
+      className: classNames(styles.versionTag),
+      href: productWebUrl,
+      target: "_blank"
+    }, {
+      children: version
+    }), void 0)]
+  }), void 0);
+};
+
+function getProductVersion(productWebUrl) {
+  const match = /v?\d+\.\d+\.\d+$/.exec(productWebUrl);
+  return match ? match[0] : null;
+}
+
+export { LogoLarge };

package/out/components/header/logo-large/logo-large.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "container": "ktl-logo-large-module_container_35w4p",
+  "link": "ktl-logo-large-module_link_AOGas",
+  "versionTag": "ktl-logo-large-module_version-tag_k12Hw"
+};
+export { styles as default };

package/out/components/header/logo-small/kotlin-logo-small.svg.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+var _radialGradient, _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const SvgKotlinLogoSmall = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, props), _radialGradient || (_radialGradient = /*#__PURE__*/React.createElement("radialGradient", {
+  id: "kotlin-logo-small_svg__a",
+  cx: 22.432,
+  cy: 3.493,
+  r: 21.679,
+  gradientTransform: "translate(-.19 .042) scale(.9998)",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: 0.003,
+  stopColor: "#e44857"
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: 0.469,
+  stopColor: "#c711e1"
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: 1,
+  stopColor: "#7f52ff"
+}))), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fill: "url(#kotlin-logo-small_svg__a)",
+  d: "M22.87 21.68H3.94V2.76h18.93l-9.66 9.32z"
+})));
+
+export { SvgKotlinLogoSmall as default };

package/out/components/header/logo-small/logo-small.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import SvgKotlinLogoSmall from './kotlin-logo-small.svg.js';
+import styles from './logo-small.module.pcss.js';
+import classNames from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import { KOTLINLANG_URL } from '../consts.js';
+
+const LogoSmall = ({
+  homeTitle,
+  homeUrl,
+  className
+}) => {
+  const textCn = useTextStyles();
+  return jsxs("div", Object.assign({
+    className: classNames(styles.logoSmall, className)
+  }, {
+    children: [jsx("a", Object.assign({
+      href: KOTLINLANG_URL,
+      className: styles.iconWrap
+    }, {
+      children: jsx(SvgKotlinLogoSmall, {
+        className: styles.icon
+      }, void 0)
+    }), void 0), jsx("a", Object.assign({
+      href: homeUrl,
+      className: classNames(styles.link, textCn('rs-h3'))
+    }, {
+      children: homeTitle
+    }), void 0)]
+  }), void 0);
+};
+
+export { LogoSmall };

package/out/components/header/logo-small/logo-small.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "logoSmall": "ktl-logo-small-module_logo-small_iGY12",
+  "link": "ktl-logo-small-module_link_SKXAa",
+  "iconWrap": "ktl-logo-small-module_icon-wrap_6hRnO",
+  "icon": "ktl-logo-small-module_icon_NyEog"
+};
+export { styles as default };

package/out/components/header/menu-popup/menu-button/close-icon.svg.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+var _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const SvgCloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 16,
+  height: 16,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M15.707 1.707 14.293.293 8 6.586 1.707.293.293 1.707 6.586 8 .293 14.293l1.414 1.414L8 9.414l6.293 6.293 1.414-1.414L9.414 8l6.293-6.293Z",
+  fill: "currentColor"
+})));
+
+export { SvgCloseIcon as default };

package/out/components/header/menu-popup/menu-button/hamburger-icon.svg.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+var _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const SvgHamburgerIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm16 6H4v2h16v-2Z",
+  fill: "currentColor"
+})));
+
+export { SvgHamburgerIcon as default };

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './menu-button.pcss.js';
+import classNames from 'classnames';
+import SvgHamburgerIcon from './hamburger-icon.svg.js';
+import SvgCloseIcon from './close-icon.svg.js';
+
+const MenuButton = ({
+  onClick,
+  isExpanded
+}) => {
+  return jsx("button", Object.assign({
+    type: "button",
+    className: classNames(styles.button),
+    "aria-haspopup": "true",
+    "aria-label": "Open the navigation",
+    onClick: onClick
+  }, {
+    children: isExpanded ? jsx(SvgCloseIcon, {}, void 0) : jsx(SvgHamburgerIcon, {}, void 0)
+  }), void 0);
+};
+
+export { MenuButton };

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

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

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

@@ -0,0 +1,104 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import styles from './menu-popup.module.pcss.js';
+import classNames from 'classnames';
+import { MenuButton } from './menu-button/menu-button.js';
+import { useTextStyles } from '@rescui/typography';
+import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
+
+const MenuListItem = ({
+  item,
+  level,
+  linkHandler
+}) => {
+  const Tag = item.url ? 'a' : 'span';
+  const style = {
+    '--level': level
+  };
+  const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
+  return jsx(Tag, Object.assign({}, item.url ? {
+    href: item.url,
+    onClick: handleClick
+  } : {}, {
+    className: classNames(styles.menuItem, {
+      [styles.menuItemRoot]: level === 0,
+      [styles.active]: item.isActive,
+      [styles.activeWithChild]: item.items && item.items.length
+    }),
+    style: style
+  }, {
+    children: item.title
+  }), void 0);
+};
+
+const MenuList = ({
+  items,
+  level,
+  linkHandler
+}) => {
+  return jsx(Fragment, {
+    children: items.map((item, i) => jsxs(Fragment$1, {
+      children: [jsx(MenuListItem, {
+        item: item,
+        level: level,
+        linkHandler: linkHandler
+      }, void 0), item.items && item.items.length > 0 && jsx(MenuList, {
+        items: item.items,
+        level: level + 1,
+        linkHandler: linkHandler
+      }, void 0)]
+    }, i))
+  }, void 0);
+};
+
+const MenuPopup = ({
+  items,
+  isExpanded,
+  setExpand,
+  headerRef,
+  linkHandler
+}) => {
+  const navRef = useRef(null);
+  const textCn = useTextStyles();
+  const [navStyle, setNavStyle] = useState({});
+  useEffect(() => {
+    return () => {
+      setExpand(false);
+      clearAllBodyScrollLocks();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (headerRef.current) {
+      setNavStyle({
+        top: headerRef.current.getBoundingClientRect().bottom
+      });
+    }
+  }, [isExpanded, headerRef]);
+  const handleClick = useCallback(() => {
+    if (navRef.current) {
+      isExpanded ? enableBodyScroll(navRef.current) : disableBodyScroll(navRef.current);
+    }
+
+    setExpand(!isExpanded);
+  }, [isExpanded, navRef]);
+  return jsxs(Fragment, {
+    children: [jsx(MenuButton, {
+      onClick: handleClick,
+      isExpanded: isExpanded
+    }, void 0), jsx("nav", Object.assign({
+      style: navStyle,
+      ref: navRef,
+      className: classNames(styles.menuPopup, textCn('rs-text-2'), {
+        [styles.menuPopupExpanded]: isExpanded
+      })
+    }, {
+      children: jsx(MenuList, {
+        items: items,
+        level: 0,
+        linkHandler: linkHandler
+      }, void 0)
+    }), void 0)]
+  }, void 0);
+};
+
+export { MenuPopup };

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

@@ -0,0 +1,9 @@
+var styles = {
+  "menuPopup": "ktl-menu-popup-module_menu-popup_Q68IE",
+  "menuItem": "ktl-menu-popup-module_menu-item_fPvF-",
+  "active": "ktl-menu-popup-module_active_iqTAj",
+  "activeWithChild": "ktl-menu-popup-module_active-with-child_tAzCG",
+  "menuItemRoot": "ktl-menu-popup-module_menu-item-root_gA9d2",
+  "menuPopupExpanded": "ktl-menu-popup-module_menu-popup-expanded_ggrp9"
+};
+export { styles as default };

package/out/components/header/nav-scheme.js

@@ -0,0 +1,135 @@
+import { PLAYGROUND_URL, KOTLINLANG_URL } from './consts.js';
+const SOLUTIONS_TITLE = 'Solutions';
+const MULTIPLATFORM_MOBILE_TITLE = 'Multiplatform Mobile';
+const MULTIPLATFORM_MOBILE_URL = `/lp/mobile/`;
+const SERVER_SIDE_TITLE = 'Server-side';
+const SERVER_SIDE_URL = `/lp/server-side/`;
+const WEB_FRONTEND_TITLE = 'Web frontend';
+const WEB_FRONTEND_URL = `/docs/js-overview.html`;
+const MULTIPLATFORM_OTHERS_TITLE = 'Multiplatform for other platforms';
+const MULTIPLATFORM_OTHERS_URL = '/docs/multiplatform.html';
+const DATA_SCIENCE_TITLE = 'Data science';
+const DATA_SCIENCE_URL = `/docs/data-science-overview.html`;
+const ANDROID_TITLE = 'Android';
+const ANDROID_URL = `/docs/android-overview.html`;
+const DOCS_TITLE = 'Docs';
+const DOCS_URL = `/docs/home.html`;
+const COMMUNITY_TITLE = 'Community';
+const COMMUNITY_URL = `/community/`;
+const TEACH_TITLE = 'Teach';
+const TEACH_URL = `/education/`;
+const PLAY_TITLE = 'Play';
+const PLAY_TITLE_FULL = 'Playground';
+const PLAY_URL = PLAYGROUND_URL;
+const PLAY_HANDSON_URL = `${PLAY_URL}hands-on`;
+const PLAY_HANDSON_TITLE = 'Hands-on';
+const PLAY_EXAMPLES_URL = `${PLAY_URL}byExample`;
+const PLAY_EXAMPLES_TITLE = 'Examples';
+const PLAY_KOANS_URL = `${PLAY_URL}koans`;
+const PLAY_KOANS_TITLE = 'Koans';
+const KOTLIN_DOCS_TITLE = 'Kotlin';
+const KOTLIN_DOCS_URL = `/docs/home.html`;
+const KMM_DOCS_TITLE = 'KMM';
+const KMM_DOCS_URL = `/docs/mobile/home.html`;
+const navScheme = [{
+  title: SOLUTIONS_TITLE,
+  url: null,
+  items: [{
+    title: MULTIPLATFORM_MOBILE_TITLE,
+    url: MULTIPLATFORM_MOBILE_URL
+  }, {
+    title: MULTIPLATFORM_OTHERS_TITLE,
+    url: MULTIPLATFORM_OTHERS_URL
+  }, {
+    title: SERVER_SIDE_TITLE,
+    url: SERVER_SIDE_URL
+  }, {
+    title: WEB_FRONTEND_TITLE,
+    url: WEB_FRONTEND_URL
+  }, {
+    title: DATA_SCIENCE_TITLE,
+    url: DATA_SCIENCE_URL
+  }, {
+    title: ANDROID_TITLE,
+    url: ANDROID_URL
+  }]
+}, {
+  title: DOCS_TITLE,
+  url: KOTLIN_DOCS_URL
+}, {
+  title: COMMUNITY_TITLE,
+  url: COMMUNITY_URL
+}, {
+  title: TEACH_TITLE,
+  url: TEACH_URL
+}, {
+  title: PLAY_TITLE,
+  url: null,
+  items: [{
+    title: PLAY_TITLE_FULL,
+    url: PLAY_URL
+  }, {
+    title: PLAY_HANDSON_TITLE,
+    url: PLAY_HANDSON_URL
+  }, {
+    title: PLAY_EXAMPLES_TITLE,
+    url: PLAY_EXAMPLES_URL
+  }, {
+    title: PLAY_KOANS_TITLE,
+    url: PLAY_KOANS_URL
+  }]
+}];
+
+function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground) {
+  return navScheme.map(({
+    title,
+    url,
+    items
+  }) => {
+    if (url && currentUrl) {
+      url = makeExternalUrl(url, currentUrl, !!isPlayground);
+    }
+
+    const item = {
+      title,
+      url
+    };
+    let isActive = isUrlActive(url, currentUrl);
+    item.items = items?.map(({
+      title,
+      url: childUrl
+    }) => {
+      if (childUrl && currentUrl) {
+        childUrl = makeExternalUrl(childUrl, currentUrl, !!isPlayground);
+      }
+
+      let childActive = isUrlActive(childUrl, currentUrl);
+
+      if (childActive) {
+        isActive = childActive;
+      }
+
+      return {
+        title,
+        url: childUrl,
+        isActive: childActive
+      };
+    }) ?? [];
+    item.isActive = isActive;
+    return item;
+  });
+}
+
+function makeExternalUrl(url, currentUrl, isPlayground) {
+  if (isPlayground) {
+    if (url.startsWith(PLAY_URL)) {
+      return url.replace(PLAY_URL, '/');
+    } else {
+      return `${KOTLINLANG_URL}${url}`;
+    }
+  }
+
+  return url;
+}
+
+export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };

package/out/components/header/search-button/search-button.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './search-button.module.pcss.js';
+import classNames from 'classnames';
+import SvgSearch from './search.svg.js';
+
+const SearchButton = ({
+  onClick,
+  isActive
+}) => {
+  return jsx("button", Object.assign({
+    type: "button",
+    className: classNames(styles.button, {
+      [styles.active]: isActive
+    }),
+    "aria-label": "Search",
+    onClick: onClick
+  }, {
+    children: jsx(SvgSearch, {}, void 0)
+  }), void 0);
+};
+
+export { SearchButton };

package/out/components/header/search-button/search-button.module.pcss.js

@@ -0,0 +1,5 @@
+var styles = {
+  "button": "ktl-search-button-module_button_YHJPv",
+  "active": "ktl-search-button-module_active_lUmdh"
+};
+export { styles as default };

package/out/components/header/search-button/search.svg.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+var _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const SvgSearch = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M15.847 6.861A6.99 6.99 0 0 0 9.587 3a6.997 6.997 0 1 0 4.186 12.601l6.106 6.106 1.414-1.414-6.107-6.106a6.99 6.99 0 0 0 .66-7.326ZM14.587 10a5 5 0 1 1-10.001 0 5 5 0 0 1 10 0Z",
+  fill: "currentColor"
+})));
+
+export { SvgSearch as default };

package/out/components/popup/index.css

@@ -0,0 +1,35 @@
+.ktl-popup-module_popup_kH56U {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: calc(100% - 32px);
+  min-height: calc(4 * 8px);
+  max-height: calc(100vh - 144px);
+  outline: none;
+  transform: translate(-50%, -50%);
+}
+
+  @media (min-width: 1024px) {.ktl-popup-module_popup_kH56U {
+    width: auto;
+    min-width: 70%;
+    max-width: calc(100% - 32px)
+}
+  }
+
+.ktl-popup-module_overlay_lHomr {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(39, 40, 44, 0.7);
+}
+
+.ktl-popup-module_close_Cvlga {
+  position: absolute !important;
+  top: -60px;
+  right: 0;
+}

package/out/components/popup/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+import { Popup } from './popup.js';
+export { Popup as default } from './popup.js';

package/out/components/popup/popup.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import ReactModal from 'react-modal';
+import { LayeringConsumer, LayeringProvider } from '@rescui/ui-contexts';
+import { CloseIcon, LoadingIcon } from '@rescui/icons';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
+import Button from '@rescui/button';
+import styles from './popup.module.pcss.js';
+
+const Popup = ({
+  isOpen,
+  children,
+  onRequestClose,
+  shouldCloseOnEsc = true,
+  shouldCloseOnOverlayClick = true,
+  busy = false,
+  showOuterCloseButton = false,
+  ariaHideApp = false,
+  ...restProps
+}) => {
+  return jsx(LayeringConsumer, {
+    children: ({
+      popupZIndex
+    }) => jsx(LayeringProvider, Object.assign({
+      baseLayer: "popup"
+    }, {
+      children: jsxs(ReactModal, Object.assign({
+        isOpen: isOpen,
+        className: styles.popup,
+        overlayClassName: styles.overlay,
+        onRequestClose: onRequestClose,
+        shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+        shouldCloseOnEsc: shouldCloseOnEsc
+      }, restProps, {
+        ariaHideApp: ariaHideApp,
+        style: {
+          overlay: {
+            zIndex: popupZIndex
+          }
+        }
+      }, {
+        children: [!busy && showOuterCloseButton && jsx(Button, {
+          mode: 'rock',
+          theme: 'light',
+          icon: jsx(CloseIcon, {}, void 0),
+          className: styles.close,
+          onClick: onRequestClose,
+          "data-test": "close-button"
+        }, void 0), busy ? jsx(LoadingIcon, {
+          size: "l",
+          theme: "dark",
+          mode: "rock",
+          "data-test": "loading-icon"
+        }, void 0) : children, jsx(RemoveScrollBar, {
+          gapMode: "margin"
+        }, void 0)]
+      }), void 0)
+    }), void 0)
+  }, void 0);
+};
+
+export { Popup };

package/out/components/popup/popup.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "popup": "ktl-popup-module_popup_kH56U",
+  "overlay": "ktl-popup-module_overlay_lHomr",
+  "close": "ktl-popup-module_close_Cvlga"
+};
+export { styles as default };