fix: types

storybookjs · Nov 19, 2024 · 8e73c0a · 8e73c0a
1 parent 673b34b
commit 8e73c0a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/examples/expo-example/.storybook/index.tsx b/examples/expo-example/.storybook/index.tsx
@@ -18,8 +18,8 @@ const StorybookUIRoot = view.getStorybookUI({
   //   brand: {
   //     image: {
   //       uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
-  //       // width: 25,
-  //       // height: 25,
+  //       width: 25,
+  //       height: 25,
   //     },
   //   },
   // },

diff --git a/packages/react-native-theming/src/theme.ts b/packages/react-native-theming/src/theme.ts
@@ -114,12 +114,7 @@ export const theme: StorybookThemeWeb = {
   barBg: light.barBg,
 
   // Brand logo/text
-  brand: {
-    title: light.brandTitle,
-    url: light.brandUrl,
-    image: light.brandImage || (light.brandTitle ? null : undefined),
-    target: light.brandTarget,
-  },
+  brand: undefined,
 };
 
 export const darkTheme: StorybookThemeWeb = {
@@ -215,10 +210,5 @@ export const darkTheme: StorybookThemeWeb = {
   barBg: dark.barBg,
 
   // Brand logo/text
-  brand: {
-    title: dark.brandTitle,
-    url: dark.brandUrl,
-    image: dark.brandImage || (dark.brandTitle ? null : undefined),
-    target: dark.brandTarget,
-  },
+  brand: undefined,
 };
diff --git a/packages/react-native-theming/src/web-theme.ts b/packages/react-native-theming/src/web-theme.ts
@@ -219,7 +219,7 @@ export interface StorybookThemeWeb {
   barSelectedColor: string;
   barBg: string;
 
-  brand: Brand;
+  brand?: Brand;
 
   // [key: string]: any;
 }

diff --git a/packages/react-native-ui/src/StorybookLogo.tsx b/packages/react-native-ui/src/StorybookLogo.tsx
@@ -14,9 +14,9 @@ const NoBrandLogo: FC<{ theme: Theme }> = ({ theme }) =>
     <DarkLogo height={HEIGHT} width={WIDTH} />
   );
 
-const BrandLogo: FC<{ theme: Theme & { brand: NonNullable<Theme['brand']> } }> = ({ theme }) => {
+const BrandLogo: FC<{ theme: Theme }> = ({ theme }) => {
   const imageHasNoWidthOrHeight =
-    theme.brand.image &&
+    typeof theme.brand.image === 'object' &&
     typeof theme.brand.image === 'object' &&
     'uri' in theme.brand.image &&
     (!('height' in theme.brand.image) || !('width' in theme.brand.image));
@@ -29,6 +29,10 @@ const BrandLogo: FC<{ theme: Theme & { brand: NonNullable<Theme['brand']> } }> =
     }
   }, [imageHasNoWidthOrHeight]);
 
+  if (!theme.brand.image) {
+    return null;
+  }
+
   const image = (
     <Image
       source={theme.brand.image}
@@ -52,7 +56,7 @@ const BrandLogo: FC<{ theme: Theme & { brand: NonNullable<Theme['brand']> } }> =
   }
 };
 
-const BrandTitle: FC<{ theme: Theme & { brand: NonNullable<Theme['brand']> } }> = ({ theme }) => {
+const BrandTitle: FC<{ theme: Theme }> = ({ theme }) => {
   const brandTitleStyle = useMemo<StyleProp<TextStyle>>(() => {
     return {
       width: WIDTH,
@@ -84,9 +88,9 @@ const BrandTitle: FC<{ theme: Theme & { brand: NonNullable<Theme['brand']> } }>
 };
 
 export const StorybookLogo: FC<{ theme: Theme }> = ({ theme }) => {
-  if (theme.brand.image) {
+  if (theme.brand?.image) {
     return <BrandLogo theme={theme} />;
-  } else if (theme.brand.title) {
+  } else if (theme.brand?.title) {
     return <BrandTitle theme={theme} />;
   } else {
     return <NoBrandLogo theme={theme} />;