@korsolutions/ui 0.0.84 → 0.0.85

package/src/themes/types.ts

@@ -36,3 +36,128 @@ export type StorageClient<T> = {
   set: (value: T) => void;
   get: () => T | null;
 };
+
+import type { AlertDialogStyles } from "../components/alert-dialog/types";
+import type { AlertStyles } from "../components/alert/types";
+import type { AvatarStyles } from "../components/avatar/types";
+import type { BadgeStyles } from "../components/badge/types";
+import type { ButtonStyles } from "../components/button/types";
+import type { CalendarStyles } from "../components/calendar/calendar/types";
+import type { TimelineStyles } from "../components/calendar/timeline/types";
+import type { WeekCalendarStyles } from "../components/calendar/week-calendar/types";
+import type { CardStyles } from "../components/card/types";
+import type { CheckboxStyles } from "../components/checkbox/types";
+import type { ComboboxStyles } from "../components/combobox/types";
+import type { EmptyStyles } from "../components/empty/types";
+import type { FieldStyles } from "../components/field/types";
+import type { IconButtonStyles } from "../components/icon-button/types";
+import type { InputStyles } from "../components/input/types";
+import type { MenuStyles } from "../components/menu/types";
+import type { PhoneInputStyles } from "../components/phone-input/types";
+import type { PopoverStyles } from "../components/popover/types";
+import type { ProgressStyles } from "../components/progress/types";
+import type { RadioGroupStyles } from "../components/radio-group/types";
+import type { SelectStyles } from "../components/select/types";
+import type { SeparatorStyles } from "../components/separator/types";
+import type { SpinnerStyles } from "../components/spinner/types";
+import type { TableStyles } from "../components/table/types";
+import type { TabsStyles } from "../components/tabs/types";
+import type { TextareaStyles } from "../components/textarea/types";
+import type { ToastStyles } from "../components/toast/types";
+import type { ToastVariants } from "../components/toast/variants";
+import type { PressableStyles } from "../components/touchable/types";
+import type { SvgProps } from "../types/props.types";
+
+export interface ComponentsConfig {
+  colorScheme?: {
+    storage?: StorageClient<ColorScheme>;
+  };
+  alert?: {
+    styles?: AlertStyles;
+  };
+  alertDialog?: {
+    styles?: AlertDialogStyles;
+  };
+  avatar?: {
+    styles?: AvatarStyles;
+  };
+  badge?: {
+    styles?: BadgeStyles;
+  };
+  button?: {
+    styles?: ButtonStyles;
+  };
+  calendar?: {
+    prevIcon?: React.ComponentType<SvgProps>;
+    nextIcon?: React.ComponentType<SvgProps>;
+    styles?: CalendarStyles;
+  };
+  card?: {
+    styles?: CardStyles;
+  };
+  checkbox?: {
+    styles?: CheckboxStyles;
+  };
+  combobox?: {
+    styles?: ComboboxStyles;
+  };
+  empty?: {
+    styles?: EmptyStyles;
+  };
+  field?: {
+    styles?: FieldStyles;
+  };
+  iconButton?: {
+    styles?: IconButtonStyles;
+  };
+  input?: {
+    styles?: InputStyles;
+  };
+  menu?: {
+    selectionIcon?: React.ComponentType<SvgProps>;
+    styles?: MenuStyles;
+  };
+  phoneInput?: {
+    styles?: PhoneInputStyles;
+  };
+  popover?: {
+    styles?: PopoverStyles;
+  };
+  progress?: {
+    styles?: ProgressStyles;
+  };
+  radioGroup?: {
+    styles?: RadioGroupStyles;
+  };
+  select?: {
+    styles?: SelectStyles;
+  };
+  separator?: {
+    styles?: SeparatorStyles;
+  };
+  spinner?: {
+    styles?: SpinnerStyles;
+  };
+  table?: {
+    styles?: TableStyles;
+  };
+  tabs?: {
+    styles?: TabsStyles;
+  };
+  textarea?: {
+    styles?: TextareaStyles;
+  };
+  timeline?: {
+    styles?: TimelineStyles;
+  };
+  toast?: {
+    icons?: Partial<Record<keyof typeof ToastVariants, React.ComponentType<SvgProps>>>;
+    styles?: ToastStyles;
+  };
+  touchable?: {
+    styles?: PressableStyles;
+  };
+  weekCalendar?: {
+    styles?: WeekCalendarStyles;
+  };
+}

package/src/utils/calculate-styles.ts

@@ -1,8 +1,14 @@
-export const calculateComposedStyles = <TStyle, State extends string | "default", Component extends string>(
+import { StyleSheet } from "react-native";
+
+export const calculateComposedStyles = <
+  TStyle,
+  State extends string | "default",
+  Component extends string,
+>(
   styles: Partial<Record<Component, Partial<Record<State, TStyle>>>> | null = {},
   state: State,
   component: Component,
-  style?: TStyle
+  style?: TStyle,
 ): TStyle[] => {
   const result: TStyle[] = [];
   const componentStyles = styles?.[component];
@@ -17,3 +23,37 @@ export const calculateComposedStyles = <TStyle, State extends string | "default"
   }
   return result;
 };
+
+const mergeProps = <TProps extends { style?: any }>(
+  variantProps: TProps,
+  globalProps: TProps | undefined,
+): TProps => {
+  if (!globalProps) return variantProps;
+  const mergedProps = {
+    ...globalProps,
+    ...variantProps,
+    style: [globalProps.style, variantProps.style],
+  };
+  return mergedProps;
+};
+
+const isPropsObject = (props: unknown): props is { style?: any } => {
+  return typeof props === "object" && props !== null && "style" in props;
+};
+
+export const mergeStyles = <TStyle extends Record<string, any>>(
+  variantStyles: TStyle,
+  globalStyles: TStyle | undefined,
+): TStyle => {
+  if (!globalStyles) return variantStyles;
+  const returnStyles = {} as TStyle;
+  for (const key in variantStyles) {
+    if (isPropsObject(variantStyles[key]) && isPropsObject(globalStyles[key])) {
+      returnStyles[key] = mergeProps(variantStyles[key], globalStyles[key]);
+    } else {
+      // @ts-ignore
+      returnStyles[key] = StyleSheet.flatten([variantStyles[key], globalStyles[key]]);
+    }
+  }
+  return returnStyles;
+};

package/src/utils/date-utils.ts

@@ -1,5 +1,18 @@
 export const formatDate = (date: Date, format: string): string => {
-  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
 
   const day = date.getDate();
   const month = months[date.getMonth()];
@@ -19,7 +32,11 @@ export const formatDate = (date: Date, format: string): string => {
 };
 
 export const isDateSameDay = (date1: Date, date2: Date): boolean => {
-  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
 };
 
 export const isDateToday = (date: Date): boolean => {
@@ -38,7 +55,10 @@ export const isDateAfter = (date1: Date, date2: Date): boolean => {
   return d1.getTime() > d2.getTime();
 };
 
-export const isDateTimeWithinInterval = (date: Date, interval: { start: Date; end: Date }): boolean => {
+export const isDateTimeWithinInterval = (
+  date: Date,
+  interval: { start: Date; end: Date },
+): boolean => {
   const time = date.getTime();
   return time >= interval.start.getTime() && time <= interval.end.getTime();
 };

package/src/utils/input-utils.ts

@@ -1,10 +1,7 @@
 import { Platform } from "react-native";
 import type { TextInputRef } from "../types/element.types";
 
-export function setInnerInputValue(
-  element: HTMLInputElement | TextInputRef,
-  value: string,
-) {
+export function setInnerInputValue(element: HTMLInputElement | TextInputRef, value: string) {
   if (Platform.OS === "web") {
     (element as HTMLInputElement).value = value;
   } else {

package/src/utils/normalize-layout.ts

@@ -26,7 +26,9 @@ export const measureLayoutPosition = (
   callback: (layout: LayoutPosition) => void,
 ) => {
   if (ref && "getBoundingClientRect" in ref) {
-    const rect = (ref as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect();
+    const rect = (
+      ref as unknown as { getBoundingClientRect: () => DOMRect }
+    ).getBoundingClientRect();
     callback({
       height: isValidNumber(rect.height) ? rect.height : 0,
       width: isValidNumber(rect.width) ? rect.width : 0,

package/src/utils/use-themed-styles.ts

@@ -1,11 +1,5 @@
 import { useTheme } from "../themes";
-import type {
-  Colors,
-  FontFamily,
-  FontSize,
-  LetterSpacing,
-  Radius,
-} from "../themes/types";
+import type { Colors, FontFamily, FontSize, LetterSpacing, Radius } from "../themes/types";
 
 interface CallbackProps {
   colors: Colors;
@@ -15,9 +9,7 @@ interface CallbackProps {
   fontSize: FontSize;
 }
 
-export const useThemedStyles = <T>(
-  callback: (props: CallbackProps) => T,
-): T => {
+export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T => {
   const theme = useTheme();
   return callback({
     colors: theme.colors,

package/tsconfig.json

@@ -1,17 +1,10 @@
 {
   "compilerOptions": {
-    "customConditions": [
-      "dev-source",
-      "react-native",
-      "react-native-strict-api"
-    ],
+    "customConditions": ["dev-source", "react-native", "react-native-strict-api"],
     "allowJs": true,
     "esModuleInterop": true,
     "jsx": "react-native",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "module": "preserve",
     "moduleDetection": "force",
     "moduleResolution": "bundler",
@@ -30,10 +23,7 @@
     "noStrictGenericChecks": false,
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": true
   },
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}
+  "exclude": ["node_modules", "dist"]
+}