@react-typed-forms/schemas-rn 1.0.0 → 2.0.0

package/lib/rendererOptions.d.ts

@@ -0,0 +1,209 @@
+import { ReactNode, ReactElement } from "react";
+import { Control } from "@react-typed-forms/core";
+import { CheckRendererOptions, FieldOption, DataRendererRegistration, ArrayActionOptions, RendererRegistration, FormRenderer, IconReference, AdornmentPlacement, IconPlacement, ActionRendererProps, ControlDataContext, OptionalAdornment } from "@react-typed-forms/schemas";
+export interface CustomNavigationProps {
+    className?: string;
+    page: number;
+    totalPages: number;
+    next: ActionRendererProps;
+    prev: ActionRendererProps;
+    formRenderer: FormRenderer;
+    validatePage: () => Promise<boolean>;
+}
+export interface OptionalRenderProps {
+    allValues: Control<unknown[]>;
+    editing: Control<boolean | undefined>;
+    children: ReactNode;
+    adornment: OptionalAdornment;
+    nullToggler: Control<boolean>;
+    dataContext: ControlDataContext;
+    options: DefaultOptionalAdornmentOptions;
+    dataControl: Control<any>;
+}
+export interface SelectRendererOptions {
+    className?: string;
+    emptyText?: string;
+    requiredText?: string;
+}
+export interface AutocompleteRendererOptions {
+    className?: string;
+    listContainerClass?: string;
+    listEntryClass?: string;
+    chipContainerClass?: string;
+    chipCloseButtonClass?: string;
+}
+export interface ArrayElementRendererOptions {
+    className?: string;
+    actionsClass?: string;
+}
+export interface DefaultScrollListOptions {
+    loadingIcon?: IconReference;
+    iconClass?: string;
+    spinnerClass?: string;
+    className?: string;
+}
+export interface DefaultDisplayRendererOptions {
+    textClassName?: string;
+    textTextClass?: string;
+    htmlClassName?: string;
+}
+export interface DefaultGridRenderOptions {
+    className?: string;
+    defaultColumns?: number;
+    rowClass?: string;
+    cellClass?: string;
+}
+export interface DefaultDialogRenderOptions {
+    classes?: {
+        className?: string;
+        titleClass?: string;
+        containerClass?: string;
+    };
+}
+export interface DefaultTabsRenderOptions {
+    className?: string;
+    tabListClass?: string;
+    tabClass?: string;
+    labelClass?: string;
+    activeClass?: string;
+    inactiveClass?: string;
+    contentClass?: string;
+}
+export interface DefaultWizardRenderOptions {
+    classes?: {
+        className?: string;
+        navContainerClass?: string;
+        contentClass?: string;
+    };
+    actions?: {
+        nextText?: string;
+        nextIcon?: IconReference;
+        nextValidate?: boolean;
+        prevText?: string;
+        prevIcon?: IconReference;
+        prevValidate?: boolean;
+    };
+    renderNavigation?: (props: CustomNavigationProps) => ReactNode;
+}
+export interface DefaultArrayRendererOptions extends ArrayActionOptions {
+    className?: string;
+    removableClass?: string;
+    childClass?: string;
+    removableChildClass?: string;
+    removeActionClass?: string;
+    addActionClass?: string;
+}
+export interface DefaultLayoutRendererOptions {
+    className?: string;
+    errorClass?: string;
+    renderError?: (errorText: string | null | undefined, errorId?: string) => ReactNode;
+}
+export interface DefaultActionRendererOptions {
+    buttonClass?: string;
+    textClass?: string;
+    primaryClass?: string;
+    primaryTextClass?: string;
+    secondaryClass?: string;
+    secondaryTextClass?: string;
+    linkClass?: string;
+    linkTextClass?: string;
+    iconBeforeClass?: string;
+    iconAfterClass?: string;
+    groupClass?: string;
+    renderContent?: (actionText: string, actionId: string, actionData: any, busy?: boolean) => ReactNode;
+    icon?: IconReference;
+    iconPlacement?: IconPlacement;
+    busyIcon?: IconReference;
+    busyIconPlacement?: IconPlacement;
+    notWrapInText?: boolean;
+    androidRippleColor?: string;
+}
+export interface DefaultOptionalAdornmentOptions {
+    className?: string;
+    checkClass?: string;
+    childWrapperClass?: string;
+    multiValuesClass?: string;
+    multiValuesText?: string;
+    nullWrapperClass?: string;
+    setNullText?: string;
+    defaultPlacement?: AdornmentPlacement;
+    hideEdit?: boolean;
+    customRender?: (props: OptionalRenderProps) => ReactNode;
+}
+export interface DefaultAccordionRendererOptions {
+    className?: string;
+    titleTextClass?: string;
+    togglerClass?: string;
+    iconOpen?: IconReference;
+    iconClosed?: IconReference;
+    renderTitle?: (title: ReactNode, current: Control<boolean>) => ReactNode;
+    renderToggler?: (current: Control<boolean>, title: ReactNode) => ReactNode;
+    useCss?: boolean;
+}
+export interface DefaultHelpTextRendererOptions {
+    triggerContainerClass?: string;
+    triggerLabelClass?: string;
+    contentContainerClass?: string;
+    contentTextClass?: string;
+    iconName?: string;
+    iconClass?: string;
+}
+export interface DefaultAdornmentRendererOptions {
+    accordion?: DefaultAccordionRendererOptions;
+    helpText?: DefaultHelpTextRendererOptions;
+    optional?: DefaultOptionalAdornmentOptions;
+}
+export interface DefaultLabelRendererOptions {
+    className?: string;
+    textClass?: string;
+    groupLabelClass?: string;
+    groupLabelTextClass?: string;
+    controlLabelClass?: string;
+    controlLabelTextClass?: string;
+    requiredElement?: (h: FormRenderer["html"]) => ReactNode;
+    labelContainer?: (children: ReactElement) => ReactElement;
+}
+export interface DefaultGroupRendererOptions {
+    className?: string;
+    standardClassName?: string;
+    grid?: DefaultGridRenderOptions;
+    flexClassName?: string;
+    defaultFlexGap?: string;
+    inlineClass?: string;
+    tabs?: DefaultTabsRenderOptions;
+    dialog?: DefaultDialogRenderOptions;
+    wizard?: DefaultWizardRenderOptions;
+    accordion?: DefaultAccordionRendererOptions;
+}
+export interface DefaultDataRendererOptions {
+    inputClass?: string;
+    inputTextClass?: string;
+    displayOnlyClass?: string;
+    selectOptions?: SelectRendererOptions;
+    checkboxOptions?: CheckRendererOptions;
+    checkOptions?: CheckRendererOptions;
+    radioOptions?: CheckRendererOptions;
+    checkListOptions?: CheckRendererOptions;
+    autocompleteOptions?: AutocompleteRendererOptions;
+    arrayElementOptions?: ArrayElementRendererOptions;
+    booleanOptions?: FieldOption[];
+    optionRenderer?: DataRendererRegistration;
+    multilineClass?: string;
+    jsonataClass?: string;
+    arrayOptions?: ArrayActionOptions;
+    defaultEmptyText?: string;
+    scrollListOptions?: DefaultScrollListOptions;
+}
+export interface DefaultRendererOptions {
+    data?: DefaultDataRendererOptions;
+    display?: DefaultDisplayRendererOptions;
+    action?: DefaultActionRendererOptions;
+    array?: DefaultArrayRendererOptions;
+    group?: DefaultGroupRendererOptions;
+    label?: DefaultLabelRendererOptions;
+    adornment?: DefaultAdornmentRendererOptions;
+    layout?: DefaultLayoutRendererOptions;
+    extraRenderers?: (options: DefaultRendererOptions) => RendererRegistration[];
+    html?: FormRenderer["html"];
+}
+export declare const DefaultBoolOptions: FieldOption[];

package/lib/selectUtils.d.ts

@@ -0,0 +1,16 @@
+import { Control } from "@react-typed-forms/core";
+import { FieldOption } from "@react-typed-forms/schemas";
+type SelectConversion = (a: any) => string | number;
+export interface SelectDataRendererProps {
+    id?: string;
+    className?: string;
+    options: FieldOption[];
+    emptyText?: string;
+    requiredText?: string;
+    readonly: boolean;
+    required: boolean;
+    state: Control<any>;
+    convert: SelectConversion;
+}
+export declare function createSelectConversion(ft: string): SelectConversion;
+export {};

package/lib/tailwind.d.ts

@@ -1,4 +1,2 @@
-import { DefaultRendererOptions } from "@react-typed-forms/schemas-html";
-import { HtmlComponents } from "@react-typed-forms/schemas";
-export declare const reactNativeHtml: HtmlComponents;
+import { DefaultRendererOptions } from "./rendererOptions";
 export declare const defaultRnTailwindTheme: DefaultRendererOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas-rn",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",
@@ -31,66 +31,65 @@
     "material-ui"
   ],
   "dependencies": {
-    "clsx": "^1 || ^2",
-    "@react-typed-forms/schemas-html": "^4.0.0",
-    "tailwind-merge": "^1.14.0",
-    "class-variance-authority": "^0.7.1",
-    "@rn-primitives/checkbox": "^1.1.0",
-    "@rn-primitives/slot": "^1.1.0",
-    "@rn-primitives/types": "^1.1.0",
-    "@rn-primitives/radio-group": "^1.1.0",
-    "@rn-primitives/select": "^1.1.0",
-    "@rn-primitives/dialog": "^1.1.0",
+    "@expo/vector-icons": "^14.0.2",
+    "@internationalized/date": "^3.8.2",
     "@react-native-community/datetimepicker": "8.2.0",
+    "@rn-primitives/checkbox": "^1.2.0",
+    "@rn-primitives/dialog": "^1.2.0",
+    "@rn-primitives/radio-group": "^1.2.0",
+    "@rn-primitives/select": "^1.2.0",
+    "@rn-primitives/slot": "^1.2.0",
+    "@rn-primitives/types": "^1.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1 || ^2",
+    "react-native-gesture-handler": ">=2.20.2",
     "react-native-modal-datetime-picker": "^18.0.0",
-    "@internationalized/date": "^3.6.0",
-    "@expo/vector-icons": "^14.0.2",
-    "react-native-gesture-handler": "~2.20.2"
+    "tailwind-merge": "1.14.0"
   },
   "peerDependencies": {
-    "@react-typed-forms/core": "^4.4.0",
-    "@react-typed-forms/schemas": "^16.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-native": "^0.76.9",
-    "react-native-web": "~0.19.13",
+    "@astroapps/controls": "^1.3.3",
+    "@react-typed-forms/core": "^4.4.3",
+    "@react-typed-forms/schemas": "^17.2.2",
     "nativewind": "^4.1.23",
-    "react-native-css-interop": "^0.1.22",
+    "react": "^18.3.1 || ^19",
+    "react-dom": "^18.3.1 || ^19",
+    "react-native": ">=0.76.9",
     "react-native-reanimated": ">=3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "tailwindcss": "~3",
-    "react-native-svg": "^15.11.2",
-    "react-native-render-html": "^6.3.4"
+    "react-native-render-html": "^6.3.4",
+    "react-native-safe-area-context": ">=4.12.0",
+    "react-native-svg": ">=15.8.0",
+    "react-native-web": ">=0.19.13",
+    "tailwindcss": "~3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "tailwindcss": "^3.4.17",
-    "nativewind": "^4.1.23",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-reanimated": ">=3.16.1",
-    "react-native-css-interop": "^0.1.22",
-    "react-native-svg": "15.8.0",
-    "react-native": "^0.76.9",
-    "react-native-web": "~0.19.13",
-    "@react-typed-forms/core": "^4.4.0",
-    "@react-typed-forms/schemas": "^16.0.0",
-    "react": "^18.3.1 || ^19",
-    "react-dom": "^18.3.1 || ^19",
+    "@astroapps/controls": "^1.3.3",
+    "@babel/core": ">=7.25.2",
+    "@react-typed-forms/core": "^4.4.3",
+    "@react-typed-forms/schemas": "^17.0.0",
     "@react-typed-forms/transform": "^0.4.0",
+    "@types/react": "^18.3.1 || ~19",
     "@types/uuid": "^10.0.0",
-    "@types/react": "^18.2.28",
     "markdown-magic": "^2.6.1",
     "microbundle": "^0.15.1",
-    "nswag": "^13.18.2",
+    "nativewind": "^4.1.23",
+    "nswag": "^14.0.7",
     "prettier": "^3.2.5",
+    "react": "^18.3.1 || ^19",
+    "react-dom": "^18.3.1 || ^19",
+    "react-native": ">=0.76.9",
+    "react-native-reanimated": ">=3.16.1",
+    "react-native-render-html": "^6.3.4",
+    "react-native-safe-area-context": ">=4.12.0",
+    "react-native-svg": ">=15.8.0",
+    "react-native-web": ">=0.19.13",
     "rimraf": "^3.0.2",
-    "typescript": "^5.6.3",
-    "react-native-render-html": "^6.3.4"
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.8.3"
   },
   "gitHead": "698e16cd3ab31b7dd0528fc76536f4d3205ce8c6",
   "scripts": {
     "build": "rimraf ./lib/ node_modules/.cache && microbundle -f modern,cjs --no-compress --jsxImportSource nativewind",
-    "watch": "microbundle -w -f modern,cjs --no-compress --jsxImportSource nativewind",
+    "watch": "microbundle -f modern,cjs --no-compress --jsxImportSource nativewind",
     "update-readme": "md-magic --path README.md"
   }
 }

package/tsconfig.json

@@ -13,7 +13,9 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-native",
+    "jsxImportSource": "react",
+    "types": ["react", "react-native"],
     "outDir": "lib"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],

package/lib/components/RNCheckbox.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-declare const RNCheckbox: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>, "ref"> & {
-    asChild?: boolean;
-} & {
-    onKeyDown?: (ev: React.KeyboardEvent) => void;
-    onKeyUp?: (ev: React.KeyboardEvent) => void;
-} & {
-    checked: boolean;
-    onCheckedChange: (checked: boolean) => void;
-    disabled?: boolean;
-} & React.RefAttributes<import("react-native").View>>;
-export { RNCheckbox };

package/lib/components/RNTextInput.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { TextInput, type TextInputProps } from "react-native";
-declare const RNTextInput: React.ForwardRefExoticComponent<TextInputProps & {
-    disabled?: boolean;
-} & React.RefAttributes<TextInput>>;
-export { RNTextInput };