@fluentui-react-native/use-styling 0.13.11 → 0.14.0

package/lib-commonjs/useStyling.samples.test.js

@@ -1,23 +1,73 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_native_1 = require("react-native");
-const renderer = tslib_1.__importStar(require("react-test-renderer"));
-const buildProps_1 = require("./buildProps");
-const buildUseStyling_1 = require("./buildUseStyling");
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+Object.defineProperty(exports, '__esModule', { value: true });
+const jsx_runtime_1 = require('react/jsx-runtime');
+const react_1 = require('react');
+const react_native_1 = require('react-native');
+const renderer = __importStar(require('react-test-renderer'));
+const buildProps_1 = require('./buildProps');
+const buildUseStyling_1 = require('./buildUseStyling');
 /**
  * The default/base theme just contains base values
  */
 const baseTheme = {
-    globals: {
-        backgroundColor: 'white',
-        color: 'black',
-        borderColor: 'blue',
-        fontFamily: 'Arial',
-        fontSize: 12,
-    },
-    components: {},
+  globals: {
+    backgroundColor: 'white',
+    color: 'black',
+    borderColor: 'blue',
+    fontFamily: 'Arial',
+    fontSize: 12,
+  },
+  components: {},
 };
 const current = { theme: baseTheme };
 /**
@@ -26,156 +76,178 @@ const current = { theme: baseTheme };
  * whatever system they desire
  */
 const themeHelper = {
-    useTheme: () => current.theme,
-    getComponentInfo: (theme, name) => theme.components[name],
-    setActive: (theme) => {
-        current.theme = theme ? { ...baseTheme, ...theme } : baseTheme;
-    },
+  useTheme: () => current.theme,
+  getComponentInfo: (theme, name) => theme.components[name],
+  setActive: (theme) => {
+    current.theme = theme ? { ...baseTheme, ...theme } : baseTheme;
+  },
 };
 describe('useStyling samples', () => {
+  /**
+   * Sample #1 - Themeable text element
+   *
+   * This adds some default opinions for how a text element should be styled but only allows for customization
+   * via theming
+   */
+  // now create the styling hook, first the options so they can be reused later
+  const sample1StylingOptions = {
+    /**
+     * tell the styling hook how to build up the tokens
+     */
+    tokens: [
+      /** first the default values should come from the global theme section */
+      (t) => ({
+        color: t.globals.color,
+        fontFamily: t.globals.fontFamily,
+        fontSize: t.globals.fontSize,
+      }),
+      /** next we should look for a component reference to overlay */
+      'Sample1',
+    ],
     /**
-     * Sample #1 - Themeable text element
-     *
-     * This adds some default opinions for how a text element should be styled but only allows for customization
-     * via theming
+     * Now provide the recipe for how to build props for the sub-components given the tokens
      */
-    // now create the styling hook, first the options so they can be reused later
-    const sample1StylingOptions = {
+    slotProps: {
+      /** only one sub-component, a Text element called content, as a result this needs to build up TextProps */
+      content: (0, buildProps_1.buildProps)(
         /**
-         * tell the styling hook how to build up the tokens
+         * first input for buildProps is a function which takes tokens and a theme and returns props
          */
-        tokens: [
-            /** first the default values should come from the global theme section */
-            (t) => ({
-                color: t.globals.color,
-                fontFamily: t.globals.fontFamily,
-                fontSize: t.globals.fontSize,
-            }),
-            /** next we should look for a component reference to overlay */
-            'Sample1',
-        ],
+        (tokens /*, theme: Theme */) => {
+          return {
+            style: { ...tokens },
+          };
+        },
         /**
-         * Now provide the recipe for how to build props for the sub-components given the tokens
+         * The second input are the tokens used as inputs for the above function. This is similar to the way the useEffect hook
+         * works in react.
          */
-        slotProps: {
-            /** only one sub-component, a Text element called content, as a result this needs to build up TextProps */
-            content: (0, buildProps_1.buildProps)(
-            /**
-             * first input for buildProps is a function which takes tokens and a theme and returns props
-             */
-            (tokens /*, theme: Theme */) => {
-                return {
-                    style: { ...tokens },
-                };
-            }, 
-            /**
-             * The second input are the tokens used as inputs for the above function. This is similar to the way the useEffect hook
-             * works in react.
-             */
-            ['color', 'fontFamily', 'fontSize']),
+        ['color', 'fontFamily', 'fontSize'],
+      ),
+    },
+  };
+  // now build the actual hook from the options and theme helper
+  const useStylingSample1 = (0, buildUseStyling_1.buildUseStyling)(sample1StylingOptions, themeHelper);
+  // now the sample 1 component becomes simple to build, just merge the styled props with the input props
+  const Sample1Text = (props) => {
+    const styledProps = useStylingSample1(props).content;
+    const merged = { ...props, ...styledProps };
+    return jsx_runtime_1.jsx(react_native_1.Text, { ...merged, children: props.children });
+  };
+  /** first render the component with no updates */
+  it('Sample1Text rendering with no overrides', () => {
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(jsx_runtime_1.jsx(Sample1Text, { children: 'Sample1a' }));
+    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  /** now re-theme the component via the components in the theme */
+  it('Sample1Text rendering with some custom settings in the theme', () => {
+    themeHelper.setActive({
+      components: {
+        Sample1: {
+          color: 'pink',
+          fontSize: 24,
         },
-    };
-    // now build the actual hook from the options and theme helper
-    const useStylingSample1 = (0, buildUseStyling_1.buildUseStyling)(sample1StylingOptions, themeHelper);
-    // now the sample 1 component becomes simple to build, just merge the styled props with the input props
-    const Sample1Text = (props) => {
-        const styledProps = useStylingSample1(props).content;
-        const merged = { ...props, ...styledProps };
-        return React.createElement(react_native_1.Text, { ...merged }, props.children);
-    };
-    /** first render the component with no updates */
-    it('Sample1Text rendering with no overrides', () => {
-        const tree = renderer.create(React.createElement(Sample1Text, null, "Sample1a")).toJSON();
-        expect(tree).toMatchSnapshot();
+      },
     });
-    /** now re-theme the component via the components in the theme */
-    it('Sample1Text rendering with some custom settings in the theme', () => {
-        themeHelper.setActive({
-            components: {
-                Sample1: {
-                    color: 'pink',
-                    fontSize: 24,
-                },
-            },
-        });
-        const tree = renderer.create(React.createElement(Sample1Text, null, "Sample1b")).toJSON();
-        expect(tree).toMatchSnapshot();
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(jsx_runtime_1.jsx(Sample1Text, { children: 'Sample1b' }));
     });
-    /**
-     * Build the styling hook for sample2. Because this isn't being recombined this is being specified inline rather
-     * than using a separate options object. Both are fine.
-     */
-    const useStylingSample2 = (0, buildUseStyling_1.buildUseStyling)({
-        /**
-         * This just starts with the baseline styling from sample1, in particular we are using the recipes of how to turn
-         * token values into the props for the internal sub-components. While this example is not super complex, for real-world
-         * components, re-using these can be extremely valuable.
-         *
-         * With that in mind, this copies over the recipes for how to turn tokens into props, the customizations that
-         * will be made are about how to ensure the tokens are set up correctly.
-         */
-        ...sample1StylingOptions,
-        /**
-         * In sample1 tokens are set to defaults from the global theme section, then patched with any values looked up with
-         * the string 'Sample1'
-         *
-         * We want to maintain the logic of setting up the globals, but add an additional lookup for 'Sample2'. This might correspond
-         * to saying that if we were making a variant of a 'Text' component called 'HeaderText', we might want to look up
-         * customizations from 'Text' first, then override those customizations with those from 'HeaderText'
-         *
-         * If we didn't want to add the extra 'Sample2' lookup this line would be omitted. If we didn't want to look up 'Sample1' first
-         * that could be filtered out of the array that is being copied
-         */
-        tokens: [...sample1StylingOptions.tokens, 'Sample2'],
-        /**
-         * This is the final bit of magic. The tokens will already have values set from the global theme, they will then be patched with
-         * any customizations set into Sample1 and/or Sample2.
-         *
-         * If this value was omitted then the tokens would be passed to the slotProps recipies as is. To have those values patched from
-         * the component props we add a list of the props which need to be passed into tokens. If all props should be spread into the
-         * tokens then this value can be set to 'all'. If none should be passed it can be omitted or set to 'none'
-         */
-        tokensThatAreAlsoProps: ['color'],
-    }, themeHelper);
-    // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
-    const Sample2Text = (props) => {
-        const styledProps = useStylingSample2(props).content;
-        const merged = { ...props, ...styledProps };
-        // delete the color key to not pass it through to the text props, could be done via destructuring, filtering, or any number of ways
-        delete merged.color;
-        // render the text
-        return React.createElement(react_native_1.Text, { ...merged }, props.children);
-    };
-    /** rendering the Sample2 component with the base theme */
-    it('Sample2Text rendering with defaults and a color override', () => {
-        themeHelper.setActive();
-        const tree = renderer
-            .create(React.createElement(react_native_1.View, null,
-            React.createElement(Sample2Text, null, "Sample2 with defaults"),
-            React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")))
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  /**
+   * Build the styling hook for sample2. Because this isn't being recombined this is being specified inline rather
+   * than using a separate options object. Both are fine.
+   */
+  const useStylingSample2 = (0, buildUseStyling_1.buildUseStyling)(
+    {
+      /**
+       * This just starts with the baseline styling from sample1, in particular we are using the recipes of how to turn
+       * token values into the props for the internal sub-components. While this example is not super complex, for real-world
+       * components, re-using these can be extremely valuable.
+       *
+       * With that in mind, this copies over the recipes for how to turn tokens into props, the customizations that
+       * will be made are about how to ensure the tokens are set up correctly.
+       */
+      ...sample1StylingOptions,
+      /**
+       * In sample1 tokens are set to defaults from the global theme section, then patched with any values looked up with
+       * the string 'Sample1'
+       *
+       * We want to maintain the logic of setting up the globals, but add an additional lookup for 'Sample2'. This might correspond
+       * to saying that if we were making a variant of a 'Text' component called 'HeaderText', we might want to look up
+       * customizations from 'Text' first, then override those customizations with those from 'HeaderText'
+       *
+       * If we didn't want to add the extra 'Sample2' lookup this line would be omitted. If we didn't want to look up 'Sample1' first
+       * that could be filtered out of the array that is being copied
+       */
+      tokens: [...sample1StylingOptions.tokens, 'Sample2'],
+      /**
+       * This is the final bit of magic. The tokens will already have values set from the global theme, they will then be patched with
+       * any customizations set into Sample1 and/or Sample2.
+       *
+       * If this value was omitted then the tokens would be passed to the slotProps recipies as is. To have those values patched from
+       * the component props we add a list of the props which need to be passed into tokens. If all props should be spread into the
+       * tokens then this value can be set to 'all'. If none should be passed it can be omitted or set to 'none'
+       */
+      tokensThatAreAlsoProps: ['color'],
+    },
+    themeHelper,
+  );
+  // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
+  const Sample2Text = (props) => {
+    const styledProps = useStylingSample2(props).content;
+    const merged = { ...props, ...styledProps };
+    // delete the color key to not pass it through to the text props, could be done via destructuring, filtering, or any number of ways
+    delete merged.color;
+    // render the text
+    return jsx_runtime_1.jsx(react_native_1.Text, { ...merged, children: props.children });
+  };
+  /** rendering the Sample2 component with the base theme */
+  it('Sample2Text rendering with defaults and a color override', () => {
+    themeHelper.setActive();
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(
+        jsx_runtime_1.jsxs(react_native_1.View, {
+          children: [
+            jsx_runtime_1.jsx(Sample2Text, { children: 'Sample2 with defaults' }),
+            jsx_runtime_1.jsx(Sample2Text, { color: 'green', children: 'Sample2 with color override via prop' }),
+          ],
+        }),
+      );
     });
-    /** now re-theme the component via the components in the theme */
-    it('Sample2Text rendering with some custom settings in the theme', () => {
-        themeHelper.setActive({
-            components: {
-                Sample1: {
-                    color: 'pink',
-                    fontSize: 24,
-                },
-                Sample2: {
-                    fontSize: 18,
-                    fontFamily: 'Helvetica',
-                },
-            },
-        });
-        const tree = renderer
-            .create(React.createElement(react_native_1.View, null,
-            React.createElement(Sample2Text, null, "Sample2 with theme overrides set"),
-            React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")))
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  /** now re-theme the component via the components in the theme */
+  it('Sample2Text rendering with some custom settings in the theme', () => {
+    themeHelper.setActive({
+      components: {
+        Sample1: {
+          color: 'pink',
+          fontSize: 24,
+        },
+        Sample2: {
+          fontSize: 18,
+          fontFamily: 'Helvetica',
+        },
+      },
+    });
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(
+        jsx_runtime_1.jsxs(react_native_1.View, {
+          children: [
+            jsx_runtime_1.jsx(Sample2Text, { children: 'Sample2 with theme overrides set' }),
+            jsx_runtime_1.jsx(Sample2Text, { color: 'purple', children: 'Sample2 with theme and color prop override' }),
+          ],
+        }),
+      );
     });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
-//# sourceMappingURL=useStyling.samples.test.js.map
+//# sourceMappingURL=useStyling.samples.test.js.map

package/lib-commonjs/useStyling.samples.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,78 +1,84 @@
 {
   "name": "@fluentui-react-native/use-styling",
-  "version": "0.13.11",
+  "version": "0.14.0",
   "description": "Opinionated use styling hook implementation",
+  "keywords": [],
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework/use-styling"
   },
-  "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",
-    "@fluentui-react-native/use-tokens": "0.6.11",
-    "tslib": "^2.3.1"
+    "@fluentui-react-native/framework-base": "0.3.0",
+    "@fluentui-react-native/use-tokens": "0.7.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/buildProps.ts

@@ -97,10 +97,10 @@ export function refinePropsFunctions<TSlotProps, TTokens, TTheme>(
   mask: TokensThatAreAlsoProps<TTokens>,
 ): BuildSlotProps<TSlotProps, TTokens, TTheme> {
   const result = {};
-  Object.keys(styles).forEach((key) => {
+  for (const key of Object.keys(styles)) {
     const refine =
       typeof styles[key] === 'function' && (styles[key] as RefinableBuildPropsBase<TSlotProps[keyof TSlotProps], TTokens, TTheme>).refine;
     result[key] = refine ? refine(mask) : styles[key];
-  });
+  }
   return result;
 }