krl-alfred 2.23.13 → 2.23.15

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js

@@ -18,12 +18,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithHeaderDescription = exports.WithBadge = exports.Default = void 0;
+exports.Complete = exports.HeaderAndContentOnly = exports.NoContentSidePadding = exports.WithPrimaryButtonIcon = exports.WithSubcategories = exports.StatusInactive = exports.WithMiddleTitleAndStatus = exports.WithHeaderRightContent = exports.WithHeaderBackButton = exports.HeaderAlignFlexStart = exports.TitleSizeLg = exports.AddProductToCategory = exports.CategoryStructure = exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithHeaderDescription = exports.WithBadge = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
 var descriptionList_json_1 = __importDefault(require("./../../../jsons/descriptionList.json"));
 var DescriptionCard_styled_1 = require("../DescriptionCard.styled");
+var props_1 = require("../props");
+var props_2 = require("../../Button/props");
+var iconList_1 = require("../../Icon/iconList");
 var defaultHeaderImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
 var defaultDropdownList = [
     { name: "test", component: function (_a) {
@@ -37,18 +40,26 @@ var defaultDropdownList = [
 ];
 var defaultArgs = {
     title: "Header title",
+    titleSize: "md",
+    headerSize: "small",
+    headerAlignItems: "center",
     hasBadge: false,
     badgeText: "Badge text",
     hasHeaderDropdown: false,
+    hasHeaderBackButton: false,
     headerButtonText: "Header dropdown text",
     list: descriptionList_json_1.default,
     hasHeader: true,
+    hasHeaderBackground: false,
+    hasHeaderBorder: false,
     hasRounded: true,
     hasBorder: true,
     hasHeaderButton: false,
     headerButtonWidth: null,
     hasHeaderPrimaryButton: false,
     headerPrimaryButtonText: "Header Primary Button Text",
+    headerPrimaryButtonIcon: null,
+    headerPrimaryButtonSize: "xsmall",
     headerPrimaryButtonAction: function () { return console.log("primary clicked"); },
     headerButtonAction: function () { return console.log("button clicked"); },
     boxSize: 5,
@@ -56,6 +67,13 @@ var defaultArgs = {
     dropdownList: defaultDropdownList,
     dropdownWidth: "200px",
     headerImage: defaultHeaderImage,
+    content: null,
+    hasNoContentSidePadding: false,
+    middleTitle: null,
+    status: null,
+    subcategoryList: [],
+    hasCategoryLayout: false,
+    hasTwoColumnHeader: false,
 };
 exports.default = {
     title: 'Components/DescriptionCard',
@@ -63,11 +81,12 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         title: { control: 'text' },
+        titleSize: { control: 'select', options: props_1.titleSizes },
         headerDescription: { control: 'text' },
-        headerSize: { control: 'select', options: ['small', 'medium'] },
+        headerSize: { control: 'select', options: props_1.headerSizes },
         headerAlignItems: {
             control: 'select',
-            options: ['center', 'flex-start'],
+            options: props_1.headerAlignItems,
             description: 'Header dikey hizalama',
         },
         hasBadge: { control: 'boolean' },
@@ -75,6 +94,7 @@ exports.default = {
         hasHeader: { control: 'boolean' },
         hasHeaderBackground: { control: 'boolean' },
         hasHeaderBorder: { control: 'boolean' },
+        hasHeaderBackButton: { control: 'boolean' },
         hasCategoryLayout: {
             control: 'boolean',
             description: 'Kategori listesi layout\'u (3 kolon grid, hover dropdown)',
@@ -88,7 +108,11 @@ exports.default = {
         hasHeaderButton: { control: 'boolean' },
         hasHeaderDropdown: { control: 'boolean' },
         hasHeaderPrimaryButton: { control: 'boolean' },
+        headerPrimaryButtonSize: { control: 'select', options: props_2.sizes },
+        headerPrimaryButtonIcon: { control: 'select', options: Object.keys(iconList_1.iconList) },
+        hasNoContentSidePadding: { control: 'boolean' },
         boxSize: { control: 'number' },
+        status: { control: 'object' },
     }
 };
 exports.Default = {
@@ -258,4 +282,51 @@ exports.CategoryStructure = {
 exports.AddProductToCategory = {
     render: function () { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Bu kategoriye \u00FCr\u00FCn ekle", titleSize: "lg", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderBorder: true, hasHeaderBackButton: true, headerSize: "medium", onHeaderBack: function () { return console.log("back clicked"); }, list: [] }) }))); },
 };
+exports.TitleSizeLg = {
+    args: __assign(__assign({}, defaultArgs), { title: "Large title", titleSize: "lg", headerImage: null }),
+};
+exports.HeaderAlignFlexStart = {
+    args: __assign(__assign({}, defaultArgs), { headerAlignItems: "flex-start", headerDescription: "Üst hizalı header + açıklama", headerImage: null, hasTwoColumnHeader: true, hasHeaderBorder: true, headerSize: "medium" }),
+};
+exports.WithHeaderBackButton = {
+    args: __assign(__assign({}, defaultArgs), { title: "Geri butonlu başlık", titleSize: "lg", hasHeaderBackButton: true, headerSize: "medium", headerImage: null, list: [], onHeaderBack: function () { return console.log("back clicked"); }, onHeaderClick: function () { return console.log("title clicked"); } }),
+};
+exports.WithHeaderRightContent = {
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, list: exports.MinimalList.args.list, headerRightContent: ((0, jsx_runtime_1.jsx)("span", __assign({ style: { font: "var(--caption-semi-bold-12-15)", color: "var(--dark-opacity-50)" } }, { children: "Sa\u011F i\u00E7erik" }))), hasTwoColumnHeader: true }),
+};
+exports.WithMiddleTitleAndStatus = {
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, list: [], middleTitle: "12 ürün", status: { label: "Aktif", variant: "active" }, hasHeaderBorder: true }),
+};
+exports.StatusInactive = {
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, list: [], middleTitle: "0 ürün", status: { label: "Pasif", variant: "inactive" }, hasHeaderBorder: true }),
+};
+exports.WithSubcategories = {
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, list: [], hasHeaderBorder: true, hasHeaderButton: true, headerButtonText: "Düzenle", subcategoryList: [
+            {
+                name: "Alt kategori 1",
+                middleTitle: "4 ürün",
+                status: { label: "Aktif", variant: "active" },
+                hasDropdown: false,
+                buttonAction: function () { return console.log("sub edit"); },
+            },
+            {
+                name: "Alt kategori 2",
+                middleTitle: "2 ürün",
+                status: { label: "Pasif", variant: "inactive" },
+                hasButton: false,
+            },
+        ] }),
+};
+exports.WithPrimaryButtonIcon = {
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, hasHeaderPrimaryButton: true, headerPrimaryButtonText: "Ekle", headerPrimaryButtonIcon: "PlusSmall", headerPrimaryButtonSize: "small", list: [] }),
+};
+exports.NoContentSidePadding = {
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, list: [], hasNoContentSidePadding: true, content: ((0, jsx_runtime_1.jsx)("div", __assign({ style: { background: "var(--primary-opacity-5)", padding: "1rem 0" } }, { children: "Side padding kapal\u0131 i\u00E7erik alan\u0131" }))) }),
+};
+exports.HeaderAndContentOnly = {
+    args: __assign(__assign({}, defaultArgs), { headerImage: null, list: [], hasBadge: true, badgeText: "Özet", content: ((0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: 0, font: "var(--body-regular-14-17)" } }, { children: "Sadece header + content, liste yok." }))) }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, defaultArgs), { title: "Komple DescriptionCard", titleSize: "lg", headerSize: "medium", headerAlignItems: "flex-start", headerDescription: "Tüm header özellikleri aktif", hasBadge: true, badgeText: "Yeni", hasHeaderBackground: true, hasHeaderBorder: true, hasHeaderPrimaryButton: true, headerPrimaryButtonText: "Kaydet", headerPrimaryButtonIcon: "Tick", hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "Menü", middleTitle: "Özet", status: { label: "Aktif", variant: "active" }, hasTwoColumnHeader: true }),
+};
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { DividerStyledProps } from "./props";
-export declare const DividerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DividerStyledProps> & DividerStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DividerStyledProps> & DividerStyledProps, never>>> & string;
-export declare const Horizontal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DividerStyledProps> & DividerStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DividerStyledProps> & DividerStyledProps, never>>> & string;
+export declare const DividerStyled: 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;
+}, DividerStyledProps>> & string;
+export declare const Horizontal: 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;
+}, DividerStyledProps>> & string;

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

@@ -1,13 +1,19 @@
-import React from 'react';
+import React from "react";
 declare const _default: {
     title: string;
-    component: ({ type, text, hasText, color }: import("../props").Divider) => React.JSX.Element;
+    component: (props: any) => React.JSX.Element;
     tags: string[];
     argTypes: {
         type: {
             control: string;
             options: string[];
         };
+        text: {
+            control: string;
+        };
+        hasText: {
+            control: string;
+        };
         color: {
             control: string;
         };
@@ -15,8 +21,85 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
+    args: {
+        type: "horizontal";
+        text: string;
+        hasText: boolean;
+        color: string;
+    };
+};
+export declare const Horizontal: {
+    args: {
+        type: string;
+        hasText: boolean;
+        text: string;
+        color: string;
+    };
+};
+export declare const HorizontalWithoutText: {
+    args: {
+        type: string;
+        hasText: boolean;
+        text: string;
+        color: string;
+    };
+};
+export declare const HorizontalCustomText: {
+    args: {
+        type: string;
+        text: string;
+        hasText: boolean;
+        color: string;
+    };
+};
+export declare const WaveArrowUp: {
+    args: {
+        type: string;
+        color: string;
+        text: string;
+        hasText: boolean;
+    };
+};
+export declare const WaveArrowDown: {
+    args: {
+        type: string;
+        color: string;
+        text: string;
+        hasText: boolean;
+    };
+};
+export declare const WaveArrowUpCustomColor: {
+    args: {
+        type: string;
+        color: string;
+        text: string;
+        hasText: boolean;
+    };
+};
+export declare const WaveArrowDownCustomColor: {
+    args: {
+        type: string;
+        color: string;
+        text: string;
+        hasText: boolean;
+    };
+};
+export declare const AllTypes: {
+    args: {
+        type: "horizontal";
+        text: string;
+        hasText: boolean;
+        color: string;
+    };
+    render: () => React.JSX.Element;
+};
+export declare const InFormContext: {
+    render: () => React.JSX.Element;
+};
+export declare const Complete: {
     args: {
         type: string;
+        hasText: boolean;
         text: string;
         color: string;
     };

package/dist/components/Divider/stories/Divider.stories.js

@@ -1,24 +1,77 @@
 "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.Complete = exports.InFormContext = exports.AllTypes = exports.WaveArrowDownCustomColor = exports.WaveArrowUpCustomColor = exports.WaveArrowDown = exports.WaveArrowUp = exports.HorizontalCustomText = exports.HorizontalWithoutText = exports.Horizontal = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var Divider_1 = __importDefault(require("../Divider"));
 var props_1 = require("../props");
+var baseArgs = {
+    type: "horizontal",
+    text: "veya",
+    hasText: true,
+    color: "var(--primary)",
+};
 exports.default = {
-    title: 'Components/Divider',
-    component: Divider_1.default,
-    tags: ['autodocs'],
+    title: "Components/Divider",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 420, padding: "24px 0" } }, { children: (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
     argTypes: {
-        type: { control: 'select', options: props_1.types },
-        color: { control: 'color' },
-    }
+        type: { control: "select", options: props_1.types },
+        text: { control: "text" },
+        hasText: { control: "boolean" },
+        color: { control: "color" },
+    },
 };
 exports.Default = {
-    args: {
-        type: props_1.types[0],
-        text: "veya",
-        color: "#9763F6"
-    },
+    args: __assign({}, baseArgs),
+};
+exports.Horizontal = {
+    args: __assign(__assign({}, baseArgs), { type: "horizontal", hasText: true, text: "veya" }),
+};
+exports.HorizontalWithoutText = {
+    args: __assign(__assign({}, baseArgs), { type: "horizontal", hasText: false }),
+};
+exports.HorizontalCustomText = {
+    args: __assign(__assign({}, baseArgs), { type: "horizontal", text: "ya da", hasText: true }),
+};
+exports.WaveArrowUp = {
+    args: __assign(__assign({}, baseArgs), { type: "waveArrowUp", color: "var(--primary)" }),
+};
+exports.WaveArrowDown = {
+    args: __assign(__assign({}, baseArgs), { type: "waveArrowDown", color: "var(--primary)" }),
+};
+exports.WaveArrowUpCustomColor = {
+    args: __assign(__assign({}, baseArgs), { type: "waveArrowUp", color: "#E11D48" }),
+};
+exports.WaveArrowDownCustomColor = {
+    args: __assign(__assign({}, baseArgs), { type: "waveArrowDown", color: "#16A34A" }),
+};
+exports.AllTypes = {
+    args: baseArgs,
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 32,
+            maxWidth: 420,
+            padding: "16px 0",
+        } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: "0 0 8px", font: "var(--caption-semi-bold-12-15)" } }, { children: "horizontal + text" })), (0, jsx_runtime_1.jsx)(Divider_1.default, { type: "horizontal", hasText: true, text: "veya" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: "0 0 8px", font: "var(--caption-semi-bold-12-15)" } }, { children: "horizontal" })), (0, jsx_runtime_1.jsx)(Divider_1.default, { type: "horizontal", hasText: false })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: "0 0 8px", font: "var(--caption-semi-bold-12-15)" } }, { children: "waveArrowUp" })), (0, jsx_runtime_1.jsx)(Divider_1.default, { type: "waveArrowUp", color: "var(--primary)" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: "0 0 8px", font: "var(--caption-semi-bold-12-15)" } }, { children: "waveArrowDown" })), (0, jsx_runtime_1.jsx)(Divider_1.default, { type: "waveArrowDown", color: "var(--primary)" })] })] }))); },
+};
+exports.InFormContext = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 360, display: "flex", flexDirection: "column", gap: 16 } }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "E-posta ile devam et" })), (0, jsx_runtime_1.jsx)(Divider_1.default, { type: "horizontal", hasText: true, text: "veya" }), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "Google ile devam et" }))] }))); },
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { type: "horizontal", hasText: true, text: "devam et", color: "var(--primary)" }),
 };

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { DropdownStyledProps } from "./props";
-export declare const DropdownStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DropdownStyledProps> & DropdownStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DropdownStyledProps> & DropdownStyledProps, never>>> & string;
-export declare const DropdownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DropdownStyledProps> & DropdownStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DropdownStyledProps> & DropdownStyledProps, never>>> & string;
+export declare const DropdownStyled: 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;
+}, DropdownStyledProps>> & string;
+export declare const DropdownMenu: 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;
+}, DropdownStyledProps>> & string;