krl-alfred 2.23.13 → 2.23.15

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

@@ -1,9 +1,16 @@
-/// <reference types="react" />
+import React from "react";
 declare const _default: {
     title: string;
-    component: (props: any) => import("react").JSX.Element;
+    component: (props: any) => React.JSX.Element;
     tags: string[];
     argTypes: {
+        title: {
+            control: string;
+        };
+        icon: {
+            control: string;
+            options: string[];
+        };
         hasDropdown: {
             control: string;
         };
@@ -13,19 +20,184 @@ declare const _default: {
         isActive: {
             control: string;
         };
+        list: {
+            control: string;
+        };
     };
 };
 export default _default;
 export declare const Default: {
     args: {
+        title: string;
+        icon: string;
+        hasDropdown: boolean;
+        isShow: boolean;
+        isActive: boolean;
+        list: ({
+            title: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+            icon?: undefined;
+        } | {
+            title: string;
+            isActive: boolean;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            icon?: undefined;
+        } | {
+            title: string;
+            icon: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+        })[];
+    };
+};
+export declare const Open: {
+    args: {
+        isShow: boolean;
+        title: string;
+        icon: string;
         hasDropdown: boolean;
+        isActive: boolean;
+        list: ({
+            title: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+            icon?: undefined;
+        } | {
+            title: string;
+            isActive: boolean;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            icon?: undefined;
+        } | {
+            title: string;
+            icon: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+        })[];
+    };
+};
+export declare const Active: {
+    args: {
+        isActive: boolean;
         isShow: boolean;
+        title: string;
+        icon: string;
+        hasDropdown: boolean;
+        list: ({
+            title: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+            icon?: undefined;
+        } | {
+            title: string;
+            isActive: boolean;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            icon?: undefined;
+        } | {
+            title: string;
+            icon: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+        })[];
+    };
+};
+export declare const WithoutDropdown: {
+    args: {
+        hasDropdown: boolean;
+        list: any[];
+        title: string;
+        icon: string;
+        isShow: boolean;
+        isActive: boolean;
+    };
+};
+export declare const EmptyList: {
+    args: {
+        hasDropdown: boolean;
+        isShow: boolean;
+        list: any[];
+        title: string;
+        icon: string;
+        isActive: boolean;
+    };
+};
+export declare const WithoutItemIcons: {
+    args: {
+        isShow: boolean;
+        list: {
+            title: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+        }[];
+        title: string;
+        icon: string;
+        hasDropdown: boolean;
+        isActive: boolean;
+    };
+};
+export declare const CustomIcon: {
+    args: {
+        icon: string;
+        title: string;
+        isShow: boolean;
+        hasDropdown: boolean;
+        isActive: boolean;
+        list: ({
+            title: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+            icon?: undefined;
+        } | {
+            title: string;
+            isActive: boolean;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            icon?: undefined;
+        } | {
+            title: string;
+            icon: string;
+            component: ({ children }: {
+                children: any;
+            }) => React.JSX.Element;
+            isActive?: undefined;
+        })[];
+    };
+};
+export declare const Interactive: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        isShow: boolean;
+        title: string;
+        icon: string;
+        hasDropdown: boolean;
         isActive: boolean;
         list: ({
             title: string;
             component: ({ children }: {
                 children: any;
-            }) => import("react").JSX.Element;
+            }) => React.JSX.Element;
             isActive?: undefined;
             icon?: undefined;
         } | {
@@ -33,14 +205,14 @@ export declare const Default: {
             isActive: boolean;
             component: ({ children }: {
                 children: any;
-            }) => import("react").JSX.Element;
+            }) => React.JSX.Element;
             icon?: undefined;
         } | {
             title: string;
             icon: string;
             component: ({ children }: {
                 children: any;
-            }) => import("react").JSX.Element;
+            }) => React.JSX.Element;
             isActive?: undefined;
         })[];
     };

package/dist/components/DropdownButton/stories/DropdownButton.stories.js

@@ -14,49 +14,97 @@ 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.CustomIcon = exports.WithoutItemIcons = exports.EmptyList = exports.WithoutDropdown = exports.Active = exports.Open = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var DropdownButton_1 = __importDefault(require("../DropdownButton"));
+var props_1 = require("../props");
+var defaultList = [
+    {
+        title: "Sub title 1",
+        component: function (_a) {
+            var children = _a.children;
+            return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#" }, { children: children }));
+        },
+    },
+    {
+        title: "Sub title 2",
+        isActive: true,
+        component: function (_a) {
+            var children = _a.children;
+            return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#" }, { children: children }));
+        },
+    },
+    {
+        title: "Sub title With Icon",
+        icon: "PlusSmall",
+        component: function (_a) {
+            var children = _a.children;
+            return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#" }, { children: children }));
+        },
+    },
+];
+var baseArgs = {
+    title: "Title",
+    icon: "Danger",
+    hasDropdown: true,
+    isShow: false,
+    isActive: false,
+    list: defaultList,
+};
 exports.default = {
-    title: 'Components/DropdownButton',
-    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "inline-block", width: "300px" } }, { children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, __assign({}, props)) })); },
-    tags: ['autodocs'],
+    title: "Components/DropdownButton",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "inline-block", width: "300px" } }, { children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        hasDropdown: { control: 'boolean' },
-        isShow: { control: 'boolean' },
-        isActive: { control: 'boolean' },
-    }
+        title: { control: "text" },
+        icon: { control: "select", options: props_1.iconNames },
+        hasDropdown: { control: "boolean" },
+        isShow: { control: "boolean" },
+        isActive: { control: "boolean" },
+        list: { control: "object" },
+    },
 };
 exports.Default = {
-    args: {
-        hasDropdown: true,
-        isShow: false,
-        isActive: false,
-        //component: () => <a>test</a> ,
-        list: [
-            {
-                title: "Sub title 1",
-                component: function (_a) {
+    args: __assign({}, baseArgs),
+};
+exports.Open = {
+    args: __assign(__assign({}, baseArgs), { isShow: true }),
+};
+exports.Active = {
+    args: __assign(__assign({}, baseArgs), { isActive: true, isShow: true, title: "Aktif menü" }),
+};
+exports.WithoutDropdown = {
+    args: __assign(__assign({}, baseArgs), { hasDropdown: false, list: [], title: "Sadece buton" }),
+};
+exports.EmptyList = {
+    args: __assign(__assign({}, baseArgs), { hasDropdown: true, isShow: true, list: [], title: "Boş liste" }),
+};
+exports.WithoutItemIcons = {
+    args: __assign(__assign({}, baseArgs), { isShow: true, list: [
+            { title: "Siparişlerim", component: function (_a) {
                     var children = _a.children;
-                    return (0, jsx_runtime_1.jsx)("a", { children: children });
-                },
-            },
-            {
-                title: "Sub title 2",
-                isActive: true,
-                component: function (_a) {
+                    return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#" }, { children: children }));
+                } },
+            { title: "Hesabım", component: function (_a) {
                     var children = _a.children;
-                    return (0, jsx_runtime_1.jsx)("a", { children: children });
-                },
-            },
-            {
-                title: "Sub title With Icon",
-                icon: "PlusSmall",
-                component: function (_a) {
+                    return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#" }, { children: children }));
+                } },
+            { title: "Çıkış Yap", component: function (_a) {
                     var children = _a.children;
-                    return (0, jsx_runtime_1.jsx)("a", { children: children });
-                },
-            }
-        ]
-    },
+                    return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#" }, { children: children }));
+                } },
+        ] }),
+};
+exports.CustomIcon = {
+    args: __assign(__assign({}, baseArgs), { icon: "Setting", title: "Ayarlar", isShow: true }),
+};
+var InteractiveStory = function (args) {
+    var _a;
+    var _b = react_1.default.useState((_a = args.isShow) !== null && _a !== void 0 ? _a : false), isShow = _b[0], setIsShow = _b[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "inline-block", width: 300 } }, { children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.default, __assign({}, args, { isShow: isShow, onClick: function () { return setIsShow(function (v) { return !v; }); } })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { marginTop: 16 } }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsShow(function (v) { return !v; }); } }, { children: "Toggle dropdown" })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 8, font: "var(--caption-semi-bold-12-15)", color: "var(--dark-opacity-50)" } }, { children: ["isShow: ", String(isShow)] }))] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign(__assign({}, baseArgs), { isShow: false }),
 };

package/dist/components/Icon/Icon.styled.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { IconStyledProps } from "./props";
-export declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IconStyledProps> & IconStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IconStyledProps> & IconStyledProps, never>>> & string;
-export declare const IconInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IconStyledProps> & IconStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IconStyledProps> & IconStyledProps, never>>> & string;
+export declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars;
+}> & string;
+export declare const IconWrapper: 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;
+}, IconStyledProps>> & string;
+export declare const IconInner: 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;
+}, IconStyledProps>> & string;

package/dist/components/Icon/props.d.ts

@@ -1,6 +1,6 @@
 export declare const iconNames: string[];
 type ICON = typeof iconNames[any];
-interface Icon {
+export interface IconConfig {
     name?: ICON;
     width?: string;
     height?: string;
@@ -22,6 +22,6 @@ export interface IconStyledProps {
     $linear?: string[];
     $hasColorChanged?: boolean;
 }
-export declare const IconDefault: Icon;
+export declare const IconDefault: IconConfig;
 export type IconProps = typeof IconDefault;
 export {};

package/dist/components/Icon/stories/Icons.stories.d.ts

@@ -1,13 +1,40 @@
-import React from 'react';
+import React from "react";
 declare const _default: {
     title: string;
-    component: (props: any) => React.JSX.Element;
+    component: ({ hasWrapper, color, name, linear, hasColorChanged, width, height, wrapperWidth, wrapperHeight, strokeWidth, }: import("../props").IconConfig) => React.JSX.Element;
+    tags: string[];
     argTypes: {
+        name: {
+            control: string;
+            options: string[];
+        };
         color: {
             control: string;
         };
+        width: {
+            control: string;
+        };
+        height: {
+            control: string;
+        };
+        hasWrapper: {
+            control: string;
+        };
+        hasColorChanged: {
+            control: string;
+        };
+        strokeWidth: {
+            control: string;
+        };
+        wrapperWidth: {
+            control: string;
+        };
+        wrapperHeight: {
+            control: string;
+        };
     };
     args: {
+        name: string;
         color: string;
         strokeWidth: string;
         width: string;
@@ -19,4 +46,108 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Icons: {};
+export declare const Icons: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        name: string;
+        color: string;
+        strokeWidth: string;
+        width: string;
+        height: any;
+        hasColorChanged: boolean;
+        hasWrapper: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};
+export declare const Default: {
+    args: {
+        name: string;
+        color: string;
+        strokeWidth: string;
+        width: string;
+        height: any;
+        hasColorChanged: boolean;
+        hasWrapper: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};
+export declare const CustomSize: {
+    args: {
+        name: string;
+        width: string;
+        height: string;
+        color: string;
+        strokeWidth: string;
+        hasColorChanged: boolean;
+        hasWrapper: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};
+export declare const Small: {
+    args: {
+        name: string;
+        width: string;
+        height: string;
+        color: string;
+        strokeWidth: string;
+        hasColorChanged: boolean;
+        hasWrapper: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};
+export declare const PrimaryColor: {
+    args: {
+        name: string;
+        color: string;
+        hasColorChanged: boolean;
+        strokeWidth: string;
+        width: string;
+        height: any;
+        hasWrapper: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};
+export declare const WithoutWrapper: {
+    args: {
+        name: string;
+        hasWrapper: boolean;
+        width: string;
+        height: string;
+        color: string;
+        strokeWidth: string;
+        hasColorChanged: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};
+export declare const ColorUnchanged: {
+    args: {
+        name: string;
+        hasColorChanged: boolean;
+        width: string;
+        height: string;
+        color: string;
+        strokeWidth: string;
+        hasWrapper: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};
+export declare const WithStrokeWidth: {
+    args: {
+        name: string;
+        strokeWidth: string;
+        width: string;
+        height: string;
+        color: string;
+        hasColorChanged: boolean;
+        hasWrapper: boolean;
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+};

package/dist/components/Icon/stories/Icons.stories.js

@@ -14,36 +14,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icons = void 0;
+exports.WithStrokeWidth = exports.ColorUnchanged = exports.WithoutWrapper = exports.PrimaryColor = exports.Small = exports.CustomSize = exports.Default = exports.Icons = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var index_1 = require("../iconList/index");
 var Icon_styled_1 = require("../Icon.styled");
 var Icon_1 = __importDefault(require("../Icon"));
+var props_1 = require("../props");
 var IconStoryList = function (props) {
     var color = props.color, strokeWidth = props.strokeWidth, width = props.width, height = props.height, hasColorChanged = props.hasColorChanged, wrapperHeight = props.wrapperHeight, wrapperWidth = props.wrapperWidth;
-    var ordered = Object.keys(index_1.iconList).sort().reduce(function (obj, key) {
+    var ordered = Object.keys(index_1.iconList)
+        .sort()
+        .reduce(function (obj, key) {
         obj[key] = index_1.iconList[key];
         return obj;
     }, {});
     return ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconStyled, { children: Object.entries(ordered).map(function (value, key) {
-            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'item' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: value[0], color: color, strokeWidth: strokeWidth, width: width, height: height, hasColorChanged: hasColorChanged, wrapperHeight: wrapperHeight, wrapperWidth: wrapperWidth }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] }), key));
+            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "item" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: value[0], color: color, strokeWidth: strokeWidth, width: width, height: height, hasColorChanged: hasColorChanged, wrapperHeight: wrapperHeight, wrapperWidth: wrapperWidth }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] }), key));
         }) }));
 };
+var baseArgs = {
+    name: "Again",
+    color: "#000",
+    strokeWidth: "",
+    width: "24px",
+    height: null,
+    hasColorChanged: true,
+    hasWrapper: true,
+    wrapperWidth: "",
+    wrapperHeight: "",
+};
 exports.default = {
-    title: 'Design System/Icons',
-    component: IconStoryList,
+    title: "Design System/Icons",
+    component: Icon_1.default,
+    tags: ["autodocs"],
     argTypes: {
-        color: { control: 'color' },
-    },
-    args: {
-        color: '#000',
-        strokeWidth: '',
-        width: '24px',
-        height: null,
-        hasColorChanged: true,
-        hasWrapper: true,
-        wrapperWidth: "",
-        wrapperHeight: ""
+        name: { control: "select", options: props_1.iconNames },
+        color: { control: "color" },
+        width: { control: "text" },
+        height: { control: "text" },
+        hasWrapper: { control: "boolean" },
+        hasColorChanged: { control: "boolean" },
+        strokeWidth: { control: "text" },
+        wrapperWidth: { control: "text" },
+        wrapperHeight: { control: "text" },
     },
+    args: baseArgs,
+};
+exports.Icons = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(IconStoryList, __assign({}, args)); },
+    args: __assign({}, baseArgs),
+};
+exports.Default = {
+    args: __assign(__assign({}, baseArgs), { name: "Again" }),
+};
+exports.CustomSize = {
+    args: __assign(__assign({}, baseArgs), { name: "Buy", width: "48px", height: "48px" }),
+};
+exports.Small = {
+    args: __assign(__assign({}, baseArgs), { name: "Search", width: "16px", height: "16px" }),
+};
+exports.PrimaryColor = {
+    args: __assign(__assign({}, baseArgs), { name: "Heart", color: "var(--primary)", hasColorChanged: true }),
+};
+exports.WithoutWrapper = {
+    args: __assign(__assign({}, baseArgs), { name: "Danger", hasWrapper: false, width: "24px", height: "24px" }),
+};
+exports.ColorUnchanged = {
+    args: __assign(__assign({}, baseArgs), { name: "Visa", hasColorChanged: false, width: "40px", height: "24px" }),
+};
+exports.WithStrokeWidth = {
+    args: __assign(__assign({}, baseArgs), { name: "ArrowRightBig", strokeWidth: "2", width: "24px", height: "24px" }),
 };
-exports.Icons = {};