@korsolutions/ui 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "main": ".src/index.ts",
   "types": ".src/index.ts",

package/src/index.ts

@@ -4,3 +4,4 @@ export * from "./primitives/field";
 export * from "./primitives/input";
 export * from "./primitives/button";
 export * from "./primitives/select";
+export * from "./primitives/card";

package/src/primitives/card/card-content.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useCard } from "./context";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+
+export interface CardContentProps {
+  children?: React.ReactNode;
+
+  render?: (props: CardContentProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CardContent(props: CardContentProps) {
+  const card = useCard();
+
+  const composedStyle = calculateComposedStyles(card.styles, card.state, "content", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/card/card-footer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useCard } from "./context";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+
+export interface CardFooterProps {
+  children?: React.ReactNode;
+
+  render?: (props: CardFooterProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CardFooter(props: CardFooterProps) {
+  const card = useCard();
+
+  const composedStyle = calculateComposedStyles(card.styles, card.state, "footer", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/card/card-header.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useCard } from "./context";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+
+export interface CardHeaderProps {
+  children?: React.ReactNode;
+
+  render?: (props: CardHeaderProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CardHeader(props: CardHeaderProps) {
+  const card = useCard();
+
+  const composedStyle = calculateComposedStyles(card.styles, card.state, "header", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/card/card-root.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { CardStyles } from "./types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { CardContext } from "./context";
+
+export interface CardRootProps {
+  children?: React.ReactNode;
+
+  render?: (props: CardRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+  styles?: CardStyles;
+}
+
+export function CardRoot(props: CardRootProps) {
+  const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <CardContext.Provider
+      value={{
+        state: "default",
+        styles: props.styles,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </CardContext.Provider>
+  );
+}

package/src/primitives/card/card-title.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useCard } from "./context";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+
+export interface CardTitleProps {
+  children?: string;
+
+  render?: (props: CardTitleProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function CardTitle(props: CardTitleProps) {
+  const card = useCard();
+
+  const composedStyle = calculateComposedStyles(card.styles, card.state, "title", props.style);
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/card/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import { CardState, CardStyles } from "./types";
+
+export interface CardContext {
+  state: CardState;
+  styles?: CardStyles;
+}
+
+export const CardContext = createContext<CardContext | undefined>(undefined);
+
+export const useCard = () => {
+  const context = useContext(CardContext);
+  if (!context) {
+    throw new Error("useCard must be used within a CardProvider");
+  }
+  return context;
+};

package/src/primitives/card/index.ts

@@ -0,0 +1,20 @@
+import { CardRoot } from "./card-root";
+import { CardHeader } from "./card-header";
+import { CardTitle } from "./card-title";
+import { CardContent } from "./card-content";
+import { CardFooter } from "./card-footer";
+
+export const Card = {
+  Root: CardRoot,
+  Header: CardHeader,
+  Title: CardTitle,
+  Content: CardContent,
+  Footer: CardFooter,
+};
+
+export type { CardRootProps } from "./card-root";
+export type { CardHeaderProps } from "./card-header";
+export type { CardTitleProps } from "./card-title";
+export type { CardContentProps } from "./card-content";
+export type { CardFooterProps } from "./card-footer";
+export type { CardStyles } from "./types";

package/src/primitives/card/types.ts

@@ -0,0 +1,15 @@
+import { CardRootProps } from "./card-root";
+import { CardHeaderProps } from "./card-header";
+import { CardTitleProps } from "./card-title";
+import { CardContentProps } from "./card-content";
+import { CardFooterProps } from "./card-footer";
+
+export type CardState = "default";
+
+export interface CardStyles {
+  root?: Partial<Record<CardState, CardRootProps["style"]>>;
+  header?: Partial<Record<CardState, CardHeaderProps["style"]>>;
+  title?: Partial<Record<CardState, CardTitleProps["style"]>>;
+  content?: Partial<Record<CardState, CardContentProps["style"]>>;
+  footer?: Partial<Record<CardState, CardFooterProps["style"]>>;
+}

package/src/primitives/field/context.ts

@@ -1,9 +1,9 @@
 import { createContext, useContext } from "react";
 import { FieldState, FieldStyles } from "./types";
 
-export interface FieldContext {
+export interface FieldContext<TControlStyles = unknown> {
   value: string | null;
-  onChange?: (value: string) => void;
+  onChange: (value: string) => void;
 
   focused: boolean;
   setFocused: React.Dispatch<React.SetStateAction<boolean>>;
@@ -16,15 +16,15 @@ export interface FieldContext {
   error?: string | null;
 
   state: FieldState;
-  styles?: FieldStyles<unknown>;
+  styles?: FieldStyles<TControlStyles>;
 }
 
 export const FieldContext = createContext<FieldContext | undefined>(undefined);
 
-export const useField = () => {
+export const useField = <TControlStyles = unknown>() => {
   const context = useContext(FieldContext);
   if (!context) {
     throw new Error("useField must be used within a FieldProvider");
   }
-  return context;
+  return context as FieldContext<TControlStyles>;
 };

package/src/primitives/field/field-control.tsx

@@ -1,28 +1,29 @@
 import React from "react";
 import { useField } from "./context";
-import { StyleProp, TextStyle } from "react-native";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { FieldRootProps } from "./field-root";
 
-interface FieldControlInjectedProps<Style> {
-  value?: string;
-  onChange?: (value: string) => void;
+interface FieldControlInjectedProps<TControlStyles> {
+  value: FieldRootProps["value"];
+  onChange: FieldRootProps["onChange"];
 
   onFocus?: () => void;
   onBlur?: () => void;
 
-  style?: StyleProp<Style>;
+  styles?: TControlStyles;
 }
 
-export interface FieldControlProps<Style = TextStyle> {
-  style?: StyleProp<Style>;
-  render: (props: FieldControlInjectedProps<Style>) => React.ReactElement;
-}
+export type FieldControlProps<T> = {
+  render: (props: FieldControlInjectedProps<T>) => React.ReactElement;
+};
 
-export function FieldControl<Style = TextStyle>(props: FieldControlProps<Style>) {
-  const { value, onChange, setFocused, ...field } = useField();
+export function FieldControl<T>(props: FieldControlProps<T>) {
+  const { value, onChange, setFocused, state, styles } = useField<T>();
 
-  const calculatedStyle = calculateComposedStyles(field.styles, field.state, "control", props.style) as StyleProp<Style>;
+  const controlStyles = styles?.control;
+  const composedStyles = controlStyles ? { ...controlStyles.default, ...controlStyles[state] } : undefined;
 
   const Component = props.render;
-  return <Component value={value} onChange={onChange} onBlur={() => setFocused(false)} onFocus={() => setFocused(true)} style={calculatedStyle} />;
+  return (
+    <Component value={value} onChange={onChange} onBlur={() => setFocused(false)} onFocus={() => setFocused(true)} styles={composedStyles as T} />
+  );
 }

package/src/primitives/field/field-root.tsx

@@ -3,9 +3,9 @@ import { Pressable, StyleProp, View, ViewStyle } from "react-native";
 import { FieldContext } from "./context";
 import { FieldState, FieldStyles } from "./types";
 
-export interface FieldRootProps {
-  value?: string | null;
-  onChange?: (value: string) => void;
+export interface FieldRootProps<TControlStyles = unknown> {
+  value: string | null;
+  onChange: (value: string) => void;
 
   required?: boolean;
   disabled?: boolean;
@@ -13,7 +13,7 @@ export interface FieldRootProps {
   children?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 
-  styles?: FieldStyles<unknown>;
+  styles?: FieldStyles<TControlStyles>;
 }
 
 const calculateState = (props: FieldRootProps, focused: boolean, hovered: boolean): FieldState => {
@@ -33,7 +33,7 @@ const calculateState = (props: FieldRootProps, focused: boolean, hovered: boolea
   return "default";
 };
 
-export function FieldRoot(props: FieldRootProps) {
+export function FieldRoot<TControlStyles = unknown>(props: FieldRootProps<TControlStyles>) {
   const [focused, setFocused] = useState(false);
   const [hovered, setHovered] = useState(false);
 
@@ -44,7 +44,7 @@ export function FieldRoot(props: FieldRootProps) {
   return (
     <FieldContext.Provider
       value={{
-        value: props.value ?? null,
+        value: props.value,
         onChange: props.onChange,
 
         focused,

package/src/primitives/field/types.ts

@@ -3,8 +3,8 @@ import { FieldRootProps } from "./field-root";
 
 export type FieldState = "default" | "disabled" | "error" | "focused" | "hovered";
 
-export interface FieldStyles<TControlStyle> {
+export interface FieldStyles<TControlStyles = unknown> {
   root?: Partial<Record<FieldState, FieldRootProps["style"]>>;
   label?: Partial<Record<FieldState, FieldLabelProps["style"]>>;
-  control?: Partial<Record<FieldState, TControlStyle>>;
+  control?: Partial<Record<FieldState, TControlStyles>>;
 }

package/src/primitives/input/index.ts

@@ -1 +1,2 @@
 export * from "./input";
+export { InputStyles } from "./types";

package/src/primitives/input/input.tsx

@@ -1,16 +1,20 @@
-import { TextInput, TextInputProps } from "react-native";
+import { StyleProp, TextInput, TextInputProps, TextStyle } from "react-native";
+import { InputStyles } from "./types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
 
 export interface InputProps {
   defaultValue?: TextInputProps["defaultValue"];
-  value?: TextInputProps["value"];
-  onChange?: TextInputProps["onChangeText"];
+  value: string | null;
+  onChange: (value: string) => void;
 
   onFocus?: TextInputProps["onFocus"];
   onBlur?: TextInputProps["onBlur"];
 
-  style?: TextInputProps["style"];
+  style?: StyleProp<TextStyle>;
+  styles?: InputStyles;
 }
 
 export function Input(props: InputProps) {
-  return <TextInput {...props} onChange={undefined} onChangeText={props.onChange} />;
+  const composedStyles = calculateComposedStyles(props.styles, "default", "root", props.style);
+  return <TextInput {...props} value={props.value ?? ""} onChange={undefined} onChangeText={props.onChange} style={composedStyles} />;
 }

package/src/primitives/input/types.ts

@@ -0,0 +1,7 @@
+import { InputProps } from "./input";
+
+export type InputState = "default" | "focused" | "disabled";
+
+export interface InputStyles {
+  root: Partial<Record<InputState, InputProps["style"]>>;
+}

package/src/primitives/select/select-root.tsx

@@ -4,16 +4,20 @@ import { SelectContext } from "./context";
 import { SelectOption, SelectState, SelectStyles } from "./types";
 import { calculateComposedStyles } from "../../utils/calculate-styles";
 
+interface SelectRootInjectedProps {
+  style?: StyleProp<ViewStyle>;
+}
+
 export interface SelectRootProps {
   children?: React.ReactNode;
 
-  value?: string;
-  onChange?: (value: string) => void;
+  value: string | null;
+  onChange: (value: string) => void;
   placeholder?: string;
 
   disabled?: boolean;
 
-  render?: (props: SelectRootProps) => React.ReactElement;
+  render?: (props: SelectRootInjectedProps) => React.ReactElement;
 
   styles?: SelectStyles;
   style?: StyleProp<ViewStyle>;