@fluentui-react-native/use-tokens 0.1.6

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

@@ -0,0 +1,177 @@
+"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);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_native_1 = require("react-native");
+var enzyme_to_json_1 = __importDefault(require("enzyme-to-json"));
+var React = __importStar(require("react"));
+var enzyme_1 = require("enzyme");
+var buildUseTokens_1 = require("./buildUseTokens");
+var merge_props_1 = require("@fluentui-react-native/merge-props");
+var immutable_merge_1 = require("@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 && immutable_merge_1.immutableMerge(baseTheme, theme)) || baseTheme;
+};
+/**
+ * this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
+ */
+function snapshotTestTree(tree) {
+    expect(enzyme_to_json_1.default(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_1.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 = merge_props_1.mergeStyles(styleFromTokens, style);
+        // now just render the element, forwarding the props, setting the merged style, then passing the children as appropriate
+        return (React.createElement(react_native_1.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 = enzyme_1.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 = enzyme_1.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(react_native_1.Text, __assign({}, rest, { style: merge_props_1.mergeStyles(styleFromTokens, style) }), children));
+    };
+    /** rendering the Sample2 component with the base theme */
+    it('Sample2Text rendering with defaults and a color override', function () {
+        var tree = enzyme_1.mount(React.createElement(react_native_1.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 = enzyme_1.mount(React.createElement(react_native_1.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-commonjs/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/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@fluentui-react-native/use-tokens",
+  "version": "0.1.6",
+  "description": "Utilities and hook function for getting themed tokens for a component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native"
+  },
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "bundle": "fluentui-scripts bundle",
+    "clean": "fluentui-scripts clean",
+    "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
+    "just": "fluentui-scripts",
+    "lint": "fluentui-scripts eslint",
+    "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"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui-react-native/immutable-merge": "^1.1.3",
+    "@fluentui-react-native/memo-cache": "^1.1.4"
+  },
+  "devDependencies": {
+    "@fluentui-react-native/merge-props": "^0.3.4",
+    "@types/jest": "^26.0.0",
+    "@uifabricshared/build-native": "^0.1.1",
+    "react": "16.13.1",
+    "react-native": "^0.63.4"
+  }
+}

package/src/__snapshots__/useTokens.samples.test.tsx.snap

@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useTokens samples Sample1Text rendering with no overrides 1`] = `
+<SampleText1>
+  <Text
+    style={
+      Object {
+        "color": "black",
+        "fontFamily": "Arial",
+        "fontSize": 12,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "black",
+          "fontFamily": "Arial",
+          "fontSize": 12,
+        }
+      }
+    >
+      Sample1a
+    </Text>
+  </Text>
+</SampleText1>
+`;
+
+exports[`useTokens samples Sample1Text rendering with some custom settings in the theme 1`] = `
+<SampleText1>
+  <Text
+    style={
+      Object {
+        "color": "pink",
+        "fontFamily": "Arial",
+        "fontSize": 24,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "pink",
+          "fontFamily": "Arial",
+          "fontSize": 24,
+        }
+      }
+    >
+      Sample1b
+    </Text>
+  </Text>
+</SampleText1>
+`;
+
+exports[`useTokens samples Sample2Text rendering with defaults and a color override 1`] = `
+<View>
+  <View>
+    <SampleText2>
+      <Text
+        style={
+          Object {
+            "color": "black",
+            "fontFamily": "Arial",
+            "fontSize": 12,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "black",
+              "fontFamily": "Arial",
+              "fontSize": 12,
+            }
+          }
+        >
+          Sample2 with defaults
+        </Text>
+      </Text>
+    </SampleText2>
+    <SampleText2
+      color="green"
+    >
+      <Text
+        style={
+          Object {
+            "color": "green",
+            "fontFamily": "Arial",
+            "fontSize": 12,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "green",
+              "fontFamily": "Arial",
+              "fontSize": 12,
+            }
+          }
+        >
+          Sample2 with color override via prop
+        </Text>
+      </Text>
+    </SampleText2>
+  </View>
+</View>
+`;
+
+exports[`useTokens samples Sample2Text rendering with some custom settings in the theme 1`] = `
+<View>
+  <View>
+    <SampleText2>
+      <Text
+        style={
+          Object {
+            "color": "black",
+            "fontFamily": "Helvetica",
+            "fontSize": 18,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "black",
+              "fontFamily": "Helvetica",
+              "fontSize": 18,
+            }
+          }
+        >
+          Sample2 with theme overrides set
+        </Text>
+      </Text>
+    </SampleText2>
+    <SampleText2
+      color="purple"
+    >
+      <Text
+        style={
+          Object {
+            "color": "purple",
+            "fontFamily": "Helvetica",
+            "fontSize": 18,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "purple",
+              "fontFamily": "Helvetica",
+              "fontSize": 18,
+            }
+          }
+        >
+          Sample2 with theme and color prop override
+        </Text>
+      </Text>
+    </SampleText2>
+  </View>
+</View>
+`;

package/src/applyPropsToTokens.test.ts

@@ -0,0 +1,47 @@
+import { applyPropsToTokens } from './applyPropsToTokens';
+import { getMemoCache } from '@fluentui-react-native/memo-cache';
+
+interface Tokens {
+  uno?: string;
+  dos?: string;
+  tres?: number;
+  quatro?: string | number;
+  cinco?: boolean;
+}
+
+type TokenProps = Pick<Tokens, 'dos' | 'quatro' | 'cinco'>;
+const tokenProps: (keyof TokenProps)[] = ['dos', 'quatro', 'cinco'];
+
+interface Props extends TokenProps {
+  foo?: string;
+  bar?: string;
+}
+
+const themeTokens: Tokens = {
+  uno: 'uno',
+  dos: 'dos',
+  tres: 3,
+  quatro: 4,
+  cinco: true,
+};
+
+const props1: Props = { dos: 'two', quatro: 'four', cinco: false, foo: 'foo', bar: 'bar' };
+// const props2: Props = { dos: 'two' };
+// const props3: Props = { foo: 'foo', bar: 'bar' };
+
+describe('applyPropsToTokens tests', () => {
+  test('props get copied', () => {
+    const cache = getMemoCache();
+    const [tokens] = applyPropsToTokens(props1, themeTokens, cache, tokenProps);
+    expect(tokens).not.toBe(themeTokens);
+    for (const key of tokenProps) {
+      expect(tokens[key]).toEqual(props1[key]);
+    }
+  });
+
+  test('no copied props does not change tokens', () => {
+    const cache = getMemoCache();
+    const [tokens] = applyPropsToTokens({}, themeTokens, cache, tokenProps);
+    expect(tokens).toBe(themeTokens);
+  });
+});

package/src/applyPropsToTokens.ts

@@ -0,0 +1,15 @@
+import { GetMemoValue } from '@fluentui-react-native/memo-cache';
+
+export function applyPropsToTokens<TProps, TTokens>(
+  props: TProps,
+  tokens: TTokens,
+  cache: GetMemoValue<TTokens>,
+  keys: (keyof TTokens)[],
+): [TTokens, GetMemoValue<TTokens>] {
+  for (const key of keys) {
+    const sourceValue = props[key as string];
+    const setValue = sourceValue === tokens[key] ? undefined : sourceValue;
+    [tokens, cache] = cache(() => (setValue === undefined ? tokens : { ...tokens, [key]: setValue }), [setValue]);
+  }
+  return [tokens, cache];
+}

package/src/applyTokenLayers.test.ts

@@ -0,0 +1,67 @@
+import { applyTokenLayers } from './applyTokenLayers';
+import { getMemoCache } from '@fluentui-react-native/memo-cache';
+
+type Tokens = {
+  a?: string;
+  b?: string;
+  c?: string;
+  hover?: Tokens;
+  press?: Tokens;
+  disabled?: Tokens;
+};
+
+const stateOrder = ['hover', 'press', 'disabled'];
+
+const tokens1: Tokens = {
+  a: 'a',
+  b: 'b',
+  c: 'c',
+  hover: {
+    a: 'a-hover',
+    b: 'b-hover',
+    press: {
+      a: 'a-hover-press',
+    },
+  },
+  press: {
+    a: 'a-press',
+    b: 'b-press',
+  },
+  disabled: {
+    a: 'disabled',
+    b: 'disabled',
+    c: 'disabled',
+  },
+};
+
+function stripLayers(tokens: Tokens): Tokens {
+  const t = { ...tokens };
+  delete t.hover;
+  delete t.press;
+  delete t.disabled;
+  return t;
+}
+
+describe('applyLayers tests', () => {
+  test('no layers returns tokens', () => {
+    const cache = getMemoCache();
+    const tokens = applyTokenLayers(tokens1, stateOrder, cache, () => false)[0];
+    expect(tokens).toBe(tokens1);
+  });
+
+  test('apply hover works', () => {
+    const cache = getMemoCache();
+    const lookup = (layer) => layer === 'hover';
+    const result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
+    expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+    expect(stripLayers(result1)).toEqual({ a: 'a-hover', b: 'b-hover', c: 'c' });
+  });
+
+  test('apply hover and press layer correctly', () => {
+    const cache = getMemoCache();
+    const lookup = (layer) => layer === 'hover' || layer === 'press';
+    const result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
+    expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+    expect(stripLayers(result1)).toEqual({ a: 'a-hover-press', b: 'b-press', c: 'c' });
+  });
+});

package/src/applyTokenLayers.ts

@@ -0,0 +1,40 @@
+import { GetMemoValue } from '@fluentui-react-native/memo-cache';
+import { immutableMerge } from '@fluentui-react-native/immutable-merge';
+
+/**
+ * alternatively look them up with a passed in function
+ */
+export type HasLayer = (name: string) => boolean;
+
+/**
+ * Apply token layers, building them up applied layer by applied layer, using the cache to store intermediate
+ * values
+ *
+ * @param tokens - input tokens which may have layers to apply
+ * @param states - array of states to check for, ordered by precedence
+ * @param subCache - cache scoped to the root object with no layers applied
+ * @param hasLayer - a function which returns whether a given layer should be applied
+ */
+export function applyTokenLayers<TTokens>(
+  tokens: TTokens,
+  states: string[],
+  subCache: GetMemoValue<TTokens>,
+  hasLayer: HasLayer,
+): [TTokens, GetMemoValue<TTokens>] {
+  type TokensAndCache = { tokens: TTokens; subCache: GetMemoValue<TTokens> };
+  let final: TokensAndCache = { tokens, subCache };
+  if (states && states.length > 0) {
+    // now walk the overrides that are set, merging in props, caching results, and getting a new sub cache
+    final = states
+      .filter((val) => hasLayer(val))
+      .reduce((previous: TokensAndCache, layerName: string) => {
+        const layer = previous.tokens[layerName];
+        const [tokens, subCache] = previous.subCache(
+          () => (layer && typeof layer === 'object' ? immutableMerge(previous.tokens, layer) : previous.tokens),
+          [layer],
+        );
+        return { tokens, subCache };
+      }, final);
+  }
+  return [final.tokens, final.subCache];
+}

package/src/buildUseTokens.test.ts

@@ -0,0 +1,113 @@
+import { buildUseTokens } from './buildUseTokens';
+
+interface Tokens {
+  a?: string;
+  b?: string;
+  c?: string;
+  hover?: Tokens;
+  press?: Tokens;
+}
+
+const baseTokens: Tokens = {
+  a: 'a-base',
+  b: 'b-base',
+  c: 'c-base',
+  hover: {
+    c: 'c-base-hover',
+  },
+  press: {
+    c: 'c-base-press',
+  },
+};
+
+interface Theme {
+  vals: {
+    foo?: string;
+    bar?: string;
+  };
+  components: {
+    [key: string]: Tokens;
+  };
+}
+
+const defaultTheme: Theme = {
+  vals: {
+    foo: 'foo',
+    bar: 'bar',
+  },
+  components: {
+    uno: {
+      a: 'uno-a',
+      c: 'uno-c',
+    },
+    dos: {
+      b: 'dos-b',
+      c: 'dos-c',
+    },
+  },
+};
+
+const variantTheme: Theme = {
+  vals: {
+    foo: 'variant',
+  },
+  components: {},
+};
+
+const getComponentInfo = (theme: Theme, name: string) => theme.components[name];
+
+const componentTokens = [baseTokens, 'uno', (theme: Theme) => ({ b: theme.vals.foo })];
+
+const resolvedTokens: Tokens = {
+  a: 'uno-a',
+  b: 'foo',
+  c: 'uno-c',
+  hover: {
+    c: 'c-base-hover',
+  },
+  press: {
+    c: 'c-base-press',
+  },
+};
+
+const variantTokens: Tokens = {
+  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 = buildUseTokens(getComponentInfo, ...componentTokens);
+    const [tokens] = useTokens(defaultTheme);
+    expect(tokens).toEqual(resolvedTokens);
+  });
+
+  test('multiple calls return same object', () => {
+    const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
+    const [tokens1] = useTokens(defaultTheme);
+    const [tokens2] = useTokens(defaultTheme);
+    expect(tokens1).toBe(tokens2);
+  });
+
+  test('variant theme is separate', () => {
+    const useTokens = 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 = buildUseTokens(getComponentInfo, ...componentTokens);
+    const useTokensCustom = useTokens.customize({ a: 'custom' });
+    const [tokens] = useTokensCustom(defaultTheme);
+    expect(tokens).toEqual({ ...resolvedTokens, a: 'custom' });
+  });
+});