@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/notifier/_dS.jsx

@@ -0,0 +1,219 @@
+import { useCallback, useState } from "react";
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { notifier } from ".";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const QueuePeek = () => {
+    const [count] = baseStore.useGlobal((s) => [s._notifier?.count ?? 0]);
+    return <Typo.code codeFormat={false}>Current count: {count}</Typo.code>;
+};
+
+const X = () => {
+    const [lastId, setLastId] = useState(null);
+    const [stickyId, setStickyId] = useState(null);
+
+    const captureAdd = useCallback((fn) => {
+        const id = fn();
+        if (id) setLastId(id);
+    }, []);
+
+    return (
+        <Ds.page
+            title="notifier"
+            releasedOn="1.0.0"
+            description={
+                <>
+                    <Typo.p>
+                        Add to global notification queue / remove single entry / clear all.
+                        NotifierListener must be rendered at the root of the app.
+                    </Typo.p>
+                    <Typo.p>
+                        Notifications and Notifier Settings are stored in GlobalData. And
+                        notifierSettings are located at PROJECT_SETTINGS.notifierSettings.
+                    </Typo.p>
+                    <Typo.code>
+                        {`notifierSettings: {
+                            killAfter: 5, // secs, default is 5
+                            disableNotifier: true, // default is false
+                            disableAutoKill: true, // default is false
+                            closingDelay: 0.5, // secs, default is 0.5
+                            Box: MyNotifierBox, // styled component, optional
+                        },`}
+                    </Typo.code>
+                    <QueuePeek />
+                </>
+            }
+        >
+            <Ds.block
+                title="Basic usage"
+                code={`import { notifier } from "${SYS.basePath}";
+
+                       const id = notifier.add("nofitication text");
+                       notifier.remove(id);
+                       notifier.clear();`}
+                example={
+                    <Flex gap={8} wrap full>
+                        <Button.plain
+                            label="add"
+                            skipClickCooldown
+                            skipOnClickHold
+                            onClick={() =>
+                                captureAdd(() =>
+                                    notifier.add("Added with autoKill.", { killAfter: 3 }),
+                                )
+                            }
+                        />
+                        <Button.plain
+                            label="remove (last id)"
+                            disabled={!lastId}
+                            onClick={() => {
+                                if (lastId) notifier.remove(lastId);
+                            }}
+                        />
+                        <Button.plain label="clear()" onClick={() => notifier.clear()} />
+                    </Flex>
+                }
+            />
+            <Ds.block
+                title="disableAutoKill + remove"
+                code={`import { notifier } from "${SYS.basePath}";
+
+                       const id = notifier.add("disableAutoKill: true", { disableAutoKill: true });
+                       notifier.remove(id);`}
+                description="The notification will stay until closed; use the close icon on the notification or notifier.remove(id) to dismiss it."
+                example={
+                    <Flex gap={10} wrap full>
+                        <Button.plain
+                            label="add (disableAutoKill)"
+                            onClick={() => {
+                                const id = notifier.add("disableAutoKill: true", {
+                                    disableAutoKill: true,
+                                });
+                                if (id) setStickyId(id);
+                            }}
+                        />
+                        <Button.plain
+                            label="remove (sticky id)"
+                            disabled={!stickyId}
+                            onClick={() => {
+                                if (stickyId) notifier.remove(stickyId);
+                            }}
+                        />
+                    </Flex>
+                }
+            />
+            <Ds.block
+                title="bgColor (success / error)"
+                code={`notifier.add("Tamam", { bgColor: "success", killAfter: 5 });
+                       notifier.add("Hata", { bgColor: "error", killAfter: 5 });`}
+                description="Use 'bgColor' (theme key or color) for the visible color;"
+                example={
+                    <Flex gap={8} wrap>
+                        <Button.plain
+                            label="success"
+                            onClick={() =>
+                                notifier.add("bgColor:'success'", {
+                                    bgColor: "success",
+                                })
+                            }
+                        />
+                        <Button.plain
+                            label="error"
+                            onClick={() =>
+                                notifier.add("bgColor: 'error'", {
+                                    bgColor: "error",
+                                })
+                            }
+                        />
+                    </Flex>
+                }
+            />
+            <Ds.block
+                title="Multiple calls"
+                code={`import { NotifierListener } from "${SYS.basePath}/helpers/NotifierListener";
+
+                        <NotifierListener />`}
+                example={
+                    <Flex gap={8} wrap>
+                        <Button.plain
+                            label="x40"
+                            onClick={() =>
+                                Array.from({ length: 40 }).forEach((_, index) =>
+                                    notifier.add(`item: ${index + 1}`, { disableAutoKill: true }),
+                                )
+                            }
+                        />
+                    </Flex>
+                }
+            />
+            <Ds.api
+                title="add"
+                disableLastBlock
+                args="const queueId = notifier.add(notification, { bgColor, closingDelay, disableAutoKill, killAfter });"
+                props={{
+                    notification: {
+                        description: "Notification.",
+                        type: "string | object",
+                        required: true,
+                    },
+                    killAfter: {
+                        description: "Kill after (seconds).",
+                        type: "number",
+                    },
+                    closingDelay: {
+                        description: "Closing delay (seconds).",
+                        type: "number",
+                    },
+                    disableAutoKill: {
+                        description: "Disable auto kill.",
+                        type: "boolean",
+                    },
+                    bgColor: {
+                        description: "Background color.",
+                        type: "string",
+                    },
+                }}
+                returnProps={{
+                    queueId: {
+                        description: "Queue id of the added notification.",
+                        type: "number | null",
+                    },
+                }}
+            />
+            <Ds.api
+                title="remove"
+                disableLastBlock
+                args="const removed = notifier.remove(queueId);"
+                props={{
+                    queueId: {
+                        description: "Queue id to remove.",
+                        type: "number",
+                        required: true,
+                    },
+                }}
+                returnProps={{
+                    removed: {
+                        description: "True when a notification was removed.",
+                        type: "boolean",
+                    },
+                }}
+            />
+            <Ds.api
+                title="clear"
+                args="const cleared = notifier.clear();"
+                returnProps={{
+                    cleared: {
+                        description: "True when the queue was cleared.",
+                        type: "boolean",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/notifier/index.js

@@ -0,0 +1,16 @@
+import { baseStore } from "../baseStore";
+
+export const notifier = {
+    add: (notification, options) => {
+        const { _notifier } = baseStore.globalData.get();
+        return _notifier.add(notification, options);
+    },
+    remove: (queueId) => {
+        const { _notifier } = baseStore.globalData.get();
+        return _notifier.remove(queueId);
+    },
+    clear: () => {
+        const { _notifier } = baseStore.globalData.get();
+        return _notifier.clear();
+    },
+};

package/src/libs/pushAsSorted/_dS.jsx

@@ -0,0 +1,169 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { pushAsSorted } from ".";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+
+const X = () => {
+    const { outputButtonProps, Output } = Ds.useOutputViewer();
+
+    return (
+        <Ds.page
+            title="pushAsSorted()"
+            releasedOn="1.0.0"
+            description="Pushes an element into a copy of the array, sorts it, and returns the sorted result with neighbor info."
+        >
+            <Ds.block
+                title="Basic usage"
+                code={`import { pushAsSorted } from "${SYS.basePath}";
+
+                        const { result, pushedIndex, lowerValue, higherValue } = pushAsSorted([5, 1, 3], 4);`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10} wrap>
+                            <Button.plain
+                                label="pushAsSorted([5, 1, 3], 4)"
+                                {...outputButtonProps({
+                                    path: "basic",
+                                    activeLabel: "basic",
+                                    fn: () => pushAsSorted([5, 1, 3], 4),
+                                })}
+                            />
+                        </Flex>
+                        <Output path="basic" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="unique"
+                description="Does not push el when it already exists in arr. Existing duplicates in arr are left unchanged."
+                code="pushAsSorted([1, 2, 2, 3], 2, { unique: true });"
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label="unique: skip existing 2"
+                            {...outputButtonProps({
+                                path: "unique",
+                                activeLabel: "unique",
+                                fn: () => pushAsSorted([1, 2, 2, 3], 2, { unique: true }),
+                            })}
+                        />
+                        <Output path="unique" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="removeDuplicates"
+                description="Removes duplicate values from the sorted result."
+                code="pushAsSorted([1, 2, 2, 3], 2, { removeDuplicates: true });"
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label="removeDuplicates"
+                            {...outputButtonProps({
+                                path: "removeDuplicates",
+                                activeLabel: "removeDuplicates",
+                                fn: () => pushAsSorted([1, 2, 2, 3], 2, { removeDuplicates: true }),
+                            })}
+                        />
+                        <Output path="removeDuplicates" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="direction"
+                description='Descending via "desc". Also "descending", "Z-A", "z-a" are aliases.'
+                code={`pushAsSorted([5, 1, 3], 4, { direction: "Z-A" });`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10} wrap>
+                            <Button.plain
+                                label='direction: "desc"'
+                                {...outputButtonProps({
+                                    path: "directionDesc",
+                                    activeLabel: "Z-A",
+                                    fn: () => pushAsSorted([5, 1, 3], 4, { direction: "desc" }),
+                                })}
+                            />
+                        </Flex>
+                        <Output path="directionDesc" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="String sorting"
+                description='Descending via "desc". Also "descending", "Z-A", "z-a" are aliases.'
+                code={`pushAsSorted([5, 1, 3], 4, { direction: "Z-A" });`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10} wrap>
+                            <Button.plain
+                                label="string sorting"
+                                {...outputButtonProps({
+                                    path: "ex1",
+                                    activeLabel: "Z-A",
+                                    fn: () => pushAsSorted(["c", "z", "a"], "b"),
+                                })}
+                            />
+                        </Flex>
+                        <Output path="ex1" />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const { result, pushedIndex, lowerValue, higherValue } = pushAsSorted(arr, el, { direction, removeDuplicates, unique });"
+                props={{
+                    arr: {
+                        description: "Input array.",
+                        type: "any[]",
+                        required: true,
+                    },
+                    el: {
+                        description: "Element to push.",
+                        type: "any",
+                        required: true,
+                    },
+                    unique: {
+                        description:
+                            "When true, does not push el if it already exists in arr. Does not dedupe arr itself.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    removeDuplicates: {
+                        description: "When true, removes duplicate values from the sorted result.",
+                        type: "boolean",
+                        defaultValue: "false",
+                    },
+                    direction: {
+                        description:
+                            'Sort direction. Desc: desc, descending, "Z-A". Asc: asc, ascending, "A-Z", "a-z", "z-a".',
+                        type: "string",
+                        defaultValue: "asc",
+                    },
+                }}
+                returnProps={{
+                    result: {
+                        description: "Sorted array after push and optional dedupe.",
+                        type: "any[]",
+                    },
+                    pushedIndex: {
+                        description: "Index of el in result (first match if duplicates exist).",
+                        type: "number",
+                    },
+                    lowerValue: {
+                        description:
+                            "First item of result (low end when ascending, high end when descending).",
+                        type: "any",
+                    },
+                    higherValue: {
+                        description:
+                            "Last item of result (high end when ascending, low end when descending).",
+                        type: "any",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/pushAsSorted/index.js

@@ -0,0 +1,46 @@
+import { sortBy } from "../sortBy";
+
+const ASC_ALIASES = new Set(["asc", "ascending", "a-z", "z-a", "A-Z"]);
+
+const DESC_ALIASES = new Set(["desc", "descending", "Z-A"]);
+
+export const resolvePushAsSortedSortFn = (direction = "asc") => {
+    const raw = String(direction ?? "asc").trim();
+    const lower = raw.toLowerCase();
+
+    if (DESC_ALIASES.has(raw) || lower === "desc" || lower === "descending") {
+        return sortBy.desc;
+    }
+
+    if (ASC_ALIASES.has(raw) || lower === "asc" || lower === "ascending") {
+        return sortBy.asc;
+    }
+
+    return sortBy.asc;
+};
+
+export const pushAsSorted = (arr = [], el = 0, settings = {}) => {
+    const { unique = false, removeDuplicates = false, direction = "asc" } = settings;
+
+    const sortFn = resolvePushAsSortedSortFn(direction);
+    const shouldPush = !unique || !arr.includes(el);
+
+    let working = [...arr];
+    if (shouldPush) working.push(el);
+
+    const sorted = working.sort(sortFn);
+    const result = removeDuplicates ? [...new Set(sorted)] : sorted;
+
+    const pushedIndex = result.indexOf(el);
+    const lastIndex = result.length - 1;
+
+    const lowerValue = lastIndex >= 0 ? result[0] : undefined;
+    const higherValue = lastIndex >= 0 ? result[lastIndex] : undefined;
+
+    return {
+        result,
+        pushedIndex,
+        lowerValue,
+        higherValue,
+    };
+};