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

package/src/components/Columns/Columns.tsx

@@ -0,0 +1,142 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { columnsRecipe, type ColumnsVariants, columnWidths } from './Columns.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface ColumnsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ColumnsVariants> {
+  css?: string;
+  columns?: (keyof typeof columnWidths)[];
+  as?: 'div' | 'section' | 'article';
+}
+
+export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(
+  (
+    {
+      children,
+      columns,
+      align,
+      spacing,
+      wrap,
+      reverse,
+      alignItems,
+      as: Component = 'div',
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const childrenArray = Array.isArray(children) ? children : [children];
+
+    return (
+      <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        className={clsx(
+          columnsRecipe({ align, spacing, wrap, reverse, alignItems }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        {columns && columns.length > 0
+          ? childrenArray.map((child, index) => (
+              <div key={index} className={clsx(columns[index] && columnWidths[columns[index]])}>
+                {child}
+              </div>
+            ))
+          : children}
+      </Component>
+    );
+  }
+);
+
+Columns.displayName = 'Columns';

package/src/components/Columns/export.tsx

@@ -0,0 +1,5 @@
+// export { Columns } from '.';
+// export type { ColumnsProps } from '.';
+// export { Align as ColumnsAlign } from './types';
+
+// export { styles as ColumnsStyles } from './styles.css'

package/src/components/ConsentCookie/ConsentCookie.tsx

@@ -0,0 +1,202 @@
+import { clsx } from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { consentActions, consentContent, type ConsentCookieVariants, consentRecipe } from './ConsentCookie.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { getCookie, setCookie } from '../../utils/cookie';
+import { Button } from '../Button/Button';
+
+// Declare window object including gtag to avoid TypeScript errors
+declare const window: Window &
+  typeof globalThis & {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag: any;
+  };
+
+export interface ConsentCookieProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ConsentCookieVariants> {
+  css?: string;
+  cookieName?: string;
+  cookieExpirationDays?: number;
+  onAccept?: () => void;
+  onReject?: () => void;
+  translations?: {
+    actions: {
+      accept: string;
+      reject: string;
+    };
+  };
+  enableGoogleAnalytics?: boolean;
+}
+
+export const ConsentCookie = forwardRef<HTMLDivElement, ConsentCookieProps>(
+  (
+    {
+      children,
+      variant,
+      cookieName = 'consent',
+      cookieExpirationDays = 365,
+      onAccept,
+      onReject,
+      translations,
+      enableGoogleAnalytics = true,
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const [showConsent, setShowConsent] = useState(false);
+
+    const handleAccept = () => {
+      setShowConsent(false);
+      setCookie(cookieName, 'true', cookieExpirationDays);
+
+      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
+        window.gtag('consent', 'update', {
+          analytics_storage: 'granted',
+        });
+      }
+
+      onAccept?.();
+    };
+
+    const handleReject = () => {
+      setShowConsent(false);
+      setCookie(cookieName, 'false', cookieExpirationDays);
+
+      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
+        window.gtag('consent', 'update', {
+          analytics_storage: 'denied',
+        });
+      }
+
+      onReject?.();
+    };
+
+    useEffect(() => {
+      const consentValue = getCookie(cookieName);
+      const shouldShowConsent = consentValue !== 'true' && consentValue !== 'false';
+      const areCookiesAccepted = consentValue === 'true';
+
+      if (shouldShowConsent) {
+        setShowConsent(true);
+      }
+
+      // Set initial Google Analytics consent
+      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
+        const gAnalyticsConsent = areCookiesAccepted ? 'granted' : 'denied';
+        window.gtag('consent', 'update', {
+          analytics_storage: gAnalyticsConsent,
+        });
+      }
+    }, [cookieName, enableGoogleAnalytics]);
+
+    if (!showConsent) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          consentRecipe({ variant }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="consent-title"
+        {...htmlProps}>
+        <div className={consentContent}>
+          {children}
+          <div className={consentActions}>
+            <Button variant="outline" size="sm" onClick={handleReject}>
+              {translations?.actions.reject || 'Reject'}
+            </Button>
+            <Button variant="primary" size="sm" onClick={handleAccept}>
+              {translations?.actions.accept || 'Accept'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+ConsentCookie.displayName = 'ConsentCookie';

package/src/components/ConsentCookie/export.tsx

@@ -0,0 +1,4 @@
+// export { ConsentCookie } from '.';
+// export type { ConsentCookieProps } from '.';
+
+// export { styles as ConsentCookieStyles } from './styles.css';

package/src/components/{Icon/stories.ts → ConsentCookie/stories.tsx}

@@ -1,11 +1,11 @@
 // import type { Meta, StoryObj } from '@storybook/react';
-// import { defaultTheme } from '../../assets/styles/default-theme';
-// import { Icon } from '../../index';
+//
+// import { ConsentCookie } from '.';
 //
 // // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta = {
-//   title: 'Latte Components / 1. Global / Icon',
-//   component: Icon,
+// const meta: Meta<typeof ConsentCookie> = {
+//   title: 'Latte Components / 5. Consent / Cookie',
+//   component: ConsentCookie,
 //   parameters: {
 //     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
 //     layout: 'centered',
@@ -15,7 +15,7 @@
 //   // More on argTypes: https://storybook.js.org/docs/api/argtypes
 //   argTypes: {},
 //   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-// } satisfies Meta<typeof Icon>;
+// };
 //
 // export default meta;
 // type Story = StoryObj<typeof meta>;
@@ -23,7 +23,6 @@
 // // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 // export const Default: Story = {
 //   args: {
-//     icon: 'close',
-//     theme: defaultTheme,
+//     children: 'Cookies with your latte? In accordance with our cookies policy',
 //   },
 // };

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,130 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { footerRecipe, type FooterVariants } from './Footer.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface FooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<FooterVariants> {
+  css?: string;
+  as?: 'footer' | 'div';
+}
+
+export const Footer = forwardRef<HTMLElement, FooterProps>(
+  (
+    {
+      children,
+      variant,
+      size,
+      layout,
+      as: Component = 'footer',
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        className={clsx(
+          footerRecipe({ variant, size, layout }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        {children}
+      </Component>
+    );
+  }
+);
+
+Footer.displayName = 'Footer';

package/src/components/Footer/export.tsx

@@ -0,0 +1,4 @@
+// export { Footer } from '.';
+// export type { FooterProps } from '.';
+
+// export { styles as FooterStyles } from './styles.css';

package/src/components/Footer/stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Footer } from '../../index';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Footer> = {
+  title: 'Latte Components / Layout / Footer',
+  component: Footer,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {},
+};

package/src/components/Form/Form.tsx

@@ -0,0 +1,127 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { formRecipe, type FormVariants } from './Form.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'color'>, Sprinkles, NonNullable<FormVariants> {
+  css?: string;
+  children: React.ReactNode;
+}
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(
+  (
+    {
+      children,
+      spacing,
+      layout,
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    return (
+      <form
+        ref={ref}
+        className={clsx(
+          formRecipe({ spacing, layout }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        {children}
+      </form>
+    );
+  }
+);
+
+Form.displayName = 'Form';