Halstack 16 Migration Doc

apps/website/pages/_app.tsx

@@ -5,7 +5,7 @@ import Head from "next/head";
 import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue } from "@dxc-technology/halstack-react";
 import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
-import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
+import { LinkDetails, LinksSectionDetails, LinksSections } from "@/common/pagesList";
 import StatusBadge from "@/common/StatusBadge";
 import "../global-styles.css";
 import createCache, { EmotionCache } from "@emotion/cache";
@@ -33,66 +33,70 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
   const [isExpanded, setIsExpanded] = useState(true);
   const { asPath: currentPath } = useRouter();
 
-  const filterSections = (sections: Section[], query: string): Section[] => {
-    const q = query.trim().toLowerCase();
-    if (!q) return sections;
+  const matchPaths = (linkPath: string) => {
+    const desiredPaths = [linkPath, `${linkPath}/code`];
+    const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
+    return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
+  };
 
-    const filterItem = (item: Item | GroupItem): Item | GroupItem | null => {
-      const labelMatches = item.label.toLowerCase().includes(q);
+  const createNavItem = (link: LinkDetails): Item => ({
+    label: link.label,
+    href: link.path,
+    selected: matchPaths(link.path),
+    badge: link.status && link.status !== "stable" ? <StatusBadge hasTitle status={link.status} /> : undefined,
+    renderItem: ({ children }: { children: ReactNode }) => (
+      <Link href={link.path} passHref legacyBehavior>
+        {children}
+      </Link>
+    ),
+  });
 
-      if (!isGroupItem(item)) return labelMatches ? item : null;
+  const normalizeNavTabs = (links: (LinkDetails | LinksSectionDetails)[]): (Item | GroupItem)[] => {
+    return links.map((link) => {
+      if ("links" in link) {
+        return {
+          label: link.label,
+          items: normalizeNavTabs(link.links),
+        } as GroupItem;
+      }
 
-      const items = item.items.reduce<(Item | GroupItem)[]>((acc, child) => {
-        const filtered = filterItem(child);
-        if (filtered) acc.push(filtered);
-        return acc;
-      }, []);
+      return createNavItem(link);
+    });
+  };
 
-      return labelMatches || items.length ? { ...item, items } : null;
-    };
+  const filterNavTree = (items: (Item | GroupItem)[], q: string): (Item | GroupItem)[] => {
+    const result: (Item | GroupItem)[] = [];
 
-    return sections.reduce<Section[]>((acc, section) => {
-      const items = section.items.reduce<(Item | GroupItem)[]>((acc, item) => {
-        const filtered = filterItem(item);
-        if (filtered) acc.push(filtered);
-        return acc;
-      }, []);
-      if (items.length) acc.push({ ...section, items });
-      return acc;
-    }, []);
-  };
+    for (const item of items) {
+      if (isGroupItem(item)) {
+        const filteredChildren = filterNavTree(item.items, q);
+        const matches = item.label.toLowerCase().includes(q);
 
-  const mapLinksToGroupItems = (sections: LinksSectionDetails[]): Section[] => {
-    const matchPaths = (linkPath: string) => {
-      const desiredPaths = [linkPath, `${linkPath}/code`];
-      const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
-      return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
-    };
+        if (matches || filteredChildren.length > 0) {
+          result.push({ ...item, items: filteredChildren });
+        }
+      } else {
+        if (item.label.toLowerCase().includes(q)) {
+          result.push(item);
+        }
+      }
+    }
 
-    return sections.map((section) => ({
-      title: section.label,
-      items: section.links.map((link) => ({
-        label: link.label,
-        href: link.path,
-        selected: matchPaths(link.path),
-        ...(link.status && {
-          badge: link.status !== "stable" ? <StatusBadge hasTitle status={link.status} /> : undefined,
-        }),
-        renderItem: ({ children }: { children: ReactNode }) => (
-          <Link key={link.path} href={link.path} passHref legacyBehavior>
-            {children}
-          </Link>
-        ),
-      })),
-    }));
+    return result;
   };
 
-  // TODO: ADD NEW CATEGORIZATION
+  const navItems: Section[] = useMemo(() => {
+    return LinksSections.map((section) => {
+      const baseItems = normalizeNavTabs(section.links);
+
+      const items = filter ? filterNavTree(baseItems, filter.trim().toLowerCase()) : baseItems;
 
-  const filteredSections = useMemo(() => {
-    const sections = mapLinksToGroupItems(LinksSections);
-    return filterSections(sections, filter);
-  }, [filter]);
+      return {
+        title: section.label,
+        items,
+      };
+    }).filter((section) => section.items.length > 0);
+  }, [currentPath, filter]);
 
   return (
     <CacheProvider value={emotionCache}>
@@ -103,14 +107,14 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
         header={<DxcApplicationLayout.Header logo={{ src: dxcLogo, alt: "DXC Technology" }} />}
         sidenav={
           <DxcApplicationLayout.Sidenav
-            navItems={filteredSections}
+            navItems={navItems}
             branding={isExpanded && <SidenavLogo />}
             topContent={
               isExpanded && (
                 <DxcTextInput
                   placeholder="Search docs"
                   value={filter}
-                  onChange={({ value }: { value: string }) => {
+                  onChange={({ value }) => {
                     setFilter(value);
                   }}
                   size="fillParent"

apps/website/pages/foundations/tokens/alias.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+import AliasTokensPage from "screens/foundations/tokens/AliasTokenList";
+
+const Tokens = () => (
+  <>
+    <Head>
+      <title>Alias Tokens — Halstack Design System</title>
+    </Head>
+    <AliasTokensPage />
+  </>
+);
+
+export default Tokens;

apps/website/pages/foundations/tokens/core.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+import CoreTokensPage from "screens/foundations/tokens/CoreTokenList";
+
+const Tokens = () => (
+  <>
+    <Head>
+      <title>Core Tokens — Halstack Design System</title>
+    </Head>
+    <CoreTokensPage />
+  </>
+);
+
+export default Tokens;

apps/website/pages/migration/16/component-updates.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+import Components16MigrationPage from "screens/migration/Components16MigrationPage";
+
+const Components16Migration = () => (
+  <>
+    <Head>
+      <title>Component updates in v16 — Halstack Design System</title>
+    </Head>
+    <Components16MigrationPage />
+  </>
+);
+
+export default Components16Migration;

apps/website/pages/migration/16/migrating-to-emotion.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+import EmotionPage from "screens/migration/EmotionMigrationPage";
+
+const EmotionMigration = () => (
+  <>
+    <Head>
+      <title>Migrating to Emotion — Halstack Design System</title>
+    </Head>
+    <EmotionPage />
+  </>
+);
+
+export default EmotionMigration;

apps/website/pages/migration/16/migrating-tokens.tsx

@@ -0,0 +1,13 @@
+import Head from "next/head";
+import TokensMigrationPage from "screens/migration/TokensMigrationPage";
+
+const TokensMigration = () => (
+  <>
+    <Head>
+      <title>Migrating tokens — Halstack Design System</title>
+    </Head>
+    <TokensMigrationPage />
+  </>
+);
+
+export default TokensMigration;

apps/website/screens/common/componentsList.json

@@ -44,7 +44,7 @@
   {
     "label": "Data grid",
     "path": "/components/data-grid",
-    "status": "experimental"
+    "status": "new"
   },
   {
     "label": "Date input",

apps/website/screens/common/pagesList.ts → apps/website/screens/common/pagesList.tsx

@@ -2,15 +2,15 @@ import componentsList from "./componentsList.json";
 
 export type ComponentStatus = "experimental" | "new" | "stable" | "legacy" | "deprecated";
 
-type LinkDetails = {
+export type LinkDetails = {
   label: string;
   path: string;
   status?: ComponentStatus;
 };
 
 export type LinksSectionDetails = {
   label: string;
-  links: LinkDetails[];
+  links: (LinkDetails | LinksSectionDetails)[];
 };
 
 type NavigationLinks = {
@@ -37,46 +37,69 @@ const principlesLinks: LinkDetails[] = [
   { label: "Localization", path: "/principles/localization" },
 ];
 
-const foundationsLinks: LinkDetails[] = [
+const tokensLinks: LinkDetails[] = [
+  { label: "Overview", path: "/foundations/tokens" },
+  { label: "Core tokens", path: "/foundations/tokens/core" },
+  { label: "Alias tokens", path: "/foundations/tokens/alias" },
+];
+
+const foundationsLinks: (LinkDetails | LinksSectionDetails)[] = [
   { label: "Color", path: "/foundations/color" },
   { label: "Elevation", path: "/foundations/elevation" },
   { label: "Height", path: "/foundations/height" },
   { label: "Iconography", path: "/foundations/iconography" },
   { label: "Layout", path: "/foundations/layout" },
   { label: "Spacing", path: "/foundations/spacing" },
-  { label: "Tokens", path: "/foundations/tokens" },
+  { label: "Tokens", links: tokensLinks },
   { label: "Typography", path: "/foundations/typography" },
 ];
 
+const v16Links: LinkDetails[] = [
+  { label: "Component updates", path: "/migration/16/component-updates" },
+  { label: "Migrating to Emotion", path: "/migration/16/migrating-to-emotion" },
+  { label: "Migrating tokens", path: "/migration/16/migrating-tokens" },
+];
+
+const migrationLinks: LinksSectionDetails[] = [{ label: "v16", links: v16Links }];
+
 const componentsLinks = componentsList as LinkDetails[];
 
 export const LinksSections: LinksSectionDetails[] = [
   { label: "Overview", links: overviewLinks },
   { label: "Principles", links: principlesLinks },
   { label: "Foundations", links: foundationsLinks },
+  { label: "Migration", links: migrationLinks },
   { label: "Utilities", links: utilitiesLinks },
   { label: "Components", links: componentsLinks },
 ];
 
+const isNavLink = (item: LinkDetails | LinksSectionDetails): item is LinkDetails => "path" in item;
+
+const flattenLinks = (items: (LinkDetails | LinksSectionDetails)[]): LinkDetails[] =>
+  items.flatMap((item) => (isNavLink(item) ? [item] : flattenLinks(item.links)));
+
 const getCurrentLinkIndex = (links: LinkDetails[], currentPath: string) => {
-  let currentLinkIndex = -1;
-  let matchedWords = 0;
-  links.forEach((link, index) => {
-    if (currentPath.startsWith(link.path) && link.path.length > matchedWords) {
-      currentLinkIndex = index;
-      matchedWords = link.path.length;
+  let current = -1;
+  let best = 0;
+
+  links.forEach((link, i) => {
+    if (currentPath.startsWith(link.path) && link.path.length > best) {
+      current = i;
+      best = link.path.length;
     }
   });
-  return currentLinkIndex;
+
+  return current;
 };
 
 export const getNavigationLinks = (currentPath: string): NavigationLinks => {
-  const links = LinksSections.flatMap((section) => section.links);
-  const currentLinkIndex = getCurrentLinkIndex(links, currentPath);
-  return currentLinkIndex === -1
-    ? {}
-    : {
-        nextLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
-        previousLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
-      };
+  const flatLinks = flattenLinks(LinksSections);
+
+  const index = getCurrentLinkIndex(flatLinks, currentPath);
+  if (index === -1) return {};
+
+  return {
+    previousLink: flatLinks[index - 1],
+    nextLink: flatLinks[index + 1],
+  };
 };

apps/website/screens/components/accordion/code/AccordionCodePage.tsx

@@ -126,12 +126,7 @@ const sections = [
                 <td>-</td>
               </tr>
               <tr>
-                <td>
-                  <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                    <StatusBadge status="new" />
-                    badge
-                  </DxcFlex>
-                </td>
+                <td>badge</td>
                 <td>
                   <TableCode>{"{ position: 'before' | 'after'; element: ReactNode }"}</TableCode>
                 </td>
@@ -190,25 +185,15 @@ const sections = [
                 <td>-</td>
               </tr>
               <tr>
-                <td>
-                  <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                    <StatusBadge status="new" />
-                    statusLight
-                  </DxcFlex>
-                </td>
+                <td>statusLight</td>
                 <td>
                   <TableCode>React.ReactNode</TableCode>
                 </td>
                 <td>Status light component to add extra value to the accordion.</td>
                 <td>-</td>
               </tr>
               <tr>
-                <td>
-                  <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                    <StatusBadge status="new" />
-                    subLabel
-                  </DxcFlex>
-                </td>
+                <td>subLabel</td>
                 <td>
                   <TableCode>string</TableCode>
                 </td>