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

package/lib-commonjs/buildUseTokens.d.ts

@@ -19,7 +19,7 @@ export type UseTokensCore<TTokens, TTheme> = (theme: TTheme) => [TTokens, GetTyp
  * that captures both the previous values, and layers in the new values specified
  */
 export type UseTokens<TTokens, TTheme> = UseTokensCore<TTokens, TTheme> & {
-  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => UseTokens<TTokens, TTheme>;
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => UseTokens<TTokens, TTheme>;
 };
 /**
  * Helper function that knows how to try to look up token information from the theme
@@ -31,8 +31,5 @@ export type GetComponentInfo<TTokens, TTheme> = (theme: TTheme, name: string) =>
  * @param options - options which drive behavior for the generated styling hook
  * @param themeHelper - injected theme functionality
  */
-export declare function buildUseTokens<TTokens, TTheme>(
-  getComponentInfo: GetComponentInfo<TTokens, TTheme> | undefined,
-  ...tokens: TokenSettings<TTokens, TTheme>[]
-): UseTokens<TTokens, TTheme>;
-//# sourceMappingURL=buildUseTokens.d.ts.map
+export declare function buildUseTokens<TTokens, TTheme>(getComponentInfo: GetComponentInfo<TTokens, TTheme> | undefined, ...tokens: TokenSettings<TTokens, TTheme>[]): UseTokens<TTokens, TTheme>;
+//# sourceMappingURL=buildUseTokens.d.ts.map

package/lib-commonjs/buildUseTokens.js

@@ -1,8 +1,8 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildUseTokens = buildUseTokens;
-const framework_base_1 = require('@fluentui-react-native/framework-base');
-const framework_base_2 = require('@fluentui-react-native/framework-base');
+const framework_base_1 = require("@fluentui-react-native/framework-base");
+const framework_base_2 = require("@fluentui-react-native/framework-base");
 /**
  * Tokens are defined as either:
  *   TTokens     - an object
@@ -17,13 +17,13 @@ const framework_base_2 = require('@fluentui-react-native/framework-base');
  * @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;
+    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
@@ -32,22 +32,19 @@ function mapToTokens(tokenEntry, theme, getComponentInfo) {
  * @param themeHelper - injected theme functionality
  */
 function buildUseTokens(getComponentInfo, ...tokens) {
-  // create a cache instance for use in this particular call to buildUseTokens
-  const cache = (0, framework_base_2.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
-  const useTokensCore = (theme) => {
-    // get the base styles all merged together, these will only depend on internal tokens and theme
-    return cache(
-      () => (0, framework_base_1.immutableMerge)(...tokens.map((value) => mapToTokens(value, theme, getComponentInfo))),
-      [theme],
-    );
-  };
-  // attach a customize function to generate a new use
-  useTokensCore.customize = (...newTokens) => {
-    const mergedTokens = [...tokens, ...newTokens];
-    return buildUseTokens(getComponentInfo, ...mergedTokens);
-  };
-  return useTokensCore;
+    // create a cache instance for use in this particular call to buildUseTokens
+    const cache = (0, framework_base_2.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
+    const useTokensCore = (theme) => {
+        // get the base styles all merged together, these will only depend on internal tokens and theme
+        return cache(() => (0, framework_base_1.immutableMerge)(...tokens.map((value) => mapToTokens(value, theme, getComponentInfo))), [theme]);
+    };
+    // attach a customize function to generate a new use
+    useTokensCore.customize = (...newTokens) => {
+        const mergedTokens = [...tokens, ...newTokens];
+        return buildUseTokens(getComponentInfo, ...mergedTokens);
+    };
+    return useTokensCore;
 }
-//# sourceMappingURL=buildUseTokens.js.map
+//# sourceMappingURL=buildUseTokens.js.map

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

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

package/lib-commonjs/buildUseTokens.test.js

@@ -1,87 +1,87 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const buildUseTokens_1 = require('./buildUseTokens');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const buildUseTokens_1 = require("./buildUseTokens");
 const baseTokens = {
-  a: 'a-base',
-  b: 'b-base',
-  c: 'c-base',
-  hover: {
-    c: 'c-base-hover',
-  },
-  press: {
-    c: 'c-base-press',
-  },
+    a: 'a-base',
+    b: 'b-base',
+    c: 'c-base',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
 };
 const defaultTheme = {
-  vals: {
-    foo: 'foo',
-    bar: 'bar',
-  },
-  components: {
-    uno: {
-      a: 'uno-a',
-      c: 'uno-c',
+    vals: {
+        foo: 'foo',
+        bar: 'bar',
     },
-    dos: {
-      b: 'dos-b',
-      c: 'dos-c',
+    components: {
+        uno: {
+            a: 'uno-a',
+            c: 'uno-c',
+        },
+        dos: {
+            b: 'dos-b',
+            c: 'dos-c',
+        },
     },
-  },
 };
 const variantTheme = {
-  vals: {
-    foo: 'variant',
-  },
-  components: {},
+    vals: {
+        foo: 'variant',
+    },
+    components: {},
 };
 const getComponentInfo = (theme, name) => theme.components[name];
 const componentTokens = [baseTokens, 'uno', (theme) => ({ b: theme.vals.foo })];
 const resolvedTokens = {
-  a: 'uno-a',
-  b: 'foo',
-  c: 'uno-c',
-  hover: {
-    c: 'c-base-hover',
-  },
-  press: {
-    c: 'c-base-press',
-  },
+    a: 'uno-a',
+    b: 'foo',
+    c: 'uno-c',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
 };
 const variantTokens = {
-  a: 'a-base',
-  b: 'variant',
-  c: 'c-base',
-  hover: {
-    c: 'c-base-hover',
-  },
-  press: {
-    c: 'c-base-press',
-  },
+    a: 'a-base',
+    b: 'variant',
+    c: 'c-base',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
 };
 describe('buildUseTokens test suite', () => {
-  test('basic built hook', () => {
-    const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
-    const [tokens] = useTokens(defaultTheme);
-    expect(tokens).toEqual(resolvedTokens);
-  });
-  test('multiple calls return same object', () => {
-    const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
-    const [tokens1] = useTokens(defaultTheme);
-    const [tokens2] = useTokens(defaultTheme);
-    expect(tokens1).toBe(tokens2);
-  });
-  test('variant theme is separate', () => {
-    const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
-    const [tokensDefault] = useTokens(defaultTheme);
-    const [tokensVariant] = useTokens(variantTheme);
-    expect(tokensVariant).not.toBe(tokensDefault);
-    expect(tokensVariant).toEqual(variantTokens);
-  });
-  test('simple customization layers on top', () => {
-    const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
-    const useTokensCustom = useTokens.customize({ a: 'custom' });
-    const [tokens] = useTokensCustom(defaultTheme);
-    expect(tokens).toEqual({ ...resolvedTokens, a: 'custom' });
-  });
+    test('basic built hook', () => {
+        const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
+        const [tokens] = useTokens(defaultTheme);
+        expect(tokens).toEqual(resolvedTokens);
+    });
+    test('multiple calls return same object', () => {
+        const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
+        const [tokens1] = useTokens(defaultTheme);
+        const [tokens2] = useTokens(defaultTheme);
+        expect(tokens1).toBe(tokens2);
+    });
+    test('variant theme is separate', () => {
+        const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
+        const [tokensDefault] = useTokens(defaultTheme);
+        const [tokensVariant] = useTokens(variantTheme);
+        expect(tokensVariant).not.toBe(tokensDefault);
+        expect(tokensVariant).toEqual(variantTokens);
+    });
+    test('simple customization layers on top', () => {
+        const useTokens = (0, buildUseTokens_1.buildUseTokens)(getComponentInfo, ...componentTokens);
+        const useTokensCustom = useTokens.customize({ a: 'custom' });
+        const [tokens] = useTokensCustom(defaultTheme);
+        expect(tokens).toEqual({ ...resolvedTokens, a: 'custom' });
+    });
 });
-//# sourceMappingURL=buildUseTokens.test.js.map
+//# sourceMappingURL=buildUseTokens.test.js.map

package/lib-commonjs/customizable.d.ts

@@ -10,7 +10,7 @@ export type InjectableComponent<TProps, TTokens, TTheme> = (props: TProps, useTo
  * A component with an attached customize function, used to create alternatively styled versions of the component
  */
 export type CustomizableComponent<TProps, TTokens, TTheme> = React.FunctionComponent<TProps> & {
-  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => CustomizableComponent<TProps, TTokens, TTheme>;
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => CustomizableComponent<TProps, TTokens, TTheme>;
 };
 /**
  * Function helper for easily creating a customizable component based on the useTokens hook
@@ -21,8 +21,5 @@ export type CustomizableComponent<TProps, TTokens, TTheme> = React.FunctionCompo
  * @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
+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-commonjs/customizable.js

@@ -1,5 +1,5 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.customizable = customizable;
 /**
  * Function helper for easily creating a customizable component based on the useTokens hook
@@ -11,11 +11,11 @@ exports.customizable = customizable;
  *            new component (which can also be customized)
  */
 function customizable(injectable, useTokens) {
-  const component = (props) => injectable(props, useTokens);
-  component.customize = (...tokens) => {
-    const useTokensNew = useTokens.customize(...tokens);
-    return customizable(injectable, useTokensNew);
-  };
-  return component;
+    const component = (props) => injectable(props, useTokens);
+    component.customize = (...tokens) => {
+        const useTokensNew = useTokens.customize(...tokens);
+        return customizable(injectable, useTokensNew);
+    };
+    return component;
 }
-//# sourceMappingURL=customizable.js.map
+//# sourceMappingURL=customizable.js.map

package/lib-commonjs/index.d.ts

@@ -6,4 +6,4 @@ export type { GetComponentInfo, TokenSettings, TokensFromTheme, UseTokens, UseTo
 export { customizable } from './customizable';
 export type { CustomizableComponent, InjectableComponent } from './customizable';
 export { patchTokens } from './patchTokens';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.js

@@ -1,39 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.patchTokens = exports.customizable = exports.buildUseTokens = exports.applyTokenLayers = exports.applyPropsToTokens = void 0;
-const applyPropsToTokens_1 = require('./applyPropsToTokens');
-Object.defineProperty(exports, 'applyPropsToTokens', {
-  enumerable: true,
-  get: function () {
-    return applyPropsToTokens_1.applyPropsToTokens;
-  },
-});
-const applyTokenLayers_1 = require('./applyTokenLayers');
-Object.defineProperty(exports, 'applyTokenLayers', {
-  enumerable: true,
-  get: function () {
-    return applyTokenLayers_1.applyTokenLayers;
-  },
-});
-const buildUseTokens_1 = require('./buildUseTokens');
-Object.defineProperty(exports, 'buildUseTokens', {
-  enumerable: true,
-  get: function () {
-    return buildUseTokens_1.buildUseTokens;
-  },
-});
-const customizable_1 = require('./customizable');
-Object.defineProperty(exports, 'customizable', {
-  enumerable: true,
-  get: function () {
-    return customizable_1.customizable;
-  },
-});
-const patchTokens_1 = require('./patchTokens');
-Object.defineProperty(exports, 'patchTokens', {
-  enumerable: true,
-  get: function () {
-    return patchTokens_1.patchTokens;
-  },
-});
-//# sourceMappingURL=index.js.map
+const applyPropsToTokens_1 = require("./applyPropsToTokens");
+Object.defineProperty(exports, "applyPropsToTokens", { enumerable: true, get: function () { return applyPropsToTokens_1.applyPropsToTokens; } });
+const applyTokenLayers_1 = require("./applyTokenLayers");
+Object.defineProperty(exports, "applyTokenLayers", { enumerable: true, get: function () { return applyTokenLayers_1.applyTokenLayers; } });
+const buildUseTokens_1 = require("./buildUseTokens");
+Object.defineProperty(exports, "buildUseTokens", { enumerable: true, get: function () { return buildUseTokens_1.buildUseTokens; } });
+const customizable_1 = require("./customizable");
+Object.defineProperty(exports, "customizable", { enumerable: true, get: function () { return customizable_1.customizable; } });
+const patchTokens_1 = require("./patchTokens");
+Object.defineProperty(exports, "patchTokens", { enumerable: true, get: function () { return patchTokens_1.patchTokens; } });
+//# sourceMappingURL=index.js.map

package/lib-commonjs/patchTokens.d.ts

@@ -8,9 +8,5 @@ import type { GetTypedMemoValue } from '@fluentui-react-native/framework-base';
  * @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: GetTypedMemoValue<TTokens>,
-  patchValues: TTokens,
-): [TTokens, GetTypedMemoValue<TTokens>];
-//# sourceMappingURL=patchTokens.d.ts.map
+export declare function patchTokens<TTokens>(tokens: TTokens, cache: GetTypedMemoValue<TTokens>, patchValues: TTokens): [TTokens, GetTypedMemoValue<TTokens>];
+//# sourceMappingURL=patchTokens.d.ts.map

package/lib-commonjs/patchTokens.js

@@ -1,5 +1,5 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.patchTokens = patchTokens;
 /**
  * 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
@@ -11,16 +11,16 @@ exports.patchTokens = patchTokens;
  * @returns - a tuple consisting of a new tokens object and a new memo-cache
  */
 function patchTokens(tokens, cache, patchValues) {
-  // reduce the patch values to the set of keys that are defined, and sort them to ensure consistent ordering
-  const keys = Object.keys(patchValues)
-    .filter((v) => patchValues[v] !== undefined)
-    .sort();
-  // 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 (const key of keys) {
-    [tokens, cache] = cache(() => ({ ...tokens, [key]: patchValues[key] }), [key, patchValues[key]]);
-  }
-  // return the updated tokens and cache (if there were any keys applied)
-  return [tokens, cache];
+    // reduce the patch values to the set of keys that are defined, and sort them to ensure consistent ordering
+    const keys = Object.keys(patchValues)
+        .filter((v) => patchValues[v] !== undefined)
+        .sort();
+    // 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 (const key of keys) {
+        [tokens, cache] = cache(() => ({ ...tokens, [key]: patchValues[key] }), [key, patchValues[key]]);
+    }
+    // return the updated tokens and cache (if there were any keys applied)
+    return [tokens, cache];
 }
-//# sourceMappingURL=patchTokens.js.map
+//# sourceMappingURL=patchTokens.js.map

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

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

package/lib-commonjs/patchTokens.test.js

@@ -1,40 +1,40 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const framework_base_1 = require('@fluentui-react-native/framework-base');
-const patchTokens_1 = require('./patchTokens');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const framework_base_1 = require("@fluentui-react-native/framework-base");
+const patchTokens_1 = require("./patchTokens");
 const themeTokens = {
-  uno: 'uno',
-  dos: 'dos',
-  tres: 3,
-  quatro: 4,
-  cinco: true,
+    uno: 'uno',
+    dos: 'dos',
+    tres: 3,
+    quatro: 4,
+    cinco: true,
 };
 describe('patchTokens tests', () => {
-  test('props get copied', () => {
-    const cache = (0, framework_base_1.getMemoCache)();
-    const patchValues = { uno: 'one', quatro: 'quatro' };
-    const [tokens] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues);
-    expect(tokens).not.toBe(themeTokens);
-    for (const key in patchValues) {
-      expect(tokens[key]).toEqual(patchValues[key]);
-    }
-  });
-  test('no copied props does not change tokens', () => {
-    const cache = (0, framework_base_1.getMemoCache)();
-    const patchValues1 = {};
-    const [tokens] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues1);
-    expect(tokens).toBe(themeTokens);
-    const patchValues2 = { tres: undefined };
-    const [tokens2] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues2);
-    expect(tokens2).toBe(themeTokens);
-  });
-  test('patching tokens cache independent of order', () => {
-    const cache = (0, framework_base_1.getMemoCache)();
-    const patch1 = { uno: 'one', cinco: false };
-    const patch2 = { cinco: false, uno: 'one' };
-    const [tokens1] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patch1);
-    const [tokens2] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patch2);
-    expect(tokens1).toBe(tokens2);
-  });
+    test('props get copied', () => {
+        const cache = (0, framework_base_1.getMemoCache)();
+        const patchValues = { uno: 'one', quatro: 'quatro' };
+        const [tokens] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues);
+        expect(tokens).not.toBe(themeTokens);
+        for (const key in patchValues) {
+            expect(tokens[key]).toEqual(patchValues[key]);
+        }
+    });
+    test('no copied props does not change tokens', () => {
+        const cache = (0, framework_base_1.getMemoCache)();
+        const patchValues1 = {};
+        const [tokens] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues1);
+        expect(tokens).toBe(themeTokens);
+        const patchValues2 = { tres: undefined };
+        const [tokens2] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues2);
+        expect(tokens2).toBe(themeTokens);
+    });
+    test('patching tokens cache independent of order', () => {
+        const cache = (0, framework_base_1.getMemoCache)();
+        const patch1 = { uno: 'one', cinco: false };
+        const patch2 = { cinco: false, uno: 'one' };
+        const [tokens1] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patch1);
+        const [tokens2] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patch2);
+        expect(tokens1).toBe(tokens2);
+    });
 });
-//# sourceMappingURL=patchTokens.test.js.map
+//# sourceMappingURL=patchTokens.test.js.map

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

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