From d3a730383fd0c1c7661f099922b5424e064fb1bd Mon Sep 17 00:00:00 2001 From: ngorin Date: Thu, 2 Mar 2023 16:24:24 +0300 Subject: [PATCH] feat: add github button in navigation --- package-lock.json | 5 ++ package.json | 1 + .../PageConstructor/__stories__/data.json | 6 ++ src/models/navigation.ts | 22 ++++++ .../NavigationItem/NavigationItem.tsx | 2 + .../components/GithubButton/GithubButton.scss | 18 +++++ .../components/GithubButton/GithubButton.tsx | 77 +++++++++++++++++++ 7 files changed, 131 insertions(+) create mode 100644 src/navigation/components/NavigationItem/components/GithubButton/GithubButton.scss create mode 100644 src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx diff --git a/package-lock.json b/package-lock.json index c01916d83..e75c8808e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11956,6 +11956,11 @@ "through2": "^4.0.0" } }, + "github-buttons": { + "version": "2.23.0", + "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.23.0.tgz", + "integrity": "sha512-2REUOV3ue6NmT0QThhfzfYmeSoYpCG73+tL7Ir2C7P+gshRerI05WuIQuhDkE2Zlg5Wc39hc2DHj+pE23mGJvw==" + }, "github-slugger": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", diff --git a/package.json b/package.json index d2a54f735..8f255c698 100644 --- a/package.json +++ b/package.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", diff --git a/src/containers/PageConstructor/__stories__/data.json b/src/containers/PageConstructor/__stories__/data.json index a72c01a2d..ee5894001 100644 --- a/src/containers/PageConstructor/__stories__/data.json +++ b/src/containers/PageConstructor/__stories__/data.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", diff --git a/src/models/navigation.ts b/src/models/navigation.ts index b4dda74e7..72088b1b8 100644 --- a/src/models/navigation.ts +++ b/src/models/navigation.ts @@ -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 { + type: NavigationItemType.GithubButton; + url: string; + label?: string; + icon?: keyof typeof NavigationGithubButtonIcon; + size?: string; +} + export interface NavigationLinkItem extends Omit { type: NavigationItemType.Link; url: string; diff --git a/src/navigation/components/NavigationItem/NavigationItem.tsx b/src/navigation/components/NavigationItem/NavigationItem.tsx index 8fd6e66dd..45b05a075 100644 --- a/src/navigation/components/NavigationItem/NavigationItem.tsx +++ b/src/navigation/components/NavigationItem/NavigationItem.tsx @@ -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.Social]: SocialIcon, [NavigationItemType.Dropdown]: NavigationDropdown, [NavigationItemType.Link]: NavigationLink, + [NavigationItemType.GithubButton]: GithubButton, }; const NavigationItem: React.FC = ({data, className, ...props}) => { diff --git a/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.scss b/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.scss new file mode 100644 index 000000000..40dbf27c5 --- /dev/null +++ b/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.scss @@ -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; + } +} diff --git a/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx b/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx new file mode 100644 index 000000000..0b99b6420 --- /dev/null +++ b/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx @@ -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(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 = () => { + if (containerRef?.current?.lastChild && linkRef.current) { + containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild); + } + }; + + paint(); + + return () => { + reset(); + }; + }, []); + + return ( +
+ + + {text} + + +
+ ); +};