@jetbrains/kotlin-web-site-ui 4.3.0-next-layout.7 → 4.3.0

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+## 4.3.0 (December 1, 2022)
+
+### New breakpoints system
+
+Add [`break points`](https://github.com/JetBrains/kotlin-web-site-ui/blob/c1b5f8f69c692b9e4041a1b3d1685a818ecef197/src/components/breakpoints/constants.ts#L1-L9) based on different typ devices width:
+  - Mobile small (**MS**)
+  - Mobile medium (**MM**) 
+  - Tablet small (**TS**)
+  - Tablet medium (**TM**)
+  - Tablet large (**TL**)
+  - Desktop small (**DS**)
+  - Desktop medium (**DM**)
+
+  * `BREAKPOINTS`, `BREAKPOINTS_MAX_MEDIA` and `BREAKPOINTS_MIN_MEDIA` constants exported for inline JSX usage:
+  ```jsx
+    function FlowerAdaptiveImg () {
+      return (
+        <picture>
+          <source media={BREAKPOINTS_MAX_MEDIA.MM} srcset="flowers-mobile.jpg">
+          <source media={BREAKPOINTS_MIN_MEDIA.TS && BREAKPOINTS_MAX_MEDIA.TL} srcset="flowers-tablet.jpg">
+          <img src="flowers-desktop.jpg" alt="Flowers">
+        </picture>
+      );
+    }
+```
+  * New breakpoint [**hooks**](https://github.com/JetBrains/kotlin-web-site-ui/blob/c1b5f8f69c692b9e4041a1b3d1685a818ecef197/src/components/breakpoints/hooks.ts#L5-L31) provide adaptive browser templates:
+  ```jsx
+  function FlowerAdaptiveImg () {
+    const isMM = useMM();
+    const size = isMM ? 'small' : 'large';
+    return <img src={`flowers-${size}.jpg`} alt="Flowers">;
+  }
+```
+
+### New pages layout
+
+Motivation of next layout is reduce type layouts and use fix counts of resolutions without pixel-by-pixel fluid container.
+
+  * Providing new classes `ktl-layout`, `ktl-layout--center`, `ktl-layout--spacing` for fluid grid. More information in storybook.
+  * Providing new postcss `custom media` with device type like:
+  ```css
+   @media (--ktl-ds) {
+     // ...
+   }
+
+   @media (--ktl-mm-min) {
+     // ...
+   }
+```
+  Medias without postfix used `max-width: $size`, medias with `-min` postfix used `min-width: $size`.
+  
+  For use medias in your project it should provide [postcss-custom-media](https://github.com/csstools/postcss-custom-media):
+  ```js
+  require("@webteam/postcss-preset")({
+    customMedia: [
+        // ...
+        '@jetbrains/kotlin-web-site-ui/out/components/breakpoints/media.pcss'
+    ],
+    // ...
+  })
+```

package/out/blocks/formik-wrapper/input.js

@@ -15,7 +15,8 @@ const FormikInput = ({
     isSubmitting,
     submitCount
   } = useFormikContext();
-  return React.createElement(Input, Object.assign({}, restProps, formikProps, {
+  return React.createElement(Input, { ...restProps,
+    ...formikProps,
     onBlur: e => {
       if (onBlur) {
         onBlur(e);
@@ -32,7 +33,7 @@ const FormikInput = ({
     },
     disabled: isSubmitting || status && (status.disabled || status.submitted) || disabled,
     error: (meta.touched || submitCount > 0) && meta.error
-  }));
+  });
 };
 
 export { FormikInput };

package/out/blocks/formik-wrapper/submit-button.js

@@ -11,11 +11,11 @@ const FormikSubmitButton = ({
     isValid,
     isSubmitting
   } = useFormikContext();
-  return React.createElement(Button, Object.assign({}, restProps, {
+  return React.createElement(Button, { ...restProps,
     disabled: !isValid || disabled,
     busy: isSubmitting || busy,
     type: 'submit'
-  }));
+  });
 };
 
 export { FormikSubmitButton };

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

@@ -19,14 +19,15 @@ const DropdownMenu = ({
     const Tag = !item.isActive && item.url ? 'a' : 'span';
     return React__default.createElement("li", {
       key: key
-    }, React__default.createElement(Tag, Object.assign({
+    }, React__default.createElement(Tag, {
       className: classNames(styles.dropdownMenuItem, {
         [styles.active]: item.isActive
-      })
-    }, item.url ? {
-      href: item.url,
-      onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
-    } : {}), item.title));
+      }),
+      ...(item.url ? {
+        href: item.url,
+        onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
+      } : {})
+    }, item.title));
   }));
 };
 
@@ -47,16 +48,16 @@ const HorizontalMenuItem = ({
     className: styles.menuItemWrap,
     onMouseEnter: handleEnter,
     onMouseLeave: onMouseLeave
-  }, React__default.createElement(Tag, Object.assign({}, item.url ? {
-    href: item.url,
-    onClick: linkHandler ? event => item.url && linkHandler(event, item.url) : undefined
-  } : {}, {
+  }, React__default.createElement(Tag, { ...(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 && React__default.createElement(DropdownMenu, {
+  }, item.title), !!item.items?.length && React__default.createElement(DropdownMenu, {
     items: item.items,
     isExpanded: isExpanded,
     alignRight: isLast,

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

@@ -15,17 +15,17 @@ const MenuListItem = ({
     '--level': level
   };
   const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
-  return React__default.createElement(Tag, Object.assign({}, item.url ? {
-    href: item.url,
-    onClick: handleClick
-  } : {}, {
+  return React__default.createElement(Tag, { ...(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
-  }), item.title);
+  }, item.title);
 };
 
 const MenuList = ({

package/out/components/popup/popup.js

@@ -21,21 +21,21 @@ const Popup = ({
     popupZIndex
   }) => React.createElement(LayeringProvider, {
     baseLayer: "popup"
-  }, React.createElement(ReactModal, Object.assign({
+  }, React.createElement(ReactModal, {
     isOpen: isOpen,
     className: styles.popup,
     overlayClassName: styles.overlay,
     onRequestClose: onRequestClose,
     shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
-    shouldCloseOnEsc: shouldCloseOnEsc
-  }, restProps, {
+    shouldCloseOnEsc: shouldCloseOnEsc,
+    ...restProps,
     ariaHideApp: ariaHideApp,
     style: {
       overlay: {
         zIndex: popupZIndex
       }
     }
-  }), !busy && showOuterCloseButton && React.createElement(Button, {
+  }, !busy && showOuterCloseButton && React.createElement(Button, {
     mode: 'rock',
     theme: 'light',
     icon: React.createElement(CloseIcon, null),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.3.0-next-layout.7",
+  "version": "4.3.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -59,22 +59,26 @@
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-essentials": "^6.2.8",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/builder-webpack5": "^6.3.0-alpha.13",
-    "@storybook/react": "^6.2.8",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
     "@svgr/rollup": "^6.2.1",
     "@svgr/webpack": "^5.5.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/cookie": "^0.4.1",
     "@types/fs-extra": "^9.0.13",
+    "@types/node": "^18.11.9",
+    "@types/postcss-import": "^14.0.0",
     "@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/webpack": "^5.28.0",
     "@types/youtube": "^0.0.45",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
@@ -99,7 +103,7 @@
     "formik": "^2.2.9",
     "fs-extra": "^10.0.1",
     "mini-css-extract-plugin": "1.4.0",
-    "postcss": "^8.2.12",
+    "postcss": "^8.4.19",
     "postcss-custom-media": "^8.0.0",
     "postcss-for": "^2.1.1",
     "postcss-import": "^14.1.0",
@@ -108,14 +112,17 @@
     "postcss-nested": "^5.0.5",
     "postcss-remove-global": "^0.1.1",
     "prettier": "2.2.1",
+    "prop-types": "^15.8.1",
     "query-string": "^7.0.1",
     "react": "^16.8.6",
+    "react-cache": "^2.0.0-alpha.1",
     "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-scrollbar-size": "^5.0.0",
     "react-swipeable-views": "^0.14.0",
+    "require-from-string": "^2.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-node-externals": "^4.0.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -125,7 +132,7 @@
     "svgo-loader": "^3.0.0",
     "the-platform": "^0.10.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.2.4",
+    "typescript": "^4.9.3",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",
     "whatwg-fetch": "^3.6.2"