@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/byPath/index.js

@@ -0,0 +1,154 @@
+import { isArrayOrPlainObject } from "../isArrayOrPlainObject";
+
+export const byPath = (() => {
+    const isIndex = (seg) => /^\d+$/.test(seg);
+    const cloneContainer = (v) => (Array.isArray(v) ? v.slice() : { ...v });
+    const makeContainerForNext = (nextSeg) => (isIndex(nextSeg) ? [] : {});
+    const splitPath = (path) => (typeof path === "string" && path.length ? path.split(".") : []);
+    const readFrom = (container, k) =>
+        Array.isArray(container) && isIndex(k) ? container[Number(k)] : container?.[k];
+    const writeTo = (container, k, v) => {
+        if (Array.isArray(container) && isIndex(k)) container[Number(k)] = v;
+        else container[k] = v;
+    };
+    const deleteFrom = (container, k) => {
+        if (Array.isArray(container) && isIndex(k)) {
+            container[Number(k)] = undefined;
+        } else {
+            delete container[k];
+        }
+    };
+
+    return {
+        get(obj, path) {
+            const parts = splitPath(path);
+            if (parts.length === 0) return undefined;
+
+            let cur = obj;
+            for (let i = 0; i < parts.length; i++) {
+                if (cur == null) return undefined;
+                cur = readFrom(cur, parts[i]);
+            }
+            return cur;
+        },
+        set(state, path, newValue, enableDirectUpdate = false) {
+            const parts = splitPath(path);
+            if (parts.length === 0) return state;
+
+            if (enableDirectUpdate) {
+                if (!isArrayOrPlainObject(state)) {
+                    return byPath.set(state, path, newValue, false);
+                }
+
+                let cur = state;
+
+                for (let i = 0; i < parts.length; i++) {
+                    const key = parts[i];
+                    const last = i === parts.length - 1;
+
+                    if (last) {
+                        writeTo(cur, key, newValue);
+                        break;
+                    }
+
+                    const nextSeg = parts[i + 1];
+                    const child = readFrom(cur, key);
+
+                    if (!isArrayOrPlainObject(child)) {
+                        writeTo(cur, key, makeContainerForNext(nextSeg));
+                    }
+
+                    cur = readFrom(cur, key);
+                }
+
+                return state;
+            }
+
+            const rootIsIndex = isIndex(parts[0]);
+            const baseRoot = isArrayOrPlainObject(state) ? state : rootIsIndex ? [] : {};
+
+            const rootCopy = cloneContainer(baseRoot);
+            let curCopy = rootCopy;
+            let curOrig = baseRoot;
+
+            for (let i = 0; i < parts.length; i++) {
+                const key = parts[i];
+                const last = i === parts.length - 1;
+
+                if (last) {
+                    writeTo(curCopy, key, newValue);
+                    break;
+                }
+
+                const nextSeg = parts[i + 1];
+                const origChild = isArrayOrPlainObject(curOrig) ? readFrom(curOrig, key) : undefined;
+
+                const nextContainer = isArrayOrPlainObject(origChild)
+                    ? origChild
+                    : makeContainerForNext(nextSeg);
+
+                const nextCopy = cloneContainer(nextContainer);
+                writeTo(curCopy, key, nextCopy);
+
+                curOrig = nextContainer;
+                curCopy = nextCopy;
+            }
+
+            return  (rootCopy);
+        },
+        delete(state, path, enableDirectUpdate = false) {
+            const parts = splitPath(path);
+            if (parts.length === 0) return state;
+
+            if (enableDirectUpdate) {
+                if (!isArrayOrPlainObject(state)) return state;
+
+                let cur = state;
+                for (let i = 0; i < parts.length - 1; i++) {
+                    cur = readFrom(cur, parts[i]);
+                    if (!isArrayOrPlainObject(cur)) return state;
+                }
+
+                deleteFrom(cur, parts[parts.length - 1]);
+                return state;
+            }
+
+            if (!isArrayOrPlainObject(state)) return state;
+
+            const stack = [];
+            let curOrig = state;
+
+            for (let i = 0; i < parts.length - 1; i++) {
+                stack.push({ node: curOrig, key: parts[i] });
+                curOrig = readFrom(curOrig, parts[i]);
+                if (!isArrayOrPlainObject(curOrig)) return state;
+            }
+
+            const lastKey = parts[parts.length - 1];
+
+            const bottomCopy = cloneContainer(curOrig);
+            deleteFrom(bottomCopy, lastKey);
+
+            let childCopy = bottomCopy;
+
+            for (let i = stack.length - 1; i >= 0; i--) {
+                const { node, key } = stack[i];
+                const parentCopy = cloneContainer(node);
+                writeTo(parentCopy, key, childCopy);
+                childCopy = parentCopy;
+            }
+
+            return  (childCopy);
+        },
+        mapping(props, mappingObj) {
+            const out = {};
+            if (!mappingObj || typeof mappingObj !== "object") return out;
+
+            for (const key in mappingObj) {
+                if (!Object.prototype.hasOwnProperty.call(mappingObj, key)) continue;
+                out[key] = this.get(props, mappingObj[key]);
+            }
+            return out;
+        },
+    };
+})();

package/src/libs/cleanFalsyValues/_dS.jsx

@@ -0,0 +1,187 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { formatJsonForDisplay } from "../DesignSystem/formatJsonForDisplay";
+import { cleanFalsyValues, FALSY_TYPES } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { Button } from "../Button";
+
+const stringifyForPreview = (value) => formatJsonForDisplay(value);
+
+const testSample = {
+    a: 1,
+    b: undefined,
+    c: { d: 2, e: undefined, keep: null, zero: 0, empty: "", flag: false, nan: Number.NaN },
+    keep: null,
+    zero: 0,
+    empty: "",
+    nan: Number.NaN,
+    flag: false,
+};
+
+const X = () => {
+    const { outputButtonProps, Output } = Ds.useOutputViewer();
+
+    return (
+        <Ds.page
+            title="cleanFalsyValues()"
+            releasedOn="1.0.0"
+            description={{
+                tr: <>
+                    Varsayılan: deep true, tüm falsy türler kaldırılır. Hariç tutmak için except, izin listesi
+                    için only kullanın (only, except'e göre önceliklidir). Türler: {FALSY_TYPES.join(", ")}.
+                    <br />
+                    <br />
+                    Test örneği:
+                    <br />
+                    <Typo.code>sample = {stringifyForPreview(testSample)}</Typo.code>
+                </>,
+                en: <>
+                    Default: deep true, all falsy types removed. Use except to opt out, or only for
+                    an allowlist (only wins over except). Types: {FALSY_TYPES.join(", ")}.
+                    <br />
+                    <br />
+                    Test sample:
+                    <br />
+                    <Typo.code>sample = {stringifyForPreview(testSample)}</Typo.code>
+                </>,
+            }}
+        >
+            <Ds.block
+                title={{ tr: "Temel Kullanım", en: "Basic Usage" }}
+                description={{ tr: "Ayar verilmezse derin dolaşım yapılır ve tüm türler ayıklanır.", en: "No settings: deep walk, all types stripped." }}
+                code={`import { cleanFalsyValues } from "${SYS.basePath}";
+
+                       const cleaned = cleanFalsyValues(sample);`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label="cleanFalsyValues(sample)"
+                            {...outputButtonProps({
+                                path: "ex1",
+                                activeLabel: "default",
+                                fn: () => cleanFalsyValues(testSample),
+                            })}
+                        />
+                        <Output path="ex1" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="deep: false"
+                description={{
+                    tr: "Yalnızca üst seviyeyi işler; iç içe seviyeler olduğu gibi kalır.",
+                    en: "Processes the top level only; nested levels remain unchanged.",
+                }}
+                code="cleanFalsyValues(sample, { deep: false });"
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10} wrap>
+                            <Button.plain
+                                label="deep: false"
+                                {...outputButtonProps({
+                                    path: "ex2",
+                                    activeLabel: "shallow",
+                                    fn: () => cleanFalsyValues(testSample, { deep: false }),
+                                })}
+                            />
+                        </Flex>
+                        <Output path="ex2" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="except"
+                description={{
+                    tr: "Türleri hariç tutar. Örnek zeroNumber değerini korur. except dizisi zeroNumber, numberNan, emptyString, false, undefined ve null değerlerini destekler.",
+                    en: "Excludes selected types. This example keeps zeroNumber. The except array supports zeroNumber, numberNan, emptyString, false, undefined, and null.",
+                }}
+                code="cleanFalsyValues(sample, { except: ['zeroNumber'] })"
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Button.plain
+                            label='except: ["zeroNumber"]'
+                            {...outputButtonProps({
+                                path: "ex3",
+                                activeLabel: "except",
+                                fn: () => cleanFalsyValues(testSample, { except: ["zeroNumber"] }),
+                            })}
+                        />
+                        <Output path="ex3" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+                title="only"
+                description={{
+                    tr: "Yalnızca izin listesindeki türleri hedefler; only boş değilse except yok sayılır. only dizisi zeroNumber, numberNan, emptyString, false, undefined ve null değerlerini destekler.",
+                    en: "Targets only the allowlisted types; except is ignored when only is non-empty. The only array supports zeroNumber, numberNan, emptyString, false, undefined, and null.",
+                }}
+                code="cleanFalsyValues(sample, { only: ['undefined']});"
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex gap={10} wrap>
+                            <Button.plain
+                                label='only: ["undefined"]'
+                                {...outputButtonProps({
+                                    path: "ex4",
+                                    activeLabel: "undefined",
+                                    fn: () => cleanFalsyValues(testSample, { only: ["undefined"] }),
+                                })}
+                            />
+                            <Button.plain
+                                label='only: ["null", "false"]'
+                                {...outputButtonProps({
+                                    path: "ex4",
+                                    activeLabel: "multi",
+                                    fn: () =>
+                                        cleanFalsyValues(testSample, {
+                                            only: ["null", "false"],
+                                        }),
+                                })}
+                            />
+                        </Flex>
+                        <Output path="ex4" />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const cleaned = cleanFalsyValues(arg, { deep, except, only });"
+                props={{
+                    arg: {
+                        description: { tr: "Temizlenecek sade nesne veya dizi.", en: "Plain object or array to clean." },
+                        type: "object | array",
+                        required: true,
+                    },
+                    deep: {
+                        description: { tr: "İç içe nesne ve dizilere özyinelemeli olarak iner.", en: "Recurses into nested objects and arrays." },
+                        type: "boolean",
+                        defaultValue: "true",
+                    },
+                    except: {
+                        description: {
+                            tr: "Korunacak türler (opt-out). only boş değilse yok sayılır. Değerler: " + FALSY_TYPES.join(", "),
+                            en: "Types to keep (opt-out). Ignored when only is non-empty. Values: " + FALSY_TYPES.join(", "),
+                        },
+                        type: "string[]",
+                    },
+                    only: {
+                        description: {
+                            tr: "Ayıklanacak türler (izin listesi). Boş olmayan only, except'i ezer. Değerler: " + FALSY_TYPES.join(", "),
+                            en: "Types to strip (allowlist). Non-empty only overrides except. Values: " + FALSY_TYPES.join(", "),
+                        },
+                        type: "string[]",
+                    },
+                }}
+                returnProps={{
+                    cleaned: {
+                        description: { tr: "Eşleşen anahtarları veya öğeleri kaldırılmış yeni nesne ya da dizi.", en: "New object or array with matching keys or items removed." },
+                        type: "object | array",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/cleanFalsyValues/index.js

@@ -0,0 +1,86 @@
+export const FALSY_TYPES = Object.freeze([
+    "undefined",
+    "null",
+    "emptyString",
+    "false",
+    "zeroNumber",
+    "numberNan",
+]);
+
+const FALSY_TYPE_SET = new Set(FALSY_TYPES);
+
+const normalizeTypeList = (list) => {
+    if (!Array.isArray(list)) return [];
+    return list.filter((type) => FALSY_TYPE_SET.has(type));
+};
+
+const resolveStripOpts = (settings = {}) => {
+    const deep = settings.deep ?? true;
+    const only = normalizeTypeList(settings.only);
+    const except = normalizeTypeList(settings.except);
+
+    const enabled = Object.fromEntries(FALSY_TYPES.map((type) => [type, true]));
+
+    if (only.length > 0) {
+        for (const type of FALSY_TYPES) {
+            enabled[type] = only.includes(type);
+        }
+    } else {
+        const skip = new Set(except);
+        for (const type of FALSY_TYPES) {
+            enabled[type] = !skip.has(type);
+        }
+    }
+
+    return { deep, ...enabled };
+};
+
+const shouldStrip = (value, opts) => {
+    if (opts.undefined && value === undefined) return true;
+    if (opts.null && value === null) return true;
+    if (opts.emptyString && value === "") return true;
+    if (opts.zeroNumber && value === 0) return true;
+    if (opts.numberNan && typeof value === "number" && Number.isNaN(value)) return true;
+    if (opts.false && value === false) return true;
+    return false;
+};
+
+const cleanDeep = (value, opts) => {
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => cleanDeep(item, opts))
+            .filter((item) => !shouldStrip(item, opts));
+    }
+
+    if (value && typeof value === "object") {
+        return Object.fromEntries(
+            Object.entries(value)
+                .filter(([, v]) => !shouldStrip(v, opts))
+                .map(([key, v]) => [key, cleanDeep(v, opts)]),
+        );
+    }
+
+    return value;
+};
+
+const cleanShallow = (value, opts) => {
+    if (Array.isArray(value)) {
+        return value.filter((item) => !shouldStrip(item, opts));
+    }
+
+    if (value && typeof value === "object") {
+        return Object.fromEntries(
+            Object.entries(value).filter(([, v]) => !shouldStrip(v, opts)),
+        );
+    }
+
+    return value;
+};
+
+export const cleanFalsyValues = (arg, settings = {}) => {
+    if (!arg || typeof arg !== "object") return arg;
+
+    const opts = resolveStripOpts(settings);
+
+    return opts.deep ? cleanDeep(arg, opts) : cleanShallow(arg, opts);
+};

package/src/libs/colorAlpha/_dS.jsx

@@ -0,0 +1,123 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { colorAlpha } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const X = () => {
+    const { color, alpha, set } = baseStore.useLocal({
+        color: "#0077ff",
+        alpha: 50,
+    });
+    const result = colorAlpha(color, alpha);
+
+    return (
+        <Ds.page
+            title="colorAlpha()"
+            releasedOn="1.0.0"
+            description={`Applies alpha (opacity) to a color and returns a hex8 output.
+
+                You can use colorAlpha via direct import from base, or via the theme helper in styled usage (theme.colorAlpha).`}
+        >
+            <Ds.block
+                title={{ tr: "Temel Kullanım", en: "Basic usage" }}
+                code={`import { colorAlpha } from "${SYS.basePath}";
+
+                       colorAlpha("#0077ff", 50);
+                       colorAlpha("primary", 35);
+                       colorAlpha("rgba(0,119,255,0.4)", 0.8);`}
+                example={
+                    <Flex.column gap={10} full>
+                        <Flex gap={10}>
+                            <Flex.column gap={4}>
+                                <Typo.span>Color input: / {alpha} </Typo.span>
+                                <input
+                                    type="text"
+                                    value={color}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.color = e.target.value;
+                                        })
+                                    }
+                                    style={{ width: 180 }}
+                                />
+                            </Flex.column>
+                            <Flex.column gap={4}>
+                                <Typo.span>Alpha 0-1</Typo.span>
+                                <input
+                                    type="range"
+                                    min={0}
+                                    max={1}
+                                    step={0.05}
+                                    value={alpha}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.alpha = Number(e.target.value);
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                            <Flex.column gap={4}>
+                                <Typo.span>Alpha 1-100</Typo.span>
+                                <input
+                                    type="range"
+                                    min={2}
+                                    max={100}
+                                    step={1}
+                                    value={alpha}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.alpha = Number(e.target.value);
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                        </Flex>
+                        <Flex gap={8} yAlign="center">
+                            <div
+                                style={{
+                                    width: 46,
+                                    height: 24,
+                                    borderRadius: 6,
+                                    border: "1px solid #ddd",
+                                    background: color,
+                                }}
+                            />
+                            <div
+                                style={{
+                                    width: 46,
+                                    height: 24,
+                                    borderRadius: 6,
+                                    border: "1px solid #ddd",
+                                    background: result,
+                                }}
+                            />
+                        </Flex>
+                        <Ds.output directValue={{ color, alpha, result }} />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const hex8 = colorAlpha(color, alpha);"
+                props={{
+                    color: {
+                        description: { tr: "Girdi rengi (hex/rgb/rgba/CSS adı/theme token/yol).", en: "Input color (hex/rgb/rgba/css name/theme token/path)." },
+                        type: "string | object",
+                        required: true,
+                    },
+                    alpha: {
+                        description: { tr: "Opacity oranı (0..1) veya yüzde (1..100).", en: "Opacity ratio (0..1) or percent (1..100)." },
+                        type: "number",
+                        defaultValue: "50",
+                    },
+                }}
+                returnProps={{
+                    hex8: { description: { tr: "Alpha içeren Hex8 renk string'i.", en: "Hex8 color string with alpha." }, type: "string" },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/colorAlpha/index.js

@@ -0,0 +1,25 @@
+import { colorConverter } from "../colorConverter";
+import { colorFind } from "../colorFind";
+
+const resolveColorInput = (input) => {
+    if (typeof input !== "string") return input;
+    return colorFind(input, { output: "hex8" }) ?? input;
+};
+
+export const colorAlpha = (color, alpha = 50) => {
+    let alphaPerc;
+
+    if (alpha <= 1) {
+        alphaPerc = alpha * 100;
+    } else {
+        alphaPerc = alpha;
+    }
+
+    alphaPerc = Math.max(0, Math.min(100, alphaPerc));
+    const resolvedColor = resolveColorInput(color);
+
+    return colorConverter({
+        hex6: colorConverter(resolvedColor).hex6,
+        alphaPerc,
+    }).hex8;
+};

package/src/libs/colorConverter/_dS.jsx

@@ -0,0 +1,105 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { colorConverter } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const stringifyInlineArrays = (value) =>
+    JSON.stringify(value, null, 2).replace(/\[\n([\s\S]*?)\n(\s*)\]/g, (match, inner) => {
+        if (inner.includes("{") || inner.includes("[")) return match;
+        const parts = inner
+            .split("\n")
+            .map((line) => line.trim())
+            .filter(Boolean);
+        return `[ ${parts.join(" ")} ]`;
+    });
+
+const X = () => {
+    const { colorInput, set } = baseStore.useLocal({ colorInput: "#3498db" });
+    const outStr = colorConverter(colorInput);
+    const outStrText =
+        outStr && Object.keys(outStr).length > 0
+            ? stringifyInlineArrays(outStr)
+            : "Invalid color input. colorConverter returned {}.";
+
+    return (
+        <Ds.page
+            title="colorConverter()"
+            releasedOn="1.0.0"
+            description={`Converts a color into normalized outputs (hex/rgb/hsl/hsb) and luminance.
+
+                You can use colorConverter via direct import from base, or via the theme helper in styled usage (theme.colorConverter).`}
+        >
+            <Ds.block
+                title={{ tr: "String Girdisi", en: "String input" }}
+                code={`import { colorConverter } from "${SYS.basePath}";
+
+                       colorConverter("#3498db");
+                       colorConverter("rgba(0,0,0,0.5)");
+                       colorConverter("red");
+                       colorConverter("primary");
+                       colorConverter("greys.shade20");
+`}
+                example={
+                    <Flex.column gap={10} full>
+                        <Typo.span>Color string input:</Typo.span>
+                        <Flex gap={10}>
+                            <input
+                                type="text"
+                                value={colorInput}
+                                onChange={(e) =>
+                                    set((state) => {
+                                        state.colorInput = e.target.value;
+                                    })
+                                }
+                                style={{ width: 220 }}
+                            />
+                            {outStr?.hex8 && (
+                                <div
+                                    style={{ backgroundColor: outStr?.hex8, width: 29, height: 29 }}
+                                />
+                            )}
+                        </Flex>
+                        <Ds.output directValue={outStrText} />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const formats = colorConverter(colorInput);"
+                props={{
+                    colorInput: {
+                        description: { tr: "Renk girdi string'i veya desteklenen nesne verisi.", en: "Color input string or supported object payload." },
+                        type: "string | object",
+                        required: true,
+                    },
+                }}
+                returnProps={{
+                    hex6: { description: { tr: "Hex6 renk.", en: "Hex6 color." }, type: "string" },
+                    hex8: { description: { tr: "Alpha içeren Hex8 renk.", en: "Hex8 color with alpha." }, type: "string" },
+                    rgbArray: { description: { tr: "RGB dizisi [r, g, b].", en: "RGB array [r, g, b]." }, type: "number[]" },
+                    rgbString: { description: { tr: "RGB CSS string'i.", en: "RGB css string." }, type: "string" },
+                    rgbaArray: { description: { tr: "RGBA dizisi [r, g, b, a].", en: "RGBA array [r, g, b, a]." }, type: "number[]" },
+                    rgbaString: { description: { tr: "RGBA CSS string'i.", en: "RGBA css string." }, type: "string" },
+                    hslArray: { description: { tr: "HSL dizisi [h, s, l].", en: "HSL array [h, s, l]." }, type: "number[]" },
+                    hslString: { description: { tr: "HSL CSS string'i.", en: "HSL css string." }, type: "string" },
+                    hslaArray: { description: { tr: "HSLA dizisi [h, s, l, a].", en: "HSLA array [h, s, l, a]." }, type: "number[]" },
+                    hslaString: { description: { tr: "HSLA CSS string'i.", en: "HSLA css string." }, type: "string" },
+                    hsbArray: { description: { tr: "HSB dizisi [h, s, b].", en: "HSB array [h, s, b]." }, type: "number[]" },
+                    hsbString: { description: { tr: "HSB CSS string'i.", en: "HSB css string." }, type: "string" },
+                    hsbaArray: { description: { tr: "HSBA dizisi [h, s, b, a].", en: "HSBA array [h, s, b, a]." }, type: "number[]" },
+                    hsbaString: { description: { tr: "HSBA CSS string'i.", en: "HSBA css string." }, type: "string" },
+                    luminance: { description: { tr: "Bağıl parlaklık (0–1).", en: "Relative luminance (0–1)." }, type: "number" },
+                    isLight: { description: { tr: "luminance >= 0.5 olduğunda true.", en: "True when luminance >= 0.5." }, type: "boolean" },
+                    isDark: { description: { tr: "luminance < 0.5 olduğunda true.", en: "True when luminance < 0.5." }, type: "boolean" },
+                    linearRgbaArray: {
+                        description: { tr: "WCAG hesapları için lineer RGBA dizisi.", en: "Linear RGBA array for WCAG math." },
+                        type: "number[]",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;