@atomazing-org/design-system 1.0.5 → 1.0.7

package/build/utils/timeAgo.js

@@ -1,56 +0,0 @@
-/**
- * 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/utils/useResponsiveDisplay.d.ts

@@ -1,7 +0,0 @@
-/**
- * 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/utils/useResponsiveDisplay.js

@@ -1,22 +0,0 @@
-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/index.d.ts

@@ -1,187 +0,0 @@
-export {
-  systemInfo,
-  timeAgo,
-  timeAgoFromStart,
-  displayGreeting,
-  getDayIdentifier,
-  useResponsiveDisplay,
-} from "./build/utils";
-
-export {
-  fadeIn,
-  fadeInLeft,
-  pulseAnimation,
-  ring,
-  rotate,
-  rotateSlideBarIcons,
-  scale,
-  slideIn,
-  slideInBottom,
-  typographyProps,
-  typographyVariants,
-  zoomIn,
-  commonComponentProps,
-} from "./build/styles";
-
-export { DialogBtn, Loading, PathName } from "./build/components";
-
-import "@emotion/react";
-import "@mui/material/styles";
-import "@mui/material/Typography";
-import "react";
-
-declare module "@emotion/react" {
-  export interface Theme {
-    /**
-     * Emotion Primary color
-     */
-    primary: string;
-    /**
-     * Emotion Background color
-     */
-    secondary: string;
-    /**
-     * Emotion darkmode
-     */
-    darkmode: boolean;
-  }
-}
-
-/// <reference types="@mui/types" />
-declare module "@mui/material/styles" {
-  export interface TypographyVariants {
-    text_xl_regular: React.CSSProperties;
-    text_lg_regular: React.CSSProperties;
-    text_md_regular: React.CSSProperties;
-    text_sm_regular: React.CSSProperties;
-    text_xs_regular: React.CSSProperties;
-    text_2xs_regular: React.CSSProperties;
-
-    text_xl_bold: React.CSSProperties;
-    text_lg_bold: React.CSSProperties;
-    text_md_bold: React.CSSProperties;
-    text_sm_bold: React.CSSProperties;
-    text_xs_bold: React.CSSProperties;
-    text_2xs_bold: React.CSSProperties;
-
-    text_xl_semibold: React.CSSProperties;
-    text_lg_semibold: React.CSSProperties;
-    text_md_semibold: React.CSSProperties;
-    text_sm_semibold: React.CSSProperties;
-    text_xs_semibold: React.CSSProperties;
-    text_2xs_semibold: React.CSSProperties;
-
-    text_xl_thin: React.CSSProperties;
-    text_lg_thin: React.CSSProperties;
-    text_md_thin: React.CSSProperties;
-    text_sm_thin: React.CSSProperties;
-    text_xs_thin: React.CSSProperties;
-    text_2xs_thin: React.CSSProperties;
-
-    display_2xl_regular: React.CSSProperties;
-    display_xl_regular: React.CSSProperties;
-    display_lg_regular: React.CSSProperties;
-    display_md_regular: React.CSSProperties;
-    display_sm_regular: React.CSSProperties;
-    display_xs_regular: React.CSSProperties;
-
-    display_2xl_bold: React.CSSProperties;
-    display_xl_bold: React.CSSProperties;
-    display_lg_bold: React.CSSProperties;
-    display_md_bold: React.CSSProperties;
-    display_sm_bold: React.CSSProperties;
-    display_xs_bold: React.CSSProperties;
-  }
-
-  // allow configuration using `createTheme()`
-  export interface TypographyVariantsOptions {
-    text_xl_regular?: React.CSSProperties;
-    text_lg_regular?: React.CSSProperties;
-    text_md_regular?: React.CSSProperties;
-    text_sm_regular?: React.CSSProperties;
-    text_xs_regular?: React.CSSProperties;
-    text_2xs_regular?: React.CSSProperties;
-
-    text_xl_bold?: React.CSSProperties;
-    text_lg_bold?: React.CSSProperties;
-    text_md_bold?: React.CSSProperties;
-    text_sm_bold?: React.CSSProperties;
-    text_xs_bold?: React.CSSProperties;
-    text_2xs_bold?: React.CSSProperties;
-
-    text_xl_semibold?: React.CSSProperties;
-    text_lg_semibold?: React.CSSProperties;
-    text_md_semibold?: React.CSSProperties;
-    text_sm_semibold?: React.CSSProperties;
-    text_xs_semibold?: React.CSSProperties;
-    text_2xs_semibold?: React.CSSProperties;
-
-    text_xl_thin?: React.CSSProperties;
-    text_lg_thin?: React.CSSProperties;
-    text_md_thin?: React.CSSProperties;
-    text_sm_thin?: React.CSSProperties;
-    text_xs_thin?: React.CSSProperties;
-    text_2xs_thin?: React.CSSProperties;
-
-    display_2xl_regular?: React.CSSProperties;
-    display_xl_regular?: React.CSSProperties;
-    display_lg_regular?: React.CSSProperties;
-    display_md_regular?: React.CSSProperties;
-    display_sm_regular?: React.CSSProperties;
-    display_xs_regular?: React.CSSProperties;
-
-    display_2xl_bold?: React.CSSProperties;
-    display_xl_bold?: React.CSSProperties;
-    display_lg_bold?: React.CSSProperties;
-    display_md_bold?: React.CSSProperties;
-    display_sm_bold?: React.CSSProperties;
-    display_xs_bold?: React.CSSProperties;
-  }
-}
-
-// Update the Typography's variant prop options
-declare module "@mui/material/Typography" {
-  export interface TypographyPropsVariantOverrides {
-    text_xl_regular: true;
-    text_lg_regular: true;
-    text_md_regular: true;
-    text_sm_regular: true;
-    text_xs_regular: true;
-    text_2xs_regular: true;
-
-    text_xl_bold: true;
-    text_lg_bold: true;
-    text_md_bold: true;
-    text_sm_bold: true;
-    text_xs_bold: true;
-    text_2xs_bold: true;
-
-    text_xl_semibold: true;
-    text_lg_semibold: true;
-    text_md_semibold: true;
-    text_sm_semibold: true;
-    text_xs_semibold: true;
-    text_2xs_semibold: true;
-
-    text_xl_thin: true;
-    text_lg_thin: true;
-    text_md_thin: true;
-    text_sm_thin: true;
-    text_xs_thin: true;
-    text_2xs_thin: true;
-
-    display_2xl_regular: true;
-    display_xl_regular: true;
-    display_lg_regular: true;
-    display_md_regular: true;
-    display_sm_regular: true;
-    display_xs_regular: true;
-
-    display_2xl_bold: true;
-    display_xl_bold: true;
-    display_lg_bold: true;
-    display_md_bold: true;
-    display_sm_bold: true;
-    display_xs_bold: true;
-  }
-}

package/index.js

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