chore: added createControls utility

adaptui · anuraghazra · Jan 20, 2021 · Jan 19, 2021 · Jan 19, 2021 · Jan 20, 2021
commit 9688d2268adb52858b093b179968baef6d31eb25
diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -130,3 +130,5 @@ export const AlertIcon = forwardRefWithAs<
     </Role>
   );
 });
+
+export default Alert;
diff --git a/src/button/stories/Button.stories.tsx b/src/button/stories/Button.stories.tsx
@@ -16,12 +16,21 @@ import {
 import { useTheme } from "../../theme";
 import { Spinner } from "../../spinner";
 import { SearchIcon, CaretDownIcon } from "../../icons";
-import { storyTemplate } from "../../utils/storybookUtils";
+import { createControls, storyTemplate } from "../../utils/storybookUtils";
 
 export default {
   title: "Button",
   component: Button,
-} as Meta<ButtonProps>;
+  argTypes: createControls("button", {
+    unions: ["size", "variant"],
+    ignore: [
+      "unstable_system",
+      "unstable_clickOnEnter",
+      "unstable_clickOnSpace",
+      "wrapElement",
+    ],
+  }),
+} as Meta;
 
 const base = storyTemplate<ButtonProps>(Button, {
   children: "Button",

diff --git a/src/utils/storybookUtils.tsx b/src/utils/storybookUtils.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Story } from "@storybook/react";
+import theme from "../theme/defaultTheme";
 
 export const storyTemplate = <ComponentProps,>(
   Component: React.FC,
@@ -9,3 +10,32 @@ export const storyTemplate = <ComponentProps,>(
   base.args = { ...defaultArgs, ...props };
   return base;
 };
+
+export const createUnionControl = (keys: any) => {
+  return {
+    control: { type: "select", options: Object.keys(keys) },
+  };
+};
+
+export const createControls = (
+  component: string,
+  options?: { unions: string[]; ignore: string[] },
+) => {
+  console.log(component, options);
+  const controls = options?.unions.reduce((cur, key) => {
+    console.log((theme as Record<string, any>)[component][key]);
+    return {
+      ...cur,
+      [key]: createUnionControl((theme as Record<string, any>)[component][key]),
+    };
+  }, {});
+
+  const ignoredControls = options?.ignore.reduce((cur, key) => {
+    return {
+      ...cur,
+      [key]: { table: { disable: true } },
+    };
+  }, {});
+
+  return { ...controls, ...ignoredControls };
+};