From c7a9e187dce7fbdfd5aa8571478420c4534aae8e Mon Sep 17 00:00:00 2001 From: gizeasy Date: Fri, 12 Jul 2024 12:49:04 +0200 Subject: [PATCH 1/2] feat: remove figma and npm --- .eslintrc.js | 1 - package.json | 2 +- src/components/Header/Header.css | 1 + .../HeaderContainer/HeaderContainer.tsx | 21 +-- src/pages/MainPage/About/About.tsx | 149 +----------------- src/pages/MainPage/FAQ/data.tsx | 87 ---------- src/pages/MainPage/HeroScreen/HeroScreen.tsx | 49 ------ src/pages/MainPage/MainPage.tsx | 3 +- 8 files changed, 7 insertions(+), 306 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6f61fb9..94d0512 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -31,7 +31,6 @@ module.exports = { 'import', 'jsx-a11y', 'react-hooks', - '@typescript-eslint', 'simple-import-sort', 'prettier', ], diff --git a/package.json b/package.json index 4ee6969..24d3a4a 100644 --- a/package.json +++ b/package.json @@ -194,7 +194,7 @@ "@consta/charts": "^1.0.0", "@consta/header": "^3.0.0", "@consta/icons": "^1.0.0", - "@consta/stand": "^0.0.141", + "@consta/stand": "0.0.139-beta", "@consta/uikit": "^5.0.0", "@consta/widgets-utils": "^0.2.15", "@evless/react-textfit": "1.1.1", diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 735a31a..b06b5c2 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,4 +1,5 @@ .portal--Header { + z-index: 1000; display: flex; justify-content: space-between; align-items: center; diff --git a/src/containers/HeaderContainer/HeaderContainer.tsx b/src/containers/HeaderContainer/HeaderContainer.tsx index 1bdd375..a64545d 100644 --- a/src/containers/HeaderContainer/HeaderContainer.tsx +++ b/src/containers/HeaderContainer/HeaderContainer.tsx @@ -8,16 +8,9 @@ import React, { useEffect, useRef } from 'react'; import { HeaderFlexible } from '##/components/HeaderFlexible/HeaderFlexible'; import IconComponent from '##/icons/Component.icon.svg'; -import IconFigma from '##/icons/FigmaSmall.icon.svg'; -import IconGithub from '##/icons/GithubSmall.icon.svg'; import IconTelegram from '##/icons/TelegramSmall.icon.svg'; import ConstaLogo from '##/images/ConstaLogo2.image.svg'; -import { - constaGitHub, - constaTelegram, - contsaCommunityFigma, - gazPromNeft, -} from '##/modules/api/links'; +import { constaTelegram, gazPromNeft } from '##/modules/api/links'; import { fixedAtom } from '##/modules/header'; import { cn } from '##/utils/bem'; @@ -64,18 +57,6 @@ export const HeaderContainer: React.FC = () => { icon: IconComponent, onlyIcon: false, }, - { - label: 'Figma', - link: contsaCommunityFigma, - icon: IconFigma, - onlyIcon: false, - }, - { - label: 'GitHub', - link: constaGitHub, - icon: IconGithub, - onlyIcon: false, - }, { label: 'Новости в Telegram', link: constaTelegram, diff --git a/src/pages/MainPage/About/About.tsx b/src/pages/MainPage/About/About.tsx index ae0708c..3989436 100644 --- a/src/pages/MainPage/About/About.tsx +++ b/src/pages/MainPage/About/About.tsx @@ -1,53 +1,15 @@ import './About.css'; -import { IconForward } from '@consta/icons/IconForward'; import { IconThumbUp } from '@consta/icons/IconThumbUp'; -import { useLink } from '@consta/stand/src/hooks/useLink'; -import { routesNames } from '@consta/stand/src/modules/router'; -import { cnText, Text } from '@consta/uikit/Text'; -import { useTheme } from '@consta/uikit/Theme'; -import React, { Fragment } from 'react'; +import { Text } from '@consta/uikit/Text'; +import React from 'react'; -import IconFigma from '##/icons/FigmaMono.icon.svg'; -import IconGithub from '##/icons/Github.icon.svg'; -import IconStorybook from '##/icons/Storybook.icon.svg'; -import { - constaGitHub, - contsaCommunityFigma, - licenceMit, -} from '##/modules/api/links'; +import { licenceMit } from '##/modules/api/links'; import { cn } from '##/utils/bem'; -// import { AboutVideo } from './AboutVideo/AboutVideo'; - const cnAbout = cn('About'); -const cnLinks = cn('LinksToLibrary'); - -const More = ( - - Смотреть - - -); - export const About: React.FC = () => { - const { themeClassNames } = useTheme(); - - const [componentsLink, componentsOnClick] = useLink({ - to: routesNames.LIBS, - }); return (
{
*/} -
-
- {[ - { - title: 'Всем-всем', - subTitle: - 'Витрина компонентов с подробной документацией и правилами использования.', - hasVersion: false, - icon: 'storybook', - href: componentsLink, - onClick: componentsOnClick, - additionalClassNames: themeClassNames.color.accent, - }, - { - title: 'Дизайнерам', - subTitle: - 'Правила использования и библиотека компонентов в Figma Community.', - hasVersion: false, - icon: 'figma', - href: contsaCommunityFigma, - additionalClassNames: themeClassNames.color.invert, - }, - { - title: 'Разработчикам', - subTitle: 'Репозитории библиотек на GitHub.', - hasVersion: true, - icon: 'github', - href: constaGitHub, - additionalClassNames: themeClassNames.color.invert, - }, - ].map((item, index) => ( - - -
- - {item.title} - - - {item.subTitle} - -
- -
- {item.icon === 'storybook' && ( - - )} - {item.icon === 'figma' && ( - - )} - {item.icon === 'github' && ( - - )} - - {More} -
- - - ))} -
-
-
- - Для дизайна - - - - Figma - {' '} - — инструмент для разработки интерфейсов и прототипирования - ), }, @@ -146,12 +135,6 @@ export const questions = [ { title: 'Как использовать дизайн-систему?', answer: () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [libLink] = useLink({ - to: routesNames.LIBS_LIB, - params: { lib: 'uikit' }, - }); - return ( <> - - Использовать все возможности - - - Если вы запускаете веб-проект и готовы вести разработку на React, - разработчики могут{' '} - - подключить нашу библиотеку - {' '} - с элементами интерфейса. Если нет, дизайнеры могут собрать макет - интерфейса на основе{' '} - - шаблонов в Figma - - . - - - Дополнять и дорабатывать - - - Всё в открытом доступе. Вы можете посмотреть{' '} - - исходный код нашей библиотеки на GitHub - {' '} - и предложить изменения. - ); }, @@ -257,41 +209,6 @@ export const questions = [ ), }, - { - title: 'Как принять участие в разработке?', - answer: () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [link] = useLink({ - to: routesNames.LIBS_LIB_STAND, - params: { lib: 'portal', stand: 'custom-contribute' }, - }); - - return ( - <> - - Очень просто: дизайн-система в публичном репозитории на GitHub, вы - можете прислать заявку на изменения или даже сделать доработку. - - - Как это сделать - - - ); - }, - }, { title: 'В какой момент её лучше подключать?', answer: () => ( @@ -330,10 +247,6 @@ export const questions = [ className="decorator decorator_indent-b_m" >
  • Менеджер или заказчик ставит задачу на создание продукта
    • -
  • - Дизайнеры создают макет — из компонентов дизайн-системы, на основе - наших шаблонов в Figma. -
  • Разработчики собирают интерфейс на основе макета — берут компоненты из npm пакета{' '} diff --git a/src/pages/MainPage/HeroScreen/HeroScreen.tsx b/src/pages/MainPage/HeroScreen/HeroScreen.tsx index a2b7ef6..468d707 100644 --- a/src/pages/MainPage/HeroScreen/HeroScreen.tsx +++ b/src/pages/MainPage/HeroScreen/HeroScreen.tsx @@ -1,17 +1,11 @@ /* eslint-disable camelcase */ import './HeroScreen.css'; -import { useLink } from '@consta/stand/src/hooks/useLink'; -import { routesNames } from '@consta/stand/src/modules/router'; -import { Button } from '@consta/uikit/Button'; import { Text } from '@consta/uikit/Text'; -import { useBreakpoints } from '@consta/uikit/useBreakpoints'; import { useAction } from '@reatom/npm-react'; import React, { useEffect, useRef } from 'react'; import { Picture } from '##/components/Picture/Picture'; -import IconFigma from '##/icons/FigmaMono.icon.svg'; -import IconGithub from '##/icons/Github.icon.svg'; import ConstaLogo from '##/images/ConstaLogo.image.svg'; import AltHeroImage_375_1x_dark from '##/images/HeroImage/Alt/Dark/HeroImage_375_1x.jpg'; import AltHeroImage_375_2x_dark from '##/images/HeroImage/Alt/Dark/HeroImage_375_2x.jpg'; @@ -67,7 +61,6 @@ import GPNHeroImage_375_3x_display from '##/images/HeroImage/GPN/Display/HeroIma import GPNHeroImage_720_1x_display from '##/images/HeroImage/GPN/Display/HeroImage_720_1x.jpg'; import GPNHeroImage_720_2x_display from '##/images/HeroImage/GPN/Display/HeroImage_720_2x.jpg'; import GPNHeroImage_720_3x_display from '##/images/HeroImage/GPN/Display/HeroImage_720_3x.jpg'; -import { constaGitHub, contsaCommunityFigma } from '##/modules/api/links'; import { fixedAtom } from '##/modules/header'; import { cn } from '##/utils/bem'; @@ -76,14 +69,6 @@ const cnHeroScreen = cn('HeroScreen'); export const HeroScreen: React.FC = () => { const setFixedHeader = useAction(fixedAtom); const ref = useRef(null); - const [componentsLink, componentsOnClick] = useLink({ - to: routesNames.LIBS, - }); - const breakpoints = useBreakpoints({ - map: { bigPhone: 400 }, - isActive: true, - }); - const buttonSize = breakpoints.bigPhone ? 'l' : 'm'; useEffect(() => { const listner = () => { @@ -122,40 +107,6 @@ export const HeroScreen: React.FC = () => { Дизайн‑система для быстрой разработки интерфейсов -
    -
    -
    -
    • ( - +