feat: add github button in navigation (#194)

Author: NikitaCG

package-lock.json

@@ -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.json

@@ -308,6 +308,12 @@
         }
       ],
       "rightItems": [
+        {
+          "type": "github-button",
+          "text": "Star",
+          "label": "Star @gravity-ui/page-constructor on GitHub",
+          "url": "https://github.com/gravity-ui/page-constructor"
+        },
         {
           "type": "link",
           "text": "Link",

src/containers/PageConstructor/__stories__/data.json

@@ -6,6 +6,7 @@ export enum NavigationItemType {
     Dropdown = 'dropdown',
     Button = 'button',
     Social = 'social',
+    GithubButton = 'github-button',
 }
 
 export interface NavigationItemBase {
@@ -14,6 +15,27 @@ export interface NavigationItemBase {
     url?: string;
 }
 
+export 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;

src/models/navigation.ts

@@ -7,6 +7,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';
 
@@ -24,6 +25,7 @@ const NavigationItemsMap: Record<NavigationItemType, React.ComponentType<any>> =
     [NavigationItemType.Social]: SocialIcon,
     [NavigationItemType.Dropdown]: NavigationDropdown,
     [NavigationItemType.Link]: NavigationLink,
+    [NavigationItemType.GithubButton]: GithubButton,
 };
 
 const NavigationItem: React.FC<NavigationItemProps> = ({data, className, ...props}) => {

src/navigation/components/NavigationItem/NavigationItem.tsx

@@ -0,0 +1,18 @@
+@import '../../../../../../styles/variables';
+@import '../../mixins';
+
+$block: '.#{$ns}github-button';
+
+#{$block} {
+    @include navigation-item-display();
+
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    span {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+}

src/navigation/components/NavigationItem/components/GithubButton/GithubButton.scss

@@ -0,0 +1,77 @@
+import React, {useRef, useEffect} from 'react';
+
+import {block} from '../../../../../utils';
+
+import {NavigationItemProps} from '../../NavigationItem';
+import {NavigationGithubButton, NavigationGithubButtonIcon} from '../../../../../models';
+
+import './GithubButton.scss';
+
+const b = block('github-button');
+
+type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
+
+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,
+}: NavigationGithubButtonProps) => {
+    const containerRef = useRef<HTMLSpanElement>(null);
+    const linkRef = useRef<HTMLAnchorElement>(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 = () => {
+            if (containerRef?.current?.lastChild && linkRef.current) {
+                containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild);
+            }
+        };
+
+        paint();
+
+        return () => {
+            reset();
+        };
+    }, []);
+
+    return (
+        <div className={b(null, className)}>
+            <span ref={containerRef}>
+                <a
+                    href={url}
+                    ref={linkRef}
+                    data-show-count="true"
+                    aria-label={label || DEFAULT_LABEL}
+                    {...(icon && {'data-icon': NavigationGithubButtonIcon[icon]})}
+                    {...(size && {'data-size': size})}
+                >
+                    {text}
+                </a>
+            </span>
+        </div>
+    );
+};