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

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

@@ -1,222 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const renderer = __importStar(require("react-test-renderer"));
-const buildProps_1 = require("./buildProps");
-const buildUseStyling_1 = require("./buildUseStyling");
-/**
- * The default/base theme just contains base values
- */
-const baseTheme = {
-    globals: {
-        backgroundColor: 'white',
-        color: 'black',
-        borderColor: 'blue',
-        fontFamily: 'Arial',
-        fontSize: 12,
-    },
-    components: {},
-};
-const current = { theme: baseTheme };
-/**
- * Because the buildUseStyling utility is not opinionated about theming, the theming is injected via
- * a theme helper implementation. This allows for a framework to build an opinionated version with
- * whatever system they desire
- */
-const themeHelper = {
-    useTheme: () => current.theme,
-    getComponentInfo: (theme, name) => theme.components[name],
-    setActive: (theme) => {
-        current.theme = theme ? { ...baseTheme, ...theme } : baseTheme;
-    },
-};
-describe('useStyling samples', () => {
-    /**
-     * Sample #1 - Themeable text element
-     *
-     * This adds some default opinions for how a text element should be styled but only allows for customization
-     * via theming
-     */
-    // now create the styling hook, first the options so they can be reused later
-    const sample1StylingOptions = {
-        /**
-         * tell the styling hook how to build up the tokens
-         */
-        tokens: [
-            /** first the default values should come from the global theme section */
-            (t) => ({
-                color: t.globals.color,
-                fontFamily: t.globals.fontFamily,
-                fontSize: t.globals.fontSize,
-            }),
-            /** next we should look for a component reference to overlay */
-            'Sample1',
-        ],
-        /**
-         * 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)(
-            /**
-             * 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']),
-        },
-    };
-    // 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,
-                },
-            },
-        });
-        let component;
-        (0, react_1.act)(() => {
-            component = renderer.create(jsx_runtime_1.jsx(Sample1Text, { children: "Sample1b" }));
-        });
-        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" })
-                ] }));
-        });
-        expect(component.toJSON()).toMatchSnapshot();
-    });
-    /** now re-theme the component via the components in the theme */
-    it('Sample2Text rendering with some custom settings in the theme', () => {
-        themeHelper.setActive({
-            components: {
-                Sample1: {
-                    color: 'pink',
-                    fontSize: 24,
-                },
-                Sample2: {
-                    fontSize: 18,
-                    fontFamily: 'Helvetica',
-                },
-            },
-        });
-        let component;
-        (0, react_1.act)(() => {
-            component = renderer.create(jsx_runtime_1.jsxs(react_native_1.View, { children: [
-                    jsx_runtime_1.jsx(Sample2Text, { children: "Sample2 with theme overrides set" }), jsx_runtime_1.jsx(Sample2Text, { color: "purple", children: "Sample2 with theme and color prop override" })
-                ] }));
-        });
-        expect(component.toJSON()).toMatchSnapshot();
-    });
-});
-//# sourceMappingURL=useStyling.samples.test.js.map

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

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