@storybook/react-native-ui 8.5.2-alpha.1 → 8.5.2-alpha.3

package/src/TreeNode.tsx

@@ -4,7 +4,7 @@ import { GroupIcon } from './icon/GroupIcon';
 
 import { StoryIcon } from './icon/StoryIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
-import React, { ComponentProps, FC } from 'react';
+import React, { ComponentProps, FC, useMemo } from 'react';
 import { transparentize } from 'polished';
 
 export interface NodeProps {
@@ -95,15 +95,15 @@ export const GroupNode: FC<
 }) {
   const theme = useTheme();
 
+  const color = useMemo(() => {
+    return theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet;
+  }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
+
   return (
     <BranchNode isExpandable={isExpandable} {...props}>
       <Wrapper>
         {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
-        <GroupIcon
-          width="14"
-          height="14"
-          color={theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet}
-        />
+        <GroupIcon width={14} height={14} color={color} />
       </Wrapper>
       <BranchNodeText>{children}</BranchNodeText>
     </BranchNode>
@@ -113,11 +113,16 @@ export const GroupNode: FC<
 export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
   function ComponentNode({ children, isExpanded, isExpandable, ...props }) {
     const theme = useTheme();
+
+    const color = useMemo(() => {
+      return theme.color.secondary;
+    }, [theme.color.secondary]);
+
     return (
       <BranchNode isExpandable={isExpandable} {...props}>
         <Wrapper>
           {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
-          <ComponentIcon width={12} height={12} color={theme.color.secondary} />
+          <ComponentIcon width={12} height={12} color={color} />
         </Wrapper>
         <BranchNodeText>{children}</BranchNodeText>
       </BranchNode>
@@ -131,14 +136,14 @@ export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(functio
 }) {
   const theme = useTheme();
 
+  const color = useMemo(() => {
+    return props.selected ? theme.color.lightest : theme.color.seafoam;
+  }, [props.selected, theme.color.lightest, theme.color.seafoam]);
+
   return (
     <LeafNode {...props}>
       <Wrapper>
-        <StoryIcon
-          width={14}
-          height={14}
-          color={props.selected ? theme.color.lightest : theme.color.seafoam}
-        />
+        <StoryIcon width={14} height={14} color={color} />
       </Wrapper>
       <LeafNodeText selected={props.selected}>{children}</LeafNodeText>
     </LeafNode>

package/src/icon/CloseFullscreenIcon.tsx

@@ -1,18 +1,16 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import Svg, { Path, SvgProps } from 'react-native-svg';
 import { useTheme } from '@storybook/react-native-theming';
 
 export function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
   const theme = useTheme();
 
+  const fillColor = useMemo(() => {
+    return color ?? theme.color.defaultText;
+  }, [color, theme.color.defaultText]);
+
   return (
-    <Svg
-      fill={color ?? theme.color.defaultText}
-      height={height}
-      viewBox="0 0 16 16"
-      width={width}
-      {...props}
-    >
+    <Svg fill={fillColor} height={height} viewBox="0 0 16 16" width={width} {...props}>
       <Path d="M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" />
     </Svg>
   );

package/src/icon/CollapseAllIcon.tsx

@@ -1,5 +1,6 @@
 import { Path, Svg, SvgProps } from 'react-native-svg';
 import { useTheme } from '@storybook/react-native-theming';
+import { useMemo } from 'react';
 
 export const CollapseAllIcon = ({
   color, //= '#2E3438',
@@ -9,11 +10,15 @@ export const CollapseAllIcon = ({
 }: SvgProps) => {
   const theme = useTheme();
 
+  const fillColor = useMemo(() => {
+    return color ?? theme.color.defaultText;
+  }, [color, theme.color.defaultText]);
+
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
       <Path
         d="M3.354.146a.5.5 0 10-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L7 3.793 3.354.146zM6.646 9.146a.5.5 0 01.708 0l4 4a.5.5 0 01-.708.708L7 10.207l-3.646 3.647a.5.5 0 01-.708-.708l4-4z"
-        fill={color ?? theme.color.defaultText}
+        fill={fillColor}
       />
     </Svg>
   );

package/src/icon/ExpandAllIcon.tsx

@@ -1,5 +1,7 @@
 import { Path, Svg, SvgProps } from 'react-native-svg';
 import { useTheme } from '@storybook/react-native-theming';
+import { useMemo } from 'react';
+
 export const ExpandAllIcon = ({
   color, //= '#2E3438',
   width = 14,
@@ -8,11 +10,15 @@ export const ExpandAllIcon = ({
 }: SvgProps) => {
   const theme = useTheme();
 
+  const fillColor = useMemo(() => {
+    return color ?? theme.color.defaultText;
+  }, [color, theme.color.defaultText]);
+
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
       <Path
         d="M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z"
-        fill={color ?? theme.color.defaultText}
+        fill={fillColor}
       />
     </Svg>
   );

package/src/icon/FullscreenIcon.tsx

@@ -1,15 +1,20 @@
 import * as React from 'react';
 import Svg, { Path, SvgProps } from 'react-native-svg';
 import { useTheme } from '@storybook/react-native-theming';
+import { useMemo } from 'react';
 
 export function FullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
   const theme = useTheme();
 
+  const fillColor = useMemo(() => {
+    return color ?? theme.color.defaultText;
+  }, [color, theme.color.defaultText]);
+
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
       <Path
         d="M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z"
-        fill={color ?? theme.color.defaultText}
+        fill={fillColor}
       />
     </Svg>
   );

package/src/util/status.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import { useMemo, type ReactElement } from 'react';
 import type { API_HashEntry, API_StatusState, API_StatusValue } from '@storybook/core/types';
 
 import { useTheme } from '@storybook/react-native-theming';
@@ -21,12 +21,12 @@ function SmallIcons(props: SvgProps) {
 
 function LoadingIcons(props: SvgProps) {
   const theme = useTheme();
-  return (
-    <SmallIcons
-      color={theme.base === 'light' ? theme.color.mediumdark : theme.color.darker}
-      {...props}
-    />
-  );
+
+  const color = useMemo(() => {
+    return theme.base === 'light' ? theme.color.mediumdark : theme.color.darker;
+  }, [theme.base, theme.color.darker, theme.color.mediumdark]);
+
+  return <SmallIcons color={color} {...props} />;
 }
 
 export const statusPriority: API_StatusValue[] = ['unknown', 'pending', 'success', 'warn', 'error'];

package/src/util/useStyle.ts

@@ -0,0 +1,28 @@
+import { DependencyList, useMemo } from 'react';
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+/**
+ * A hook to memoize a style. Uses `ViewStyle` per default, but can be used with other styles deriving from `FlexStyle` as well, such as `TextStyle`.
+ * @param styleFactory The function that returns a style
+ * @param deps The dependencies to trigger memoization re-evaluation
+ * @see ["Memoize!!! 💾 - a react (native) performance guide"](https://gist.github.com/mrousavy/0de7486814c655de8a110df5cef74ddc)
+ * @example
+ *
+ * // simple object styles
+ * const style1 = useStyle(() => ({ height: someDynamicValue }), [someDynamicValue])
+ *
+ * // array styles
+ * const style2 = useStyle(
+ *   () => [styles.container, props.style, { height: someDynamicValue }],
+ *   [props.style, someDynamicValue]
+ * );
+ */
+export const useStyle = <
+  TStyle extends ViewStyle | TextStyle | ImageStyle,
+  TOutput extends StyleProp<TStyle>
+>(
+  styleFactory: () => TOutput,
+  deps?: DependencyList
+): TOutput =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useMemo(styleFactory, deps);