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

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/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/SearchResultsFilter.stories.tsx

@@ -1,7 +1,7 @@
 import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
 import {
-  searchFilterSidebarVariantClasses,
   SearchResultsFilter,
+  searchFilterSidebarVariantClasses,
 } from '@envive-ai/react-toolkit/SearchResultsFilterSidebar';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 

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/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/OutlinedStar-CC0V_jAK.cjs

@@ -1,26 +0,0 @@
-const require_jsx_runtime_Dg2m6dxZ = require('./jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-
-//#region ../icons/dist/OutlinedStar.js
-var import_jsx_runtime = require_jsx_runtime_Dg2m6dxZ.require_jsx_runtime();
-const SvgOutlinedStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-	width: 10,
-	height: 10,
-	viewBox: "0 0 10 10",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-		d: "M5 1L5.30785 2.36664C5.56897 3.52576 6.4742 4.43104 7.63336 4.69216L9 5L7.63336 5.30784C6.4742 5.56896 5.56897 6.47416 5.30785 7.63336L5 9L4.69215 7.63336C4.43103 6.47416 3.5258 5.56896 2.36662 5.30784L1 5L2.36662 4.69216C3.5258 4.43104 4.43103 3.52584 4.69215 2.36664L5 1Z",
-		strokeWidth: .75,
-		strokeLinejoin: "round"
-	})
-});
-var OutlinedStar_default = SvgOutlinedStar;
-
-//#endregion
-Object.defineProperty(exports, 'OutlinedStar_default', {
-  enumerable: true,
-  get: function () {
-    return OutlinedStar_default;
-  }
-});

package/dist/OutlinedStar-WWs3gRwt.js

@@ -1,21 +0,0 @@
-import { t as require_jsx_runtime } from "./jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-
-//#region ../icons/dist/OutlinedStar.js
-var import_jsx_runtime = require_jsx_runtime();
-const SvgOutlinedStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-	width: 10,
-	height: 10,
-	viewBox: "0 0 10 10",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-		d: "M5 1L5.30785 2.36664C5.56897 3.52576 6.4742 4.43104 7.63336 4.69216L9 5L7.63336 5.30784C6.4742 5.56896 5.56897 6.47416 5.30785 7.63336L5 9L4.69215 7.63336C4.43103 6.47416 3.5258 5.56896 2.36662 5.30784L1 5L2.36662 4.69216C3.5258 4.43104 4.43103 3.52584 4.69215 2.36664L5 1Z",
-		strokeWidth: .75,
-		strokeLinejoin: "round"
-	})
-});
-var OutlinedStar_default = SvgOutlinedStar;
-
-//#endregion
-export { OutlinedStar_default as t };

package/dist/SearchResultsFilterButton-D929tRt9.cjs

@@ -1,96 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_jsx_runtime_Dg2m6dxZ = require('./jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-const require_ButtonBase = require('./ButtonBase-C44g6llb.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region ../icons/dist/SettingsVariant.js
-var import_jsx_runtime = require_jsx_runtime_Dg2m6dxZ.require_jsx_runtime();
-const SvgSettingsVariant = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
-	width: 28,
-	height: 28,
-	viewBox: "0 0 28 28",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.03346,
-			transform: "matrix(-1 0 0 1 22.4004 0)",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M14 3.5L0 3.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M28 3.5L23.5 3.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-			cx: 9.09961,
-			cy: 13.5,
-			r: 3.03346,
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M14 13.5L28 13.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M0 13.5L4.5 13.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.03346,
-			transform: "matrix(-1 0 0 1 22.4004 20)",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M14 23.5H0",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M28 23.5L23.5 23.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		})
-	]
-});
-var SettingsVariant_default = SvgSettingsVariant;
-
-//#endregion
-//#region src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx
-const SearchResultsFilterButton = ({ setIsOpen, filterButtonText }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
-		onClick: (0, react.useCallback)(() => {
-			setIsOpen(true);
-		}, [setIsOpen]),
-		icon: SettingsVariant_default,
-		iconClass: "spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center",
-		text: filterButtonText,
-		textClass: "spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block",
-		buttonClass: "spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]",
-		disablePadding: true
-	});
-};
-
-//#endregion
-Object.defineProperty(exports, 'SearchResultsFilterButton', {
-  enumerable: true,
-  get: function () {
-    return SearchResultsFilterButton;
-  }
-});

package/dist/SearchResultsFilterButton-Dk7u7rgn.js

@@ -1,90 +0,0 @@
-import { t as require_jsx_runtime } from "./jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-import { t as ButtonBase } from "./ButtonBase-Cjo-fBg2.js";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region ../icons/dist/SettingsVariant.js
-var import_jsx_runtime = require_jsx_runtime();
-const SvgSettingsVariant = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
-	width: 28,
-	height: 28,
-	viewBox: "0 0 28 28",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.03346,
-			transform: "matrix(-1 0 0 1 22.4004 0)",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M14 3.5L0 3.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M28 3.5L23.5 3.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-			cx: 9.09961,
-			cy: 13.5,
-			r: 3.03346,
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M14 13.5L28 13.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M0 13.5L4.5 13.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.03346,
-			transform: "matrix(-1 0 0 1 22.4004 20)",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M14 23.5H0",
-			stroke: "#767676",
-			strokeWidth: .933083
-		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-			d: "M28 23.5L23.5 23.5",
-			stroke: "#767676",
-			strokeWidth: .933083
-		})
-	]
-});
-var SettingsVariant_default = SvgSettingsVariant;
-
-//#endregion
-//#region src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx
-const SearchResultsFilterButton = ({ setIsOpen, filterButtonText }) => {
-	return /* @__PURE__ */ jsx(ButtonBase, {
-		onClick: useCallback(() => {
-			setIsOpen(true);
-		}, [setIsOpen]),
-		icon: SettingsVariant_default,
-		iconClass: "spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center",
-		text: filterButtonText,
-		textClass: "spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block",
-		buttonClass: "spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]",
-		disablePadding: true
-	});
-};
-
-//#endregion
-export { SearchResultsFilterButton as t };