@kwiz/fluentui 1.0.0

package/dist/helpers/hooks.js

@@ -0,0 +1,173 @@
+import { isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GetLogger } from "../_modules/config";
+import { KnownClassNames } from "../styles/styles";
+const logger = GetLogger("helpers/hooks");
+/** Empty array ensures that effect is only run on mount */
+export const useEffectOnlyOnMount = [];
+/** set state on steroids. provide promise callback after render, onChange transformer and automatic skip-set when value not changed */
+export function useStateEX(initialValue, options) {
+    options = options || {};
+    const name = options.name || '';
+    let logger = GetLogger(`useStateWithTrack${isNullOrEmptyString(name) ? '' : ` ${name}`}`);
+    logger.setLevel(LoggerLevel.WARN);
+    const [value, setValueInState] = useState(initialValue);
+    const currentValue = useRef(value);
+    /** make this a collection in case several callers are awaiting the same propr update */
+    const resolveState = useRef([]);
+    const isMounted = useRef(false);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, useEffectOnlyOnMount);
+    function resolvePromises() {
+        if (isNotEmptyArray(resolveState.current)) {
+            let resolvers = resolveState.current.slice();
+            resolveState.current = []; //clear
+            resolvers.map(r => r(currentValue.current));
+        }
+    }
+    ;
+    useEffect(() => {
+        resolvePromises();
+        if (isNotEmptyArray(resolveState.current)) {
+            logger.log(`resolved after render`);
+            let resolvers = resolveState.current.slice();
+            resolveState.current = []; //clear
+            resolvers.map(r => r(value));
+        }
+    }, [value, resolveState.current]);
+    let setValueWithCheck = !options.skipUpdateIfSame ? setValueInState : (newValue) => {
+        logger.groupSync('conditional value change', log => {
+            if (logger.getLevel() === LoggerLevel.VERBOSE) {
+                log('old: ' + jsonStringify(currentValue.current));
+                log('new: ' + jsonStringify(newValue));
+            }
+            if (!objectsEqual(newValue, currentValue.current)) {
+                log(`value changed`);
+                setValueInState(newValue);
+            }
+            else {
+                log(`value unchanged`);
+                resolvePromises();
+            }
+        });
+    };
+    let setValueWithEvents = wrapFunction(setValueWithCheck, {
+        before: newValue => isFunction(options.onChange) ? options.onChange(newValue) : newValue,
+        after: newValue => currentValue.current = newValue
+    });
+    const setValue = useCallback((newState) => new Promise(resolve => {
+        if (!isMounted.current) {
+            //unmounted may never resolve
+            logger.log(`resolved without wait`);
+            resolve(newState);
+        }
+        else {
+            resolveState.current.push(resolve);
+            setValueWithEvents(newState);
+        }
+    }), []);
+    return [value, setValue, currentValue];
+}
+export function useTrackFocus(props) {
+    const wrapperDiv = useRef(null);
+    useEffect(() => {
+        function focusIn(e) {
+            let elm = e.target; //document.activeElement;
+            if (wrapperDiv.current) {
+                while (elm && elm !== wrapperDiv.current) {
+                    elm = elm.parentElement;
+                }
+            }
+            else
+                elm = null;
+            if (wrapperDiv.current && elm === wrapperDiv.current)
+                props.onFocus();
+            else
+                props.onLoseFocus();
+        }
+        if (wrapperDiv.current) {
+            if (wrapperDiv.current)
+                wrapperDiv.current.tabIndex = 1;
+            window.addEventListener("focusin", focusIn);
+            // Remove event listener on cleanup
+            return () => window.removeEventListener("focusin", focusIn);
+        }
+    }, [wrapperDiv.current]);
+    return wrapperDiv;
+}
+export function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = useState({
+        width: undefined,
+        height: undefined
+    });
+    useEffect(() => {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, useEffectOnlyOnMount);
+    return windowSize;
+}
+export function useIsInPrint() {
+    // Initialize state with false
+    const [printMode, setPrintMode] = useState(false);
+    useEffect(() => {
+        function forcePrint(e) {
+            if (e.ctrlKey && e.shiftKey && e.altKey) {
+                if (e.key.toLocaleLowerCase() === "q") {
+                    document.body.classList.remove(KnownClassNames.print);
+                    handlePrint(e, false);
+                }
+                else {
+                    console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
+                    document.body.classList.add(KnownClassNames.print);
+                    handlePrint(e, true);
+                }
+            }
+        }
+        // Handler to call on printing
+        function handlePrint(e, force) {
+            if (force === true)
+                setPrintMode(true);
+            else if (window.matchMedia) {
+                var mediaQueryList = window.matchMedia('print');
+                if (mediaQueryList.matches) {
+                    setPrintMode(true);
+                }
+                else {
+                    setPrintMode(false);
+                }
+            }
+        }
+        // Add event listener
+        window.addEventListener("print", handlePrint);
+        if (isDebug())
+            window.addEventListener("keydown", forcePrint);
+        // Call handler right away so state gets updated with initial printing state
+        handlePrint();
+        // Remove event listener on cleanup
+        return () => {
+            window.removeEventListener("print", handlePrint);
+            if (isDebug())
+                window.removeEventListener("keydown", forcePrint);
+        };
+    }, useEffectOnlyOnMount);
+    return printMode;
+}
+//# sourceMappingURL=hooks.js.map

package/dist/helpers/hooks.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export * from './controls/button';
+export * from './controls/centered';
+export * from './controls/dropdown';
+export * from './controls/error-boundary';
+export * from './controls/field-editor';
+export * from './controls/file-upload';
+export * from './controls/horizontal';
+export * from './controls/input';
+export * from './controls/list';
+export * from './controls/loading';
+export * from './controls/please-wait';
+export * from './controls/prompt';
+export * from './controls/search';
+export * from './controls/section';
+export * from './controls/svg';
+export * from './controls/vertical';
+export * from './controls/vertical-content';
+export * from './helpers/hooks';
+export { KnownClassNames } from './styles/styles';

package/dist/index.js

@@ -0,0 +1,20 @@
+export * from './controls/button';
+export * from './controls/centered';
+export * from './controls/dropdown';
+export * from './controls/error-boundary';
+export * from './controls/field-editor';
+export * from './controls/file-upload';
+export * from './controls/horizontal';
+export * from './controls/input';
+export * from './controls/list';
+export * from './controls/loading';
+export * from './controls/please-wait';
+export * from './controls/prompt';
+export * from './controls/search';
+export * from './controls/section';
+export * from './controls/svg';
+export * from './controls/vertical';
+export * from './controls/vertical-content';
+export * from './helpers/hooks';
+export { KnownClassNames } from './styles/styles';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/styles/exports-index.d.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './theme';

package/dist/styles/exports-index.js

@@ -0,0 +1,3 @@
+export * from './styles';
+export * from './theme';
+//# sourceMappingURL=exports-index.js.map

package/dist/styles/exports-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exports-index.js","sourceRoot":"","sources":["../../src/styles/exports-index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/styles/styles.d.ts

@@ -0,0 +1,19 @@
+import { GriffelStyle } from "@fluentui/react-components";
+export declare namespace mixins {
+    const main: GriffelStyle;
+    const clickable: GriffelStyle;
+    const float: GriffelStyle;
+    const flex: GriffelStyle;
+    const wrap: GriffelStyle;
+    const nogap: GriffelStyle;
+    const ellipsis: GriffelStyle;
+}
+export declare const KnownClassNames: {
+    print: string;
+    section: string;
+    vertical: string;
+    horizontal: string;
+    list: string;
+};
+export declare const useCommonStyles: () => Record<"printShow" | "printHide", string>;
+export declare const widthMedium = 360;

package/dist/styles/styles.js

@@ -0,0 +1,79 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+export var mixins;
+(function (mixins) {
+    mixins.main = {
+        flexShrink: 1,
+        flexGrow: 1
+    };
+    mixins.clickable = {
+        cursor: "pointer",
+        ['& label']: {
+            cursor: "pointer"
+        }
+    };
+    const box = {
+        padding: tokens.spacingHorizontalM,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: tokens.shadow4,
+        margin: tokens.spacingHorizontalXXS
+    };
+    mixins.float = Object.assign(Object.assign({}, box), { 
+        /** make buttons work */
+        position: "relative", 
+        /** make buttons work */
+        maxWidth: "33%", 
+        /** stop bleeding into page */
+        overflowX: "hidden", ['& img']: {
+            maxWidth: "100%"
+        } });
+    mixins.flex = {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        rowGap: tokens.spacingVerticalM,
+        columnGap: tokens.spacingVerticalM,
+    };
+    mixins.wrap = {
+        flexWrap: "wrap"
+    };
+    mixins.nogap = {
+        rowGap: 0,
+        columnGap: 0
+    };
+    mixins.ellipsis = {
+        whiteSpace: 'nowrap',
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    };
+    // export const box: GriffelStyle = {
+    // }
+})(mixins || (mixins = {}));
+export const KnownClassNames = {
+    print: 'print-root',
+    section: 'kfui-section',
+    vertical: 'kfui-vertical',
+    horizontal: 'kfui-horizontal',
+    list: 'kfui-list'
+};
+export const useCommonStyles = makeStyles({
+    printShow: {
+        display: 'none',
+        [`:global(body.${KnownClassNames.print})`]: {
+            display: 'unset',
+        },
+        '@media print': {
+            display: 'unset',
+        }
+    },
+    printHide: {
+        [`:global(body.${KnownClassNames.print})`]: {
+            display: 'none !important'
+        },
+        '@media print': {
+            display: 'none !important'
+        }
+    },
+});
+export const widthMedium = 360;
+//export const widthWide = 520;
+//# sourceMappingURL=styles.js.map

package/dist/styles/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,KAAQ,MAAM,CAsDnB;AAtDD,WAAc,MAAM;IACH,WAAI,GAAiB;QAC9B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACd,CAAC;IACW,gBAAS,GAAiB;QACnC,MAAM,EAAE,SAAS;QACjB,CAAC,SAAS,CAAC,EAAE;YACT,MAAM,EAAE,SAAS;SACpB;KACJ,CAAA;IACD,MAAM,GAAG,GAAiB;QACtB,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,YAAY,EAAE,MAAM,CAAC,kBAAkB;QACvC,SAAS,EAAE,MAAM,CAAC,OAAO;QACzB,MAAM,EAAE,MAAM,CAAC,oBAAoB;KACtC,CAAA;IACY,YAAK,mCACX,GAAG;QACN,wBAAwB;QACxB,QAAQ,EAAE,UAAU;QACpB,wBAAwB;QACxB,QAAQ,EAAE,KAAK;QACf,8BAA8B;QAC9B,SAAS,EAAE,QAAQ,EAEnB,CAAC,OAAO,CAAC,EAAE;YACP,QAAQ,EAAE,MAAM;SACnB,GACJ,CAAA;IAEY,WAAI,GAAiB;QAC9B,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,SAAS,EAAE,MAAM,CAAC,gBAAgB;KACrC,CAAA;IAEY,WAAI,GAAiB;QAC9B,QAAQ,EAAE,MAAM;KACnB,CAAA;IACY,YAAK,GAAiB;QAC/B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACf,CAAA;IACY,eAAQ,GAAiB;QAClC,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B,CAAA;IAED,qCAAqC;IACrC,IAAI;AACR,CAAC,EAtDa,MAAM,KAAN,MAAM,QAsDnB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,iBAAiB;IAC7B,IAAI,EAAE,WAAW;CACpB,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC;IACtC,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,OAAO;SACnB;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,OAAO;SACnB;KACJ;IACD,SAAS,EAAE;QACP,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,iBAAiB;SAC7B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,iBAAiB;SAC7B;KACJ;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAC/B,+BAA+B"}

package/dist/styles/theme.d.ts

@@ -0,0 +1,6 @@
+import { BrandVariants, Theme } from "@fluentui/react-components";
+export interface iThemeContext {
+    teams?: boolean;
+    dark?: boolean;
+}
+export declare function getTheme(ctx: iThemeContext, t?: BrandVariants): Theme;

package/dist/styles/theme.js

@@ -0,0 +1,77 @@
+import { createDarkTheme, createLightTheme, teamsDarkTheme, teamsLightTheme } from "@fluentui/react-components";
+export function getTheme(ctx, t = kThemeDefault) {
+    return ctx.dark
+        ? getDarkTheme(ctx, t)
+        : getLightTheme(ctx, t);
+}
+const kThemeDefault = {
+    10: "#04010A",
+    20: "#16103B",
+    30: "#17176F",
+    40: "#0F1D9A",
+    50: "#2F2AA1",
+    60: "#4338A8",
+    70: "#5546AF",
+    80: "#6555B6",
+    90: "#7563BD",
+    100: "#8472C4",
+    110: "#9282CB",
+    120: "#A191D2",
+    130: "#AFA1D9",
+    140: "#BDB1E0",
+    150: "#CBC1E7",
+    160: "#D9D2EE"
+};
+const kThemeOrange = {
+    10: "#040301",
+    20: "#1E170A",
+    30: "#312610",
+    40: "#403112",
+    50: "#503D14",
+    60: "#604915",
+    70: "#705516",
+    80: "#816216",
+    90: "#926E16",
+    100: "#A37B15",
+    110: "#B58914",
+    120: "#C79612",
+    130: "#DAA40E",
+    140: "#EDB208",
+    150: "#FFC001",
+    160: "#FFD47F"
+};
+const kThemeSecondary = {
+    10: "#020304",
+    20: "#101A1D",
+    30: "#162B32",
+    40: "#1A3742",
+    50: "#1D4552",
+    60: "#1F5363",
+    70: "#216175",
+    80: "#227087",
+    90: "#227F9A",
+    100: "#208EAD",
+    110: "#1E9EC0",
+    120: "#1AADD4",
+    130: "#12BEE8",
+    140: "#02CEFD",
+    150: "#6BDAFF",
+    160: "#A0E5FF"
+};
+function getLightTheme(ctx, t = kThemeDefault) {
+    if (ctx.teams)
+        return teamsLightTheme;
+    //return jsonClone(webLightTheme);
+    const lightTheme = Object.assign({}, createLightTheme(t));
+    return lightTheme;
+}
+function getDarkTheme(ctx, t = kThemeDefault) {
+    if (ctx.teams)
+        return teamsDarkTheme;
+    //return jsonClone(webDarkTheme);
+    const darkTheme = Object.assign({}, createDarkTheme(t));
+    darkTheme.colorBrandForeground1 = t[110];
+    darkTheme.colorBrandForeground2 = t[120];
+    return darkTheme;
+}
+//# sourceMappingURL=theme.js.map

package/dist/styles/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styles/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,eAAe,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAOtI,MAAM,UAAU,QAAQ,CAAC,GAAkB,EAAE,IAAmB,aAAa;IACzE,OAAO,GAAG,CAAC,IAAI;QACX,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC;QACtB,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;AAChC,CAAC;AAGD,MAAM,aAAa,GAAkB;IACjC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,YAAY,GAAkB;IAChC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,eAAe,GAAkB;IACnC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;CACjB,CAAC;AAEF,SAAS,aAAa,CAAC,GAAkB,EAAE,IAAmB,aAAa;IACvE,IAAI,GAAG,CAAC,KAAK;QAAE,OAAO,eAAe,CAAC;IACtC,kCAAkC;IAClC,MAAM,UAAU,qBACT,gBAAgB,CAAC,CAAC,CAAC,CACzB,CAAC;IACF,OAAO,UAAU,CAAC;AACtB,CAAC;AAED,SAAS,YAAY,CAAC,GAAkB,EAAE,IAAmB,aAAa;IACtE,IAAI,GAAG,CAAC,KAAK;QAAE,OAAO,cAAc,CAAC;IACrC,iCAAiC;IACjC,MAAM,SAAS,qBACR,eAAe,CAAC,CAAC,CAAC,CACxB,CAAC;IAEF,SAAS,CAAC,qBAAqB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACzC,SAAS,CAAC,qBAAqB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,SAAS,CAAC;AACrB,CAAC"}

package/package.json

@@ -0,0 +1,71 @@
+{
+    "name": "@kwiz/fluentui",
+    "version": "1.0.00",
+    "description": "KWIZ common controls for FluentUI",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "watch": "tsc -watch",
+        "build": "npm run test && tsc",
+        "build-explain": "tsc --explainFiles",
+        "check-dependencies": "madge --circular ./src",
+        "create-link": "npm link",
+        "test": "node --import tsx --test src",
+        "link-local-kwiz": "npm link @kwiz/common",
+        "__update-kwiz-packages": "npm install @kwiz/common@latest",
+        "npm-v-patch": "npm version patch",
+        "npm-v-major": "npm version major",
+        "npm-publish": "npm publish --access public",
+        "reset-repo": "git fetch origin && git reset --hard origin/main"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/KWizCom/fluentui.git"
+    },
+    "keywords": [
+        "KWIZ",
+        "FluentUI"
+    ],
+    "author": "Shai Petel",
+    "contributors": [
+        "Shai Petel"
+    ],
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/KWizCom/fluentui/issues",
+        "email": "support@kwizcom.com"
+    },
+    "homepage": "https://github.com/KWizCom/fluentui#readme",
+    "private": false,
+    "engines": {
+        "node": ">=16"
+    },
+    "packageManager": "npm@9.5.1",
+    "devDependencies": {
+        "fs-extra": "^11.2.0",
+        "madge": "^6.1.0",
+        "tsx": "^4.7.1",
+        "typescript": "^5.3.3"
+    },
+    "dependencies": {
+        "@kwiz/common": "^1.0.58",
+        "esbuild": "^0.19.12",
+        "get-tsconfig": "^4.7.2",
+        "resolve-pkg-maps": "^1.0.0"
+    },
+    "peerDependencies": {
+        "@fluentui/react-components": ">=9.54.17 <10.0.0",
+        "@types/react": ">=16.14.0 <19.0.0",
+        "@types/react-dom": ">=16.9.0 <19.0.0",
+        "react": ">=16.14.0 <19.0.0",
+        "react-dom": ">=16.14.0 <19.0.0"
+    }
+}

package/src/_modules/config.ts

@@ -0,0 +1,9 @@
+import { config } from "@kwiz/common";
+import { BuildNumber, ReleaseStatus } from "./constants";
+
+export const { logger: GetLogger } = config({
+    BuildNumber: BuildNumber,
+    IsLocalDev: false,
+    ReleaseStatus: ReleaseStatus,
+    ProjectName: "[fluentui]"
+});

package/src/_modules/constants.ts

@@ -0,0 +1,3 @@
+
+export var BuildNumber = 'unset';
+export const ReleaseStatus = "npm";