betterstart-cli 0.0.102 → 0.0.104

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

@@ -0,0 +1,50 @@
+export function renderMarkdownFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `(value) => {
+${indent}            ${defaultValueFromHandler}(value)
+${indent}            formField.onChange(value)
+${indent}          }`
+}
+
+export function renderMarkdownFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  fillFormItemProps,
+  labelWithDescription,
+  onChange,
+  fillControlClass,
+  toLowerCase
+}: {
+  indent: string
+  fieldName: string
+  fillFormItemProps: string
+  labelWithDescription: string
+  onChange: string
+  fillControlClass: string
+  toLowerCase: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${fillFormItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <ContentEditor
+${indent}          value={formField.value}
+${indent}          onChange={${onChange}}
+${indent}          defaultMode="source"
+${indent}          className="${fillControlClass}"
+${indent}          placeholder="Enter ${toLowerCase}"
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,47 @@
+export function renderMediaFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `(value) => {
+${indent}            ${defaultValueFromHandler}(value)
+${indent}            formField.onChange(value)
+${indent}          }`
+}
+
+export function renderMediaFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  onChange,
+  acceptProp
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  onChange: string
+  acceptProp: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <MediaField
+${indent}          value={formField.value}
+${indent}          onChange={${onChange}}
+${indent}          onBlur={formField.onBlur}
+${indent}          disabled={isPending}${acceptProp}
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,91 @@
+export function renderMultiRelationshipFieldActionButtonsTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  toPascalCase,
+  toLowerCase,
+  relSingular,
+  dataArray,
+  displayField,
+  secondaryDisplayField,
+  defaultValueFromHandlerContent
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  toPascalCase: string
+  toLowerCase: string
+  relSingular: string
+  dataArray: string
+  displayField: string
+  secondaryDisplayField: string
+  defaultValueFromHandlerContent: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <Popover open={${fieldName}Open} onOpenChange={set${toPascalCase}Open}>
+${indent}        <PopoverTrigger asChild>
+${indent}          <FormControl>
+${indent}            <Button
+${indent}              variant="outline"
+${indent}              role="combobox"
+${indent}              className={cn("w-full justify-between", {
+${indent}                "text-muted-foreground": !formField.value || formField.value.length === 0
+${indent}              })}
+${indent}              disabled={isPending}
+${indent}            >
+${indent}              {(formField.value?.length ?? 0) > 0
+${indent}                ? \`\${formField.value?.length ?? 0} selected\`
+${indent}                : "Select ${toLowerCase}"}
+${indent}              <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+${indent}            </Button>
+${indent}          </FormControl>
+${indent}        </PopoverTrigger>
+${indent}        <PopoverContent className="w-full p-0" align="start">
+${indent}          <Command>
+${indent}            <CommandInput placeholder="Search ${toLowerCase}..." />
+${indent}            <CommandList>
+${indent}              <CommandEmpty>No ${relSingular} found.</CommandEmpty>
+${indent}              <CommandGroup>
+${indent}                {${dataArray}?.filter((item) => item.id !== null).map((item) => {
+${indent}                  const displayName = ${displayField}
+${indent}                  const secondaryDisplayName = ${secondaryDisplayField}
+${indent}                  const isSelected = formField.value?.includes(item.id) || false
+${indent}                  return (
+${indent}                    <CommandItem
+${indent}                      key={item.id}
+${indent}                      value={displayName}
+${indent}                      onSelect={() => {
+${indent}                        const current = formField.value || []
+${defaultValueFromHandlerContent}
+${indent}                      }}
+${indent}                    >
+${indent}                      <Check className={cn("size-4", {
+${indent}                        "opacity-100": isSelected,
+${indent}                        "opacity-0": !isSelected
+${indent}                      })} />
+${indent}                      <span className="flex min-w-0 flex-col text-left">
+${indent}                        <span className="truncate">{displayName}</span>
+${indent}                        {secondaryDisplayName ? (
+${indent}                          <span className="truncate text-xs text-muted-foreground">{secondaryDisplayName}</span>
+${indent}                        ) : null}
+${indent}                      </span>
+${indent}                    </CommandItem>
+${indent}                  )
+${indent}                })}
+${indent}              </CommandGroup>
+${indent}            </CommandList>
+${indent}          </Command>
+${indent}        </PopoverContent>
+${indent}      </Popover>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,219 @@
+export function renderMultiSelectFieldStaticOptionsTemplate({
+  staticOptions,
+  indent
+}: {
+  staticOptions: string
+  indent: string
+}): string {
+  return `const staticOptions = ${staticOptions}
+${indent}    const options = staticOptions`
+}
+
+export function renderMultiSelectFieldContentTemplate({
+  indent,
+  lowerLabel,
+  searchVar,
+  setSearchVar
+}: {
+  indent: string
+  lowerLabel: string
+  searchVar: string
+  setSearchVar: string
+}): string {
+  return `<CommandInput
+${indent}                placeholder="Search ${lowerLabel}..."
+${indent}                value={${searchVar}}
+${indent}                onValueChange={${setSearchVar}}
+${indent}              />`
+}
+
+export function renderMultiSelectFieldCreateLabelTemplate({
+  indent,
+  searchVar
+}: {
+  indent: string
+  searchVar: string
+}): string {
+  return `
+${indent}    const createLabel = ${searchVar}.trim()
+${indent}    const canCreateOption =
+${indent}      createLabel.length > 0 &&
+${indent}      !options.some(
+${indent}        (option) =>
+${indent}          option.label.toLowerCase() === createLabel.toLowerCase() ||
+${indent}          option.value.toLowerCase() === createLabel.toLowerCase()
+${indent}      )
+`
+}
+
+export function renderMultiSelectFieldActionButtonsTemplate({
+  indent,
+  pendingVar,
+  createHandler
+}: {
+  indent: string
+  pendingVar: string
+  createHandler: string
+}): string {
+  return `
+${indent}              {canCreateOption ? (
+${indent}                <>
+${indent}                  <CommandSeparator />
+${indent}                  <div className="p-1">
+${indent}                    <Button
+${indent}                      type="button"
+${indent}                      variant="ghost"
+${indent}                      className="w-full justify-start"
+${indent}                      disabled={${pendingVar}}
+${indent}                      aria-busy={${pendingVar}}
+${indent}                      onClick={() => ${createHandler}(createLabel)}
+${indent}                    >
+${indent}                      <Plus className="size-4" />
+${indent}                      {${pendingVar} ? 'Creating…' : \`Create "\${createLabel}"\`}
+${indent}                    </Button>
+${indent}                  </div>
+${indent}                </>
+${indent}              ) : null}`
+}
+
+export function renderMultiSelectFieldActionButtonsSerializedValueTemplate({
+  indent,
+  fieldName,
+  optionsDeclaration,
+  createState,
+  previewLimit,
+  formItemProps,
+  labelWithDescription,
+  openVar,
+  setOpenVar,
+  stringify,
+  searchInput,
+  lowerLabel,
+  defaultValueFromHandlerContent,
+  clearSearch,
+  createAction
+}: {
+  indent: string
+  fieldName: string
+  optionsDeclaration: string
+  createState: string
+  previewLimit: string
+  formItemProps: string
+  labelWithDescription: string
+  openVar: string
+  setOpenVar: string
+  stringify: string
+  searchInput: string
+  lowerLabel: string
+  defaultValueFromHandlerContent: string
+  clearSearch: string
+  createAction: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => {
+${indent}    ${optionsDeclaration}
+${indent}    const selectedValues = Array.isArray(formField.value) ? formField.value : []
+${indent}    const selectedOptions = options.filter((option) => selectedValues.includes(option.value))${createState}
+${indent}    const previewLimit = ${previewLimit}
+${indent}    const shouldCollapseSelectedOptions =
+${indent}      selectedOptions.length > Math.max(previewLimit, 2)
+${indent}    const visibleSelectedOptions = shouldCollapseSelectedOptions
+${indent}      ? selectedOptions.slice(0, previewLimit)
+${indent}      : selectedOptions
+${indent}    const hiddenSelectedOptions = shouldCollapseSelectedOptions
+${indent}      ? selectedOptions.slice(previewLimit)
+${indent}      : []
+${indent}    return (
+${indent}      <FormItem${formItemProps}>
+${indent}        ${labelWithDescription}
+${indent}        <Popover open={${openVar}} onOpenChange={${setOpenVar}}>
+${indent}          <PopoverTrigger asChild>
+${indent}            <FormControl>
+${indent}              <Button
+${indent}                type="button"
+${indent}                variant="outline"
+${indent}                role="combobox"
+${indent}                aria-expanded={${openVar}}
+${indent}                className={cn("w-full justify-between gap-2", {
+${indent}                  "text-muted-foreground": selectedOptions.length === 0
+${indent}                })}
+${indent}                disabled={isPending}
+${indent}              >
+${indent}                <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
+${indent}                  {selectedOptions.length > 0 ? (
+${indent}                    <>
+${indent}                      <span className="truncate">
+${indent}                        {visibleSelectedOptions.map((option) => option.label).join(', ')}
+${indent}                      </span>
+${indent}                      {hiddenSelectedOptions.length > 0 ? (
+${indent}                        <Tooltip>
+${indent}                          <TooltipTrigger asChild>
+${indent}                            <Badge
+${indent}                              variant="outline"
+${indent}                              className="h-5 shrink-0 tabular-nums"
+${indent}                            >
+${indent}                              {'+'}
+${indent}                              {hiddenSelectedOptions.length}{' '}
+${indent}                              {hiddenSelectedOptions.length === 1 ? 'other' : 'others'}
+${indent}                            </Badge>
+${indent}                          </TooltipTrigger>
+${indent}                          <TooltipContent align="center" side="bottom" className="max-w-60 w-full">
+${indent}                            <div className="space-y-1">
+${indent}                              {hiddenSelectedOptions.map((option) => (
+${indent}                                <div key={option.value} className="truncate">
+${indent}                                  {option.label}
+${indent}                                </div>
+${indent}                              ))}
+${indent}                            </div>
+${indent}                          </TooltipContent>
+${indent}                        </Tooltip>
+${indent}                      ) : null}
+${indent}                    </>
+${indent}                  ) : (
+${indent}                    <span className="truncate">{${stringify}}</span>
+${indent}                  )}
+${indent}                </span>
+${indent}                <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+${indent}              </Button>
+${indent}            </FormControl>
+${indent}          </PopoverTrigger>
+${indent}          <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+${indent}            <Command>
+${indent}              ${searchInput}
+${indent}              <CommandList>
+${indent}                <CommandEmpty>No ${lowerLabel} found.</CommandEmpty>
+${indent}                <CommandGroup>
+${indent}                  {options.map((option) => {
+${indent}                    const isSelected = selectedValues.includes(option.value)
+${indent}                    return (
+${indent}                      <CommandItem
+${indent}                        key={option.value}
+${indent}                        value={\`\${option.label} \${option.value}\`}
+${indent}                        onSelect={() => {
+${indent}                          const nextValues = isSelected
+${indent}                            ? selectedValues.filter((value: string) => value !== option.value)
+${indent}                            : [...selectedValues, option.value]
+${defaultValueFromHandlerContent}${indent}                          formField.onChange(nextValues)${clearSearch}
+${indent}                        }}
+${indent}                      >
+${indent}                        <Check className={cn("size-4", {
+${indent}                          "opacity-100": isSelected,
+${indent}                          "opacity-0": !isSelected
+${indent}                        })} />
+${indent}                        <span className="truncate">{option.label}</span>
+${indent}                      </CommandItem>
+${indent}                    )
+${indent}                  })}
+${indent}                </CommandGroup>
+${indent}              </CommandList>${createAction}
+${indent}            </Command>
+${indent}          </PopoverContent>
+${indent}        </Popover>
+${indent}        <FormMessage />
+${indent}      </FormItem>
+${indent}    )
+${indent}  }}
+${indent}/>`
+}

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

@@ -0,0 +1,48 @@
+export function renderNumberFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  fieldType,
+  stepProp,
+  toLowerCase,
+  emptyValue,
+  applyDefaultValueFrom
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  fieldType: string
+  stepProp: string
+  toLowerCase: string
+  emptyValue: string
+  applyDefaultValueFrom: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <Input
+${indent}          type="${fieldType}"${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
+${applyDefaultValueFrom}${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/render-richtext-field.ts

@@ -0,0 +1,50 @@
+export function renderRichtextFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `(value) => {
+${indent}            ${defaultValueFromHandler}(value)
+${indent}            formField.onChange(value)
+${indent}          }`
+}
+
+export function renderRichtextFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  fillFormItemProps,
+  labelWithDescription,
+  onChange,
+  fillControlClass,
+  toLowerCase
+}: {
+  indent: string
+  fieldName: string
+  fillFormItemProps: string
+  labelWithDescription: string
+  onChange: string
+  fillControlClass: string
+  toLowerCase: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${fillFormItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <ContentEditor
+${indent}          value={formField.value}
+${indent}          onChange={${onChange}}
+${indent}          defaultMode="rich"
+${indent}          className="${fillControlClass}"
+${indent}          placeholder="Enter ${toLowerCase}"
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,61 @@
+export function renderSelectFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `(value) => {
+${indent}            ${defaultValueFromHandler}(value)
+${indent}            formField.onChange(value)
+${indent}          }`
+}
+
+export function renderSelectFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  validValuesExpression,
+  onValueChange,
+  selectedLabelExpression,
+  stringify,
+  optionsJsx
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  validValuesExpression: string
+  onValueChange: string
+  selectedLabelExpression: string
+  stringify: string
+  optionsJsx: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <Select
+${indent}          value={typeof formField.value === "string" && ${validValuesExpression}.includes(formField.value) ? formField.value : undefined}
+${indent}          onValueChange={${onValueChange}}
+${indent}          disabled={isPending}
+${indent}        >
+${indent}          <SelectTrigger className="w-full">
+${indent}            <span data-slot="select-value" className="pointer-events-none">
+${indent}              {(${selectedLabelExpression}) ?? ${stringify}}
+${indent}            </span>
+${indent}          </SelectTrigger>
+${indent}          <SelectContent position="popper" align="start">
+${optionsJsx}
+${indent}          </SelectContent>
+${indent}        </Select>
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,16 @@
+export function renderSeparatorFieldLayoutTemplate({
+  indent,
+  fieldLabel
+}: {
+  indent: string
+  fieldLabel: string
+}): string {
+  return `${indent}<div className="relative my-4">
+${indent}  <div className="absolute inset-0 flex items-center">
+${indent}    <Separator className="w-full" />
+${indent}  </div>
+${indent}  <div className="relative flex justify-center text-xs uppercase">
+${indent}    <span className="bg-background px-2 text-muted-foreground">${fieldLabel}</span>
+${indent}  </div>
+${indent}</div>`
+}

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

@@ -0,0 +1,93 @@
+export function renderSingleRelationshipFieldActionButtonsTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  toPascalCase,
+  dataArray,
+  displayField,
+  toLowerCase,
+  relSingular,
+  secondaryDisplayField,
+  defaultValueFromHandlerContent
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  toPascalCase: string
+  dataArray: string
+  displayField: string
+  toLowerCase: string
+  relSingular: string
+  secondaryDisplayField: string
+  defaultValueFromHandlerContent: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <Popover open={${fieldName}Open} onOpenChange={set${toPascalCase}Open}>
+${indent}        <PopoverTrigger asChild>
+${indent}          <FormControl>
+${indent}            <Button
+${indent}              variant="outline"
+${indent}              role="combobox"
+${indent}              className={cn("w-full justify-between", {
+${indent}                "text-muted-foreground": !formField.value
+${indent}              })}
+${indent}              disabled={isPending}
+${indent}            >
+${indent}              {formField.value
+${indent}                ? (() => {
+${indent}                    const item = ${dataArray}?.find((item) => item.id !== null && String(item.id) === formField.value)
+${indent}                    return item ? (${displayField}) : "Select ${toLowerCase}"
+${indent}                  })()
+${indent}                : "Select ${toLowerCase}"}
+${indent}              <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+${indent}            </Button>
+${indent}          </FormControl>
+${indent}        </PopoverTrigger>
+${indent}        <PopoverContent className="w-full p-0" align="start">
+${indent}          <Command>
+${indent}            <CommandInput placeholder="Search ${toLowerCase}..." />
+${indent}            <CommandList>
+${indent}              <CommandEmpty>No ${relSingular} found.</CommandEmpty>
+${indent}              <CommandGroup>
+${indent}                {${dataArray}?.filter((item) => item.id !== null).map((item) => {
+${indent}                  const displayName = ${displayField}
+${indent}                  const secondaryDisplayName = ${secondaryDisplayField}
+${indent}                  return (
+${indent}                    <CommandItem
+${indent}                      key={item.id}
+${indent}                      value={displayName}
+${indent}                      onSelect={() => {
+${defaultValueFromHandlerContent}${indent}                        formField.onChange(String(item.id))
+${indent}                        set${toPascalCase}Open(false)
+${indent}                      }}
+${indent}                    >
+${indent}                      <Check className={cn("size-4", {
+${indent}                        "opacity-100": formField.value === String(item.id),
+${indent}                        "opacity-0": formField.value !== String(item.id)
+${indent}                      })} />
+${indent}                      <span className="flex min-w-0 flex-col text-left">
+${indent}                        <span className="truncate">{displayName}</span>
+${indent}                        {secondaryDisplayName ? (
+${indent}                          <span className="truncate text-xs text-muted-foreground">{secondaryDisplayName}</span>
+${indent}                        ) : null}
+${indent}                      </span>
+${indent}                    </CommandItem>
+${indent}                  )
+${indent}                })}
+${indent}              </CommandGroup>
+${indent}            </CommandList>
+${indent}          </Command>
+${indent}        </PopoverContent>
+${indent}      </Popover>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}