@atomazing-org/design-system 1.0.0 → 1.0.1

package/README.MD

@@ -17,7 +17,7 @@ The `@atomazing/design-system` provides a set of useful utils, mui style extensi
 Just install package from npm
 
 ```
-npm i @atomazing/design-system
+npm i @atomazing-org/design-system
 ```
 
 ## Package structure

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export { systemInfo, timeAgo, timeAgoFromStart, displayGreeting, getDayIdentifier, useResponsiveDisplay, } from "./src/utils";
+export { fadeIn, fadeInLeft, pulseAnimation, ring, rotate, rotateSlideBarIcons, scale, slideIn, slideInBottom, typographyProps, typographyVariants, zoomIn, commonComponentProps, } from "./src/styles";
+export { DialogBtn, Loading, PathName } from "./src/components";

package/build/index.js

@@ -0,0 +1,3 @@
+export { systemInfo, timeAgo, timeAgoFromStart, displayGreeting, getDayIdentifier, useResponsiveDisplay, } from "./src/utils";
+export { fadeIn, fadeInLeft, pulseAnimation, ring, rotate, rotateSlideBarIcons, scale, slideIn, slideInBottom, typographyProps, typographyVariants, zoomIn, commonComponentProps, } from "./src/styles";
+export { DialogBtn, Loading, PathName } from "./src/components";

package/build/src/components/DialogBtn.d.ts

@@ -0,0 +1,5 @@
+export declare const DialogBtn: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "color" | "children" | "sx" | "variant" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/build/src/components/DialogBtn.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+export const DialogBtn = styled(Button) `
+  padding: 10px 16px;
+  border-radius: 16px;
+  font-size: 16px;
+  margin: 8px;
+`;

package/build/src/components/ErrorBoundary.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { ErrorInfo } from "react";
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+/**
+ * ErrorBoundary component that catches and displays errors.
+ */
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleClearData(): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export default ErrorBoundary;

package/build/src/components/ErrorBoundary.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled from "@emotion/styled";
+import { ErrorOutlineRounded } from "@mui/icons-material";
+import { Box, Button } from "@mui/material";
+/**
+ * ErrorBoundary component that catches and displays errors.
+ */
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        // eslint-disable-next-line no-console -- Выводим ошибку в консоль
+        console.error("Error:", error);
+        // eslint-disable-next-line no-console -- Выводим ошибку в консоль
+        console.error("Error Info:", errorInfo);
+    }
+    handleClearData() {
+        localStorage.clear();
+        sessionStorage.clear();
+        window.location.reload();
+    }
+    render() {
+        const { state, props } = this;
+        if (state.hasError) {
+            return (_jsxs(Container, { children: [_jsx(ErrorHeader, { children: _jsx(Box, { children: "\u041E\u0448\u0438\u0431\u043A\u0430.\u00A0" }) }), _jsxs("h3", { children: [_jsxs(Box, { style: { color: "#ff3131", display: "inline-block" }, children: [_jsx(ErrorOutlineRounded, { sx: { verticalAlign: "middle", mb: "4px" } }), " ", "ERROR:"] }), " ", _jsxs(Box, { translate: "no", children: ["[", state.error?.name, "] ", state.error?.message] }), _jsxs(Box, { style: { color: "#ff3131", display: "inline-block" }, children: [_jsx(ErrorOutlineRounded, { sx: { verticalAlign: "middle", mb: "4px" } }), " ", "Stack:"] }), " ", _jsxs(Box, { translate: "no", children: ["[", state.error?.stack, "]"] })] })] }));
+        }
+        return props.children;
+    }
+}
+const Container = styled.div `
+  margin: 0 8vw;
+  @media (max-width: 768px) {
+    margin: 0;
+  }
+`;
+const ErrorHeader = styled.h1 `
+  margin-top: 32px;
+  margin-bottom: 32px;
+  font-size: 36px;
+  color: #ff3131;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @media (max-width: 768px) {
+    text-align: left;
+    justify-content: left;
+    font-size: 30px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+`;
+const StyledButton = styled(Button) `
+  padding: 10px 30px;
+  border-radius: 12px;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`;
+StyledButton.defaultProps = {
+    variant: "outlined",
+    size: "large",
+};
+export default ErrorBoundary;

package/build/src/components/Loading.d.ts

@@ -0,0 +1 @@
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;

package/build/src/components/Loading.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { Box, CircularProgress } from '@mui/material';
+export const Loading = () => {
+    const [showLoading, setShowLoading] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setShowLoading(true);
+        }, 100); // Show the loading spinner after 100 milliseconds
+        return () => clearTimeout(timer);
+    }, []);
+    return (_jsx(Container, { children: showLoading && (_jsxs(_Fragment, { children: [_jsx(CircularProgress, { "aria-label": "loading", size: 80, thickness: 4 }), _jsx("h3", { style: { opacity: 0.8 }, children: "Loading Page..." })] })) }));
+};
+const Container = styled(Box) `
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	text-align: center;
+	gap: 8px;
+`;

package/build/src/components/PathName.d.ts

@@ -0,0 +1,4 @@
+export declare const PathName: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/build/src/components/PathName.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+export const PathName = styled.code `
+  background: #000000c8;
+  color: white;
+  font-family: consolas !important;
+  padding: 4px 6px;
+  border-radius: 8px;
+`;

package/build/src/components/index.d.ts

@@ -0,0 +1,3 @@
+export { DialogBtn } from "./DialogBtn";
+export { Loading } from "./Loading";
+export { PathName } from "./PathName";

package/build/src/components/index.js

@@ -0,0 +1,3 @@
+export { DialogBtn } from "./DialogBtn";
+export { Loading } from "./Loading";
+export { PathName } from "./PathName";

package/build/src/styles/commonComponents.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from "@mui/material";
+export declare const commonComponentProps: Theme["components"];

package/build/src/styles/commonComponents.js

@@ -0,0 +1,69 @@
+export const commonComponentProps = {
+    MuiTooltip: {
+        defaultProps: {
+            disableInteractive: true,
+            style: {
+                backdropFilter: "blur(6px)",
+                WebkitBackdropFilter: "blur(6px)",
+            },
+        },
+    },
+    MuiButton: {
+        defaultProps: {
+            sx: {
+                p: "12px 24px",
+                borderRadius: "14px",
+            },
+        },
+    },
+    MuiSelect: {
+        defaultProps: {
+            style: {
+                borderRadius: "18px",
+            },
+        },
+    },
+    MuiDialog: {
+        defaultProps: {
+            PaperProps: {
+                style: {
+                    padding: "12px",
+                    borderRadius: "24px",
+                },
+            },
+        },
+    },
+    MuiAvatar: {
+        defaultProps: {
+            style: {
+                fontWeight: 500,
+                color: "#fff",
+            },
+        },
+    },
+    MuiAlert: {
+        styleOverrides: {
+            root: {
+                borderRadius: "16px",
+            },
+        },
+    },
+    MuiTextField: {
+        styleOverrides: {
+            root: {
+                "& .MuiInputBase-root": {
+                    borderRadius: "16px",
+                },
+            },
+        },
+    },
+    MuiMenuItem: {
+        styleOverrides: {
+            root: {
+                "& .MuiInputBase-root": {
+                    borderRadius: "16px",
+                },
+            },
+        },
+    },
+};

package/build/src/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { fadeIn, fadeInLeft, pulseAnimation, ring, rotate, rotateSlideBarIcons, scale, slideIn, slideInBottom, zoomIn, } from "./keyframes";
+export { typographyProps, typographyVariants } from "./typography";
+export { commonComponentProps } from "./commonComponents";

package/build/src/styles/index.js

@@ -0,0 +1,3 @@
+export { fadeIn, fadeInLeft, pulseAnimation, ring, rotate, rotateSlideBarIcons, scale, slideIn, slideInBottom, zoomIn, } from "./keyframes";
+export { typographyProps, typographyVariants } from "./typography";
+export { commonComponentProps } from "./commonComponents";

package/build/src/styles/keyframes.d.ts

@@ -0,0 +1,10 @@
+export declare const fadeInLeft: string;
+export declare const fadeIn: string;
+export declare const zoomIn: string;
+export declare const slideIn: string;
+export declare const slideInBottom: string;
+export declare const scale: string;
+export declare const pulseAnimation: (clr: string, shadowBlur?: number) => string;
+export declare const rotateSlideBarIcons: string;
+export declare const rotate: (angle: string) => string;
+export declare const ring: string;

package/build/src/styles/keyframes.js

@@ -0,0 +1,108 @@
+import { keyframes } from "@emotion/css";
+export const fadeInLeft = keyframes `
+    from {
+        opacity: 0;
+        transform: translateX(-40px)
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0px)
+    }
+`;
+export const fadeIn = keyframes `
+    from {
+        opacity: 0;
+    }
+`;
+export const zoomIn = keyframes `
+    0% {
+        scale: 1;
+    }
+    50% {
+        scale: 1.2;
+    }
+		100% {
+        scale: 1;
+    }
+`;
+export const slideIn = keyframes `
+    from{
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+`;
+export const slideInBottom = keyframes `
+  from{
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+`;
+export const scale = keyframes `
+    from {
+        transform: scale(0)
+    }
+    to {
+        transform: scale(1)
+    }
+`;
+export const pulseAnimation = (clr, shadowBlur = 12) => keyframes `
+0% {
+  transform: scale(0.95);
+  box-shadow: 0 0 0 0 ${clr}b2;
+}
+70% {
+  transform: scale(1);
+  box-shadow: 0 0 0 ${shadowBlur}px ${clr}00;
+}
+100% {
+  transform: scale(0.95);
+  box-shadow: 0 0 0 0 ${clr}00;
+}
+`;
+export const rotateSlideBarIcons = keyframes `
+    0% {
+        transform: scale(1) rotate(0deg);
+    }
+    50% {
+        transform: scale(0.5) rotate(90deg);
+    }
+    100% {
+        transform: scale(1) rotate(360deg);
+    }`;
+export const rotate = (angle) => keyframes `
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(${angle});
+    }`;
+export const ring = keyframes `
+  0% { -webkit-transform: rotateZ(0); }
+  1% { -webkit-transform: rotateZ(30deg); }
+  3% { -webkit-transform: rotateZ(-28deg); }
+  5% { -webkit-transform: rotateZ(34deg); }
+  7% { -webkit-transform: rotateZ(-32deg); }
+  9% { -webkit-transform: rotateZ(30deg); }
+  11% { -webkit-transform: rotateZ(-28deg); }
+  13% { -webkit-transform: rotateZ(26deg); }
+  15% { -webkit-transform: rotateZ(-24deg); }
+  17% { -webkit-transform: rotateZ(22deg); }
+  19% { -webkit-transform: rotateZ(-20deg); }
+  21% { -webkit-transform: rotateZ(18deg); }
+  23% { -webkit-transform: rotateZ(-16deg); }
+  25% { -webkit-transform: rotateZ(14deg); }
+  27% { -webkit-transform: rotateZ(-12deg); }
+  29% { -webkit-transform: rotateZ(10deg); }
+  31% { -webkit-transform: rotateZ(-8deg); }
+  33% { -webkit-transform: rotateZ(6deg); }
+  35% { -webkit-transform: rotateZ(-4deg); }
+  37% { -webkit-transform: rotateZ(2deg); }
+  39% { -webkit-transform: rotateZ(-1deg); }
+  41% { -webkit-transform: rotateZ(1deg); }
+  43% { -webkit-transform: rotateZ(0); }
+  100% { -webkit-transform: rotateZ(0); }
+`;

package/build/src/styles/typography.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from "@mui/material";
+import { TypographyOptions } from "@mui/material/styles/createTypography";
+export declare const typographyProps: Theme["components"];
+export declare const typographyVariants: TypographyOptions;

package/build/src/styles/typography.js

@@ -0,0 +1,160 @@
+export const typographyProps = {
+    MuiTypography: {
+        defaultProps: {
+            variantMapping: {
+                text_xl_regular: "p",
+                text_lg_regular: "p",
+                text_md_regular: "p",
+                text_sm_regular: "p",
+                text_xs_regular: "p",
+                text_2xs_regular: "p",
+                text_xl_bold: "p",
+                text_lg_bold: "p",
+                text_md_bold: "p",
+                text_sm_bold: "p",
+                text_xs_bold: "p",
+                text_2xs_bold: "p",
+                text_xl_semibold: "p",
+                text_lg_semibold: "p",
+                text_md_semibold: "p",
+                text_sm_semibold: "p",
+                text_xs_semibold: "p",
+                text_2xs_semibold: "p",
+                text_xl_thin: "p",
+                text_lg_thin: "p",
+                text_md_thin: "p",
+                text_sm_thin: "p",
+                text_xs_thin: "p",
+                text_2xs_thin: "p",
+                display_2xl_regular: "h1",
+                display_xl_regular: "h2",
+                display_lg_regular: "h3",
+                display_md_regular: "h4",
+                display_sm_regular: "h5",
+                display_xs_regular: "h6",
+                display_2xl_bold: "h1",
+                display_xl_bold: "h2",
+                display_lg_bold: "h3",
+                display_md_bold: "h4",
+                display_sm_bold: "h5",
+                display_xs_bold: "h6",
+            },
+        },
+    },
+};
+export const typographyVariants = {
+    // TEXT_REGULAR
+    text_xl_regular: {
+        font: "400 20px/30px inherit inherit",
+    },
+    text_lg_regular: {
+        font: "400 18px/28px inherit inherit",
+    },
+    text_md_regular: {
+        font: "400 16px/24px inherit inherit",
+    },
+    text_sm_regular: {
+        font: "400 14px/20px inherit inherit",
+    },
+    text_xs_regular: {
+        font: "400 12px/18px inherit inherit",
+    },
+    text_2xs_regular: {
+        font: "400 10px/14px inherit inherit",
+    },
+    // TEXT_BOLD
+    text_xl_bold: {
+        font: "600 20px/30px inherit inherit",
+    },
+    text_lg_bold: {
+        font: "700 18px/28px inherit inherit",
+    },
+    text_md_bold: {
+        font: "700 16px/24px inherit inherit",
+    },
+    text_sm_bold: {
+        font: "700 14px/20px inherit inherit",
+    },
+    text_xs_bold: {
+        font: "700 12px/18px inherit inherit",
+    },
+    text_2xs_bold: {
+        font: "700 10px/14px inherit inherit",
+    },
+    // TEXT_SEMIBOLD
+    text_xl_semibold: {
+        font: "600 20px/30px inherit inherit",
+    },
+    text_lg_semibold: {
+        font: "600 18px/28px inherit inherit",
+    },
+    text_md_semibold: {
+        font: "600 16px/24px inherit inherit",
+    },
+    text_sm_semibold: {
+        font: "600 14px/20px inherit inherit",
+    },
+    text_xs_semibold: {
+        font: "600 12px/18px inherit inherit",
+    },
+    text_2xs_semibold: {
+        font: "600 10px/14px inherit inherit",
+    },
+    // TEXT_THIN
+    text_xl_thin: {
+        font: "100 20px/30px inherit inherit",
+    },
+    text_lg_thin: {
+        font: "100 18px/28px inherit inherit",
+    },
+    text_md_thin: {
+        font: "100 16px/24px inherit inherit",
+    },
+    text_sm_thin: {
+        font: "100 14px/20px inherit inherit",
+    },
+    text_xs_thin: {
+        font: "100 12px/18px inherit inherit",
+    },
+    text_2xs_thin: {
+        font: "100 10px/14px inherit inherit",
+    },
+    // DISPLAY_REGULAR
+    display_2xl_regular: {
+        font: "400 72px/90px inherit inherit",
+    },
+    display_xl_regular: {
+        font: "400 60px/72px inherit inherit",
+    },
+    display_lg_regular: {
+        font: "400 48px/60px inherit inherit",
+    },
+    display_md_regular: {
+        font: "400 36px/44px inherit inherit",
+    },
+    display_sm_regular: {
+        font: "400 30px/38px inherit inherit",
+    },
+    display_xs_regular: {
+        font: "400 24px/32px inherit inherit",
+    },
+    // DISPLAY_BOLD
+    display_2xl_bold: {
+        font: "700 72px/90px inherit inherit",
+    },
+    display_xl_bold: {
+        font: "700 60px/72px inherit inherit",
+    },
+    display_lg_bold: {
+        font: "700 48px/60px inherit inherit",
+    },
+    display_md_bold: {
+        font: "700 36px/44px inherit inherit",
+    },
+    display_sm_bold: {
+        font: "700 30px/38px inherit inherit",
+    },
+    display_xs_bold: {
+        font: "700 24px/32px inherit inherit",
+    },
+};

package/build/src/utils/displayGreeting.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a greeting based on the current time.
+ * @returns {string} The appropriate greeting.
+ */
+export declare const displayGreeting: () => string;

package/build/src/utils/displayGreeting.js

@@ -0,0 +1,19 @@
+/**
+ * Returns a greeting based on the current time.
+ * @returns {string} The appropriate greeting.
+ */
+export const displayGreeting = () => {
+    const currentTime = new Date();
+    const currentHour = currentTime.getHours();
+    let greeting;
+    if (currentHour < 12 && currentHour >= 5) {
+        greeting = 'Доброе утро,';
+    }
+    else if (currentHour < 18 && currentHour > 12) {
+        greeting = 'Добрый день,';
+    }
+    else {
+        greeting = 'Добрый вечер,';
+    }
+    return greeting;
+};

package/build/src/utils/getDayIdentifier.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Function to extract year, month, and day from a Date object
+ */
+export declare const getDayIdentifier: (date: Date) => string;

package/build/src/utils/getDayIdentifier.js

@@ -0,0 +1,9 @@
+/**
+ * Function to extract year, month, and day from a Date object
+ */
+export const getDayIdentifier = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-based in JavaScript
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+};

package/build/src/utils/getSystemInfo.d.ts

@@ -0,0 +1,7 @@
+type OperatingSystem = "Windows" | "macOS" | "Linux" | "iOS" | "Android" | "Unknown";
+type Browser = "Chrome" | "Firefox" | "Safari" | "Edge" | "Unknown";
+export declare const systemInfo: {
+    os: OperatingSystem;
+    browser: Browser;
+};
+export {};

package/build/src/utils/getSystemInfo.js

@@ -0,0 +1,26 @@
+const { userAgent } = window.navigator;
+const getOperatingSystem = () => {
+    if (/windows nt/i.test(userAgent))
+        return "Windows";
+    if (/iphone|ipad|ipod/i.test(userAgent))
+        return "iOS";
+    if (/mac/i.test(userAgent))
+        return "macOS";
+    if (/linux/i.test(userAgent))
+        return "Linux";
+    if (/android/i.test(userAgent))
+        return "Android";
+    return "Unknown";
+};
+const getBrowser = () => {
+    if (/chrome/i.test(userAgent) && !/edge/i.test(userAgent))
+        return "Chrome";
+    if (/firefox/i.test(userAgent))
+        return "Firefox";
+    if (/safari/i.test(userAgent) && !/chrome/i.test(userAgent))
+        return "Safari";
+    if (/edg/i.test(userAgent))
+        return "Edge";
+    return "Unknown";
+};
+export const systemInfo = { os: getOperatingSystem(), browser: getBrowser() };

package/build/src/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { systemInfo } from "./getSystemInfo";
+export { timeAgo, timeAgoFromStart } from "./timeAgo";
+export { displayGreeting } from "./displayGreeting";
+export { getDayIdentifier } from "./getDayIdentifier";
+export { useResponsiveDisplay } from "./useResponsiveDisplay";

package/build/src/utils/index.js

@@ -0,0 +1,5 @@
+export { systemInfo } from "./getSystemInfo";
+export { timeAgo, timeAgoFromStart } from "./timeAgo";
+export { displayGreeting } from "./displayGreeting";
+export { getDayIdentifier } from "./getDayIdentifier";
+export { useResponsiveDisplay } from "./useResponsiveDisplay";

package/build/src/utils/timeAgo.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Converts a given date to a human-readable relative time string.
+ *
+ * @param {Date} date - The date to be converted.
+ * @param lang
+ * @returns {string} A string representing the relative time using `Intl` format (e.g., "2 days ago").
+ */
+export declare const timeAgo: (date: Date, lang?: string) => string;
+export declare const timeAgoFromStart: (date: Date, lang?: string) => string;

package/build/src/utils/timeAgo.js

@@ -0,0 +1,56 @@
+/**
+ * Converts a given date to a human-readable relative time string.
+ *
+ * @param {Date} date - The date to be converted.
+ * @param lang
+ * @returns {string} A string representing the relative time using `Intl` format (e.g., "2 days ago").
+ */
+export const timeAgo = (date, lang = navigator.language || 'en-US') => {
+    // Get the current date and time
+    const now = new Date();
+    date = new Date(date);
+    // Calculate the time difference in seconds
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+    // Create an Intl.RelativeTimeFormat instance with the user's language
+    const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
+    // Determine the appropriate unit and format the result
+    if (diffInSeconds < 60) {
+        return rtf.format(-diffInSeconds, 'second');
+    }
+    if (diffInSeconds < 3600) {
+        const minutes = Math.floor(diffInSeconds / 60);
+        return rtf.format(-minutes, 'minute');
+    }
+    if (diffInSeconds < 86_400) {
+        const hours = Math.floor(diffInSeconds / 3600);
+        return rtf.format(-hours, 'hour');
+    }
+    const days = Math.floor(diffInSeconds / 86_400);
+    return rtf.format(-days, 'day');
+};
+export const timeAgoFromStart = (date, lang = navigator.language || 'en-US') => {
+    const now = new Date();
+    date = new Date(date);
+    const difference = (date.getTime() - now.getTime()) / 1000;
+    const differenceHours = Math.floor(difference / (60 * 60));
+    const differenceMinutes = Math.floor((difference - 60 * 60 * differenceHours) / 60);
+    const diffInSeconds = Math.floor(difference - 60 * 60 * differenceHours - 60 * differenceMinutes);
+    const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
+    if (differenceMinutes === 0 && diffInSeconds < 60) {
+        return rtf.format(diffInSeconds, 'second');
+    }
+    if (differenceHours === 0 && differenceMinutes < 60) {
+        return rtf.format(differenceMinutes, 'minute');
+    }
+    if (differenceHours < 24) {
+        const hours = `${new Intl.RelativeTimeFormat(lang, { numeric: 'auto' }).format(differenceHours, 'hour')}`;
+        const minutes = ` ${new Intl.RelativeTimeFormat(lang, {
+            localeMatcher: 'lookup',
+            numeric: 'always',
+            style: 'long',
+        }).format(differenceMinutes, 'minute')}`.replace(/^\D+/, '');
+        return `${hours} ${minutes}`;
+    }
+    const days = Math.floor(diffInSeconds / 86_400);
+    return rtf.format(days, 'day');
+};

package/build/src/utils/useResponsiveDisplay.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A custom React hook to determine if the current device is a smaller device
+ * based on the screen width.
+ * @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
+ * @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
+ */
+export declare const useResponsiveDisplay: (breakpoint?: number) => boolean;

package/build/src/utils/useResponsiveDisplay.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+/**
+ * A custom React hook to determine if the current device is a smaller device
+ * based on the screen width.
+ * @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
+ * @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
+ */
+export const useResponsiveDisplay = (breakpoint = 768) => {
+    const [isSmallerDevice, setIsSmallerDevice] = useState(false);
+    useEffect(() => {
+        const checkScreenSize = () => {
+            setIsSmallerDevice(window.innerWidth < breakpoint);
+        };
+        checkScreenSize();
+        const handleResize = () => checkScreenSize();
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [breakpoint]);
+    return isSmallerDevice;
+};

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "@atomazing-org/design-system",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
+  "main": "build/index.js",
   "type": "module",
+  "types": "build/types/index.d.ts",
   "files": [
-    "dist"
+    "build",
+    "README.MD"
   ],
   "scripts": {
-    "build": "npx tsc",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "format:eslint": "npm run lint:eslint -- --fix",
-    "format:prettier": "npm run lint:prettier -- --write",
-    "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:ts",
-    "lint:eslint": "eslint \"**/*.{js,ts,tsx}\"",
-    "lint:prettier": "prettier \"**/*.{json,js,ts,tsx}\" --check",
-    "lint:ts": "tsc --noEmit",
-    "clean": "rimraf node_modules"
+    "build": "npx tsc"
   },
   "homepage": "https://github.com/atomazing/design-system",
   "keywords": [
@@ -32,18 +27,12 @@
   "license": "MIT",
   "description": "A library providing a set of useful utils, mui style extensions and components to build your application.",
   "devDependencies": {
-    "@atomazing-org/eslint-config": "1.1.0",
-    "typescript": "5.7.3",
-    "@types/react": "18.3.3"
+    "typescript": "^5.7.3",
+    "@types/react": "^18.3.3"
   },
   "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "@mui/material": "5.15.21",
-    "@mui/icons-material": "5.15.11",
-    "@emotion/css": "11.11.2",
-    "@emotion/styled": "11.11.0",
-    "@emotion/react": "11.11.4",
-    "prettier": "3.3.2"
+    "@mui/material": "^5.15.21",
+    "@mui/icons-material": "^5.15.11",
+    "@emotion/css": "^11.11.2"
   }
 }