@koine/react 1.0.3 → 1.0.8

package/Typography/Native.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { min } from "../styles/media";
+export const p = `
+  margin: 0 0 1em 0;
+`;
+export const h1 = `
+  margin: 0 0 10px 0;
+  font-size: 30px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+  ${min.md} {
+    font-size: 50px;
+  }
+`;
+export const h2 = `
+  margin: 0 0 1em 0;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: var(--headingsLineHeight);
+`;
+export const h3 = `
+  margin: 0 0 1em 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+export const h4 = `
+  margin: 0 0 1em 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: var(--headingsLineHeight);
+`;
+export const P = styled.div `
+  ${p}
+`;
+export const H1 = styled.div `
+  ${h1}
+`;
+export const H2 = styled.div `
+  ${h2}
+`;
+export const H3 = styled.div `
+  ${h3}
+`;
+export const H4 = styled.div `
+  ${h4}
+`;

package/Typography/ReadMore.js

@@ -0,0 +1,71 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useMemo } from "react";
+import styled from "styled-components";
+import { useIsomorphicLayoutEffect } from "react-use";
+import { m, useSpring } from "framer-motion";
+// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
+const Root = styled.div ``;
+const Content = styled.div `
+  & p:first-child {
+    margin-top: 0;
+  }
+`;
+const BtnWrap = styled.span `
+  display: flex;
+  justify-content: flex-end;
+  transition: transform 0.18s ease-in-out;
+  text-align: right;
+  transform: translateY(${(p) => (p.$expanded ? "0" : "-100%")});
+  opacity: ${(p) => (p.$expanded ? 0 : 1)};
+`;
+const BtnFader = styled.div `
+  width: 30%;
+  transition: transform 0.18s ease-in-out;
+  background: linear-gradient(45deg, transparent 50%, ${(p) => p.$bg} 70%);
+`;
+const Btn = styled.span `
+  padding: 0 10px 0 10px;
+  line-height: ${(p) => (p.$lineHeight ? p.$lineHeight : "inherit")};
+  background: var(--bodyBg);
+  color: var(--grey600);
+  white-space: nowrap;
+  font-size: ${(p) => p.$fontSize}px;
+  cursor: pointer;
+`;
+const BtnIcon = styled.span `
+  display: inline-block;
+  margin: 0 0 0 4px;
+  transition: transform 0.18s ease-in-out;
+  ${(p) => (p.$expanded ? "transform: rotate(180deg);" : "")};
+  font-size: ${(p) => p.$fontSize}px;
+`;
+export const ReadMore = (_a) => {
+    var { lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var(--bodyBg)", expand = "Expand", collapse = "Collapse" } = _a, props = __rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
+    const defaultMaxHeight = lines * (lineHeight * fontSize);
+    const [expanded, setExpanded] = useState(false);
+    const [maxHeight, setMaxHeight] = useState(defaultMaxHeight);
+    const [fullHeight, setFullHeight] = useState(0);
+    const [exceeds, setExceeds] = useState(false);
+    const content = useRef(null);
+    const height = useSpring(defaultMaxHeight);
+    const styles = useMemo(() => (exceeds ? { height, overflow: "hidden" } : {}), [exceeds, height]);
+    const handleExpandClick = () => {
+        setExpanded((prevExpanded) => !prevExpanded);
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (content.current) {
+            const elementHeight = content.current.offsetHeight;
+            const newExceeds = elementHeight > maxHeight;
+            if (!newExceeds) {
+                setMaxHeight(elementHeight);
+            }
+            setExceeds(newExceeds);
+            setFullHeight(elementHeight);
+        }
+    }, [content, maxHeight]);
+    useIsomorphicLayoutEffect(() => {
+        height.set(expanded ? fullHeight : maxHeight);
+    }, [expanded, height, fullHeight, maxHeight]);
+    return (_jsxs(Root, { children: [_jsx(m.div, Object.assign({ style: styles }, { children: _jsx(Content, Object.assign({ ref: content }, props)) })), exceeds && (_jsxs(BtnWrap, Object.assign({ "$expanded": expanded }, { children: [_jsx(BtnFader, { "$bg": bg }), _jsxs(Btn, Object.assign({ "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand }, { children: [expanded ? collapse : expand, _jsx(BtnIcon, { "$expanded": expanded })] }))] })))] }));
+};

package/Typography/TextLoop.js

@@ -0,0 +1,45 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { m, AnimatePresence } from "framer-motion";
+export const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400, }) => {
+    const placeholderRef = useRef(null);
+    const [content, setContent] = useState({ data: "", key: "" });
+    const [width, setWidth] = useState(inline ? 0 : "auto");
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            if (!placeholderRef.current)
+                return;
+            placeholderRef.current.innerHTML = text + "";
+            if (inline)
+                setWidth(placeholderRef.current.offsetWidth);
+            setContent({ data: text + "", key: new Date() + "" });
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [text, delay, inline]);
+    return (_jsxs("div", Object.assign({ className: className, style: Object.assign(Object.assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [_jsx("span", { ref: placeholderRef, style: { visibility: "hidden" } }), _jsx("div", Object.assign({ style: {
+                    overflow: noOverflow ? "hidden" : "visible",
+                    display: "block",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    height: "100%",
+                    width: "100%",
+                } }, { children: _jsx(AnimatePresence, { children: _jsx(m.div, Object.assign({ style: { position: "absolute" }, initial: {
+                            opacity: 0,
+                            y: direction === "down" ? "-100%" : "100%",
+                        }, animate: { opacity: 1, y: 0 }, exit: {
+                            opacity: 0,
+                            y: direction === "down" ? "100%" : "-100%",
+                        } }, { children: content.data }), content.key) }) }))] })));
+};
+export const TextLoop = (_a) => {
+    var { texts, interval = 3000 } = _a, props = __rest(_a, ["texts", "interval"]);
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        const intervalId = setInterval(() => setIndex((index) => index + 1), interval // every 3 seconds
+        );
+        return () => clearTimeout(intervalId);
+    }, [interval]);
+    return _jsx(TextLoopPiece, Object.assign({}, props, { text: texts[index % texts.length] }));
+};

package/Typography/TypeStairs.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export const TypeStairs = forwardRef(({ children, limit }, ref) => {
+    // split in rows or just use one row if there is no limit
+    const rows = limit ? splitTextIntoRows(children, limit) : [children];
+    return rows.length > 1 ? (_jsx(_Fragment, { children: rows.map((row, rowIndex) => {
+            return (_jsxs("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && _jsx("br", {})] }, `row-${rowIndex}`));
+        }) })) : (renderRow(rows[0], 0, ref));
+});
+/**
+ * every number chars find a space and break, then restart the gradient weight
+ * @see https://stackoverflow.com/a/25770787
+ */
+function splitTextIntoRows(input = "", limit = 18) {
+    const rows = [];
+    const arr = input.split(" ");
+    let currow = arr[0];
+    let rowlen = currow.length;
+    for (let i = 1; i < arr.length; i++) {
+        const word = arr[i];
+        rowlen += word.length + 1;
+        if (rowlen <= limit) {
+            currow += " " + word;
+        }
+        else {
+            rows.push(currow);
+            currow = word;
+            rowlen = word.length;
+        }
+    }
+    rows.push(currow);
+    return rows;
+}
+function renderRow(row, rowIndex, ref) {
+    const letters = row.split("");
+    let fontWeightIdx = 1;
+    // const fontWeight = Math.min(fontWeightIdx * 100, 800);
+    return (_jsx(_Fragment, { children: letters.map((letter, letterIndex) => {
+            const fontWeight = Math.min(fontWeightIdx * 100, 800);
+            // don't waste a fontWeight for a white space
+            if (letter !== " ") {
+                fontWeightIdx++;
+            }
+            return (_jsx("span", Object.assign({ style: { fontWeight }, ref: ref }, { children: letter }), `letter-${rowIndex}-${letterIndex}`));
+        }) }));
+}

package/Typography/index.js

@@ -0,0 +1,5 @@
+export * from "./CopyPasteVisible";
+export * from "./Native";
+export * from "./ReadMore";
+export * from "./TextLoop";
+export * from "./TypeStairs";

package/helpers/index.js

@@ -0,0 +1,19 @@
+import { isBrowser } from "@koine/utils";
+import { useHeader } from "../Header";
+export function useScrollTo(id = "", offset = 0) {
+    const [, , headerHeight] = useHeader();
+    if (!isBrowser) {
+        return;
+    }
+    const headerOffset = headerHeight || 0;
+    let element = document.getElementById(id);
+    let top = 0;
+    if (element && element.offsetParent) {
+        do {
+            top += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+    top -= offset;
+    top -= headerOffset;
+    window.scroll(0, top);
+}

package/hooks/index.js

@@ -0,0 +1,5 @@
+export * from "./useFocus";
+export * from "./usePrevious";
+export * from "./useDateLocale";
+export * from "./useTraceUpdate";
+export * from "./useWindowSize";

package/hooks/useDateLocale.js

@@ -0,0 +1,30 @@
+import { __awaiter } from "tslib";
+import { useEffect, useState } from "react";
+/**
+ * Dynamically import the date-fns correct locale
+ *
+ * Inspired by:
+ * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
+ */
+export function useDateLocale(locale, defaultLocale = "en") {
+    const [data, setData] = useState();
+    const [current, setCurrent] = useState(defaultLocale);
+    // const [ready, setReady] = useState(false);
+    // If the user changes the locale listen to the change and import the locale that is now required.
+    useEffect(() => {
+        const importLocaleFile = () => __awaiter(this, void 0, void 0, function* () {
+            // This webpack option stops all of the date-fns files being imported and chunked.
+            const localeToSet = yield import(
+            /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+            `date-fns/locale/${locale}/index.js`);
+            setCurrent(locale || current);
+            setData(localeToSet.default);
+            // setReady(true);
+        });
+        // If the locale has not yet been loaded.
+        if (locale !== current) {
+            importLocaleFile();
+        }
+    }, [locale, current]);
+    return data;
+}

package/hooks/useFocus.js

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+/**
+ * @see https://stackoverflow.com/a/54159564/1938970
+ */
+export const useFocus = () => {
+    const element = useRef(null);
+    const setFocus = () => {
+        element.current && element.current.focus();
+    };
+    return [element, setFocus];
+};

package/hooks/usePrevious.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}

package/hooks/useTraceUpdate.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */
+export function useTraceUpdate(props) {
+    const prev = useRef(props);
+    useEffect(() => {
+        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+            if (prev.current[k] !== v) {
+                // @ts-expect-error Does not matter here...
+                ps[k] = [prev.current[k], v];
+            }
+            return ps;
+        }, {});
+        if (Object.keys(changedProps).length > 0) {
+            console.log("Changed props:", changedProps);
+        }
+        prev.current = props;
+    });
+}

package/hooks/useWindowSize.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+export function useWindowSize() {
+    const [size, setSize] = useState([0, 0]);
+    useEffect(() => {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener("resize", updateSize);
+        updateSize();
+        return () => window.removeEventListener("resize", updateSize);
+    }, []);
+    return size;
+}

package/index.js

@@ -0,0 +1,36 @@
+export * from "./Alert";
+export * from "./Animations";
+export * from "./Autocomplete";
+export * from "./Bg";
+export * from "./Breadcrumbs";
+export * from "./Buttons";
+export * from "./Carousel";
+export * from "./Calendar";
+export * from "./Collapsable";
+export * from "./Debug";
+export * from "./Dialog";
+export * from "./Favicon";
+export * from "./Forms";
+export * from "./Grid";
+export * from "./Hamburger";
+export * from "./Header";
+export * from "./helpers";
+export * from "./Hidden";
+export * from "./hooks";
+export * from "./Img";
+export * from "./Link";
+export * from "./MenuItem";
+export * from "./Meta";
+export * from "./NoJs";
+export * from "./Pagination";
+export * from "./Pill";
+export * from "./Progress";
+export * from "./Rating";
+// export * from "./Select";
+export * from "./Sidebar";
+export * from "./Spacing";
+export * from "./Sticky";
+export * from "./styles";
+export * from "./Tabs";
+export * from "./Typography";
+export * from "./types";