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

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,
+  },
+};

package/src/stories/Typography.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Typography } from '@envive-ai/react-toolkit/Typography';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Common/Typography',
+  component: Typography,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  args: {
+    className: undefined,
+    style: undefined,
+    noOfLines: undefined,
+    testId: undefined,
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: [
+          't1',
+          't2',
+          't3',
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'body1',
+          'body2',
+          'body3',
+          'body4',
+          'body5',
+        ],
+      },
+    },
+    elementType: {
+      control: {
+        type: 'select',
+        options: ['span', 'p', 'sub', 'h1', 'h2', 'h3', 'h4'],
+      },
+    },
+    className: { control: 'text' },
+    style: { control: 'object' },
+    noOfLines: { control: 'number' },
+    testId: { control: 'text' },
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Body1: Story = {
+  args: {
+    variant: 'body1',
+    children: 'This is a body1 text',
+  },
+};
+
+export const Body2: Story = {
+  args: {
+    variant: 'body2',
+    children: 'This is a body2 text',
+  },
+};
+
+export const Body3: Story = {
+  args: {
+    variant: 'body3',
+    children: 'This is a body3 text',
+  },
+};
+
+export const Body4: Story = {
+  args: {
+    variant: 'body4',
+    children: 'This is a body4 text',
+  },
+};
+
+export const Body5: Story = {
+  args: {
+    variant: 'body5',
+    children: 'This is a body5 text',
+  },
+};
+
+export const T1: Story = {
+  args: {
+    variant: 't1',
+    children: 'This is a t1 text',
+  },
+};
+
+export const T2: Story = {
+  args: {
+    variant: 't2',
+    children: 'This is a t2 text',
+  },
+};
+
+export const T3: Story = {
+  args: {
+    variant: 't3',
+    children: 'This is a t3 text',
+  },
+};
+
+export const H1: Story = {
+  args: {
+    variant: 'h1',
+    children: 'This is a h1 text',
+  },
+};
+
+export const H2: Story = {
+  args: {
+    variant: 'h2',
+    children: 'This is a h2 text',
+  },
+};
+
+export const H3: Story = {
+  args: {
+    variant: 'h3',
+    children: 'This is a h3 text',
+  },
+};
+
+export const H4: Story = {
+  args: {
+    variant: 'h4',
+    children: 'This is a h4 text',
+  },
+};

package/src/util/camelCase.ts

@@ -0,0 +1,87 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/camel-case.d.ts
+
+import type { SplitWords } from './splitWords';
+
+/**
+ * CamelCase options.
+ *
+ * @see {@link CamelCase}
+ */
+export type CamelCaseOptions = {
+  /**
+   * Whether to preserved consecutive uppercase letter.
+   *
+   * @default true
+   */
+  preserveConsecutiveUppercase?: boolean;
+};
+
+/**
+ * Convert an array of words to camel-case.
+ */
+type CamelCaseFromArray<
+  Words extends string[],
+  Options extends CamelCaseOptions,
+  OutputString extends string = '',
+> = Words extends [infer FirstWord extends string, ...infer RemainingWords extends string[]]
+  ? Options['preserveConsecutiveUppercase'] extends true
+    ? `${Capitalize<FirstWord>}${CamelCaseFromArray<RemainingWords, Options>}`
+    : `${Capitalize<Lowercase<FirstWord>>}${CamelCaseFromArray<RemainingWords, Options>}`
+  : OutputString;
+
+/**
+ * Convert a string literal to camel-case.
+ *
+ * This can be useful when, for example, converting some kebab-cased command-line flags or a snake-cased database result.
+ *
+ * By default, consecutive uppercase letter are preserved. See {@link CamelCaseOptions.preserveConsecutiveUppercase preserveConsecutiveUppercase} option to change this behaviour.
+ *
+ * @example
+ * ```
+ * import type {CamelCase} from 'type-fest';
+ *
+ * // Simple
+ *
+ * const someVariable: CamelCase<'foo-bar'> = 'fooBar';
+ *
+ * // Advanced
+ *
+ * type CamelCasedProperties<T> = {
+ * 	[K in keyof T as CamelCase<K>]: T[K]
+ * };
+ *
+ * interface RawOptions {
+ * 	'dry-run': boolean;
+ * 	'full_family_name': string;
+ * 	foo: number;
+ * 	BAR: string;
+ * 	QUZ_QUX: number;
+ * 	'OTHER-FIELD': boolean;
+ * }
+ *
+ * const dbResult: CamelCasedProperties<RawOptions> = {
+ * 	dryRun: true,
+ * 	fullFamilyName: 'bar.js',
+ * 	foo: 123,
+ * 	bar: 'foo',
+ * 	quzQux: 6,
+ * 	otherField: false
+ * };
+ * ```
+ *
+ * @category Change case
+ * @category Template literal
+ */
+export type CamelCase<
+  Type,
+  Options extends CamelCaseOptions = { preserveConsecutiveUppercase: true },
+> = Type extends string
+  ? string extends Type
+    ? Type
+    : Uncapitalize<
+        CamelCaseFromArray<
+          SplitWords<Type extends Uppercase<Type> ? Lowercase<Type> : Type>,
+          Options
+        >
+      >
+  : Type;

package/src/util/camelCasedPropertiesDeep.ts

@@ -0,0 +1,81 @@
+import type { CamelCase, CamelCaseOptions } from './camelCase';
+import type { UnknownArray } from './unknownArray';
+
+/**
+ * Convert object properties to camel case recursively.
+ *
+ * This can be useful when, for example, converting some API types from a different style.
+ *
+ * @see CamelCasedProperties
+ * @see CamelCase
+ *
+ * @example
+ * ```
+ * import type {CamelCasedPropertiesDeep} from 'type-fest';
+ *
+ * interface User {
+ * 	UserId: number;
+ * 	UserName: string;
+ * }
+ *
+ * interface UserWithFriends {
+ * 	UserInfo: User;
+ * 	UserFriends: User[];
+ * }
+ *
+ * const result: CamelCasedPropertiesDeep<UserWithFriends> = {
+ * 	userInfo: {
+ * 		userId: 1,
+ * 		userName: 'Tom',
+ * 	},
+ * 	userFriends: [
+ * 		{
+ * 			userId: 2,
+ * 			userName: 'Jerry',
+ * 		},
+ * 		{
+ * 			userId: 3,
+ * 			userName: 'Spike',
+ * 		},
+ * 	],
+ * };
+ * ```
+ *
+ * @category Change case
+ * @category Template literal
+ * @category Object
+ */
+export type CamelCasedPropertiesDeep<
+  Value,
+  Options extends CamelCaseOptions = { preserveConsecutiveUppercase: true },
+  // eslint-disable-next-line @typescript-eslint/ban-types
+> = Value extends Function
+  ? Value
+  : Value extends UnknownArray
+    ? CamelCasedPropertiesArrayDeep<Value>
+    : Value extends Set<infer U>
+      ? Set<CamelCasedPropertiesDeep<U, Options>>
+      : {
+          [K in keyof Value as CamelCase<K, Options>]: CamelCasedPropertiesDeep<Value[K], Options>;
+        };
+
+// This is a copy of DelimiterCasedPropertiesArrayDeep (see: delimiter-cased-properties-deep.d.ts).
+// These types should be kept in sync.
+type CamelCasedPropertiesArrayDeep<Value extends UnknownArray> = Value extends []
+  ? []
+  : // Tailing spread array
+    Value extends [infer U, ...infer V]
+    ? [CamelCasedPropertiesDeep<U>, ...CamelCasedPropertiesDeep<V>]
+    : Value extends readonly [infer U, ...infer V]
+      ? readonly [CamelCasedPropertiesDeep<U>, ...CamelCasedPropertiesDeep<V>]
+      : // Leading spread array
+        Value extends readonly [...infer U, infer V]
+        ? [...CamelCasedPropertiesDeep<U>, CamelCasedPropertiesDeep<V>]
+        : Value extends readonly [...infer U, infer V]
+          ? readonly [...CamelCasedPropertiesDeep<U>, CamelCasedPropertiesDeep<V>]
+          : // Array
+            Value extends Array<infer U>
+            ? Array<CamelCasedPropertiesDeep<U>>
+            : Value extends ReadonlyArray<infer U>
+              ? ReadonlyArray<CamelCasedPropertiesDeep<U>>
+              : never;

package/src/util/colorVar.ts

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

package/src/util/index.ts

@@ -0,0 +1,4 @@
+export * from './formatPrice';
+export * from './useScrollDirection';
+export * from './useStickyVisibility';
+export * from './colorVar';