[OMN-SB]: Setup storybook

[gitstart-omnivore]

Description

This PR implements setting up Storybook.

To run storybook locally:

1. Run cd packages/web
2. Install storybook and other dependencies: run yarn install
3. Run yarn storybook to start storybook on port 6006
4. Go to http://localhost:6006, you should see storybook running

House Keeping

• Is Deployment Link passing ?
• Have you assinged PR to yourself ?
• Is Github action passing ?
• Updated the appropriate tag ?

Ticket link (if applicable)

Types of changes

• Bug fix
• New feature
• Refactor
• Others

Remarks

• I added a new package to achieve this task.
• I have updated package.json

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

omnivore-prod – ./

🔍 Inspect: https://vercel.com/omnivore/omnivore-prod/2o3m4Rx6Sqtv9ibNfaedq5HzjxDX
✅ Preview: https://omnivore-prod-git-omn-sb-omnivore.vercel.app

omnivore-demo – ./

🔍 Inspect: https://vercel.com/omnivore/omnivore-demo/5Zc9FuCT49AmR12fNC9LDyX2M91T
✅ Preview: https://omnivore-demo-git-omn-sb-omnivore.vercel.app

[jacksonh]

Can you add some instructions on how to run storybook locally?

[gitstart-omnivore]

Can you add some instructions on how to run storybook locally?

@jacksonh Instruction added to PR Description

[jacksonh]

Looks like we need a linting fix here.

[gitstart-omnivore]

Hmm, no linting errors seem to be popping up? Storybook seems to be building just fine locally, also runs fine. Any way we can see error logs on Vercel?

[jacksonh]

Ah sorry i forgot the vercel errors aren't public. Here's the error:

./components/elements/DropdownElements.tsx:127:9
--
12:19:15.015 | Type error: No overload matches this call.
12:19:15.015 | Overload 1 of 3, '(props: Omit<DropdownMenuContentProps & RefAttributes<HTMLDivElement>, "css" \| "as"> & TransformProps<{}, { xsmDown: "(max-width: 375px)"; ... 6 more ...; xl: "(min-width: 1200px)"; }> & { ...; }): ReactElement<...> \| null', gave the following error.
12:19:15.015 | Type '({} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & (string \| ... 8 more ... \| null)) \| undefined' is not assignable to type '((string \| number \| boolean \| ComponentSelector \| Keyframes \| SerializedStyles \| ArrayInterpolation<undefined> \| ObjectInterpolation<...> \| ((theme: any) => Interpolation<...>) \| null) & ... 4 more ... & { ...; }) \| undefined'.
12:19:15.015 | Type '{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & ObjectInterpolation<...>' is not assignable to type '((string \| number \| boolean \| ComponentSelector \| Keyframes \| SerializedStyles \| ArrayInterpolation<undefined> \| ObjectInterpolation<...> \| ((theme: any) => Interpolation<...>) \| null) & ... 4 more ... & { ...; }) \| undefined'.
12:19:15.015 | Type '{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & ObjectInterpolation<...>' is not assignable to type '((theme: any) => Interpolation<undefined>) & { "@xsmDown"?: CSS<{ xsmDown: "(max-width: 375px)"; smDown: "(max-width: 575px)"; mdDown: "(max-width: 768px)"; lgDown: "(max-width: 992px)"; sm: "(min-width: 576px)"; md: "(min-width: 768px)"; lg: "(min-width: 992px)"; xl: "(min-width: 1200px)"; }, { ...; }, DefaultTheme...'.
12:19:15.015 | Type '{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & ObjectInterpolation<...>' is not assignable to type '(theme: any) => Interpolation<undefined>'.
12:19:15.015 | Type '{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & ObjectInterpolation<...>' provides no match for the signature '(theme: any): Interpolation<undefined>'.
12:19:15.016 | Overload 2 of 3, '(props: Omit<DropdownMenuContentProps & RefAttributes<HTMLDivElement>, "css" \| "as"> & TransformProps<{}, { xsmDown: "(max-width: 375px)"; ... 6 more ...; xl: "(min-width: 1200px)"; }> & { ...; }): ReactElement<...> \| null', gave the following error.
12:19:15.016 | Type '({} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & (string \| ... 8 more ... \| null)) \| undefined' is not assignable to type '((string \| number \| boolean \| ComponentSelector \| Keyframes \| SerializedStyles \| ArrayInterpolation<undefined> \| ObjectInterpolation<...> \| ((theme: any) => Interpolation<...>) \| null) & { ...; }) \| undefined'.
12:19:15.016 | Type '{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & ObjectInterpolation<...>' is not assignable to type '((string \| number \| boolean \| ComponentSelector \| Keyframes \| SerializedStyles \| ArrayInterpolation<undefined> \| ObjectInterpolation<...> \| ((theme: any) => Interpolation<...>) \| null) & { ...; }) \| undefined'.
12:19:15.016 | Type '{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & ObjectInterpolation<...>' is not assignable to type '((theme: any) => Interpolation<undefined>) & { [x: string]: string \| number \| {} \| CSS<{ xsmDown: "(max-width: 375px)"; smDown: "(max-width: 575px)"; mdDown: "(max-width: 768px)"; ... 4 more ...; xl: "(min-width: 1200px)"; }, { ...; }, DefaultThemeMap, { ...; }> \| undefined; ... 453 more ...; gridRowGap?: Globals \| ...'.
12:19:15.016 | Type '{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & ObjectInterpolation<...>' is not assignable to type '(theme: any) => Interpolation<undefined>'.
12:19:15.016 | Overload 3 of 3, '(props: Omit<DropdownMenuContentProps & RefAttributes<HTMLDivElement>, "css"> & TransformProps<{}, { xsmDown: "(max-width: 375px)"; ... 6 more ...; xl: "(min-width: 1200px)"; }> & { ...; }): ReactElement<...> \| null', gave the following error.
12:19:15.016 | Type '({} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index \| undefined; alignItems?: AlignItems \| Globals \| ScaleValue \| Index \| undefined; ... 425 more ...; vectorEffect?: VectorEffect \| ... 3 more ... \| undefined; } & {} & {} & { ...; } & (string \| ... 8 more ... \| null)) \| undefined' is not assignable to type '((string \| number \| boolean \| ComponentSelector \| Keyframes \| SerializedStyles \| ArrayInterpolation<undefined> \| ObjectInterpolation<...> \| ((theme: any) => Interpolation<...>) \| null) & ... 4 more ... & { ...; }) \| undefined'.
12:19:15.016 |  
12:19:15.016 | 125 \|       <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
12:19:15.016 | 126 \|       <DropdownContent
12:19:15.016 | > 127 \|         css={css}
12:19:15.016 | \|         ^
12:19:15.016 | 128 \|         onInteractOutside={(event) => {
12:19:15.016 | 129 \|           // remove focus from dropdown
12:19:15.017 | 130 \|           ;(document.activeElement as HTMLElement).blur()
12:19:15.052 | error Command failed with exit code 1.
12:19:15.052 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
12:19:15.070 | error Command failed.

[gitstart-omnivore]

@jacksonh Alright, this has been fixed. Thanks!.

So this was due to some mix-up between Storybooks CSS prop and Stitches CSS prop. (source: stitchesjs/stitches#897)

[jacksonh]

Working on getting styling to work with Storybook. I added this, but need to resolve some webpack issues with font loading:

+
+export const decorators = [
+  (Story, context) => {
+    return (
+      <>
+        <style
+          id="stitches"
+          dangerouslySetInnerHTML={{
+            __html: getCssText(),
+          }}
+        />
+        <div className='Gray'>
+          <Story {...context} />
+        </div>
+      </>
+    );
+  }
+]

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
omnivore-demo	✅ Ready (Inspect)	Visit Preview	Apr 19, 2022 at 4:31PM (UTC)
omnivore-prod	✅ Ready (Inspect)	Visit Preview	Apr 19, 2022 at 4:31PM (UTC)

[gitstart-omnivore]

@jacksonh Right, I've added the config for the fonts. I see the "Inter" font works now, for the Toasts.