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

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.2",
+  "version": "4.1.0-alpha.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -17,12 +17,10 @@
   "scripts": {
     "codegeneration": "node ./scripts/build.js && yarn run copy-static",
     "copy-static": "copyfiles -f src/svg/*.svg out/svg",
-    "build": "webpack --mode production --devtool source-map",
-    "watch": "webpack --mode development --watch",
     "storybook": "yarn & start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "storybook-docs": "start-storybook --docs --no-manager-cache",
-    "release:ci": "npm run build && standard-version && git push --follow-tags origin master && npm publish"
+    "release:ci": "npm run codegeneration && standard-version && git push --follow-tags origin master && npm publish"
   },
   "peerDependencies": {
     "@rescui/checkbox": "0.x",
@@ -31,12 +29,17 @@
     "@rescui/tooltip": "0.x",
     "@rescui/typography": "0.x",
     "@rescui/ui-contexts": "0.x",
+    "algoliasearch": "4.x",
     "formik": "2.x",
     "react": ">= 16.8.6 < 18",
-    "react-dom": ">= 16.8.6 < 18"
+    "react-dom": ">= 16.8.6 < 18",
+    "react-outside-click-handler": "^1.3.0",
+    "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",
@@ -46,8 +49,9 @@
     "@rescui/checkbox": "^0.1.0",
     "@rescui/icons": "^0.2.0",
     "@rescui/input": "^0.1.2",
+    "@rescui/switcher": "^0.2.2",
     "@rescui/tooltip": "^0.1.2",
-    "@rescui/typography": "^0.3.0",
+    "@rescui/typography": "^0.7.3",
     "@rescui/ui-contexts": "^0.1.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -64,11 +68,13 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-modal": "^3.13.1",
+    "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/sha.js": "^2.4.0",
     "@types/youtube": "^0.0.45",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "algoliasearch": "^4.13.1",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
@@ -80,7 +86,6 @@
     "copyfiles": "^2.4.1",
     "core-js": "^3.10.0",
     "css-loader": "^5.2.0",
-    "csso-webpack-plugin": "^2.0.0-beta.3",
     "eslint": "^7.24.0",
     "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-import": "^2.22.1",
@@ -103,6 +108,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-modal": "^3.14.4",
+    "react-outside-click-handler": "^1.3.0",
     "react-remove-scroll-bar": "^2.2.0",
     "react-swipeable-views": "^0.14.0",
     "rollup": "^2.70.1",
@@ -112,7 +118,6 @@
     "sha.js": "^2.4.11",
     "standard-version": "^9.2.0",
     "svgo-loader": "^3.0.0",
-    "terser-webpack-plugin": "^5.1.1",
     "typescript": "^4.2.4",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",

package/out/components/header/header.js

@@ -1,68 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect } from 'react';
-import { ThemeProvider } from '@rescui/ui-contexts';
-import useResizeObserver from '@react-hook/resize-observer';
-import { LogoLarge } from './logo-large/logo-large.js';
-import styles from './header.module.pcss.js';
-import { getNavScheme } from './nav-scheme.js';
-import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
-import { SearchButton } from './search-button/search-button.js';
-import { MenuPopup } from './menu-popup/menu-popup.js';
-import { LogoSmall } from './logo-small/logo-small.js';
-import classNames from 'classnames';
-const MENU_POPUP_BREAKPOINT = 640;
-const Header = forwardRef(({
-  productWebUrl,
-  hasSearch = false,
-  onSearchClick,
-  currentUrl,
-  currentTitle,
-  className,
-  hasBorder = true,
-  dropdownTheme = 'dark',
-  linkHandler,
-  isPlayground,
-  isUrlActive
-}, forwardedRef) => {
-  const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
-  const [isMenuPopupVisible, setIsMenuPopupVisible] = useState(false);
-  const items = useMemo(() => getNavScheme(isUrlActive, currentUrl, isPlayground), [isUrlActive, currentUrl, isPlayground]);
-  const headerRef = useRef(null);
-  useImperativeHandle(forwardedRef, () => headerRef.current);
-  useLayoutEffect(() => {
-    setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
-  }, [headerRef]);
-  useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
-  return jsx(ThemeProvider, Object.assign({
-    theme: 'dark'
-  }, {
-    children: jsxs("header", Object.assign({
-      ref: headerRef,
-      className: classNames(styles.headerMenu, className, {
-        [styles.withMenuPopup]: menuPopupExpanded,
-        [styles.border]: hasBorder
-      })
-    }, {
-      children: [isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? jsx(LogoSmall, {
-        homeTitle: currentTitle,
-        homeUrl: currentUrl
-      }, void 0) : jsx(LogoLarge, {
-        productWebUrl: productWebUrl
-      }, void 0), !isMenuPopupVisible && jsx(HorizontalMenu, {
-        items: items,
-        theme: dropdownTheme,
-        linkHandler: linkHandler
-      }, void 0), jsx(SearchButton, {
-        onClick: onSearchClick,
-        isActive: hasSearch && !!onSearchClick
-      }, void 0), isMenuPopupVisible && jsx(MenuPopup, {
-        items: items,
-        setExpand: setMenuPopupExpanded,
-        isExpanded: menuPopupExpanded,
-        headerRef: headerRef,
-        linkHandler: linkHandler
-      }, void 0)]
-    }), void 0)
-  }), void 0);
-});
-export { Header };

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

@@ -1,110 +0,0 @@
-import { useState, useEffect, createElement } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import styles from './horizontal-menu.module.pcss.js';
-import { useTextStyles } from '@rescui/typography';
-
-const DropdownMenu = ({
-  items,
-  isExpanded,
-  alignRight,
-  linkHandler
-}) => {
-  const textCn = useTextStyles();
-  return jsx("ul", Object.assign({
-    className: classNames(styles.dropdownMenu, textCn('rs-text-2'), {
-      [styles.dropdownMenuExpanded]: isExpanded,
-      [styles.dropdownMenuAlignRight]: alignRight
-    })
-  }, {
-    children: items.map((item, key) => {
-      const Tag = !item.isActive && item.url ? 'a' : 'span';
-      return jsx("li", {
-        children: jsx(Tag, Object.assign({
-          className: classNames(styles.dropdownMenuItem, {
-            [styles.active]: item.isActive
-          })
-        }, item.url ? {
-          href: item.url,
-          onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
-        } : {}, {
-          children: item.title
-        }), void 0)
-      }, key);
-    })
-  }), void 0);
-};
-
-const HorizontalMenuItem = ({
-  item,
-  onMouseEnter,
-  onMouseLeave,
-  isExpanded,
-  isLast,
-  linkHandler
-}) => {
-  const Tag = item.isActive || !item.url ? 'span' : 'a';
-  const textCn = useTextStyles();
-
-  const handleEnter = () => onMouseEnter(item);
-
-  return jsxs("li", Object.assign({
-    className: styles.menuItemWrap,
-    onMouseEnter: handleEnter,
-    onMouseLeave: onMouseLeave
-  }, {
-    children: [createElement(Tag, Object.assign({}, item.url ? {
-      href: item.url,
-      onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
-    } : {}, {
-      key: item.title,
-      className: classNames(styles.menuItem, textCn('rs-text-2'), {
-        [styles.itemActive]: item.isActive,
-        [styles.expanded]: isExpanded && !!item.items?.length
-      })
-    }), item.title), !!item.items?.length && jsx(DropdownMenu, {
-      items: item.items,
-      isExpanded: isExpanded,
-      alignRight: isLast,
-      linkHandler: linkHandler
-    }, void 0)]
-  }), void 0);
-};
-
-const HorizontalMenu = ({
-  items,
-  theme,
-  linkHandler
-}) => {
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const [debouncedActiveIndex, setDebouncedActiveIndex] = useState(activeIndex);
-  useEffect(() => {
-    const handler = setTimeout(() => setDebouncedActiveIndex(activeIndex), activeIndex !== -1 ? 200 : 400);
-    return () => clearTimeout(handler);
-  }, [activeIndex]);
-
-  const handleEnter = item => setActiveIndex(items.findIndex(val => val === item));
-
-  const handleLeave = () => setActiveIndex(-1);
-
-  return jsx("nav", Object.assign({
-    className: classNames(styles.nav, {
-      [styles.darkTheme]: theme === 'dark'
-    })
-  }, {
-    children: jsx("ul", Object.assign({
-      className: styles.menuList
-    }, {
-      children: items.map((item, index) => jsx(HorizontalMenuItem, {
-        item: item,
-        onMouseEnter: handleEnter,
-        onMouseLeave: handleLeave,
-        isExpanded: index === debouncedActiveIndex,
-        isLast: index === items.length - 1,
-        linkHandler: linkHandler
-      }, index))
-    }), void 0)
-  }), void 0);
-};
-
-export { HorizontalMenu };

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

@@ -1,33 +0,0 @@
-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 };