@envive-ai/react-toolkit 0.2.13-arthur-1 → 0.2.14

package/src/components/ToggleButton/ToggleButton.tsx

@@ -83,13 +83,23 @@ export const ToggleButton = ({
     secondaryLabelClassName,
   );
   return (
-    <button className={buttonClassNames} onClick={onClick} type="button">
+    <button
+      className={buttonClassNames}
+      onClick={onClick}
+      type="button"
+    >
       {icon && <div className={iconClassName}>{icon}</div>}
-      <Typography variant="body3" className={labelClassNames}>
+      <Typography
+        variant="body3"
+        className={labelClassNames}
+      >
         {label}
       </Typography>
       {secondaryLabel && (
-        <Typography variant="body4" className={secondaryLabelClassNames}>
+        <Typography
+          variant="body4"
+          className={secondaryLabelClassNames}
+        >
           {secondaryLabel}
         </Typography>
       )}

package/src/components/Typography/Typography.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { getElementTypeFromVariant } from './util';
 
 describe('getElementTypeFromVariant', () => {

package/src/components/Typography/util.ts

@@ -1,7 +1,7 @@
 import {
-  TypographyVariantMap,
-  TypographyDomVariantMap,
   ElementTypes,
+  TypographyDomVariantMap,
+  TypographyVariantMap,
 } from './typographyVariantClasses';
 
 export const getElementTypeFromVariant = (

package/src/models/colorsConfig.ts

@@ -24,5 +24,6 @@ type ColorMapping = {
 };
 
 const colorVar = (color: ColorNames): string => `var(--spiffy-colors-${color})`;
-export { ColorNames, colorVar };
+const enviveColorVar = (color: ColorNames): string => `var(--envive-colors-${color})`;
+export { ColorNames, colorVar, enviveColorVar };
 export type { ColorMapping };

package/src/stories/ButtonBase.stories.tsx

@@ -42,7 +42,7 @@ export const Primary: Story = {
 export const WithIcon: Story = {
   args: {
     text: 'Settings',
-    icon: SettingsVariant,
+    icon: <SettingsVariant />,
   },
 };
 

package/src/stories/NoSearchResultsFound.stories.tsx

@@ -19,6 +19,13 @@ export const Default: Story = {
     noResultsFoundText:
       'I’m sorry, I wasn’t able to find an exact match. Try changing your filters or adjusting your search query.',
     sparkleIconColor: 'var(--spiffy-colors-accent-primary)',
+    recommendedProducts: [
+      {
+        id: 'product1',
+        title: 'Product 1',
+        url: 'https://larry-and-serges-prod.myshopify.com/products/machine-learning-mango-fizz',
+      },
+    ],
   },
 };
 

package/src/stories/ProductCardSkeleton.stories.tsx

@@ -1,11 +1,10 @@
-import { ProductCardSkeleton } from '@envive-ai/react-toolkit/ProductCard';
-import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProductCardSkeleton } from '../components/ProductCard/ProductCardSkeleton';
+import { ProductCardSkeletonProps } from '../components/ProductCard/types';
 
-const meta: Meta<typeof ProductCardSkeleton> = {
-  title: 'Common/ProductCardSkeleton',
-  component: ProductCardSkeleton,
+const meta = {
+  title: 'Components/ProductCard/ProductCardSkeleton',
+  component: ProductCardSkeleton as any as any,
   parameters: {
     layout: 'centered',
   },
@@ -13,36 +12,67 @@ const meta: Meta<typeof ProductCardSkeleton> = {
   argTypes: {
     layoutVariant: {
       control: 'select',
-      options: Object.values(productGridVariantClasses),
+      options: ['normal', 'tall', 'square'],
+      description: 'The layout variant of the product card.',
     },
     aspectRatio: {
       control: 'select',
-      options: Object.values(productGridVariantClasses),
+      options: ['3:4', 'square', 'none'],
+      description: 'The aspect ratio of the product image.',
+    },
+    growWithContainer: {
+      control: 'boolean',
+      description: 'Whether the skeleton should grow to fit its container.',
     },
   },
-};
+} satisfies Meta<ProductCardSkeletonProps>;
 
 export default meta;
-type Story = StoryObj<typeof ProductCardSkeleton>;
+type Story = StoryObj<Meta<ProductCardSkeletonProps>>;
 
 export const Default: Story = {
   args: {
     layoutVariant: 'normal',
-    aspectRatio: 'none',
-    growWithContainer: true,
+    aspectRatio: '3:4',
+    growWithContainer: false,
+  },
+};
+
+export const TallLayout: Story = {
+  args: {
+    layoutVariant: 'tall',
+    aspectRatio: '3:4',
+    growWithContainer: false,
+  },
+};
+
+export const SquareLayout: Story = {
+  args: {
+    layoutVariant: 'square',
+    aspectRatio: 'square',
+    growWithContainer: false,
   },
 };
 
-export const MinimalLayout: Story = {
+export const SquareAspectRatio: Story = {
   args: {
-    ...Default.args,
     layoutVariant: 'normal',
+    aspectRatio: 'square',
+    growWithContainer: false,
   },
 };
 
-export const AspectRatio3x4: Story = {
+export const GrowWithContainer: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: '300px', height: '450px', border: '1px dashed #ccc', padding: '10px' }}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
-    ...Default.args,
+    layoutVariant: 'normal',
     aspectRatio: '3:4',
+    growWithContainer: true,
   },
 };

package/src/stories/SearchResultsFilter.stories.tsx

@@ -1,9 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
 import {
-  searchFilterSidebarVariantClasses,
   SearchResultsFilter,
-} from '@envive-ai/react-toolkit/SearchResultsFilterSidebar';
-import type { Meta, StoryObj } from '@storybook/react-vite';
+  searchFilterSidebarVariantClasses,
+} from 'src/components/SearchResultsFilterSidebar';
 
 const mockSearchFilters: SearchFilterDatum[] = [
   {

package/src/stories/SparkleAnimation.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
     color: 'var(--spiffy-colors-accent-primary)',
     animate: true,
   },
-  render: (args) => {
+  render: args => {
     const classes = classNames(
       'spiffy-tw-flex',
       'spiffy-tw-flex-row',
@@ -33,7 +33,10 @@ export const Default: Story = {
     );
     return (
       <div>
-        <SparkleAnimation {...args} className={classes} />
+        <SparkleAnimation
+          {...args}
+          className={classes}
+        />
       </div>
     );
   },

package/src/util/camelCasedPropertiesDeep.ts

@@ -48,7 +48,6 @@ import type { UnknownArray } from './unknownArray';
 export type CamelCasedPropertiesDeep<
   Value,
   Options extends CamelCaseOptions = { preserveConsecutiveUppercase: true },
-  // eslint-disable-next-line @typescript-eslint/ban-types
 > = Value extends Function
   ? Value
   : Value extends UnknownArray

package/src/util/colorVar.ts

@@ -1,3 +1,3 @@
-import { ColorNames } from "@envive-ai/react-hooks/contexts/types";
+import { ColorNames } from '@envive-ai/react-hooks/contexts/types';
 
 export const colorVar = (color: ColorNames): string => `var(--spiffy-colors-${color})`;

package/src/util/useScrollDirection.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export type ScrollDirection = 'up' | 'down';
 

package/src/util/useStickyVisibility.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useScrollDirection } from './useScrollDirection';
 
 export const useStickyVisibility = () => {

package/dist/ButtonBase-D2eXuapk.js

@@ -1 +0,0 @@
-export {  };

package/dist/FourPointStar-3DqnYmfN.js

@@ -1,21 +0,0 @@
-import { t as require_jsx_runtime } from "./jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-
-//#region ../icons/dist/FourPointStar.js
-var import_jsx_runtime = require_jsx_runtime();
-const SvgFourPointStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-	width: 13,
-	height: 12,
-	viewBox: "0 0 13 12",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-		d: "M6.45324 0.546875L7.50401 3.27887C7.67488 3.72314 7.76032 3.94528 7.89318 4.13213C8.01094 4.29774 8.15563 4.44242 8.32123 4.56018C8.50808 4.69304 8.73023 4.77848 9.1745 4.94935L11.9065 6.00012L9.1745 7.05089C8.73023 7.22176 8.50808 7.3072 8.32123 7.44006C8.15563 7.55782 8.01094 7.7025 7.89318 7.86811C7.76032 8.05496 7.67488 8.2771 7.50401 8.72138L6.45324 11.4534L5.40248 8.72138C5.2316 8.2771 5.14616 8.05496 5.0133 7.86811C4.89555 7.7025 4.75086 7.55782 4.58526 7.44006C4.3984 7.3072 4.17627 7.22176 3.73199 7.05089L1 6.00012L3.73199 4.94935C4.17627 4.77848 4.3984 4.69304 4.58526 4.56018C4.75086 4.44242 4.89555 4.29774 5.0133 4.13213C5.14616 3.94528 5.2316 3.72314 5.40248 3.27887L6.45324 0.546875Z",
-		strokeWidth: .908874,
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})
-});
-var FourPointStar_default = SvgFourPointStar;
-
-//#endregion
-export { FourPointStar_default as t };

package/dist/FourPointStar-AQ9OSu0S.cjs

@@ -1,26 +0,0 @@
-const require_jsx_runtime_Dg2m6dxZ = require('./jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-
-//#region ../icons/dist/FourPointStar.js
-var import_jsx_runtime = require_jsx_runtime_Dg2m6dxZ.require_jsx_runtime();
-const SvgFourPointStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-	width: 13,
-	height: 12,
-	viewBox: "0 0 13 12",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-		d: "M6.45324 0.546875L7.50401 3.27887C7.67488 3.72314 7.76032 3.94528 7.89318 4.13213C8.01094 4.29774 8.15563 4.44242 8.32123 4.56018C8.50808 4.69304 8.73023 4.77848 9.1745 4.94935L11.9065 6.00012L9.1745 7.05089C8.73023 7.22176 8.50808 7.3072 8.32123 7.44006C8.15563 7.55782 8.01094 7.7025 7.89318 7.86811C7.76032 8.05496 7.67488 8.2771 7.50401 8.72138L6.45324 11.4534L5.40248 8.72138C5.2316 8.2771 5.14616 8.05496 5.0133 7.86811C4.89555 7.7025 4.75086 7.55782 4.58526 7.44006C4.3984 7.3072 4.17627 7.22176 3.73199 7.05089L1 6.00012L3.73199 4.94935C4.17627 4.77848 4.3984 4.69304 4.58526 4.56018C4.75086 4.44242 4.89555 4.29774 5.0133 4.13213C5.14616 3.94528 5.2316 3.72314 5.40248 3.27887L6.45324 0.546875Z",
-		strokeWidth: .908874,
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})
-});
-var FourPointStar_default = SvgFourPointStar;
-
-//#endregion
-Object.defineProperty(exports, 'FourPointStar_default', {
-  enumerable: true,
-  get: function () {
-    return FourPointStar_default;
-  }
-});

package/dist/ModalSheet-C5f5abw1.js

@@ -1,301 +0,0 @@
-import { t as AnimatedChevron } from "./AnimatedChevron-DO_jcnJg.js";
-import { useEffect, useState } from "react";
-import { motion, useMotionValue } from "framer-motion";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useIsSmallScreen } from "@envive-ai/react-hooks/hooks/IsSmallScreen";
-
-//#region src/components/ModalSheet/mobile/mobileHeader.tsx
-const modalSheetVariants$1 = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
-	const animationKey = useMotionValue(-1);
-	const headerClassName = classNames({
-		"spiffy-modal-sheet-header": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-items-center": true,
-		"spiffy-tw-justify-between": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-pt-[16px]": true,
-		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
-		...modalSheetVariants$1[headerVariant]
-	});
-	return /* @__PURE__ */ jsxs(motion.div, {
-		className: headerClassName,
-		onTouchStart: handleHeaderClick,
-		onMouseDown: handleHeaderClick,
-		children: [/* @__PURE__ */ jsx(AnimatedChevron, {
-			animationKey,
-			chevronColor
-		}), headerContent]
-	});
-};
-
-//#endregion
-//#region src/components/ModalSheet/mobile/index.tsx
-const ModalSheetMobile = ({ children, isOpen, closeModal, mobileFullHeight = 180, animationDuration, headerProps, footerProps }) => {
-	const [isHidden, setIsHidden] = useState(isOpen ? "block" : "none");
-	const [bottom, setBottom] = useState(isOpen ? 0 : 0 - mobileFullHeight);
-	const [overlayOpacity, setOverlayOpacity] = useState(isOpen ? 1 : 0);
-	useEffect(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [mobileFullHeight, isOpen]);
-	const overlayClassNames = classNames({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-bg-black/30": true,
-		"spiffy-tw-z-[100]": true
-	});
-	const modalClassNames = classNames({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true,
-		"spiffy-tw-rounded-t-[16px]": true,
-		"spiffy-tw-h-[89%]": true,
-		"spiffy-tw-max-h-[89%]": true
-	});
-	const contentClassNames = classNames({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-h-full": true
-	});
-	const headerClassNames = classNames({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-[0px]": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = classNames({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-[0px]": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(motion.div, {
-		className: overlayClassNames,
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ jsx(motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				bottom,
-				display: isHidden
-			},
-			animate: {
-				bottom,
-				display: isHidden
-			},
-			exit: {
-				bottom,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsxs("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ jsx(ModalSheetMobileHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							handleHeaderClick: closeModal,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ jsx("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ jsx("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-//#region src/components/ModalSheet/desktop/desktopHeader.tsx
-const modalSheetVariants = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: classNames({
-			"spiffy-modal-sheet-header": true,
-			"spiffy-tw-flex": true,
-			"spiffy-tw-items-center": true,
-			"spiffy-tw-justify-between": true,
-			"spiffy-tw-w-full": true,
-			...modalSheetVariants[headerVariant]
-		}),
-		children: headerContent
-	});
-};
-
-//#endregion
-//#region src/components/ModalSheet/desktop/index.tsx
-const ModalSheetDesktop = ({ children, isOpen, closeModal, desktopWidth = 512, animationDuration, headerProps, footerProps, showOverlay = false }) => {
-	const [isHidden, setIsHidden] = useState(isOpen ? "block" : "none");
-	const [right, setRight] = useState(isOpen ? 0 : 0 - desktopWidth);
-	const [overlayOpacity, setOverlayOpacity] = useState(0);
-	useEffect(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setRight(isOpen ? 0 : 0 - desktopWidth);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [desktopWidth, isOpen]);
-	const overlayClassNames = classNames({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-z-[2147483647]": true,
-		"spiffy-tw-bg-black/30": showOverlay
-	});
-	const modalClassNames = classNames({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-max-h-full": true,
-		"spiffy-tw-h-screen": true,
-		"spiffy-tw-w-[512px]": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true
-	});
-	const contentClassNames = classNames({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-overflow-x-hidden": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-h-full": true,
-		"spiffy-tw-w-full": true
-	});
-	const headerClassNames = classNames({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-0": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = classNames({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-0": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(motion.div, {
-		className: overlayClassNames,
-		initial: {
-			opacity: 0,
-			display: "none"
-		},
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ jsx(motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				right,
-				display: isHidden
-			},
-			animate: {
-				right,
-				display: isHidden
-			},
-			exit: {
-				right,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			style: { width: desktopWidth },
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsxs("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ jsx(ModalSheetDesktopHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ jsx("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ jsx("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-//#region src/components/ModalSheet/ModalSheet.tsx
-const ANIMATION_DURATION = .3;
-const ModalSheet = ({ children, isOpen, closeModal, animationDuration = ANIMATION_DURATION, desktopWidth = 512, headerProps, footerProps }) => {
-	return useIsSmallScreen() ? /* @__PURE__ */ jsx(ModalSheetMobile, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	}) : /* @__PURE__ */ jsx(ModalSheetDesktop, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	});
-};
-
-//#endregion
-export { ModalSheet as t };