ag-common 0.0.447 → 0.0.449

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

@@ -3,8 +3,29 @@ export interface IHeadersRaw {
     title?: string;
     image?: string;
     description?: string;
-    SiteShort: string;
-    FullSiteUrl: string;
-    siteDesc: string;
+    /** eg https://abc.def */
+    siteUrl: string;
+    /** eg 'a site to remember' */
+    tagline: string;
+    /** csv or separate keyword strings */
+    keywords: string | string[];
 }
-export declare const HeadersRaw: ({ title, image, SiteShort, FullSiteUrl, siteDesc, }: IHeadersRaw) => React.JSX.Element[];
+export declare const HeadersRaw: ({ title, image, siteUrl, tagline, keywords, }: IHeadersRaw) => React.JSX.Element[];
+export declare const HeadersRawNext: ({ title, image, siteUrl, tagline, description, keywords, }: IHeadersRaw) => {
+    title: string;
+    description: string;
+    keywords: string | string[];
+    openGraph: {
+        title: string;
+        description: string;
+        siteName: string;
+        url: string;
+        images: string | undefined;
+    };
+    twitter: {
+        title: string;
+        description: string;
+        card: string;
+        images: string | undefined;
+    };
+};

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

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeadersRaw = void 0;
+exports.HeadersRawNext = exports.HeadersRaw = void 0;
 const react_1 = __importDefault(require("react"));
-const HeadersRaw = ({ title, image, SiteShort, FullSiteUrl, siteDesc, }) => {
-    const fullTitle = `${title ? `${title} | ` : ''}${SiteShort} | ${siteDesc}`;
+const HeadersRaw = ({ title, image, siteUrl, tagline, keywords, }) => {
+    const { origin, hostname } = new URL(siteUrl);
+    const fullTitle = `${title ? `${title} | ` : ''}${hostname} | ${tagline}`;
     const titleFallback = title || fullTitle;
     const titleBlock = [
         react_1.default.createElement("title", { key: "1" }, fullTitle),
@@ -27,14 +28,38 @@ const HeadersRaw = ({ title, image, SiteShort, FullSiteUrl, siteDesc, }) => {
     return [
         react_1.default.createElement("meta", { key: "11", charSet: "utf-8" }),
         ...titleBlock,
-        react_1.default.createElement("meta", { key: "12", property: "og:site_name", content: SiteShort }),
-        react_1.default.createElement("meta", { key: "13", property: "og:url", content: FullSiteUrl }),
-        react_1.default.createElement("meta", { key: "14", itemProp: "url", content: FullSiteUrl }),
-        react_1.default.createElement("meta", { key: "15", name: "twitter:url", content: FullSiteUrl }),
+        react_1.default.createElement("meta", { key: "12", property: "og:site_name", content: hostname }),
+        react_1.default.createElement("meta", { key: "13", property: "og:url", content: origin }),
+        react_1.default.createElement("meta", { key: "14", itemProp: "url", content: origin }),
+        react_1.default.createElement("meta", { key: "15", name: "twitter:url", content: origin }),
         react_1.default.createElement("meta", { key: "16", property: "og:type", content: "website" }),
         react_1.default.createElement("meta", { key: "17", name: "twitter:card", content: "summary_large_image" }),
         react_1.default.createElement("meta", { key: "18", name: "robots", content: "index, follow" }),
+        react_1.default.createElement("meta", { key: "19", name: "keywords", content: Array.isArray(keywords) ? keywords.join(', ') : keywords }),
         ...imagearr,
     ];
 };
 exports.HeadersRaw = HeadersRaw;
+const HeadersRawNext = ({ title, image, siteUrl, tagline, description, keywords, }) => {
+    const { origin, hostname } = new URL(siteUrl);
+    const fullTitle = `${title ? `${title} | ` : ''}${hostname} | ${tagline}`;
+    return {
+        title: fullTitle,
+        description: description || fullTitle,
+        keywords,
+        openGraph: {
+            title: fullTitle,
+            description: description || fullTitle,
+            siteName: hostname,
+            url: origin,
+            images: image,
+        },
+        twitter: {
+            title: fullTitle,
+            description: description || fullTitle,
+            card: 'summary_large_image',
+            images: image,
+        },
+    };
+};
+exports.HeadersRawNext = HeadersRawNext;

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

@@ -40,7 +40,7 @@ exports.IconF = styled_1.default.span `
   }
 
   &[data-hasoutline='true'] {
-    ${common_1.HardOutline}
+    ${(0, common_1.HardOutline)('var(--outlinecolour)')}
   }
 
   svg {

package/dist/ui/components/TreeChart/base.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TreeNodeData } from './types';
+export declare const TreeChart: (tnd: TreeNodeData) => React.JSX.Element;

package/dist/ui/components/TreeChart/base.js

@@ -0,0 +1,105 @@
+"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 (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.TreeChart = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importStar(require("react"));
+const useResize_1 = require("../../helpers/useResize");
+const styles_1 = require("../../styles");
+const common_1 = require("../../styles/common");
+const helpers_1 = require("./helpers");
+const Base = styled_1.default.div `
+  border: solid 1px #ccc;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+`;
+const NodeChildren = styled_1.default.div `
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+`;
+const Node = styled_1.default.div `
+  margin: 1px;
+  padding: 2px;
+  display: flex;
+  flex-flow: column;
+  height: min-content;
+`;
+const Title = styled_1.default.div `
+  color: white;
+  word-break: break-all;
+  ${(0, common_1.HardOutline)('black')};
+  ${(0, common_1.TextOverflowEllipsis)(1)};
+  min-height: 1rem;
+  line-height: 1rem;
+`;
+const render = ({ n, depth, head, headDim, tnd, }) => {
+    var _a;
+    let width = 0;
+    let height = 0;
+    const leaf = n.children.length === 0;
+    const sizeMult = n.size / head.size;
+    width = Math.floor(headDim.width * sizeMult) - 6; //6 = padding+margins
+    if (n.children.length === 0) {
+        height = Math.floor(headDim.height * sizeMult);
+    }
+    const title = ((_a = tnd.titleFn) === null || _a === void 0 ? void 0 : _a.call(tnd, {
+        path: n.name,
+        pathCount: n.size,
+        fullCount: head.size,
+    })) || `${n.name} (${n.size}/${head.size})`;
+    return (react_1.default.createElement(Node, { "data-treenode": true, style: Object.assign({ backgroundColor: (0, styles_1.getColourWheel)(depth) }, (leaf && {
+            width: width ? width + 'px' : '100%',
+            height: height ? height + 'px' : '100%',
+        })), key: n.name, "data-ch": n.children.length, "data-size": n.size, title: title },
+        n.name && react_1.default.createElement(Title, null, n.name),
+        react_1.default.createElement(NodeChildren, { "data-type": "nc" }, n.children.map((c) => render({ n: c, depth: depth + 1, head, headDim, tnd })))));
+};
+const TreeChart = (tnd) => {
+    const raw = (0, helpers_1.convertToRaw)({ tnd });
+    const head = (0, helpers_1.toArray)('', raw);
+    const pd = (0, useResize_1.useResize)();
+    const [headDim, setHeadDim] = (0, react_1.useState)();
+    const r = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!r.current) {
+            return;
+        }
+        const width = r.current.clientWidth;
+        const height = r.current.clientHeight || r.current.clientWidth;
+        setHeadDim({
+            width,
+            height,
+        });
+    }, [pd]);
+    if (head.size === 0) {
+        return react_1.default.createElement("div", null);
+    }
+    return (react_1.default.createElement(Base, { ref: r }, headDim && render({ tnd, n: head, depth: 0, head, headDim })));
+};
+exports.TreeChart = TreeChart;

package/dist/ui/components/TreeChart/helpers.d.ts

@@ -0,0 +1,14 @@
+import { TreeNodeData, TreeNodeOut } from './types';
+interface TreeNodeRaw {
+    name: string;
+    size: number;
+    depth: number;
+    children: {
+        [P in string]: TreeNodeRaw;
+    };
+}
+export declare const convertToRaw: ({ tnd: { data, pathDelimiter }, }: {
+    tnd: TreeNodeData;
+}) => TreeNodeRaw;
+export declare const toArray: (name: string, raw: TreeNodeRaw) => TreeNodeOut;
+export {};

package/dist/ui/components/TreeChart/helpers.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toArray = exports.convertToRaw = void 0;
+const convertToRaw = ({ tnd: { data, pathDelimiter }, }) => {
+    if (!data || data.length === 0) {
+        return { children: {}, size: 0, name: '', depth: 0 };
+    }
+    const dm = { size: 0, children: {}, name: '', depth: 0 };
+    data.forEach((line) => {
+        const names = line.path.split(pathDelimiter || '/');
+        let node = dm;
+        let a = 0;
+        do {
+            node.size += line.size;
+            if (names[a] === undefined) {
+                break;
+            }
+            if (!node.children[names[a]]) {
+                node.children[names[a]] = {
+                    children: {},
+                    size: 0,
+                    name: names[a],
+                    depth: a,
+                };
+            }
+            node = node.children[names[a]];
+            a += 1;
+        } while (node);
+    });
+    return dm;
+};
+exports.convertToRaw = convertToRaw;
+const toArrayAux = (name, n) => ({
+    name,
+    size: n.size,
+    depth: n.depth,
+    children: Object.entries(n.children).map(([cn, cv]) => toArrayAux(cn, cv)),
+});
+const toArray = (name, raw) => {
+    const arr = toArrayAux(name, {
+        children: raw.children,
+        size: 0,
+        name: '',
+        depth: 0,
+    });
+    arr.size = arr.children.map((d) => d.size).reduce((a, b) => a + b, 0);
+    return arr;
+};
+exports.toArray = toArray;

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

@@ -0,0 +1,2 @@
+export * from './base';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./base"), exports);
+__exportStar(require("./types"), exports);

package/dist/ui/components/TreeChart/types.d.ts

@@ -0,0 +1,21 @@
+export interface TreeNodeOut {
+    name: string;
+    size: number;
+    depth: number;
+    children: TreeNodeOut[];
+}
+export interface TreeNodeData {
+    data: {
+        path: string;
+        /** count of this path. default 1 */
+        size: number;
+    }[];
+    /** split paths by this delim. default= / */
+    pathDelimiter?: string;
+    /** get the hover title for the node. has sensible default */
+    titleFn?: (p: {
+        path: string;
+        pathCount: number;
+        fullCount: number;
+    }) => string;
+}

package/dist/ui/components/TreeChart/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -27,4 +27,5 @@ export * from './TextEdit';
 export * from './TextWithButton';
 export * from './TimelineChart';
 export * from './Toast';
+export * from './TreeChart';
 export * from './UserImage';

package/dist/ui/components/index.js

@@ -43,4 +43,5 @@ __exportStar(require("./TextEdit"), exports);
 __exportStar(require("./TextWithButton"), exports);
 __exportStar(require("./TimelineChart"), exports);
 __exportStar(require("./Toast"), exports);
+__exportStar(require("./TreeChart"), exports);
 __exportStar(require("./UserImage"), exports);

package/dist/ui/helpers/useInterval.d.ts

@@ -1,8 +1,11 @@
 import { useEffect } from 'react';
 export declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;
-export declare function useInterval(callback: () => void, 
+export declare function useInterval<T>(callback: () => T, 
 /** ms delay */
-delay: number | null, 
-/** optionally called on return of useEffect */
-clear?: () => void): void;
+delay: number | null, opt?: {
+    /** called when cleaning up useEffect */
+    onEnd?: () => void;
+    /** will be passed result of callback, and can cancel interval if passed */
+    determineEnd?: (v: T) => boolean;
+}): void;

package/dist/ui/helpers/useInterval.js

@@ -6,9 +6,7 @@ exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useL
 exports.default = exports.useIsomorphicLayoutEffect;
 function useInterval(callback, 
 /** ms delay */
-delay, 
-/** optionally called on return of useEffect */
-clear) {
+delay, opt) {
     const savedCallback = (0, react_1.useRef)(callback);
     (0, exports.useIsomorphicLayoutEffect)(() => {
         savedCallback.current = callback;
@@ -17,11 +15,19 @@ clear) {
         if (!delay && delay !== 0) {
             return;
         }
-        const id = setInterval(() => savedCallback.current(), delay);
+        const id = setInterval(() => {
+            var _a, _b;
+            const res = savedCallback.current();
+            if ((_a = opt === null || opt === void 0 ? void 0 : opt.determineEnd) === null || _a === void 0 ? void 0 : _a.call(opt, res)) {
+                clearInterval(id);
+                (_b = opt === null || opt === void 0 ? void 0 : opt.onEnd) === null || _b === void 0 ? void 0 : _b.call(opt);
+            }
+        }, delay);
         return () => {
+            var _a;
             clearInterval(id);
-            clear === null || clear === void 0 ? void 0 : clear();
+            (_a = opt === null || opt === void 0 ? void 0 : opt.onEnd) === null || _a === void 0 ? void 0 : _a.call(opt);
         };
-    }, [clear, delay]);
+    }, [opt, delay]);
 }
 exports.useInterval = useInterval;

package/dist/ui/styles/common.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
-export declare const HardOutline: import("@emotion/react").SerializedStyles;
+/** function that returns css that gives a text outline drop shadow.
+ * outlinecolour default='white'
+ * size default = 1px
+ */
+export declare const HardOutline: (outlineColour?: string, size?: number) => import("@emotion/react").SerializedStyles;
 export declare const NoTextSelect: import("@emotion/react").SerializedStyles;
-export declare const TextOverflowEllipsis: import("@emotion/react").SerializedStyles;
+export declare const TextOverflowEllipsis: (lines: number) => import("@emotion/react").SerializedStyles;
 export declare const CssTransparentBlock: import("@emotion/react").SerializedStyles;
 export declare const FadeBottom: ({ height }: {
     height: string;

package/dist/ui/styles/common.js

@@ -7,12 +7,20 @@ exports.bounce = exports.FullScreenPage = exports.noDrag = exports.Card = export
 const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const colours_1 = require("./colours");
-exports.HardOutline = (0, react_1.css) `
-  filter: drop-shadow(1px 1px 0px var(--outlinecolour))
-    drop-shadow(-1px 1px 0px var(--outlinecolour))
-    drop-shadow(1px -1px 0px var(--outlinecolour))
-    drop-shadow(-1px -1px 0px var(--outlinecolour));
-`;
+/** function that returns css that gives a text outline drop shadow.
+ * outlinecolour default='white'
+ * size default = 1px
+ */
+const HardOutline = (outlineColour = 'white', size = 1) => {
+    const px = `${size}px`;
+    return (0, react_1.css) `
+    filter: drop-shadow(${px} ${px} 0px ${outlineColour})
+      drop-shadow(-${px} ${px} 0px ${outlineColour})
+      drop-shadow(${px} -${px} 0px ${outlineColour})
+      drop-shadow(-${px} -${px} 0px ${outlineColour});
+  `;
+};
+exports.HardOutline = HardOutline;
 exports.NoTextSelect = (0, react_1.css) `
   user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
@@ -20,10 +28,14 @@ exports.NoTextSelect = (0, react_1.css) `
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
 `;
-exports.TextOverflowEllipsis = (0, react_1.css) `
+const TextOverflowEllipsis = (lines) => (0, react_1.css) `
+  display: -webkit-box;
+  -webkit-line-clamp: ${lines};
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
+exports.TextOverflowEllipsis = TextOverflowEllipsis;
 exports.CssTransparentBlock = (0, react_1.css) `
   background-color: rgba(150, 150, 150, 0.5);
   border-radius: 3px;

package/package.json

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