@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Elements/Logo/stories/Logo.stories.d.ts

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").LogoProps>;
+    component: import('react').FC<import('../types').LogoProps>;
     parameters: {
         backgrounds: {
             default: string;

package/ui/Elements/Logo/stories/Logo.stories.js

@@ -0,0 +1,136 @@
+import Logo from '../Logo';
+var meta = {
+    title: 'Elements/Logo',
+    component: Logo,
+    parameters: {
+        backgrounds: {
+            default: 'darkGray',
+            values: [
+                { name: 'darkGray', value: '#333' },
+                { name: 'lightGray', value: '#eee' }
+            ]
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var MailshipBlack = {
+    args: {
+        variant: 'black',
+        brand: 'mailship'
+    }
+};
+export var MailshipWhite = {
+    args: {
+        brand: 'mailship',
+        variant: 'white'
+    }
+};
+export var MailshipM = {
+    args: {
+        brand: 'mailship',
+        variant: 'm'
+    }
+};
+export var MailshipS = {
+    args: {
+        brand: 'mailship',
+        variant: 's'
+    }
+};
+export var MailwiseBlack = {
+    args: {
+        brand: 'mailwise',
+        variant: 'black'
+    }
+};
+export var MailwiseS = {
+    args: {
+        brand: 'mailwise',
+        variant: 's'
+    }
+};
+export var MailstockBlack = {
+    args: {
+        brand: 'mailstock',
+        variant: 'black'
+    }
+};
+export var MailwrapBlack = {
+    args: {
+        brand: 'mailwrap',
+        variant: 'black'
+    }
+};
+export var MailwrapS = {
+    args: {
+        brand: 'mailwrap',
+        variant: 's'
+    }
+};
+export var MailstepBlack = {
+    args: {
+        brand: 'mailstep',
+        variant: 'black'
+    }
+};
+export var MailstepWhite = {
+    args: {
+        brand: 'mailstep',
+        variant: 'white'
+    }
+};
+export var WarehouseManagerBlack = {
+    args: {
+        brand: 'warehouse',
+        variant: 'black'
+    }
+};
+export var WarehouseManagerM = {
+    args: {
+        brand: 'warehouse',
+        variant: 'm'
+    }
+};
+export var WarehouseManagerS = {
+    args: {
+        brand: 'warehouse',
+        variant: 's'
+    }
+};
+export var SizeSmall = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'small'
+    }
+};
+export var SizeMedium = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'medium'
+    }
+};
+export var SizeBig = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'big'
+    }
+};
+export var SizeCustomWidth = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        width: '400px'
+    }
+};
+export var SizeCustomHeight = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        height: '200px'
+    }
+};

package/ui/Elements/Pagination/Pagination.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 export type PaginationProps = {
     page?: number;
     itemCount?: number;

package/ui/Elements/Pagination/Pagination.js

@@ -1,63 +1,39 @@
-import { Btn, DotsWrapper, GoIcon, PageBtn, Wrapper } from "./styled.js";
-import { useCallback, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/Pagination/Pagination.tsx
-const Pagination = ({ onPageChange, itemPerPage = 3, itemCount = 0, page, radius = 5, rate = 4, customPaginationHandler }) => {
-	const setPage = useCallback((number) => () => {
-		if (customPaginationHandler) {
-			customPaginationHandler(number, itemPerPage);
-			return;
-		}
-		if (onPageChange) onPageChange(number, itemPerPage);
-	}, [
-		itemPerPage,
-		onPageChange,
-		customPaginationHandler
-	]);
-	const pageX = page ?? 1;
-	const pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
-	const arrayOfPages = useMemo(() => {
-		const pageNumbers = Array.from({ length: pageCount }, (_, i) => i + 1);
-		if (pageCount < radius + 1) return pageNumbers.slice(1, pageCount - 1);
-		else if (pageX < radius) return pageNumbers.slice(1, Math.min(pageX + rate, radius));
-		else if (pageX > pageCount - Math.floor(radius / 2)) return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
-		else return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
-	}, [pageCount, pageX]);
-	return /* @__PURE__ */ jsxs(Wrapper, { children: [
-		/* @__PURE__ */ jsx(Btn, {
-			disabled: pageX <= 1,
-			onClick: setPage(pageX - 1),
-			children: /* @__PURE__ */ jsx(GoIcon, {
-				icon: "goLeft",
-				isActive: pageX > 1
-			})
-		}),
-		/* @__PURE__ */ jsx(PageBtn, {
-			isCurrent: pageX === 1,
-			onClick: setPage(1),
-			children: 1
-		}),
-		arrayOfPages[0] > 2 && /* @__PURE__ */ jsx(DotsWrapper, { children: "..." }),
-		arrayOfPages?.map((number) => /* @__PURE__ */ jsx(PageBtn, {
-			isCurrent: pageX === number,
-			onClick: setPage(number ?? 1),
-			children: number
-		}, number)),
-		arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && /* @__PURE__ */ jsx(DotsWrapper, { children: "..." }),
-		pageCount !== 1 && /* @__PURE__ */ jsx(PageBtn, {
-			isCurrent: pageX === pageCount,
-			onClick: setPage(pageCount),
-			children: pageCount
-		}),
-		/* @__PURE__ */ jsx(Btn, {
-			disabled: pageX >= pageCount,
-			onClick: setPage(pageX + 1),
-			children: /* @__PURE__ */ jsx(GoIcon, {
-				icon: "goRight",
-				isActive: pageX < pageCount
-			})
-		})
-	] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
+var Pagination = function (_a) {
+    var onPageChange = _a.onPageChange, _b = _a.itemPerPage, itemPerPage = _b === void 0 ? 3 : _b, _c = _a.itemCount, itemCount = _c === void 0 ? 0 : _c, page = _a.page, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.rate, rate = _e === void 0 ? 4 : _e, customPaginationHandler = _a.customPaginationHandler;
+    var setPage = useCallback(function (number) { return function () {
+        if (customPaginationHandler) {
+            customPaginationHandler(number, itemPerPage);
+            return;
+        }
+        if (onPageChange) {
+            onPageChange(number, itemPerPage);
+        }
+    }; }, [itemPerPage, onPageChange, customPaginationHandler]);
+    var pageX = page !== null && page !== void 0 ? page : 1;
+    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
+    var arrayOfPages = useMemo(function () {
+        var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
+        // first and last page are still visible
+        // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
+        if (pageCount < radius + 1) {
+            return pageNumbers.slice(1, pageCount - 1);
+            // if current page is less than radius (display first radius pages)
+        }
+        else if (pageX < radius) {
+            return pageNumbers.slice(1, Math.min(pageX + rate, radius));
+            // display last radius pages
+        }
+        else if (pageX > pageCount - Math.floor(radius / 2)) {
+            return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
+        }
+        else {
+            // display dispersion of 2 chars from current page (part between dots)
+            return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
+        }
+    }, [pageCount, pageX]);
+    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), arrayOfPages[0] > 2 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
 };
-//#endregion
-export { Pagination as default };
+export default Pagination;

package/ui/Elements/Pagination/index.d.ts

@@ -1,4 +1,5 @@
-import Pagination from './Pagination';
+import { default as Pagination } from './Pagination';
+
 export type { PaginationProps } from './Pagination';
 export { Pagination };
 export default Pagination;

package/ui/Elements/Pagination/index.js

@@ -1,5 +1,3 @@
-import Pagination from "./Pagination.js";
-//#region packages/ui/Elements/Pagination/index.ts
-var Pagination_default = Pagination;
-//#endregion
-export { Pagination, Pagination_default as default };
+import Pagination from './Pagination';
+export { Pagination };
+export default Pagination;

package/ui/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -1,8 +1,9 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
 import { PaginationProps } from '../';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<PaginationProps>;
+    component: import('react').FC<PaginationProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Pagination/stories/Pagination.stories.js

@@ -0,0 +1,48 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pagination } from '../';
+var meta = {
+    title: 'Elements/Pagination',
+    component: Pagination,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+var withSetState = function (arg) {
+    var _a = useState(1), page = _a[0], setPage = _a[1];
+    return _jsx(Pagination, __assign({}, arg, { page: page, onPageChange: setPage }));
+};
+export var Default = {
+    args: {
+        itemCount: 100,
+        itemPerPage: 8,
+    },
+    render: withSetState,
+};
+export var ManyPages = {
+    args: {
+        itemCount: 1000,
+        itemPerPage: 8,
+    },
+    render: withSetState,
+};
+export var Shorter = {
+    args: {
+        itemCount: 100,
+        itemPerPage: 8,
+        radius: 3,
+        rate: 1,
+    },
+    render: withSetState,
+};

package/ui/Elements/Pagination/styled.d.ts

@@ -1,14 +1,15 @@
-export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+/// <reference types="react" />
+export declare const Wrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const Btn: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
     disabled: boolean;
 }, never>;
-export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const ArrowIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
     isActive: boolean;
 }, never>;
-export declare const GoIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const GoIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
     isActive: boolean;
 }, never>;
-export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const PageBtn: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const DotsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const PageBtn: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
     isCurrent: boolean;
 }, never>;

package/ui/Elements/Pagination/styled.js

@@ -1,64 +1,26 @@
-import Icon_default from "../Icon/index.js";
-import styled$1, { x } from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
-//#region packages/ui/Elements/Pagination/styled.tsx
-const Wrapper = styled$1(x.div)`
-  display: inline-flex;
-  align-items: center;
-
-  & > *:not(:last-child) {
-    margin-right: 1px;
-    @media (min-width: 1024px) {
-      margin-right: 4px;
-    }
-  }
-`;
-const Btn = styled$1.button`
-  background-color: transparent;
-  border: none;
-  cursor: ${({ disabled }) => disabled ? "default" : "pointer"};
-  opacity: ${({ disabled }) => disabled ? 0 : 1};
-`;
-const ArrowIcon = styled$1(Icon_default)`
-  border-radius: 50%;
-  aspect-ratio: 1 / 1;
-  width: 16px;
-  display: flex;
-  align-items: center;
-  color: blue2;
-
-  &:hover {
-    color: blue2;
-  }
-`;
-const GoIcon = styled$1(ArrowIcon)`
-  margin: 0 8px;
-  font-size: 12px;
-  & > svg {
-    width: 10px;
-  }
-`;
-const DotsWrapper = styled$1.div`
-  color: gray1;
-`;
-const PageBtn = styled$1.span`
-  height: 18px;
-  min-width: 18px;
-  display: flex;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  margin: 0 4px;
-  color: ${({ isCurrent }) => isCurrent ? th$1.color("red1") : th$1.color("gray1")};
-  font-size: 14px;
-  font-weight: ${({ isCurrent }) => isCurrent ? th$1.fontWeight("semiBold") : th$1.fontWeight("normal")};
-  font-family: ${th$1("fonts.primary")};
-  line-height: 1em;
-
-  &:hover {
-    color: blue2;
-  }
-`;
-//#endregion
-export { ArrowIcon, Btn, DotsWrapper, GoIcon, PageBtn, Wrapper };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import Icon from '../Icon';
+export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"])));
+export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"], ["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 0 : 1);
+});
+export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
+export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"])));
+export var DotsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: gray1;\n"], ["\n  color: gray1;\n"])));
+export var PageBtn = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"])), function (_a) {
+    var isCurrent = _a.isCurrent;
+    return (isCurrent ? th.color('red1') : th.color('gray1'));
+}, function (_a) {
+    var isCurrent = _a.isCurrent;
+    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('normal'));
+}, th('fonts.primary'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/Portal/index.d.ts

@@ -1,4 +1,5 @@
-import { type FC, type ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
+
 export declare const Portal: FC<{
     children?: ReactNode;
 }>;

package/ui/Elements/Portal/index.js

@@ -1,23 +1,24 @@
-import { useEffect, useState } from "react";
-import ReactDom from "react-dom";
-//#region packages/ui/Elements/Portal/index.ts
-const Portal = ({ children }) => {
-	const [container] = useState(() => document.createElement("div"));
-	useEffect(() => {
-		try {
-			document.body.appendChild(container);
-		} catch (e) {
-			console.log(e);
-		}
-		return () => {
-			try {
-				document.body.removeChild(container);
-			} catch (e) {
-				console.log(e);
-			}
-		};
-	}, []);
-	return ReactDom.createPortal(children, container);
+import { useEffect, useState } from 'react';
+import ReactDom from 'react-dom';
+export var Portal = function (_a) {
+    var children = _a.children;
+    var container = useState(function () { return document.createElement('div'); })[0];
+    useEffect(function () {
+        try {
+            document.body.appendChild(container);
+        }
+        catch (e) {
+            console.log(e);
+        }
+        return function () {
+            try {
+                document.body.removeChild(container);
+            }
+            catch (e) {
+                console.log(e);
+            }
+        };
+    }, []);
+    return ReactDom.createPortal(children, container);
 };
-//#endregion
-export { Portal, Portal as default };
+export default Portal;

package/ui/Elements/ProgressBar/ProgressBar.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 type Props = {
     progress?: number;
     status?: 'loading' | 'finished' | 'error';

package/ui/Elements/ProgressBar/ProgressBar.js

@@ -1,17 +1,9 @@
-import { Progress, ProgressDescription, StyledProgressBar } from "./styles.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/ProgressBar/ProgressBar.tsx
-const ProgressBar = ({ progress = 0, status, errorMessage, noText, variant }) => {
-	if (progress > 100 || progress < 0) console.warn("Progress value should be number between 0 and 100.");
-	return /* @__PURE__ */ jsxs(StyledProgressBar, {
-		status,
-		variant,
-		children: [/* @__PURE__ */ jsx(Progress, {
-			progress,
-			status
-		}), !noText && /* @__PURE__ */ jsx(ProgressDescription, { children: status === "error" && errorMessage ? errorMessage : `${progress}%` })]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledProgressBar, Progress, ProgressDescription } from './styles';
+var ProgressBar = function (_a) {
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, status = _a.status, errorMessage = _a.errorMessage, noText = _a.noText, variant = _a.variant;
+    if (progress > 100 || progress < 0)
+        console.warn('Progress value should be number between 0 and 100.');
+    return (_jsxs(StyledProgressBar, { status: status, variant: variant, children: [_jsx(Progress, { progress: progress, status: status }), !noText && _jsx(ProgressDescription, { children: status === 'error' && errorMessage ? errorMessage : "".concat(progress, "%") })] }));
 };
-//#endregion
-export { ProgressBar as default };
+export default ProgressBar;

package/ui/Elements/ProgressBar/index.d.ts

@@ -1,3 +1,4 @@
-import ProgressBar from './ProgressBar';
+import { default as ProgressBar } from './ProgressBar';
+
 export { ProgressBar };
 export default ProgressBar;

package/ui/Elements/ProgressBar/index.js

@@ -1,5 +1,3 @@
-import ProgressBar from "./ProgressBar.js";
-//#region packages/ui/Elements/ProgressBar/index.ts
-var ProgressBar_default = ProgressBar;
-//#endregion
-export { ProgressBar, ProgressBar_default as default };
+import ProgressBar from './ProgressBar';
+export { ProgressBar };
+export default ProgressBar;

package/ui/Elements/ProgressBar/stories/ProgressBar.stories.d.ts

@@ -1,12 +1,13 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<{
-        progress?: number;
-        status?: "loading" | "finished" | "error";
-        errorMessage?: string;
-        noText?: boolean;
-        variant?: "normal" | "thin";
+    component: import('react').FC<{
+        progress?: number | undefined;
+        status?: "error" | "loading" | "finished" | undefined;
+        errorMessage?: string | undefined;
+        noText?: boolean | undefined;
+        variant?: "normal" | "thin" | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/ProgressBar/stories/ProgressBar.stories.js

@@ -0,0 +1,27 @@
+import ProgressBar from '../ProgressBar';
+var meta = {
+    title: 'Elements/ProgressBar',
+    component: ProgressBar,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Loading = {
+    args: {
+        progress: 10,
+        status: "loading"
+    },
+};
+export var Finished = {
+    args: {
+        progress: 100,
+        status: "finished"
+    },
+};
+export var Error = {
+    args: {
+        progress: 30,
+        status: "error",
+        errorMessage: "There has been some issues on the way."
+    },
+};

package/ui/Elements/ProgressBar/styles.d.ts

@@ -1,9 +1,9 @@
-export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledProgressBar: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     status: string | null | undefined;
-    variant?: "normal" | "thin";
+    variant?: "normal" | "thin" | undefined;
 }, never>;
-export declare const Progress: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Progress: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     progress: number;
     status: string | null | undefined;
 }, never>;
-export declare const ProgressDescription: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const ProgressDescription: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;