@trackunit/react-components 0.1.119 → 0.1.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.119",
+  "version": "0.1.124",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,7 +12,7 @@
     "@trackunit/css-core": "0.0.88",
     "@trackunit/tailwind-styled-components": "0.0.58",
     "@trackunit/ui-design-tokens": "0.0.72",
-    "@trackunit/ui-icons": "0.0.68",
+    "@trackunit/ui-icons": "0.0.69",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",
@@ -20,7 +20,8 @@
     "react-helmet-async": "1.3.0",
     "react-router-dom": "6.11.2",
     "react-use": "17.4.0",
-    "react-useportal": "1.0.17"
+    "react-useportal": "1.0.17",
+    "zod": "3.14.1"
   },
   "module": "./index.js",
   "main": "./index.cjs",

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -10,14 +10,6 @@ export interface MenuItemProps extends CommonProps {
      * If you use this prop, the label prop will be ignored.
      */
     children?: React.ReactNode;
-    /**
-     * Additional tailwind classes to be applied to the component.
-     */
-    className?: string;
-    /**
-     * Test id to be used for the component.
-     */
-    dataTestId?: string;
     /**
      * An React element to render before the label.
      * This is typically used to render an icon.

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -0,0 +1,12 @@
+export declare const cvaMenuItem: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    focused?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuItemLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMenuItemSuffix: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuItemPrefix: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Menu/MenuList/MenuList.d.ts

@@ -1,17 +1,10 @@
 /// <reference types="react" />
 import { MenuItemProps } from "../MenuItem/MenuItem";
+import { CommonProps } from "../../../common";
 export interface MenuListItemProps extends MenuItemProps {
     showDivider?: boolean;
 }
-export interface MenuListProps {
-    /**
-     * Additional tailwind classes to be applied to the component.
-     */
-    className?: string;
-    /**
-     * Test id to be used for the component.
-     */
-    dataTestId?: string;
+export interface MenuListProps extends CommonProps {
     /**
      * List of menu items to be rendered.
      */

package/src/components/Menu/MenuList/MenuList.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaMenuList: (props?: ({
+    stickyHeader?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMenuListDivider: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Menu/MoreMenu/MoreMenu.variants.d.ts

@@ -0,0 +1 @@
+export declare const cvaMoreMenu: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Modal/Modal.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const cvaModalContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaModalCard: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaModalBackdrop: (props?: ({
+    show?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Text/Text.variants.d.ts

@@ -0,0 +1,9 @@
+export declare const cvaText: (props?: ({
+    align?: "left" | "right" | "center" | null | undefined;
+    italic?: boolean | null | undefined;
+    uppercase?: boolean | null | undefined;
+    underline?: boolean | null | undefined;
+    weight?: "normal" | "bold" | "thick" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    color?: "default" | "subtleInverted" | "subtle" | "inverted" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/hooks/index.d.ts

@@ -1,9 +1,9 @@
+export * from "./localStorage/useLocalStorage";
+export * from "./localStorage/useLocalStorageReducer";
 export * from "./useClickOutside";
 export * from "./useDebounce";
 export * from "./useDevicePixelRatio";
 export * from "./useHover";
 export * from "./useIsFirstRender";
-export * from "./useLocalStorage";
-export * from "./useLocalStorageReducer";
 export * from "./useResize";
 export * from "./useTimeout";

package/src/hooks/localStorage/initLocalStorageState.d.ts

@@ -0,0 +1,9 @@
+import { LocalStorageParams } from "./types";
+/**
+ * Initializes the state from local storage, parsing and validating it if a Zod schema is provided.
+ *
+ * @template State - The type of the state stored in local storage.
+ * @param {Omit<LocalStorageParams<State>, "state">} params - The parameters for initializing the local storage state.
+ * @returns {State} - The initialized state.
+ */
+export declare const initLocalStorageState: <State>({ key, defaultState, schema, }: Omit<LocalStorageParams<State>, "state">) => State;

package/src/hooks/localStorage/types.d.ts

@@ -0,0 +1,27 @@
+import { ZodType } from "zod";
+export interface LocalStorageParams<State> {
+    /**
+     * The key used to store the value in local storage.
+     */
+    key: string;
+    /**
+     * The default state value.
+     */
+    defaultState: State;
+    /**
+     * Optional schema for validating the state.
+     */
+    schema?: ZodType<State>;
+}
+export interface LocalStorageCallbacks {
+    /**
+     * Optional callback function called when validation fails.
+     *
+     * @param error - The validation error object.
+     */
+    onValidationFailed?: (error: unknown) => void;
+    /**
+     * Optional callback function called when validation succeeds.
+     */
+    onValidationSuccessful?: () => void;
+}

package/src/hooks/localStorage/useLocalStorage.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from "react";
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+/**
+ * Works like a normal useState, but saves to local storage and has optional schema validation.
+ *
+ * @template State - The type of the value stored in local storage.
+ * @param {Omit<LocalStorageParams<State>, "state"> & LocalStorageCallbacks} options - The options for useLocalStorage.
+ * @returns {[State, Dispatch<SetStateAction<State>>, () => void]} - A tuple containing the current value, a function to update the value, and a function to remove the value from local storage.
+ */
+export declare const useLocalStorage: <State>({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }: Omit<LocalStorageParams<State>, "state"> & LocalStorageCallbacks) => [State, Dispatch<SetStateAction<State>>, () => void];

package/src/hooks/localStorage/useLocalStorageEffect.d.ts

@@ -0,0 +1,11 @@
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+/**
+ * Custom hook for synchronizing a state variable with local storage,
+ * with optional schema validation and callbacks.
+ *
+ * @template State - The type of the state variable.
+ * @param {LocalStorageParams<State> & LocalStorageCallbacks & { state: State }} params - The parameters for the useLocalStorageEffect hook.
+ */
+export declare const useLocalStorageEffect: <State>({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<State> & LocalStorageCallbacks & {
+    state: State;
+}) => void;

package/src/hooks/localStorage/useLocalStorageReducer.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch } from "react";
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+/**
+ * Works like a normal useReducer, but saves to local storage and has optional schema validation.
+ *
+ * @template State - The type of the state.
+ * @template Action - The type of the action.
+ * @param {LocalStorageParams<State> & LocalStorageCallbacks} params - The parameters for the useLocalStorageReducer function.
+ * @returns {[State, Dispatch<Action>]} - A tuple containing the state and the dispatch function.
+ */
+export declare const useLocalStorageReducer: <State, Action>({ key, defaultState, reducer, schema, onValidationFailed, onValidationSuccessful, }: {
+    reducer: (state: State, action: Action) => State;
+} & LocalStorageParams<State> & LocalStorageCallbacks) => [State, Dispatch<Action>];

package/src/hooks/localStorage/validateState.d.ts

@@ -0,0 +1,13 @@
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+type ValidateStateOptions<State> = Required<Pick<LocalStorageParams<State>, "schema">> & {
+    state: State;
+} & LocalStorageCallbacks;
+/**
+ * Validates the state object using a Zod schema.
+ *
+ * @template State - The type of the state.
+ * @param {ValidateStateOptions<State>} params - The parameters for the validateState function.
+ * @returns {boolean} - `true` if the state is valid according to the schema, `false` otherwise.
+ */
+export declare const validateState: <State>({ state, schema, onValidationFailed, onValidationSuccessful, }: ValidateStateOptions<State>) => boolean;
+export {};

package/src/index.d.ts

@@ -3,5 +3,6 @@ export * from "./components";
 export * from "./components/buttons/shared/Button.variants";
 export * from "./components/Clickable/Clickable.variants";
 export * from "./components/Indicator/Indicator.variants";
+export * from "./components/Menu/MenuItem/MenuItem.variants";
 export * from "./hooks";
 export * from "./layout";

package/src/hooks/useLocalStorage.d.ts

@@ -1,9 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-/**
- * The useLocalStorage hook works like useState, but saves to localstorage.
- *
- * @param {string} key - The key the values is saved under.
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
- * @returns {string | null | undefined} value
- */
-export declare const useLocalStorage: <TValue = string | null | undefined>(key: string, initialValue?: TValue | undefined) => [TValue | null, Dispatch<SetStateAction<TValue | null>>, () => void];

package/src/hooks/useLocalStorageReducer.d.ts

@@ -1,7 +0,0 @@
-import { Dispatch } from "react";
-/**
- * Wraps a normal useReducer with local storage functionality
- *
- * @param {string} key - The key the state is saved with in local storage.
- */
-export declare const useLocalStorageReducer: <State, Action>(key: string, reducer: (state: State, action: Action) => State, initialState: State) => [State, Dispatch<Action>];