@envive-ai/react-toolkit 0.2.13 → 0.2.14

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 {
   SearchResultsFilter,
   searchFilterSidebarVariantClasses,
-} from '@envive-ai/react-toolkit/SearchResultsFilterSidebar';
-import type { Meta, StoryObj } from '@storybook/react-vite';
+} from 'src/components/SearchResultsFilterSidebar';
 
 const mockSearchFilters: SearchFilterDatum[] = [
   {

package/dist/ButtonBase-C9fn-c5h.js

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

package/dist/ModalSheet-BuCtRDnQ.cjs

@@ -1,308 +0,0 @@
-const require_chunk = require('./chunk-CbDLau6x.cjs');
-const require_AnimatedChevron = require('./AnimatedChevron-BKQrUKb5.cjs');
-let react = require("react");
-let framer_motion = require("framer-motion");
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_hooks_IsSmallScreen = require("@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 = (0, framer_motion.useMotionValue)(-1);
-	const headerClassName = (0, classnames.default)({
-		"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__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
-		className: headerClassName,
-		onTouchStart: handleHeaderClick,
-		onMouseDown: handleHeaderClick,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedChevron.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] = (0, react.useState)(isOpen ? "block" : "none");
-	const [bottom, setBottom] = (0, react.useState)(isOpen ? 0 : 0 - mobileFullHeight);
-	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(isOpen ? 1 : 0);
-	(0, react.useEffect)(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [mobileFullHeight, isOpen]);
-	const overlayClassNames = (0, classnames.default)({
-		"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 = (0, classnames.default)({
-		"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 = (0, classnames.default)({
-		"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 = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-[0px]": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = (0, classnames.default)({
-		"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__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: overlayClassNames,
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobileHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							handleHeaderClick: closeModal,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, classnames.default)({
-			"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] = (0, react.useState)(isOpen ? "block" : "none");
-	const [right, setRight] = (0, react.useState)(isOpen ? 0 : 0 - desktopWidth);
-	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(0);
-	(0, react.useEffect)(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setRight(isOpen ? 0 : 0 - desktopWidth);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [desktopWidth, isOpen]);
-	const overlayClassNames = (0, classnames.default)({
-		"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 = (0, classnames.default)({
-		"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 = (0, classnames.default)({
-		"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 = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-0": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = (0, classnames.default)({
-		"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__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: overlayClassNames,
-		initial: {
-			opacity: 0,
-			display: "none"
-		},
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktopHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.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 (0, __envive_ai_react_hooks_hooks_IsSmallScreen.useIsSmallScreen)() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobile, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktop, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	});
-};
-
-//#endregion
-Object.defineProperty(exports, 'ModalSheet', {
-  enumerable: true,
-  get: function () {
-    return ModalSheet;
-  }
-});