@storybook/react-native-ui-lite 10.2.2-alpha.3 → 10.2.2-alpha.4

package/dist/index.js

@@ -464,10 +464,22 @@ var useSelectedNode = () => (0, import_react3.useContext)(SelectedNodeContext);
 
 // src/Tree.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var TextItem = import_react_native_theming3.styled.Text(({ theme }) => ({
-  fontSize: theme.typography.size.s2 + 1,
-  color: theme.color.defaultText
-}));
+var CASE_SPLIT_PATTERN = /\p{Lu}?\p{Ll}+|[0-9]+|\p{Lu}+(?!\p{Ll})|\p{Emoji_Presentation}|\p{Extended_Pictographic}|\p{L}+/gu;
+function words(str) {
+  return Array.from(str.match(CASE_SPLIT_PATTERN) ?? []);
+}
+function startCase(str) {
+  const words$1 = words(str.trim());
+  let result = "";
+  for (let i = 0; i < words$1.length; i++) {
+    const word = words$1[i];
+    if (result) {
+      result += " ";
+    }
+    result += word[0].toUpperCase() + word.slice(1).toLowerCase();
+  }
+  return result;
+}
 var Node = import_react4.default.memo(function Node2({
   item,
   refId,
@@ -512,7 +524,7 @@ var Node = import_react4.default.memo(function Node2({
           "aria-expanded": isExpanded,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseIcon, { isExpanded }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RootNodeText, { children: startCase(item.name) })
           ]
         }
       ),
@@ -548,7 +560,7 @@ var Node = import_react4.default.memo(function Node2({
           event.preventDefault();
           setExpanded({ ids: [item.id], value: !isExpanded });
         },
-        children: item.renderLabel?.(item) || item.name
+        children: startCase(item.name)
       },
       id
     );
@@ -577,7 +589,7 @@ var RootNode = import_react_native_theming3.styled.View(() => ({
   minHeight: 34
 }));
 var RootNodeText = import_react_native_theming3.styled.Text(({ theme }) => ({
-  fontSize: theme.typography.size.s1 - 1,
+  fontSize: theme.typography.size.s2,
   fontWeight: theme.typography.weight.bold,
   color: theme.textMutedColor,
   lineHeight: 16,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.2.2-alpha.3",
+  "version": "10.2.2-alpha.4",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -42,8 +42,8 @@
     "@legendapp/list": "3.0.0-beta.31",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "^10.2.2",
-    "@storybook/react-native-theming": "^10.2.2-alpha.3",
-    "@storybook/react-native-ui-common": "^10.2.2-alpha.3",
+    "@storybook/react-native-theming": "^10.2.2-alpha.4",
+    "@storybook/react-native-ui-common": "^10.2.2-alpha.4",
     "polished": "^4.3.1",
     "react-native-safe-area-context": "^5"
   },
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b996f5156b78ae94b967434130a6af1bee2876a2"
+  "gitHead": "f96bb7e3c60928bed07cae53a833fede3a65498a"
 }

package/src/Tree.tsx

@@ -40,10 +40,26 @@ interface NodeProps {
   status: State['status'][keyof State['status']];
 }
 
-const TextItem = styled.Text(({ theme }) => ({
-  fontSize: theme.typography.size.s2 + 1,
-  color: theme.color.defaultText,
-}));
+// from estookit/string
+const CASE_SPLIT_PATTERN =
+  /\p{Lu}?\p{Ll}+|[0-9]+|\p{Lu}+(?!\p{Ll})|\p{Emoji_Presentation}|\p{Extended_Pictographic}|\p{L}+/gu;
+// from estookit/string
+function words(str: string) {
+  return Array.from(str.match(CASE_SPLIT_PATTERN) ?? []);
+}
+// from estookit/string
+function startCase(str: string) {
+  const words$1 = words(str.trim());
+  let result = '';
+  for (let i = 0; i < words$1.length; i++) {
+    const word = words$1[i];
+    if (result) {
+      result += ' ';
+    }
+    result += word[0].toUpperCase() + word.slice(1).toLowerCase();
+  }
+  return result;
+}
 
 export const Node = React.memo<NodeProps>(function Node({
   item,
@@ -92,7 +108,7 @@ export const Node = React.memo<NodeProps>(function Node({
           aria-expanded={isExpanded}
         >
           <CollapseIcon isExpanded={isExpanded} />
-          <TextItem>{item.renderLabel?.(item, {}) || item.name}</TextItem>
+          <RootNodeText>{startCase(item.name)}</RootNodeText>
         </CollapseButton>
         {isExpanded && (
           <IconButton
@@ -129,7 +145,7 @@ export const Node = React.memo<NodeProps>(function Node({
           setExpanded({ ids: [item.id], value: !isExpanded });
         }}
       >
-        {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+        {startCase(item.name)}
       </BranchNode>
     );
   }
@@ -161,7 +177,7 @@ export const RootNode = styled.View(() => ({
 }));
 
 export const RootNodeText = styled.Text(({ theme }) => ({
-  fontSize: theme.typography.size.s1 - 1,
+  fontSize: theme.typography.size.s2,
   fontWeight: theme.typography.weight.bold,
   color: theme.textMutedColor,
   lineHeight: 16,