@m4l/graphics 0.1.19 → 0.1.21

package/src/theme/palette.ts

@@ -1,216 +0,0 @@
-import { alpha } from '@mui/material/styles';
-
-// ----------------------------------------------------------------------
-
-function createGradient(color1: string, color2: string) {
-    return `linear-gradient(to bottom, ${color1}, ${color2})`;
-}
-
-export type ColorSchema = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
-
-export interface GradientsPaletteOptions {
-    primary: string;
-    info: string;
-    success: string;
-    warning: string;
-    error: string;
-}
-
-export interface ChartPaletteOptions {
-    violet: string[];
-    blue: string[];
-    green: string[];
-    yellow: string[];
-    red: string[];
-}
-
-export interface GridPaletteOptions {
-    sectionHeader: string;
-    rowHover: string;
-    divider: string;
-}
-
-declare module '@mui/material/styles/createPalette' {
-    interface TypeBackground {
-        neutral: string;
-        autofill: string;
-        header: string;
-    }
-    interface SimplePaletteColorOptions {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-    }
-    interface PaletteColor {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-    }
-    interface Palette {
-        gradients?: GradientsPaletteOptions;
-        chart: ChartPaletteOptions;
-        grid?: GridPaletteOptions;
-    }
-    interface PaletteOptions {
-        gradients?: GradientsPaletteOptions;
-        chart?: ChartPaletteOptions;
-        grid?: GridPaletteOptions;
-    }
-}
-
-declare module '@mui/material' {
-    interface Color {
-        0: string;
-        500_8: string;
-        500_12: string;
-        500_16: string;
-        500_24: string;
-        500_32: string;
-        500_48: string;
-        500_56: string;
-        500_80: string;
-    }
-}
-
-// SETUP COLORS
-const PRIMARY = {
-    lighter: '#C8FACD',
-    light: '#5BE584',
-    main: '#00AB55',
-    dark: '#007B55',
-    darker: '#005249',
-};
-const SECONDARY = {
-    lighter: '#D6E4FF',
-    light: '#84A9FF',
-    main: '#3366FF',
-    dark: '#1939B7',
-    darker: '#091A7A',
-};
-const INFO = {
-    lighter: '#D0F2FF',
-    light: '#74CAFF',
-    main: '#1890FF',
-    dark: '#0C53B7',
-    darker: '#04297A',
-};
-const SUCCESS = {
-    lighter: '#E9FCD4',
-    light: '#AAF27F',
-    main: '#54D62C',
-    dark: '#229A16',
-    darker: '#08660D',
-};
-const WARNING = {
-    lighter: '#FFF7CD',
-    light: '#FFE16A',
-    main: '#FFC107',
-    dark: '#B78103',
-    darker: '#7A4F01',
-};
-const ERROR = {
-    lighter: '#FFE7D9',
-    light: '#FFA48D',
-    main: '#FF4842',
-    dark: '#B72136',
-    darker: '#7A0C2E',
-};
-
-export const GREY = {
-    0: '#FFFFFF',
-    100: '#F9FAFB',
-    200: '#F4F6F8',
-    300: '#DFE3E8',
-    400: '#C4CDD5',
-    500: '#919EAB',
-    600: '#637381',
-    700: '#454F5B',
-    800: '#212B36',
-    900: '#161C24',
-    500_8: alpha('#919EAB', 0.08),
-    500_12: alpha('#919EAB', 0.12),
-    500_16: alpha('#919EAB', 0.16),
-    500_24: alpha('#919EAB', 0.24),
-    500_32: alpha('#919EAB', 0.32),
-    500_48: alpha('#919EAB', 0.48),
-    500_56: alpha('#919EAB', 0.56),
-    500_80: alpha('#919EAB', 0.8),
-};
-
-const GRADIENTS = {
-    primary: createGradient(PRIMARY.light, PRIMARY.main),
-    info: createGradient(INFO.light, INFO.main),
-    success: createGradient(SUCCESS.light, SUCCESS.main),
-    warning: createGradient(WARNING.light, WARNING.main),
-    error: createGradient(ERROR.light, ERROR.main),
-};
-
-const CHART_COLORS = {
-    violet: ['#826AF9', '#9E86FF', '#D0AEFF', '#F7D2FF'],
-    blue: ['#2D99FF', '#83CFFF', '#A5F3FF', '#CCFAFF'],
-    green: ['#2CD9C5', '#60F1C8', '#A4F7CC', '#C0F2DC'],
-    yellow: ['#FFE700', '#FFEF5A', '#FFF7AE', '#FFF3D6'],
-    red: ['#FF6C40', '#FF8F6D', '#FFBD98', '#FFF2D4'],
-};
-
-const COMMON = {
-    common: { black: '#000', white: '#fff' },
-    primary: { ...PRIMARY, contrastText: '#fff' },
-    secondary: { ...SECONDARY, contrastText: '#fff' },
-    info: { ...INFO, contrastText: '#fff' },
-    success: { ...SUCCESS, contrastText: GREY[800] },
-    warning: { ...WARNING, contrastText: GREY[800] },
-    error: { ...ERROR, contrastText: '#fff' },
-    grey: GREY,
-    gradients: GRADIENTS,
-    chart: CHART_COLORS,
-    divider: GREY[500_24],
-    action: {
-        hover: GREY[500_8],
-        selected: GREY[500_16],
-        disabled: GREY[500_80],
-        disabledBackground: GREY[500_24],
-        focus: GREY[500_24],
-        hoverOpacity: 0.08,
-        disabledOpacity: 0.48,
-    },
-};
-
-export const palette = {
-    light: {
-        ...COMMON,
-        mode: 'light',
-        text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
-        background: {
-            paper: '#fff',
-            default: '#fff',
-            neutral: GREY[200],
-            autocomplete: GREY[100],
-            header: '#F6F7F9',
-        },
-        action: { active: GREY[600], ...COMMON.action },
-        grid: { sectionHeader: '#F6F7F9', divider: '#EDEFF2', rowHover: '#FAFBFC' },
-    },
-    dark: {
-        ...COMMON,
-        mode: 'dark',
-        text: { primary: '#fff', secondary: GREY[500], disabled: GREY[600] },
-        background: {
-            paper: GREY[800],
-            default: GREY[900],
-            neutral: GREY[500_16],
-            autocomplete: GREY[800],
-            header: '#29313A',
-        },
-        action: { active: GREY[500], ...COMMON.action },
-        grid: { sectionHeader: '#29313A', divider: '#3E464F', rowHover: '#1F262F' },
-    },
-} as const;
-
-export default palette;

package/src/theme/shadows.ts

@@ -1,110 +0,0 @@
-// @mui
-import { alpha } from '@mui/material/styles';
-import { Shadows } from '@mui/material/styles/shadows';
-//
-import { palette } from './palette';
-
-// ----------------------------------------------------------------------
-
-export interface CustomShadowOptions {
-    z1: string;
-    z8: string;
-    z12: string;
-    z16: string;
-    z20: string;
-    z24: string;
-    //
-    primary: string;
-    secondary: string;
-    info: string;
-    success: string;
-    warning: string;
-    error: string;
-    //
-    card: string;
-    dialog: string;
-    dropdown: string;
-}
-
-declare module '@mui/material/styles' {
-    interface Theme {
-        customShadows: CustomShadowOptions;
-    }
-    interface ThemeOptions {
-        customShadows?: CustomShadowOptions;
-    }
-}
-
-const LIGHT_MODE = palette.light.grey[500];
-const DARK_MODE = '#000000';
-
-const createShadow = (color: string): Shadows => {
-    const transparent1 = alpha(color, 0.2);
-    const transparent2 = alpha(color, 0.14);
-    const transparent3 = alpha(color, 0.12);
-    return [
-        'none',
-        `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
-        `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
-        `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
-        `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
-        `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
-        `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
-        `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
-        `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
-        `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
-        `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
-        `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
-        `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
-        `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
-        `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
-        `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
-        `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
-        `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
-        `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
-        `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
-        `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
-        `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
-        `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
-        `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
-        `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`,
-    ];
-};
-
-const createCustomShadow = (color: string) => {
-    const transparent = alpha(color, 0.16);
-    return {
-        z1: `0 1px 2px 0 ${transparent}`,
-        z8: `0 8px 16px 0 ${transparent}`,
-        z12: `0 12px 24px -4px ${transparent}`,
-        z16: `0 16px 32px -4px ${transparent}`,
-        z20: `0 20px 40px -4px ${transparent}`,
-        z24: `0 24px 48px 0 ${transparent}`,
-        //
-        primary: `0 8px 16px 0 ${alpha(palette.light.primary.main, 0.24)}`,
-        info: `0 8px 16px 0 ${alpha(palette.light.info.main, 0.24)}`,
-        secondary: `0 8px 16px 0 ${alpha(palette.light.secondary.main, 0.24)}`,
-        success: `0 8px 16px 0 ${alpha(palette.light.success.main, 0.24)}`,
-        warning: `0 8px 16px 0 ${alpha(palette.light.warning.main, 0.24)}`,
-        error: `0 8px 16px 0 ${alpha(palette.light.error.main, 0.24)}`,
-        //
-        card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(color, 0.12)}`,
-        dialog: `-40px 40px 80px -8px ${alpha(palette.light.common.black, 0.24)}`,
-        dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(color, 0.24)}`,
-    };
-};
-
-export const customShadows = {
-    light: createCustomShadow(LIGHT_MODE),
-    dark: createCustomShadow(DARK_MODE),
-};
-
-export const shadows: {
-    light: Shadows;
-    dark: Shadows;
-} = {
-    light: createShadow(LIGHT_MODE),
-    dark: createShadow(DARK_MODE),
-};
-
-export default shadows;

package/src/theme/stretch.ts

@@ -1,10 +0,0 @@
-export {};
-
-declare module '@mui/material/styles' {
-    interface Theme {
-        stretch?: boolean;
-    }
-    interface ThemeOptions {
-        stretch?: boolean;
-    }
-}

package/src/theme/typography.ts

@@ -1,91 +0,0 @@
-// ----------------------------------------------------------------------
-
-import { pxToRem, responsiveFontSizes } from '../utils/getFontValue';
-
-const FONT_PRIMARY = 'Public Sans, sans-serif'; // Google Font
-// const FONT_SECONDARY = 'CircularStd, sans-serif'; // Local Font
-
-export const typography = {
-    fontFamily: FONT_PRIMARY,
-    fontWeightRegular: 400,
-    fontWeightMedium: 600,
-    fontWeightBold: 700,
-    h1: {
-        fontWeight: 700,
-        lineHeight: 80 / 64,
-        fontSize: pxToRem(40),
-        letterSpacing: 2,
-        ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),
-    },
-    h2: {
-        fontWeight: 700,
-        lineHeight: 64 / 48,
-        fontSize: pxToRem(32),
-        ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),
-    },
-    h3: {
-        fontWeight: 700,
-        lineHeight: 1.5,
-        fontSize: pxToRem(24),
-        ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
-    },
-    h4: {
-        fontWeight: 700,
-        lineHeight: 1.5,
-        fontSize: pxToRem(20),
-        ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
-    },
-    h5: {
-        fontWeight: 700,
-        lineHeight: 1.5,
-        fontSize: pxToRem(18),
-        ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
-    },
-    h6: {
-        fontWeight: 700,
-        lineHeight: 28 / 18,
-        fontSize: pxToRem(17),
-        ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
-    },
-    subtitle1: {
-        fontWeight: 600,
-        lineHeight: 1.5,
-        fontSize: pxToRem(14),
-    },
-    subtitle2: {
-        fontWeight: 600,
-        lineHeight: 1.5,
-        fontSize: pxToRem(12),
-    },
-    body0: {
-        lineHeight: 1.5,
-        fontWeight: 400,
-        fontSize: pxToRem(16),
-    },
-    body1: {
-        lineHeight: 1.5,
-        fontWeight: 400,
-        fontSize: pxToRem(14),
-    },
-    body2: {
-        lineHeight: 1.5,
-        fontWeight: 400,
-        fontSize: pxToRem(12),
-    },
-    caption: {
-        lineHeight: 1.5,
-        fontSize: pxToRem(11),
-    },
-    overline: {
-        fontWeight: 700,
-        lineHeight: 1.5,
-        fontSize: pxToRem(12),
-        textTransform: 'uppercase',
-    },
-    button: {
-        fontWeight: 700,
-        lineHeight: 24 / 14,
-        fontSize: pxToRem(14),
-        textTransform: 'capitalize',
-    },
-} as const;

package/src/types/index.ts

@@ -1,9 +0,0 @@
-export interface SkeletonProps {
-    isSkeleton?: boolean;
-    width?: string | number;
-    height?: string | number;
-}
-
-export declare type ThemeColorPresets = 'default' | 'purple' | 'cyan' | 'blue' | 'orange' | 'red';
-
-export type { HostThemeType } from '../contexts/HostThemeContext/types';

package/src/utils/anchorEl.ts

@@ -1,146 +0,0 @@
-//export type AnchorReference = 'anchorEl' | 'anchorPosition' | 'none';
-
-export type AnchorEl = HTMLElement | (() => HTMLElement);
-
-export interface AnchorOrigin {
-    vertical: 'top' | 'center' | 'bottom' | number;
-    horizontal: 'left' | 'center' | 'right' | number;
-}
-
-export interface AnchorPosition {
-    top: number;
-    left: number;
-}
-
-function getOffsetTop(
-    rect: Pick<DOMRect, 'height'>,
-    vertical: number | 'center' | 'bottom' | 'top',
-) {
-    let offset = 0;
-
-    if (typeof vertical === 'number') {
-        offset = vertical;
-    } else if (vertical === 'center') {
-        offset = rect.height / 2;
-    } else if (vertical === 'bottom') {
-        offset = rect.height;
-    }
-
-    return offset;
-}
-
-function getOffsetLeft(
-    rect: Pick<DOMRect, 'width'>,
-    horizontal: number | 'center' | 'right' | 'left',
-) {
-    let offset = 0;
-
-    if (typeof horizontal === 'number') {
-        offset = horizontal;
-    } else if (horizontal === 'center') {
-        offset = rect.width / 2;
-    } else if (horizontal === 'right') {
-        offset = rect.width;
-    }
-
-    return offset;
-}
-
-// export function getTransformOriginValue(transformOrigin: AnchorOrigin) {
-//     return [transformOrigin.horizontal, transformOrigin.vertical]
-//         .map(n => (typeof n === 'number' ? `${n}px` : n))
-//         .join(' ');
-// }
-
-function resolveAnchorEl(anchorEl: AnchorEl) {
-    return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
-}
-
-const getAnchorOffset = (anchorEl: AnchorEl, anchorOrigin: AnchorOrigin) => {
-    const resolvedAnchorEl = resolveAnchorEl(anchorEl);
-
-    const anchorRect = resolvedAnchorEl.getBoundingClientRect();
-
-    return {
-        top: anchorRect.top + getOffsetTop(anchorRect, anchorOrigin.vertical),
-        left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal),
-    };
-};
-
-const getTransformOrigin = (
-    elemRect: Pick<DOMRect, 'width' | 'height'>,
-    transformOrigin: AnchorOrigin,
-) => {
-    return {
-        vertical: getOffsetTop(elemRect, transformOrigin.vertical),
-        horizontal: getOffsetLeft(elemRect, transformOrigin.horizontal),
-    };
-};
-
-export const getAnchorElPositionWindow = (
-    anchorElement: HTMLElement,
-    newWindowRect: Pick<DOMRect, 'width' | 'height'>,
-
-    anchorOrigin: AnchorOrigin,
-    transformOrigin: AnchorOrigin,
-    marginThreshold = 16,
-) => {
-    // const newWindowRect = {
-    //     width: newWindowRect.width, //Con borde y padding: ;
-    //     height: newWindowRect.height, //Con borde y padding: ;
-    // };
-
-    // Get the offset of the anchoring element
-    const anchorOffset = getAnchorOffset(anchorElement, anchorOrigin);
-    console.log('anchoEl', anchorOffset);
-    // Get the transform origin point on the element itself
-    const elemTransformOrigin = getTransformOrigin(newWindowRect, transformOrigin);
-
-    console.log('elemTransformOrigin', elemTransformOrigin);
-
-    const container = document.getElementById('ContainerAreas')?.getBoundingClientRect() || {
-        top: 0,
-        left: 0,
-    };
-
-    console.log('getAnchorOffset-container', container);
-
-    // Calculate element positioning
-    let top = anchorOffset.top - elemTransformOrigin.vertical;
-    let left = anchorOffset.left - elemTransformOrigin.horizontal;
-
-    const bottom = top + newWindowRect.height;
-    const right = left + newWindowRect.width;
-
-    // Use the parent window of the anchorEl if provided
-    const containerWindow = window;
-
-    // // Window thresholds taking required margin into account
-    const heightThreshold = containerWindow.innerHeight - marginThreshold;
-    const widthThreshold = containerWindow.innerWidth - marginThreshold;
-
-    console.log('Final top,bottom,heightThreshold', top, bottom, heightThreshold);
-
-    // // // Check if the vertical axis needs shifting
-    if (top < marginThreshold) {
-        const diff = top - marginThreshold;
-        top -= diff;
-    } else if (bottom > heightThreshold) {
-        const diff = bottom - heightThreshold;
-        top -= diff;
-    }
-
-    // Check if the horizontal axis needs shifting
-    if (left < marginThreshold) {
-        const diff = left - marginThreshold;
-        left -= diff;
-    } else if (right > widthThreshold) {
-        const diff = right - widthThreshold;
-        left -= diff;
-    }
-
-    return {
-        top: Math.round(top) - container.top,
-        left: Math.round(left) - container.left,
-    };
-};

package/src/utils/getColorPresets.ts

@@ -1,91 +0,0 @@
-// theme
-
-import { ThemeColorPresets } from '../types';
-import { palette } from '../theme/palette';
-
-// @type
-
-// ----------------------------------------------------------------------
-
-export const colorPresets = [
-    // DEFAULT
-    {
-        name: 'default',
-        ...palette.light.primary,
-
-        LightSelected: '#EBF9F1',
-        LightSelectedHover: '#D6F2E3',
-        DarkSelected: '#142827',
-        DarkSelectedHover: '#12342B',
-    },
-    // PURPLE
-    {
-        name: 'purple',
-        lighter: '#EBD6FD',
-        light: '#B985F4',
-        main: '#7635dc',
-        dark: '#431A9E',
-        darker: '#200A69',
-        contrastText: '#fff',
-    },
-    // CYAN
-    {
-        name: 'cyan',
-        lighter: '#D1FFFC',
-        light: '#76F2FF',
-        main: '#1CCAFF',
-        dark: '#0E77B7',
-        darker: '#053D7A',
-        contrastText: palette.light.grey[800],
-    },
-    // BLUE
-    {
-        name: 'blue',
-        lighter: '#D1E9FC',
-        light: '#76B0F1',
-        main: '#2065D1',
-        dark: '#103996',
-        darker: '#061B64',
-        contrastText: '#fff',
-    },
-    // ORANGE
-    {
-        name: 'orange',
-        lighter: '#FEF4D4',
-        light: '#FED680',
-        main: '#fda92d',
-        dark: '#B66816',
-        darker: '#793908',
-        contrastText: palette.light.grey[800],
-    },
-    // RED
-    {
-        name: 'red',
-        lighter: '#FFE3D5',
-        light: '#FFC1AC',
-        main: '#FF3030',
-        dark: '#B71833',
-        darker: '#7A0930',
-        contrastText: '#fff',
-    },
-];
-
-export const defaultPreset = colorPresets[0];
-export const purplePreset = colorPresets[1];
-export const cyanPreset = colorPresets[2];
-export const bluePreset = colorPresets[3];
-export const orangePreset = colorPresets[4];
-export const redPreset = colorPresets[5];
-
-export function getColorPresets(presetsKey: ThemeColorPresets) {
-    return {
-        purple: purplePreset,
-        cyan: cyanPreset,
-        blue: bluePreset,
-        orange: orangePreset,
-        red: redPreset,
-        default: defaultPreset,
-    }[presetsKey];
-}
-
-export default getColorPresets;