krl-alfred 2.23.13 → 2.23.15

package/dist/components/AutocompleteInput/stories/AutocompleteInput.stories.js

@@ -1,86 +1,173 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Interactive = exports.Complete = exports.DropdownPositionRelative = exports.FullWidth = exports.ShortDropdown = exports.FixedBottomItem = exports.SingleItem = exports.WithoutAutoUppercase = exports.WithSelectedValue = exports.WithoutLabel = exports.WithCustomLink = exports.WithLoading = exports.Readonly = exports.Disabled = exports.WithErrorAndDropdown = exports.WithError = exports.NoResults = exports.DropdownOpen = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var AutocompleteInput_1 = __importDefault(require("../AutocompleteInput"));
+var dropdownList = [
+    { value: 1, label: "Chocolate" },
+    { value: 2, label: "Strawberry" },
+    { value: 3, label: "Vanilla" },
+    { value: 4, label: "Avocado", isFixedBottom: true },
+    { value: 5, label: "Pancake" },
+    { value: 6, label: "Ice Cream" },
+    { value: 7, label: "Burger" },
+    { value: 8, label: "Sandwich" },
+];
+var shortList = [
+    { value: 1, label: "İstanbul" },
+    { value: 2, label: "Ankara" },
+    { value: 3, label: "İzmir" },
+];
+var baseArgs = {
+    placeholder: "Placeholder",
+    hasError: false,
+    disabled: false,
+    readonly: false,
+    hasLoading: false,
+    label: "Label",
+    width: "370px",
+    dropdownMaxHeight: "204px",
+    isShowDropdown: false,
+    hasAutoUppercase: true,
+    dropdownPosition: "absolute",
+    autofocus: false,
+    name: "autocomplete",
+    autoComplete: "off",
+    value: null,
+    errorMessage: "",
+    customLinkText: undefined,
+    customLinkHref: undefined,
+    onClear: function () { return console.log("prop clear"); },
+    onChange: function (e) { var _a; return console.log("prop onChange", (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); },
+    onKeyUp: function () { return console.log("prop onKeyUp"); },
+    onFocus: function () { return console.log("prop onFocus"); },
+    onBlur: function () { return console.log("prop onBlur"); },
+    onKeyDown: function () { return console.log("prop onKeyDown"); },
+    onCustomLinkClick: function () { return console.log("custom link clicked"); },
+    noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
+    dropdownList: dropdownList,
+};
+var StoryFrame = function (_a) {
+    var children = _a.children, _b = _a.tall, tall = _b === void 0 ? false : _b;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 420, minHeight: tall ? 320 : undefined, paddingBottom: tall ? 24 : 0 } }, { children: children })));
+};
 exports.default = {
-    title: 'Components/Autocomplete Input',
-    component: AutocompleteInput_1.default,
-    tags: ['autodocs'],
+    title: "Components/Autocomplete Input",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)(StoryFrame, __assign({ tall: props.isShowDropdown }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        hasError: { control: 'boolean' },
-        onCustomLinkClick: { action: 'clicked' },
-    }
-};
-exports.Default = {
-    args: {
-        placeholder: "Placeholder",
-        hasError: false,
-        disabled: false,
-        readonly: false,
-        hasLoading: false,
-        label: "Label",
-        dropdownMaxHeight: "204px",
-        //defaultLabel : "test",
-        //value : "asd",
-        onClear: function () {
-            console.log("prop clear");
-        },
-        onChange: function (e) {
-            console.log(e.target.value);
-            console.log("prop onChange");
-        },
-        onKeyUp: function () {
-            console.log("prop onKeyUp");
-        },
-        onFocus: function () {
-            console.log("prop onFocus");
+        hasError: { control: "boolean" },
+        disabled: { control: "boolean" },
+        readonly: { control: "boolean" },
+        hasLoading: { control: "boolean" },
+        isShowDropdown: { control: "boolean" },
+        hasAutoUppercase: { control: "boolean" },
+        autofocus: { control: "boolean" },
+        label: { control: "text" },
+        placeholder: { control: "text" },
+        errorMessage: { control: "text" },
+        width: { control: "text" },
+        dropdownMaxHeight: { control: "text" },
+        dropdownPosition: {
+            control: "select",
+            options: ["absolute", "relative", "fixed"],
         },
-        onBlur: function () {
-            console.log("prop onBlur");
-        },
-        onKeyDown: function () {
-            console.log("prop onKeyDown");
-        },
-        value: null,
-        noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
-        dropdownList: [
-            {
-                value: 1,
-                label: "Chocolate",
-            },
-            {
-                value: 2,
-                label: "Strawberry",
-            },
-            {
-                value: 3,
-                label: "Vanilla",
-            },
-            {
-                value: 4,
-                label: "Avocado",
-                isFixedBottom: true,
-            },
-            {
-                value: 5,
-                label: "Pancake",
-            },
-            {
-                value: 6,
-                label: "Ice Cream",
-            },
-            {
-                value: 7,
-                label: "Burger",
-            },
-            {
-                value: 8,
-                label: "Sandwich",
-            }
-        ]
+        customLinkText: { control: "text" },
+        customLinkHref: { control: "text" },
+        onCustomLinkClick: { action: "customLinkClicked" },
+        onClear: { action: "cleared" },
+        onChange: { action: "changed" },
+        dropdownList: { control: "object" },
+        value: { control: "object" },
+        noResultTemplate: { control: false },
     },
 };
+exports.Default = {
+    args: __assign({}, baseArgs),
+};
+exports.DropdownOpen = {
+    args: __assign(__assign({}, baseArgs), { isShowDropdown: true }),
+};
+exports.NoResults = {
+    args: __assign(__assign({}, baseArgs), { isShowDropdown: true, dropdownList: [], noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "Sonu\u00E7 bulunamad\u0131" }); } }),
+};
+exports.WithError = {
+    args: __assign(__assign({}, baseArgs), { hasError: true, errorMessage: "Geçerli bir seçim yapmalısın." }),
+};
+exports.WithErrorAndDropdown = {
+    args: __assign(__assign({}, baseArgs), { hasError: true, errorMessage: "Listeden bir değer seç.", isShowDropdown: true }),
+};
+exports.Disabled = {
+    args: __assign(__assign({}, baseArgs), { disabled: true, placeholder: "Devre dışı" }),
+};
+exports.Readonly = {
+    args: __assign(__assign({}, baseArgs), { readonly: true, value: { value: 1, label: "Chocolate" }, placeholder: "Salt okunur" }),
+};
+exports.WithLoading = {
+    args: __assign(__assign({}, baseArgs), { hasLoading: true, isShowDropdown: true, placeholder: "Yükleniyor..." }),
+};
+exports.WithCustomLink = {
+    args: __assign(__assign({}, baseArgs), { customLinkText: "Yeni ekle", customLinkHref: "#", onCustomLinkClick: function () { return console.log("Yeni ekle tıklandı"); } }),
+};
+exports.WithoutLabel = {
+    args: __assign(__assign({}, baseArgs), { label: "", placeholder: "Şehir ara", dropdownList: shortList }),
+};
+exports.WithSelectedValue = {
+    args: __assign(__assign({}, baseArgs), { value: { value: 2, label: "Strawberry" }, placeholder: "Seçili değer" }),
+};
+exports.WithoutAutoUppercase = {
+    args: __assign(__assign({}, baseArgs), { hasAutoUppercase: false, placeholder: "Küçük/büyük harf korunur", label: "Şehir", dropdownList: shortList, isShowDropdown: true }),
+};
+exports.SingleItem = {
+    args: __assign(__assign({}, baseArgs), { label: "Tek sonuç (blur’da seçilir)", dropdownList: [{ value: 34, label: "İstanbul" }], isShowDropdown: true, hasAutoUppercase: false }),
+};
+exports.FixedBottomItem = {
+    args: __assign(__assign({}, baseArgs), { isShowDropdown: true, dropdownList: [
+            { value: 1, label: "Chocolate" },
+            { value: 2, label: "Strawberry" },
+            { value: 3, label: "Vanilla" },
+            { value: 99, label: "Diğer (alta sabit)", isFixedBottom: true },
+        ] }),
+};
+exports.ShortDropdown = {
+    args: __assign(__assign({}, baseArgs), { dropdownMaxHeight: "120px", isShowDropdown: true }),
+};
+exports.FullWidth = {
+    args: __assign(__assign({}, baseArgs), { width: "100%", isShowDropdown: true, dropdownList: shortList }),
+};
+exports.DropdownPositionRelative = {
+    args: __assign(__assign({}, baseArgs), { dropdownPosition: "relative", isShowDropdown: true, dropdownList: shortList }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { label: "Ürün ara", placeholder: "Yazmaya başla", customLinkText: "Tümünü gör", customLinkHref: "#", isShowDropdown: true, hasError: true, errorMessage: "Listeden seçim yapmalısın", hasAutoUppercase: false, dropdownList: shortList }),
+};
+var InteractiveStory = function (args) {
+    var _a = react_1.default.useState(null), value = _a[0], setValue = _a[1];
+    var _b = react_1.default.useState(""), query = _b[0], setQuery = _b[1];
+    var filtered = shortList.filter(function (item) {
+        return item.label.toLocaleLowerCase("tr-TR").includes(query.toLocaleLowerCase("tr-TR"));
+    });
+    return ((0, jsx_runtime_1.jsx)(StoryFrame, __assign({ tall: true }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_1.default, __assign({}, args, { value: value, hasAutoUppercase: false, isShowDropdown: query.length > 0, dropdownList: filtered, onClear: function () {
+                setValue(null);
+                setQuery("");
+            }, onChange: function (e) { var _a, _b; return setValue((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null); }, onKeyUp: function (e) { return setQuery(e.target.value || ""); }, noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "Sonu\u00E7 bulunamad\u0131" }); } })) })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign(__assign({}, baseArgs), { label: "Şehir seç", placeholder: "İstanbul, Ankara...", dropdownList: shortList, hasAutoUppercase: false }),
+};

package/dist/components/Badges/layouts/belt/belt.styled.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { BadgesStyledProps } from "./../../props";
-export declare const BadgesStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgesStyledProps> & BadgesStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgesStyledProps> & BadgesStyledProps, never>>> & string;
+export declare const BadgesStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, BadgesStyledProps>> & string;

package/dist/components/Badges/layouts/dark/dark.styled.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { BadgesStyledProps } from "./../../props";
-export declare const DarkStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgesStyledProps> & BadgesStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgesStyledProps> & BadgesStyledProps, never>>> & string;
+export declare const DarkStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, BadgesStyledProps>> & string;

package/dist/components/Badges/layouts/text/text.styled.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import { BadgesStyledProps } from "./../../props";
-export declare const TextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgesStyledProps> & BadgesStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgesStyledProps> & BadgesStyledProps, never>>> & string;
+export declare const TextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}, BadgesStyledProps>> & string;

package/dist/components/Badges/stories/Badges.stories.d.ts

@@ -39,41 +39,71 @@ export declare const Default: {
         title: string;
         variant: string;
         layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const Primary: {
     args: {
         variant: string;
-        layout: string;
         title: string;
+        layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const Secondary: {
     args: {
         variant: string;
-        layout: string;
         title: string;
+        layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const Danger: {
     args: {
         variant: string;
-        layout: string;
         title: string;
+        layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const Disabled: {
     args: {
         variant: string;
-        layout: string;
         title: string;
+        layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const Light: {
     args: {
         variant: string;
-        layout: string;
         title: string;
+        layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const Belt: {
@@ -82,14 +112,94 @@ export declare const Belt: {
         title: string;
         size: string;
         variant: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const BeltSmall: {
+    args: {
+        layout: string;
+        size: string;
+        title: string;
+        variant: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const BeltLongTitle: {
+    args: {
+        layout: string;
+        title: string;
+        variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const Dark: {
     args: {
         layout: string;
         size: string;
+        title: any;
+        variant: string;
+        hasResponsive: boolean;
         left: any;
         top: any;
+        text: any;
+    };
+};
+export declare const DarkXsmall: {
+    args: {
+        layout: string;
+        size: string;
+        title: string;
+        variant: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const DarkSmall: {
+    args: {
+        layout: string;
+        size: string;
+        title: string;
+        variant: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const DarkLarge: {
+    args: {
+        layout: string;
+        size: string;
+        title: string;
+        variant: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const DarkWithPosition: {
+    args: {
+        layout: string;
+        size: string;
+        left: string;
+        top: string;
+        title: string;
+        variant: string;
+        hasResponsive: boolean;
+        text: any;
     };
 };
 export declare const Text: {
@@ -97,6 +207,83 @@ export declare const Text: {
         layout: string;
         title: string;
         variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const TextSecondary: {
+    args: {
+        layout: string;
+        title: string;
+        variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const TextDanger: {
+    args: {
+        layout: string;
+        title: string;
+        variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const TextDisabled: {
+    args: {
+        layout: string;
+        title: string;
+        variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const TextLight: {
+    args: {
+        layout: string;
+        title: string;
+        variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const TextLongTitle: {
+    args: {
+        layout: string;
+        title: string;
+        variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
+    };
+};
+export declare const WithResponsive: {
+    args: {
+        layout: string;
+        hasResponsive: boolean;
+        title: string;
+        variant: string;
+        size: string;
+        left: any;
+        top: any;
+        text: any;
     };
 };
 export declare const AllVariants: {
@@ -104,6 +291,11 @@ export declare const AllVariants: {
         title: string;
         variant: string;
         layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
     render: (args: any) => React.JSX.Element;
 };
@@ -112,6 +304,11 @@ export declare const AllSizes: {
         title: string;
         variant: string;
         layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
     render: (args: any) => React.JSX.Element;
 };
@@ -120,22 +317,43 @@ export declare const AllLayouts: {
         title: string;
         variant: string;
         layout: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
     render: (args: any) => React.JSX.Element;
 };
-export declare const WithResponsive: {
+export declare const TextAllVariants: {
     args: {
         layout: string;
-        hasResponsive: boolean;
         title: string;
         variant: string;
+        size: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
+    render: (args: any) => React.JSX.Element;
 };
-export declare const DarkWithPosition: {
+export declare const DarkAllSizes: {
     args: {
         layout: string;
+        title: string;
+        variant: string;
         size: string;
-        left: string;
-        top: string;
+        hasResponsive: boolean;
+        left: any;
+        top: any;
+        text: any;
     };
+    render: (args: any) => React.JSX.Element;
+};
+export declare const OnProductCard: {
+    render: () => React.JSX.Element;
+};
+export declare const Complete: {
+    render: () => React.JSX.Element;
 };