some customisation, cleaning and badges

Talend · Jul 27, 2023 · 1761148 · 1761148
1 parent cc8fc96
commit 1761148
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 205 deletions.
diff --git a/...orybook/.storybook/blocks/CustomBlock.tsx → ...es/storybook/.storybook/blocks/Badges.tsx b/...orybook/.storybook/blocks/CustomBlock.tsx → ...es/storybook/.storybook/blocks/Badges.tsx
@@ -7,6 +7,7 @@ import { BackToTop, TableOfContents } from 'storybook-docs-toc';
 import { Divider, Form, StackVertical } from '@talend/design-system';
 import { BadgeFigma, BadgeI18n, BadgeReact, BadgeStorybook, Badges } from '~docs';
 import { GLOBALS_UPDATED } from '@storybook/core-events';
+import { ComponentStatus, Status } from '.storybook/docs/StatusTable';
 
 const useGlobalsCustom = (context: DocsContextProps): [Globals] => {
 	const storyContext = context.getStoryContext(context.storyById());
@@ -23,7 +24,12 @@ const useGlobalsCustom = (context: DocsContextProps): [Globals] => {
 	return [globals];
 };
 
-export function CustomBlock() {
+type BadgesBlockProps = {
+	status?: ComponentStatus;
+	figmaLink?: string;
+};
+
+export function BadgesBlock({ status = {}, figmaLink }: BadgesBlockProps) {
 	const context = useContext(DocsContext);
 	const { story } = context.resolveOf('story', ['story']);
 	const { id, parameters, title } = story;
@@ -35,8 +41,7 @@ export function CustomBlock() {
 	const docsTitle = title.replace(/\//gi, ' / ');
 	const docsCategory = titleArray[0];
 
-	const { status = {}, figmaLink, dark = false } = parameters;
-
+	console.log('[GNI]-- stop');
 	const githubLink =
 		'https://github.com/Talend/ui/tree/master/packages/design-system/' +
 		parameters.fileName
@@ -63,32 +68,8 @@ export function CustomBlock() {
 				{titleArray.length > 1 && <meta property="article:section" content={docsCategory} />}
 			</Helmet>
 
-			<TableOfContents>
-				<StackVertical gap="XXS" padding={{ top: 'XS', left: '0', right: '0', bottom: '0' }}>
-					<Divider />
-					<Form.ToggleSwitch
-						name="dark-mode"
-						label="Dark mode"
-						onChange={() => {
-							console.log('setDarkMode(!hasDarkMode);');
-						}}
-						checked={true}
-					/>
-					<Form.ToggleSwitch
-						name="bootstrap"
-						label={'Bootstrap stylesheet'}
-						onChange={() => console.log('setBootstrapStylesheet(!hasBootstrapStylesheet)')}
-						checked={true}
-					/>
-
-					<Form.ToggleSwitch
-						name="iframes"
-						label={'Figma iframes'}
-						onChange={() => console.log('setFigmaIframe(!hasFigmaIframe)')}
-						checked={true}
-					/>
-				</StackVertical>
-			</TableOfContents>
+			{/* <TableOfContents>
+			</TableOfContents> */}
 
 			<Badges>
 				<BadgeFigma status={status.figma} href={figmaLink} />

diff --git a/packages/storybook/.storybook/blocks/index.ts b/packages/storybook/.storybook/blocks/index.ts
@@ -1 +1,3 @@
-export { CustomBlock } from './CustomBlock';
+import { BadgesBlock as Badges } from './Badges';
+
+export { Badges };
diff --git a/packages/storybook/.storybook/docs/Badge.tsx b/packages/storybook/.storybook/docs/Badge.tsx
@@ -65,13 +65,12 @@ export const renderStatus = (status?: Status) => {
 	}
 };
 
-const Badge = ({
-	href,
-	icon,
-	children,
-	status,
-	...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & { icon: string; status?: Status }) => {
+export type BadgeProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+	icon: string;
+	status?: Status;
+};
+
+const Badge = ({ href, icon, children, status, ...props }: BadgeProps) => {
 	let attrs;
 	if (href) {
 		attrs = {

diff --git a/packages/storybook/.storybook/docs/BadgeFigma.tsx b/packages/storybook/.storybook/docs/BadgeFigma.tsx
@@ -1,9 +1,12 @@
 import { memo } from 'react';
 import type { FunctionComponent } from 'react';
 
-import Badge from './Badge';
+import Badge, { BadgeProps } from './Badge';
+import { Status } from './StatusTable';
 
-const FigmaStatus = (props: FunctionComponent) => {
+type FigmaStatusProps = Omit<BadgeProps, 'icon'>;
+
+const FigmaStatus = (props: FigmaStatusProps) => {
 	return (
 		<Badge {...props} icon="figma">
 			Figma

diff --git a/packages/storybook/.storybook/docs/BadgeI18n.tsx b/packages/storybook/.storybook/docs/BadgeI18n.tsx
@@ -1,9 +1,11 @@
 import { memo } from 'react';
 import type { FunctionComponent } from 'react';
 
-import Badge from './Badge';
+import Badge, { BadgeProps } from './Badge';
+import { Status } from './StatusTable';
 
-const I18nStatus = (props: FunctionComponent) => {
+type I18nStatusProps = Omit<BadgeProps, 'icon'>;
+const I18nStatus = (props: I18nStatusProps) => {
 	return (
 		<Badge {...props} icon="i18next">
 			i18n

diff --git a/packages/storybook/.storybook/docs/BadgeReact.tsx b/packages/storybook/.storybook/docs/BadgeReact.tsx
@@ -1,9 +1,11 @@
 import { memo } from 'react';
 import type { FunctionComponent } from 'react';
 
-import Badge from './Badge';
+import Badge, { BadgeProps } from './Badge';
 
-const ReactStatus = (props: FunctionComponent) => {
+type ReactStatusProps = Omit<BadgeProps, 'icon'>;
+
+const ReactStatus = (props: ReactStatusProps) => {
 	return (
 		<Badge {...props} icon="react">
 			React

diff --git a/packages/storybook/.storybook/docs/BadgeStorybook.tsx b/packages/storybook/.storybook/docs/BadgeStorybook.tsx
@@ -1,9 +1,11 @@
 import { memo } from 'react';
 import type { FunctionComponent } from 'react';
 
-import Badge from './Badge';
+import Badge, { BadgeProps } from './Badge';
 
-const StorybookStatus = (props: FunctionComponent) => {
+type StorybookStatusProps = Omit<BadgeProps, 'icon'>;
+
+const StorybookStatus = (props: StorybookStatusProps) => {
 	return (
 		<Badge {...props} icon="storybook">
 			Storybook

diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
@@ -62,6 +62,7 @@ const config = {
 		config.resolve.alias = {
 			...existingAlias,
 			'~docs': path.resolve(__dirname, './docs'),
+			'~blocks': path.resolve(__dirname, './blocks'),
 		};
 
 		config.resolve.fallback = {

diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
@@ -1,32 +1,12 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { Helmet } from 'react-helmet';
-import { useLocalStorage } from 'react-use';
+import React from 'react';
 
-import { default as i18next } from 'i18next';
 import prettier from 'prettier/standalone';
 import prettierBabel from 'prettier/parser-babel';
 import { addons } from '@storybook/addons';
 
-import { DocsContainer, useGlobals } from '@storybook/blocks';
-import { H1, H2, H3, H4, H5, H6 } from '@storybook/components';
-import { MDXProvider } from '@mdx-js/react';
-import {
-	Meta,
-	Title,
-	Subtitle,
-	Description,
-	Primary,
-	Controls,
-	Stories,
-	Markdown,
-} from '@storybook/blocks';
-import { useChannel } from '@storybook/preview-api';
-import { GLOBALS_UPDATED } from '@storybook/core-events';
-
-import { ThemeProvider, useTheme } from '@storybook/theming';
+import { DocsContainer } from '@storybook/blocks';
 
-import { SET_STORIES, UPDATE_GLOBALS } from '@storybook/core-events';
-import { BackToTop, TableOfContents } from 'storybook-docs-toc';
+import { SET_STORIES } from '@storybook/core-events';
 import '@talend/storybook-docs/dist/globalStyles.min.css';
 
 import {
@@ -51,28 +31,7 @@ import {
 } from '@talend/locales-tui-forms';
 
 import 'focus-outline-manager';
-
-import { BadgeFigma, BadgeI18n, BadgeReact, Badges, BadgeStorybook } from './docs';
-import { Divider, Form, light, StackVertical } from '@talend/design-system';
-import { ensure, create, themes } from '@storybook/theming';
-import { themeDark, themeLight } from '@talend/storybook-docs';
-
-const TokenOrder = [
-	'Colors',
-	'Color Compositions',
-	'Color Charts',
-	'Branding',
-	'Gradients',
-	'Typography',
-	'Measures',
-	'Opacity',
-	'Radius',
-	'Borders',
-	'Shadows',
-	'Transitions',
-	'Elevations',
-	'Breakpoints',
-];
+import { useThemeSwitcher } from './utils/ThemeSwitcher.hook';
 
 export const i18n = {
 	namespaces: [
@@ -97,57 +56,32 @@ 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;
-		},
-		{},
-	);
-});
-
-const useThemeSwitcher = () => {
-	// fetch global to get current theme
-	const [theme, setTheme] = useState();
-
-	useEffect(() => {
-		const channel = addons.getChannel();
-		channel.on(GLOBALS_UPDATED, ({ globals: { theme } }) => {
-			console.log('[GNI]-- globals updated', theme);
-			setTheme(theme);
-		});
-		return () => channel.removeAllListeners(GLOBALS_UPDATED);
-	}, []);
-
-	const sbTheme = useMemo(() => {
-		if (theme) {
-			console.log('[GNI]-- theme changed', theme);
-			return create({ dark: themeDark, light: themeLight }[theme]);
-		}
-	}, [theme]);
-
-	return {
-		theme: sbTheme,
-	};
-};
+// const channel = addons.getChannel();
+
+// let statusByPage = {};
+// channel.once(SET_STORIES, eventData => {
+// 	console.log('[GNI]-- 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: {
-		// theme: create({ ...light, brandImage: logo }),
 		// toc: {
 		// 	// warning it's broken
 		// 	headingSelector: 'h1, h2, h3',
@@ -158,63 +92,13 @@ export const parameters = {
 		// 	},
 		// },
 		container: ({ theme, ...props }) => {
-			// 	const [hasDarkMode, setDarkMode] = useLocalStorage('coral--has-dark-mode', false);
-			// 	const [hasBootstrapStylesheet, setBootstrapStylesheet] = useLocalStorage(
-			// 		'coral--has-bootstrap-stylesheet',
-			// 		true,
-			// 	);
-
-			// 	// const [{ theme, locale }] = useGlobals();
-			// 	const theme = props.context.store.globals.globals.theme;
-			// 	const locale = props.context.store.globals.globals.locale;
-			// 	console.log('[GNI]-- globals', { theme, locale });
-
-			// 	const hasDarkTheme = false; // title.toLocaleLowerCase().includes('dark');
-
-			// 	// useEffect(() => {
-			// 	// 	channel.emit(UPDATE_GLOBALS, {
-			// 	// 		globals: { theme: hasDarkMode ? 'dark' : 'light' },
-			// 	// 	});
-			// 	// }, [hasDarkMode]);
-
 			// 	// useEffect(() => {
 			// 	// 	channel.emit('SET_STATUSES_BY_PAGE', statusByPage);
 			// 	// }, [statusByPage]);
 
-			// 	// useEffect(() => {
-			// 	// 	const hasDarkModeFromToolbar = theme === 'dark';
-			// 	// 	if (hasDarkModeFromToolbar != hasDarkMode) {
-			// 	// 		setDarkMode(hasDarkModeFromToolbar);
-			// 	// 	}
-			// 	// }, [theme]);
-
-			// 	// useEffect(() => {
-			// 	// 	document
-			// 	// 		.querySelectorAll('#bootstrap-theme')
-			// 	// 		.forEach(link => (link.disabled = !hasBootstrapStylesheet));
-			// 	// }, [hasBootstrapStylesheet]);
-
-			// 	// useEffect(() => {
-			// 	// 	i18next.changeLanguage(locale);
-			// 	// }, [locale]);
-
-			// 	// function DarkThemeWrapper({ children }) {
-			// 	// 	if (hasDarkTheme) {
-			// 	// 		return <div data-theme="dark">{children}</div>;
-			// 	// 	}
+			const initialTheme = props.context.store.globals.globals.theme;
 
-			// 	// 	return <>{children}</>;
-			// 	// }
-
-			// useChannel({
-			// 	[GLOBALS_UPDATED]: event => {
-			// 		console.log('[GNI]-- global updated', event);
-			// 	},
-			// });
-
-			const { theme: previewTheme } = useThemeSwitcher();
-
-			console.log('[GNI]-- theme updated', theme);
+			const { theme: previewTheme } = useThemeSwitcher(initialTheme);
 
 			return <DocsContainer {...props} theme={previewTheme} />;
 		},
@@ -255,7 +139,26 @@ export const parameters = {
 				'Component catalog',
 				'Content',
 				'Design Tokens',
-				['About tokens', 'Light', TokenOrder, 'Dark', TokenOrder],
+				[
+					'About tokens',
+					'Light',
+					[
+						'Colors',
+						'Color Compositions',
+						'Color Charts',
+						'Branding',
+						'Gradients',
+						'Typography',
+						'Measures',
+						'Opacity',
+						'Radius',
+						'Borders',
+						'Shadows',
+						'Transitions',
+						'Elevations',
+						'Breakpoints',
+					],
+				],
 				'Design System',
 				[
 					'Accordion',