feat: support branding

[tlow92]

Implements Feature:

#625

What I did

Support for branding, based on the patches from @trajano. Many thanks!

How it works

export interface Brand {
  // Will replace the storybook logo with this title
  title: string | undefined;
  // This url we be opened when clicking the branded logo or title
  url: string | null | undefined;
  // Either define a url or an image source to replace storybook logo with
  image: string | ImageSourcePropType | null | undefined;
  target: string | null | undefined;
}

[tlow92]

I don't like having this decorator in every story just to make typescript happy. Essentially the problem is only that theme requires a lot of properties that we don't want to define here.
Maybe I missed something to make it easier?

[trajano]

https://github.com/trajano/expo-experiments/blob/4287571d3a9fe568700ce97ecc266d5a5bff621e/packages/my-app/.storybook/index.ts#L11-L16 shows what I did on mine to pass it in, but I cheated with the any because of the imageSource thing which you resolved in web-theme.ts I think.

[trajano]

But I think what you have looks correct. At least for the context of the story.

[trajano]

Can't wait to drop my patches :D

[trajano]

I think just use the existing Storybook logo to prevent having another asset,

[trajano]

https://github.com/trajano/expo-experiments/blob/4287571d3a9fe568700ce97ecc266d5a5bff621e/packages/my-app/.storybook/index.ts#L11-L16 shows what I did on mine to pass it in, but I cheated with the any because of the imageSource thing which you resolved in web-theme.ts I think.

[trajano]

But I think what you have looks correct. At least for the context of the story.

[dannyhw]

Thanks so much for taking the time, I promise I will get to this pr soon. I have a lot going on currently but ideally in this coming week. Feel free to tag me as a reminder if I take too long :).

[trajano]

I updated by patches but should still be the same

[dannyhw]

sorry again for taking a while, I have not forgotten

[dannyhw]

@tlow92 I tried this out and its working pretty great already.

I made some adjustments in my latest commit, could you check if you agree with the changes?

basically its these things

1. I limited it to image source prop, I think using the url directly has some downsides since we don't know the size of their image and it can be a different aspect ratio etc
2. put a warning if the the user doesn't specify the width/height because otherwise it can look weird for some images
3. added resizeMode property
4. adjusted the stories to just take theme as an arg instead of decorator
5. it wasn't showing on mobile so I just added it there

[dannyhw]

ok had to adjust some types as well, we want this to be an optional theme property

[trajano]

I had a thought... How about making the logo image be a prop that points to a component like BrandLogo

That way someone can use Svg or Icon or something else. It just needs a separate prop called
brandLogoStyle which will be applied to the style of the component.

It can be later, right now simple branding is fine as long as I can refer to the image via require

[dannyhw]

@trajano yeah I think that can also work, I will give it a try a bit later

[tlow92]

@dannyhw Sorry have been very busy. Changes look good to me, nothing to add from my side, I think. Thanks for the additional fixes 🙏