Fix typecheck errors in storybook

buildo · Mar 4, 2022 · b043ca0 · b043ca0
1 parent 75031ac
commit b043ca0
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 38 deletions.
diff --git a/src/Card/Card.css.ts b/src/Card/Card.css.ts
@@ -4,7 +4,9 @@ import { strictRecipe } from "../util/strictRecipe";
 export const cardRecipe = strictRecipe({
   base: bentoSprinkles({
     background: "backgroundPrimary",
-    outline: "outlineContainer",
+    outlineColor: "outlineContainer",
+    outlineStyle: "solid",
+    outlineWidth: 1,
     overflow: "hidden",
   }),
   variants: {

diff --git a/stories/Components/Actions.stories.tsx b/stories/Components/Actions.stories.tsx
@@ -4,7 +4,9 @@ import { action } from "@storybook/addon-actions";
 
 const { defaultExport, createStory } = createComponentStories({
   component: Actions,
-  args: {},
+  args: {
+    size: "medium",
+  },
 });
 
 const primaryAction = {

diff --git a/stories/Foundations/Box.stories.tsx b/stories/Foundations/Box.stories.tsx
@@ -13,11 +13,11 @@ export default defaultExport;
 export const Primary = createStory({
   color: "textPrimary",
   fontFamily: "default",
-  padding: "16",
+  padding: 16,
 });
 
 export const CustomTokens = createStory({
   color: "customColor1",
   fontFamily: "customFontFamily",
-  padding: "12",
+  padding: 12,
 });
diff --git a/stories/Layout/Columns.stories.tsx b/stories/Layout/Columns.stories.tsx
@@ -5,7 +5,7 @@ const { defaultExport, createStory } = createComponentStories({
   component: Columns,
   subcomponents: { Column },
   args: {
-    space: "32",
+    space: 32,
   },
   argTypes: {
     space: spaceArgType,

diff --git a/stories/Layout/Inline.stories.tsx b/stories/Layout/Inline.stories.tsx
@@ -10,7 +10,7 @@ import {
 const { createStory, defaultExport } = createComponentStories({
   component: Inline,
   args: {
-    space: "32",
+    space: 32,
     children: [
       <Placeholder height={100} width={100} />,
       <Placeholder height={100} width={100} />,

diff --git a/stories/Layout/Inset.stories.tsx b/stories/Layout/Inset.stories.tsx
@@ -24,18 +24,18 @@ const { defaultExport, createStory } = createComponentStories({
 export default defaultExport;
 
 export const allAxis = createStory({
-  space: "16",
+  space: 16,
 });
 
 export const horizontal = createStory({
-  spaceX: "16",
+  spaceX: 16,
 });
 
 export const vertical = createStory({
-  spaceY: "16",
+  spaceY: 16,
 });
 
 export const horizontalAndVertical = createStory({
-  spaceX: "40",
-  spaceY: "16",
+  spaceX: 40,
+  spaceY: 16,
 });
diff --git a/stories/Layout/Stack.stories.tsx b/stories/Layout/Stack.stories.tsx
@@ -4,7 +4,7 @@ import { alignArgType, createComponentStories, disableControlArgType, spaceArgTy
 const { createStory, defaultExport } = createComponentStories({
   component: Stack,
   args: {
-    space: "32",
+    space: 32,
     children: [
       <Placeholder height={100} width={100} />,
       <Placeholder height={100} width={100} />,

diff --git a/stories/theme.css.ts b/stories/theme.css.ts
@@ -277,6 +277,6 @@ export const vars = createGlobalTheme(":root", {
     customColor1: "#3C6FD6",
   },
   space: {
-    "12": "12px",
+    12: "12px",
   },
 });
diff --git a/stories/util.tsx b/stories/util.tsx
@@ -1,29 +1,40 @@
-import { Parameters, ComponentMeta, ComponentStory } from "@storybook/react";
+import { Parameters } from "@storybook/addons";
+import { ComponentStory } from "@storybook/react";
 import { JSXElementConstructor, ComponentProps, useState } from "react";
 import { alignToFlexAlignLookup, alignYToFlexAlignLookup } from "../src/util/align";
-import { unsafeLocalizedString } from "../src/util/LocalizedString";
-import { vars } from "./theme.css";
-import { vars as bentoVars } from "../src/vars.css";
+import { vars } from "../src/vars.css";
 import { Omit } from "../src/util/Omit";
+import { unsafeLocalizedString } from "../src";
 
 export type Actions<Props> = {
   [k in keyof Props]-?: k extends `on${infer _}` ? k : never;
 }[keyof Props];
 
+type ComponentMeta<C extends JSXElementConstructor<any>, D extends Partial<ComponentProps<C>>> = {
+  component: C;
+  args: D;
+  argTypes?: Record<string, unknown>;
+  decorators?: Array<(story: ComponentStory<C>, args: D) => ComponentStory<C>>;
+  parameters?: Record<string, unknown>;
+  subcomponents?: Record<string, JSXElementConstructor<any>>;
+};
+
 export function createComponentStories<
-  C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
+  C extends JSXElementConstructor<any>,
   D extends Partial<ComponentProps<C>>
 >(
-  meta: Omit<ComponentMeta<C>, "title"> & { component: C; args: D }
+  meta: ComponentMeta<C, D>
 ): {
-  defaultExport: Omit<ComponentMeta<C>, "title">;
+  defaultExport: ComponentMeta<C, D>;
   createStory: (
-    args: Omit<ComponentProps<C>, keyof D | Actions<ComponentProps<C>>>,
+    args: Omit<ComponentProps<C>, keyof D | Actions<ComponentProps<C>>> &
+      Partial<ComponentProps<C>>,
     parameters?: Parameters
   ) => ComponentStory<C>;
   createControlledStory: <S>(
     initialValue: S,
-    args: Omit<ComponentProps<C>, keyof D | Actions<ComponentProps<C>> | "value">,
+    args: Omit<ComponentProps<C>, keyof D | Actions<ComponentProps<C>> | "value"> &
+      Partial<ComponentProps<C>>,
     parameters?: Parameters
   ) => ComponentStory<C>;
 } {
@@ -55,46 +66,38 @@ export function createComponentStories<
   };
 }
 
-type ArgType = {
-  options?: string[];
-  control?: {
-    type?: "text" | "select" | "array";
-    mapping?: { [k: string]: string };
-    disable?: boolean;
-  };
-};
-
-export const textArgType: ArgType = { control: { type: "text" } };
-export const disableControlArgType: ArgType = { control: { disable: true } };
-export const spaceArgType: ArgType = {
-  options: Object.keys({ ...bentoVars.space, ...vars.space }),
+export const textArgType: any = { control: { type: "text" } };
+export const disableControlArgType: any = { control: { disable: true } };
+export const spaceArgType: any = {
+  options: Object.keys(vars.space),
   control: {
     type: "select",
     mapping: vars.space,
   },
 };
-export const alignArgType: ArgType = {
+export const alignArgType: any = {
   options: Object.keys(alignToFlexAlignLookup),
   control: {
     type: "select",
     mapping: alignToFlexAlignLookup,
   },
 };
 
-export const alignYArgType: ArgType = {
+export const alignYArgType: any = {
   options: Object.keys(alignYToFlexAlignLookup),
   control: {
     type: "select",
     mapping: alignYToFlexAlignLookup,
   },
 };
 
-export const issuesArgType: ArgType = { control: { type: "array" } };
+export const issuesArgType: any = { control: { type: "array" } };
 
 export const fieldArgTypes = {
   label: textArgType,
   assistiveText: textArgType,
   issues: issuesArgType,
+  hint: textArgType,
 };
 
 export const formatMessage = unsafeLocalizedString;