search

storybookjs / react-native

📓 Storybook for React Native!
https://storybook.js.org
MIT License
1.08k stars 156 forks source link

feat: support branding #639

Open tlow92 opened 3 weeks ago

tlow92 commented 3 weeks ago

Implements Feature:

https://github.com/storybookjs/react-native/issues/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;
}
dannyhw commented 3 weeks ago

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 commented 2 weeks ago

I updated by patches but should still be the same

dannyhw commented 1 week ago

sorry again for taking a while, I have not forgotten

dannyhw commented 5 days ago

@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 commented 5 days ago

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

trajano commented 4 days ago

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 commented 4 days ago

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

tlow92 commented 3 days ago

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