feat(renderers): add currency/file renderers, filler generators, and list sub-schema modal

packages/core/src/fields/list.ts

@@ -7,7 +7,7 @@ export class ListFieldDefinition extends FieldDefinition<Record<string, unknown>
   }
 
   itemSchema(schema: SchemaDefinition<any>): this {
-    this._config.attrs = { ...this._config.attrs, itemSchema: schema }
+    this._config.attrs = { ...this._config.attrs, itemSchema: schema.provide() }
     return this
   }
 

packages/core/src/filler.test.ts

@@ -150,6 +150,56 @@ describe('defaultFillers', () => {
     const value = defaultFillers.checkbox(makeFieldConfig({ component: 'checkbox' }))
     expect(value).toBeTypeOf('boolean')
   })
+
+  it('generates password for text with password kind', () => {
+    const value = defaultFillers.text(makeFieldConfig({ component: 'text', kind: 'password' }))
+    expect(value).toBeTypeOf('string')
+    expect((value as string).length).toBeGreaterThanOrEqual(8)
+  })
+
+  it('generates paragraph for textarea', () => {
+    const value = defaultFillers.textarea(makeFieldConfig({ component: 'textarea' }))
+    expect(value).toBeTypeOf('string')
+    expect((value as string).length).toBeGreaterThan(10)
+  })
+
+  it('generates time string for time', () => {
+    const value = defaultFillers.time(makeFieldConfig({ component: 'time' }))
+    expect(value).toBeTypeOf('string')
+    expect(value as string).toMatch(/^\d{2}:\d{2}$/)
+  })
+
+  it('generates value from options for select', () => {
+    const value = defaultFillers.select(makeFieldConfig({
+      component: 'select',
+      attrs: { options: ['a', 'b', 'c'] },
+    }))
+    expect(['a', 'b', 'c']).toContain(value)
+  })
+
+  it('returns undefined for select without options', () => {
+    const value = defaultFillers.select(makeFieldConfig({ component: 'select' }))
+    expect(value).toBeUndefined()
+  })
+
+  it('generates subset of options for multiselect', () => {
+    const value = defaultFillers.multiselect(makeFieldConfig({
+      component: 'multiselect',
+      attrs: { options: ['a', 'b', 'c', 'd'] },
+    }))
+    expect(Array.isArray(value)).toBe(true)
+    const arr = value as string[]
+    expect(arr.length).toBeGreaterThanOrEqual(1)
+    expect(arr.length).toBeLessThanOrEqual(3)
+    for (const item of arr) {
+      expect(['a', 'b', 'c', 'd']).toContain(item)
+    }
+  })
+
+  it('returns empty array for multiselect without options', () => {
+    const value = defaultFillers.multiselect(makeFieldConfig({ component: 'multiselect' }))
+    expect(value).toEqual([])
+  })
 })
 
 describe('fill', () => {

packages/core/src/filler.ts

@@ -8,6 +8,7 @@ export type FillerRegistry = Record<string, FillerFn>
 const textKindGenerators: Record<string, () => string> = {
   email: () => faker.internet.email(),
   phone: () => faker.phone.number(),
+  password: () => faker.internet.password({ length: 12 }),
   cpf: () => faker.string.numeric({ length: 11, allowLeadingZeros: true }).replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4'),
   cnpj: () => faker.string.numeric({ length: 14, allowLeadingZeros: true }).replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5'),
   cep: () => faker.location.zipCode(),
@@ -44,6 +45,31 @@ export const defaultFillers: FillerRegistry = {
   checkbox() {
     return faker.datatype.boolean()
   },
+  textarea() {
+    return faker.lorem.paragraph()
+  },
+  time() {
+    const hour = faker.number.int({ min: 0, max: 23 }).toString().padStart(2, '0')
+    const minute = faker.number.int({ min: 0, max: 59 }).toString().padStart(2, '0')
+    return `${hour}:${minute}`
+  },
+  select(config) {
+    const options = (config.attrs.options ?? []) as (string | number)[]
+    if (options.length === 0) return undefined
+    return faker.helpers.arrayElement(options)
+  },
+  multiselect(config) {
+    const options = (config.attrs.options ?? []) as (string | number)[]
+    if (options.length === 0) return []
+    const count = faker.number.int({ min: 1, max: Math.min(3, options.length) })
+    return faker.helpers.arrayElements(options, count)
+  },
+  file() {
+    return undefined
+  },
+  image() {
+    return undefined
+  },
 }
 
 export function createFiller(registry: FillerRegistry) {

packages/react-native/src/renderers/CurrencyField.tsx

@@ -0,0 +1,95 @@
+import { View, Text, TextInput, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import type { FieldRendererProps } from "@ybyra/react";
+import { useTheme } from "../theme/context";
+import type { Theme } from "../theme/default";
+import { ds } from "../support/ds";
+
+export function CurrencyField({ domain, name, value, config, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = createStyles(theme);
+  if (proxy.hidden) return null;
+
+  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
+  const prefix = (config.attrs.prefix as string) ?? "";
+
+  return (
+    <View style={styles.container} {...ds(`CurrencyField:${name}`)}>
+      <Text style={styles.label}>{fieldLabel}</Text>
+      <View style={styles.inputWrapper}>
+        {prefix ? <Text style={styles.prefix}>{prefix}</Text> : null}
+        <TextInput
+          style={[styles.input, prefix ? styles.inputWithPrefix : null, proxy.disabled && styles.inputDisabled, errors.length > 0 && styles.inputError]}
+          value={value !== undefined && value !== null ? String(value) : ""}
+          onChangeText={(text) => {
+            const num = Number(text);
+            onChange(isNaN(num) ? text : num);
+          }}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          editable={!proxy.disabled}
+          keyboardType="decimal-pad"
+          placeholderTextColor={theme.colors.mutedForeground}
+        />
+      </View>
+      <View style={styles.errorSlot}>
+        {errors.map((error, i) => (
+          <Text key={i} style={styles.error}>{error}</Text>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const createStyles = (theme: Theme) => StyleSheet.create({
+  container: {
+    paddingHorizontal: theme.spacing.xs,
+  },
+  label: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+    marginBottom: theme.spacing.xs,
+    color: theme.colors.foreground,
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  prefix: {
+    position: "absolute",
+    left: theme.spacing.md,
+    fontSize: theme.fontSize.md,
+    color: theme.colors.mutedForeground,
+    zIndex: 1,
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: theme.colors.input,
+    borderRadius: theme.borderRadius.md,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: 10,
+    fontSize: theme.fontSize.md,
+    backgroundColor: theme.colors.card,
+    color: theme.colors.cardForeground,
+  },
+  inputWithPrefix: {
+    paddingLeft: 36,
+  },
+  inputDisabled: {
+    backgroundColor: theme.colors.muted,
+    color: theme.colors.mutedForeground,
+  },
+  inputError: {
+    borderColor: theme.colors.destructive,
+  },
+  errorSlot: {
+    minHeight: 20,
+    marginTop: 2,
+  },
+  error: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.destructive,
+  },
+});

packages/react-native/src/renderers/FileField.tsx

@@ -0,0 +1,90 @@
+import { View, Text, Pressable, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import type { FieldRendererProps } from "@ybyra/react";
+import { useTheme } from "../theme/context";
+import type { Theme } from "../theme/default";
+import { ds } from "../support/ds";
+
+export function FileField({ domain, name, value, config, proxy, errors }: FieldRendererProps) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = createStyles(theme);
+  if (proxy.hidden) return null;
+
+  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
+  const isImage = config.component === "image";
+  const fileName = value && typeof value === "object" && "name" in value ? String(value.name) : (value ? String(value) : "");
+
+  return (
+    <View style={styles.container} {...ds(`FileField:${name}`)}>
+      <Text style={styles.label}>{fieldLabel}</Text>
+      <View style={styles.inputWrapper}>
+        {/* TODO: integrate expo-document-picker or react-native-document-picker for actual file selection */}
+        <Pressable
+          style={[styles.chooseBtn, proxy.disabled && styles.chooseBtnDisabled]}
+          disabled={proxy.disabled}
+        >
+          <Text style={[styles.chooseBtnText, proxy.disabled && styles.chooseBtnTextDisabled]}>
+            {t("common.file.choose", { defaultValue: isImage ? "Choose image…" : "Choose file…" })}
+          </Text>
+        </Pressable>
+        <Text style={styles.fileName} numberOfLines={1}>
+          {fileName || t("common.file.none", { defaultValue: "No file selected" })}
+        </Text>
+      </View>
+      <View style={styles.errorSlot}>
+        {errors.map((error, i) => (
+          <Text key={i} style={styles.error}>{error}</Text>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const createStyles = (theme: Theme) => StyleSheet.create({
+  container: {
+    paddingHorizontal: theme.spacing.xs,
+  },
+  label: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+    marginBottom: theme.spacing.xs,
+    color: theme.colors.foreground,
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing.sm,
+  },
+  chooseBtn: {
+    borderWidth: 1,
+    borderColor: theme.colors.input,
+    borderRadius: theme.borderRadius.md,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: 8,
+    backgroundColor: theme.colors.secondary,
+  },
+  chooseBtnDisabled: {
+    backgroundColor: theme.colors.muted,
+  },
+  chooseBtnText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.secondaryForeground,
+  },
+  chooseBtnTextDisabled: {
+    color: theme.colors.mutedForeground,
+  },
+  fileName: {
+    flex: 1,
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.mutedForeground,
+  },
+  errorSlot: {
+    minHeight: 20,
+    marginTop: 2,
+  },
+  error: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.destructive,
+  },
+});