betterstart-cli 0.0.103 → 0.0.104

package/dist/assets/adapters/next/templates/renderers/generators/form/field-jsx/render-textarea-field.ts

@@ -0,0 +1,53 @@
+export function renderTextareaFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `value={formField.value ?? ''}
+${indent}          onChange={(event) => {
+${indent}            ${defaultValueFromHandler}(event.target.value)
+${indent}            formField.onChange(event)
+${indent}          }}
+${indent}          onBlur={formField.onBlur}
+${indent}          name={formField.name}
+${indent}          ref={formField.ref}`
+}
+
+export function renderTextareaFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  fillFormItemProps,
+  labelWithDescription,
+  toLowerCase,
+  fillControlClass,
+  fieldProps
+}: {
+  indent: string
+  fieldName: string
+  fillFormItemProps: string
+  labelWithDescription: string
+  toLowerCase: string
+  fillControlClass: string
+  fieldProps: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${fillFormItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <Textarea
+${indent}          placeholder="Enter ${toLowerCase}"
+${indent}          className="${fillControlClass}"
+${indent}          disabled={isPending}
+${indent}          ${fieldProps}
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form/field-jsx-nested/render-list-field.ts

@@ -0,0 +1,163 @@
+export function renderListFieldDynamicListFieldTemplate({
+  indent,
+  fieldName,
+  label,
+  hideLabelProp,
+  descriptionProp,
+  fieldMaxItemsContent
+}: {
+  indent: string
+  fieldName: string
+  label: string
+  hideLabelProp: string
+  descriptionProp: string
+  fieldMaxItemsContent: string
+}): string {
+  return `${indent}<DynamicListField
+${indent}  name="${fieldName}"
+${indent}  label="${label}"${hideLabelProp}${descriptionProp}
+${indent}  disabled={isPending}${fieldMaxItemsContent}
+${indent}  placeholder="Enter value"
+${indent}/>`
+}
+
+export function renderListFieldCardContentTemplate({
+  indent,
+  formItemProps,
+  fieldName,
+  toLowerCase,
+  validateExpandedItemExpression,
+  defaultItem,
+  pascalFieldName,
+  singularLabel,
+  fieldLabelFieldLabel,
+  label,
+  listHintJsxContent,
+  fieldMaxItemsFieldName,
+  accordionTitle,
+  nestedFieldsJsx
+}: {
+  indent: string
+  formItemProps: string
+  fieldName: string
+  toLowerCase: string
+  validateExpandedItemExpression: string
+  defaultItem: string
+  pascalFieldName: string
+  singularLabel: string
+  fieldLabelFieldLabel: string
+  label: string
+  listHintJsxContent: string
+  fieldMaxItemsFieldName: string
+  accordionTitle: string
+  nestedFieldsJsx: string
+}): string {
+  return `${indent}<FormItem${formItemProps}>
+${indent}  {${fieldName}FieldArray.fields.length === 0 && (
+${indent}    <Card>
+${indent}      <CardContent className="flex flex-col items-center justify-center bg-background gap-3">
+${indent}        <p>No ${toLowerCase} added yet.</p>
+${indent}        <Button
+${indent}          type="button"
+${indent}          variant="outline"
+${indent}          onClick={async () => {
+${indent}            if (${fieldName}Expanded) {
+${indent}              const expandedIndex = Number(${fieldName}Expanded.replace('item-', '')) - 1
+${indent}              if (expandedIndex >= 0) {
+${indent}                const isExpandedItemValid = await form.trigger(${validateExpandedItemExpression})
+${indent}                if (!isExpandedItemValid) return
+${indent}              }
+${indent}            }
+${indent}            ${fieldName}FieldArray.append(${defaultItem})
+${indent}            set${pascalFieldName}Expanded(\`item-\${${fieldName}FieldArray.fields.length + 1}\`)
+${indent}          }}
+${indent}          disabled={isPending}
+${indent}        >
+${indent}          <Plus className="size-3" />
+${indent}          Add ${singularLabel}
+${indent}        </Button>
+${indent}      </CardContent>
+${indent}    </Card>
+${indent}  )}
+
+${indent}  {${fieldName}FieldArray.fields.length > 0 && (
+${indent}    <div className="space-y-4">
+${indent}      <div className="flex items-center justify-between gap-3">
+${indent}        <FormField
+${indent}          control={form.control}
+${indent}          name="${fieldName}"
+${indent}          render={() => (
+${indent}            <FormItem className="flex flex-col gap-1 space-y-0">
+${indent}              <FormLabel className="${fieldLabelFieldLabel}">${label}</FormLabel>
+${listHintJsxContent}${indent}            </FormItem>
+${indent}          )}
+${indent}        />
+${indent}        <Button
+${indent}          type="button"
+${indent}          variant="outline"
+${indent}          onClick={async () => {
+${indent}            if (${fieldName}Expanded) {
+${indent}              const expandedIndex = Number(${fieldName}Expanded.replace('item-', '')) - 1
+${indent}              if (expandedIndex >= 0) {
+${indent}                const isExpandedItemValid = await form.trigger(${validateExpandedItemExpression})
+${indent}                if (!isExpandedItemValid) return
+${indent}              }
+${indent}            }
+${indent}            ${fieldName}FieldArray.append(${defaultItem})
+${indent}            set${pascalFieldName}Expanded(\`item-\${${fieldName}FieldArray.fields.length + 1}\`)
+${indent}          }}
+${indent}          disabled={isPending${fieldMaxItemsFieldName}}
+${indent}        >
+${indent}          <Plus className="size-3" />
+${indent}          Add ${singularLabel}
+${indent}        </Button>
+${indent}      </div>
+
+${indent}      <Accordion
+${indent}        type="single"
+${indent}        collapsible
+${indent}        value={${fieldName}Expanded}
+${indent}        onValueChange={async (nextValue) => {
+${indent}          if (${fieldName}Expanded && nextValue && nextValue !== ${fieldName}Expanded) {
+${indent}            const expandedIndex = Number(${fieldName}Expanded.replace('item-', '')) - 1
+${indent}            if (expandedIndex >= 0) {
+${indent}              const isExpandedItemValid = await form.trigger(${validateExpandedItemExpression})
+${indent}              if (!isExpandedItemValid) return
+${indent}            }
+${indent}          }
+${indent}          set${pascalFieldName}Expanded(nextValue)
+${indent}        }}
+${indent}      >
+${indent}        {${fieldName}FieldArray.fields.map((item, index) => (
+${indent}          <AccordionItem key={item.id} value={\`item-\${index + 1}\`}>
+${indent}            <div className="relative">
+${indent}              <AccordionTrigger className="flex items-center w-full gap-2 py-2 min-h-12">
+${indent}                <span className="w-full pr-16">${accordionTitle}</span>
+${indent}              </AccordionTrigger>
+${indent}              <Button
+${indent}                type="button"
+${indent}                variant="ghost"
+${indent}                size="icon-sm"
+${indent}                className="absolute right-10 top-1/2 -translate-y-1/2 shrink-0"
+${indent}                aria-label="Remove ${singularLabel}"
+${indent}                onClick={() => {
+${indent}                  if (isPending) return
+${indent}                  ${fieldName}FieldArray.remove(index)
+${indent}                }}
+${indent}                disabled={isPending}
+${indent}              >
+${indent}                <X />
+${indent}              </Button>
+${indent}            </div>
+${indent}            <AccordionContent>
+${indent}              <div className="space-y-4 pt-4 border-t border-border">
+${nestedFieldsJsx}
+${indent}              </div>
+${indent}            </AccordionContent>
+${indent}          </AccordionItem>
+${indent}        ))}
+${indent}      </Accordion>
+${indent}    </div>
+${indent}  )}
+${indent}</FormItem>`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form/field-jsx-nested/render-nested-field.ts

@@ -0,0 +1,164 @@
+export function renderNestedFieldLayoutTemplate({
+  heading,
+  indent,
+  columnsGrid,
+  groupFields
+}: {
+  heading: string
+  indent: string
+  columnsGrid: string
+  groupFields: string
+}): string {
+  return `${heading}${indent}<div className="grid ${columnsGrid} gap-2">
+${groupFields}
+${indent}</div>`
+}
+
+export function renderNestedFieldDynamicListFieldTemplate({
+  indent,
+  pathExpression,
+  nestedLabel,
+  hideLabelProp,
+  descriptionProp,
+  fieldMaxItemsContent
+}: {
+  indent: string
+  pathExpression: string
+  nestedLabel: string
+  hideLabelProp: string
+  descriptionProp: string
+  fieldMaxItemsContent: string
+}): string {
+  return `${indent}<DynamicListField
+${indent}  name={${pathExpression}}
+${indent}  label="${nestedLabel}"${hideLabelProp}${descriptionProp}
+${indent}  disabled={isPending}${fieldMaxItemsContent}
+${indent}  placeholder="Enter value"
+${indent}/>`
+}
+
+export function renderNestedFieldFormFieldTemplate({
+  indent,
+  pathNameProp,
+  formItemProps,
+  labelWithDescription
+}: {
+  indent: string
+  pathNameProp: string
+  formItemProps: string
+  labelWithDescription: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name=${pathNameProp}
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      <FormControl>
+${indent}        <Checkbox checked={formField.value} onCheckedChange={formField.onChange} disabled={isPending} />
+${indent}      </FormControl>
+${indent}      ${labelWithDescription}
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}
+
+export function renderNestedFieldFormFieldDetailsTemplate({
+  indent,
+  pathNameProp,
+  formItemProps,
+  labelWithDescription,
+  acceptProp
+}: {
+  indent: string
+  pathNameProp: string
+  formItemProps: string
+  labelWithDescription: string
+  acceptProp: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name=${pathNameProp}
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <MediaField value={formField.value} onChange={formField.onChange} onBlur={formField.onBlur} disabled={isPending}${acceptProp} />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}
+
+export function renderNestedFieldFormFieldDetailsBranchTemplate({
+  indent,
+  pathNameProp,
+  formItemProps,
+  labelWithDescription,
+  toLowerCase
+}: {
+  indent: string
+  pathNameProp: string
+  formItemProps: string
+  labelWithDescription: string
+  toLowerCase: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name=${pathNameProp}
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <IconPicker value={formField.value} onValueChange={formField.onChange} triggerPlaceholder="Select ${toLowerCase}" />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}
+
+export function renderNestedFieldFormFieldDetailsBranchBodyTemplate({
+  indent,
+  pathNameProp,
+  formItemProps,
+  labelWithDescription,
+  stepProp,
+  toLowerCase,
+  emptyValue
+}: {
+  indent: string
+  pathNameProp: string
+  formItemProps: string
+  labelWithDescription: string
+  stepProp: string
+  toLowerCase: string
+  emptyValue: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name=${pathNameProp}
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <Input
+${indent}          type="number"${stepProp}
+${indent}          placeholder="Enter ${toLowerCase}"
+${indent}          disabled={isPending}
+${indent}          value={formField.value ?? ''}
+${indent}          onChange={(event) => {
+${indent}          const nextValue = event.target.value === '' ? ${emptyValue} : event.target.valueAsNumber
+${indent}          const normalizedValue = Number.isNaN(nextValue) ? ${emptyValue} : nextValue
+${indent}          formField.onChange(normalizedValue)
+${indent}          }}
+${indent}          onBlur={formField.onBlur}
+${indent}          name={formField.name}
+${indent}          ref={formField.ref}
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form/field-jsx-nested/render-nested-object-list-field.ts

@@ -0,0 +1,59 @@
+export function renderNestedObjectListFieldContentTemplate({
+  indent,
+  itemIndexVar,
+  pathString,
+  titlePathSuffix,
+  singularLabel
+}: {
+  indent: string
+  itemIndexVar: string
+  pathString: string
+  titlePathSuffix: string
+  singularLabel: string
+}): string {
+  return `\n${indent}  renderTitle={(${itemIndexVar}) =>
+${indent}    String(form.watch(\`${pathString}.\${${itemIndexVar}}${titlePathSuffix}\` as never) || \`${singularLabel} \${${itemIndexVar} + 1}\`)
+${indent}  }`
+}
+
+export function renderNestedObjectListFieldNestedObjectListFieldTemplate({
+  indent,
+  pathExpression,
+  stringify,
+  stringifySerializedValue,
+  defaultItem,
+  hideLabelProp,
+  descriptionProp,
+  maxItemsProp,
+  validatePathsProp,
+  renderTitleProp,
+  itemIndexVar,
+  nestedFieldsJsx
+}: {
+  indent: string
+  pathExpression: string
+  stringify: string
+  stringifySerializedValue: string
+  defaultItem: string
+  hideLabelProp: string
+  descriptionProp: string
+  maxItemsProp: string
+  validatePathsProp: string
+  renderTitleProp: string
+  itemIndexVar: string
+  nestedFieldsJsx: string
+}): string {
+  return `${indent}<NestedObjectListField
+${indent}  name={${pathExpression}}
+${indent}  label={${stringify}}
+${indent}  singularLabel={${stringifySerializedValue}}
+${indent}  defaultValue={${defaultItem}}
+${indent}  disabled={isPending}${hideLabelProp}${descriptionProp}${maxItemsProp}${validatePathsProp}${renderTitleProp}
+${indent}>
+${indent}  {(${itemIndexVar}) => (
+${indent}    <>
+${nestedFieldsJsx}
+${indent}    </>
+${indent}  )}
+${indent}</NestedObjectListField>`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form/field-jsx-nested/render-text-input-field.ts

@@ -0,0 +1,27 @@
+export function renderTextInputFieldFormFieldTemplate({
+  indent,
+  pathNameProp,
+  formItemProps,
+  labelWithDescription,
+  toLowerCase
+}: {
+  indent: string
+  pathNameProp: string
+  formItemProps: string
+  labelWithDescription: string
+  toLowerCase: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name=${pathNameProp}
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <Input placeholder="Enter ${toLowerCase}" disabled={isPending} {...formField} />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}