@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/queryConverter/_dS.jsx

@@ -0,0 +1,339 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { queryConverter } from ".";
+import { baseStore } from "../baseStore";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { Button } from "../Button";
+
+const exportSample = { page: 2, filter: { q: "test" }, list: ["a", "b"], flag: true };
+const importSampleQs = "?page=2&filter[q]=test&list[0]=a&list[1]=b&flag=true";
+
+const DEMO_STORE_INITIAL = {
+    form: { currentForm: { page: 1, q: "old" } },
+};
+
+const demoStore = baseStore.create(DEMO_STORE_INITIAL);
+
+const X = () => {
+    const { outputButtonProps, Output } = Ds.useOutputViewer();
+    const { set: setDemo, ...demo } = baseStore.use(demoStore);
+
+    return (
+        <Ds.page
+            title="queryConverter"
+            releasedOn="1.0.0"
+            description="Nested object/query converter."
+        >
+            <Ds.block
+                title="export"
+                code={`import { queryConverter } from "${SYS.basePath}";
+
+                        const qs = queryConverter.export({ page: 2, filter: { q: "test" } });`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Typo.code>sample = {JSON.stringify(exportSample, null, 2)}</Typo.code>
+                        <Button.plain
+                            label="queryConverter.export(sample)"
+                            {...outputButtonProps({
+                                path: "export",
+                                activeLabel: "export",
+                                fn: () => queryConverter.export(exportSample),
+                            })}
+                        />
+                        <Output path="export" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="import"
+                code={`import { queryConverter } from "${SYS.basePath}";
+
+                       const obj = queryConverter.import(
+                        "?page=2&filter[q]=test&list[0]=a&list[1]=b&flag=true"
+                       );`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label="queryConverter.import(sampleQs)"
+                            {...outputButtonProps({
+                                path: "import",
+                                activeLabel: "import",
+                                fn: () => queryConverter.import(importSampleQs),
+                            })}
+                        />
+                        <Output path="import" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="preserveBooleans"
+                description='Keeps "true" / "false" as strings instead of booleans.'
+                code='queryConverter.import("flag=true", { preserveBooleans: true });'
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label="preserveBooleans: true"
+                            {...outputButtonProps({
+                                path: "preserveBooleans",
+                                activeLabel: "preserveBooleans",
+                                fn: () =>
+                                    queryConverter.import("flag=true&count=3", {
+                                        preserveBooleans: true,
+                                    }),
+                            })}
+                        />
+                        <Output path="preserveBooleans" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="preserveNumbers"
+                description="Keeps numeric-looking values as strings."
+                code='queryConverter.import("page=2", { preserveNumbers: true });'
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label="preserveNumbers: true"
+                            {...outputButtonProps({
+                                path: "preserveNumbers",
+                                activeLabel: "preserveNumbers",
+                                fn: () =>
+                                    queryConverter.import("page=2&count=10", {
+                                        preserveNumbers: true,
+                                    }),
+                            })}
+                        />
+                        <Output path="preserveNumbers" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="prefix (export)"
+                description='Dot-separated query key namespace on export (e.g. "filters.form" → filters[form][obj1][value]=test).'
+                code={`queryConverter.export({ obj1: { value: "test" }, page: 2 }, { prefix: "filters.form" });
+                        // ?filters[form][obj1][value]=test&filters[form][page]=2`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label='export (prefix: "filters.form")'
+                            {...outputButtonProps({
+                                path: "prefixExport",
+                                activeLabel: "prefixExport",
+                                fn: () => {
+                                    const qo = { obj1: { value: "test" }, page: 2 };
+                                    const result = queryConverter.export(qo, {
+                                        prefix: "filters.form",
+                                    });
+                                    const result2 = queryConverter.export(qo);
+                                    return { result, result2 };
+                                },
+                            })}
+                        />
+                        <Output path="prefixExport" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="prefix (import)"
+                description="Import unwraps only the prefix branch; keys outside the prefix are ignored (e.g. noise=1). Distinct from setPath (store dot path)."
+                code={`queryConverter.import(
+                            "?filters[form][obj1][value]=new&filters[form][page]=3&noise=1",
+                            { prefix: "filters.form" },
+                        );
+                        // { obj1: { value: "new" }, page: 3 }`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label='import (prefix: "filters.form")'
+                            {...outputButtonProps({
+                                path: "prefixImport",
+                                activeLabel: "prefixImport",
+                                fn: () => {
+                                    const qs =
+                                        "?filters[form][obj1][value]=new&filters[form][page]=3&noise=1";
+                                    const result = queryConverter.import(qs, {
+                                        prefix: "filters.form",
+                                    });
+                                    const result2 = queryConverter.import(qs);
+                                    return { result, result2 };
+                                },
+                            })}
+                        />
+                        <Output path="prefixImport" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="baseStore"
+                description="Merges parsed query into the store via store.set (optional setPath). The store is updated in place; import still returns only the parsed payload."
+                code={`const store = baseStore.create({
+                            form: { currentForm: { page: 1, q: "old" } },
+                        });
+                        queryConverter.import("?page=2&q=new", {
+                            baseStore: store,
+                            setPath: "form.currentForm",
+                        });
+                        store.get(); // { form: { currentForm: { page: 2, q: "new", … } } }`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10}>
+                            <Button.plain
+                                label="baseStore + setPath"
+                                {...outputButtonProps({
+                                    path: "baseStore",
+                                    activeLabel: "baseStore",
+                                    fn: () => {
+                                        queryConverter.import("?page=2&q=new&extra=1", {
+                                            baseStore: demoStore,
+                                            setPath: "form.currentForm",
+                                        });
+                                    },
+                                })}
+                            />
+                            <Button.plain
+                                label="Reset"
+                                skipClickCooldown
+                                skipOnClickHold
+                                onClick={() => setDemo(DEMO_STORE_INITIAL)}
+                            />
+                        </Flex>
+                        <Output path="baseStore" directValue={demo} />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="baseStoreSet"
+                description="Pass set from baseStore.use (e.g. setDemo) — same draft merge as store.set. Takes precedence over baseStore."
+                code={`const demoStore = baseStore.create({ form: { currentForm: { page: 1 } } });
+                        const { set: setDemo } = baseStore.use(demoStore);
+                        queryConverter.import("?page=2&q=new&extra=1", {
+                            baseStoreSet: setDemo,
+                            setPath: "form.currentForm",
+                        });`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10}>
+                            <Button.plain
+                                label="baseStoreSet + setPath"
+                                {...outputButtonProps({
+                                    path: "baseStoreSet",
+                                    activeLabel: "baseStoreSet",
+                                    fn: () => {
+                                        queryConverter.import("?page=2&q=new&extra=1", {
+                                            baseStoreSet: setDemo,
+                                            setPath: "form.currentForm",
+                                        });
+                                    },
+                                })}
+                            />
+                            <Button.plain
+                                label="Reset"
+                                skipClickCooldown
+                                skipOnClickHold
+                                onClick={() => setDemo(DEMO_STORE_INITIAL)}
+                            />
+                        </Flex>
+                        <Output path="baseStoreSet" directValue={demo} />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                title="export"
+                disableLastBlock
+                args="const query = queryConverter.export(obj, { ignoreEncode, prefix, preserveEmpty });"
+                props={{
+                    obj: {
+                        description:
+                            "Plain object to serialize (nested objects/arrays use bracket notation).",
+                        type: "object",
+                        required: true,
+                    },
+                    preserveEmpty: {
+                        description: "Keeps null/undefined/empty values.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    prefix: {
+                        description:
+                            'Dot-separated query key namespace (e.g. "filters.form" → filters[form][key]=…). Distinct from setPath, which selects a store branch.',
+                        type: "string",
+                    },
+                    ignoreEncode: {
+                        description: "Skips encodeURIComponent.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                }}
+                returnProps={{
+                    query: {
+                        description: "Serialized query string with leading ?.",
+                        type: "string",
+                    },
+                }}
+            />
+            <Ds.api
+                title="import"
+                disableLastBlock
+                args="const parsed = queryConverter.import(str, { baseStore, baseStoreSet, prefix, preserveBooleans, preserveNumbers, setPath });"
+                props={{
+                    str: {
+                        description:
+                            'Query string to parse (with or without leading "?").',
+                        type: "string",
+                        required: true,
+                    },
+                    preserveBooleans: {
+                        description: "Keeps boolean-like values as strings.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    preserveNumbers: {
+                        description: "Keeps number-like values as strings.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    prefix: {
+                        description:
+                            'After parse, returns the object at the dot path (e.g. "filters.form" → parsed.filters.form). Pairs with export prefix. Distinct from setPath.',
+                        type: "string",
+                    },
+                    baseStore: {
+                        description:
+                            "Store instance (non-hook). Uses store.set to merge at setPath (or root). Ignored when baseStoreSet is provided.",
+                        type: "object",
+                    },
+                    baseStoreSet: {
+                        description:
+                            "set from baseStore.use (or set from useLocal). Draft merge at setPath. Takes precedence over baseStore.",
+                        type: "fn",
+                    },
+                    setPath: {
+                        description:
+                            'Dot path in the store object for merge (e.g. "form.currentForm"). Only with baseStore / baseStoreSet. Omit to merge at store root.',
+                        type: "string",
+                    },
+                }}
+                returnProps={{
+                    parsed: {
+                        description:
+                            "Parsed nested object (store is updated separately when baseStore or baseStoreSet is passed).",
+                        type: "object",
+                    },
+                }}
+            />
+            <Ds.api
+                title="baseStoreSet"
+                args="baseStoreSet((draft) => {});"
+                props={{
+                    draft: {
+                        description: "Mutable store draft; merged at setPath or root.",
+                        type: "object",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/queryConverter/index.js

@@ -0,0 +1,146 @@
+import { applyImportToStore } from "./mergeImportIntoStore";
+import { buildQueryKeyWithPrefix, unwrapByPrefix } from "./prefixPath.js";
+
+export const queryConverter = {
+    export: (obj, settings = {}) => {
+        const { preserveEmpty = false, prefix, ignoreEncode = false } = settings;
+
+        if (!obj || typeof obj !== "object") return "";
+
+        const parts = [];
+
+        const encode = (v) => (ignoreEncode ? String(v) : encodeURIComponent(String(v)));
+
+        const shouldSkip = (v) => !preserveEmpty && (v === null || v === undefined || v === "");
+
+        const walk = (value, keyPath) => {
+            if (shouldSkip(value)) return;
+
+            if (Array.isArray(value)) {
+                for (let i = 0; i < value.length; i++) {
+                    walk(value[i], `${keyPath}[${i}]`);
+                }
+                return;
+            }
+
+            if (value && typeof value === "object") {
+                for (const k of Object.keys(value)) {
+                    walk(value[k], `${keyPath}[${k}]`);
+                }
+                return;
+            }
+
+            parts.push(`${keyPath}=${encode(value)}`);
+        };
+
+        for (const k of Object.keys(obj)) {
+            const keyPath = prefix ? buildQueryKeyWithPrefix(prefix, k) : `${k}`;
+            walk(obj[k], keyPath);
+        }
+
+        return "?" + parts.join("&");
+    },
+
+    import: (str, settings = {}) => {
+        const {
+            preserveBooleans = false,
+            preserveNumbers = false,
+            prefix,
+            baseStore: baseStoreProp,
+            baseStoreSet,
+            setPath,
+        } = settings;
+
+        const out = {};
+        if (!str || typeof str !== "string") return out;
+
+        const params = str.startsWith("?") ? str.slice(1) : str;
+        if (!params) return out;
+
+        const parseValue = (raw) => {
+            if (raw === "") return raw;
+
+            if (!preserveBooleans && (raw === "true" || raw === "false")) {
+                return raw === "true";
+            }
+
+            if (!preserveNumbers) {
+                const n = Number(raw);
+                if (Number.isFinite(n) && raw.trim() !== "") return n;
+            }
+
+            return raw;
+        };
+
+        const ensureContainer = (parent, key, nextKey) => {
+            if (parent[key] !== undefined) return;
+
+            const nextLooksArray =
+                nextKey !== undefined && nextKey !== null && nextKey !== "" && !isNaN(nextKey);
+
+            parent[key] = nextLooksArray ? [] : {};
+        };
+
+        const setDeep = (root, keys, value) => {
+            let cur = root;
+
+            for (let i = 0; i < keys.length; i++) {
+                const k = keys[i];
+                const isLast = i === keys.length - 1;
+                const nextK = keys[i + 1];
+
+                if (isLast) {
+                    cur[k] = value;
+                    return;
+                }
+
+                ensureContainer(cur, k, nextK);
+                cur = cur[k];
+            }
+        };
+
+        const splitKey = (k) => k.split(/\[|\]/).filter(Boolean);
+
+        for (const pair of params.split("&")) {
+            if (!pair) continue;
+
+            const eq = pair.indexOf("=");
+            const rawKey = eq === -1 ? pair : pair.slice(0, eq);
+            const rawVal = eq === -1 ? "" : pair.slice(eq + 1);
+
+            if (!rawKey) continue;
+
+            const decodedKey = decodeURIComponent(rawKey);
+            const decodedVal = parseValue(decodeURIComponent(rawVal));
+
+            if (!decodedKey.includes("[") && !decodedKey.includes("]")) {
+                out[decodedKey] = decodedVal;
+                continue;
+            }
+
+            const keyParts = splitKey(decodedKey);
+            if (keyParts.length === 0) continue;
+
+            setDeep(out, keyParts, decodedVal);
+        }
+
+        let incoming = prefix ? unwrapByPrefix(out, prefix) : out;
+
+        const setFn =
+            typeof baseStoreSet === "function"
+                ? baseStoreSet
+                : baseStoreProp && typeof baseStoreProp.set === "function"
+                  ? (updater) => baseStoreProp.set(updater)
+                  : null;
+
+        if (setFn) {
+            applyImportToStore({
+                set: setFn,
+                setPath,
+                incoming,
+            });
+        }
+
+        return incoming;
+    },
+};

package/src/libs/queryConverter/mergeImportIntoStore.js

@@ -0,0 +1,48 @@
+import { byPath } from "../byPath";
+
+const splitSetPath = (setPath) =>
+    typeof setPath === "string" && setPath.trim()
+        ? setPath.trim().split(".").filter(Boolean)
+        : [];
+
+export const mergeIncomingInto = (existing, incoming) => {
+    if (incoming == null || typeof incoming !== "object" || Array.isArray(incoming)) {
+        return incoming;
+    }
+
+    const target =
+        existing != null && typeof existing === "object" && !Array.isArray(existing)
+            ? { ...existing }
+            : {};
+
+    for (const key of Object.keys(incoming)) {
+        target[key] = incoming[key];
+    }
+
+    return target;
+};
+
+const mergeIncomingIntoDraft = (target, incoming) => {
+    if (incoming == null || typeof incoming !== "object" || Array.isArray(incoming)) return;
+    if (target == null || typeof target !== "object" || Array.isArray(target)) return;
+
+    for (const key of Object.keys(incoming)) {
+        target[key] = incoming[key];
+    }
+};
+
+export const applyImportToStore = ({ set, setPath, incoming }) => {
+    if (typeof set !== "function") return;
+
+    const hasSetPath = splitSetPath(setPath).length > 0;
+
+    set((draft) => {
+        if (!hasSetPath) {
+            mergeIncomingIntoDraft(draft, incoming);
+            return;
+        }
+
+        const current = byPath.get(draft, setPath);
+        byPath.set(draft, setPath, mergeIncomingInto(current, incoming), true);
+    });
+};

package/src/libs/queryConverter/prefixPath.js

@@ -0,0 +1,30 @@
+
+export const splitPrefixPath = (prefix) => {
+    if (prefix == null || typeof prefix !== "string") return [];
+    return prefix.trim().split(".").filter(Boolean);
+};
+
+export const buildBracketKeyPath = (segments) => {
+    if (!segments?.length) return "";
+    const [first, ...rest] = segments;
+    return first + rest.map((seg) => `[${seg}]`).join("");
+};
+
+export const buildQueryKeyWithPrefix = (prefix, key) => {
+    const parts = splitPrefixPath(prefix);
+    return buildBracketKeyPath(parts.length ? [...parts, String(key)] : [String(key)]);
+};
+
+export const unwrapByPrefix = (root, prefix) => {
+    const parts = splitPrefixPath(prefix);
+    if (!parts.length) return root;
+
+    let cur = root;
+    for (const segment of parts) {
+        if (cur == null || typeof cur !== "object" || Array.isArray(cur)) return {};
+        cur = cur[segment];
+    }
+
+    if (cur != null && typeof cur === "object" && !Array.isArray(cur)) return cur;
+    return {};
+};

package/src/libs/scrollLock/_dS.jsx

@@ -0,0 +1,69 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { scrollLock } from ".";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { Space } from "../Space";
+import { baseStore } from "../baseStore";
+
+const X = () => {
+    const { status, set } = baseStore.useLocal({ status: "idle" });
+
+    return (
+        <Ds.page
+            title="scrollLock()"
+            releasedOn="1.0.0"
+            description={{ tr: "Document scroll'unu kilitler/açar.", en: "Locks/unlocks document scrolling." }}
+        >
+            <Ds.block
+                title={{ tr: "Temel kullanım", en: "Basic Usage" }}
+                code={`import { scrollLock } from "${SYS.basePath}";
+
+                        scrollLock(true);
+
+                        scrollLock(false);`}
+                example={
+                    <Flex.column gap={10} padding={10}>
+                        <Flex gap={10}>
+                            <Button
+                                label="Lock scroll"
+                                onClick={() => {
+                                    scrollLock(true);
+                                    set((s) => {
+                                        s.status = "locked";
+                                    });
+                                }}
+                            />
+                            <Button
+                                label="Unlock scroll"
+                                onClick={() => {
+                                    scrollLock(false);
+                                    set((s) => {
+                                        s.status = "unlocked";
+                                    });
+                                }}
+                            />
+                        </Flex>
+                        <Space size="s" />
+                        <Typo.span balance>Last action: {status}</Typo.span>
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="scrollLock(boo);"
+                returns="void."
+                props={{
+                    boo: {
+                        description: { tr: "Scroll'u kilitlemek için true, geri açmak için false.", en: "True to lock scrolling, false to restore it." },
+                        type: "boolean",
+                        required: true,
+                    },
+                }}
+            />
+            <Space size={2000} />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/scrollLock/index.js

@@ -0,0 +1,33 @@
+import { baseStore } from "../baseStore";
+
+let prevOverflowY;
+let prevOverflow;
+
+export const scrollLock = (boo) => {
+    baseStore?.globalData?.set?.({ isScrollLocked: !!boo });
+
+    if (typeof document === "undefined") return;
+
+    const body = document.body;
+    if (!body) return;
+
+    if (boo) {
+        if (prevOverflowY === undefined && prevOverflow === undefined) {
+            prevOverflowY = body.style.overflowY;
+            prevOverflow = body.style.overflow;
+        }
+
+        body.style.overflowY = "hidden";
+        body.style.overflow = "hidden";
+        return;
+    }
+
+    if (prevOverflowY !== undefined) body.style.overflowY = prevOverflowY;
+    else body.style.overflowY = "";
+
+    if (prevOverflow !== undefined) body.style.overflow = prevOverflow;
+    else body.style.overflow = "";
+
+    prevOverflowY = undefined;
+    prevOverflow = undefined;
+};