@baseplate-dev/react-generators 0.1.1

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

@@ -0,0 +1,126 @@
+import { createNodePackagesTask, extractPackageVersions, projectScope, tsCodeFragment, tsImportBuilder, typescriptFileProvider, } from '@baseplate-dev/core-generators';
+import { createGenerator, createGeneratorTask, createProviderType, } from '@baseplate-dev/sync';
+import { z } from 'zod';
+import { REACT_PACKAGES } from '#src/constants/react-packages.js';
+import { reactAppConfigProvider } from '../react-app/react-app.generator.js';
+import { createReactComponentsImports, reactComponentsImportsProvider, } from './generated/ts-import-maps.js';
+import { CORE_REACT_COMPONENTS_TS_TEMPLATES } from './generated/ts-templates.js';
+const descriptorSchema = z.object({
+    includeDatePicker: z.boolean().optional(),
+});
+const REACT_COMPONENTS = [
+    { name: 'Alert' },
+    { name: 'AlertIcon' },
+    { name: 'BackButton' },
+    { name: 'Button' },
+    { name: 'ButtonGroup' },
+    { name: 'Card' },
+    { name: 'CheckedInput' },
+    { name: 'ConfirmDialog' },
+    { name: 'ErrorDisplay' },
+    { name: 'ErrorableLoader' },
+    { name: 'FormError' },
+    { name: 'FormLabel' },
+    { name: 'LinkButton' },
+    { name: 'ListGroup' },
+    { name: 'Modal' },
+    { name: 'NotFoundCard' },
+    { name: 'ReactSelectInput' },
+    { name: 'SelectInput' },
+    { name: 'Sidebar' },
+    { name: 'Spinner' },
+    { name: 'Table' },
+    { name: 'TextAreaInput' },
+    { name: 'TextInput' },
+    { name: 'Toast' },
+];
+export const reactComponentsProvider = createProviderType('react-components');
+export const reactComponentsGenerator = createGenerator({
+    name: 'core/react-components',
+    generatorFileUrl: import.meta.url,
+    descriptorSchema,
+    buildTasks: ({ includeDatePicker }) => ({
+        nodePackages: createNodePackagesTask({
+            prod: extractPackageVersions(REACT_PACKAGES, [
+                '@headlessui/react',
+                '@hookform/resolvers',
+                'clsx',
+                'react-hook-form',
+                'react-hot-toast',
+                'react-icons',
+                'react-select',
+                'zustand',
+            ]),
+        }),
+        datePickerPackages: includeDatePicker
+            ? createNodePackagesTask({
+                prod: extractPackageVersions(REACT_PACKAGES, [
+                    'react-datepicker',
+                    'date-fns',
+                ]),
+            })
+            : undefined,
+        main: createGeneratorTask({
+            dependencies: {
+                typescriptFile: typescriptFileProvider,
+                reactAppConfig: reactAppConfigProvider,
+            },
+            exports: {
+                reactComponents: reactComponentsProvider.export(projectScope),
+                reactComponentsImports: reactComponentsImportsProvider.export(projectScope),
+            },
+            run({ typescriptFile, reactAppConfig }) {
+                const coreReactComponents = [...REACT_COMPONENTS];
+                if (includeDatePicker) {
+                    coreReactComponents.push({ name: 'ReactDatePickerInput' });
+                }
+                const allReactComponents = [...coreReactComponents];
+                // add toaster root sibling component
+                reactAppConfig.renderSiblings.set('react-hot-toast', tsCodeFragment('<Toaster />', tsImportBuilder(['Toaster']).from('react-hot-toast')));
+                // add confirm dialog root sibling component
+                reactAppConfig.renderSiblings.set('react-components', tsCodeFragment('<ConfirmDialog />', tsImportBuilder(['ConfirmDialog']).from('@/src/components/index.js')));
+                return {
+                    providers: {
+                        reactComponents: {
+                            registerComponent: (entry) => allReactComponents.push(entry),
+                            getComponentsFolder: () => `@/src/components`,
+                        },
+                        reactComponentsImports: createReactComponentsImports('@/src'),
+                    },
+                    build: async (builder) => {
+                        await builder.apply(typescriptFile.renderTemplateGroup({
+                            group: CORE_REACT_COMPONENTS_TS_TEMPLATES.componentsGroup,
+                            baseDirectory: '@/src/components',
+                        }));
+                        await builder.apply(typescriptFile.renderTemplateGroup({
+                            group: CORE_REACT_COMPONENTS_TS_TEMPLATES.hooksGroup,
+                            baseDirectory: '@/src/hooks',
+                        }));
+                        if (includeDatePicker) {
+                            await builder.apply(typescriptFile.renderTemplateFile({
+                                template: CORE_REACT_COMPONENTS_TS_TEMPLATES.reactDatePickerInput,
+                                destination: `src/components/ReactDatePickerInput/index.tsx`,
+                            }));
+                        }
+                        // build component index
+                        const componentNames = allReactComponents
+                            .toSorted((a, b) => a.name.localeCompare(b.name))
+                            .map((entry) => entry.name);
+                        const componentIndex = componentNames
+                            .map((name) => `export { default as ${name} } from './${name}';`)
+                            .join('\n');
+                        await builder.apply(typescriptFile.renderTemplateFile({
+                            template: CORE_REACT_COMPONENTS_TS_TEMPLATES.index,
+                            destination: `src/components/index.ts`,
+                            variables: {
+                                TPL_EXPORTS: componentIndex,
+                            },
+                        }));
+                    },
+                };
+            },
+        }),
+    }),
+});
+export { reactComponentsImportsProvider, } from './generated/ts-import-maps.js';
+//# sourceMappingURL=react-components.generator.js.map

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

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

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

@@ -0,0 +1,76 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+import type { Status, StatusType } from '../../hooks/useStatus.js';
+
+import AlertIcon from '../AlertIcon/index.js';
+
+interface Props {
+  type: StatusType;
+  icon?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}
+
+function getAlertClasses(type: StatusType): string {
+  switch (type) {
+    case 'error': {
+      return 'text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800';
+    }
+    case 'info': {
+      return 'text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800';
+    }
+    case 'success': {
+      return 'text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800';
+    }
+    case 'warning': {
+      return 'text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800';
+    }
+    default: {
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      throw new Error(`Unknown status type: ${type}`);
+    }
+  }
+}
+
+// https://flowbite.com/docs/components/alerts/
+
+function Alert({ type, icon, className, children }: Props): ReactElement {
+  const alertClasses = getAlertClasses(type);
+  return (
+    <div
+      className={clsx(
+        'flex items-center rounded-lg p-4',
+        alertClasses,
+        className,
+      )}
+      role="alert"
+    >
+      {icon === undefined ? <AlertIcon className="mr-2" type={type} /> : icon}
+      <div>{children}</div>
+    </div>
+  );
+}
+
+interface AlertWithStatusProps extends Omit<Props, 'children' | 'type'> {
+  status: Status | null;
+}
+
+Alert.WithStatus = function AlertWithStatus({
+  status,
+  ...props
+}: AlertWithStatusProps): ReactElement | null {
+  if (!status) {
+    return null;
+  }
+  return (
+    <Alert type={status.type} {...props}>
+      {status.message}
+    </Alert>
+  );
+};
+
+export default Alert;

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

@@ -0,0 +1,75 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+import type { IconType } from 'react-icons';
+
+import clsx from 'clsx';
+import {
+  MdCheckCircleOutline,
+  MdErrorOutline,
+  MdOutlineInfo,
+  MdOutlineWarningAmber,
+} from 'react-icons/md';
+
+import type { StatusType } from '../../hooks/useStatus.js';
+
+interface Props {
+  className?: string;
+  type: StatusType;
+}
+
+function getAlertClassAndIcon(type: StatusType): {
+  colorClasses: string;
+  Icon: IconType;
+} {
+  switch (type) {
+    case 'error': {
+      return {
+        colorClasses:
+          'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+        Icon: MdErrorOutline,
+      };
+    }
+    case 'info': {
+      return {
+        colorClasses:
+          'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+        Icon: MdOutlineInfo,
+      };
+    }
+    case 'success': {
+      return {
+        colorClasses:
+          'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+        Icon: MdCheckCircleOutline,
+      };
+    }
+    case 'warning': {
+      return {
+        colorClasses: 'text-orange-500 bg-orange-100 dark:bg-orange-700',
+        Icon: MdOutlineWarningAmber,
+      };
+    }
+    default: {
+      throw new Error(`Unknown status type: ${type as string}`);
+    }
+  }
+}
+
+function AlertIcon({ className, type }: Props): ReactElement {
+  const { colorClasses, Icon } = getAlertClassAndIcon(type);
+
+  return (
+    <div
+      className={clsx(
+        'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg',
+        colorClasses,
+        className,
+      )}
+    >
+      <Icon className="h-5 w-5" />
+    </div>
+  );
+}
+
+export default AlertIcon;

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

@@ -0,0 +1,35 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import { MdArrowBack } from 'react-icons/md';
+import { useNavigate } from 'react-router-dom';
+
+import LinkButton from '../LinkButton/index.js';
+
+interface Props {
+  className?: string;
+  href?: string;
+}
+
+function BackButton({ className, href }: Props): ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <LinkButton
+      className={className}
+      onClick={() => {
+        if (href) {
+          navigate(href);
+        } else {
+          navigate(-1);
+        }
+      }}
+    >
+      <MdArrowBack className="h-6 w-6 text-gray-600" />
+      <span className="sr-only">Back</span>
+    </LinkButton>
+  );
+}
+
+export default BackButton;

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

@@ -0,0 +1,99 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+type ButtonColor = 'blue' | 'green' | 'red' | 'light' | 'dark';
+
+type ButtonSize = 'small' | 'base' | 'large';
+
+export interface ButtonProps {
+  className?: string;
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+  color?: ButtonColor;
+  size?: ButtonSize;
+  type?: 'button' | 'submit' | 'reset';
+  icon?: React.ReactNode;
+}
+
+function getButtonColorClass(color: ButtonColor): string {
+  switch (color) {
+    case 'blue': {
+      return 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300';
+    }
+    case 'green': {
+      return 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300';
+    }
+    case 'red': {
+      return 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300';
+    }
+    case 'light': {
+      return 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200';
+    }
+    case 'dark': {
+      return 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300';
+    }
+    default: {
+      throw new Error(`Unknown button color: ${color as string}`);
+    }
+  }
+}
+
+function getButtonSizeClass(size: ButtonSize): string {
+  switch (size) {
+    case 'small': {
+      return 'px-3 py-2 text-sm';
+    }
+    case 'base': {
+      return 'px-5 py-2.5 text-sm';
+    }
+    case 'large': {
+      return 'px-5 py-3 text-base';
+    }
+    default: {
+      throw new Error(`Unknown button size: ${size as string}`);
+    }
+  }
+}
+
+function Button(props: ButtonProps): ReactElement {
+  const {
+    className,
+    children,
+    disabled,
+    size = 'base',
+    color = 'blue',
+    type = 'button',
+    onClick,
+    icon,
+  } = props;
+  return (
+    <button
+      className={clsx(
+        'rounded-lg text-center font-medium focus:outline-none focus:ring-4 disabled:cursor-not-allowed disabled:bg-opacity-50',
+        getButtonColorClass(color),
+        getButtonSizeClass(size),
+        className,
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      // a type is being provided but eslint doesn't know
+
+      type={type}
+    >
+      {icon ? (
+        <div className="flex flex-row items-center space-x-2">
+          {icon}
+          <div>{children}</div>
+        </div>
+      ) : (
+        children
+      )}
+    </button>
+  );
+}
+
+export default Button;

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

@@ -0,0 +1,52 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+// adapted from https://flowbite.com/docs/components/button-group/
+
+function ButtonGroup({ className, children }: Props): ReactElement {
+  return (
+    <div
+      className={clsx('inline-flex rounded-md shadow-sm', className)}
+      role="group"
+    >
+      {children}
+    </div>
+  );
+}
+
+interface ButtonGroupButtonProps {
+  className?: string;
+  children: React.ReactNode;
+  type?: 'button' | 'submit' | 'reset';
+  onClick?: () => void;
+}
+
+ButtonGroup.Button = function ButtonGroupButton({
+  className,
+  children,
+  type,
+  onClick,
+}: ButtonGroupButtonProps): ReactElement {
+  return (
+    <button
+      className={clsx(
+        'border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 first:rounded-l-lg first:border last:rounded-r-lg last:border hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700',
+        className,
+      )}
+      type={type}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default ButtonGroup;

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

@@ -0,0 +1,27 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  padding?: boolean;
+}
+
+function Card({ className, padding, children }: Props): ReactElement {
+  return (
+    <div
+      className={clsx(
+        'max-w-sm rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800',
+        { 'sm:p-6 lg:p-8': padding },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Card;

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

@@ -0,0 +1,130 @@
+// @ts-nocheck
+
+import type { ReactElement } 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;
+  name?: string;
+  disabled?: boolean;
+  onChange?: (checked: boolean, value?: string) => void;
+  checked?: boolean;
+  value?: string;
+  type?: 'checkbox' | 'radio';
+  register?: UseFormRegisterReturn;
+}
+
+function CheckedInput({
+  className,
+  name,
+  disabled,
+  onChange,
+  checked,
+  value,
+  register,
+  type = 'checkbox',
+}: Props): ReactElement {
+  const onChangeHandler =
+    onChange &&
+    ((event: React.ChangeEvent<HTMLInputElement>): void => {
+      onChange(event.target.checked, event.target.value);
+    });
+
+  const inputProps = {
+    name,
+    disabled,
+    onChange: onChangeHandler,
+    checked,
+    value,
+    type,
+    ...register,
+  };
+  return (
+    <input
+      className={clsx(
+        'h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500',
+        { rounded: type === 'checkbox' },
+        className,
+      )}
+      {...inputProps}
+    />
+  );
+}
+
+interface CheckedInputLabelledProps extends Props {
+  label?: string;
+  error?: React.ReactNode;
+  horizontalLabel?: boolean;
+}
+
+CheckedInput.Labelled = function SelectInputLabelled({
+  label,
+  className,
+  error,
+  horizontalLabel,
+  ...rest
+}: CheckedInputLabelledProps): ReactElement {
+  if (horizontalLabel) {
+    return (
+      <div>
+        <label className={clsx('flex cursor-pointer items-center', className)}>
+          <CheckedInput {...rest} />
+          {label && (
+            <div className="ml-2 w-full py-3 text-sm font-medium text-gray-900">
+              {label}
+            </div>
+          )}
+        </label>
+        {error && <FormError>{error}</FormError>}
+      </div>
+    );
+  }
+  return (
+    <label className={clsx('block', className)}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <CheckedInput {...rest} />
+      {error && <FormError>{error}</FormError>}
+    </label>
+  );
+};
+
+export interface CheckedInputLabelledControllerProps<T extends FieldValues>
+  extends Omit<CheckedInputLabelledProps, 'register'> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  noError?: boolean;
+}
+
+CheckedInput.LabelledController = function CheckedInputLabelledController<
+  T extends FieldValues,
+>({
+  control,
+  name,
+  noError,
+  ...rest
+}: CheckedInputLabelledControllerProps<T>): ReactElement {
+  const { errors } = useFormState({ control, name });
+  const error = get(errors, name) as FieldError | undefined;
+
+  return (
+    <CheckedInput.Labelled
+      register={control.register(name)}
+      error={noError ? undefined : error?.message}
+      {...rest}
+    />
+  );
+};
+
+export default CheckedInput;