@mui-treasury/layout - npm Package Compare versions

Comparing version 4.0.0-alpha.4 to 4.0.0-alpha.5

builders/Content/ContentBuilder.d.ts

@@ -1,3 +0,3 @@
-import { IContentBuilder } from "../../types";
+import { IContentBuilder } from '../../types';
 declare const _default: () => IContentBuilder;
 export default _default;

builders/Content/ContentBuilder.js

@@ -12,4 +12,10 @@ "use strict";
         }),
+        debug: () => {
+            if (process.env.NODE_ENV !== 'production') {
+                console.group('Content:', `"${id}"`);
+                console.groupEnd();
+            }
+        },
     };
 };
 //# sourceMappingURL=ContentBuilder.js.map

builders/EdgeSidebar/EdgeSidebarBuilder.d.ts

@@ -1,4 +0,4 @@
-import { EdgeSidebarConfig, IEdgeSidebarBuilder } from '../../types';
+import { EdgeSidebarConfig, IEdgeSidebarBuilder, Dictionary } from '../../types';
 export declare const isUniqueSidebars: (sidebars: Pick<EdgeSidebarConfig, "id">[]) => boolean;
-declare const _default: () => IEdgeSidebarBuilder;
+declare const _default: (initialMapById?: Dictionary<import("../../types").MapBreakpoint<EdgeSidebarConfig>>) => IEdgeSidebarBuilder;
 export default _default;

builders/EdgeSidebar/EdgeSidebarBuilder.js

@@ -21,6 +21,6 @@ "use strict";
 };
-exports.default = () => {
+exports.default = (initialMapById = {}) => {
     const hiddenById = {};
-    const sidebarIds = [];
-    const mapById = {};
+    const sidebarIds = Object.keys(initialMapById);
+    const mapById = Object.assign({}, initialMapById);
     const addConfig = (breakpoint, config) => {
@@ -97,4 +97,13 @@ if (!sidebarIds.includes(config.id)) {
         getSidebarIds: () => sidebarIds,
+        debug() {
+            if (process.env.NODE_ENV !== 'production') {
+                sidebarIds.forEach(id => {
+                    console.group('EdgeSidebar:', `"${id}"`);
+                    console.table(mapById[id]);
+                    console.groupEnd();
+                });
+            }
+        },
     };
 };
 //# sourceMappingURL=EdgeSidebarBuilder.js.map

builders/Footer/FooterBuilder.d.ts

@@ -1,3 +0,3 @@
-import { IFooterBuilder } from "../../types";
+import { IFooterBuilder } from '../../types';
 declare const _default: () => IFooterBuilder;
 export default _default;

builders/Footer/FooterBuilder.js

@@ -12,4 +12,10 @@ "use strict";
         }),
+        debug: () => {
+            if (process.env.NODE_ENV !== 'production') {
+                console.group('Footer:', `"${id}"`);
+                console.groupEnd();
+            }
+        },
     };
 };
 //# sourceMappingURL=FooterBuilder.js.map

builders/Header/HeaderBuilder.d.ts

@@ -1,3 +0,3 @@
-import { IHeaderBuilder } from "../../types";
-declare const _default: () => IHeaderBuilder;
+import { HeaderConfig, IHeaderBuilder } from '../../types';
+declare const _default: (initialMap?: import("../../types").MapBreakpoint<HeaderConfig>) => IHeaderBuilder;
 export default _default;

builders/Header/HeaderBuilder.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = () => {
+const utils_1 = require("../../utils");
+const INITIAL_HEIGHT = {
+    xs: 56,
+    sm: 64,
+};
+exports.default = (initialMap = {}) => {
     let id;
-    const map = {};
+    const map = Object.assign({}, initialMap);
     return {
@@ -11,3 +16,7 @@ create: function (headerId) {
                 registerConfig(breakpoint, config) {
-                    map[breakpoint] = { ...config, id: headerId };
+                    map[breakpoint] = {
+                        initialHeight: utils_1.pickNearestBreakpoint(INITIAL_HEIGHT, breakpoint),
+                        ...config,
+                        id: headerId,
+                    };
                     return this;
@@ -18,6 +27,16 @@ },
         },
+        update: function (updater) {
+            updater(map);
+        },
         getId: () => id,
         getData: () => map,
+        debug: () => {
+            if (process.env.NODE_ENV !== 'production') {
+                console.group('Header:', `"${id}"`);
+                console.table(map);
+                console.groupEnd();
+            }
+        },
     };
 };
 //# sourceMappingURL=HeaderBuilder.js.map

builders/InsetSidebar/InsetSidebarBuilder.d.ts

@@ -13,5 +13,6 @@ import { AbsoluteInsetSidebarConfig, Dictionary, FixedInsetSidebarConfig, InsetSidebarConfig, InsetSidebarData, MapBreakpoint, SidebarProperties, StickyInsetSidebarConfig } from '../../types';
     getData: () => InsetSidebarData;
+    debug: () => void;
 }
 export declare type InsetSidebarConfigMapById = Dictionary<MapBreakpoint<InsetSidebarConfig>>;
-declare const _default: () => IInsetSidebarBuilder;
+declare const _default: (initialMapById?: Dictionary<MapBreakpoint<InsetSidebarConfig>>) => IInsetSidebarBuilder;
 export default _default;

builders/InsetSidebar/InsetSidebarBuilder.js

@@ -5,5 +5,5 @@ "use strict";
 const createBreakpoints_1 = require("@material-ui/core/styles/createBreakpoints");
-exports.default = () => {
+exports.default = (initialMapById = {}) => {
     const hiddenById = {};
-    const mapById = {};
+    const mapById = Object.assign({}, initialMapById);
     const addConfig = (bp, config) => {
@@ -64,4 +64,13 @@ if (!mapById[config.id]) {
         },
+        debug() {
+            if (process.env.NODE_ENV !== 'production') {
+                Object.keys(mapById).forEach(id => {
+                    console.group('InsetSidebar:', `"${id}"`);
+                    console.table(mapById[id]);
+                    console.groupEnd();
+                });
+            }
+        },
     };
 };
 //# sourceMappingURL=InsetSidebarBuilder.js.map

builders/LayoutBuilder.d.ts

@@ -1,3 +0,3 @@
-import { IHeaderBuilder, IEdgeSidebarBuilder, State, IContentBuilder, LayoutData, IFooterBuilder, EdgeSidebarConfigMapById } from '../types';
-import { IInsetSidebarBuilder } from './InsetSidebar/InsetSidebarBuilder';
+import { IHeaderBuilder, IEdgeSidebarBuilder, State, GlobalConfig, LayoutData, EdgeSidebarConfigMapById, HeaderConfigMap } from '../types';
+import { IInsetSidebarBuilder, InsetSidebarConfigMapById } from './InsetSidebar/InsetSidebarBuilder';
 import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
@@ -11,4 +11,2 @@ interface BuilderCallback<T> {
     configureInsetSidebar: (callback: BuilderCallback<Pick<IInsetSidebarBuilder, 'create'>>) => void;
-    configureContent: (callback: BuilderCallback<Pick<IContentBuilder, 'create'>>) => void;
-    configureFooter: (callback: BuilderCallback<Pick<IFooterBuilder, 'create'>>) => void;
     enableAutoCollapse: (sidebarId: string, breakpoint?: Breakpoint) => void;
@@ -20,4 +18,12 @@ getComponentData: () => LayoutData;
     getInitialState: () => State;
+    debug: () => void;
+    getJSON: () => void;
 }
-declare const _default: () => ILayoutBuilder;
+declare type InitialLayout = {
+    global?: GlobalConfig;
+    header?: HeaderConfigMap;
+    edgeSidebar?: EdgeSidebarConfigMapById;
+    insetSidebar?: InsetSidebarConfigMapById;
+};
+declare const _default: (initialLayout?: InitialLayout) => ILayoutBuilder;
 export default _default;

builders/LayoutBuilder.js

@@ -11,11 +11,12 @@ "use strict";
 const InsetSidebar_1 = __importDefault(require("./InsetSidebar"));
-exports.default = () => {
-    const global = {
-        autoCollapse: {},
-    };
-    const header = Header_1.default();
-    const edgeSidebar = EdgeSidebar_1.default();
-    const insetSidebar = InsetSidebar_1.default();
+exports.default = (initialLayout = {}) => {
+    const global = initialLayout.global || { autoCollapse: {} };
+    const header = Header_1.default(initialLayout.header);
+    const edgeSidebar = EdgeSidebar_1.default(initialLayout.edgeSidebar);
+    const insetSidebar = InsetSidebar_1.default(initialLayout.insetSidebar);
     const content = Content_1.default();
     const footer = Footer_1.default();
+    // setup default id
+    content.create('content');
+    footer.create('footer');
     return {
@@ -31,8 +32,2 @@ configureHeader(callback) {
         },
-        configureContent(callback) {
-            callback(content);
-        },
-        configureFooter(callback) {
-            callback(footer);
-        },
         enableAutoCollapse(sidebarId, breakpoint = 'md') {
@@ -53,3 +48,7 @@ global.autoCollapse[sidebarId] = breakpoint;
         JSON.parse(JSON.stringify({
+            header: header.getData(),
             edgeSidebar: edgeSidebar.getData().configMapById,
+            insetSidebar: insetSidebar.getData().configMapById,
+            content: content.getData(),
+            footer: footer.getData(),
         })),
@@ -65,4 +64,20 @@ getInitialState: () => {
         },
+        debug() {
+            if (process.env.NODE_ENV !== 'production') {
+                header.debug();
+                edgeSidebar.debug();
+                insetSidebar.debug();
+                content.debug();
+                footer.debug();
+            }
+        },
+        getJSON() {
+            console.log(JSON.stringify({
+                header: header.getData(),
+                edgeSidebar: edgeSidebar.getData().configMapById,
+                insetSidebar: insetSidebar.getData().configMapById,
+            }, null, 2));
+        },
     };
 };
 //# sourceMappingURL=LayoutBuilder.js.map

components/InsetContainer/InsetContainer.js

@@ -10,3 +10,3 @@ "use strict";
 const FullScreenContext_1 = require("../../core/Context/FullScreenContext");
-const useStyles = styles_1.makeStyles({
+const useContainerStyles = styles_1.makeStyles({
     root: {
@@ -17,3 +17,5 @@ display: "flex",
     },
-    wrapper: {
+});
+const useWrapperStyles = styles_1.makeStyles({
+    root: {
         overflow: "auto",
@@ -25,6 +27,7 @@ flexGrow: 1,
     const isFullScreen = FullScreenContext_1.useFullScreenCtx();
-    const classes = useStyles(props);
+    const classes = useContainerStyles(props);
+    const wrapper = useWrapperStyles();
     return (react_1.default.createElement(Container_1.default, Object.assign({}, props, { classes: classes }),
         leftSidebar,
-        isFullScreen ? (react_1.default.createElement("div", { className: classes.wrapper }, children)) : (children),
+        isFullScreen ? (react_1.default.createElement("div", { className: wrapper.root }, children)) : (children),
         rightSidebar));
@@ -31,0 +34,0 @@ };

package.json

 {
   "name": "@mui-treasury/layout",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "author": "siriwatknp <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "Supercharge your site with instant-layout, 100% compatible with material-ui",

types/Builder.d.ts

@@ -24,2 +24,3 @@ import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
     };
+    debug: () => void;
 }
@@ -31,7 +32,10 @@ export interface IContentBuilder {
     };
+    debug: () => void;
 }
 export interface IHeaderBuilder {
     create: (id: string) => IRegistry<HeaderConfig>;
+    update: (updater: (config: MapBreakpoint<Omit<HeaderConfig, 'id'>>) => void) => void;
     getId: () => string;
     getData: () => HeaderConfigMap;
+    debug: () => void;
 }
@@ -49,2 +53,3 @@ export interface IEdgeSidebarRegistry {
     getData: () => EdgeSidebarData;
+    debug: () => void;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

404562

increased by1.38%

Lines of code

4711

increased by1.71%

Worsened metrics

Number of low supply chain risk alerts

4

increased byInfinity%

No dependency changes