feat(createStoryMetaSettings): allow generating internal stories and …

…autodocs page with metasettings helper
mondaycom · Apr 21, 2024 · 4c07b84 · 4c07b84
1 parent fb54b9a
commit 4c07b84
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 14 deletions.
diff --git a/packages/core/.storybook/main.ts b/packages/core/.storybook/main.ts
@@ -34,9 +34,6 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {}
   },
-  docs: {
-    autodocs: false
-  },
   async webpackFinal(config, { configType }) {
     if (configType === "DEVELOPMENT") {
       if (config.resolve) {

diff --git a/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx b/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
@@ -3,15 +3,17 @@ import { createComponentTemplate } from "vibe-storybook-components";
 import BaseInput from "../BaseInput";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: BaseInput
+  component: BaseInput,
+  isInternal: true,
+  shouldCreateAutodocsPage: true
 });
 
 export default {
   title: "Internal/BaseInput",
   component: BaseInput,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
-  tags: ["internal"]
+  tags: metaSettings.tags
 };
 
 const baseInputTemplate = createComponentTemplate(BaseInput);

diff --git a/packages/core/src/storybook/functions/createStoryMetaSettingsDecorator.ts b/packages/core/src/storybook/functions/createStoryMetaSettingsDecorator.ts
@@ -11,7 +11,9 @@ export function createStoryMetaSettingsDecorator({
   enumPropNamesArray,
   iconPropNamesArray,
   actionPropsArray,
-  ignoreControlsPropNamesArray
+  ignoreControlsPropNamesArray,
+  isInternal,
+  shouldCreateAutodocsPage
 }: Omit<CreateStoryMetaSettingsArgs, "allIconsComponents" | "iconsMetaData">) {
   return createStoryMetaSettings({
     component,
@@ -20,7 +22,9 @@ export function createStoryMetaSettingsDecorator({
     actionPropsArray,
     ignoreControlsPropNamesArray,
     iconsMetaData,
-    allIconsComponents: AllIcons
+    allIconsComponents: AllIcons,
+    isInternal,
+    shouldCreateAutodocsPage
   });
 }
 

diff --git a/packages/storybook-blocks/src/functions/createStoryMetaSettings/createStoryMetaSettings.ts b/packages/storybook-blocks/src/functions/createStoryMetaSettings/createStoryMetaSettings.ts
@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { AllowedIcons, Decorator, IconMetaData, StoryMetaSettingsArgs, StoryMetaSettingsResult } from './types';
-import { ArgTypes } from '@storybook/types';
+import { AllowedIcons, IconMetaData, StoryMetaSettingsArgs, StoryMetaSettingsResult } from './types';
+import { Decorator } from '@storybook/react';
+import { ArgTypes, Tag } from '@storybook/types';
 
 function parseStringForEnums(componentName: string, enumName: string, enumObj: { [key: string]: unknown }) {
   let returnValue;
@@ -54,9 +55,12 @@ export function createStoryMetaSettings({
   iconsMetaData,
   allIconsComponents,
   ignoreControlsPropNamesArray,
+  isInternal,
+  shouldCreateAutodocsPage,
 }: StoryMetaSettingsArgs): StoryMetaSettingsResult {
   const argTypes: ArgTypes = {};
   const decorators: Decorator[] = [];
+  const tags = prepareTags(isInternal, shouldCreateAutodocsPage);
   const allowedIcons = iconsMetaData?.reduce(
     (acc: AllowedIcons, icon: IconMetaData) => {
       const Component = allIconsComponents[icon.file.split('.')[0]];
@@ -137,7 +141,18 @@ export function createStoryMetaSettings({
     }
   });
 
-  return { argTypes, decorators };
+  return { argTypes, decorators, tags };
 }
 
 export default createStoryMetaSettings;
+
+function prepareTags(isInternal: boolean = false, shouldCreateAutodocsPage: boolean = false) {
+  const tags: Tag[] = [];
+  if (isInternal) {
+    tags.push('internal');
+  }
+  if (shouldCreateAutodocsPage) {
+    tags.push('autodocs');
+  }
+  return tags;
+}
diff --git a/packages/storybook-blocks/src/functions/createStoryMetaSettings/types.ts b/packages/storybook-blocks/src/functions/createStoryMetaSettings/types.ts
@@ -1,4 +1,5 @@
-import { ArgTypes, PartialStoryFn, StoryContext } from '@storybook/types';
+import { Decorator } from '@storybook/react';
+import { ArgTypes, Tag } from '@storybook/types';
 
 export type EnumPropNames = {
   propName: string;
@@ -20,9 +21,6 @@ export type AllowedIcons = {
   mapping: { [key: string]: unknown };
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Decorator = (story: PartialStoryFn<any>, context: StoryContext<any>) => { storyResult: any };
-
 export type StoryMetaSettingsArgs = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: any;
@@ -32,9 +30,12 @@ export type StoryMetaSettingsArgs = {
   allIconsComponents: { [key: string]: unknown };
   iconsMetaData?: IconMetaData[];
   ignoreControlsPropNamesArray?: string[];
+  isInternal?: boolean;
+  shouldCreateAutodocsPage?: boolean;
 };
 
 export type StoryMetaSettingsResult = {
   argTypes: Partial<ArgTypes>;
   decorators: Decorator[];
+  tags: Tag[];
 };