ag-common 0.0.620 → 0.0.622

package/dist/ui/components/Icon/index.js

@@ -52,6 +52,7 @@ exports.IconF = styled_1.default.span `
     width: 100%;
     height: 100%;
     object-fit: contain;
+    aspect-ratio: 1/1;
   }
 
   img {

package/dist/ui/components/Sidebar/index.d.ts

@@ -2,5 +2,10 @@ import React from 'react';
 export interface ISidebar {
     children: React.ReactNode;
     className?: string;
+    /** default:defaultClosed
+     * defaultClosed: always closed by default.
+     * fixedOpen: always open on bigscreen. cant close if bigscreen
+     */
+    mode?: 'defaultClosed' | 'fixedOpen';
 }
-export declare const Sidebar: ({ children, className }: ISidebar) => React.JSX.Element;
+export declare const Sidebar: ({ children, className, mode, }: ISidebar) => React.JSX.Element;

package/dist/ui/components/Sidebar/index.js

@@ -28,60 +28,83 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sidebar = void 0;
+const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = __importStar(require("react"));
+const react_2 = __importStar(require("react"));
 const helpers_1 = require("../../helpers");
 const Hamburger_1 = require("../../icons/Hamburger");
 const common_1 = require("../../styles/common");
 const media_1 = require("../../styles/media");
 const Chevron_1 = require("../Chevron");
+const closedSidebarHover = (0, react_1.css) `
+  padding-left: 0.5rem;
+  width: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  &:hover,
+  &:hover [data-hover='true'] {
+    background-color: #ccc;
+  }
+  &:hover {
+    border-right: solid 1px #999;
+  }
+`;
 const Base = styled_1.default.div `
   position: relative;
   transition: all 200ms;
   border-right: solid 1px #ccc;
-  padding-left: 0.5rem;
   height: 100vh;
 
+  ${common_1.NoTextSelect};
+  &:hover {
+    [data-type='content-block'] {
+      left: 1rem;
+    }
+  }
+
   &[data-open='true'] {
-    width: 80vw;
-    max-width: 30rem;
+    width: fit-content;
+
     @media ${media_1.smallScreen} {
       max-width: unset;
       position: fixed;
       top: 0;
       left: 0;
+      z-index: 1;
     }
   }
   &[data-open='false'] {
-    width: 0.5rem;
-    background-color: rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    &:hover,
-    &:hover [data-hover='true'] {
-      background-color: #ccc;
-    }
-    &:hover {
-      border-right: solid 1px #999;
-    }
+    ${closedSidebarHover};
   }
-  ${common_1.NoTextSelect};
 
-  &:hover {
-    [data-type='content-block'] {
-      left: 1rem;
+  :not([data-open]) {
+    @media ${media_1.smallScreen} {
+      ${closedSidebarHover};
+    }
+    @media ${media_1.bigScreen} {
+      width: fit-content;
     }
   }
 `;
-const ContentBlock = styled_1.default.div `
-  left: -30rem;
+const closedContentBlockOffScreen = (0, react_1.css) `
+  left: -100vw;
   transition: left 200ms;
   height: 100%;
+`;
+const ContentBlock = styled_1.default.div `
+  ${closedContentBlockOffScreen};
   &[data-open='false'] {
     position: absolute;
     top: 0;
     z-index: 1;
-    width: 80vw;
-    max-width: 30rem;
+    width: fit-content;
+  }
+
+  :not([data-open]) {
+    @media ${media_1.smallScreen} {
+      position: absolute;
+      ${closedContentBlockOffScreen};
+    }
   }
 `;
 const Content = styled_1.default.div `
@@ -100,10 +123,24 @@ const HamburgerB = styled_1.default.div `
   position: absolute;
   transition: all 200ms;
   z-index: 2;
+
+  &[data-hide-on-big='true'] {
+    @media ${media_1.bigScreen} {
+      display: none;
+    }
+  }
+
   &[data-open='false'] {
     top: 0.5rem;
     left: 0.25rem;
   }
+
+  :not([data-open]) {
+    @media ${media_1.bigScreen} {
+      top: 0.5rem;
+      right: -0.75rem;
+    }
+  }
   &[data-open='true'] {
     top: 0.5rem;
     right: -0.75rem;
@@ -127,19 +164,22 @@ const ChevronStyled = (0, styled_1.default)(Chevron_1.Chevron) `
     fill: #555;
   }
 `;
-const Sidebar = ({ children, className }) => {
-    const ref = (0, react_1.useRef)(null);
-    const [open, setOpen] = (0, react_1.useState)(false);
+const Sidebar = ({ children, className, mode = 'defaultClosed', }) => {
+    const ref = (0, react_2.useRef)(null);
+    const [open, setOpen] = (0, react_2.useState)(mode === 'defaultClosed' ? false : null);
     (0, helpers_1.useOnClickOutside)({ ref }, () => {
         if (!open || window.innerWidth > media_1.smallScreenPx) {
             return;
         }
         setOpen(false);
     });
-    return (react_1.default.createElement(Base, { "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), "data-hover": true, ref: ref },
-        react_1.default.createElement(HamburgerB, { "data-open": open, onClick: () => setOpen(!open), "data-hover": true }, open ? react_1.default.createElement(ChevronStyled, { point: 'left', width: "100%" }) : react_1.default.createElement(Hamburger_1.Hamburger, null)),
-        react_1.default.createElement(ContentBlock, { "data-type": "content-block", "data-open": open },
-            react_1.default.createElement(Content, { "data-type": "content", "data-open": open, onClick: (e) => {
+    return (react_2.default.createElement(Base, { "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), "data-hover": true, ref: ref },
+        react_2.default.createElement(HamburgerB, { "data-hide-on-big": mode === 'fixedOpen', "data-open": open, onClick: (e) => {
+                e.stopPropagation();
+                setOpen(!open);
+            }, "data-hover": true }, open ? react_2.default.createElement(ChevronStyled, { point: "left", width: "100%" }) : react_2.default.createElement(Hamburger_1.Hamburger, null)),
+        react_2.default.createElement(ContentBlock, { "data-type": "content-block", "data-open": open },
+            react_2.default.createElement(Content, { "data-type": "content", "data-open": open, onClick: (e) => {
                     e.stopPropagation();
                 } }, children))));
 };

package/dist/ui/icons/Cog.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Cog: () => React.JSX.Element;

package/dist/ui/icons/Cog.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cog = void 0;
+const react_1 = __importDefault(require("react"));
+const Cog = () => (react_1.default.createElement("svg", { viewBox: "0 0 16 16" },
+    react_1.default.createElement("path", { d: "M.63 11.08zm.21.41v-.1zm.23.38L1 11.68zM1 11.68l-.11-.19zm-.21-.29c-.06-.1-.11-.21-.16-.31.05.1.1.21.16.31zm.32.54v-.06z" }),
+    react_1.default.createElement("path", { d: "m11.26 12.63 1.83 1.09a7.34 7.34 0 0 0 1-.94 7.48 7.48 0 0 0 1.56-2.86l-1.74-1A5.29 5.29 0 0 0 14 8a5.29 5.29 0 0 0-.08-.9l1.74-1a7.45 7.45 0 0 0-1.33-2.58 7.54 7.54 0 0 0-1.24-1.22l-1.83 1.04a6 6 0 0 0-1.11-.53v-2A8.55 8.55 0 0 0 7.94.53a8.39 8.39 0 0 0-2.26.3v2a7.23 7.23 0 0 0-1.12.54L2.78 2.28A7.46 7.46 0 0 0 .2 6.06l1.72 1a5.29 5.29 0 0 0-.08.9 5.29 5.29 0 0 0 .08.9l-1.73 1a8 8 0 0 0 .43 1.15c.05.1.1.21.16.31v.1l.11.19.12.19v.06a7.69 7.69 0 0 0 1.64 1.78l1.81-1.08a7.23 7.23 0 0 0 1.12.54v2a8.39 8.39 0 0 0 2.26.31 8.56 8.56 0 0 0 2.22-.3v-2a6 6 0 0 0 1.2-.48zm-2.39 1.52a7.57 7.57 0 0 1-.95.06 7.73 7.73 0 0 1-1-.06v-1.69a4.92 4.92 0 0 1-2.53-1.27l-1.54.92a6.22 6.22 0 0 1-1.08-1.61l1.56-.93a4.27 4.27 0 0 1 0-3.17l-1.56-.92a6.11 6.11 0 0 1 1.12-1.62l1.56.93A5 5 0 0 1 7 3.53V1.82a7.73 7.73 0 0 1 1-.06 7.57 7.57 0 0 1 .95.06v1.72a4.9 4.9 0 0 1 2.4 1.26l1.59-.94a6.31 6.31 0 0 1 1.11 1.62l-1.6.94a4.35 4.35 0 0 1 .3 1.58 4.44 4.44 0 0 1-.29 1.55l1.56.93a6.43 6.43 0 0 1-1.11 1.61l-1.58-.93a5 5 0 0 1-2.49 1.28z" }),
+    react_1.default.createElement("path", { d: "M7.92 5.49A2.59 2.59 0 0 0 5.25 8a2.59 2.59 0 0 0 2.67 2.51A2.6 2.6 0 0 0 10.6 8a2.6 2.6 0 0 0-2.68-2.51zM8 9.2A1.35 1.35 0 0 1 6.55 8 1.35 1.35 0 0 1 8 6.7 1.35 1.35 0 0 1 9.39 8 1.35 1.35 0 0 1 8 9.2z" })));
+exports.Cog = Cog;

package/dist/ui/icons/House.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const House: () => React.JSX.Element;

package/dist/ui/icons/House.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.House = void 0;
+const react_1 = __importDefault(require("react"));
+const House = () => (react_1.default.createElement("svg", { fill: "none", viewBox: "5 5 35 35" },
+    react_1.default.createElement("path", { d: "m24.155 8.781.175.164 13.072 12.842L36 23.213l-1.8-1.768L34.201 35a2 2 0 0 1-1.851 1.994l-.149.006h-20a2.001 2.001 0 0 1-1.995-1.851L10.201 35 10.2 21.446l-1.798 1.767L7 21.787 20.058 8.958a3 3 0 0 1 4.097-.177Zm-2.586 1.504-.096.087-9.273 9.109L12.201 35l4.999-.001.001-9.999c0-1.054.816-1.918 1.851-1.995l.149-.005h6c1.054 0 1.918.816 1.995 1.851l.005.149-.001 9.999 5.001.001-.001-15.52-9.299-9.136a1.001 1.001 0 0 0-1.332-.059ZM25.201 25h-6l-.001 9.999h6L25.201 25Z" })));
+exports.House = House;

package/dist/ui/icons/index.d.ts

@@ -3,11 +3,13 @@ import { Checkmark } from './Checkmark';
 import { ChevronRight } from './ChevronRight';
 import { Circle } from './Circle';
 import { CircleDot } from './CircleDot';
+import { Cog } from './Cog';
 import { Computer } from './Computer';
 import { CrossIcon } from './CrossIcon';
 import { Door } from './Door';
 import { Hamburger } from './Hamburger';
 import { HorizontalDots } from './HorizontalDots';
+import { House } from './House';
 import { Magnify } from './Magnify';
 import { Moon } from './Moon';
 import { Pencil } from './Pencil';
@@ -17,6 +19,7 @@ import { Undo } from './Undo';
 import { UserOutline } from './UserOutline';
 import { Warning } from './Warning';
 declare const icons: {
+    Cog: () => import("react").JSX.Element;
     Checkmark: ({ style, }: {
         style?: ({
             fill?: string | undefined;
@@ -45,6 +48,7 @@ declare const icons: {
     Hamburger: ({ className }: {
         className?: string | undefined;
     }) => import("react").JSX.Element;
+    House: () => import("react").JSX.Element;
     HorizontalDots: import("react").JSX.Element;
     Magnify: ({ style, }: {
         style?: ({
@@ -69,4 +73,4 @@ declare const icons: {
         className?: string | undefined;
     }) => import("react").JSX.Element;
 };
-export { Checkmark, ChevronRight, Circle, CircleDot, Computer, CrossIcon, Door, Hamburger, HorizontalDots, icons, Magnify, Moon, Pencil, Save, Sun, Undo, UserOutline, Warning, };
+export { Checkmark, ChevronRight, Circle, CircleDot, Cog, Computer, CrossIcon, Door, Hamburger, HorizontalDots, House, icons, Magnify, Moon, Pencil, Save, Sun, Undo, UserOutline, Warning, };

package/dist/ui/icons/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Warning = exports.UserOutline = exports.Undo = exports.Sun = exports.Save = exports.Pencil = exports.Moon = exports.Magnify = exports.icons = exports.HorizontalDots = exports.Hamburger = exports.Door = exports.CrossIcon = exports.Computer = exports.CircleDot = exports.Circle = exports.ChevronRight = exports.Checkmark = void 0;
+exports.Warning = exports.UserOutline = exports.Undo = exports.Sun = exports.Save = exports.Pencil = exports.Moon = exports.Magnify = exports.icons = exports.House = exports.HorizontalDots = exports.Hamburger = exports.Door = exports.CrossIcon = exports.Computer = exports.Cog = exports.CircleDot = exports.Circle = exports.ChevronRight = exports.Checkmark = void 0;
 const Checkmark_1 = require("./Checkmark");
 Object.defineProperty(exports, "Checkmark", { enumerable: true, get: function () { return Checkmark_1.Checkmark; } });
 const ChevronRight_1 = require("./ChevronRight");
@@ -9,6 +9,8 @@ const Circle_1 = require("./Circle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return Circle_1.Circle; } });
 const CircleDot_1 = require("./CircleDot");
 Object.defineProperty(exports, "CircleDot", { enumerable: true, get: function () { return CircleDot_1.CircleDot; } });
+const Cog_1 = require("./Cog");
+Object.defineProperty(exports, "Cog", { enumerable: true, get: function () { return Cog_1.Cog; } });
 const Computer_1 = require("./Computer");
 Object.defineProperty(exports, "Computer", { enumerable: true, get: function () { return Computer_1.Computer; } });
 const CrossIcon_1 = require("./CrossIcon");
@@ -19,6 +21,8 @@ const Hamburger_1 = require("./Hamburger");
 Object.defineProperty(exports, "Hamburger", { enumerable: true, get: function () { return Hamburger_1.Hamburger; } });
 const HorizontalDots_1 = require("./HorizontalDots");
 Object.defineProperty(exports, "HorizontalDots", { enumerable: true, get: function () { return HorizontalDots_1.HorizontalDots; } });
+const House_1 = require("./House");
+Object.defineProperty(exports, "House", { enumerable: true, get: function () { return House_1.House; } });
 const Magnify_1 = require("./Magnify");
 Object.defineProperty(exports, "Magnify", { enumerable: true, get: function () { return Magnify_1.Magnify; } });
 const Moon_1 = require("./Moon");
@@ -36,6 +40,7 @@ Object.defineProperty(exports, "UserOutline", { enumerable: true, get: function
 const Warning_1 = require("./Warning");
 Object.defineProperty(exports, "Warning", { enumerable: true, get: function () { return Warning_1.Warning; } });
 const icons = {
+    Cog: Cog_1.Cog,
     Checkmark: Checkmark_1.Checkmark,
     ChevronRight: ChevronRight_1.ChevronRight,
     Circle: Circle_1.Circle,
@@ -44,6 +49,7 @@ const icons = {
     CrossIcon: CrossIcon_1.CrossIcon,
     Door: Door_1.Door,
     Hamburger: Hamburger_1.Hamburger,
+    House: House_1.House,
     HorizontalDots: HorizontalDots_1.HorizontalDots,
     Magnify: Magnify_1.Magnify,
     Moon: Moon_1.Moon,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.620",
+  "version": "0.0.622",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",