krl-alfred 2.23.13 → 2.23.15

package/dist/components/StepSlider/stories/StepSlider.stories.js

@@ -14,56 +14,103 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithCustomComponent = exports.WithCustomOnChange = exports.WithDifferentValues = exports.WithLongLabels = exports.Default = void 0;
+exports.Complete = exports.Interactive = exports.WithCustomComponent = exports.WithDifferentValues = exports.FourSteps = exports.TwoSteps = exports.WithoutLabel = exports.LastSelected = exports.MiddleSelected = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var StepSlider_1 = __importDefault(require("../StepSlider"));
-exports.default = {
-    title: 'Components/StepSlider',
-    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '405px' } }, { children: (0, jsx_runtime_1.jsx)(StepSlider_1.default, __assign({}, props)) })); },
-    tags: ['autodocs'],
-};
-var options = [
+var rentalOptions = [
+    {
+        value: "1",
+        label: "1-2 Ay",
+        activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "1-2" }), " ay"] })),
+    },
+    {
+        value: "3",
+        label: "3-6 Ay",
+        activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "3-6" }), " ay"] })),
+    },
     {
-        value: '1', label: '1-2 Ay', activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "1-2" }), " ay"] }))
+        value: "6",
+        label: "6+ Ay",
+        activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "6+" }), " ay"] })),
     },
+];
+var priceOptions = [
+    { value: 100, label: "100 TL", activeLabel: "100 TL Seçildi" },
+    { value: 200, label: "200 TL", activeLabel: "200 TL Seçildi" },
+    { value: 300, label: "300 TL", activeLabel: "300 TL Seçildi" },
+];
+var twoOptions = [
     {
-        value: '3', label: '3-6 Ay', activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "3-6" }), " ay"] }))
+        value: "short",
+        label: "Kısa",
+        activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "K\u0131sa" }), " s\u00FCre"] })),
     },
     {
-        value: '6', label: '6+ Ay', activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "6+" }), " ay"] }))
+        value: "long",
+        label: "Uzun",
+        activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "Uzun" }), " s\u00FCre"] })),
     },
 ];
-var Default = function () {
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '405px' } }, { children: (0, jsx_runtime_1.jsx)(StepSlider_1.default, { options: options, selectedValue: '1', label: "Ne kadar s\u00FCreli\u011Fine kiralamay\u0131 d\u00FC\u015F\u00FCn\u00FCyorsun?" }) })));
+var fourOptions = [
+    { value: "1", label: "1 Ay", activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "1" }), " ay"] }) },
+    { value: "3", label: "3 Ay", activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "3" }), " ay"] }) },
+    { value: "6", label: "6 Ay", activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "6" }), " ay"] }) },
+    { value: "12", label: "12 Ay", activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "12" }), " ay"] }) },
+];
+var baseArgs = {
+    options: rentalOptions,
+    selectedValue: "1",
+    label: "Ne kadar süreliğine kiralamayı düşünüyorsun?",
+    onChange: function (value) { return console.log("Yeni değer:", value); },
+};
+exports.default = {
+    title: "Components/StepSlider",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 405 } }, { children: (0, jsx_runtime_1.jsx)(StepSlider_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
+    argTypes: {
+        label: { control: "text" },
+        selectedValue: { control: "text" },
+        options: { control: false },
+        onChange: { action: "changed" },
+    },
 };
-exports.Default = Default;
-var WithLongLabels = function () {
-    var longLabelOptions = options.map(function (option) { return (__assign(__assign({}, option), { label: "Bu \u00E7ok uzun bir etiket ".concat(option.label), activeLabel: "Bu \u00E7ok uzun bir aktif etiket ".concat(option.activeLabel) })); });
-    return ((0, jsx_runtime_1.jsx)(StepSlider_1.default, { options: longLabelOptions, selectedValue: '6', label: "Ne kadar s\u00FCreli\u011Fine kiralamay\u0131 d\u00FC\u015F\u00FCn\u00FCyorsun?" }));
+exports.Default = {
+    args: __assign({}, baseArgs),
 };
-exports.WithLongLabels = WithLongLabels;
-var WithDifferentValues = function () {
-    var differentValueOptions = [
-        { value: 100, label: '100 TL', activeLabel: '100 TL Seçildi' },
-        { value: 200, label: '200 TL', activeLabel: '200 TL Seçildi' },
-        { value: 300, label: '300 TL', activeLabel: '300 TL Seçildi' },
-    ];
-    return ((0, jsx_runtime_1.jsx)(StepSlider_1.default, { options: differentValueOptions, selectedValue: 200, label: "Ne kadar s\u00FCreli\u011Fine kiralamay\u0131 d\u00FC\u015F\u00FCn\u00FCyorsun?" }));
+exports.MiddleSelected = {
+    args: __assign(__assign({}, baseArgs), { selectedValue: "3" }),
 };
-exports.WithDifferentValues = WithDifferentValues;
-var WithCustomOnChange = function () {
-    var handleChange = function (newValue) {
-        console.log('Yeni değer:', newValue);
-    };
-    return (0, jsx_runtime_1.jsx)(StepSlider_1.default, { options: options, selectedValue: '1', onChange: handleChange, label: "Ne kadar s\u00FCreli\u011Fine kiralamay\u0131 d\u00FC\u015F\u00FCn\u00FCyorsun?" });
+exports.LastSelected = {
+    args: __assign(__assign({}, baseArgs), { selectedValue: "6" }),
+};
+exports.WithoutLabel = {
+    args: __assign(__assign({}, baseArgs), { label: undefined }),
+};
+exports.TwoSteps = {
+    args: __assign(__assign({}, baseArgs), { options: twoOptions, selectedValue: "short", label: "Süre tercihin" }),
+};
+exports.FourSteps = {
+    args: __assign(__assign({}, baseArgs), { options: fourOptions, selectedValue: "6", label: "Kiralama süresi" }),
+};
+exports.WithDifferentValues = {
+    args: __assign(__assign({}, baseArgs), { options: priceOptions, selectedValue: 200, label: "Bütçe aralığı" }),
+};
+exports.WithCustomComponent = {
+    args: __assign(__assign({}, baseArgs), { selectedValue: "3", options: [
+            { value: "1", label: "1-2 Ay", activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "1-2" }), " ay"] }) },
+            { value: "3", label: "3-6 Ay", activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "3-6" }), " ay"] }) },
+            { value: "6", label: "6+ Ay", activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "6+" }), " ay"] }) },
+        ] }),
+};
+var InteractiveStory = function (args) {
+    var _a = react_1.default.useState(args.selectedValue), selectedValue = _a[0], setSelectedValue = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 405 } }, { children: [(0, jsx_runtime_1.jsx)(StepSlider_1.default, __assign({}, args, { selectedValue: selectedValue, onChange: setSelectedValue })), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 12, font: "var(--caption-medium-11-13)" } }, { children: ["Se\u00E7ili: ", String(selectedValue)] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign({}, baseArgs),
 };
-exports.WithCustomOnChange = WithCustomOnChange;
-var WithCustomComponent = function () {
-    var optionsWithComponent = [
-        { value: '1', label: '1-2 Ay', activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "1-2" }), " ay"] }) },
-        { value: '3', label: '3-6 Ay', activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "3-6" }), " ay"] }) },
-        { value: '6', label: '6+ Ay', activeLabel: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "6+" }), " ay"] }) },
-    ];
-    return ((0, jsx_runtime_1.jsx)(StepSlider_1.default, { options: optionsWithComponent, selectedValue: '3', label: "Ne kadar s\u00FCreli\u011Fine kiralamay\u0131 d\u00FC\u015F\u00FCn\u00FCyorsun?" }));
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { options: fourOptions, selectedValue: "3", label: "Komple StepSlider" }),
 };
-exports.WithCustomComponent = WithCustomComponent;

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

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

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

@@ -1,9 +1,22 @@
-/// <reference types="react" />
+import React from "react";
 declare const _default: {
     title: string;
-    component: ({ steps, activeStep, hasClickAction, setStep, }: import("../props").Stepper) => import("react").JSX.Element;
+    component: (props: any) => React.JSX.Element;
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        activeStep: {
+            control: string;
+        };
+        hasClickAction: {
+            control: string;
+        };
+        steps: {
+            control: string;
+        };
+        setStep: {
+            action: string;
+        };
+    };
 };
 export default _default;
 export declare const Default: {
@@ -13,5 +26,138 @@ export declare const Default: {
             text: string;
         }[];
         activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const StepOne: {
+    args: {
+        activeStep: number;
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const StepTwo: {
+    args: {
+        activeStep: number;
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const StepThreeComplete: {
+    args: {
+        activeStep: number;
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const FourSteps: {
+    args: {
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const FourStepsComplete: {
+    args: {
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const TwoSteps: {
+    args: {
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const WithClickAction: {
+    args: {
+        activeStep: number;
+        hasClickAction: boolean;
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        setStep: (step: any) => void;
+    };
+};
+export declare const LongLabels: {
+    args: {
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const Empty: {
+    args: {
+        steps: any[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const AllActiveSteps: {
+    args: {
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+    render: (args: any) => React.JSX.Element;
+};
+export declare const Interactive: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
+    };
+};
+export declare const Complete: {
+    args: {
+        steps: {
+            index: number;
+            text: string;
+        }[];
+        activeStep: number;
+        hasClickAction: boolean;
+        setStep: (step: any) => void;
     };
 };

package/dist/components/Stepper/stories/Stepper.stories.js

@@ -1,19 +1,102 @@
 "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.Interactive = exports.AllActiveSteps = exports.Empty = exports.LongLabels = exports.WithClickAction = exports.TwoSteps = exports.FourStepsComplete = exports.FourSteps = exports.StepThreeComplete = exports.StepTwo = exports.StepOne = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var Stepper_1 = __importDefault(require("../Stepper"));
+var threeSteps = [
+    { index: 1, text: "Step 1" },
+    { index: 2, text: "Step 2" },
+    { index: 3, text: "Step 3" },
+];
+var checkoutSteps = [
+    { index: 1, text: "Sepet" },
+    { index: 2, text: "Adres" },
+    { index: 3, text: "Ödeme" },
+    { index: 4, text: "Onay" },
+];
+var baseArgs = {
+    steps: threeSteps,
+    activeStep: 1,
+    hasClickAction: false,
+    setStep: function (step) { return console.log("setStep", step); },
+};
 exports.default = {
-    title: 'Components/Stepper',
-    component: Stepper_1.default,
-    tags: ['autodocs'],
-    argTypes: {}
+    title: "Components/Stepper",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 1050, padding: "16px 0" } }, { children: (0, jsx_runtime_1.jsx)(Stepper_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
+    argTypes: {
+        activeStep: { control: "number" },
+        hasClickAction: { control: "boolean" },
+        steps: { control: "object" },
+        setStep: { action: "setStep" },
+    },
 };
 exports.Default = {
-    args: {
-        steps: [{ index: 1, text: "Step 1" }, { index: 2, text: "Step 2" }, { index: 3, text: "Step 3" }],
-        activeStep: 1,
-    },
+    args: __assign({}, baseArgs),
+};
+exports.StepOne = {
+    args: __assign(__assign({}, baseArgs), { activeStep: 1 }),
+};
+exports.StepTwo = {
+    args: __assign(__assign({}, baseArgs), { activeStep: 2 }),
+};
+exports.StepThreeComplete = {
+    args: __assign(__assign({}, baseArgs), { activeStep: 3 }),
+};
+exports.FourSteps = {
+    args: __assign(__assign({}, baseArgs), { steps: checkoutSteps, activeStep: 2 }),
+};
+exports.FourStepsComplete = {
+    args: __assign(__assign({}, baseArgs), { steps: checkoutSteps, activeStep: 4 }),
+};
+exports.TwoSteps = {
+    args: __assign(__assign({}, baseArgs), { steps: [
+            { index: 1, text: "Başlangıç" },
+            { index: 2, text: "Bitiş" },
+        ], activeStep: 1 }),
+};
+exports.WithClickAction = {
+    args: __assign(__assign({}, baseArgs), { activeStep: 3, hasClickAction: true }),
+};
+exports.LongLabels = {
+    args: __assign(__assign({}, baseArgs), { steps: [
+            { index: 1, text: "Sipariş Bilgileri" },
+            { index: 2, text: "Teslimat Adresi" },
+            { index: 3, text: "Ödeme Yöntemi" },
+        ], activeStep: 2 }),
+};
+exports.Empty = {
+    args: __assign(__assign({}, baseArgs), { steps: [] }),
+};
+exports.AllActiveSteps = {
+    args: baseArgs,
+    render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: 24, maxWidth: 1050 } }, { children: threeSteps.map(function (step) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", __assign({ style: { margin: "0 0 8px", font: "var(--caption-semi-bold-12-15)" } }, { children: ["activeStep: ", step.index] })), (0, jsx_runtime_1.jsx)(Stepper_1.default, __assign({}, args, { activeStep: step.index }))] }, step.index)); }) }))); },
+};
+var InteractiveStory = function (args) {
+    var _a, _b, _c;
+    var _d = react_1.default.useState((_a = args.activeStep) !== null && _a !== void 0 ? _a : 1), activeStep = _d[0], setActiveStep = _d[1];
+    var max = (_c = (_b = args.steps) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 1050 } }, { children: [(0, jsx_runtime_1.jsx)(Stepper_1.default, __assign({}, args, { activeStep: activeStep, hasClickAction: true, setStep: setActiveStep })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", gap: 8, marginTop: 16 } }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setActiveStep(function (s) { return Math.max(1, s - 1); }); } }, { children: "Geri" })), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setActiveStep(function (s) { return Math.min(max, s + 1); }); } }, { children: "\u0130leri" }))] }))] })));
+};
+exports.Interactive = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(InteractiveStory, __assign({}, args)); },
+    args: __assign(__assign({}, baseArgs), { steps: checkoutSteps, activeStep: 1, hasClickAction: true }),
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { steps: checkoutSteps, activeStep: 3, hasClickAction: true }),
 };

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

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

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

@@ -1,14 +1,80 @@
-import React from 'react';
+import React from "react";
 declare const _default: {
     title: string;
     component: (props: any) => React.JSX.Element;
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        title: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
+        buttonText: {
+            control: string;
+        };
+        buttonOnClick: {
+            action: string;
+        };
+    };
 };
 export default _default;
 export declare const Default: {
     args: {
         title: string;
         description: string;
+        buttonText: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const CustomTitle: {
+    args: {
+        title: string;
+        description: string;
+        buttonText: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const CustomButtonText: {
+    args: {
+        buttonText: string;
+        title: string;
+        description: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const ShortDescription: {
+    args: {
+        description: string;
+        title: string;
+        buttonText: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const LongContent: {
+    args: {
+        title: string;
+        description: string;
+        buttonText: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const WithoutDescription: {
+    args: {
+        description: string;
+        title: string;
+        buttonText: string;
+        buttonOnClick: () => void;
+    };
+};
+export declare const InSearchEmptyState: {
+    render: () => React.JSX.Element;
+};
+export declare const Complete: {
+    args: {
+        title: string;
+        description: string;
+        buttonText: string;
+        buttonOnClick: () => void;
     };
 };

package/dist/components/SuggestBox/stories/SuggestBox.stories.js

@@ -14,18 +14,57 @@ 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.InSearchEmptyState = exports.WithoutDescription = exports.LongContent = exports.ShortDescription = exports.CustomButtonText = exports.CustomTitle = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var SuggestBox_1 = __importDefault(require("../SuggestBox"));
+var baseArgs = {
+    title: "Aradığını bulamadın mı?",
+    description: "Aradığını bulamadıysan, dilediğin cihazı Kiralarsın.com’a önerebilirsin.",
+    buttonText: "Cihaz Öner",
+    buttonOnClick: function () { return console.log("suggest clicked"); },
+};
 exports.default = {
-    title: 'Components/SuggestBox',
-    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "340px" } }, { children: (0, jsx_runtime_1.jsx)(SuggestBox_1.default, __assign({}, props)) })); },
-    tags: ['autodocs'],
-    argTypes: {}
+    title: "Components/SuggestBox",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 340 } }, { children: (0, jsx_runtime_1.jsx)(SuggestBox_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
+    argTypes: {
+        title: { control: "text" },
+        description: { control: "text" },
+        buttonText: { control: "text" },
+        buttonOnClick: { action: "clicked" },
+    },
 };
 exports.Default = {
-    args: {
-        title: "Aradığını bulamadın mı?",
-        description: "Aradığını bulamadıysan, dilediğin cihazı Kiralarsın.com’a önerebilirsin.",
-    },
+    args: __assign({}, baseArgs),
+};
+exports.CustomTitle = {
+    args: __assign(__assign({}, baseArgs), { title: "Sonuç bulunamadı" }),
+};
+exports.CustomButtonText = {
+    args: __assign(__assign({}, baseArgs), { buttonText: "Öneri Gönder" }),
+};
+exports.ShortDescription = {
+    args: __assign(__assign({}, baseArgs), { description: "Cihaz önerisinde bulunabilirsin." }),
+};
+exports.LongContent = {
+    args: __assign(__assign({}, baseArgs), { title: "Aradığın ürünü listede göremedin mi?", description: "Kataloğumuzda olmayan bir cihazı önererek stok planlamamıza yardımcı olabilirsin. Ekibimiz talebini değerlendirip mümkün olan en kısa sürede geri dönüş yapar.", buttonText: "Cihaz önerisinde bulun" }),
+};
+exports.WithoutDescription = {
+    args: __assign(__assign({}, baseArgs), { description: "", title: "Cihaz öner", buttonText: "Öner" }),
+};
+exports.InSearchEmptyState = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+            maxWidth: 360,
+            padding: 24,
+            border: "1px solid var(--dark-opacity-10)",
+            borderRadius: 8,
+            background: "white",
+        } }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: {
+                    margin: "0 0 16px",
+                    font: "var(--body-regular-14-17)",
+                    color: "var(--dark-opacity-50)",
+                } }, { children: "\u201Cdrone kamera\u201D i\u00E7in sonu\u00E7 yok" })), (0, jsx_runtime_1.jsx)(SuggestBox_1.default, __assign({}, baseArgs, { title: "Arad\u0131\u011F\u0131n\u0131 bulamad\u0131n m\u0131?", buttonOnClick: function () { return console.log("empty state suggest"); } }))] }))); },
+};
+exports.Complete = {
+    args: __assign(__assign({}, baseArgs), { title: "Komple SuggestBox", description: "Tüm alanlar dolu örnek.", buttonText: "Hemen Öner" }),
 };

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

@@ -2,7 +2,13 @@
 type TableStyledProps = {
     $hasRowHover?: boolean;
 };
-export declare const TableStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasRowHover"> & TableStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasRowHover"> & TableStyledProps, never>>> & string;
-export declare const SkeletonStyled: 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 EmptyStyled: 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 TableStyled: 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;
+}, TableStyledProps>> & string;
+export declare const SkeletonStyled: 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 EmptyStyled: 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 {};