@baseplate-dev/react-generators 0.1.1

package/dist/generators/core/react-components/templates/components/TextAreaInput/index.tsx

@@ -0,0 +1,107 @@
+// @ts-nocheck
+
+import type { ReactElement, TextareaHTMLAttributes } from 'react';
+import type {
+  Control,
+  FieldError,
+  FieldPath,
+  FieldValues,
+  UseFormRegisterReturn,
+} from 'react-hook-form';
+
+import clsx from 'clsx';
+import { get, useFormState } from 'react-hook-form';
+
+import FormError from '../FormError/index.js';
+import FormLabel from '../FormLabel/index.js';
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  name?: string;
+  register?: UseFormRegisterReturn;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  value?: string;
+  rows?: number;
+}
+
+const TextAreaInput = function TextInput({
+  className,
+  disabled,
+  placeholder,
+  name,
+  onChange,
+  onBlur,
+  value,
+  register,
+  rows,
+}: Props): ReactElement {
+  const inputProps: TextareaHTMLAttributes<HTMLTextAreaElement> = {
+    name,
+    placeholder,
+    disabled,
+    onChange:
+      onChange &&
+      ((e) => {
+        onChange(e.target.value);
+      }),
+    onBlur,
+    value,
+    rows,
+    ...register,
+  };
+  return (
+    <textarea
+      className={clsx(
+        'block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+        className,
+      )}
+      {...inputProps}
+    />
+  );
+};
+
+interface TextInputLabelledProps extends Props {
+  label?: string;
+  error?: React.ReactNode;
+}
+
+TextAreaInput.Labelled = function TextInputLabelled({
+  label,
+  className,
+  error,
+  ...rest
+}: TextInputLabelledProps): ReactElement {
+  return (
+    <label className={clsx('block', className)}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <TextAreaInput {...rest} />
+      {error && <FormError>{error}</FormError>}
+    </label>
+  );
+};
+
+interface TextInputControllerProps<T extends FieldValues>
+  extends TextInputLabelledProps {
+  control: Control<T>;
+  name: FieldPath<T>;
+}
+
+TextAreaInput.LabelledController = function TextInputController<
+  T extends FieldValues,
+>({ control, name, ...rest }: TextInputControllerProps<T>): ReactElement {
+  const { errors } = useFormState({ control, name });
+  const error = get(errors, name) as FieldError | undefined;
+
+  return (
+    <TextAreaInput.Labelled
+      register={control.register(name)}
+      error={error?.message}
+      {...rest}
+    />
+  );
+};
+
+export default TextAreaInput;

package/dist/generators/core/react-components/templates/components/TextInput/index.tsx

@@ -0,0 +1,133 @@
+// @ts-nocheck
+
+import type {
+  FocusEventHandler,
+  HTMLInputTypeAttribute,
+  InputHTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactElement,
+} from 'react';
+import type {
+  Control,
+  FieldError,
+  FieldPath,
+  FieldValues,
+  RegisterOptions,
+  UseFormRegisterReturn,
+} from 'react-hook-form';
+
+import clsx from 'clsx';
+import { get, useFormState } from 'react-hook-form';
+
+import FormError from '../FormError/index.js';
+import FormLabel from '../FormLabel/index.js';
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  name?: string;
+  type?: HTMLInputTypeAttribute;
+  register?: UseFormRegisterReturn;
+  onChange?: (value: string) => void;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  value?: string;
+}
+
+const TextInput = function TextInput({
+  className,
+  disabled,
+  placeholder,
+  name,
+  type = 'text',
+  onChange,
+  onBlur,
+  onClick,
+  onFocus,
+  onKeyDown,
+  value,
+  register,
+}: Props): ReactElement {
+  const inputProps: InputHTMLAttributes<HTMLInputElement> = {
+    name,
+    placeholder,
+    disabled,
+    type,
+    onChange:
+      onChange &&
+      ((e) => {
+        onChange(e.target.value);
+      }),
+    onBlur,
+    onClick,
+    onFocus,
+    onKeyDown,
+    value,
+    ...register,
+  };
+  return (
+    <input
+      className={clsx(
+        'block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+        className,
+      )}
+      {...inputProps}
+    />
+  );
+};
+
+interface TextInputLabelledProps extends Props {
+  label?: string;
+  error?: React.ReactNode;
+}
+
+TextInput.Labelled = function TextInputLabelled({
+  label,
+  className,
+  error,
+  ...rest
+}: TextInputLabelledProps): ReactElement {
+  return (
+    <label className={clsx('block', className)}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <TextInput {...rest} />
+      {error && <FormError>{error}</FormError>}
+    </label>
+  );
+};
+
+interface TextInputControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends TextInputLabelledProps {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+  registerOptions?: RegisterOptions<TFieldValues, TFieldName>;
+}
+
+TextInput.LabelledController = function TextInputController<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  registerOptions,
+  ...rest
+}: TextInputControllerProps<TFieldValues, TFieldName>): ReactElement {
+  const { errors } = useFormState({ control, name });
+  const error = get(errors, name) as FieldError | undefined;
+
+  return (
+    <TextInput.Labelled
+      register={control.register(name, registerOptions)}
+      error={error?.message}
+      {...rest}
+    />
+  );
+};
+
+export default TextInput;

package/dist/generators/core/react-components/templates/components/Toast/index.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+
+import type { MouseEventHandler, ReactElement } from 'react';
+
+import { Transition } from '@headlessui/react';
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  onClose?: MouseEventHandler;
+  visible?: boolean;
+}
+
+function Toast({
+  className,
+  icon,
+  visible,
+  children,
+  onClose,
+}: Props): ReactElement {
+  return (
+    <Transition
+      show={visible}
+      enter="transition-opacity duration-150"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <div
+        className={clsx(
+          'flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400',
+          visible && '-top-96',
+          className,
+        )}
+        role="alert"
+      >
+        {icon}
+        <div className="ml-3 text-sm font-normal">{children}</div>
+        <button
+          type="button"
+          className="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          aria-label="Close"
+          onClick={onClose}
+        >
+          <span className="sr-only">Close</span>
+          <svg
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+    </Transition>
+  );
+}
+
+export default Toast;

package/dist/generators/core/react-components/templates/components/index.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+
+TPL_EXPORTS;

package/dist/generators/core/react-components/templates/hooks/useConfirmDialog.ts

@@ -0,0 +1,53 @@
+// @ts-nocheck
+
+import { useCallback } from 'react';
+import { create } from 'zustand';
+
+import type { ButtonProps } from '../components/Button/index.js';
+
+export interface UseConfirmDialogRequestOptions {
+  title: string;
+  content: string;
+  buttonCancelText?: string;
+  buttonConfirmText?: string;
+  buttonConfirmColor?: ButtonProps['color'];
+  onCancel?: React.MouseEventHandler<HTMLButtonElement>;
+  onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+interface UseConfirmDialogResult {
+  requestConfirm: (request: UseConfirmDialogRequestOptions) => void;
+  clearConfirm: () => void;
+}
+
+interface UseConfirmDialogState {
+  confirmOptions?: UseConfirmDialogRequestOptions;
+  setConfirmOptions: (
+    options: UseConfirmDialogRequestOptions | undefined,
+  ) => void;
+}
+
+export const useConfirmDialogState = create<UseConfirmDialogState>((set) => ({
+  confirmOptions: undefined,
+  setConfirmOptions: (options) => {
+    set({ confirmOptions: options });
+  },
+}));
+
+export function useConfirmDialog(): UseConfirmDialogResult {
+  const setConfirmOptions = useConfirmDialogState(
+    (state) => state.setConfirmOptions,
+  );
+
+  return {
+    requestConfirm: useCallback(
+      (request) => {
+        setConfirmOptions(request);
+      },
+      [setConfirmOptions],
+    ),
+    clearConfirm: useCallback(() => {
+      setConfirmOptions(undefined);
+    }, [setConfirmOptions]),
+  };
+}

package/dist/generators/core/react-components/templates/hooks/useStatus.ts

@@ -0,0 +1,44 @@
+// @ts-nocheck
+
+import { useState } from 'react';
+
+export type StatusType = 'error' | 'warning' | 'success' | 'info';
+
+export interface Status {
+  type: StatusType;
+  message: string;
+  code?: string;
+}
+
+interface StatusHookResult {
+  status: Status | null;
+  setStatus: (status: Status | null) => void;
+  clearStatus: () => void;
+  setError: (message: string, code?: string) => void;
+  setWarning: (message: string, code?: string) => void;
+  setSuccess: (message: string, code?: string) => void;
+  setInfo: (message: string, code?: string) => void;
+}
+
+export function useStatus(): StatusHookResult {
+  const [status, setStatus] = useState<Status | null>(null);
+  return {
+    status,
+    setStatus,
+    clearStatus: () => {
+      setStatus(null);
+    },
+    setError: (message, code) => {
+      setStatus({ type: 'error', message, code });
+    },
+    setWarning: (message, code) => {
+      setStatus({ type: 'warning', message, code });
+    },
+    setSuccess: (message, code) => {
+      setStatus({ type: 'success', message, code });
+    },
+    setInfo: (message, code) => {
+      setStatus({ type: 'info', message, code });
+    },
+  };
+}

package/dist/generators/core/react-components/templates/hooks/useToast.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+
+import type React from 'react';
+
+import { useCallback, useMemo } from 'react';
+import { toast } from 'react-hot-toast';
+
+import { AlertIcon, Toast } from '../components/index.js';
+
+interface UseToastResult {
+  error: (message: string) => void;
+  success: (message: string) => void;
+  warning: (message: string) => void;
+  info: (message: string) => void;
+}
+
+export function useToast(): UseToastResult {
+  const showToast = useCallback(
+    (message: string, icon?: React.ReactElement): void => {
+      toast.custom((t) => (
+        <Toast
+          visible={t.visible}
+          icon={icon}
+          onClose={() => {
+            toast.dismiss(t.id);
+          }}
+        >
+          {message}
+        </Toast>
+      ));
+    },
+    [],
+  );
+
+  return useMemo(
+    () => ({
+      error: (message: string) => {
+        showToast(message, <AlertIcon type="error" />);
+      },
+      success: (message: string) => {
+        showToast(message, <AlertIcon type="success" />);
+      },
+      warning: (message: string) => {
+        showToast(message, <AlertIcon type="warning" />);
+      },
+      info: (message: string) => {
+        showToast(message, <AlertIcon type="info" />);
+      },
+    }),
+    [showToast],
+  );
+}

package/dist/generators/core/react-components/templates/index.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+
+TPL_EXPORTS;

package/dist/generators/core/react-config/generated/ts-import-maps.d.ts

@@ -0,0 +1,11 @@
+import type { TsImportMapProviderFromSchema } from '@baseplate-dev/core-generators';
+declare const reactConfigImportsSchema: {
+    config: {};
+};
+type ReactConfigImportsProvider = TsImportMapProviderFromSchema<typeof reactConfigImportsSchema>;
+export declare const reactConfigImportsProvider: import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/core-generators").InferTsImportMapFromSchema<{
+    config: {};
+}>>;
+export declare function createReactConfigImports(importBase: string): ReactConfigImportsProvider;
+export {};
+//# sourceMappingURL=ts-import-maps.d.ts.map

package/dist/generators/core/react-config/generated/ts-import-maps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-import-maps.d.ts","sourceRoot":"","sources":["../../../../../src/generators/core/react-config/generated/ts-import-maps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AASpF,QAAA,MAAM,wBAAwB;;CAA0C,CAAC;AAEzE,KAAK,0BAA0B,GAAG,6BAA6B,CAC7D,OAAO,wBAAwB,CAChC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;GAGpC,CAAC;AAEJ,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,MAAM,GACjB,0BAA0B,CAQ5B"}

package/dist/generators/core/react-config/generated/ts-import-maps.js

@@ -0,0 +1,14 @@
+import { createTsImportMap, createTsImportMapSchema, } from '@baseplate-dev/core-generators';
+import { createReadOnlyProviderType } from '@baseplate-dev/sync';
+import path from 'node:path/posix';
+const reactConfigImportsSchema = createTsImportMapSchema({ config: {} });
+export const reactConfigImportsProvider = createReadOnlyProviderType('react-config-imports');
+export function createReactConfigImports(importBase) {
+    if (!importBase.startsWith('@/')) {
+        throw new Error('importBase must start with @/');
+    }
+    return createTsImportMap(reactConfigImportsSchema, {
+        config: path.join(importBase, 'config.js'),
+    });
+}
+//# sourceMappingURL=ts-import-maps.js.map

package/dist/generators/core/react-config/generated/ts-import-maps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-import-maps.js","sourceRoot":"","sources":["../../../../../src/generators/core/react-config/generated/ts-import-maps.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;AAMzE,MAAM,CAAC,MAAM,0BAA0B,GACrC,0BAA0B,CACxB,sBAAsB,CACvB,CAAC;AAEJ,MAAM,UAAU,wBAAwB,CACtC,UAAkB;IAElB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QACjC,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IACnD,CAAC;IAED,OAAO,iBAAiB,CAAC,wBAAwB,EAAE;QACjD,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;KAC3C,CAAC,CAAC;AACL,CAAC"}

package/dist/generators/core/react-config/generated/ts-templates.d.ts

@@ -0,0 +1,6 @@
+export declare const CORE_REACT_CONFIG_TS_TEMPLATES: {
+    config: import("@baseplate-dev/core-generators").TsTemplateFile<{
+        TPL_CONFIG_SCHEMA: {};
+    }, Record<never, import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/sync").Provider>>>;
+};
+//# sourceMappingURL=ts-templates.d.ts.map

package/dist/generators/core/react-config/generated/ts-templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-templates.d.ts","sourceRoot":"","sources":["../../../../../src/generators/core/react-config/generated/ts-templates.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,8BAA8B;;;;CAAa,CAAC"}

package/dist/generators/core/react-config/generated/ts-templates.js

@@ -0,0 +1,9 @@
+import { createTsTemplateFile } from '@baseplate-dev/core-generators';
+const config = createTsTemplateFile({
+    name: 'config',
+    projectExports: { config: {} },
+    source: { path: 'config.ts' },
+    variables: { TPL_CONFIG_SCHEMA: {} },
+});
+export const CORE_REACT_CONFIG_TS_TEMPLATES = { config };
+//# sourceMappingURL=ts-templates.js.map

package/dist/generators/core/react-config/generated/ts-templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-templates.js","sourceRoot":"","sources":["../../../../../src/generators/core/react-config/generated/ts-templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,MAAM,GAAG,oBAAoB,CAAC;IAClC,IAAI,EAAE,QAAQ;IACd,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7B,SAAS,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE;CACrC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,MAAM,EAAE,CAAC"}

package/dist/generators/core/react-config/react-config.generator.d.ts

@@ -0,0 +1,46 @@
+import type { TsCodeFragment } from '@baseplate-dev/core-generators';
+/**
+ * A single entry in the environment variables for the react app.
+ */
+export interface ReactConfigEntry {
+    /**
+     * A comment to describe the config entry.
+     */
+    comment: string;
+    /**
+     * The Zod validator for the config entry.
+     */
+    validator: TsCodeFragment | string;
+    /**
+     * The default value for the config entry in the .env.development file.
+     */
+    devDefaultValue: string;
+}
+declare const reactConfigProvider: import("@baseplate-dev/sync").ProviderType<Omit<import("@baseplate-dev/utils").FieldMap<{
+    configEntries: import("@baseplate-dev/utils").MapContainer<string, ReactConfigEntry>;
+    additionalDevEnvVars: import("@baseplate-dev/utils").MapContainer<string, string>;
+}>, "getValues">>;
+export { reactConfigProvider };
+export declare const reactConfigGenerator: import("@baseplate-dev/sync").GeneratorBundleCreator<{}, {
+    setup: import("@baseplate-dev/sync").GeneratorTask<import("@baseplate-dev/sync").ProviderExportMap<Record<string, import("@baseplate-dev/sync").Provider>> | undefined, import("@baseplate-dev/sync").ProviderDependencyMap<Record<string, import("@baseplate-dev/sync").Provider>>, import("@baseplate-dev/sync").ProviderExportMap<Record<string, import("@baseplate-dev/sync").Provider>> | undefined>;
+    nodePackages: import("@baseplate-dev/sync").AnyGeneratorTask;
+    setupDefaultConfigEntries: import("@baseplate-dev/sync").GeneratorTask<undefined, {
+        provider: import("@baseplate-dev/sync").ProviderType<Omit<import("@baseplate-dev/utils").FieldMap<{
+            configEntries: import("@baseplate-dev/utils").MapContainer<string, ReactConfigEntry>;
+            additionalDevEnvVars: import("@baseplate-dev/utils").MapContainer<string, string>;
+        }>, "getValues">>;
+    }, undefined>;
+    main: import("@baseplate-dev/sync").GeneratorTask<{
+        reactConfigImports: import("@baseplate-dev/sync").ProviderExport<import("@baseplate-dev/core-generators").InferTsImportMapFromSchema<{
+            config: {};
+        }>>;
+    }, {
+        typescriptFile: import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/core-generators").TypescriptFileProvider>;
+        reactConfigValues: import("@baseplate-dev/sync").ProviderType<import("@baseplate-dev/utils").FieldMapValues<{
+            configEntries: import("@baseplate-dev/utils").MapContainer<string, ReactConfigEntry>;
+            additionalDevEnvVars: import("@baseplate-dev/utils").MapContainer<string, string>;
+        }>>;
+    }, any>;
+}>;
+export { reactConfigImportsProvider } from './generated/ts-import-maps.js';
+//# sourceMappingURL=react-config.generator.d.ts.map

package/dist/generators/core/react-config/react-config.generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-config.generator.d.ts","sourceRoot":"","sources":["../../../../src/generators/core/react-config/react-config.generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA8BrE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,cAAc,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAkB,mBAAmB;;;iBAYlC,CAAC;AAEJ,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;EAqF/B,CAAC;AAEH,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/generators/core/react-config/react-config.generator.js

@@ -0,0 +1,84 @@
+import { createNodePackagesTask, extractPackageVersions, projectScope, tsCodeFragment, TsCodeUtils, tsImportBuilder, typescriptFileProvider, } from '@baseplate-dev/core-generators';
+import { createConfigProviderTask, createGenerator, createGeneratorTask, createProviderTask, } from '@baseplate-dev/sync';
+import { sortBy } from 'es-toolkit';
+import { z } from 'zod';
+import { REACT_PACKAGES } from '#src/constants/react-packages.js';
+import { createReactConfigImports, reactConfigImportsProvider, } from './generated/ts-import-maps.js';
+import { CORE_REACT_CONFIG_TS_TEMPLATES } from './generated/ts-templates.js';
+const descriptorSchema = z.object({});
+const [setupTask, reactConfigProvider, reactConfigValuesProvider] = createConfigProviderTask((t) => ({
+    // The config entries for the react app.
+    configEntries: t.map(),
+    // Extra environment variables for the react app in the .env.development file.
+    additionalDevEnvVars: t.map(),
+}), {
+    prefix: 'react-config',
+    configScope: projectScope,
+});
+export { reactConfigProvider };
+export const reactConfigGenerator = createGenerator({
+    name: 'core/react-config',
+    generatorFileUrl: import.meta.url,
+    descriptorSchema,
+    buildTasks: () => ({
+        setup: setupTask,
+        nodePackages: createNodePackagesTask({
+            prod: extractPackageVersions(REACT_PACKAGES, ['zod']),
+        }),
+        setupDefaultConfigEntries: createProviderTask(reactConfigProvider, (reactConfig) => {
+            reactConfig.configEntries.set('VITE_ENVIRONMENT', {
+                comment: 'Environment the app is running in',
+                validator: tsCodeFragment(`z.enum(['development', 'test', 'staging', 'production'])`, tsImportBuilder(['z']).from('zod')),
+                devDefaultValue: 'development',
+            });
+        }),
+        main: createGeneratorTask({
+            dependencies: {
+                typescriptFile: typescriptFileProvider,
+                reactConfigValues: reactConfigValuesProvider,
+            },
+            exports: {
+                reactConfigImports: reactConfigImportsProvider.export(projectScope),
+            },
+            run({ typescriptFile, reactConfigValues: { configEntries, additionalDevEnvVars }, }) {
+                return {
+                    providers: {
+                        reactConfigImports: createReactConfigImports('@/src/services'),
+                    },
+                    build: async (builder) => {
+                        const sortedConfigEntries = sortBy([...configEntries], [(entry) => entry[0]]);
+                        const sortedConfigFields = sortedConfigEntries.map(([key, { comment, validator }]) => TsCodeUtils.template `${comment ? `${TsCodeUtils.formatAsComment(comment)}\n` : ''}${key}: ${validator},`);
+                        await builder.apply(typescriptFile.renderTemplateFile({
+                            template: CORE_REACT_CONFIG_TS_TEMPLATES.config,
+                            destination: 'src/services/config.ts',
+                            variables: {
+                                TPL_CONFIG_SCHEMA: TsCodeUtils.template `{
+                  ${TsCodeUtils.mergeFragmentsPresorted(sortedConfigFields, '\n')}
+              }`,
+                            },
+                        }));
+                        const devEnvVars = [
+                            ...sortedConfigEntries.map(([key, { devDefaultValue }]) => [
+                                key,
+                                devDefaultValue,
+                            ]),
+                            ...sortBy([...additionalDevEnvVars], [([key]) => key]),
+                        ];
+                        if (devEnvVars.length > 0) {
+                            const developmentEnvFile = `${devEnvVars
+                                .map(([name, value]) => `${name}=${value}`)
+                                .join('\n')}\n`;
+                            builder.writeFile({
+                                id: 'development-env',
+                                destination: '.env.development',
+                                contents: developmentEnvFile,
+                            });
+                        }
+                    },
+                };
+            },
+        }),
+    }),
+});
+export { reactConfigImportsProvider } from './generated/ts-import-maps.js';
+//# sourceMappingURL=react-config.generator.js.map

package/dist/generators/core/react-config/react-config.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-config.generator.js","sourceRoot":"","sources":["../../../../src/generators/core/react-config/react-config.generator.ts"],"names":[],"mappings":"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"}