@latte-macchiat-io/latte-vanilla-components 0.0.175 → 0.0.177

package/src/types/theme.ts

@@ -0,0 +1,295 @@
+export interface Theme {
+  global: {
+    maxWidth: number;
+    paddingLeft: number[];
+    paddingRight: number[];
+
+    brandFont: string;
+    defaultFont: string;
+  };
+
+  colors: {
+    defaultText: string;
+    defaultLightText: string;
+    defaultTitle: string;
+    defaultLink: string;
+    defaultIcon: string;
+  };
+
+  backgroundColors: {
+    modal: string;
+    modalOverlay: string;
+    cookieConsent: string;
+  };
+
+  borders: {
+    hr: string;
+    cookieConsent: string;
+  };
+
+  borderRadius: {
+    modal: number;
+    input: number;
+    cookieConsent: number;
+  };
+
+  widthSizes: {
+    modal: number;
+    cookieConsent: number;
+  };
+
+  transitions: {
+    global: string;
+  };
+
+  actions: {
+    gap: number[];
+    paddingTop: number[];
+    paddingBottom: number[];
+  };
+
+  button: {
+    minWidth: number;
+    fontWeight: number;
+    letterSpacing: number;
+    color: {
+      primary: string;
+      secondary: string;
+      disabled: string;
+    };
+    backgroundColor: {
+      primary: string;
+      secondary: string;
+      disabled: string;
+    };
+    border: {
+      width: number;
+      style: string;
+      color: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+      };
+    };
+    borderRadius: number;
+    paddingTop: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    paddingBottom: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    paddingRight: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    paddingLeft: {
+      small: number[];
+      medium: number[];
+      large: number[];
+    };
+    transition: string;
+  };
+
+  keyNumber: {
+    paddingBottom: number[];
+  };
+
+  columns: {
+    gap: number;
+  };
+
+  form: {
+    width: number;
+    backgroundColor: string;
+    padding: [string | number, string | number];
+
+    row: {
+      gap: [string | number, string | number];
+      padding: [string | number, string | number];
+    };
+
+    label: {
+      font: string;
+      color: string;
+      fontWeight: number;
+      paddingBottom: number;
+    };
+
+    input: {
+      font: string;
+      color: string;
+      border: string;
+      padding: number[];
+      borderRadius: number;
+      backgroundColor: string;
+      placeholder: {
+        color: string;
+        opacity: number;
+      };
+    };
+
+    textarea: {
+      font: string;
+      color: string;
+      border: string;
+      padding: number[];
+      borderRadius: number;
+      backgroundColor: string;
+      placeholder: {
+        color: string;
+        opacity: number;
+      };
+    };
+
+    error: {
+      color: string;
+    };
+  };
+
+  header: {
+    gap: number[];
+    height: number[];
+    backgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+
+    overlayGap: number[];
+    overlayBackgroundColor: string;
+
+    toggleNavColor: string;
+    toggleNavOpenColor: string;
+    toggleNavBorderRadius: number;
+  };
+
+  main: {
+    minHeight: string;
+    backgroundColor: string;
+  };
+
+  section: {
+    paddingTop: number[];
+    paddingBottom: number[];
+  };
+
+  footer: {
+    gap: number[];
+    height: number[];
+    backgroundColor: string;
+
+    paddingTop: number[];
+    paddingBottom: number[];
+  };
+
+  modal: {
+    border: string;
+    width: number[];
+    borderRadius: number;
+    backgroundColor: string;
+
+    overlayBlur: number;
+    overlayOpacity: number;
+    overlayBackgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+  };
+
+  languageSwitcher: {
+    color: string;
+    border: string;
+    width: number[];
+    borderRadius: number;
+    backgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+  };
+
+  carousel: {
+    gap: number[];
+    bullet: {
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+  };
+
+  video: {
+    playButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+    pauseButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+    soundButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+    closeButton: {
+      color: string;
+      border: string;
+      width: number[];
+      height: number[];
+      borderRadius: number;
+      backgroundColor: string;
+    };
+  };
+
+  consentCookie: {
+    borders: number;
+    width: number[];
+    borderRadius: number;
+    backgroundColor: string;
+
+    overlayBlur: number;
+    overlayOpacity: number;
+    overlayBackgroundColor: string;
+
+    paddingTop: number[];
+    paddingLeft: number[];
+    paddingRight: number[];
+    paddingBottom: number[];
+
+    actionsGap: number;
+    actionsPaddingTop: number[];
+  };
+
+  nav: {
+    gap: number[];
+  };
+
+  navSocial: {
+    gap: number[];
+  };
+
+  navLegal: {
+    gap: number[];
+  };
+}

package/src/types/withClassName.ts

@@ -0,0 +1,3 @@
+export type WithClassName = {
+  className: string;
+};

package/src/utils/cookie.ts

@@ -0,0 +1,24 @@
+// https://www.w3schools.com/js/js_cookies.asp
+
+export function getCookie(name: string) {
+  const fullName = name + '=';
+  const decodedCookie = decodeURIComponent(document.cookie);
+  const ca = decodedCookie.split(';');
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(fullName) == 0) {
+      return c.substring(fullName.length, c.length);
+    }
+  }
+  return '';
+}
+
+export function setCookie(name: string, value: string, expirationInDays: number) {
+  const d = new Date();
+  d.setTime(d.getTime() + expirationInDays * 24 * 60 * 60 * 1000);
+  const expires = 'expires=' + d.toUTCString();
+  document.cookie = name + '=' + value + ';' + expires + ';path=/';
+}

package/src/utils/deep-merge-objects.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const deepMergeObjects = (obj1: any, obj2: any) => {
+  for (const key in obj2) {
+    if (obj2.hasOwnProperty(key)) {
+      if (obj2[key] instanceof Object && obj1[key] instanceof Object) {
+        obj1[key] = deepMergeObjects(obj1[key], obj2[key]);
+      } else {
+        obj1[key] = obj2[key];
+      }
+    }
+  }
+  return obj1;
+};
+
+export default deepMergeObjects;

package/src/utils/use-breakpoint-key.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+import { breakpoints } from '../assets/styles/mediaqueries';
+
+type BreakpointKey = keyof typeof breakpoints;
+
+export function useBreakpointKey(): number {
+  const [breakpoint, setBreakpoint] = useState<BreakpointKey>('mobile');
+
+  useEffect(() => {
+    function handleResize() {
+      const width = window.innerWidth;
+
+      if (width >= breakpoints['2xl']) setBreakpoint('2xl');
+      else if (width >= breakpoints.xl) setBreakpoint('xl');
+      else if (width >= breakpoints.lg) setBreakpoint('lg');
+      else if (width >= breakpoints.md) setBreakpoint('md');
+      else if (width >= breakpoints.sm) setBreakpoint('sm');
+      else setBreakpoint('mobile');
+    }
+
+    handleResize(); // init au mount
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Map Breakpoint → Index numérique
+  const order: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
+  return order.indexOf(breakpoint);
+}

package/src/utils/use-window-size.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<{
+    width: undefined | number;
+    height: undefined | number;
+  }>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    // only execute all the code below in client side
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}
+
+export default useWindowSize;

package/dist/components/Actions/Actions.css.ts

@@ -1,113 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-import { queries } from '../../styles/mediaqueries';
-
-const actionsBase = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-
-  gap: themeContract.space.sm,
-  paddingTop: themeContract.space.sm,
-  width: '100%',
-
-  '@media': {
-    [queries.lg]: {
-      gap: themeContract.space.md,
-      paddingTop: themeContract.space.md,
-    },
-  },
-});
-
-export const actionsRecipe = recipe({
-  base: actionsBase,
-
-  variants: {
-    align: {
-      left: {
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-      },
-      center: {
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-      right: {
-        justifyContent: 'flex-end',
-        alignItems: 'flex-end',
-      },
-    },
-    direction: {
-      row: {
-        flexDirection: 'row',
-      },
-      column: {
-        flexDirection: 'column',
-      },
-      'row-reverse': {
-        flexDirection: 'row-reverse',
-      },
-      'column-reverse': {
-        flexDirection: 'column-reverse',
-      },
-    },
-    spacing: {
-      none: {
-        gap: '0',
-        paddingTop: '0',
-      },
-      xs: {
-        gap: themeContract.space.xs,
-        paddingTop: themeContract.space.xs,
-      },
-      sm: {
-        gap: themeContract.space.sm,
-        paddingTop: themeContract.space.sm,
-      },
-      md: {
-        gap: themeContract.space.md,
-        paddingTop: themeContract.space.md,
-      },
-      lg: {
-        gap: themeContract.space.lg,
-        paddingTop: themeContract.space.lg,
-      },
-      xl: {
-        gap: themeContract.space.xl,
-        paddingTop: themeContract.space.xl,
-      },
-    },
-    wrap: {
-      true: {
-        flexWrap: 'wrap',
-      },
-      false: {
-        flexWrap: 'nowrap',
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-
-        // selectors: {
-        //   '& > *': {
-        //     flex: '1',
-        //   },
-        // },
-      },
-      false: {
-        width: 'auto',
-      },
-    },
-  },
-
-  defaultVariants: {
-    align: 'left',
-    direction: 'row',
-    spacing: 'sm',
-    wrap: true,
-    fullWidth: false,
-  },
-});
-
-export type ActionsVariants = RecipeVariants<typeof actionsRecipe>;

package/dist/components/Button/Button.css.ts

@@ -1,119 +0,0 @@
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-export const buttonRecipe = recipe({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: themeContract.space.md,
-    borderRadius: themeContract.radii.md,
-    border: 'none',
-    cursor: 'pointer',
-    fontFamily: themeContract.fonts.body,
-    fontSize: themeContract.fontSizes.md,
-    fontWeight: '500',
-    lineHeight: themeContract.lineHeights.tight,
-    textDecoration: 'none',
-    transition: 'all 0.2s ease-in-out',
-    outline: 'none',
-
-    ':hover': {
-      transform: 'translateY(-1px)',
-      boxShadow: themeContract.shadows.md,
-    },
-
-    ':active': {
-      transform: 'translateY(0)',
-    },
-
-    ':focus-visible': {
-      outline: '2px solid',
-      outlineColor: themeContract.colors.primary,
-      outlineOffset: '2px',
-    },
-
-    ':disabled': {
-      opacity: '0.5',
-      cursor: 'not-allowed',
-      transform: 'none',
-      boxShadow: 'none',
-    },
-  },
-
-  variants: {
-    variant: {
-      primary: {
-        backgroundColor: themeContract.colors.primary,
-        color: themeContract.colors.background,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.accent,
-        },
-      },
-      secondary: {
-        backgroundColor: themeContract.colors.secondary,
-        color: themeContract.colors.text,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-        },
-      },
-      outline: {
-        backgroundColor: 'transparent',
-        color: themeContract.colors.text,
-        border: `1px solid ${themeContract.colors.border}`,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-          borderColor: themeContract.colors.primary,
-        },
-      },
-      ghost: {
-        backgroundColor: 'transparent',
-        color: themeContract.colors.text,
-
-        ':hover': {
-          backgroundColor: themeContract.colors.surface,
-        },
-      },
-      danger: {
-        backgroundColor: themeContract.colors.error,
-        color: themeContract.colors.background,
-
-        ':hover': {
-          opacity: '0.9',
-        },
-      },
-    },
-    size: {
-      sm: {
-        padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        fontSize: themeContract.fontSizes.sm,
-        borderRadius: themeContract.radii.sm,
-      },
-      md: {
-        padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-        fontSize: themeContract.fontSizes.md,
-        borderRadius: themeContract.radii.md,
-      },
-      lg: {
-        padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        fontSize: themeContract.fontSizes.lg,
-        borderRadius: themeContract.radii.lg,
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-  },
-});
-
-export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;