@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/findDifferences/index.js

@@ -0,0 +1,120 @@
+import { typeOf } from "../typeOf";
+import { isDeepEqual } from "../isDeepEqual";
+import { isArrayOrPlainObject } from "../isArrayOrPlainObject";
+
+export const findDifferences = (oldData, newData, settings = {}) => {
+    const { isDeepEqualSettings } = settings || {};
+
+    if (isDeepEqual(oldData, newData, isDeepEqualSettings)) {
+        return { changedPaths: [], differences: {} };
+    }
+
+    const t1 = typeOf(oldData);
+    const t2 = typeOf(newData);
+
+    const isLeafType = (t) => t !== "object" && t !== "array";
+
+    if (
+        t1 !== t2 ||
+        isLeafType(t1) ||
+        isLeafType(t2) ||
+        !isArrayOrPlainObject(oldData) ||
+        !isArrayOrPlainObject(newData)
+    ) {
+        return [["$"], { oldValue: oldData, newValue: newData }];
+    }
+
+    const tree = diffTree(oldData, newData, isDeepEqualSettings);
+    const paths = findPaths(tree);
+    return { changedPaths: paths, differences: tree };
+};
+
+const isDiffLeaf = (v) => v && typeof v === "object" && ("oldValue" in v || "newValue" in v);
+
+const diffTree = (a, b, isDeepEqualSettings, level = 0, maxDepth = 50) => {
+    if (level > maxDepth) return { oldValue: a, newValue: b };
+    if (isDeepEqual(a, b, isDeepEqualSettings)) return {};
+
+    const ta = typeOf(a);
+    const tb = typeOf(b);
+
+    if (ta !== tb || !(ta === "object" || ta === "array") || !isArrayOrPlainObject(a) || !isArrayOrPlainObject(b)) {
+        return { oldValue: a, newValue: b };
+    }
+
+    if (ta === "array") {
+        const len = Math.max(a.length || 0, b.length || 0);
+        const changedByIndex = new Map();
+        let maxChangedIndex = -1;
+
+        for (let i = 0; i < len; i++) {
+            const sub = diffTree(a[i], b[i], isDeepEqualSettings, level + 1, maxDepth);
+            if (isDiffLeaf(sub) || (sub && typeof sub === "object" && Object.keys(sub).length)) {
+                changedByIndex.set(i, sub);
+                if (i > maxChangedIndex) maxChangedIndex = i;
+            }
+        }
+
+        if (maxChangedIndex === -1) return {};
+
+
+        const out = Array.from({ length: maxChangedIndex + 1 }, () => ({}));
+        for (const [idx, value] of changedByIndex.entries()) {
+            out[idx] = value;
+        }
+
+        return out;
+    }
+
+    const keys = new Set([...Object.keys(a || {}), ...Object.keys(b || {})]);
+    const out = {};
+    for (const k of keys) {
+        const sub = diffTree(a?.[k], b?.[k], isDeepEqualSettings, level + 1, maxDepth);
+        if (isDiffLeaf(sub) || (sub && typeof sub === "object" && Object.keys(sub).length)) {
+            out[k] = sub;
+        }
+    }
+
+    return out;
+};
+
+export const findPaths = (tree, basePath = "") => {
+    const out = [];
+
+    if (!tree || typeof tree !== "object") return out;
+
+    if (isDiffLeaf(tree)) {
+        out.push(basePath || "$");
+        return out;
+    }
+
+    if (Array.isArray(tree)) {
+        for (let i = 0; i < tree.length; i++) {
+            const value = tree[i];
+            if (!value || typeof value !== "object") continue;
+
+            const nextPath = basePath ? `${basePath}.${i}` : String(i);
+
+            if (isDiffLeaf(value)) {
+                out.push(nextPath);
+            } else {
+                out.push(...findPaths(value, nextPath));
+            }
+        }
+        return out;
+    }
+
+    for (const [key, value] of Object.entries(tree)) {
+        if (!value || typeof value !== "object") continue;
+
+        const nextPath = basePath ? `${basePath}.${key}` : key;
+
+        if (isDiffLeaf(value)) {
+            out.push(nextPath);
+        } else {
+            out.push(...findPaths(value, nextPath));
+        }
+    }
+
+    return out;
+};

package/src/libs/generateRandom/_dS.jsx

@@ -0,0 +1,199 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { generateRandom } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+
+const X = () => {
+    return (
+        <Ds.page
+            title="generateRandom()"
+            releasedOn="1.0.0"
+            description="Random number, text and lorem generators."
+        >
+            <Ds.block
+                title=".number"
+                code={`import { generateRandom } from "${SYS.basePath}";
+
+                        generateRandom.number(10, 99);
+                        generateRandom.number(0, 100, 2);
+                        generateRandom.number(0, 10, 4, true);
+`}
+                example={
+                    <Flex gap={20} padding={5}>
+                        <Typo.code>{generateRandom.number(10, 99)}</Typo.code>
+                        <Typo.code>{generateRandom.number(0, 100, 2)}</Typo.code>
+                        <Typo.code>{generateRandom.number(0, 10, 4, true)}</Typo.code>
+                    </Flex>
+                }
+            />
+            <Ds.block
+                title=".text"
+                code={`import { generateRandom } from "${SYS.basePath}";
+
+                        generateRandom.text(8);
+                        generateRandom.text(32, { useLowerCase: false });
+                        generateRandom.text(12, { useNumbers: true });
+                        generateRandom.text(40, { useNumbers: true, useUpperCase: true, useSymbols: true, });
+`}
+                example={
+                    <Flex.column padding={5}>
+                        <Typo.code>{generateRandom.text(8)}</Typo.code>
+                        <Typo.code>{generateRandom.text(32, { useLowerCase: false })}</Typo.code>
+                        <Typo.code>
+                            {generateRandom.text(8, { useLowerCase: false, useUpperCase: true })}
+                        </Typo.code>
+                        <Typo.code>{generateRandom.text(12, { useNumbers: true })}</Typo.code>
+                        <Typo.code>
+                            {generateRandom.text(40, {
+                                useNumbers: true,
+                                useUpperCase: true,
+                                useSymbols: true,
+                            })}
+                        </Typo.code>
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title=".loremIpsum"
+                code={`import { generateRandom } from "${SYS.basePath}";
+
+                        <Typo.code>
+                            {generateRandom.loremIpsum(50)}
+                        </Typo.code>
+                        <Typo.code>
+                            {generateRandom.loremIpsum(100, { disableDot: true })}
+                        </Typo.code>
+                        {generateRandom.loremIpsum(100, {
+                            paragraphLength: 20,
+                            enableParagraph: true,
+                            paragraphComponent: Typo.code, // Typo.p is suggested.
+                        })}
+`}
+                example={
+                    <Flex.column padding={5}>
+                        <Typo.bold>50</Typo.bold>
+                        <Typo.code>{generateRandom.loremIpsum(50)}</Typo.code>
+                        <Typo.bold>200 withoutDot</Typo.bold>
+                        <Typo.code>
+                            {generateRandom.loremIpsum(100, { disableDot: true })}
+                        </Typo.code>
+                        <Typo.bold>200 with random paragraphs as components</Typo.bold>
+                        {generateRandom.loremIpsum(100, {
+                            paragraphLength: 20,
+                            enableParagraph: true,
+                            paragraphComponent: Typo.code,
+                        })}
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                title="number"
+                disableLastBlock
+                args="const num = generateRandom.number(min, max, decimal, disableLocaleString);"
+                props={{
+                    min: {
+                        description: "Minimum number.",
+                        type: "number",
+                        defaultValue: "0",
+                    },
+                    max: {
+                        description: "Maximum number.",
+                        type: "number",
+                        defaultValue: "100",
+                    },
+                    decimal: {
+                        description: "Decimal places.",
+                        type: "number",
+                        defaultValue: "0",
+                    },
+                    disableLocaleString: {
+                        description: "Disables locale string formatting.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                }}
+                returnProps={{
+                    num: {
+                        description: "Random number, or locale-formatted string when formatting is enabled.",
+                        type: "number | string",
+                    },
+                }}
+            />
+            <Ds.api
+                title="text"
+                disableLastBlock
+                args="const text = generateRandom.text(length, { useLowerCase, useNumbers, useSymbols, useUpperCase });"
+                props={{
+                    length: {
+                        description: "Character length.",
+                        type: "number",
+                        required: true,
+                    },
+                    useLowerCase: {
+                        description: "Uses lower case letters.",
+                        type: "boolean",
+                        defaultValue: "true",
+                    },
+                    useUpperCase: {
+                        description: "Uses upper case letters.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    useNumbers: {
+                        description: "Uses numbers.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    useSymbols: {
+                        description: "Uses symbols.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                }}
+                returnProps={{
+                    text: { description: "Random text string.", type: "string" },
+                }}
+            />
+            <Ds.api
+                title="loremIpsum"
+                args="const lorem = generateRandom.loremIpsum(length, { disableDot, enableParagraph, paragraphComponent, paragraphLength });"
+                props={{
+                    length: {
+                        description: "Word count.",
+                        type: "number",
+                        required: true,
+                    },
+                    disableDot: {
+                        description: "Disables dot at sentence end.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    paragraphLength: {
+                        description: "Average words per paragraph when enableParagraph is true.",
+                        type: "number",
+                        defaultValue: "0",
+                    },
+                    enableParagraph: {
+                        description: "Returns paragraphComponent elements when true.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    paragraphComponent: {
+                        description: "Paragraph wrapper component.",
+                        type: "component",
+                        defaultValue: "'p'",
+                    },
+                }}
+                returnProps={{
+                    lorem: {
+                        description: "Lorem text string, or React paragraph elements when enableParagraph is true.",
+                        type: "string | ReactNode[]",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/generateRandom/index.js

@@ -0,0 +1,136 @@
+import { LOWER_CASE_ALPHABET } from "../../constants/LOWER_CASE_ALPHABET";
+import { UPPER_CASE_ALPHABET } from "../../constants/UPPER_CASE_ALPHABET";
+import { NUMBERS } from "../../constants/NUMBERS";
+import { SYMBOLS } from "../../constants/SYMBOLS";
+import { LOREM_VOCABULARY } from "../../constants/LOREM_VOCABULARY";
+import React from "react";
+
+export const generateRandom = {
+    _getRandomNumber: (min, max) => Math.floor(Math.random() * (max - min + 1) + min),
+    _generateRandomArray: (len) => {
+        let [randomArray, currentSum, minNumber, maxNumber] = [[], 0, 1, 30];
+        while (currentSum < len) {
+            const remainingCount = len - currentSum;
+            let randomNumber =
+                remainingCount < maxNumber
+                    ? remainingCount
+                    : generateRandom._getRandomNumber(
+                          minNumber,
+                          Math.min(maxNumber, remainingCount),
+                      );
+            if (remainingCount < minNumber)
+                randomNumber = randomNumber + (minNumber - remainingCount);
+            currentSum += randomNumber;
+            randomArray.push(randomNumber);
+        }
+        return randomArray;
+    },
+    _buildLoremText: (count, disableDot = false) => {
+        let loremText = "";
+        const arr = generateRandom._generateRandomArray(count);
+        for (let i = 0; i < arr.length; i++) {
+            let sentence = "";
+            const sentLength = arr[i];
+            for (let i2 = 0; i2 < sentLength; i2++) {
+                let previousWord = "";
+                const func = () => {
+                    const randomWord =
+                        LOREM_VOCABULARY[Math.floor(Math.random() * LOREM_VOCABULARY.length)];
+                    if (randomWord === previousWord) return func();
+                    previousWord = randomWord;
+                    return randomWord;
+                };
+                const randomWord = func();
+                sentence += randomWord + " ";
+            }
+            loremText +=
+                (disableDot
+                    ? sentence
+                    : (sentence.charAt(0).toUpperCase() + sentence.slice(1)).trim()) +
+                (disableDot ? " " : ". ");
+        }
+        return loremText.trim();
+    },
+    _buildLoremParagraphs: (length, paragraphLength, disableDot = false) => {
+        if (!(paragraphLength > 0)) return [generateRandom._buildLoremText(length, disableDot)];
+
+        const avgParagraphLength = Math.max(1, Math.floor(paragraphLength));
+        const minParagraphLength = Math.max(1, Math.floor(avgParagraphLength * 0.5));
+        const maxParagraphLength = Math.max(
+            minParagraphLength,
+            Math.floor(avgParagraphLength * 1.5),
+        );
+
+        const paragraphSizes = [];
+        let remaining = Math.max(0, Math.floor(length));
+
+        while (remaining > 0) {
+            if (remaining <= maxParagraphLength) {
+                paragraphSizes.push(remaining);
+                break;
+            }
+            const size = generateRandom._getRandomNumber(minParagraphLength, maxParagraphLength);
+            paragraphSizes.push(size);
+            remaining -= size;
+        }
+
+        return paragraphSizes.map((size) => generateRandom._buildLoremText(size, disableDot));
+    },
+    number: (min = 0, max = 100, decimal = 0, disableLocaleString = false) => {
+        const scaleFactor = 10 ** decimal;
+        const randomFloat = Math.random() * (max - min) + min;
+        const scaledNumber = Math.round(randomFloat * scaleFactor) / scaleFactor;
+
+        if (!disableLocaleString)
+            return scaledNumber.toLocaleString(undefined, {
+                minimumFractionDigits: decimal,
+                maximumFractionDigits: decimal,
+            });
+        else return Number(scaledNumber.toFixed(decimal));
+    },
+    loremIpsum: (length = 50, options = {}) => {
+        const {
+            disableDot = false,
+            paragraphLength = 0,
+            enableParagraph = false,
+            paragraphComponent = "p",
+        } = options || {};
+
+        if (!enableParagraph) {
+            return generateRandom._buildLoremText(length, disableDot);
+        }
+
+        const paragraphs = generateRandom._buildLoremParagraphs(
+            length,
+            paragraphLength,
+            disableDot,
+        );
+
+        return paragraphs.map((paragraph, i) =>
+            React.createElement(paragraphComponent, { key: i }, paragraph),
+        );
+    },
+    text: (length = 16, settings = {}) => {
+        const {
+            useLowerCase = true,
+            useUpperCase = false,
+            useNumbers = false,
+            useSymbols = false,
+        } = settings;
+
+        let charset = useLowerCase ? LOWER_CASE_ALPHABET : "";
+        if (useUpperCase) charset += UPPER_CASE_ALPHABET;
+        if (useNumbers) charset += NUMBERS;
+        if (useSymbols) charset += SYMBOLS;
+
+        const textArray = [];
+
+        for (let i = 0; i < length; i++) {
+            const randomCharIndex = Math.floor(Math.random() * charset.length);
+            const randomChar = charset[randomCharIndex];
+            textArray.push(randomChar);
+        }
+
+        return textArray.join("");
+    },
+};

package/src/libs/getClientData/_dS.jsx

@@ -0,0 +1,185 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { formatJsonForDisplay } from "../DesignSystem/formatJsonForDisplay";
+import { getClientData } from ".";
+import { baseStore } from "../baseStore";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { Button } from "../Button";
+
+const X = () => {
+    const clientData = baseStore.useGlobal((s) => s._clientData);
+    const { outputButtonProps, Output } = Ds.useOutputViewer();
+
+    return (
+        <Ds.page
+            title="getClientData()"
+            releasedOn="1.0.0"
+            description={
+                <>
+                    Collects lightweight client/environment data. It is already maintained and kept
+                    up to date in Base. You do not need to call it manually.
+                    <br />
+                    <br />
+                    <Button.string
+                        to="/design-system/baseStore.globalData"
+                        label="baseStore.globalData"
+                    />
+                    <br />
+                    <Button.string to="/design-system/base" label="<Base>" />
+                </>
+            }
+        >
+            <Ds.block
+                title="Accesing clientData"
+                description="globalData._clientData can be used to get the client data."
+                code={`import { baseStore } from "${SYS.basePath}";
+
+                       // React
+                       const clientData = baseStore.useGlobal((s) => s._clientData);
+
+                       // Non-React
+                       const clientData = baseStore.globalData.get()._clientData;`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex.column gap={4}>
+                            <Typo.span>
+                                winW: {clientData?.winW ?? "—"} · winH: {clientData?.winH ?? "—"} ·
+                                currentBreakpoint: {clientData?.currentBreakpoint ?? "—"} ·
+                                isMobile: {String(clientData?.isMobile ?? "—")}
+                            </Typo.span>
+                            <Typo.span>
+                                timeZone: {clientData?.timeZone ?? "—"} · device:{" "}
+                                {clientData?.device ?? "—"} · browser: {clientData?.browser ?? "—"}
+                            </Typo.span>
+                        </Flex.column>
+                        <Typo.code codeFormat={false}>
+                            {formatJsonForDisplay(clientData ?? {})}
+                        </Typo.code>
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const data = getClientData({ breakpoints, maxAspRatio, minAspRatio });"
+                props={{
+                    breakpoints: {
+                        description:
+                            "Breakpoint map: { name: [min, max] } — min inclusive, max exclusive. Default: DEFAULT_BREAKPOINTS from constants.",
+                        type: "Record<string, [number, number]>",
+                    },
+                    maxAspRatio: {
+                        description:
+                            "Lower bound for allowed aspect ratio (winW / winH). Naming kept for backward compatibility.",
+                        type: "number",
+                    },
+                    minAspRatio: {
+                        description:
+                            "Upper bound for allowed aspect ratio. Naming kept for backward compatibility.",
+                        type: "number",
+                    },
+                }}
+                returnProps={{
+                    winW: { description: "Viewport width (px).", type: "number" },
+                    winH: { description: "Viewport height (px).", type: "number" },
+                    aspectRatio: { description: "winW / winH (2 decimals).", type: "number" },
+                    language: {
+                        description: "navigator.language (or userLanguage).",
+                        type: "string",
+                    },
+                    timeZone: { description: "IANA timezone from Intl.", type: "string" },
+                    utcOffsetMinutes: {
+                        description: "UTC offset in minutes (e.g. 180 for UTC+3).",
+                        type: "number",
+                    },
+                    utcOffsetHours: {
+                        description: "UTC offset in hours (utcOffsetMinutes / 60).",
+                        type: "number",
+                    },
+                    MAX_ASP_RATIO: {
+                        description: "Configured lower bound for aspect ratio (from options).",
+                        type: "number",
+                    },
+                    MIN_ASP_RATIO: {
+                        description: "Configured upper bound for aspect ratio (from options).",
+                        type: "number",
+                    },
+                    isOutOfRatio: {
+                        description: "True when aspectRatio is outside MAX/MIN bounds.",
+                        type: "boolean",
+                    },
+                    isSafeSize: {
+                        description: "True when aspect ratio is within bounds (!isOutOfRatio).",
+                        type: "boolean",
+                    },
+                    currentBreakpoint: {
+                        description: "Active breakpoint key from breakpoints map.",
+                        type: "string",
+                    },
+                    isMobile: {
+                        description: "True when winW < 601.",
+                        type: "boolean",
+                    },
+                    device: {
+                        description: "mobile | tablet | mac | windows | linux | unknown",
+                        type: "string",
+                    },
+                    os: {
+                        description: "windows | android | ios | macOsX | linux | unknown",
+                        type: "string",
+                    },
+                    browser: {
+                        description: "edge | chrome | safari | firefox | unknown",
+                        type: "string",
+                    },
+                    dpr: { description: "window.devicePixelRatio.", type: "number" },
+                    isRetina: { description: "True when dpr >= 2.", type: "boolean" },
+                    orientation: {
+                        description: "screen.orientation.type or landscape/portrait fallback.",
+                        type: "string",
+                    },
+                    prefersDark: {
+                        description: "prefers-color-scheme: dark.",
+                        type: "boolean",
+                    },
+                    prefersReducedMotion: {
+                        description: "prefers-reduced-motion: reduce.",
+                        type: "boolean",
+                    },
+                    prefersContrastMore: {
+                        description: "prefers-contrast: more.",
+                        type: "boolean",
+                    },
+                    online: { description: "navigator.onLine.", type: "boolean" },
+                    connection: {
+                        description:
+                            "NetworkInformation snapshot: effectiveType, downlink, rtt, saveData (or null).",
+                        type: "object | null",
+                    },
+                    deviceMemory: {
+                        description:
+                            "navigator.deviceMemory in GB (Chromium; null if unavailable).",
+                        type: "number | null",
+                    },
+                    hardwareConcurrency: {
+                        description: "navigator.hardwareConcurrency (null if unavailable).",
+                        type: "number | null",
+                    },
+                    maxTouchPoints: {
+                        description: "navigator.maxTouchPoints.",
+                        type: "number",
+                    },
+                    hasTouch: {
+                        description: "True when maxTouchPoints > 0.",
+                        type: "boolean",
+                    },
+                    pointerCoarse: {
+                        description: "matchMedia (pointer: coarse).",
+                        type: "boolean",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;