Merge branch 'acherkashin-dev/specify-tabs' into v3

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.

addon/src/Panel.tsx

@@ -21,13 +21,19 @@ export const Panel: React.FC<PanelProps> = (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 (
     <AddonPanel {...props}>
       <>
         <style>{styleInjections}</style>
 
         <ScrollArea vertical horizontal>
           <Tabs
+            key={key}
             actions={{ onSelect: (id) => setActiveCategory(id) }}
             selected={activeCategory}
           >

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(() => {
@@ -76,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);
     }
 
@@ -120,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,

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']
+    }
+  }
+}

addon/src/types/config.types.ts

@@ -6,6 +6,7 @@ export interface Config {
   styleInjection?: string;
   pageSize?: number;
   presenters?: PresenterMapType;
+  tabs?: string[];
 }
 
 export interface File {