@baseplate-dev/react-generators 0.1.1

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

@@ -0,0 +1,88 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import * as React from 'react';
+
+import type { UseConfirmDialogRequestOptions } from '../../hooks/useConfirmDialog.js';
+
+import { useConfirmDialogState } from '../../hooks/useConfirmDialog.js';
+import Button from '../Button/index.js';
+import Modal from '../Modal/index.js';
+
+/**
+ * A confirm dialog that is placed at the top level of the page
+ * enabling the use of the useConfirmDialog hook.
+ */
+export function ConfirmDialog(): ReactElement {
+  const { confirmOptions, setConfirmOptions } = useConfirmDialogState();
+
+  // We need to store the text content in a ref because the Dialog component
+  // will transition to fade so we need to cache the text while we close.
+  const textOptionsCached =
+    React.useRef<
+      Omit<UseConfirmDialogRequestOptions, 'onConfirm' | 'onCancel'>
+    >(undefined);
+
+  React.useEffect(() => {
+    if (confirmOptions) {
+      textOptionsCached.current = {
+        title: confirmOptions.title,
+        content: confirmOptions.content,
+        buttonCancelText: confirmOptions.buttonCancelText,
+        buttonConfirmText: confirmOptions.buttonConfirmText,
+        buttonConfirmColor: confirmOptions.buttonConfirmColor,
+      };
+    }
+  }, [confirmOptions]);
+
+  const {
+    title,
+    content,
+    onCancel,
+    onConfirm,
+    buttonCancelText = 'Cancel',
+    buttonConfirmText = 'Confirm',
+    buttonConfirmColor,
+  } = {
+    ...textOptionsCached.current,
+    ...confirmOptions,
+  };
+
+  return (
+    <Modal
+      isOpen={!!confirmOptions}
+      onClose={() => {
+        setConfirmOptions(undefined);
+      }}
+      width="small"
+    >
+      <Modal.Header>{title}</Modal.Header>
+      <Modal.Body>{content}</Modal.Body>
+      <Modal.Footer>
+        <Button
+          color="light"
+          onClick={(e) => {
+            onCancel?.(e);
+            if (e.defaultPrevented) return;
+            setConfirmOptions(undefined);
+          }}
+        >
+          {buttonCancelText}
+        </Button>
+        <Button
+          onClick={(e) => {
+            onConfirm?.(e);
+            if (e.defaultPrevented) return;
+            setConfirmOptions(undefined);
+          }}
+          color={buttonConfirmColor}
+        >
+          {buttonConfirmText}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export default ConfirmDialog;

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

@@ -0,0 +1,52 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+import React from 'react';
+import { MdOutlineErrorOutline } from 'react-icons/md';
+
+interface ErrorDisplayProps {
+  /**
+   * Optional class name to be applied to the loader or error div
+   */
+  className?: string;
+  /**
+   * Header to be displayed (if not passed, a generic error header will be displayed)
+   */
+  header?: string;
+  /**
+   * Error to be displayed (if a string is passed, it will be displayed as-is, otherwise a generic error message will be displayed)
+   */
+  error?: unknown;
+  /**
+   * Optional actions to be displayed below the error message
+   */
+  actions?: React.ReactNode;
+}
+
+function ErrorDisplay({
+  className,
+  header,
+  error,
+  actions,
+}: ErrorDisplayProps): ReactElement {
+  return (
+    <div className={clsx('flex h-full items-center justify-center', className)}>
+      <div className="flex max-w-xl flex-col items-center space-y-4 text-center">
+        <div>
+          <MdOutlineErrorOutline className="text-foreground-300 dark:text-foreground-700 h-20 w-20" />
+        </div>
+        <h1>{header ?? 'Sorry, something went wrong'}</h1>
+        <p className="text-base">
+          {typeof error === 'string' || React.isValidElement(error)
+            ? error
+            : 'We encountered an error showing this page.'}
+        </p>
+        {actions}
+      </div>
+    </div>
+  );
+}
+
+export default ErrorDisplay;

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

@@ -0,0 +1,31 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import Alert from '../Alert/index.js';
+import Spinner from '../Spinner/index.js';
+
+interface Props {
+  className?: string;
+  error?: Error | string | null;
+}
+
+function getErrorString(error: Error | string): string {
+  if (error instanceof Error) {
+    return 'Sorry, we could not load the data.';
+  }
+  return error;
+}
+
+function ErrorableLoader({ className, error }: Props): ReactElement {
+  if (!error) {
+    return <Spinner className={className} size="large" center />;
+  }
+  return (
+    <Alert type="error" className={className}>
+      {getErrorString(error)}
+    </Alert>
+  );
+}
+
+export default ErrorableLoader;

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

@@ -0,0 +1,22 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function FormError({ className, children }: Props): ReactElement {
+  return (
+    <div
+      className={clsx('mt-2 text-sm text-red-600 dark:text-red-500', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default FormError;

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function FormLabel({ className, children }: Props): ReactElement {
+  return (
+    <div
+      className={clsx(
+        'mb-2 text-sm font-semibold text-gray-900 dark:text-gray-300',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default FormLabel;

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

@@ -0,0 +1,54 @@
+// @ts-nocheck
+
+import type React from 'react';
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler;
+  type?: 'button' | 'submit' | 'reset';
+  negative?: boolean;
+  disabled?: boolean;
+}
+
+function LinkButton({
+  className,
+  children,
+  onClick,
+  type = 'button',
+  negative,
+  disabled,
+}: Props): ReactElement {
+  const colorClass = (() => {
+    if (disabled) {
+      return 'text-gray-400 dark:text-gray-500';
+    }
+    if (negative) {
+      return 'text-red-600 dark:text-red-500';
+    }
+    return 'text-blue-600 dark:text-blue-500';
+  })();
+
+  return (
+    <button
+      className={clsx(
+        'font-medium',
+        { 'hover:underline': !disabled },
+        colorClass,
+        className,
+      )}
+      // a type is being provided but eslint doesn't know
+
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default LinkButton;

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

@@ -0,0 +1,48 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+}
+
+// based off https://flowbite.com/docs/components/list-group/
+
+function ListGroup({ className, children }: Props): ReactElement {
+  return (
+    <ul
+      className={clsx(
+        'rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white',
+        className,
+      )}
+    >
+      {children}
+    </ul>
+  );
+}
+
+interface ListGroupItemProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+ListGroup.Item = function ListGroupItem({
+  className,
+  children,
+}: ListGroupItemProps): ReactElement {
+  return (
+    <li
+      className={clsx(
+        'w-full border-b border-gray-200 px-4 py-2 last:border-none dark:border-gray-600',
+        className,
+      )}
+    >
+      {children}
+    </li>
+  );
+};
+
+export default ListGroup;

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

@@ -0,0 +1,167 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
+import clsx from 'clsx';
+import { Fragment } from 'react';
+
+type ModalWidth = 'small' | 'base' | 'large';
+
+interface Props {
+  className?: string;
+  isOpen?: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  width?: ModalWidth;
+}
+
+// Adapted from https://flowbite.com/docs/components/modal/
+
+function getModalWidthClass(width: ModalWidth): string {
+  switch (width) {
+    case 'small': {
+      return 'w-72 md:w-72';
+    }
+    case 'base': {
+      return 'w-72 md:w-[50rem]';
+    }
+    case 'large': {
+      return 'w-72 md:w-[80rem]';
+    }
+    default: {
+      throw new Error(`Unknown modal width: ${width as string}`);
+    }
+  }
+}
+
+function Modal({
+  className,
+  isOpen,
+  onClose,
+  children,
+  width = 'base',
+}: Props): ReactElement {
+  return (
+    <Transition show={isOpen} as={Fragment}>
+      <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+        <TransitionChild
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+        </TransitionChild>
+        <div className="fixed inset-0 flex items-center justify-center p-4">
+          <TransitionChild
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <DialogPanel
+              className={clsx(
+                'max-h-full overflow-y-auto rounded-lg bg-white shadow md:max-w-7xl',
+                getModalWidthClass(width),
+                className,
+              )}
+            >
+              {children}
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}
+
+interface ModalHeaderProps {
+  className?: string;
+  children: React.ReactNode;
+  onClose?: () => void;
+}
+
+Modal.Header = function ModalHeader({
+  className,
+  children,
+  onClose,
+}: ModalHeaderProps): ReactElement {
+  return (
+    <div
+      className={clsx(
+        'flex items-start justify-between rounded-t px-4 pt-4',
+        className,
+      )}
+    >
+      <DialogTitle>{children}</DialogTitle>
+      {onClose && (
+        <button
+          type="button"
+          className="-m-1.5 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900"
+          onClick={onClose}
+        >
+          <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>
+  );
+};
+
+interface ModalBodyProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+Modal.Body = function ModalBody({
+  className,
+  children,
+}: ModalBodyProps): ReactElement {
+  return <div className={clsx('p-4', className)}>{children}</div>;
+};
+
+interface ModalFooterProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+Modal.Footer = function ModalFooter({
+  className,
+  children,
+}: ModalFooterProps): ReactElement {
+  return (
+    <div
+      className={clsx(
+        'flex items-center justify-end space-x-2 rounded-b bg-gray-50 p-4',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Modal;

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

@@ -0,0 +1,32 @@
+// @ts-nocheck
+
+import type { ReactElement } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+
+import Button from '../Button/index.js';
+import Card from '../Card/index.js';
+
+function NotFoundCard(): ReactElement {
+  const navigate = useNavigate();
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Card padding className="flex flex-col items-center space-y-4">
+        <div className="text-8xl">404</div>
+        <div className="text-xl font-bold">Page Not Found</div>
+        <p className="text-center text-gray-600">
+          Sorry, we were unable to find the page you were looking for.
+        </p>
+        <Button
+          onClick={() => {
+            navigate('/');
+          }}
+        >
+          Back to Home
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+export default NotFoundCard;

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

@@ -0,0 +1,162 @@
+// @ts-nocheck
+
+import type {
+  FocusEventHandler,
+  KeyboardEventHandler,
+  ReactElement,
+} from 'react';
+import type {
+  ChangeHandler,
+  Control,
+  FieldPath,
+  FieldPathValue,
+  FieldValues,
+  RefCallBack,
+  UseFormRegisterReturn,
+} from 'react-hook-form';
+
+import { format, parseISO } from 'date-fns';
+import { forwardRef, useMemo } from 'react';
+import DatePicker from 'react-datepicker';
+import { useController } from 'react-hook-form';
+
+import FormError from '../FormError/index.js';
+import FormLabel from '../FormLabel/index.js';
+import TextInput from '../TextInput/index.js';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+interface Props {
+  className?: string;
+  onChange: (newValue?: string | null) => void;
+  onBlur?: () => void;
+  value: string | null;
+  showTimeSelect?: boolean;
+  isClearable?: boolean;
+}
+
+const DatePickerTextInput = forwardRef<
+  HTMLInputElement,
+  {
+    onChange?: ChangeHandler;
+    onClick?: () => void;
+    onBlur?: ChangeHandler;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    value?: string;
+    placeholder?: string;
+    name?: string;
+  }
+>(({ onChange, onBlur, name, ...rest }, ref) => (
+  <TextInput
+    register={
+      {
+        ref: ref as RefCallBack,
+        onChange,
+        onBlur,
+        name,
+      } as UseFormRegisterReturn
+    }
+    {...rest}
+  />
+));
+
+DatePickerTextInput.displayName = 'DatePickerTextInput';
+
+function ReactDatePickerInput({
+  className,
+  onChange,
+  onBlur,
+  value,
+  showTimeSelect,
+  isClearable,
+}: Props): ReactElement {
+  const selectedDate = useMemo(() => (value ? parseISO(value) : null), [value]);
+  return (
+    <DatePicker
+      className={className}
+      onChange={(date) => {
+        onChange(
+          date &&
+            (showTimeSelect ? date.toISOString() : format(date, 'yyyy-MM-dd')),
+        );
+      }}
+      onBlur={onBlur}
+      selected={selectedDate}
+      customInput={<DatePickerTextInput />}
+      showTimeSelect={showTimeSelect}
+      timeFormat="HH:mm"
+      showPopperArrow
+      dateFormat={showTimeSelect ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'}
+      isClearable={isClearable}
+      placeholderText="Select a date"
+    />
+  );
+}
+
+interface ReactDatePickerInputLabelledProps extends Props {
+  label?: React.ReactNode;
+  error?: React.ReactNode;
+}
+
+ReactDatePickerInput.Labelled = function ReactDatePickerInputLabelled({
+  label,
+  className,
+  error,
+  ...rest
+}: ReactDatePickerInputLabelledProps): ReactElement {
+  return (
+    <div className={className}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <ReactDatePickerInput {...rest} />
+      {error && <FormError>{error}</FormError>}
+    </div>
+  );
+};
+
+interface ReactDatePickerInputLabelledControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<
+    ReactDatePickerInputLabelledProps,
+    'onChange' | 'onBlur' | 'value' | 'error'
+  > {
+  className?: string;
+  control: Control<TFieldValues>;
+  name: TFieldName;
+}
+
+ReactDatePickerInput.LabelledController =
+  function ReactDatePickerInputController<
+    TFieldValues extends FieldValues = FieldValues,
+    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  >({
+    name,
+    control,
+    ...rest
+  }: ReactDatePickerInputLabelledControllerProps<
+    TFieldValues,
+    TFieldName
+  >): ReactElement {
+    const {
+      field,
+      fieldState: { error },
+    } = useController({
+      name,
+      control,
+    });
+
+    return (
+      <ReactDatePickerInput.Labelled
+        {...rest}
+        error={error?.message}
+        onChange={(val) => {
+          field.onChange(val as FieldPathValue<TFieldValues, TFieldName>);
+        }}
+        onBlur={field.onBlur}
+        value={field.value as string}
+      />
+    );
+  };
+
+export default ReactDatePickerInput;