From 202fd9c1e022b2bcee9830b0c644970d32492eb7 Mon Sep 17 00:00:00 2001
From: Guillaume NICOLAS <guin56@gmail.com>
Date: Thu, 27 Jul 2023 15:44:29 +0200
Subject: [PATCH] get back status page

---
 .../storybook/.storybook/blocks/Badges.tsx    | 70 ++++++-------------
 .../.storybook/docs/Badges.module.scss        | 10 ---
 packages/storybook/.storybook/docs/Badges.tsx | 10 +--
 .../storybook/.storybook/docs/StatusTable.tsx | 65 ++++++++++-------
 packages/storybook/.storybook/preview.js      | 27 -------
 .../src/design-system/Accordion/Accordion.mdx |  6 +-
 packages/storybook/src/status.json            |  7 ++
 7 files changed, 73 insertions(+), 122 deletions(-)
 create mode 100644 packages/storybook/src/status.json

diff --git a/packages/storybook/.storybook/blocks/Badges.tsx b/packages/storybook/.storybook/blocks/Badges.tsx
index b546ee4f72e..32edaee0ab8 100644
--- a/packages/storybook/.storybook/blocks/Badges.tsx
+++ b/packages/storybook/.storybook/blocks/Badges.tsx
@@ -1,61 +1,28 @@
-import { Fragment, useContext, useEffect, useState } from 'react';
-import { DocsContext } from '@storybook/blocks';
-import type { Globals } from '@storybook/csf';
-import type { DocsContextProps } from '@storybook/types';
-import { Helmet } from 'react-helmet';
-import { BackToTop, TableOfContents } from 'storybook-docs-toc';
-import { Divider, Form, StackVertical } from '@talend/design-system';
+import { useContext } from 'react';
+import { DocsContext, Unstyled } from '@storybook/blocks';
+import { BackToTop } from 'storybook-docs-toc';
 import { BadgeFigma, BadgeI18n, BadgeReact, BadgeStorybook, Badges } from '~docs';
-import { GLOBALS_UPDATED } from '@storybook/core-events';
-import { ComponentStatus, Status } from '.storybook/docs/StatusTable';
+import { Statuses } from '.storybook/docs/StatusTable';
+import statuses from '../../src/status.json';
 
-const useGlobalsCustom = (context: DocsContextProps): [Globals] => {
-	const storyContext = context.getStoryContext(context.storyById());
-	const [globals, setGlobals] = useState(storyContext.globals);
-
-	useEffect(() => {
-		const cb = (changed: { globals: Globals }) => {
-			setGlobals(changed.globals);
-		};
-		context.channel.on(GLOBALS_UPDATED, cb);
-		return () => context.channel.off(GLOBALS_UPDATED, cb);
-	}, []);
-
-	return [globals];
-};
-
-type BadgesBlockProps = {
-	status?: ComponentStatus;
-	figmaLink?: string;
-};
-
-export function BadgesBlock({ status = {}, figmaLink }: BadgesBlockProps) {
+export function BadgesBlock() {
 	const context = useContext(DocsContext);
 	const { story } = context.resolveOf('story', ['story']);
-	const { id, parameters, title } = story;
+	const { id, title, componentId } = story;
 
-	const [globals] = useGlobalsCustom(context);
+	const { status = {}, figmaLink, githubLink } = (statuses as Statuses)[componentId];
 
 	const titleArray = title.split('/');
 
 	const docsTitle = title.replace(/\//gi, ' / ');
 	const docsCategory = titleArray[0];
 
-	console.log('[GNI]-- stop');
-	const githubLink =
-		'https://github.com/Talend/ui/tree/master/packages/design-system/' +
-		parameters.fileName
-			.split('/')
-			.slice(1, parameters.fileName.split('/').length - 1)
-			.join('/')
-			.replace('/docs', '');
-
-	const isDesignSystemElementPage = ['design system'].find(term => {
-		return title?.toLocaleLowerCase().startsWith(term);
-	});
-
 	return (
-		<>
+		<Unstyled>
+			{/* 
+			
+			Doesn't work because it'll update iframe meta and not page meta, so when we share the link, meta won't be used
+			
 			<Helmet>
 				<title>{docsTitle}</title>
 				<meta property="og:title" content={titleArray[titleArray.length - 1]} />
@@ -66,10 +33,13 @@ export function BadgesBlock({ status = {}, figmaLink }: BadgesBlockProps) {
 					content={`https://via.placeholder.com/1000x500/F3F3F3/FF6D70?text=${docsTitle}`}
 				/>
 				{titleArray.length > 1 && <meta property="article:section" content={docsCategory} />}
-			</Helmet>
+			</Helmet> 
 
-			{/* <TableOfContents>
-			</TableOfContents> */}
+			Doesn't work anymore with SB7 DOM
+			
+			<TableOfContents/>
+			
+			*/}
 
 			<Badges>
 				<BadgeFigma status={status.figma} href={figmaLink} />
@@ -79,6 +49,6 @@ export function BadgesBlock({ status = {}, figmaLink }: BadgesBlockProps) {
 			</Badges>
 
 			<BackToTop />
-		</>
+		</Unstyled>
 	);
 }
diff --git a/packages/storybook/.storybook/docs/Badges.module.scss b/packages/storybook/.storybook/docs/Badges.module.scss
index edbc6956b96..483e726aa08 100644
--- a/packages/storybook/.storybook/docs/Badges.module.scss
+++ b/packages/storybook/.storybook/docs/Badges.module.scss
@@ -1,14 +1,4 @@
 @use '~@talend/design-tokens/lib/tokens';
 
 .badges {
-	position: absolute;
-	top: 40px;
-	left: calc(50% - 500px - 170px);
-	display: flex;
-	flex-direction: column;
-	align-items: end;
-	gap: tokens.$coral-spacing-xxs;
-	padding: 10px;
-	width: 150px;
-	z-index: 9999;
 }
diff --git a/packages/storybook/.storybook/docs/Badges.tsx b/packages/storybook/.storybook/docs/Badges.tsx
index 7eca4fe1562..38740c3ee2e 100644
--- a/packages/storybook/.storybook/docs/Badges.tsx
+++ b/packages/storybook/.storybook/docs/Badges.tsx
@@ -2,15 +2,17 @@ import type { ReactElement, PropsWithChildren } from 'react';
 
 import Badge from './Badge';
 
-import theme from './Badges.module.scss';
+import { StackHorizontal, StackItem } from '@talend/design-system';
 
 const StatusList = ({ children }: PropsWithChildren<any>) => {
 	return (
-		<ul className={theme.badges} role="list">
+		<StackHorizontal gap="XS" as="ul" role="list" align="center" margin={{ x: 0, y: 'M' }}>
 			{children.map((child: ReactElement<typeof Badge>, key: number) => (
-				<li key={key}>{child}</li>
+				<StackItem as="li" key={key}>
+					{child}
+				</StackItem>
 			))}
-		</ul>
+		</StackHorizontal>
 	);
 };
 
diff --git a/packages/storybook/.storybook/docs/StatusTable.tsx b/packages/storybook/.storybook/docs/StatusTable.tsx
index 639d3fd74a2..79891113ead 100644
--- a/packages/storybook/.storybook/docs/StatusTable.tsx
+++ b/packages/storybook/.storybook/docs/StatusTable.tsx
@@ -1,10 +1,20 @@
-import { FunctionComponent, Suspense, useEffect, useState } from 'react';
-import { addons } from '@storybook/addons';
+import { FunctionComponent, Suspense, ReactNode } from 'react';
+
+import { Unstyled } from '@storybook/blocks';
 import tokens from '@talend/design-tokens';
 
 import theme from './StatusTable.module.scss';
 
-const channel = addons.getChannel();
+import statuses from '../../src/status.json';
+
+export type Statuses = Record<
+	string,
+	{
+		status?: ComponentStatus;
+		figmaLink?: string;
+		githubLink?: string;
+	}
+>;
 
 export enum Status {
 	OK = 'ok',
@@ -22,13 +32,22 @@ export type ComponentStatus = {
 	i18n?: Status;
 };
 
-type PageWithStatus = {
-	[pageIdentifier: string]: {
-		title: string;
-		componentId: string;
-		parameters: { status?: ComponentStatus };
-	};
-};
+function withLink(children: ReactNode, href?: string) {
+	return href ? (
+		<a
+			{...{
+				href,
+				target: '_blank',
+				rel: 'noopener noreferrer',
+			}}
+		>
+			{children}
+		</a>
+	) : (
+		{ children }
+	);
+}
+
 const getHTMLStatus = (status?: Status) => {
 	const attrs = {
 		className: theme.tag,
@@ -107,15 +126,8 @@ const getComputedHTMLStatus = (status?: ComponentStatus) => {
 };
 
 const StatusTable = (props: FunctionComponent & { filter?: string }) => {
-	const [statuses, setStatuses] = useState<PageWithStatus>();
-
-	useEffect(() => {
-		channel.on('SET_STATUSES_BY_PAGE', setStatuses);
-		return () => channel.off('SET_STATUSES_BY_PAGE', setStatuses);
-	}, [channel]);
-
 	return (
-		<>
+		<Unstyled>
 			<div className={theme.legend}>
 				<dl className={theme.dl}>
 					<dt>Figma</dt>
@@ -144,10 +156,8 @@ const StatusTable = (props: FunctionComponent & { filter?: string }) => {
 						</tr>
 					</thead>
 					<tbody>
-						{statuses &&
-							Object.entries(statuses).map(([name, pageDetails], key) => {
-								const { componentId, title, parameters } = pageDetails || {};
-								const { status } = parameters || {};
+						{Object.entries(statuses as Statuses).map(
+							([componentId, { status, figmaLink, githubLink }], key) => {
 								const { figma, react, storybook, i18n } = status || {};
 								if (props.filter) {
 									if (!componentId.includes(props.filter)) {
@@ -158,19 +168,20 @@ const StatusTable = (props: FunctionComponent & { filter?: string }) => {
 									<tr key={key}>
 										<td>
 											{getComputedHTMLStatus(status)}{' '}
-											<a href={`?path=/docs/${componentId}`}>{title}</a>
+											{withLink(componentId, `?path=/docs/${componentId}`)}
 										</td>
-										<td>{getHTMLStatus(figma)}</td>
+										<td>{withLink(getHTMLStatus(figma), figmaLink)}</td>
 										<td>{getHTMLStatus(storybook)}</td>
-										<td>{getHTMLStatus(react)}</td>
+										<td>{withLink(getHTMLStatus(react), githubLink)}</td>
 										<td>{getHTMLStatus(i18n)}</td>
 									</tr>
 								);
-							})}
+							},
+						)}
 					</tbody>
 				</table>
 			</Suspense>
-		</>
+		</Unstyled>
 	);
 };
 
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index 3dfdb7aed10..64d1a196a3d 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -55,29 +55,6 @@ export const i18n = {
 	),
 };
 
-// const channel = addons.getChannel();
-
-// let statusByPage = {};
-// channel.once(SET_STORIES, eventData => {
-// 	statusByPage = Object.entries(eventData.stories).reduce(
-// 		(acc, [name, { title, componentId, parameters }]) => {
-// 			['components', 'templates', 'pages', 'wip-components'].forEach(prefix => {
-// 				if (name.toLocaleLowerCase().startsWith(prefix)) {
-// 					if (!acc[componentId]) {
-// 						acc[componentId] = {
-// 							title,
-// 							componentId,
-// 							parameters,
-// 						};
-// 					}
-// 				}
-// 			});
-// 			return acc;
-// 		},
-// 		{},
-// 	);
-// });
-
 export const parameters = {
 	docs: {
 		// toc: {
@@ -90,10 +67,6 @@ export const parameters = {
 		// 	},
 		// },
 		container: ({ children, context }) => {
-			// 	// useEffect(() => {
-			// 	// 	channel.emit('SET_STATUSES_BY_PAGE', statusByPage);
-			// 	// }, [statusByPage]);
-
 			const themeKey = context.store.globals.globals.theme || 'light';
 			const theme = create(
 				{
diff --git a/packages/storybook/src/design-system/Accordion/Accordion.mdx b/packages/storybook/src/design-system/Accordion/Accordion.mdx
index 2012ec8bae5..74cd5e88744 100644
--- a/packages/storybook/src/design-system/Accordion/Accordion.mdx
+++ b/packages/storybook/src/design-system/Accordion/Accordion.mdx
@@ -6,13 +6,11 @@ import * as Stories from './Accordion.stories';
 import { Accordion, StackVertical, InlineMessageWarning } from '@talend/design-system';
 
 <Meta of={Stories} />
-<Badges
-	status={{ figma: 'OK', storybook: 'wip', react: 'wip', i18n: 'na' }}
-	figmaLink="https://www.figma.com/file/CDfr4jLz1m6Ud2RNi4qpQJ/Accordion"
-/>
 
 # Accordion
 
+<Badges />
+
 <StackVertical
 	gap="XS"
 	margin={{
diff --git a/packages/storybook/src/status.json b/packages/storybook/src/status.json
new file mode 100644
index 00000000000..54472b20379
--- /dev/null
+++ b/packages/storybook/src/status.json
@@ -0,0 +1,7 @@
+{
+  "design-system-accordion": {
+    "status": { "figma": "ok", "storybook": "wip", "react": "wip", "i18n": "na" },
+    "figmaLink": "https://www.figma.com/file/CDfr4jLz1m6Ud2RNi4qpQJ/Accordion",
+    "githubLink": "https://github.com/Talend/ui/tree/master/packages/design-system/src/components/WIP/Accordion/Accordion.tsx"
+  }
+}