@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/sleep/_dS.jsx

@@ -0,0 +1,54 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { sleep } from ".";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const X = () => {
+    const { label, set } = baseStore.useLocal({ label: "Ready" });
+
+    return (
+        <Ds.page title="sleep()" releasedOn="1.0.0" description={{ tr: "Promise tabanlı gecikme yardımcısı.", en: "Promise-based delay helper." }}>
+            <Ds.block
+                title={{ tr: "Temel kullanım", en: "Basic Usage" }}
+                code={`import { sleep } from "${SYS.basePath}";
+
+                        await sleep(200);`}
+                example={
+                    <Flex.column gap={10} padding={10}>
+                        <Button
+                            label={label}
+                            onClick={async () => {
+                                set((s) => {
+                                    s.label = "Waiting 2000ms...";
+                                });
+                                await sleep(2000);
+                                set((s) => {
+                                    s.label = "Done";
+                                });
+                            }}
+                        />
+                        <Typo.span balance>
+                            State is driven by baseStore for demo visibility.
+                        </Typo.span>
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="await sleep(ms);"
+                returns="void"
+                props={{
+                    ms: {
+                        description: { tr: "Milisaniye cinsinden gecikme süresi.", en: "Delay duration in milliseconds." },
+                        type: "number",
+                        required: true,
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/sleep/index.js

@@ -0,0 +1,2 @@
+
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

package/src/libs/sortBy/_dS.jsx

@@ -0,0 +1,96 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { sortBy } from ".";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+
+const X = () => {
+    const { outputButtonProps, Output } = Ds.useOutputViewer();
+
+    return (
+        <Ds.page
+            title="sortBy"
+            releasedOn="1.0.0"
+            description="Natural asc/desc comparator helpers."
+        >
+            <Ds.block
+                title="Natural sorting"
+                code={`import { sortBy } from "${SYS.basePath}";
+
+                        ["10px", "2px", "1px"].sort(sortBy.asc);
+
+                        ["a", "c", "b"].sort(sortBy.desc);`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10} wrap>
+                            <Button.plain
+                                label='["10px","2px","1px"].sort(sortBy.asc)'
+                                {...outputButtonProps({
+                                    path: "basic",
+                                    activeLabel: "but1",
+                                    fn: () => ["10px", "2px", "1px"].sort(sortBy.asc),
+                                })}
+                            />
+                            <Button.plain
+                                label='["a","c","b"].sort(sortBy.desc)'
+                                {...outputButtonProps({
+                                    path: "basic",
+                                    activeLabel: "but2",
+                                    fn: () => ["a", "c", "b"].sort(sortBy.desc),
+                                })}
+                            />
+                        </Flex>
+                        <Output path="basic" />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                title="asc"
+                disableLastBlock
+                args="const cmp = sortBy.asc(a, b);"
+                props={{
+                    a: {
+                        description: "First value.",
+                        type: "any",
+                        required: true,
+                    },
+                    b: {
+                        description: "Second value.",
+                        type: "any",
+                        required: true,
+                    },
+                }}
+                returnProps={{
+                    cmp: {
+                        description: "Comparator result for Array.sort (−1, 0, or 1 style).",
+                        type: "number",
+                    },
+                }}
+            />
+            <Ds.api
+                title="desc"
+                args="const cmp = sortBy.desc(a, b);"
+                props={{
+                    a: {
+                        description: "First value.",
+                        type: "any",
+                        required: true,
+                    },
+                    b: {
+                        description: "Second value.",
+                        type: "any",
+                        required: true,
+                    },
+                }}
+                returnProps={{
+                    cmp: {
+                        description: "Comparator result for Array.sort (−1, 0, or 1 style).",
+                        type: "number",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/sortBy/index.js

@@ -0,0 +1,38 @@
+
+
+export const sortBy = {
+    asc: (a, b) => naturalCompare(a, b),
+    desc: (a, b) => naturalCompare(b, a),
+};
+
+const naturalCompare = (a, b) => {
+    if (a === b) return 0;
+    const sa = String(a);
+    const sb = String(b);
+    const rx = /(\d+|\D+)/g;
+    const partsA = sa.match(rx) || [];
+    const partsB = sb.match(rx) || [];
+    const len = Math.max(partsA.length, partsB.length);
+    for (let i = 0; i < len; i++) {
+        const pa = partsA[i];
+        const pb = partsB[i];
+        if (pa === undefined) return -1;
+        if (pb === undefined) return 1;
+        const na = Number(pa);
+        const nb = Number(pb);
+        const isNumA = !Number.isNaN(na);
+        const isNumB = !Number.isNaN(nb);
+        if (isNumA && isNumB) {
+            if (na !== nb) return na - nb;
+            continue;
+        }
+        if (!isNumA && !isNumB) {
+            const cmp = pa.localeCompare(pb, undefined, { sensitivity: "base" });
+            if (cmp !== 0) return cmp;
+            continue;
+        }
+        return isNumA ? -1 : 1;
+    }
+
+    return 0;
+};

package/src/libs/stringCaseConverter/_dS.jsx

@@ -0,0 +1,120 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { stringCaseConverter } from ".";
+import { baseStore } from "../baseStore";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { Dropdown } from "../Dropdown";
+
+const CASE_SAMPLES = {
+    camel: "helloWorld",
+    pascal: "HelloWorld",
+    kebab: "hello-world",
+    snake: "hello_world",
+    constant: "HELLO_WORLD",
+    dot: "hello.world",
+    path: "hello/world",
+    lower: "hello world",
+    sentence: "Hello world",
+    title: "Hello World",
+    spaced: "Hello World",
+};
+
+const sampleOptions = Object.entries(CASE_SAMPLES).map(([value, sample]) => ({
+    label: `${value} — ${sample}`,
+    value,
+}));
+
+const outputTypeOptions = Object.keys(CASE_SAMPLES).map((value) => ({
+    label: value,
+    value,
+}));
+
+const CaseConverterDemo = () => {
+    const { sampleKey, outputType, set } = baseStore.useLocal({
+        sampleKey: "camel",
+        outputType: "kebab",
+    });
+
+    const input = CASE_SAMPLES[sampleKey] ?? "";
+    const output = stringCaseConverter(input, outputType);
+
+    return (
+        <Flex.column gap={12} padding={10} full>
+            <Flex gap={16} wrap alignItems="center">
+                <Flex gap={8} alignItems="center">
+                    <Typo.span>örnek</Typo.span>
+                    <Dropdown
+                        options={sampleOptions}
+                        value={sampleKey}
+                        sortBy="none"
+                        onChange={(value) => {
+                            set((s) => {
+                                s.sampleKey = value;
+                            });
+                        }}
+                    />
+                </Flex>
+                <Flex gap={8} alignItems="center">
+                    <Typo.span>outputType</Typo.span>
+                    <Dropdown
+                        options={outputTypeOptions}
+                        value={outputType}
+                        sortBy="none"
+                        onChange={(value) => {
+                            set((s) => {
+                                s.outputType = value;
+                            });
+                        }}
+                    />
+                </Flex>
+            </Flex>
+            <Flex.column gap={6}>
+                <Typo.span weight={600}>Input</Typo.span>
+                <Typo.code>{input}</Typo.code>
+                <Typo.span weight={600}>Output</Typo.span>
+                <Typo.code>{output}</Typo.code>
+            </Flex.column>
+        </Flex.column>
+    );
+};
+
+const X = () => (
+    <Ds.page
+        title="stringCaseConverter()"
+        releasedOn="1.0.0"
+        description={{ tr: "String'leri farklı case formatları arasında dönüştürür. Girdi case'i otomatik algılanır.", en: "Converts strings across case formats. Input case is auto-detected." }}
+    >
+        <Ds.block
+            title={{ tr: "Temel Kullanım", en: "Basic Usage" }}
+            description={{ tr: "Teknik string formatlarını dönüştürmek için kullanılır. Girdi tipi otomatik algılanır.", en: "Used to convert technical string formats. Input type is auto-detected." }}
+            code={`import { stringCaseConverter } from "${SYS.basePath}";
+
+                    stringCaseConverter("helloWorld", "kebab");`}
+            example={<CaseConverterDemo />}
+        />
+        <Ds.api
+            args='const converted = stringCaseConverter(string, outputType);'
+            props={{
+                string: {
+                    description: { tr: "Girdi metni.", en: "Input text." },
+                    type: "string",
+                    required: true,
+                },
+                outputType: {
+                    description: { tr: "Hedef format (camel, pascal, kebab, snake, constant, dot, path, lower, sentence, title, spaced).", en: "Target format (camel, pascal, kebab, snake, constant, dot, path, lower, sentence, title, spaced)." },
+                    type: "string",
+                    defaultValue: '"camel"',
+                },
+            }}
+            returnProps={{
+                converted: {
+                    description: { tr: "İstenen case formatındaki girdi string'i.", en: "Input string in the requested case format." },
+                    type: "string",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/stringCaseConverter/index.js

@@ -0,0 +1,97 @@
+
+export const stringCaseConverter = (string, outputType = "camel") => {
+    if (!string || typeof string !== "string") {
+        console.log("stringCaseConverter: string is falsy", JSON.stringify(string));
+        return "";
+    }
+
+    let input;
+    if (/^[a-z][a-z0-9]*(?:[A-Z][a-z0-9]*)*$/.test(string)) input = "camel";
+    else if (/^[A-Z][a-z0-9]*(?:[A-Z][a-z0-9]*)*$/.test(string)) input = "pascal";
+    else if (/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(string)) input = "kebab";
+    else if (/^[a-z0-9]+(?:_[a-z0-9]+)*$/.test(string)) input = "snake";
+    else if (/^[A-Z0-9]+(?:_[A-Z0-9]+)*$/.test(string)) input = "constant";
+    else if (/^[a-z0-9]+(?:\.[a-z0-9]+)*$/.test(string)) input = "dot";
+    else if (/^[a-z0-9]+(?:\/[a-z0-9]+)*$/.test(string)) input = "path";
+    else if (/^[a-z0-9\s]+$/.test(string)) input = "lower";
+    else if (/^[A-Z][a-z0-9\s]*$/.test(string)) input = "sentence";
+    else if (/^(?:[A-Z][a-z0-9]*\s*)+$/.test(string)) input = "title";
+    else if (/^[A-Z][a-z0-9]*(?:\s[A-Z][a-z0-9]*)*$/.test(string)) input = "spaced";
+    else input = "sentence";
+
+    let sentenceCase = string;
+    switch (input) {
+        case "camel":
+        case "pascal":
+            sentenceCase = string.replace(/([A-Z])/g, " $1").trim();
+            break;
+        case "kebab":
+        case "snake":
+        case "constant":
+        case "dot":
+        case "path":
+            sentenceCase = string.replace(/[-_./]/g, " ");
+            break;
+        case "lower":
+            sentenceCase = string.charAt(0).toUpperCase() + string.slice(1);
+            break;
+        case "title":
+        case "spaced":
+            sentenceCase = string.replace(/([A-Z])/g, " $1").trim();
+            break;
+    }
+
+    const words = sentenceCase.trim().split(/\s+/);
+
+    switch (outputType) {
+        case "camel":
+            return words
+                .map((word, index) =>
+                    index === 0
+                        ? word.toLowerCase()
+                        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),
+                )
+                .join("");
+
+        case "pascal":
+            return words
+                .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+                .join("");
+
+        case "kebab":
+            return words.map((word) => word.toLowerCase()).join("-");
+
+        case "snake":
+            return words.map((word) => word.toLowerCase()).join("_");
+
+        case "constant":
+            return words.map((word) => word.toUpperCase()).join("_");
+
+        case "dot":
+            return words.map((word) => word.toLowerCase()).join(".");
+
+        case "path":
+            return words.map((word) => word.toLowerCase()).join("/");
+
+        case "lower":
+            return words.join(" ").toLowerCase();
+
+        case "sentence":
+            return words
+                .map((word, index) =>
+                    index === 0
+                        ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+                        : word.toLowerCase(),
+                )
+                .join(" ");
+
+        case "title":
+        case "spaced":
+            return words
+                .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+                .join(" ");
+
+        default:
+            return "undefined outputType > " + outputType;
+    }
+};

package/src/libs/templateLiteralTo/_dS.jsx

@@ -0,0 +1,82 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import templateLiteralTo from ".";
+import { Typo } from "../Typo";
+import { Flex } from "../Flex";
+
+const sample = `        First paragraph stays readable in source
+        even with leading tabs in the template literal.
+
+        Second paragraph is separated by a blank line
+        or by dedented single newlines.`;
+
+const X = () => (
+    <Ds.page
+        title="templateLiteralTo()"
+        releasedOn="1.0.0"
+        description={{ tr: templateLiteralTo.p(`Template literal'lardan ortak girintiyi temizler; böylece
+            çıktıyı etkilemeden string'leri kaynakta hizalayabilirsiniz.
+
+            Code tarzı metin için .pre, sayfa açıklamaları için .p, inline yığınlar için .span kullanın.`), en: templateLiteralTo.p(`Strips shared indentation from template literals so you can
+            align strings in source without affecting output.
+
+            Use .pre for code-style text, .p for page descriptions, and .span for inline stacks.`) }}
+    >
+        <Ds.block
+            title=".pre"
+            description={{ tr: "Girintisi temizlenmiş string döndürür (CodeViewer / Typo.code ile aynı mantık).", en: "Returns a dedented string (same logic as CodeViewer / Typo.code)." }}
+            code={`import { templateLiteralTo } from "${SYS.basePath}";
+
+                    const code = templateLiteralTo.pre(\`
+                        const x = 1;
+                        const y = 2;
+                    \`);`}
+            example={
+                <Typo.pre whiteSpace="pre-wrap">
+                    {templateLiteralTo.pre(`
+                        const x = 1;
+                        const y = 2;
+                    `)}
+                </Typo.pre>
+            }
+        />
+
+        <Ds.block
+            title=".p"
+            description={{ tr: "Girintiyi temizler ve her paragrafı Typo.p node'larıyla sarar. Ds.page ve Ds.block açıklamalarında kullanılır.", en: "Dedents and wraps each paragraph in Typo.p nodes. Used by Ds.page and Ds.block descriptions." }}
+            code={`import { templateLiteralTo } from "${SYS.basePath}";
+
+                    <Typo as="div">{templateLiteralTo.p(description)}</Typo>`}
+            example={<Typo as="div">{templateLiteralTo.p(sample)}</Typo>}
+        />
+
+        <Ds.block
+            title=".span"
+            description={{ tr: "Girintiyi temizler ve her paragrafı dikey Flex yığını içinde Typo.span olarak render eder.", en: "Dedents and renders each paragraph as Typo.span inside a vertical Flex stack." }}
+            code={`import { templateLiteralTo } from "${SYS.basePath}";
+
+                    {templateLiteralTo.span(sample)}`}
+            example={templateLiteralTo.span(sample)}
+        />
+
+        <Ds.api
+            args="const result = templateLiteralTo(text, mode);"
+            props={{
+                text: { description: { tr: "Template literal string'i (veya herhangi bir string).", en: "Template literal string (or any string)." }, type: "string" },
+                mode: {
+                    description: { tr: 'İsteğe bağlı kısaltma: "pre" | "p" | "span".', en: 'Optional shorthand: "pre" | "p" | "span".' },
+                    type: "string",
+                    defaultValue: '"pre"',
+                },
+            }}
+            returnProps={{
+                result: {
+                    description: { tr: "pre için girintisi temizlenmiş string, p / span için React node'ları.", en: 'Dedented string for "pre", or React nodes for "p" / "span".' },
+                    type: "string | ReactNode",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/templateLiteralTo/dedent.js

@@ -0,0 +1,46 @@
+
+export const dedent = (text = "") => {
+    const lines = String(text).replace(/\r\n/g, "\n").split("\n");
+
+    while (lines.length && lines[0].trim() === "") lines.shift();
+    while (lines.length && lines[lines.length - 1].trim() === "") lines.pop();
+
+    const nonEmpty = lines
+        .map((line, index) => ({ line, index }))
+        .filter(({ line }) => line.trim() !== "")
+        .map(({ line, index }) => ({
+            index,
+            indent: line.match(/^(\s*)/)?.[1].length ?? 0,
+        }));
+
+    if (nonEmpty.length === 0) return "";
+
+    const [firstNonEmpty] = nonEmpty;
+    const remaining = nonEmpty.slice(1);
+
+    const baseIndent =
+        firstNonEmpty?.indent === 0 && remaining.length > 0
+            ? Math.min(...remaining.map((item) => item.indent))
+            : Math.min(...nonEmpty.map((item) => item.indent));
+
+    return lines
+        .map((line) => {
+            const indent = line.match(/^(\s*)/)?.[1].length ?? 0;
+            const trimCount = Math.min(baseIndent, indent);
+            return line.slice(trimCount);
+        })
+        .join("\n");
+};
+
+export const splitParagraphs = (text = "") => {
+    const body = dedent(text).trim();
+    if (!body) return [];
+
+    const byBlank = body.split(/\n\s*\n+/).map((p) => p.trim()).filter(Boolean);
+    if (byBlank.length > 1) return byBlank;
+
+    return body
+        .split("\n")
+        .map((p) => p.trim())
+        .filter(Boolean);
+};

package/src/libs/templateLiteralTo/index.js

@@ -0,0 +1,49 @@
+import { createElement } from "react";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { dedent, splitParagraphs } from "./dedent";
+
+const toParagraphNodes = (text, as = "p") => {
+    const paragraphs = splitParagraphs(text);
+
+    if (paragraphs.length === 0) return null;
+
+    if (as === "span") {
+        return createElement(
+            Flex.column,
+            { gap: 4 },
+            ...paragraphs.map((para, index) => createElement(Typo.span, { key: index }, para)),
+        );
+    }
+
+    if (paragraphs.length === 1) {
+        return createElement(Typo.p, { key: 0 }, paragraphs[0]);
+    }
+
+    return paragraphs.map((para, index) =>
+        createElement(
+            Typo.p,
+            {
+                key: index,
+                margin: index < paragraphs.length - 1 ? "0 0 1em 0" : 0,
+            },
+            para,
+        ),
+    );
+};
+
+const templateLiteralTo = (text, mode = "pre") => {
+    const key = String(mode);
+    if (key === "p") return templateLiteralTo.p(text);
+    if (key === "span") return templateLiteralTo.span(text);
+    return templateLiteralTo.pre(text);
+};
+
+templateLiteralTo.pre = (text) => dedent(text);
+
+templateLiteralTo.p = (text) => toParagraphNodes(text, "p");
+
+templateLiteralTo.span = (text) => toParagraphNodes(text, "span");
+
+export { dedent, splitParagraphs, templateLiteralTo };
+export default templateLiteralTo;

package/src/libs/typeOf/_dS.jsx

@@ -0,0 +1,70 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { typeOf } from ".";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+
+const X = () => {
+    const { outputButtonProps, Output } = Ds.useOutputViewer();
+
+    return (
+        <Ds.page
+            title="typeOf()"
+            releasedOn="1.0.0"
+            description={{ tr: "Genişletilmiş tip algılama yardımcısıdır. Birden fazla argümanı destekler. number, string, boolean, undefined, function, object, null, array, date, regexp, map, set, error ve promise tiplerini algılar.", en: "Extended type detector helper. Supports multiple arguments. Detects number, string, boolean, undefined, function, object, null, array, date, regexp, map, set, error, and promise." }}
+        >
+            <Ds.block
+            title={{ tr: "Tekli ve çoklu girdi", en: "Single and Multi Input" }}
+                code={`import { typeOf } from "${SYS.basePath}";
+
+                        typeOf(null);
+
+                        typeOf(1, "x", []);`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10} wrap>
+                            <Button.plain
+                                label="typeOf(null)"
+                                {...outputButtonProps({
+                                    path: "basic",
+                                    activeLabel: "but1",
+                                    fn: () => typeOf(null),
+                                })}
+                            />
+                            <Button.plain
+                                label='typeOf(1, "x", [])'
+                                {...outputButtonProps({
+                                    path: "basic",
+                                    activeLabel: "but2",
+                                    fn: () => typeOf(1, "x", []),
+                                })}
+                            />
+                        </Flex>
+                        <Output path="basic" />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args={["const type = typeOf(arg);", "const types = typeOf(arg1, arg2, ...argN);"]}
+                props={{
+                    "...args": {
+                        description: { tr: "İncelenecek bir veya daha fazla değer.", en: "One or more values to inspect." },
+                        type: "any || any[]",
+                    },
+                }}
+                returnProps={{
+                    type: {
+                        description: { tr: "Tek argüman için algılanan tip string'i.", en: "Detected type string for a single argument." },
+                        type: "string",
+                    },
+                    types: {
+                        description: { tr: "Birden fazla argüman verildiğinde tip string'leri dizisi.", en: "Array of type strings when multiple arguments are passed." },
+                        type: "string[]",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/typeOf/index.js

@@ -0,0 +1,20 @@
+
+export const typeOf = (...args) => {
+    if (args.length === 0) return;
+
+    const detect = (arg) => {
+        if (arg === null) return "null";
+        if (Array.isArray(arg)) return "array";
+        if (arg instanceof Date) return "date";
+        if (arg instanceof RegExp) return "regexp";
+        if (arg instanceof Map) return "map";
+        if (arg instanceof Set) return "set";
+        if (arg instanceof Error) return "error";
+        if (arg instanceof Promise) return "promise";
+
+        return typeof arg;
+    };
+
+    const types = args.map(detect);
+    return types.length > 1 ? types : types[0];
+};