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

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

@@ -1,73 +1,56 @@
-'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;
+"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 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;
+        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');
+})();
+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 };
 /**
@@ -76,178 +59,164 @@ 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
+     * 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
      */
-    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',
-    ],
-    /**
-     * Now provide the recipe for how to build props for the sub-components given the tokens
-     */
-    slotProps: {
-      /** only one sub-component, a Text element called content, as a result this needs to build up TextProps */
-      content: (0, buildProps_1.buildProps)(
+    // now create the styling hook, first the options so they can be reused later
+    const sample1StylingOptions = {
         /**
-         * first input for buildProps is a function which takes tokens and a theme and returns props
+         * tell the styling hook how to build up the tokens
          */
-        (tokens /*, theme: Theme */) => {
-          return {
-            style: { ...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',
+        ],
         /**
-         * 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.
+         * Now provide the recipe for how to build props for the sub-components given the tokens
          */
-        ['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,
+        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']),
         },
-      },
-    });
-    let component;
-    (0, react_1.act)(() => {
-      component = renderer.create(jsx_runtime_1.jsx(Sample1Text, { children: 'Sample1b' }));
+    };
+    // 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();
     });
-    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('Sample1Text rendering with some custom settings in the theme', () => {
+        themeHelper.setActive({
+            components: {
+                Sample1: {
+                    color: 'pink',
+                    fontSize: 24,
+                },
+            },
+        });
+        let component;
+        (0, react_1.act)(() => {
+            component = renderer.create(jsx_runtime_1.jsx(Sample1Text, { children: "Sample1b" }));
+        });
+        expect(component.toJSON()).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',
-        },
-      },
+    /**
+     * 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" })
+                ] }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    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' }),
-          ],
-        }),
-      );
+    /** 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();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
 });
-//# sourceMappingURL=useStyling.samples.test.js.map
+//# sourceMappingURL=useStyling.samples.test.js.map

package/package.json

@@ -1,50 +1,51 @@
 {
   "name": "@fluentui-react-native/use-styling",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Opinionated use styling hook implementation",
   "keywords": [],
+  "license": "MIT",
+  "author": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native",
     "directory": "packages/framework/use-styling"
   },
-  "license": "MIT",
-  "author": "",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js"
+      "require": "./lib-commonjs/index.js",
+      "default": "./src/index.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",
+    "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "start": "fluentui-scripts dev",
     "start-test": "fluentui-scripts jest-watch",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/framework-base": "0.3.0",
-    "@fluentui-react-native/use-tokens": "0.7.0"
+    "@fluentui-react-native/framework-base": "0.3.1",
+    "@fluentui-react-native/use-tokens": "0.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.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/eslint-config-rules": "0.1.2",
+    "@fluentui-react-native/jest-config": "0.1.0",
     "@fluentui-react-native/kit-config": "0.1.2",
-    "@fluentui-react-native/scripts": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.0",
     "@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",

package/src/buildProps.ts

@@ -57,8 +57,8 @@ function refineKeys<TTokens>(keys: (keyof TTokens)[], mask?: TokensThatAreAlsoPr
   return typeof mask === 'object' && Array.isArray(mask)
     ? keys.filter((key) => mask.findIndex((val) => val === key) !== -1)
     : mask
-    ? keys
-    : [];
+      ? keys
+      : [];
 }
 
 /**