quicksnack 1.24.2 → 2.0.0

package/dist/components/Menu/HamburgerButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HamburgerButton: import("styled-components").StyledComponent<import("react").FC<import("../../form/Button/Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/Menu/HamburgerButton.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HamburgerButton = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Button_1 = require("../../form/Button/Button");
+var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+exports.HamburgerButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";    \n  ", " \n"], ["\n  margin-right: ", ";    \n  ", " \n"])), function (props) { return props.theme.spacing(3); }, (0, responsiveProps_1.mq)("laptop", "display: none;"));
+var templateObject_1;

package/dist/components/Menu/MenuCloseButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MenuCloseButton: import("styled-components").StyledComponent<import("react").FC<import("../../form/Button/Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/Menu/MenuCloseButton.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuCloseButton = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Button_1 = require("../../form/Button/Button");
+var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+exports.MenuCloseButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["      \n  ", " \n"], ["      \n  ", " \n"])), (0, responsiveProps_1.mq)("laptop", "display: none;"));
+var templateObject_1;

package/dist/components/Menu/SideBar.d.ts

@@ -0,0 +1,6 @@
+declare type SideBarProps = {
+    width?: number;
+    isOpen?: boolean;
+};
+export declare const SideBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & SideBarProps, never>;
+export {};

package/dist/components/Menu/SideBar.js

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideBar = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var Box_1 = require("../Box/Box");
+var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+exports.SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n  height: auto;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";   \n     \n  ", "  \n"], ["  \n  height: auto;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n     \n  display: ", ";   \n     \n  ", "  \n"])), function (props) { return props.isOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: static;    \n    display: block;\n    width: ", ";  \n  "], ["\n    position: static;    \n    display: block;\n    width: ", ";  \n  "])), function (props) { return props.theme.spacing(props.width || 50); })));
+var templateObject_1, templateObject_2;

package/dist/components/Menu/SideBarHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    right?: string | JSX.Element;
+}
+export declare const SideBarHeader: React.FC<Props>;
+export {};

package/dist/components/Menu/SideBarHeader.js

@@ -0,0 +1,44 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideBarHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var Box_1 = require("../Box/Box");
+var constants_1 = require("../../layouts/constants");
+var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  // flex-direction: column;\n  // justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"], ["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  // flex-direction: column;\n  // justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"])), function (props) { return props.theme.palette.button.text.idle.text; }, function (props) { return props.theme.spacing(5); }, function (props) { return props.theme.palette.common.white; }, (0, responsiveProps_1.mq)('laptop', (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      min-height: ", ";\n  "], ["\n      min-height: ", ";\n  "])), function (props) { return props.theme.spacing(12); })));
+var SideBarHeader = function (_a) {
+    var children = _a.children, right = _a.right;
+    return (react_1.default.createElement(StyledBox, { mb: constants_1.VerticalRhythm },
+        react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex" },
+            react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex", flexDirection: "column", justifyContent: "center" }, children)),
+        right && react_1.default.createElement(Box_1.Box, null, right)));
+};
+exports.SideBarHeader = SideBarHeader;
+var templateObject_1, templateObject_2;

package/dist/components/Menu/useToggleMobileMenu.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    currentRoute: string;
+}
+export declare const useToggleMobileMenu: ({ currentRoute }: Props) => {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export {};

package/dist/components/Menu/useToggleMobileMenu.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleMobileMenu = void 0;
+var react_1 = __importDefault(require("react"));
+var useToggleMobileMenu = function (_a) {
+    var currentRoute = _a.currentRoute;
+    var _b = react_1.default.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var toggle = react_1.default.useCallback(function () {
+        setIsOpen(function (val) { return !val; });
+    }, []);
+    var open = react_1.default.useCallback(function () {
+        setIsOpen(true);
+    }, []);
+    var close = react_1.default.useCallback(function () {
+        setIsOpen(false);
+    }, []);
+    react_1.default.useEffect(function () {
+        close();
+    }, [currentRoute, close]);
+    return {
+        isOpen: isOpen,
+        open: open,
+        close: close,
+        toggle: toggle
+    };
+};
+exports.useToggleMobileMenu = useToggleMobileMenu;

package/dist/form/Button/Button.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
 import { theme } from "../../theme";
 declare type Variant = keyof typeof theme.palette.button;
-interface Props extends React.ButtonHTMLAttributes<any> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
     icon?: JSX.Element;
     variant?: Variant;
     hasChildren?: boolean;
 }
-export declare const Button: React.FC<Props>;
+export declare const Button: React.FC<ButtonProps>;
 export {};

package/dist/index.d.ts

@@ -11,8 +11,11 @@ export * from './components/Details/Details';
 export * from './components/Dropdown/Dropdown';
 export * from './components/Dropzone/Dropzone';
 export * from './components/Footer/Footer';
+export * from './components/Menu/HamburgerButton';
 export * from './components/Menu/Menu';
-export * from './components/Menu/UserBox';
+export * from './components/Menu/MenuCloseButton';
+export * from './components/Menu/useToggleMobileMenu';
+export * from './components/Menu/SideBarHeader';
 export * from './components/Modal/Modal';
 export * from './components/Overlay/Overlay';
 export * from './components/Paginator/Paginator';

package/dist/index.js

@@ -23,8 +23,11 @@ __exportStar(require("./components/Details/Details"), exports);
 __exportStar(require("./components/Dropdown/Dropdown"), exports);
 __exportStar(require("./components/Dropzone/Dropzone"), exports);
 __exportStar(require("./components/Footer/Footer"), exports);
+__exportStar(require("./components/Menu/HamburgerButton"), exports);
 __exportStar(require("./components/Menu/Menu"), exports);
-__exportStar(require("./components/Menu/UserBox"), exports);
+__exportStar(require("./components/Menu/MenuCloseButton"), exports);
+__exportStar(require("./components/Menu/useToggleMobileMenu"), exports);
+__exportStar(require("./components/Menu/SideBarHeader"), exports);
 __exportStar(require("./components/Modal/Modal"), exports);
 __exportStar(require("./components/Overlay/Overlay"), exports);
 __exportStar(require("./components/Paginator/Paginator"), exports);

package/dist/layouts/BasicLayout/BasicLayout.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { TopBar } from "../../components/TopBar/TopBar";
 import { Footer } from "../../components/Footer/Footer";
+import { SideBar } from "../../components/Menu/SideBar";
 interface Props {
-    sideBarProps?: string | JSX.Element;
-    sideBarWidth?: number;
+    sideBarProps?: React.ComponentProps<typeof SideBar>;
     topBarProps?: React.ComponentProps<typeof TopBar>;
     footerProps?: React.ComponentProps<typeof Footer>;
     isLoading?: boolean;

package/dist/layouts/BasicLayout/BasicLayout.js

@@ -25,13 +25,16 @@ var TopBar_1 = require("../../components/TopBar/TopBar");
 var Box_1 = require("../../components/Box/Box");
 var Footer_1 = require("../../components/Footer/Footer");
 var constants_1 = require("../constants");
+var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps");
+var Button_1 = require("../../form/Button/Button");
+var SideBar_1 = require("../../components/Menu/SideBar");
 var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  background-color: #F3F3F4;\n"], [" \n  background-color: #F3F3F4;\n"])));
-var SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["  \n  height: auto;;\n  width: ", ";  \n  background-color: #243646;  \n"], ["  \n  height: auto;;\n  width: ", ";  \n  background-color: #243646;  \n"])), function (props) { return props.theme.spacing(props.width || 50); });
+var CloseButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n  \n  z-index: 1000;\n  \n  ", " \n"], ["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n  \n  z-index: 1000;\n  \n  ", " \n"])), function (props) { return props.theme.spacing(1.5); }, function (props) { return props.theme.spacing(3); }, (0, responsiveProps_1.mq)("laptop", "\n    display: none;\n  "));
 var BasicLayout = function (_a) {
-    var sideBarProps = _a.sideBarProps, topBarProps = _a.topBarProps, sideBarWidth = _a.sideBarWidth, footerProps = _a.footerProps, isLoading = _a.isLoading, loader = _a.loader, children = _a.children;
+    var sideBarProps = _a.sideBarProps, topBarProps = _a.topBarProps, footerProps = _a.footerProps, isLoading = _a.isLoading, loader = _a.loader, children = _a.children;
     return (react_1.default.createElement(Wrapper, { flexGrow: 1, display: "flex", flexDirection: "column" },
         react_1.default.createElement(Box_1.Box, { flexGrow: 1, flexShrink: 0, display: "flex" },
-            sideBarProps && (react_1.default.createElement(SideBar, { width: sideBarWidth }, sideBarProps)),
+            sideBarProps && (react_1.default.createElement(SideBar_1.SideBar, __assign({}, sideBarProps))),
             react_1.default.createElement(Box_1.Box, { flexGrow: 1, display: "flex", flexDirection: "column" },
                 react_1.default.createElement(TopBar_1.TopBar, __assign({}, topBarProps)),
                 react_1.default.createElement(Box_1.Box, { p: constants_1.VerticalRhythm, flexGrow: 1 }, isLoading && loader

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "1.24.2",
+  "version": "2.0.0",
   "private": false,
   "files": [
     "dist/**"
@@ -54,21 +54,21 @@
     "@semantic-release/git": "10.0.1",
     "@semantic-release/gitlab": "7.0.4",
     "@semantic-release/npm": "8.0.3",
-    "@storybook/addon-actions": "6.4.1",
-    "@storybook/addon-essentials": "6.4.1",
-    "@storybook/addon-links": "6.4.1",
-    "@storybook/node-logger": "6.4.1",
+    "@storybook/addon-actions": "6.4.9",
+    "@storybook/addon-essentials": "6.4.9",
+    "@storybook/addon-links": "6.4.9",
+    "@storybook/node-logger": "6.4.9",
     "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.4.1",
-    "@testing-library/jest-dom": "5.15.1",
+    "@storybook/react": "6.4.9",
+    "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.0.3",
-    "@types/lodash": "4.14.177",
-    "@types/node": "16.11.11",
+    "@types/lodash": "4.14.178",
+    "@types/node": "16.11.13",
     "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
-    "@types/styled-components": "5.1.15",
+    "@types/styled-components": "5.1.18",
     "babel-loader": "8.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -76,6 +76,6 @@
     "react-scripts": "4.0.3",
     "semantic-release": "18.0.1",
     "styled-components": "5.3.3",
-    "typescript": "4.5.2"
+    "typescript": "4.5.4"
   }
 }

package/dist/components/Menu/UserBox.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const UserBox: React.FC;

package/dist/components/Menu/UserBox.js

@@ -1,21 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserBox = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Box_1 = require("../Box/Box");
-var constants_1 = require("../../layouts/constants");
-var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-height: ", "; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);  \n"], ["\n  box-sizing: border-box;\n  min-height: ", "; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);  \n"])), function (props) { return props.theme.spacing(12); }, function (props) { return props.theme.palette.button.text.idle.text; }, function (props) { return props.theme.spacing(5); }, function (props) { return props.theme.palette.common.white; });
-var UserBox = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement(StyledBox, { mb: constants_1.VerticalRhythm }, children));
-};
-exports.UserBox = UserBox;
-var templateObject_1;