@gravity-ui/page-constructor 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.22.0](https://github.com/gravity-ui/page-constructor/compare/v1.21.0...v1.22.0) (2023-03-07)
+
+
+### Features
+
+* add github button in navigation ([#194](https://github.com/gravity-ui/page-constructor/issues/194)) ([57adcb5](https://github.com/gravity-ui/page-constructor/commit/57adcb5ad838f9a86681602f51717be4768e0605))
+
 ## [1.21.0](https://github.com/gravity-ui/page-constructor/compare/v1.20.5...v1.21.0) (2023-03-06)
 
 

package/build/cjs/models/navigation.d.ts

@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubButton = "github-button"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export declare enum NavigationGithubButtonIcon {
+    heart = "octicon-heart",
+    eye = "octicon-eye",
+    star = "octicon-star",
+    fork = "octicon-repo-forked",
+    issue = "octicon-issue-opened",
+    comment = "octicon-comment-discussion",
+    download = "octicon-download",
+    package = "octicon-package",
+    template = "octicon-repo-template",
+    play = "octicon-play"
+}
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubButton;
+    url: string;
+    label?: string;
+    icon?: keyof typeof NavigationGithubButtonIcon;
+    size?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;

package/build/cjs/models/navigation.js

@@ -1,10 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationItemType = void 0;
+exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
 var NavigationItemType;
 (function (NavigationItemType) {
     NavigationItemType["Link"] = "link";
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
+var NavigationGithubButtonIcon;
+(function (NavigationGithubButtonIcon) {
+    NavigationGithubButtonIcon["heart"] = "octicon-heart";
+    NavigationGithubButtonIcon["eye"] = "octicon-eye";
+    NavigationGithubButtonIcon["star"] = "octicon-star";
+    NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
+    NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
+    NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
+    NavigationGithubButtonIcon["download"] = "octicon-download";
+    NavigationGithubButtonIcon["package"] = "octicon-package";
+    NavigationGithubButtonIcon["template"] = "octicon-repo-template";
+    NavigationGithubButtonIcon["play"] = "octicon-play";
+})(NavigationGithubButtonIcon = exports.NavigationGithubButtonIcon || (exports.NavigationGithubButtonIcon = {}));

package/build/cjs/navigation/components/NavigationItem/NavigationItem.js

@@ -8,6 +8,7 @@ const blockIdContext_1 = require("../../../context/blockIdContext");
 const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
 const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
 const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
+const GithubButton_1 = require("./components/GithubButton/GithubButton");
 const ANALYTICS_ID = 'navigation';
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16,6 +17,7 @@ const NavigationItemsMap = {
     [models_1.NavigationItemType.Social]: SocialIcon_1.default,
     [models_1.NavigationItemType.Dropdown]: NavigationDropdown_1.NavigationDropdown,
     [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
+    [models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = tslib_1.__rest(_a, ["data", "className"]);

package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.css

@@ -0,0 +1,14 @@
+.pc-github-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.pc-github-button span {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts

@@ -0,0 +1,5 @@
+import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationGithubButton } from '../../../../../models';
+type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
+export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
+export {};

package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GithubButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../../../utils");
+const models_1 = require("../../../../../models");
+const b = (0, utils_1.block)('github-button');
+const DEFAULT_LABEL = 'Stars on GitHub';
+/* More information about github-buttons in https://buttons.github.io/ */
+const GithubButton = ({ text, url, className, label, size, icon, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const linkRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const paint = () => {
+            if (containerRef.current) {
+                const githubButton = containerRef.current.appendChild(document.createElement('span'));
+                Promise.resolve().then(() => tslib_1.__importStar(require(/* webpackMode: "eager" */ 'github-buttons'))).then(({ render }) => {
+                    if (linkRef.current !== null) {
+                        render(githubButton.appendChild(linkRef.current), (el) => {
+                            try {
+                                if (githubButton.parentNode) {
+                                    githubButton.parentNode.replaceChild(el, githubButton);
+                                }
+                            }
+                            catch (_) { }
+                        });
+                    }
+                });
+            }
+        };
+        const reset = () => {
+            var _a;
+            if (((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.lastChild) && linkRef.current) {
+                containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild);
+            }
+        };
+        paint();
+        return () => {
+            reset();
+        };
+    }, []);
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("span", { ref: containerRef },
+            react_1.default.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': models_1.NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+};
+exports.GithubButton = GithubButton;

package/build/esm/models/navigation.d.ts

@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubButton = "github-button"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export declare enum NavigationGithubButtonIcon {
+    heart = "octicon-heart",
+    eye = "octicon-eye",
+    star = "octicon-star",
+    fork = "octicon-repo-forked",
+    issue = "octicon-issue-opened",
+    comment = "octicon-comment-discussion",
+    download = "octicon-download",
+    package = "octicon-package",
+    template = "octicon-repo-template",
+    play = "octicon-play"
+}
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubButton;
+    url: string;
+    label?: string;
+    icon?: keyof typeof NavigationGithubButtonIcon;
+    size?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;

package/build/esm/models/navigation.js

@@ -4,4 +4,18 @@ export var NavigationItemType;
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType || (NavigationItemType = {}));
+export var NavigationGithubButtonIcon;
+(function (NavigationGithubButtonIcon) {
+    NavigationGithubButtonIcon["heart"] = "octicon-heart";
+    NavigationGithubButtonIcon["eye"] = "octicon-eye";
+    NavigationGithubButtonIcon["star"] = "octicon-star";
+    NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
+    NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
+    NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
+    NavigationGithubButtonIcon["download"] = "octicon-download";
+    NavigationGithubButtonIcon["package"] = "octicon-package";
+    NavigationGithubButtonIcon["template"] = "octicon-repo-template";
+    NavigationGithubButtonIcon["play"] = "octicon-play";
+})(NavigationGithubButtonIcon || (NavigationGithubButtonIcon = {}));

package/build/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -6,6 +6,7 @@ import { BlockIdContext } from '../../../context/blockIdContext';
 import { NavigationButton } from './components/NavigationButton/NavigationButton';
 import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
 import { NavigationLink } from './components/NavigationLink/NavigationLink';
+import { GithubButton } from './components/GithubButton/GithubButton';
 const ANALYTICS_ID = 'navigation';
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,6 +15,7 @@ const NavigationItemsMap = {
     [NavigationItemType.Social]: SocialIcon,
     [NavigationItemType.Dropdown]: NavigationDropdown,
     [NavigationItemType.Link]: NavigationLink,
+    [NavigationItemType.GithubButton]: GithubButton,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = __rest(_a, ["data", "className"]);

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.css

@@ -0,0 +1,14 @@
+.pc-github-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.pc-github-button span {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts

@@ -0,0 +1,6 @@
+import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationGithubButton } from '../../../../../models';
+import './GithubButton.css';
+type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
+export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
+export {};

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.js

@@ -0,0 +1,43 @@
+import React, { useRef, useEffect } from 'react';
+import { block } from '../../../../../utils';
+import { NavigationGithubButtonIcon } from '../../../../../models';
+import './GithubButton.css';
+const b = block('github-button');
+const DEFAULT_LABEL = 'Stars on GitHub';
+/* More information about github-buttons in https://buttons.github.io/ */
+export const GithubButton = ({ text, url, className, label, size, icon, }) => {
+    const containerRef = useRef(null);
+    const linkRef = useRef(null);
+    useEffect(() => {
+        const paint = () => {
+            if (containerRef.current) {
+                const githubButton = containerRef.current.appendChild(document.createElement('span'));
+                import(/* webpackMode: "eager" */ 'github-buttons').then(({ render }) => {
+                    if (linkRef.current !== null) {
+                        render(githubButton.appendChild(linkRef.current), (el) => {
+                            try {
+                                if (githubButton.parentNode) {
+                                    githubButton.parentNode.replaceChild(el, githubButton);
+                                }
+                            }
+                            catch (_) { }
+                        });
+                    }
+                });
+            }
+        };
+        const reset = () => {
+            var _a;
+            if (((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.lastChild) && linkRef.current) {
+                containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild);
+            }
+        };
+        paint();
+        return () => {
+            reset();
+        };
+    }, []);
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("span", { ref: containerRef },
+            React.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -48,6 +48,7 @@
   "dependencies": {
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.0.0",
+    "github-buttons": "2.23.0",
     "lodash": "^4.17.21",
     "react-player": "^2.9.0",
     "react-slick": "^0.28.1",

package/server/models/navigation.d.ts

@@ -4,13 +4,33 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social"
+    Social = "social",
+    GithubButton = "github-button"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
+export declare enum NavigationGithubButtonIcon {
+    heart = "octicon-heart",
+    eye = "octicon-eye",
+    star = "octicon-star",
+    fork = "octicon-repo-forked",
+    issue = "octicon-issue-opened",
+    comment = "octicon-comment-discussion",
+    download = "octicon-download",
+    package = "octicon-package",
+    template = "octicon-repo-template",
+    play = "octicon-play"
+}
+export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
+    type: NavigationItemType.GithubButton;
+    url: string;
+    label?: string;
+    icon?: keyof typeof NavigationGithubButtonIcon;
+    size?: string;
+}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;

package/server/models/navigation.js

@@ -1,10 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationItemType = void 0;
+exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
 var NavigationItemType;
 (function (NavigationItemType) {
     NavigationItemType["Link"] = "link";
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
+    NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
+var NavigationGithubButtonIcon;
+(function (NavigationGithubButtonIcon) {
+    NavigationGithubButtonIcon["heart"] = "octicon-heart";
+    NavigationGithubButtonIcon["eye"] = "octicon-eye";
+    NavigationGithubButtonIcon["star"] = "octicon-star";
+    NavigationGithubButtonIcon["fork"] = "octicon-repo-forked";
+    NavigationGithubButtonIcon["issue"] = "octicon-issue-opened";
+    NavigationGithubButtonIcon["comment"] = "octicon-comment-discussion";
+    NavigationGithubButtonIcon["download"] = "octicon-download";
+    NavigationGithubButtonIcon["package"] = "octicon-package";
+    NavigationGithubButtonIcon["template"] = "octicon-repo-template";
+    NavigationGithubButtonIcon["play"] = "octicon-play";
+})(NavigationGithubButtonIcon = exports.NavigationGithubButtonIcon || (exports.NavigationGithubButtonIcon = {}));