@fluentui-react-native/use-tokens 0.6.11 → 0.7.0

package/package.json

@@ -1,77 +1,83 @@
 {
   "name": "@fluentui-react-native/use-tokens",
-  "version": "0.6.11",
+  "version": "0.7.0",
   "description": "Utilities and hook function for getting themed tokens for a component",
+  "keywords": [],
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework/use-tokens"
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "react-native": "src/index.ts",
+  "license": "MIT",
+  "author": "",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
-      "types": "./lib/index.d.ts"
+      "require": "./lib-commonjs/index.js"
     }
   },
-  "typings": "lib/index.d.ts",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
+    "build-cjs": "tsgo --outDir lib-commonjs",
+    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
+    "lint-package": "fluentui-scripts lint-package",
+    "prettier": "fluentui-scripts prettier",
     "start": "fluentui-scripts dev",
     "start-test": "fluentui-scripts jest-watch",
     "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
-    "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
+    "update-snapshots": "fluentui-scripts jest -u"
   },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/framework-base": "0.2.0",
-    "tslib": "^2.3.1"
+    "@fluentui-react-native/framework-base": "0.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@fluentui-react-native/scripts": "0.1.1",
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/metro-config": "^0.74.0",
+    "@fluentui-react-native/babel-config": "0.1.1",
+    "@fluentui-react-native/eslint-config-rules": "0.1.1",
+    "@fluentui-react-native/jest-config": "0.1.1",
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
+    "@react-native/babel-preset": "^0.81.0",
+    "@react-native/metro-config": "^0.81.0",
     "@types/jest": "^29.0.0",
-    "react": "18.2.0",
-    "react-native": "^0.74.0"
+    "@types/react": "~19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.0",
+    "react-test-renderer": "19.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": {
-        "development": [
-          "react-native@0.74"
-        ],
-        "production": [
-          "react-native@0.73 || 0.74"
-        ]
-      },
       "capabilities": [
-        "babel-preset-react-native",
-        "core",
-        "core-android",
-        "core-ios",
-        "react"
+        "core-android-dev-only",
+        "core-dev-only",
+        "core-ios-dev-only",
+        "react",
+        "react-test-renderer",
+        "tools-core",
+        "tools-jest"
       ]
-    }
-  },
-  "peerDependencies": {
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0"
+    },
+    "extends": "@fluentui-react-native/kit-config"
   }
-}
+}

package/src/customizable.ts

@@ -1,12 +1,13 @@
 import type React from 'react';
 
 import type { TokenSettings, UseTokens } from './buildUseTokens';
+import type { FurnJSX } from '@fluentui-react-native/framework-base';
 
 /**
  * A component implementation, with a use tokens hook passed in. Implementing it this way allows the useTokens hook to be
  * modified by the customization handler
  */
-export type InjectableComponent<TProps, TTokens, TTheme> = (props: TProps, useTokens: UseTokens<TTokens, TTheme>) => JSX.Element | null;
+export type InjectableComponent<TProps, TTokens, TTheme> = (props: TProps, useTokens: UseTokens<TTokens, TTheme>) => FurnJSX.Element | null;
 
 /**
  * A component with an attached customize function, used to create alternatively styled versions of the component
@@ -18,7 +19,7 @@ export type CustomizableComponent<TProps, TTokens, TTheme> = React.FunctionCompo
 /**
  * Function helper for easily creating a customizable component based on the useTokens hook
  *
- * @param injectable - a function component implementation, written in (props, useTokens) => JSX.Element form
+ * @param injectable - a function component implementation, written in (props, useTokens) => FurnJSX.Element form
  * @param useTokens - a hook function, generally built via buildUseTokens, used to retrieve design tokens for the component
  *
  * @returns - a function component that has a static function called customize attached. Customize will return a

package/src/useTokens.samples.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { act } from 'react';
 import type { TextProps } from 'react-native';
 import { Text, View } from 'react-native';
 
@@ -96,7 +97,7 @@ describe('useTokens samples', () => {
     const [tokens, cache] = useTokensSample1(theme);
 
     // build up the text style, or the full props as appropriate
-    const styleFromTokens = cache(
+    const [styleFromTokens] = cache(
       /**
        * first build the style object
        * - this executes once for every unique set of keys.
@@ -131,8 +132,11 @@ describe('useTokens samples', () => {
 
   /** first render the component with no updates */
   it('Sample1Text rendering with no overrides', () => {
-    const tree = renderer.create(<SampleText1>Sample1a</SampleText1>).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<SampleText1>Sample1a</SampleText1>);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   /** now re-theme the component via the components in the theme */
@@ -145,8 +149,11 @@ describe('useTokens samples', () => {
         },
       },
     });
-    const tree = renderer.create(<SampleText1>Sample1b</SampleText1>).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<SampleText1>Sample1b</SampleText1>);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   /**
@@ -184,15 +191,16 @@ describe('useTokens samples', () => {
 
   /** rendering the Sample2 component with the base theme */
   it('Sample2Text rendering with defaults and a color override', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <View>
           <SampleText2>Sample2 with defaults</SampleText2>
           <SampleText2 color="green">Sample2 with color override via prop</SampleText2>
         </View>,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+      );
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   /** now re-theme the component via the components in the theme */
@@ -205,14 +213,15 @@ describe('useTokens samples', () => {
         },
       },
     });
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <View>
           <SampleText2>Sample2 with theme overrides set</SampleText2>
           <SampleText2 color="purple">Sample2 with theme and color prop override</SampleText2>
         </View>,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+      );
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 });