From d6729be1b2c6c3e21446b5a43083d6ceed2478a6 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Tue, 22 Oct 2024 22:46:19 +0400 Subject: [PATCH 1/4] rd-361 code improvements for nextjs 15 --- .../components/elements/article/document.tsx | 17 +++++++++----- .../src/components/elements/article/utils.ts | 11 +++++++-- .../robindoc/src/components/ui/tabs/index.tsx | 23 ++++++++++--------- .../components/ui/tabs/tabs-header/index.tsx | 20 ++++++++-------- .../components/ui/tabs/tabs-styles/index.tsx | 14 +++++------ 5 files changed, 49 insertions(+), 36 deletions(-) diff --git a/packages/robindoc/src/components/elements/article/document.tsx b/packages/robindoc/src/components/elements/article/document.tsx index 9899271a..fad1f8da 100644 --- a/packages/robindoc/src/components/elements/article/document.tsx +++ b/packages/robindoc/src/components/elements/article/document.tsx @@ -23,6 +23,7 @@ import { TaskListItem, TaskOrderedList, TaskUnorderedList } from "@src/component import { type PagesType } from "./types"; import { + formatId, formatLinkHref, isNewCodeToken, parseCodeLang, @@ -110,7 +111,7 @@ export const Document: React.FC = ({ | null | { props: RobinProps; childTokens: Token[]; componentName: string; type: "base" } | { type: "dummy" } = null; - let codeQueue: { [lang: string]: JSX.Element } = {}; + let codeQueue: { [lang: string]: { element: JSX.Element; tabName: string } } = {}; const insertedCodeKeys: string[] = []; const DocumentToken: React.FC<{ token: Token | Token[] }> = ({ token }) => { if (!token) return null; @@ -157,8 +158,9 @@ export const Document: React.FC = ({ } } - if (Array.isArray(token)) - return token.map((t, index) => ); + if (Array.isArray(token)) { + return token.map((t, index) => ); + } switch (token.type) { case "heading": @@ -249,9 +251,12 @@ export const Document: React.FC = ({ case "code": const { lang, configuration } = parseCodeLang(token.lang); if (configuration.switcher) { - const tabKey = typeof configuration.tab === "string" ? configuration.tab : lang; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - codeQueue[tabKey] = ; + const tabKey = typeof configuration.tab === "string" ? formatId(configuration.tab) : lang; + codeQueue[tabKey] = { + tabName: configuration.tab.toString(), + // eslint-disable-next-line @typescript-eslint/no-explicit-any + element: , + }; return null; } diff --git a/packages/robindoc/src/components/elements/article/utils.ts b/packages/robindoc/src/components/elements/article/utils.ts index b60dc88c..91092166 100644 --- a/packages/robindoc/src/components/elements/article/utils.ts +++ b/packages/robindoc/src/components/elements/article/utils.ts @@ -46,6 +46,10 @@ export const parseMarkdown = (content: string) => { return { tokens, headings }; }; +export const formatId = (raw: string) => { + return raw.toLowerCase().replace(/\W/g, "_").replace(/_+/g, "_"); +}; + export const validateComponentName = (name: string) => { return /^[A-Z][a-zA-Z0-9]+$/.test(name); }; @@ -71,12 +75,15 @@ export const parseCodeLang = (raw: string) => { return { lang, configuration }; }; -export const isNewCodeToken = (token: Token | Token[], codeQueue: { [lang: string]: JSX.Element }) => { +export const isNewCodeToken = ( + token: Token | Token[], + codeQueue: { [lang: string]: { element: JSX.Element; tabName: string } }, +) => { if (Array.isArray(token) || !Object.keys(codeQueue).length) return false; if (token.type === "code") { const { lang, configuration } = parseCodeLang(token.lang); - const tabKey = typeof configuration.tab === "string" ? configuration.tab : lang; + const tabKey = typeof configuration.tab === "string" ? formatId(configuration.tab) : lang; if (codeQueue[tabKey] || !configuration.switcher) return true; } diff --git a/packages/robindoc/src/components/ui/tabs/index.tsx b/packages/robindoc/src/components/ui/tabs/index.tsx index 77658b57..1fc04bbc 100644 --- a/packages/robindoc/src/components/ui/tabs/index.tsx +++ b/packages/robindoc/src/components/ui/tabs/index.tsx @@ -6,28 +6,29 @@ import "./tabs.scss"; export interface TabsProps { insertStyles?: boolean; - tabsData: { [tabKey: string]: JSX.Element }; + tabsData: { [tabKey: string]: { element: JSX.Element; tabName: string } }; blockKey?: string; type?: TabsHeaderProps["type"]; } export const Tabs: React.FC = ({ insertStyles, tabsData, blockKey, type }) => { - const tabs = Object.keys(tabsData); + const tabsKeys = Object.keys(tabsData); - if (tabs.length === 1) { - return tabsData[tabs[0]]; + if (tabsKeys.length === 1) { + return tabsData[tabsKeys[0]].element; } - const tabsKey = blockKey || tabs.sort().join("-"); + const tabs = tabsKeys.map((tab) => ({ name: tabsData[tab].tabName, id: tab })); + const tabsTypeId = blockKey || tabsKeys.sort().join("-"); return ( -
- {insertStyles && } - -
- {tabs.map((tabKey) => ( +
+ {insertStyles && } + +
+ {tabsKeys.map((tabKey) => (
- {tabsData[tabKey]} + {tabsData[tabKey].element}
))}
diff --git a/packages/robindoc/src/components/ui/tabs/tabs-header/index.tsx b/packages/robindoc/src/components/ui/tabs/tabs-header/index.tsx index 46378328..21837995 100644 --- a/packages/robindoc/src/components/ui/tabs/tabs-header/index.tsx +++ b/packages/robindoc/src/components/ui/tabs/tabs-header/index.tsx @@ -5,8 +5,8 @@ import clsx from "clsx"; import { saveTab } from "@src/core/utils/tabs-store"; export interface TabsHeaderProps { - tabs: string[]; - tabsKey: string; + tabs: { name: string; id: string }[]; + tabsTypeId: string; type?: "code"; } @@ -14,27 +14,27 @@ const typeClassNames = { code: "r-tab-header-code", }; -export const TabsHeader: React.FC = ({ tabs, tabsKey, type }) => { +export const TabsHeader: React.FC = ({ tabs, tabsTypeId, type }) => { const changeTabHandler = (tab: string) => { const classNames = Array.from(document.documentElement.classList); classNames.forEach((className) => { - if (className.startsWith(`r-tabs-global__${tabsKey}`)) { + if (className.startsWith(`r-tabs-global__${tabsTypeId}`)) { document.documentElement.classList.remove(className); } }); - document.documentElement.classList.add(`r-tabs-global__${tabsKey}`, `r-tabs-global__${tabsKey}_${tab}`); - saveTab(tabsKey, tab); + document.documentElement.classList.add(`r-tabs-global__${tabsTypeId}`, `r-tabs-global__${tabsTypeId}_${tab}`); + saveTab(tabsTypeId, tab); }; return (
{tabs.map((tab) => (
changeTabHandler(tab)} + key={tab.id} + className={clsx(`r-tab-header r-tab-header_${tab.id}`, type && typeClassNames[type])} + onClick={() => changeTabHandler(tab.id)} > - {tab} + {tab.name}
))}
diff --git a/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx b/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx index 19e67811..b5d454c6 100644 --- a/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx +++ b/packages/robindoc/src/components/ui/tabs/tabs-styles/index.tsx @@ -1,18 +1,18 @@ import React from "react"; export interface TabsStylesProps { - tabsKey: string; - tabs: string[]; + tabsTypeId: string; + tabsKeys: string[]; } -export const TabsStyles: React.FC = ({ tabsKey, tabs }) => ( +export const TabsStyles: React.FC = ({ tabsTypeId, tabsKeys }) => (