From e257d4103c5a4a82b34ddae28be4e86dd1100bdb Mon Sep 17 00:00:00 2001 From: Cherkashin Alexander Date: Sun, 12 Nov 2023 14:28:54 +0300 Subject: [PATCH 1/5] Feature request: specify which tabs to display #122 --- addon/src/hooks/useTokenTabs.ts | 9 ++++++++- addon/src/stories/Button.stories.ts | 11 ++++++++++- addon/src/types/config.types.ts | 1 + 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/addon/src/hooks/useTokenTabs.ts b/addon/src/hooks/useTokenTabs.ts index cfa6a5f..7d857ad 100644 --- a/addon/src/hooks/useTokenTabs.ts +++ b/addon/src/hooks/useTokenTabs.ts @@ -39,18 +39,25 @@ export function useTokenTabs(config?: Config) { new Set(categories.map((category) => category?.name)) ); - return categoryNames.map((name) => ({ + let tabs = categoryNames.map((name) => ({ label: name, categories: categories.filter( (category) => category?.name === name ) as Category[], })); + + if ((config?.tabs ?? []).length !== 0) { + tabs = tabs.filter(tab => config.tabs.includes(tab.label)) + } + + return tabs; }, [ cssCategories, lessCategories, scssCategories, svgIconCategories, imageCategories, + config ]); useEffect(() => { diff --git a/addon/src/stories/Button.stories.ts b/addon/src/stories/Button.stories.ts index 35c969a..ecba43d 100644 --- a/addon/src/stories/Button.stories.ts +++ b/addon/src/stories/Button.stories.ts @@ -25,5 +25,14 @@ export const Primary: Story = { args: { primary: true, label: "Button", - }, + }, }; + +export const ColorsOnly: Story = { + args: { ...Primary.args }, + parameters: { + designToken: { + tabs: ['Colors'] + } + } +} \ No newline at end of file diff --git a/addon/src/types/config.types.ts b/addon/src/types/config.types.ts index a3577fa..f02cbbf 100644 --- a/addon/src/types/config.types.ts +++ b/addon/src/types/config.types.ts @@ -6,6 +6,7 @@ export interface Config { styleInjection?: string; pageSize?: number; presenters?: PresenterMapType; + tabs?: string[]; } export interface File { From 8ddfc2886dcf5cdb760beb32ec70f5f902beb3b4 Mon Sep 17 00:00:00 2001 From: Cherkashin Alexander Date: Sun, 12 Nov 2023 14:29:02 +0300 Subject: [PATCH 2/5] Remove unused Panel.tsx --- addon/src/components/Panel.tsx | 59 ---------------------------------- 1 file changed, 59 deletions(-) delete mode 100644 addon/src/components/Panel.tsx diff --git a/addon/src/components/Panel.tsx b/addon/src/components/Panel.tsx deleted file mode 100644 index 71e5e8c..0000000 --- a/addon/src/components/Panel.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from "react"; -import { useParameter } from "@storybook/manager-api"; -import { ActionBar, ScrollArea, Tabs } from "@storybook/components"; -import { useTokenTabs } from "../hooks/useTokenTabs"; -import { Config } from "../types/config.types"; -import { TokenTab } from "./TokenTab"; - -export const Panel = () => { - const config = useParameter("designToken"); - const { - activeCategory, - cardView, - setActiveCategory, - setCardView, - styleInjections, - tabs, - } = useTokenTabs(config); - - return ( - <> - - - - setActiveCategory(id) }} - selected={activeCategory} - > - {tabs.map((tab) => { - return ( -
- {activeCategory === tab.label && ( - - )} -
- ); - })} - - - - { - setCardView(!cardView); - }, - title: cardView ? "Table View" : "Card View", - }, - ]} - /> - - ); -}; From 8f6e09876bf4d214f4aa0a0e14c5035a16501483 Mon Sep 17 00:00:00 2001 From: Cherkashin Alexander Date: Sun, 12 Nov 2023 14:29:11 +0300 Subject: [PATCH 3/5] Fix error warning --- addon/src/Panel.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/addon/src/Panel.tsx b/addon/src/Panel.tsx index d0230f1..ebfb12f 100644 --- a/addon/src/Panel.tsx +++ b/addon/src/Panel.tsx @@ -21,6 +21,11 @@ export const Panel: React.FC = (props) => { tabs, } = useTokenTabs(config); + // React shows a warning in the console when the count of tabs is changed because identifiers of tabs are used in the dependency array of the useMemo hook. + // To prevent this, we fully re-render the Tabs control by providing a new key when tabs are changed. + // https://github.com/storybookjs/storybook/blob/176017d03224f8d0b4add227ebf29a3705f994f5/code/ui/components/src/components/tabs/tabs.tsx#L151 + const key = (tabs ?? []).map(item => item.label).join('-'); + return ( <> @@ -28,6 +33,7 @@ export const Panel: React.FC = (props) => { setActiveCategory(id) }} selected={activeCategory} > From c78e4bfff877d577d3306523665258d807422786 Mon Sep 17 00:00:00 2001 From: Cherkashin Alexander Date: Sun, 12 Nov 2023 15:18:23 +0300 Subject: [PATCH 4/5] Add documentation --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index 297df42..2220e7b 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Display design token documentation generated from your stylesheets and icon file - [Available presenters](#available-presenters) - [Advanced configuration](#advanced-configuration) - [Default tab](#default-tab) + - [Visible tabs](#visible-tabs) - [Style injection](#style-injection) - [Disable the addon panel](#disable-the-addon-panel) - [Token search visibility](#token-search-visibility) @@ -120,6 +121,20 @@ export default { }; ``` +### Visible tabs + +If you don't want to show all available tabs, it is possible to specify which tabs should be shown in the addon panel via the `tabs` setting. + +```javascript +export default { + parameters: { + designToken: { + tabs: ['Colors'] + } + } +} +``` + ### Style injection To inject styles needed by your design token documentation, use the `styleInjection` parameter. A typical usecase are web fonts needed by your font family tokens. Please note that the styleInjection parameter only works with valid css. From 42ed8c6173f4d291faf4624aaf89555d8c85d1da Mon Sep 17 00:00:00 2001 From: Cherkashin Alexander Date: Sun, 12 Nov 2023 15:44:48 +0300 Subject: [PATCH 5/5] Use first tab as active if incorrect default tab provided or not provided at all --- addon/src/hooks/useTokenTabs.ts | 27 ++++----------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/addon/src/hooks/useTokenTabs.ts b/addon/src/hooks/useTokenTabs.ts index 7d857ad..a0d7e43 100644 --- a/addon/src/hooks/useTokenTabs.ts +++ b/addon/src/hooks/useTokenTabs.ts @@ -83,37 +83,16 @@ export function useTokenTabs(config?: Config) { if (cssTokens) { setCssCategories(cssTokens.categories); - - if (!config?.defaultTab && cssTokens.categories.length > 0) { - setActiveCategory( - (activeCategory) => activeCategory || cssTokens.categories[0].name - ); - } - setStyleInjections((current) => current + cssTokens.injectionStyles); } if (lessTokens) { setLessCategories(lessTokens.categories); - - if (!config?.defaultTab && lessTokens.categories.length > 0) { - setActiveCategory( - (activeCategory) => activeCategory || lessTokens.categories[0].name - ); - } - setStyleInjections((current) => current + lessTokens.injectionStyles); } if (scssTokens) { setScssCategories(scssTokens.categories); - - if (!config?.defaultTab && scssTokens.categories.length > 0) { - setActiveCategory( - (activeCategory) => activeCategory || scssTokens.categories[0].name - ); - } - setStyleInjections((current) => current + scssTokens.injectionStyles); } @@ -127,10 +106,12 @@ export function useTokenTabs(config?: Config) { }, [config, tokenFiles]); useEffect(() => { - if (config?.defaultTab) { + if (config?.defaultTab && tabs.find(item => item.label === config.defaultTab)) { setActiveCategory(config.defaultTab); + } else if (tabs.length > 0) { + setActiveCategory(tabs[0].label); } - }, [config]); + }, [config, tabs]); return { activeCategory,