npm - betterstart-cli - Versions diffs - 0.0.103 → 0.0.104 - Mend

betterstart-cli 0.0.103 → 0.0.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/dist/assets/adapters/next/templates/renderers/generators/email-template/generate-email-template.ts ADDED Viewed

@@ -0,0 +1,248 @@
+export function renderEmailTemplateContentTemplate({
+  fLabel,
+  generateFieldValue
+}: {
+  fLabel: string
+  generateFieldValue: string
+}): string {
+  return `          <Row style={fieldRow}>
+            <Text style={label}>${fLabel}</Text>
+            <Text style={value}>${generateFieldValue}</Text>
+          </Row>`
+}
+export function renderEmailTemplateContentDetailsTemplate(): string {
+  return `
+          {customFields && Object.keys(customFields).length > 0 && (
+            <>
+              <Row style={dividerRow}>
+                <Text style={sectionTitle}>Additional Information</Text>
+              </Row>
+              {Object.entries(customFields).map(([fieldKey, fieldValue]) => (
+                <Row key={fieldKey} style={fieldRow}>
+                  <Text style={label}>{fieldKey.replace(/([A-Z])/g, ' $1').trim()}</Text>
+                  <Text style={value}>{fieldValue !== null && fieldValue !== undefined ? String(fieldValue) : 'N/A'}</Text>
+                </Row>
+              ))}
+            </>
+          )}`
+}
+export function renderEmailTemplateLinkTemplate(): string {
+  return `
+const link = {
+  color: colors.primary,
+  fontWeight: '500' as const,
+  textDecoration: 'none',
+}
+`
+}
+export function renderEmailTemplateListItemTemplate(): string {
+  return `
+const listItem = {
+  backgroundColor: colors.borderLight,
+  borderRadius: '6px',
+  color: colors.text,
+  fontSize: '14px',
+  lineHeight: '20px',
+  marginBottom: '6px',
+  padding: '8px 12px',
+}
+`
+}
+export function renderEmailTemplateDividerRowTemplate(): string {
+  return `
+const dividerRow = {
+  borderTop: \`2px solid \${colors.border}\`,
+  marginTop: '8px',
+  paddingTop: '24px',
+}
+const sectionTitle = {
+  color: colors.text,
+  fontSize: '14px',
+  fontWeight: '600' as const,
+  margin: '0 0 8px',
+}
+`
+}
+export function renderEmailTemplateComponentTemplate({
+  needsLinkLink,
+  pascal,
+  propsFields,
+  customFieldsProp,
+  propsDestructured,
+  schemaLabel,
+  fieldSections,
+  customFieldsSection,
+  linkStyle,
+  listItemStyle,
+  dynamicStyles
+}: {
+  needsLinkLink: string
+  pascal: string
+  propsFields: string
+  customFieldsProp: string
+  propsDestructured: string
+  schemaLabel: string
+  fieldSections: string
+  customFieldsSection: string
+  linkStyle: string
+  listItemStyle: string
+  dynamicStyles: string
+}): string {
+  return `import { Body, Container, Head, Heading, Html${needsLinkLink}, Preview, Row, Section, Text } from '@react-email/components'
+interface ${pascal}SubmissionEmailProps {
+${propsFields}${customFieldsProp}
+  submittedAt: string
+}
+export function ${pascal}SubmissionEmail({
+  ${propsDestructured}
+}: ${pascal}SubmissionEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>New ${schemaLabel} Submission</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={header}>
+            <Text style={logoText}>BetterStart</Text>
+          </Section>
+          <Section style={titleSection}>
+            <Heading style={h1}>New ${schemaLabel} Submission</Heading>
+            <Text style={subtitle}>
+              You received a new submission on {new Date(submittedAt).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+            </Text>
+          </Section>
+          <Section style={card}>
+${fieldSections}${customFieldsSection}
+          </Section>
+          <Section style={footer}>
+            <Text style={footerText}>
+              Submitted at {new Date(submittedAt).toLocaleString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true, timeZoneName: 'short' })}
+            </Text>
+            <Text style={footerBrand}>BetterStart</Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  )
+}
+const colors = {
+  primary: '#7c3aed',
+  background: '#f8fafc',
+  cardBg: '#ffffff',
+  text: '#1e293b',
+  textMuted: '#64748b',
+  textLight: '#94a3b8',
+  border: '#e2e8f0',
+  borderLight: '#f1f5f9',
+}
+const main = {
+  backgroundColor: colors.background,
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  padding: '40px 20px',
+}
+const container = {
+  margin: '0 auto',
+  maxWidth: '600px',
+}
+const header = {
+  backgroundColor: colors.primary,
+  borderRadius: '12px 12px 0 0',
+  padding: '24px 32px',
+  textAlign: 'center' as const,
+}
+const logoText = {
+  color: '#ffffff',
+  fontSize: '24px',
+  fontWeight: '700' as const,
+  letterSpacing: '-0.02em',
+  margin: '0',
+}
+const titleSection = {
+  backgroundColor: colors.cardBg,
+  padding: '32px 32px 24px',
+  textAlign: 'center' as const,
+}
+const h1 = {
+  color: colors.text,
+  fontSize: '24px',
+  fontWeight: '700' as const,
+  lineHeight: '32px',
+  margin: '0 0 8px',
+}
+const subtitle = {
+  color: colors.textMuted,
+  fontSize: '14px',
+  lineHeight: '20px',
+  margin: '0',
+}
+const card = {
+  backgroundColor: colors.cardBg,
+  padding: '0 32px 32px',
+}
+const fieldRow = {
+  borderBottom: \`1px solid \${colors.borderLight}\`,
+  padding: '16px 0',
+}
+const label = {
+  color: colors.textMuted,
+  fontSize: '12px',
+  fontWeight: '600' as const,
+  letterSpacing: '0.025em',
+  lineHeight: '16px',
+  margin: '0 0 6px',
+  textTransform: 'uppercase' as const,
+}
+const value = {
+  color: colors.text,
+  fontSize: '16px',
+  lineHeight: '24px',
+  margin: '0',
+  wordBreak: 'break-word' as const,
+}
+${linkStyle}${listItemStyle}${dynamicStyles}const footer = {
+  backgroundColor: colors.cardBg,
+  borderRadius: '0 0 12px 12px',
+  borderTop: \`1px solid \${colors.border}\`,
+  padding: '24px 32px',
+  textAlign: 'center' as const,
+}
+const footerText = {
+  color: colors.textLight,
+  fontSize: '12px',
+  lineHeight: '16px',
+  margin: '0 0 8px',
+}
+const footerBrand = {
+  color: colors.textMuted,
+  fontSize: '14px',
+  fontWeight: '600' as const,
+  margin: '0',
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/email-template/generate-field-value.ts ADDED Viewed

@@ -0,0 +1,31 @@
+export function renderFieldValueContentTemplate({ name }: { name: string }): string {
+  return `{${name} ? (
+              <Link href={${name}} style={link}>Download File</Link>
+            ) : 'No file uploaded'}`
+}
+export function renderFieldValueContentDetailsTemplate({ name }: { name: string }): string {
+  return `{${name} ? (
+              <Link href={\`mailto:\${${name}}\`} style={link}>{${name}}</Link>
+            ) : 'N/A'}`
+}
+export function renderFieldValueContentDetailsBranchTemplate({ name }: { name: string }): string {
+  return `{${name} ? (
+              <Link href={${name}} style={link}>{${name}}</Link>
+            ) : 'N/A'}`
+}
+export function renderFieldValueContentDetailsBranchBodyTemplate({
+  name
+}: {
+  name: string
+}): string {
+  return `{${name} && Array.isArray(${name}) && ${name}.length > 0 ? (
+              ${name}.map((item, idx) => (
+                <Text key={idx} style={listItem}>
+                  {Object.entries(item).map(([k, v]) => \`\${k}: \${v}\`).join(', ')}
+                </Text>
+              ))
+            ) : 'N/A'}`
+}

package/dist/assets/adapters/next/templates/renderers/generators/emitted-helpers.ts ADDED Viewed

@@ -0,0 +1,16 @@
+export function renderBuildLoadingSkeletonSourceGeneratedFunctionTemplate({
+  componentName,
+  escapeJsx
+}: {
+  componentName: string
+  escapeJsx: string
+}): string {
+  return `export function ${componentName}() {
+  return (
+    <div className="flex items-center justify-center h-48">
+      <div className="text-muted-foreground">Loading ${escapeJsx}…</div>
+    </div>
+  )
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form/field-jsx/generate-icon-postfix.ts ADDED Viewed

@@ -0,0 +1,27 @@
+export function renderIconPostfixFormFieldTemplate({
+  indent,
+  fieldName,
+  formLabel
+}: {
+  indent: string
+  fieldName: string
+  formLabel: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}Icon"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem>
+${indent}      ${formLabel}
+${indent}      <FormControl>
+${indent}        <IconPicker
+${indent}          value={formField.value}
+${indent}          onValueChange={formField.onChange}
+${indent}          triggerPlaceholder="Select icon"
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,47 @@
+export function renderBooleanFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `(checked) => {
+${indent}            ${defaultValueFromHandler}(checked)
+${indent}            formField.onChange(checked)
+${indent}          }`
+}
+export function renderBooleanFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  onCheckedChange,
+  label,
+  hintJsxContent
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  onCheckedChange: string
+  label: string
+  hintJsxContent: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      <FormControl>
+${indent}        <Checkbox
+${indent}          checked={formField.value}
+${indent}          onCheckedChange={${onCheckedChange}}
+${indent}          disabled={isPending}
+${indent}        />
+${indent}      </FormControl>
+${indent}      <div className="flex flex-col gap-1">
+${indent}        <FormLabel>${label}</FormLabel>${hintJsxContent}
+${indent}      </div>
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,122 @@
+export function renderCreatableSelectFieldActionButtonsTemplate({
+  indent,
+  fieldName,
+  optionsVar,
+  searchVar,
+  formItemProps,
+  labelWithDescription,
+  openVar,
+  setOpenVar,
+  stringify,
+  lowerLabel,
+  setSearchVar,
+  defaultValueFromHandlerContent,
+  pendingVar,
+  createHandler
+}: {
+  indent: string
+  fieldName: string
+  optionsVar: string
+  searchVar: string
+  formItemProps: string
+  labelWithDescription: string
+  openVar: string
+  setOpenVar: string
+  stringify: string
+  lowerLabel: string
+  setSearchVar: string
+  defaultValueFromHandlerContent: string
+  pendingVar: string
+  createHandler: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => {
+${indent}    const selectedOption = ${optionsVar}.find((option) => option.value === formField.value)
+${indent}    const createLabel = ${searchVar}.trim()
+${indent}    const canCreateOption =
+${indent}      createLabel.length > 0 &&
+${indent}      !${optionsVar}.some(
+${indent}        (option) =>
+${indent}          option.label.toLowerCase() === createLabel.toLowerCase() ||
+${indent}          option.value.toLowerCase() === createLabel.toLowerCase()
+${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", {
+${indent}                  "text-muted-foreground": !selectedOption
+${indent}                })}
+${indent}                disabled={isPending}
+${indent}              >
+${indent}                <span className="truncate">{selectedOption?.label ?? ${stringify}}</span>
+${indent}                <ChevronsUpDown className="ml-2 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}              <CommandInput
+${indent}                placeholder="Search ${lowerLabel}..."
+${indent}                value={${searchVar}}
+${indent}                onValueChange={${setSearchVar}}
+${indent}              />
+${indent}              <CommandList>
+${indent}                <CommandEmpty>No ${lowerLabel} found.</CommandEmpty>
+${indent}                <CommandGroup>
+${indent}                  {${optionsVar}.map((option) => (
+${indent}                    <CommandItem
+${indent}                      key={option.value}
+${indent}                      value={\`\${option.label} \${option.value}\`}
+${indent}                      onSelect={() => {
+${defaultValueFromHandlerContent}${indent}                        formField.onChange(option.value)
+${indent}                        ${setSearchVar}('')
+${indent}                        ${setOpenVar}(false)
+${indent}                      }}
+${indent}                    >
+${indent}                      <Check className={cn("size-4", {
+${indent}                        "opacity-100": formField.value === option.value,
+${indent}                        "opacity-0": formField.value !== option.value
+${indent}                      })} />
+${indent}                      <span className="truncate">{option.label}</span>
+${indent}                    </CommandItem>
+${indent}                  ))}
+${indent}                </CommandGroup>
+${indent}              </CommandList>
+${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}
+${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-date-field.ts ADDED Viewed

@@ -0,0 +1,47 @@
+export function renderDateFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `(value) => {
+${indent}            ${defaultValueFromHandler}(value)
+${indent}            formField.onChange(value)
+${indent}          }`
+}
+export function renderDateFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  onChange,
+  toLowerCase
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  onChange: string
+  toLowerCase: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <DatePicker
+${indent}          value={formField.value}
+${indent}          onChange={${onChange}}
+${indent}          disabled={isPending}
+${indent}          placeholder="Select ${toLowerCase}"
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,53 @@
+export function renderDefaultFieldChangeHandlerTemplate({
+  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 renderDefaultFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  fieldType,
+  toLowerCase,
+  fieldProps
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  fieldType: string
+  toLowerCase: string
+  fieldProps: 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}"
+${indent}          placeholder="Enter ${toLowerCase}"
+${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/render-gallery-field.ts ADDED Viewed

@@ -0,0 +1,46 @@
+export function renderGalleryFieldChangeHandlerTemplate({
+  indent,
+  defaultValueFromHandler
+}: {
+  indent: string
+  defaultValueFromHandler: string
+}): string {
+  return `(value) => {
+${indent}            ${defaultValueFromHandler}(value)
+${indent}            formField.onChange(value)
+${indent}          }`
+}
+export function renderGalleryFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  onChange,
+  maxItemsProp
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  onChange: string
+  maxItemsProp: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <GalleryField
+${indent}          value={formField.value}
+${indent}          onChange={${onChange}}
+${indent}          disabled={isPending}${maxItemsProp}
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}

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

@@ -0,0 +1,16 @@
+export function renderGroupFieldLayoutTemplate({
+  heading,
+  indent,
+  columnsGrid,
+  groupFields
+}: {
+  heading: string
+  indent: string
+  columnsGrid: string
+  groupFields: string
+}): string {
+  return `
+${heading}${indent}  <div className="grid ${columnsGrid} gap-5">
+${groupFields}
+${indent}</div>`
+}

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

@@ -0,0 +1,31 @@
+export function renderIconFieldFormFieldTemplate({
+  indent,
+  fieldName,
+  formItemProps,
+  labelWithDescription,
+  toLowerCase
+}: {
+  indent: string
+  fieldName: string
+  formItemProps: string
+  labelWithDescription: string
+  toLowerCase: string
+}): string {
+  return `${indent}<FormField
+${indent}  control={form.control}
+${indent}  name="${fieldName}"
+${indent}  render={({ field: formField }) => (
+${indent}    <FormItem${formItemProps}>
+${indent}      ${labelWithDescription}
+${indent}      <FormControl>
+${indent}        <IconPicker
+${indent}          value={formField.value}
+${indent}          onValueChange={formField.onChange}
+${indent}          triggerPlaceholder="Select ${toLowerCase}"
+${indent}        />
+${indent}      </FormControl>
+${indent}      <FormMessage />
+${indent}    </FormItem>
+${indent}  )}
+${indent}/>`
+}