From 8da8663889dcc831c4e596961d39383e7d09c9ab Mon Sep 17 00:00:00 2001 From: Guillaume NICOLAS Date: Wed, 26 Jul 2023 16:01:57 +0200 Subject: [PATCH] gni progress --- packages/storybook-docs/src/globalStyles.scss | 18 +- .../.storybook/blocks/CustomBlock.tsx | 103 +++++++ packages/storybook/.storybook/blocks/index.ts | 1 + packages/storybook/.storybook/main.js | 1 + packages/storybook/.storybook/manager.js | 2 +- packages/storybook/.storybook/preview.js | 255 +++++++----------- packages/storybook/src/Welcome.stories.mdx | 15 +- .../src/design-system/Accordion/Accordion.mdx | 48 +--- .../Accordion/Accordion.stories.tsx | 15 +- packages/storybook/tsconfig.json | 4 +- .../.storybook-templates/preview.js | 8 +- 11 files changed, 248 insertions(+), 222 deletions(-) create mode 100644 packages/storybook/.storybook/blocks/CustomBlock.tsx create mode 100644 packages/storybook/.storybook/blocks/index.ts diff --git a/packages/storybook-docs/src/globalStyles.scss b/packages/storybook-docs/src/globalStyles.scss index 78211d503ae..b1616456d46 100644 --- a/packages/storybook-docs/src/globalStyles.scss +++ b/packages/storybook-docs/src/globalStyles.scss @@ -228,12 +228,12 @@ html { margin: 0 0 tokens.$coral-spacing-m 0; } - .sbdocs-h1, - .sbdocs-h2, - .sbdocs-h3, - .sbdocs-h4, - .sbdocs-h5, - .sbdocs-h6 { + h1, + h2, + h3, + h4, + h5, + h6 { border: none; margin: tokens.$coral-spacing-l 0 tokens.$coral-spacing-m 0; color: tokens.$coral-color-neutral-text; @@ -363,13 +363,13 @@ html { // stylelint-disable-next-line selector-no-qualifying-type &.sbdocs-preview pre.prismjs { - background: #022E4D; + background: #022e4d; } kbd { padding: 0.25rem 0.5rem; color: #202020; - background-color: #EEE; + background-color: #eee; border-radius: 0.4rem; border: 1px solid #606060; font-size: 1.2rem; @@ -400,7 +400,7 @@ html { & > dt::before { content: '#'; - color: #FF6D70; + color: #ff6d70; padding-right: 1ch; } diff --git a/packages/storybook/.storybook/blocks/CustomBlock.tsx b/packages/storybook/.storybook/blocks/CustomBlock.tsx new file mode 100644 index 00000000000..6446cb7619f --- /dev/null +++ b/packages/storybook/.storybook/blocks/CustomBlock.tsx @@ -0,0 +1,103 @@ +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 { BadgeFigma, BadgeI18n, BadgeReact, BadgeStorybook, Badges } from '~docs'; +import { GLOBALS_UPDATED } from '@storybook/core-events'; + +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]; +}; + +export function CustomBlock() { + const context = useContext(DocsContext); + const { story } = context.resolveOf('story', ['story']); + const { id, parameters, title } = story; + + const [globals] = useGlobalsCustom(context); + + const titleArray = title.split('/'); + + const docsTitle = title.replace(/\//gi, ' / '); + const docsCategory = titleArray[0]; + + const { status = {}, figmaLink, dark = false } = parameters; + + 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 ( + <> + + {docsTitle} + + + + + {titleArray.length > 1 && } + + + + + + { + console.log('setDarkMode(!hasDarkMode);'); + }} + checked={true} + /> + console.log('setBootstrapStylesheet(!hasBootstrapStylesheet)')} + checked={true} + /> + + console.log('setFigmaIframe(!hasFigmaIframe)')} + checked={true} + /> + + + + + + + + + + + + + ); +} diff --git a/packages/storybook/.storybook/blocks/index.ts b/packages/storybook/.storybook/blocks/index.ts new file mode 100644 index 00000000000..a47ea166990 --- /dev/null +++ b/packages/storybook/.storybook/blocks/index.ts @@ -0,0 +1 @@ +export { CustomBlock } from './CustomBlock'; diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index 9ee84a394a5..8ad156a535a 100644 --- a/packages/storybook/.storybook/main.js +++ b/packages/storybook/.storybook/main.js @@ -15,6 +15,7 @@ const STORIES = [ `${rootPath}src/content/docs/Conventions.stories.@(js|tsx|mdx)`, `${rootPath}src/content/docs/Capitalization.stories.@(js|tsx|mdx)`, `${rootPath}src/content/docs/Wording.stories.@(js|tsx|mdx)`, + `${rootPath}src/design-system/**/*.stories.@(js|tsx)`, `${rootPath}src/design-system/**/*.mdx`, // `${rootPath}../components/**/*.stories.@(js|tsx|mdx)`, // `${rootPath}../forms/**/*.stories.@(js|tsx|mdx)`, diff --git a/packages/storybook/.storybook/manager.js b/packages/storybook/.storybook/manager.js index ca1b2eddcdf..9c0820db26c 100644 --- a/packages/storybook/.storybook/manager.js +++ b/packages/storybook/.storybook/manager.js @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import light from '@talend/storybook-docs/lib/themes/light'; import '@talend/storybook-docs/dist/managerStyles.min.css'; diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js index 5089152b318..4df37c29a88 100644 --- a/packages/storybook/.storybook/preview.js +++ b/packages/storybook/.storybook/preview.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState, createContext } from 'react'; import { Helmet } from 'react-helmet'; import { useLocalStorage } from 'react-use'; @@ -7,7 +7,20 @@ import prettier from 'prettier/standalone'; import prettierBabel from 'prettier/parser-babel'; import { addons } from '@storybook/addons'; -import { DocsContainer } from '@storybook/addon-docs'; +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 { SET_STORIES, UPDATE_GLOBALS } from '@storybook/core-events'; import { BackToTop, TableOfContents } from 'storybook-docs-toc'; import '@talend/storybook-docs/dist/globalStyles.min.css'; @@ -37,8 +50,9 @@ import 'focus-outline-manager'; import { BadgeFigma, BadgeI18n, BadgeReact, Badges, BadgeStorybook } from './docs'; import { Divider, Form, StackVertical, ThemeProvider } from '@talend/design-system'; - -import { dark, light } from '@talend/design-system'; +import { ensure, create, themes } from '@storybook/theming'; +import light from '@talend/storybook-docs/lib/themes/light'; +import logo from './logo.svg'; const TokenOrder = [ 'Colors', @@ -80,23 +94,6 @@ export const i18n = { ), }; -export const globalTypes = { - locale: { - name: 'Locale', - defaultValue: 'en', - toolbar: { - icon: 'globe', - items: [ - { value: 'zh', title: 'Chinese' }, - { value: 'en', title: 'English' }, - { value: 'fr', title: 'French' }, - { value: 'de', title: 'German' }, - { value: 'ja', title: 'Japanese' }, - ], - }, - }, -}; - const channel = addons.getChannel(); let statusByPage = {}; @@ -122,135 +119,81 @@ channel.once(SET_STORIES, eventData => { export const parameters = { docs: { + // theme: create({ ...light, brandImage: logo }), + // toc: { + // // warning it's broken + // headingSelector: 'h1, h2, h3', + // title: 'Table of Contents', + // disable: false, + // unsafeTocbotOptions: { + // orderedList: false, + // }, + // }, container: props => { - const [hasDarkMode, setDarkMode] = useLocalStorage('coral--has-dark-mode', false); - const [hasBootstrapStylesheet, setBootstrapStylesheet] = useLocalStorage( - 'coral--has-bootstrap-stylesheet', - true, - ); - - // const { id, parameters, globals, title } = props.context; - // not shure about this but this is where i found the id, title and parameters variables - // globals is still missing - const { id, parameters, title } = props.context.attachedCSFFile?.meta; - const theme = props.context.store.globals.globals.theme; - const locale = props.context.store.globals.globals.locale; - - const hasDarkTheme = 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]); - - const titleArray = title?.split('/'); - - const docsTitle = title?.replaceAll(/\//gi, ' / '); - const docsCategory = titleArray[0]; - - const { status = {}, figmaLink } = parameters; - - 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); - }); - - function DarkThemeWrapper({ children }) { - if (hasDarkTheme) { - return
{children}
; - } - - return <>{children}; - } + // 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
{children}
; + // // } + + // // return <>{children}; + // // } return ( - <> - - - {docsTitle} - - - - - {titleArray.length > 1 && } - - - - {isDesignSystemElementPage && ( - - - { - setDarkMode(!hasDarkMode); - }} - checked={hasDarkMode} - /> - setBootstrapStylesheet(!hasBootstrapStylesheet)} - checked={!!hasBootstrapStylesheet} - /> - {/* - setFigmaIframe(!hasFigmaIframe)} - checked={!!hasFigmaIframe} - /> - */} - - )} - - - {isDesignSystemElementPage && status && ( - - - - - - - )} - - - - - - + { + console.log('[GNI]-- render h1'); + return

; + }, + h2: H2, + h3: H3, + h4: H4, + h5: H5, + h6: H6, + }} + > + + ); }, source: { @@ -335,22 +278,6 @@ export const parameters = { 'Tooltip', ], ], - } /**/, + }, }, }; - -export const decorators = [ - (Story, context) => { - const { globals = {} } = context; - - const { locale: localeKey, theme: themeKey } = globals; - if (localeKey) i18next.changeLanguage(localeKey); - console.log('@@ decorator context : ', context); - //TODO: backport theme switcher to scripts-config-storybook and remove this - return ( - - - - ); - }, -]; diff --git a/packages/storybook/src/Welcome.stories.mdx b/packages/storybook/src/Welcome.stories.mdx index 77b18f7f2dd..0f824b2d162 100644 --- a/packages/storybook/src/Welcome.stories.mdx +++ b/packages/storybook/src/Welcome.stories.mdx @@ -1,4 +1,5 @@ import { Meta } from '@storybook/addon-docs'; +import { Canvas } from '@storybook/blocks'; import { Card, Grid, SearchBar } from '~docs'; @@ -9,14 +10,12 @@ import Welcome from './Welcome';
-

Welcome

-

- Dive into the single source of truth for building Talend{' '} - products. -
- Coral is a series of assets and components documentation used to create unified user experiences - at Talend. -

+ +

Welcome

+ + Dive into the single source of truth for building [Talend](https://www.talend.com) products.
+ Coral is a series of assets and components documentation used to create unified user experiences at Talend. +
diff --git a/packages/storybook/src/design-system/Accordion/Accordion.mdx b/packages/storybook/src/design-system/Accordion/Accordion.mdx index b7edbfa35b5..6bc621d5b8c 100644 --- a/packages/storybook/src/design-system/Accordion/Accordion.mdx +++ b/packages/storybook/src/design-system/Accordion/Accordion.mdx @@ -1,18 +1,12 @@ -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Use } from '~docs'; +import { Canvas, Meta } from '@storybook/blocks'; +import { CustomBlock } from '../../../.storybook/blocks/CustomBlock'; import * as Stories from './Accordion.stories'; -import { Accordion } from '@talend/design-system'; +import { Accordion, StackVertical, InlineMessageWarning } from '@talend/design-system'; - + + # Accordion @@ -36,15 +30,11 @@ Accordion is used to display expandable/collapsable cards with a title. ## Collapsible panel - - - + ## Collapsible panel with status - - - + ## Variations @@ -52,9 +42,7 @@ Accordion is used to display expandable/collapsable cards with a title. A disabled panel will hide its chevron and action, will not be clickable and will display its title in `neutral-text-disabled`. - - - + **Small size** @@ -62,9 +50,7 @@ Use the prop `size` to change the height, font size and icon size of the panel h (currently there is only M(default) and S supported) - - - + **With action** @@ -74,9 +60,7 @@ The prop `action` takes an object with 3 attributes : - title: the content of the tooltip displayed on mouseOver - callback: a function called when the action is triggered - - - + **With metadata** @@ -86,9 +70,7 @@ A vertical divider is inserted between each metadata. Using Accordions that way is discouraged. - - - + ## Accordion wrapper @@ -96,15 +78,11 @@ You can wrap a group of panels with an Accordion component. It will control the expand/collapse of each panel so that only one is open at the same time. - - - + ## group of panels - - - + ## Accessibility diff --git a/packages/storybook/src/design-system/Accordion/Accordion.stories.tsx b/packages/storybook/src/design-system/Accordion/Accordion.stories.tsx index 088910749f6..478d3fb782a 100644 --- a/packages/storybook/src/design-system/Accordion/Accordion.stories.tsx +++ b/packages/storybook/src/design-system/Accordion/Accordion.stories.tsx @@ -1,8 +1,19 @@ -import { Story } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { Accordion, CollapsiblePanel, StackVertical, TagSuccess } from '@talend/design-system'; -export default { component: Accordion }; +const meta: Meta = { + title: 'Design System/Accordion', + component: Accordion, + parameters: { + status: { figma: 'OK', storybook: 'wip', react: 'wip', i18n: 'na' }, + figmaLink: 'https://www.figma.com/file/CDfr4jLz1m6Ud2RNi4qpQJ/Accordion', + }, +}; + +export default meta; + +type Story = StoryObj; const SampleParagraph = () => (

diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json index b410c614448..804a3dd2219 100644 --- a/packages/storybook/tsconfig.json +++ b/packages/storybook/tsconfig.json @@ -4,13 +4,15 @@ "../../node_modules/cypress", "cypress/**/*", ".storybook/docs/**/*", + ".storybook/blocks/**/*", "src/**/*", "custom.d.ts" ], "compilerOptions": { "baseUrl": ".", "paths": { - "~docs": [".storybook/docs"] + "~docs": [".storybook/docs"], + "~blocks": [".storybook/blocks"] }, "module": "CommonJs", "rootDirs": [".storybook", "cypress", "src"], diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js index 42cbfcc7bd1..1d3623a034c 100644 --- a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js +++ b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js @@ -37,9 +37,10 @@ const defaultPreview = { toolbar: { icon: 'paintbrush', items: [ - { value: 'light', left: '⚪️', title: 'Default theme' }, - { value: 'dark', left: '⚫️', title: 'Dark theme' }, + { value: 'light', left: '☀️', title: 'Light mode' }, + { value: 'dark', left: '🌑', title: 'Dark mode' }, ], + dynamicTitle: true, }, }, locale: { @@ -82,6 +83,9 @@ const defaultPreview = { }, cmfDecorator ].filter(Boolean), + parameters:{ + + } };