@envive-ai/react-toolkit 0.2.11 → 0.2.12

package/src/models/colorsConfig.ts

@@ -0,0 +1,28 @@
+enum ColorNames {
+  TextPrimary = 'text-primary',
+  TextSecondary = 'text-secondary',
+  TextAccent = 'text-accent',
+  TextLink = 'text-link',
+  TextLight = 'text-light',
+  BackgroundPrimary = 'background-primary',
+  BackgroundSecondary = 'background-secondary',
+  BackgroundSecondaryDark = 'background-secondary-dark',
+  BackgroundTertiary = 'background-tertiary',
+  BackgroundDark = 'background-dark',
+  BackgroundLight = 'background-light',
+  BackgroundSaturated = 'background-saturated',
+  BorderLight = 'border-light',
+  BorderMedium = 'border-medium',
+  BorderDark = 'border-dark',
+  BorderOutline = 'border-outline',
+  AccentPrimary = 'accent-primary',
+  AccentSecondary = 'accent-secondary',
+}
+
+type ColorMapping = {
+  [key in ColorNames]: string;
+};
+
+const colorVar = (color: ColorNames): string => `var(--spiffy-colors-${color})`;
+export { ColorNames, colorVar };
+export type { ColorMapping };

package/src/stories/AppliedFiltersScrollbar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
+import { AppliedFiltersScrollbar } from '@envive-ai/react-toolkit/AppliedFiltersScrollbar';
+
+const mockSelectedFilterOptions: SelectedFilterOption[] = [
+  { id: 'cat2', displayName: 'Category 2', filterId: 'category', filterItemId: 'cat2' },
+  { id: 'brandA', displayName: 'Brand A', filterId: 'brand', filterItemId: 'brandA' },
+  { id: 'colorRed', displayName: 'Color: Red', filterId: 'color', filterItemId: 'red' },
+  { id: 'sizeM', displayName: 'Size: M', filterId: 'size', filterItemId: 'M' },
+];
+
+const meta: Meta<typeof AppliedFiltersScrollbar> = {
+  title: 'Search/AppliedFiltersScrollbar',
+  component: AppliedFiltersScrollbar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AppliedFiltersScrollbar>;
+
+export const Default: Story = {
+  args: {
+    selectedFilterOptions: mockSelectedFilterOptions,
+    filterBarClassNames:
+      'spiffy-suggestion-bar spiffy-tw-no-scrollbar spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-gap-2 spiffy-tw-mb-[16px] spiffy-tw-overflow-x-scroll spiffy-tw-px-[16px] sm:spiffy-tw-px-[46px]',
+    filterDefaultClasses:
+      'spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-accent-primary]',
+    appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-accent-primary]',
+    onRemoveFilter: () => {},
+  },
+};
+
+export const NoFilters: Story = {
+  args: {
+    ...Default.args,
+    selectedFilterOptions: [],
+  },
+};

package/src/stories/ButtonBase.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ButtonBase } from '@envive-ai/react-toolkit/ButtonBase';
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
+
+const meta = {
+  title: 'Common/ButtonBase',
+  component: ButtonBase,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    dataAttributes: undefined,
+    buttonClass: undefined,
+    textClass: undefined,
+    icon: undefined,
+    dataTestId: undefined,
+    onClick: undefined,
+  },
+  argTypes: {
+    onClick: { action: 'clicked' },
+    dataAttributes: { control: 'object' },
+    buttonClass: { control: 'text' },
+    textClass: { control: 'text' },
+    dataTestId: { control: 'text' },
+    type: { control: 'select', options: ['button', 'submit', 'reset'] },
+    isDisabled: { control: 'boolean' },
+    iconClass: { control: 'text' },
+    disablePadding: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ButtonBase>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: 'Button',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    text: 'Settings',
+    icon: SettingsVariant,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    text: 'Disabled Button',
+    isDisabled: true,
+  },
+};

package/src/stories/DynamicFiltersScrollbar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DynamicFiltersScrollbar } from '@envive-ai/react-toolkit/DynamicFiltersScrollbar';
+
+const mockAvailableDynamicFilters = [
+  { name: 'color', displayName: 'Color' },
+  { name: 'size', displayName: 'Size' },
+  { name: 'material', displayName: 'Material' },
+  { name: 'brand', displayName: 'Brand' },
+  { name: 'price', displayName: 'Price Range' },
+  { name: 'rating', displayName: 'Customer Rating' },
+];
+
+const meta: Meta<typeof DynamicFiltersScrollbar> = {
+  title: 'Search/DynamicFiltersScrollbar',
+  component: DynamicFiltersScrollbar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DynamicFiltersScrollbar>;
+
+export const Default: Story = {
+  args: {
+    availableDynamicFilters: mockAvailableDynamicFilters,
+    filterBarClassNames:
+      'spiffy-suggestion-bar spiffy-tw-no-scrollbar spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-gap-2 spiffy-tw-mb-[16px] spiffy-tw-overflow-x-scroll spiffy-tw-px-[16px] sm:spiffy-tw-px-[46px]',
+    filterDefaultClasses:
+      'spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterHoverClasses: 'hover:spiffy-tw-border-[--spiffy-colors-accent-primary]',
+    onToggleDynamicFilter: () => {},
+  },
+};
+
+export const NoFilters: Story = {
+  args: {
+    ...Default.args,
+    availableDynamicFilters: [],
+  },
+};

package/src/stories/NoSearchResultsFound.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NoSearchResultsFound } from '@envive-ai/react-toolkit/SearchResultsStates';
+
+const meta: Meta<typeof NoSearchResultsFound> = {
+  title: 'Search/NoSearchResultsFound',
+  component: NoSearchResultsFound,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof NoSearchResultsFound>;
+
+export const Default: Story = {
+  args: {
+    containerPaddingClasses: 'spiffy-tw-px-[16px]',
+    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)',
+  },
+};
+
+export const CustomText: Story = {
+  args: {
+    ...Default.args,
+    noResultsFoundText: 'No items found matching your criteria. Please try again.',
+  },
+};

package/src/stories/ProductCard.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProductCard } from '@envive-ai/react-toolkit/ProductCard';
+import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+
+const meta: Meta<typeof ProductCard> = {
+  title: 'Common/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layoutVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    variant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    hoverVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    aspectRatio: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCard>;
+
+export const Default: Story = {
+  args: {
+    productCardConfig: {
+      variant: 'minimal',
+      hoverVariant: 'backgroundDark',
+      layoutVariant: 'tall',
+    },
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Example Product Title',
+    url: '#',
+    originalPrice: 25.0,
+    salePrice: 20.0,
+    averageRating: 4.5,
+    numberReviews: 120,
+    layoutVariant: 'tall',
+    variant: 'minimal',
+    hoverVariant: 'backgroundDark',
+    zoomOnHover: true,
+    aspectRatio: 'none',
+    growWithContainer: true,
+  },
+};
+
+export const TallLayout: Story = {
+  args: {
+    ...Default.args,
+    layoutVariant: 'tall',
+  },
+};
+
+export const NoSalePrice: Story = {
+  args: {
+    ...Default.args,
+    salePrice: undefined,
+  },
+};
+
+export const NoRating: Story = {
+  args: {
+    ...Default.args,
+    averageRating: undefined,
+    numberReviews: undefined,
+  },
+};

package/src/stories/ProductCardSkeleton.stories.tsx

@@ -0,0 +1,48 @@
+import { ProductCardSkeleton } from '@envive-ai/react-toolkit/ProductCard';
+import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof ProductCardSkeleton> = {
+  title: 'Common/ProductCardSkeleton',
+  component: ProductCardSkeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layoutVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    aspectRatio: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCardSkeleton>;
+
+export const Default: Story = {
+  args: {
+    layoutVariant: 'normal',
+    aspectRatio: 'none',
+    growWithContainer: true,
+  },
+};
+
+export const MinimalLayout: Story = {
+  args: {
+    ...Default.args,
+    layoutVariant: 'normal',
+  },
+};
+
+export const AspectRatio3x4: Story = {
+  args: {
+    ...Default.args,
+    aspectRatio: '3:4',
+  },
+};

package/src/stories/ProductGrid.stories.tsx

@@ -0,0 +1,82 @@
+import { ProductGrid, productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const mockProductList = [
+  {
+    id: '1',
+    responseId: 'prod1',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 1',
+    url: '#',
+    originalPrice: 25.0,
+    salePrice: 20.0,
+    averageRating: 4.5,
+    numberReviews: 120,
+  },
+  {
+    id: '2',
+    responseId: 'prod2',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 2',
+    url: '#',
+    originalPrice: 30.0,
+    salePrice: 28.0,
+    averageRating: 3.9,
+    numberReviews: 85,
+  },
+  {
+    id: '3',
+    responseId: 'prod3',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 3',
+    url: '#',
+    originalPrice: 15.0,
+    salePrice: 12.5,
+    averageRating: 4.8,
+    numberReviews: 200,
+  },
+  {
+    id: '4',
+    responseId: 'prod4',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 4',
+    url: '#',
+    originalPrice: 50.0,
+    salePrice: 45.0,
+    averageRating: 4.2,
+    numberReviews: 50,
+  },
+];
+
+const meta: Meta<typeof ProductGrid> = {
+  title: 'Common/ProductGrid',
+  component: ProductGrid,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    productGridVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductGrid>;
+
+export const Default: Story = {
+  args: {
+    productList: mockProductList,
+    productGridVariant: 'standard',
+    productGridClasses:
+      'spiffy-tw-grid spiffy-tw-justify-items-stretch spiffy-tw-grid-cols-2 md:spiffy-tw-grid-cols-3 lg:spiffy-tw-grid-cols-4 spiffy-tw-gap-x-[4px] spiffy-tw-gap-y-[24px] spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-items-stretch',
+    cardsGrowWithContainer: true,
+    productCardConfig: {
+      variant: 'minimal',
+      hoverVariant: 'backgroundDark',
+      layoutVariant: 'tall',
+    },
+  },
+};

package/src/stories/SearchInputForm.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchInputForm } from '@envive-ai/react-toolkit/SearchInputForm';
+
+export type SearchInputVariant = 'standard';
+
+const mockAutocompleteResults = ['apple', 'banana', 'orange', 'grape', 'strawberry'];
+
+const meta: Meta<typeof SearchInputForm> = {
+  title: 'Search/SearchInputForm',
+  component: SearchInputForm,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    searchInputVariant: {
+      control: 'select',
+      options: ['standard'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchInputForm>;
+
+export const Default: Story = {
+  args: {
+    searchInputVariant: 'standard' as SearchInputVariant,
+    searchText: '',
+    autocompleteResults: mockAutocompleteResults,
+    searchBoxPlaceholder: 'Search for products...',
+    focusedOptionId: undefined,
+    focusedIndex: -1,
+    onKeyDown: () => {},
+    onAutocompleteSelect: () => {},
+    onSearchInputChange: () => {},
+    onSearchSubmit: () => {},
+  },
+};

package/src/stories/SearchResultsFilter.stories.tsx

@@ -0,0 +1,56 @@
+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';
+
+const mockSearchFilters: SearchFilterDatum[] = [
+  {
+    filterId: 'category',
+    displayName: 'Category',
+    items: [
+      { filterItemId: 'cat1', displayName: 'Category 1', productCount: 10, isSelected: false },
+      { filterItemId: 'cat2', displayName: 'Category 2', productCount: 10, isSelected: true },
+    ],
+  },
+  {
+    filterId: 'brand',
+    displayName: 'Brand',
+    items: [
+      { filterItemId: 'brandA', displayName: 'Brand A', productCount: 10, isSelected: false },
+      { filterItemId: 'brandB', displayName: 'Brand B', productCount: 10, isSelected: false },
+    ],
+  },
+];
+
+const meta: Meta<typeof SearchResultsFilter> = {
+  title: 'Search/SearchResultsFilter',
+  component: SearchResultsFilter,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    searchFilterSidebarVariant: {
+      control: 'select',
+      options: Object.keys(searchFilterSidebarVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchResultsFilter>;
+
+export const Default: Story = {
+  args: {
+    productCount: 100,
+    isOpen: true,
+    setIsOpen: () => {},
+    searchFilters: mockSearchFilters,
+    searchFilterSidebarVariant: 'darkButton',
+    onSelectFilterItem: () => {},
+    onClearAllFilters: () => {},
+    filterButtonText: 'Filter',
+  },
+};

package/src/stories/SearchResultsGrid.stories.tsx

@@ -0,0 +1,98 @@
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
+import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+import { SearchResultsGrid } from '@envive-ai/react-toolkit/SearchResultsStates';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const mockProductList = [
+  {
+    id: '1',
+    responseId: 'prod1',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 1',
+    url: '#',
+    originalPrice: 25.0,
+    salePrice: 20.0,
+    averageRating: 4.5,
+    numberReviews: 120,
+  },
+  {
+    id: '2',
+    responseId: 'prod2',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 2',
+    url: '#',
+    originalPrice: 30.0,
+    salePrice: 28.0,
+    averageRating: 3.9,
+    numberReviews: 85,
+  },
+  {
+    id: '3',
+    responseId: 'prod3',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 3',
+    url: '#',
+    originalPrice: 15.0,
+    salePrice: 12.5,
+    averageRating: 4.8,
+    numberReviews: 200,
+  },
+  {
+    id: '4',
+    responseId: 'prod4',
+    imageUrl: 'https://dummyimage.com/250x250/cccccc/aeaeae.jpg',
+    title: 'Product 4',
+    url: '#',
+    originalPrice: 50.0,
+    salePrice: 45.0,
+    averageRating: 4.2,
+    numberReviews: 50,
+  },
+];
+
+const mockAvailableDynamicFilters = [
+  { name: 'color', displayName: 'Color' },
+  { name: 'size', displayName: 'Size' },
+  { name: 'material', displayName: 'Material' },
+];
+
+const mockSelectedFilterOptions: SelectedFilterOption[] = [
+  { id: 'cat2', displayName: 'Category 2', filterId: 'cat2', filterItemId: 'cat2' },
+];
+
+const meta: Meta<typeof SearchResultsGrid> = {
+  title: 'Search/SearchResultsGrid',
+  component: SearchResultsGrid,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    productGridVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+    searchFilterSidebarVariant: {
+      control: 'select',
+      options: ['darkButton', 'lightButton'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchResultsGrid>;
+
+export const Default: Story = {
+  args: {
+    productList: mockProductList,
+    availableDynamicFilters: mockAvailableDynamicFilters,
+    searchFilterSidebarVariant: 'darkButton',
+    productGridVariant: 'standard',
+    selectedFilterOptions: mockSelectedFilterOptions,
+    containerXPaddingClasses: 'spiffy-tw-px-[16px] sm:spiffy-tw-px-[46px]',
+    productGridClasses:
+      'spiffy-tw-grid spiffy-tw-justify-items-stretch spiffy-tw-grid-cols-2 md:spiffy-tw-grid-cols-3 lg:spiffy-tw-grid-cols-4 spiffy-tw-gap-x-[4px] spiffy-tw-gap-y-[24px] spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-items-stretch',
+    onRemoveFilter: () => {},
+    onToggleDynamicFilter: () => {},
+  },
+};

package/src/stories/SearchResultsLoadingGrid.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchResultsLoadingGrid } from '@envive-ai/react-toolkit/SearchResultsStates';
+import { productGridVariantClasses } from '@envive-ai/react-toolkit/ProductGrid';
+
+const meta: Meta<typeof SearchResultsLoadingGrid> = {
+  title: 'Search/SearchResultsLoadingGrid',
+  component: SearchResultsLoadingGrid,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    productGridVariant: {
+      control: 'select',
+      options: Object.values(productGridVariantClasses),
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchResultsLoadingGrid>;
+
+export const Default: Story = {
+  args: {
+    productGridVariant: 'standard',
+    productGridClasses:
+      'spiffy-tw-grid spiffy-tw-justify-items-stretch spiffy-tw-grid-cols-2 md:spiffy-tw-grid-cols-3 lg:spiffy-tw-grid-cols-4 spiffy-tw-gap-x-[4px] spiffy-tw-gap-y-[24px] spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-items-stretch',
+    sparkleIconColor: 'var(--spiffy-colors-accent-primary)',
+  },
+};

package/src/stories/SparkleAnimation.stories.tsx

@@ -0,0 +1,47 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { SparkleAnimation } from '@envive-ai/react-toolkit/SparkleAnimation';
+import classNames from 'classnames';
+
+const meta: Meta<typeof SparkleAnimation> = {
+  title: 'Common/SparkleAnimation',
+  component: SparkleAnimation,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color' },
+    animate: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SparkleAnimation>;
+
+export const Default: Story = {
+  args: {
+    color: 'var(--spiffy-colors-accent-primary)',
+    animate: true,
+  },
+  render: (args) => {
+    const classes = classNames(
+      'spiffy-tw-flex',
+      'spiffy-tw-flex-row',
+      'spiffy-tw-items-center', // Center items vertically
+      'spiffy-tw-gap-[4px]',
+      'spiffy-tw-h-[24px]',
+    );
+    return (
+      <div>
+        <SparkleAnimation {...args} className={classes} />
+      </div>
+    );
+  },
+};
+
+export const NotAnimating: Story = {
+  args: {
+    ...Default.args,
+    animate: false,
+  },
+};