Revert "feat: Added ArticleNavigation component, which provides next/…

…prev navigation between articles (#159)" (#168) This reverts commit 94d67b3. Co-authored-by: Maksim Sitnikov <[email protected]>
gravity-ui · Feb 2, 2024 · 1c118e5 · 1c118e5
1 parent 94d67b3
commit 1c118e5
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 324 deletions.
diff --git a/src/components/ArticleNavigation/ArticleNavigation.scss b/src/components/ArticleNavigation/ArticleNavigation.scss
diff --git a/src/components/ArticleNavigation/ArticleNavigation.tsx b/src/components/ArticleNavigation/ArticleNavigation.tsx
diff --git a/src/components/ArticleNavigation/index.ts b/src/components/ArticleNavigation/index.ts
diff --git a/src/components/Component/Component.scss b/src/components/Component/Component.scss
@@ -19,10 +19,6 @@ $block: '.#{variables.$ns}component';
         border-radius: 10px;
     }
 
-    &__navigation {
-        margin-top: var(--g-spacing-10);
-    }
-
     &__header {
         display: flex;
         align-items: center;

diff --git a/src/components/Component/Component.tsx b/src/components/Component/Component.tsx
@@ -8,8 +8,6 @@ import githubIcon from '../../assets/icons/github.svg';
 import {MDXRenderer} from '../../components/MDXRenderer/MDXRenderer';
 import {Component as ComponentType} from '../../content/components/types';
 import {block, getRouteFromReadmeUrl} from '../../utils';
-import {ArticleNavigation} from '../ArticleNavigation/ArticleNavigation';
-import {Section} from '../NavigationLayout/types';
 import {SandboxBlock} from '../SandboxBlock';
 
 import './Component.scss';
@@ -36,64 +34,15 @@ export type ComponentProps = {
     libId: string;
     component: ComponentType;
     readmeContent: string;
-    sections: Section[];
 };
 
-export const Component: React.FC<ComponentProps> = ({
-    libId,
-    component,
-    readmeContent,
-    sections,
-}) => {
+export const Component: React.FC<ComponentProps> = ({libId, component, readmeContent}) => {
     const router = useRouter();
     const {tabId} = router.query;
 
     const [activeTab, setActiveTab] = React.useState(
         tabId === Tab.Design ? Tab.Design : Tab.Overview,
     );
-
-    const currentSection = React.useMemo(
-        () => sections.find((item) => item.id === libId),
-        [libId, sections],
-    );
-
-    const currentIndex = React.useMemo(() => {
-        if (!currentSection || !currentSection.subSections) {
-            return null;
-        }
-        return currentSection.subSections.findIndex((item) => item.id === component.id);
-    }, [currentSection, component.id]);
-
-    const nextSection = React.useMemo(() => {
-        if (
-            !currentSection ||
-            !currentSection.subSections ||
-            (!currentIndex && currentIndex !== 0)
-        ) {
-            return null;
-        }
-        const nextIndex = currentIndex + 1;
-        if (nextIndex >= currentSection.subSections.length) {
-            return null;
-        }
-        return currentSection.subSections[nextIndex];
-    }, [currentIndex, currentSection]);
-
-    const prevSection = React.useMemo(() => {
-        if (
-            !currentSection ||
-            !currentSection.subSections ||
-            (!currentIndex && currentIndex !== 0)
-        ) {
-            return null;
-        }
-        const prevIndex = currentIndex - 1;
-        if (prevIndex < 0) {
-            return null;
-        }
-        return currentSection.subSections[prevIndex];
-    }, [currentIndex, currentSection]);
-
     React.useEffect(() => {
         setActiveTab(tabId === Tab.Design ? Tab.Design : Tab.Overview);
     }, [tabId]);
@@ -191,12 +140,6 @@ export const Component: React.FC<ComponentProps> = ({
                             rewriteLinks={rewriteLinks}
                             withComponents
                         />
-                        <div className={b('navigation')}>
-                            <ArticleNavigation
-                                prevSection={prevSection}
-                                nextSection={nextSection}
-                            />
-                        </div>
                     </>
                 )}
             </div>

diff --git a/src/components/ComponentsLayout/ComponentsLayout.tsx b/src/components/ComponentsLayout/ComponentsLayout.tsx
@@ -1,20 +1,34 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 
+import {libs} from '../../content/components';
 import {NavigationLayout, Section} from '../NavigationLayout/NavigationLayout';
 
 export type ComponentsLayoutProps = {
     libId: string;
     componentId?: string;
     children?: React.ReactNode;
-    sections: Section[];
 };
 
 export const ComponentsLayout: React.FC<ComponentsLayoutProps> = ({
     libId,
     componentId,
     children,
-    sections,
 }) => {
+    const sections = useMemo<Section[]>(() => {
+        return libs.map((lib) => ({
+            id: lib.id,
+            title: lib.title,
+            // url: `/components/${lib.id}`, // "Overview" link
+            subSections: lib.components.map((component) => ({
+                id: component.id,
+                title: component.title,
+                url:
+                    component.isComingSoon === true ? '#' : `/components/${lib.id}/${component.id}`,
+                isComingSoon: component.isComingSoon,
+            })),
+        }));
+    }, []);
+
     return (
         <NavigationLayout
             sections={sections}

diff --git a/src/components/DesignArticle/DesignArticle.scss b/src/components/DesignArticle/DesignArticle.scss
@@ -19,7 +19,4 @@ $block: '.#{variables.$ns}design-article';
         line-height: 48px;
         font-weight: 600;
     }
-    &__navigation {
-        margin-top: var(--g-spacing-10);
-    }
 }
diff --git a/src/components/DesignArticle/DesignArticle.tsx b/src/components/DesignArticle/DesignArticle.tsx
@@ -1,70 +1,23 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 
 import {Article} from '../../content/design/types';
 import {block} from '../../utils';
-import {ArticleNavigation} from '../ArticleNavigation/ArticleNavigation';
 import {MDXRenderer} from '../MDXRenderer/MDXRenderer';
-import {Section} from '../NavigationLayout/types';
 
 import './DesignArticle.scss';
 
 const b = block('design-article');
 
 export type DesignArticleProps = {
     article: Article;
-    sectionId?: string;
-    sections: Section[];
 };
 
-export const DesignArticle: React.FC<DesignArticleProps> = ({article, sectionId, sections}) => {
-    const currentSection = useMemo(
-        () => sections.find((item) => item.id === sectionId),
-        [sectionId, sections],
-    );
-
-    const currentIndex = useMemo(() => {
-        if (!currentSection || !currentSection.subSections) {
-            return null;
-        }
-        return currentSection.subSections.findIndex((item) => item.id === article.id);
-    }, [currentSection, article.id]);
-
-    const nextSection = useMemo(() => {
-        if (
-            !currentSection ||
-            !currentSection.subSections ||
-            (!currentIndex && currentIndex !== 0)
-        ) {
-            return null;
-        }
-        const nextIndex = currentIndex + 1;
-        if (nextIndex >= currentSection.subSections.length) {
-            return null;
-        }
-        return currentSection.subSections[nextIndex];
-    }, [currentIndex, currentSection]);
-
-    const prevSection = useMemo(() => {
-        if (
-            !currentSection ||
-            !currentSection.subSections ||
-            (!currentIndex && currentIndex !== 0)
-        ) {
-            return null;
-        }
-        const prevIndex = currentIndex - 1;
-        if (prevIndex < 0) {
-            return null;
-        }
-        return currentSection.subSections[prevIndex];
-    }, [currentIndex, currentSection]);
-
+export const DesignArticle: React.FC<DesignArticleProps> = ({article}) => {
     return (
         <div className={b()}>
             <h1 className={b('title')}>{article.title}</h1>
-            <MDXRenderer text={article.content} />
-            <div className={b('navigation')}>
-                <ArticleNavigation prevSection={prevSection} nextSection={nextSection} />
+            <div className={b('content')}>
+                <MDXRenderer text={article.content} />
             </div>
         </div>
     );