add tagging v2

justeattakeaway · Nov 25, 2024 · f20e485 · f20e485
1 parent 9b32e44
commit f20e485
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 46 deletions.
diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts
@@ -134,4 +134,7 @@ const propOptions = {
     showIcon: [true, false]
 };
 
-export const AllPropVariations = createVariantStory(Template, propOptions, 'Hello world');
+export const AllPropVariations = {
+  render: createVariantStory(Template, propOptions, 'Hello World'),
+  tags: ['!dev'],
+};
diff --git a/apps/pie-storybook/stories/pie-foo.stories.ts b/apps/pie-storybook/stories/pie-foo.stories.ts
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '@justeattakeaway/pie-divider';
+
+const meta: Meta = {
+  title: 'Foo',
+  component: 'pie-divider',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['dev', '!autodocs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['dev', '!autodocs'],
+  args: { variant: 2 },
+};
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!dev'],
+  render: () => html`
+    <div>
+      <pie-divider></pie-divider>
+    </div>
+  `,
+};
diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts
@@ -74,55 +74,52 @@ export const sanitizeAndRenderHTML = (slot: string) => unsafeHTML(DOMPurify.sani
  * @returns {Function} Returns a function that renders all combinations of the given prop options.
  */
 export const createVariantStory = <T>(
-    template: TemplateFunction<T>,
-    propOptions: Record<keyof T, any[]>,
-    slotContent: string
+  template: TemplateFunction<T>,
+  propOptions: Record<keyof T, any[]>,
+  slotContent: string
 ) => {
-    const generateCombinations = (options: Record<keyof T, any[]>): T[] => {
-        const keys = Object.keys(options) as (keyof T)[];
-        const combinations: T[] = [];
+  const generateCombinations = (options: Record<keyof T, any[]>): T[] => {
+      const keys = Object.keys(options) as (keyof T)[];
+      const combinations: T[] = [];
 
-        const buildCombination = (index: number, currentCombination: Partial<T>) => {
-            if (index === keys.length) {
-                combinations.push(currentCombination as T);
-                return;
-            }
+      const buildCombination = (index: number, currentCombination: Partial<T>) => {
+          if (index === keys.length) {
+              combinations.push(currentCombination as T);
+              return;
+          }
 
-            const key = keys[index];
-            const values = options[key];
+          const key = keys[index];
+          const values = options[key];
 
-            for (const value of values) {
-                buildCombination(index + 1, { ...currentCombination, [key]: value });
-            }
-        };
+          for (const value of values) {
+              buildCombination(index + 1, { ...currentCombination, [key]: value });
+          }
+      };
 
-        buildCombination(0, {});
-        return combinations;
-    };
+      buildCombination(0, {});
+      return combinations;
+  };
 
-    const propCombinations = generateCombinations(propOptions);
+  const propCombinations = generateCombinations(propOptions);
 
-    return {
-        render: () => html`
-            <div style="display: block; width: 100%;">
-                ${propCombinations.map(
-                    (props) => html`
-                        <div style="border: 1px solid black; padding: 16px; margin-bottom: 16px; width: 100%; box-sizing: border-box;">
-                            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: monospace; background-color: #f9f9f9; padding: 8px; border-radius: 4px;">
-                                ${Object.entries(props as Record<string, any>).map(
-                                    ([key, value]) => html`
-                                        <div><strong>${key}:</strong> ${JSON.stringify(value)}</div>
-                                    `
-                                )}
-                            </div>
-                            <div style="margin-top: 16px; border: 2px dashed #aaa; padding: 8px; border-radius: 4px;">
-                                ${template({ ...props, slot: slotContent })}
-                            </div>
-                        </div>
-                    `
-                )}
-            </div>
-        `,
-        tags: ['!dev'], // Add the default tag here
-    };
-};
+  return () => html`
+      <div style="display: block; width: 100%;">
+          ${propCombinations.map(
+              (props) => html`
+                  <div style="border: 1px solid black; padding: 16px; margin-bottom: 16px; width: 100%; box-sizing: border-box;">
+                      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: monospace; background-color: #f9f9f9; padding: 8px; border-radius: 4px;">
+                          ${Object.entries(props as Record<string, any>).map(
+                              ([key, value]) => html`
+                                  <div><strong>${key}:</strong> ${JSON.stringify(value)}</div>
+                              `
+                          )}
+                      </div>
+                      <div style="margin-top: 16px; border: 2px dashed #aaa; padding: 8px; border-radius: 4px;">
+                          ${template({ ...props, slot: slotContent })}
+                      </div>
+                  </div>
+              `
+          )}
+      </div>
+  `;
+};