@envive-ai/react-toolkit 0.2.11 → 0.2.12

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';

package/src/util/internal.ts

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/internal.d.ts
+
+import type { Primitive } from './primitive';
+import type { Trim } from './trim';
+
+/**
+ * Matches any primitive, `void`, `Date`, or `RegExp` value.
+ */
+export type BuiltIns = Primitive | void | Date | RegExp;
+
+/**
+ * Matches non-recursive types.
+ */
+export type NonRecursiveType =
+  | BuiltIns
+  | ((...arguments_: any[]) => unknown)
+  | (new (...arguments_: any[]) => unknown);
+
+/**
+ * Returns a boolean for whether the string is numeric.
+ *
+ * This type is a workaround for [Microsoft/TypeScript#46109](https://github.com/microsoft/TypeScript/issues/46109#issuecomment-930307987).
+ */
+export type IsNumeric<T extends string> = T extends `${number}`
+  ? Trim<T> extends T
+    ? true
+    : false
+  : false;
+
+/**
+ * Returns a boolean for whether the string is lowercased.
+ */
+export type IsLowerCase<T extends string> = T extends Lowercase<T> ? true : false;
+
+/**
+ * Returns a boolean for whether the string is upper-cased.
+ */
+export type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;
+
+export type WordSeparators = '-' | '_' | Whitespace;
+
+export type Whitespace =
+  | '\u{9}' // '\t'
+  | '\u{A}' // '\n'
+  | '\u{B}' // '\v'
+  | '\u{C}' // '\f'
+  | '\u{D}' // '\r'
+  | '\u{20}' // ' '
+  | '\u{85}'
+  | '\u{A0}'
+  | '\u{1680}'
+  | '\u{2000}'
+  | '\u{2001}'
+  | '\u{2002}'
+  | '\u{2003}'
+  | '\u{2004}'
+  | '\u{2005}'
+  | '\u{2006}'
+  | '\u{2007}'
+  | '\u{2008}'
+  | '\u{2009}'
+  | '\u{200A}'
+  | '\u{2028}'
+  | '\u{2029}'
+  | '\u{202F}'
+  | '\u{205F}'
+  | '\u{3000}'
+  | '\u{FEFF}';
+
+export type UpperCaseCharacters =
+  | 'A'
+  | 'B'
+  | 'C'
+  | 'D'
+  | 'E'
+  | 'F'
+  | 'G'
+  | 'H'
+  | 'I'
+  | 'J'
+  | 'K'
+  | 'L'
+  | 'M'
+  | 'N'
+  | 'O'
+  | 'P'
+  | 'Q'
+  | 'R'
+  | 'S'
+  | 'T'
+  | 'U'
+  | 'V'
+  | 'W'
+  | 'X'
+  | 'Y'
+  | 'Z';

package/src/util/primitive.ts

@@ -0,0 +1,8 @@
+// this type comes from https://github.com/sindresorhus/type-fest/blob/main/source/primitive.d.ts
+
+/**
+ * Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
+ *
+ * @category Type
+ */
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint;

package/src/util/splitWords.ts

@@ -0,0 +1,76 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/split-words.d.ts
+
+import type { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from './internal';
+
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+
+type RemoveLastCharacter<
+  Sentence extends string,
+  Character extends string,
+> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+export type SplitWords<
+  Sentence extends string,
+  LastCharacter extends string = '',
+  CurrentWord extends string = '',
+> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}`
+  ? FirstCharacter extends WordSeparators
+    ? // Skip word separator
+      [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters>]
+    : LastCharacter extends ''
+      ? // Fist char of word
+        SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>
+      : // Case change: non-numeric to numeric, push word
+        [false, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>]
+        ? [
+            ...SkipEmptyWord<CurrentWord>,
+            ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>,
+          ]
+        : // Case change: numeric to non-numeric, push word
+          [true, false] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>]
+          ? [
+              ...SkipEmptyWord<CurrentWord>,
+              ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>,
+            ]
+          : // No case change: concat word
+            [true, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>]
+            ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`>
+            : // Case change: lower to upper, push word
+              [true, true] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>]
+              ? [
+                  ...SkipEmptyWord<CurrentWord>,
+                  ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>,
+                ]
+              : // Case change: upper to lower, brings back the last character, push word
+                [true, true] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>]
+                ? [
+                    ...RemoveLastCharacter<CurrentWord, LastCharacter>,
+                    ...SplitWords<
+                      RemainingCharacters,
+                      FirstCharacter,
+                      `${LastCharacter}${FirstCharacter}`
+                    >,
+                  ]
+                : // No case change: concat word
+                  SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`>
+  : [...SkipEmptyWord<CurrentWord>];

package/src/util/trim.ts

@@ -0,0 +1,28 @@
+// these types come from https://github.com/sindresorhus/type-fest/blob/main/source/trim.d.ts
+
+import type { Whitespace } from './internal';
+
+/**
+ * Remove spaces from the left side.
+ */
+type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+
+/**
+ * Remove spaces from the right side.
+ */
+type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+
+/**
+ * Remove leading and trailing spaces from a string.
+ * @example
+ * ```
+ * import type {Trim} from 'type-fest';
+ *
+ * Trim<' foo '>
+ * //=> 'foo'
+ * ```
+ *
+ * @category String
+ * @category Template literal
+ */
+export type Trim<V extends string> = TrimLeft<TrimRight<V>>;

package/src/util/unknownArray.ts

@@ -0,0 +1,25 @@
+/**
+ * Represents an array with `unknown` value.
+ *
+ * Use case: You want a type that all arrays can be assigned to, but you don't care about the value.
+ *
+ * @example
+ * ```
+ * import type {UnknownArray} from 'type-fest';
+ *
+ * type IsArray<T> = T extends UnknownArray ? true : false;
+ *
+ * type A = IsArray<['foo']>;
+ * //=> true
+ *
+ * type B = IsArray<readonly number[]>;
+ * //=> true
+ *
+ * type C = IsArray<string>;
+ * //=> false
+ * ```
+ *
+ * @category Type
+ * @category Array
+ */
+export type UnknownArray = readonly unknown[];

package/src/util/useScrollDirection.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect, useRef } from 'react';
+
+export type ScrollDirection = 'up' | 'down';
+
+export const useScrollDirection = (scrollContainerRef?: React.RefObject<HTMLElement>) => {
+  const [scrollDirection, setScrollDirection] = useState<ScrollDirection | null>(null);
+  const touchStartY = useRef(0);
+
+  useEffect(() => {
+    const container = scrollContainerRef?.current || window;
+    const touchTarget = scrollContainerRef?.current || document;
+
+    const handleWheel = (e: Event) => {
+      const event = e as WheelEvent;
+      if (event.deltaY > 0) {
+        setScrollDirection('down');
+      } else {
+        setScrollDirection('up');
+      }
+    };
+
+    const handleTouchStart = (e: Event) => {
+      const event = e as TouchEvent;
+      touchStartY.current = event.touches[0].clientY;
+    };
+
+    const handleTouchMove = (e: Event) => {
+      const event = e as TouchEvent;
+      const currentTouchY = event.touches[0].clientY;
+      const deltaY = touchStartY.current - currentTouchY;
+
+      const TOUCH_THRESHOLD = 10; // pixels
+
+      if (Math.abs(deltaY) < TOUCH_THRESHOLD) {
+        return;
+      }
+
+      if (deltaY > 0) {
+        setScrollDirection('down');
+      } else {
+        setScrollDirection('up');
+      }
+
+      // Reset the starting point to prevent continuous firing
+      touchStartY.current = currentTouchY;
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: true });
+    touchTarget.addEventListener('touchstart', handleTouchStart, { passive: true });
+    touchTarget.addEventListener('touchmove', handleTouchMove, { passive: true });
+
+    return () => {
+      container.removeEventListener('wheel', handleWheel);
+      touchTarget.removeEventListener('touchstart', handleTouchStart);
+      touchTarget.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [scrollContainerRef]);
+
+  return scrollDirection;
+};

package/src/util/useStickyVisibility.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect, useRef } from 'react';
+import { useScrollDirection } from './useScrollDirection';
+
+export const useStickyVisibility = () => {
+  const [isVisible, setIsVisible] = useState(true);
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const [toolbarHeight, setToolbarHeight] = useState(0);
+  const [scrollY, setScrollY] = useState(0);
+
+  const scrollDirection = useScrollDirection();
+
+  // listen for scroll events
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // measure the toolbars height
+  useEffect(() => {
+    if (toolbarRef.current) {
+      setToolbarHeight(toolbarRef.current.offsetHeight);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (scrollDirection === 'down' && scrollY > toolbarHeight && toolbarHeight > 0) {
+      setIsVisible(false);
+    } else {
+      setIsVisible(true);
+    }
+  }, [scrollDirection, toolbarHeight, scrollY]);
+
+  return { toolbarRef, isVisible, toolbarHeight };
+};

package/dist/Accordion/index.cjs

@@ -1,4 +0,0 @@
-require('../Typography-Ds4gfOJz.cjs');
-const require_Accordion = require('../Accordion-FyCFBOen.cjs');
-
-exports.Accordion = require_Accordion.Accordion;

package/dist/Accordion/index.js

@@ -1,4 +0,0 @@
-import "../Typography-C3QmJzFK.js";
-import { Accordion } from "../Accordion-B8aUlf0q.js";
-
-export { Accordion };

package/dist/AnimatedChevron/index.cjs

@@ -1,3 +0,0 @@
-const require_AnimatedChevron = require('../AnimatedChevron-wpcAHp6d.cjs');
-
-exports.AnimatedChevron = require_AnimatedChevron.AnimatedChevron;

package/dist/AnimatedChevron/index.js

@@ -1,3 +0,0 @@
-import { AnimatedChevron } from "../AnimatedChevron-Dee6Pe81.js";
-
-export { AnimatedChevron };

package/dist/ButtonBase/index.cjs

@@ -1,6 +0,0 @@
-require('../Typography-Ds4gfOJz.cjs');
-const require_ButtonBase = require('../ButtonBase-B6vDKbGQ.cjs');
-require('../ButtonBase-DbWQ25n-.cjs');
-
-exports.ButtonBase = require_ButtonBase.ButtonBase;
-exports.ButtonBaseOverrides = require_ButtonBase.ButtonBaseOverrides;