@fluentui-react-native/use-tokens 0.1.6

package/lib/buildUseTokens.js

@@ -0,0 +1,62 @@
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+import { getMemoCache } from '@fluentui-react-native/memo-cache';
+import { immutableMerge } from '@fluentui-react-native/immutable-merge';
+/**
+ * Tokens are defined as either:
+ *   TTokens     - an object
+ *   string      - a name to look up in the theme
+ *   function    - a function to run against the theme to produce tokens
+ *
+ * This function maps any of these types into a specific TTokens object.  A string is first lookup up in the theme, returning a function
+ * or object. If the type is a function this will be invoked with the theme to generate the tokens object.
+ *
+ * @param tokenEntry - token entry to start with
+ * @param theme - theme to use for queries
+ * @param getComponentInfo - helper to use to lookup the component in the theme
+ */
+function mapToTokens(tokenEntry, theme, getComponentInfo) {
+    if (typeof tokenEntry === 'string') {
+        tokenEntry = (getComponentInfo && getComponentInfo(theme, tokenEntry)) || {};
+    }
+    if (typeof tokenEntry === 'function') {
+        tokenEntry = tokenEntry(theme);
+    }
+    return tokenEntry;
+}
+/**
+ * Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
+ *
+ * @param options - options which drive behavior for the generated styling hook
+ * @param themeHelper - injected theme functionality
+ */
+export function buildUseTokens(getComponentInfo) {
+    var tokens = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        tokens[_i - 1] = arguments[_i];
+    }
+    // create a cache instance for use in this particular call to buildUseTokens
+    var cache = getMemoCache();
+    // the core function simply merges layers together, looking up component definitions in the theme as well as executing any
+    // theme functions. This turns the tokens into an array of token objects that then get merged together
+    var useTokensCore = function (theme) {
+        // get the base styles all merged together, these will only depend on internal tokens and theme
+        return cache(function () { return immutableMerge.apply(void 0, tokens.map(function (value) { return mapToTokens(value, theme, getComponentInfo); })); }, [theme]);
+    };
+    // attach a customize function to generate a new use
+    useTokensCore.customize = function () {
+        var newTokens = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            newTokens[_i] = arguments[_i];
+        }
+        var mergedTokens = __spreadArrays(tokens, newTokens);
+        return buildUseTokens.apply(void 0, __spreadArrays([getComponentInfo], mergedTokens));
+    };
+    return useTokensCore;
+}
+//# sourceMappingURL=buildUseTokens.js.map

package/lib/buildUseTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildUseTokens.js","sourceRoot":"","sources":["../src/buildUseTokens.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,YAAY,EAAgB,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAiCxE;;;;;;;;;;;;GAYG;AACH,SAAS,WAAW,CAClB,UAA+D,EAC/D,KAAa,EACb,gBAA+D;IAE/D,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;QAClC,UAAU,GAAG,CAAC,gBAAgB,IAAK,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAa,CAAC,IAAK,EAAc,CAAC;KACxG;IACD,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;QACpC,UAAU,GAAI,UAA+C,CAAC,KAAK,CAAC,CAAC;KACtE;IACD,OAAO,UAA+B,CAAC;AACzC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAC5B,gBAA+D;IAC/D,gBAA2C;SAA3C,UAA2C,EAA3C,qBAA2C,EAA3C,IAA2C;QAA3C,+BAA2C;;IAE3C,4EAA4E;IAC5E,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;IAE7B,0HAA0H;IAC1H,sGAAsG;IACtG,IAAM,aAAa,GAAG,UAAC,KAAa;QAClC,+FAA+F;QAC/F,OAAO,KAAK,CAAC,cAAM,OAAA,cAAc,eAAI,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,EAA3C,CAA2C,CAAC,GAApF,CAAqF,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACrH,CAAC,CAAC;IAEF,oDAAoD;IACpD,aAAa,CAAC,SAAS,GAAG;QAAC,mBAA8C;aAA9C,UAA8C,EAA9C,qBAA8C,EAA9C,IAA8C;YAA9C,8BAA8C;;QACvE,IAAM,YAAY,kBAAO,MAAM,EAAK,SAAS,CAAC,CAAC;QAC/C,OAAO,cAAc,+BAAkB,gBAAgB,GAAK,YAAY,GAAE;IAC5E,CAAC,CAAC;IAEF,OAAO,aAAa,CAAC;AACvB,CAAC"}

package/lib/buildUseTokens.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=buildUseTokens.test.d.ts.map

package/lib/buildUseTokens.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildUseTokens.test.d.ts","sourceRoot":"","sources":["../src/buildUseTokens.test.ts"],"names":[],"mappings":""}

package/lib/buildUseTokens.test.js

@@ -0,0 +1,103 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+import { buildUseTokens } from './buildUseTokens';
+var baseTokens = {
+    a: 'a-base',
+    b: 'b-base',
+    c: 'c-base',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
+};
+var defaultTheme = {
+    vals: {
+        foo: 'foo',
+        bar: 'bar',
+    },
+    components: {
+        uno: {
+            a: 'uno-a',
+            c: 'uno-c',
+        },
+        dos: {
+            b: 'dos-b',
+            c: 'dos-c',
+        },
+    },
+};
+var variantTheme = {
+    vals: {
+        foo: 'variant',
+    },
+    components: {},
+};
+var getComponentInfo = function (theme, name) { return theme.components[name]; };
+var componentTokens = [baseTokens, 'uno', function (theme) { return ({ b: theme.vals.foo }); }];
+var resolvedTokens = {
+    a: 'uno-a',
+    b: 'foo',
+    c: 'uno-c',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
+};
+var variantTokens = {
+    a: 'a-base',
+    b: 'variant',
+    c: 'c-base',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
+};
+describe('buildUseTokens test suite', function () {
+    test('basic built hook', function () {
+        var useTokens = buildUseTokens.apply(void 0, __spreadArrays([getComponentInfo], componentTokens));
+        var tokens = useTokens(defaultTheme)[0];
+        expect(tokens).toEqual(resolvedTokens);
+    });
+    test('multiple calls return same object', function () {
+        var useTokens = buildUseTokens.apply(void 0, __spreadArrays([getComponentInfo], componentTokens));
+        var tokens1 = useTokens(defaultTheme)[0];
+        var tokens2 = useTokens(defaultTheme)[0];
+        expect(tokens1).toBe(tokens2);
+    });
+    test('variant theme is separate', function () {
+        var useTokens = buildUseTokens.apply(void 0, __spreadArrays([getComponentInfo], componentTokens));
+        var tokensDefault = useTokens(defaultTheme)[0];
+        var tokensVariant = useTokens(variantTheme)[0];
+        expect(tokensVariant).not.toBe(tokensDefault);
+        expect(tokensVariant).toEqual(variantTokens);
+    });
+    test('simple customization layers on top', function () {
+        var useTokens = buildUseTokens.apply(void 0, __spreadArrays([getComponentInfo], componentTokens));
+        var useTokensCustom = useTokens.customize({ a: 'custom' });
+        var tokens = useTokensCustom(defaultTheme)[0];
+        expect(tokens).toEqual(__assign(__assign({}, resolvedTokens), { a: 'custom' }));
+    });
+});
+//# sourceMappingURL=buildUseTokens.test.js.map

package/lib/buildUseTokens.test.js.map

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

package/lib/customizable.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TokenSettings, UseTokens } from './buildUseTokens';
+/**
+ * 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 declare type InjectableComponent<TProps, TTokens, TTheme> = (props: TProps, useTokens: UseTokens<TTokens, TTheme>) => JSX.Element | null;
+/**
+ * A component with an attached customize function, used to create alternatively styled versions of the component
+ */
+export declare type CustomizableComponent<TProps, TTokens, TTheme> = React.FunctionComponent<TProps> & {
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => CustomizableComponent<TProps, TTokens, TTheme>;
+};
+/**
+ * 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 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
+ *            new component (which can also be customized)
+ */
+export declare function customizable<TProps, TTokens, TTheme>(injectable: InjectableComponent<TProps, TTokens, TTheme>, useTokens: UseTokens<TTokens, TTheme>): CustomizableComponent<TProps, TTokens, TTheme>;
+//# sourceMappingURL=customizable.d.ts.map

package/lib/customizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customizable.d.ts","sourceRoot":"","sources":["../src/customizable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE5D;;;GAGG;AACH,oBAAY,mBAAmB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAExI;;GAEG;AACH,oBAAY,qBAAqB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAC7F,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,qBAAqB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;CAC5G,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EACxD,SAAS,EAAE,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,GACpC,qBAAqB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAOhD"}

package/lib/customizable.js

@@ -0,0 +1,22 @@
+/**
+ * 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 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
+ *            new component (which can also be customized)
+ */
+export function customizable(injectable, useTokens) {
+    var component = function (props) { return injectable(props, useTokens); };
+    component.customize = function () {
+        var tokens = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            tokens[_i] = arguments[_i];
+        }
+        var useTokensNew = useTokens.customize.apply(useTokens, tokens);
+        return customizable(injectable, useTokensNew);
+    };
+    return component;
+}
+//# sourceMappingURL=customizable.js.map

package/lib/customizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customizable.js","sourceRoot":"","sources":["../src/customizable.ts"],"names":[],"mappings":"AAgBA;;;;;;;;GAQG;AACH,MAAM,UAAU,YAAY,CAC1B,UAAwD,EACxD,SAAqC;IAErC,IAAM,SAAS,GAAG,UAAC,KAAa,IAAK,OAAA,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAA5B,CAA4B,CAAC;IAClE,SAAS,CAAC,SAAS,GAAG;QAAC,gBAA2C;aAA3C,UAA2C,EAA3C,qBAA2C,EAA3C,IAA2C;YAA3C,2BAA2C;;QAChE,IAAM,YAAY,GAAG,SAAS,CAAC,SAAS,OAAnB,SAAS,EAAc,MAAM,CAAC,CAAC;QACpD,OAAO,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAChD,CAAC,CAAC;IACF,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from './applyPropsToTokens';
+export * from './applyTokenLayers';
+export * from './buildUseTokens';
+export * from './customizable';
+export * from './patchTokens';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/lib/index.js

@@ -0,0 +1,6 @@
+export * from './applyPropsToTokens';
+export * from './applyTokenLayers';
+export * from './buildUseTokens';
+export * from './customizable';
+export * from './patchTokens';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/lib/patchTokens.d.ts

@@ -0,0 +1,12 @@
+import { GetMemoValue } from '@fluentui-react-native/memo-cache';
+/**
+ * Take a set of tokens (and a memo-cache) and apply changes to those tokens from an additional set of tokens. Only keys which are
+ * not undefined will be applied and if no changes are detected the token object will be unchanged.
+ *
+ * @param tokens - base set of tokens to apply changes to, this will not be modified
+ * @param cache - cache corresponding to this set of tokens
+ * @param patchValues - new values to apply, values will be obtained via keys in the object
+ * @returns - a tuple consisting of a new tokens object and a new memo-cache
+ */
+export declare function patchTokens<TTokens>(tokens: TTokens, cache: GetMemoValue<TTokens>, patchValues: TTokens): [TTokens, GetMemoValue<TTokens>];
+//# sourceMappingURL=patchTokens.d.ts.map

package/lib/patchTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patchTokens.d.ts","sourceRoot":"","sources":["../src/patchTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,OAAO,EACjC,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAC5B,WAAW,EAAE,OAAO,GACnB,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAclC"}

package/lib/patchTokens.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/**
+ * Take a set of tokens (and a memo-cache) and apply changes to those tokens from an additional set of tokens. Only keys which are
+ * not undefined will be applied and if no changes are detected the token object will be unchanged.
+ *
+ * @param tokens - base set of tokens to apply changes to, this will not be modified
+ * @param cache - cache corresponding to this set of tokens
+ * @param patchValues - new values to apply, values will be obtained via keys in the object
+ * @returns - a tuple consisting of a new tokens object and a new memo-cache
+ */
+export function patchTokens(tokens, cache, patchValues) {
+    // reduce the patch values to the set of keys that are defined, and sort them to ensure consistent ordering
+    var keys = Object.keys(patchValues)
+        .filter(function (v) { return patchValues[v] !== undefined; })
+        .sort();
+    var _loop_1 = function (key) {
+        var _a;
+        _a = cache(function () {
+            var _a;
+            return (__assign(__assign({}, tokens), (_a = {}, _a[key] = patchValues[key], _a)));
+        }, [key, patchValues[key]]), tokens = _a[0], cache = _a[1];
+    };
+    // for each key get an updated tokens collection based on key + value. Value alone isn't sufficient as the values
+    // are not necessarily unique. i.e. { a: 'blue' } and { b: 'blue' } would cache to the same without the key
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        _loop_1(key);
+    }
+    // return the updated tokens and cache (if there were any keys applied)
+    return [tokens, cache];
+}
+//# sourceMappingURL=patchTokens.js.map

package/lib/patchTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patchTokens.js","sourceRoot":"","sources":["../src/patchTokens.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CACzB,MAAe,EACf,KAA4B,EAC5B,WAAoB;IAEpB,2GAA2G;IAC3G,IAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;SAClC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,EAA5B,CAA4B,CAAC;SAC3C,IAAI,EAAE,CAAC;4BAIC,GAAG;;QACZ;;;mCAAgG,EAA/F,cAAM,EAAE,aAAK,CAAmF;;IAHnG,iHAAiH;IACjH,2GAA2G;IAC3G,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI;QAAjB,IAAM,GAAG,aAAA;gBAAH,GAAG;KAEb;IAED,uEAAuE;IACvE,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzB,CAAC"}

package/lib/patchTokens.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=patchTokens.test.d.ts.map

package/lib/patchTokens.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patchTokens.test.d.ts","sourceRoot":"","sources":["../src/patchTokens.test.ts"],"names":[],"mappings":""}

package/lib/patchTokens.test.js

@@ -0,0 +1,38 @@
+import { patchTokens } from './patchTokens';
+import { getMemoCache } from '@fluentui-react-native/memo-cache';
+var themeTokens = {
+    uno: 'uno',
+    dos: 'dos',
+    tres: 3,
+    quatro: 4,
+    cinco: true,
+};
+describe('patchTokens tests', function () {
+    test('props get copied', function () {
+        var cache = getMemoCache();
+        var patchValues = { uno: 'one', quatro: 'quatro' };
+        var tokens = patchTokens(themeTokens, cache, patchValues)[0];
+        expect(tokens).not.toBe(themeTokens);
+        for (var key in patchValues) {
+            expect(tokens[key]).toEqual(patchValues[key]);
+        }
+    });
+    test('no copied props does not change tokens', function () {
+        var cache = getMemoCache();
+        var patchValues1 = {};
+        var tokens = patchTokens(themeTokens, cache, patchValues1)[0];
+        expect(tokens).toBe(themeTokens);
+        var patchValues2 = { tres: undefined };
+        var tokens2 = patchTokens(themeTokens, cache, patchValues2)[0];
+        expect(tokens2).toBe(themeTokens);
+    });
+    test('patching tokens cache independent of order', function () {
+        var cache = getMemoCache();
+        var patch1 = { uno: 'one', cinco: false };
+        var patch2 = { cinco: false, uno: 'one' };
+        var tokens1 = patchTokens(themeTokens, cache, patch1)[0];
+        var tokens2 = patchTokens(themeTokens, cache, patch2)[0];
+        expect(tokens1).toBe(tokens2);
+    });
+});
+//# sourceMappingURL=patchTokens.test.js.map

package/lib/patchTokens.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patchTokens.test.js","sourceRoot":"","sources":["../src/patchTokens.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAUjE,IAAM,WAAW,GAAW;IAC1B,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,QAAQ,CAAC,mBAAmB,EAAE;IAC5B,IAAI,CAAC,kBAAkB,EAAE;QACvB,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,WAAW,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;QAC9C,IAAA,wDAAM,CAAiD;QAC9D,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,KAAK,IAAM,GAAG,IAAI,WAAW,EAAE;YAC7B,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;SAC/C;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wCAAwC,EAAE;QAC7C,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,YAAY,GAAG,EAAE,CAAC;QACjB,IAAA,yDAAM,CAAkD;QAC/D,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEjC,IAAM,YAAY,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;QAClC,IAAA,0DAAO,CAAkD;QAChE,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4CAA4C,EAAE;QACjD,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,MAAM,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;QAC5C,IAAM,MAAM,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;QACrC,IAAA,oDAAO,CAA4C;QACnD,IAAA,oDAAO,CAA4C;QAC1D,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/useTokens.samples.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useTokens.samples.test.d.ts.map

package/lib/useTokens.samples.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTokens.samples.test.d.ts","sourceRoot":"","sources":["../src/useTokens.samples.test.tsx"],"names":[],"mappings":""}

package/lib/useTokens.samples.test.js

@@ -0,0 +1,165 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Text, View } from 'react-native';
+import toJson from 'enzyme-to-json';
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { buildUseTokens } from './buildUseTokens';
+import { mergeStyles } from '@fluentui-react-native/merge-props';
+import { immutableMerge } from '@fluentui-react-native/immutable-merge';
+/**
+ * The default/base theme just contains base values
+ */
+var baseTheme = {
+    globals: {
+        backgroundColor: 'white',
+        color: 'black',
+        borderColor: 'blue',
+        fontFamily: 'Arial',
+        fontSize: 12,
+    },
+    components: {},
+};
+var current = { theme: baseTheme };
+var useTheme = function () { return current.theme; };
+var setActiveTheme = function (theme) {
+    current.theme = (theme && immutableMerge(baseTheme, theme)) || baseTheme;
+};
+/**
+ * this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
+ */
+function snapshotTestTree(tree) {
+    expect(toJson(tree)).toMatchSnapshot();
+}
+/**
+ * Helper function used to look up a component in the theme. Having this injected allows this module to not be dependent on the shape of
+ * the theme used.
+ */
+var getComponentInfo = function (theme, name) { return theme.components[name]; };
+describe('useTokens samples', function () {
+    /**
+     * 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
+     */
+    var useTokensSample1 = buildUseTokens(getComponentInfo, 
+    /** first the default values should come from the global theme section */
+    function (t) { return ({
+        color: t.globals.color,
+        fontFamily: t.globals.fontFamily,
+        fontSize: t.globals.fontSize,
+    }); }, 
+    /** next we should look for a component reference to overlay */
+    'SampleText');
+    var SampleText1 = function (props) {
+        // standard props splitting
+        var style = props.style, children = props.children, rest = __rest(props, ["style", "children"]);
+        // typically this would start with a call to retrieve the theme from the context via whatever method is appropriate
+        var theme = useTheme();
+        // next the tokens are resolved from the theme, a cache specific to this theme is returned as well to allow for
+        // style objects to not be rebuilt unnecessarily
+        var _a = useTokensSample1(theme), tokens = _a[0], cache = _a[1];
+        // build up the text style, or the full props as appropriate
+        var styleFromTokens = cache(
+        /**
+         * first build the style object
+         * - this executes once for every unique set of keys.
+         * - The cache is already unique for this theme
+         */
+        function () { return (__assign({}, tokens)); }, 
+        /**
+         * now specify the keys
+         * - because the only changing variable is the theme
+         * - ...and all the style properties are either constant or come from the tokens
+         * - ...no keys need to be specified
+         * - this means that only one style object will be created per component + theme pair
+         */
+        []);
+        // merge the props from the tokens with anything passed in via style. This is internally cached via object identity
+        // so the merged style object won't change identity unless one of the two inputs changes identity.
+        var mergedStyle = mergeStyles(styleFromTokens, style);
+        // now just render the element, forwarding the props, setting the merged style, then passing the children as appropriate
+        return (React.createElement(Text, __assign({}, rest, { style: mergedStyle }), children));
+    };
+    beforeEach(function () {
+        setActiveTheme();
+    });
+    /** first render the component with no updates */
+    it('Sample1Text rendering with no overrides', function () {
+        var tree = mount(React.createElement(SampleText1, null, "Sample1a"));
+        snapshotTestTree(tree);
+    });
+    /** now re-theme the component via the components in the theme */
+    it('Sample1Text rendering with some custom settings in the theme', function () {
+        setActiveTheme({
+            components: {
+                SampleText: {
+                    color: 'pink',
+                    fontSize: 24,
+                },
+            },
+        });
+        var tree = mount(React.createElement(SampleText1, null, "Sample1b"));
+        snapshotTestTree(tree);
+    });
+    // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
+    var SampleText2 = function (props) {
+        var color = props.color, style = props.style, children = props.children, rest = __rest(props, ["color", "style", "children"]);
+        var theme = useTheme();
+        // this starts the same as sample1, extract tokens from the theme and get a theme specific cache object
+        var _a = useTokensSample1(theme), tokens = _a[0], cache = _a[1];
+        // now when building up the style this time, the resulting style object is based upon both the theme and the passed
+        // in value of colors. Because the theme is already part of the cache definition, only color needs to be a key
+        var styleFromTokens = cache(
+        /** build the style, only patch the color if it has a value, otherwise the theme value would get stomped if color was undefined */
+        function () { return (__assign(__assign({}, tokens), (color && { color: color }))); }, 
+        /** use color as an additional key for the style */
+        [color]);
+        // now just render, this time merging styles inline to make it a bit shorter
+        return (React.createElement(Text, __assign({}, rest, { style: mergeStyles(styleFromTokens, style) }), children));
+    };
+    /** rendering the Sample2 component with the base theme */
+    it('Sample2Text rendering with defaults and a color override', function () {
+        var tree = mount(React.createElement(View, null,
+            React.createElement(SampleText2, null, "Sample2 with defaults"),
+            React.createElement(SampleText2, { color: "green" }, "Sample2 with color override via prop")));
+        snapshotTestTree(tree);
+    });
+    /** now re-theme the component via the components in the theme */
+    it('Sample2Text rendering with some custom settings in the theme', function () {
+        setActiveTheme({
+            components: {
+                SampleText: {
+                    fontSize: 18,
+                    fontFamily: 'Helvetica',
+                },
+            },
+        });
+        var tree = mount(React.createElement(View, null,
+            React.createElement(SampleText2, null, "Sample2 with theme overrides set"),
+            React.createElement(SampleText2, { color: "purple" }, "Sample2 with theme and color prop override")));
+        snapshotTestTree(tree);
+    });
+});
+//# sourceMappingURL=useTokens.samples.test.js.map

package/lib/useTokens.samples.test.js.map

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

package/lib-commonjs/applyPropsToTokens.d.ts

@@ -0,0 +1,3 @@
+import { GetMemoValue } from '@fluentui-react-native/memo-cache';
+export declare function applyPropsToTokens<TProps, TTokens>(props: TProps, tokens: TTokens, cache: GetMemoValue<TTokens>, keys: (keyof TTokens)[]): [TTokens, GetMemoValue<TTokens>];
+//# sourceMappingURL=applyPropsToTokens.d.ts.map

package/lib-commonjs/applyPropsToTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPropsToTokens.d.ts","sourceRoot":"","sources":["../src/applyPropsToTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAChD,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAC5B,IAAI,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,GACtB,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAOlC"}

package/lib-commonjs/applyPropsToTokens.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+function applyPropsToTokens(props, tokens, cache, keys) {
+    var _loop_1 = function (key) {
+        var _a;
+        var sourceValue = props[key];
+        var setValue = sourceValue === tokens[key] ? undefined : sourceValue;
+        _a = cache(function () {
+            var _a;
+            return (setValue === undefined ? tokens : __assign(__assign({}, tokens), (_a = {}, _a[key] = setValue, _a)));
+        }, [setValue]), tokens = _a[0], cache = _a[1];
+    };
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        _loop_1(key);
+    }
+    return [tokens, cache];
+}
+exports.applyPropsToTokens = applyPropsToTokens;
+//# sourceMappingURL=applyPropsToTokens.js.map

package/lib-commonjs/applyPropsToTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPropsToTokens.js","sourceRoot":"","sources":["../src/applyPropsToTokens.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAEA,SAAgB,kBAAkB,CAChC,KAAa,EACb,MAAe,EACf,KAA4B,EAC5B,IAAuB;4BAEZ,GAAG;;QACZ,IAAM,WAAW,GAAG,KAAK,CAAC,GAAa,CAAC,CAAC;QACzC,IAAM,QAAQ,GAAG,WAAW,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QACvE;;;sBAA6G,EAA5G,cAAM,EAAE,aAAK,CAAgG;;IAHhH,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI;QAAjB,IAAM,GAAG,aAAA;gBAAH,GAAG;KAIb;IACD,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzB,CAAC;AAZD,gDAYC"}

package/lib-commonjs/applyPropsToTokens.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=applyPropsToTokens.test.d.ts.map

package/lib-commonjs/applyPropsToTokens.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPropsToTokens.test.d.ts","sourceRoot":"","sources":["../src/applyPropsToTokens.test.ts"],"names":[],"mappings":""}