@baseplate-dev/react-generators 0.1.3 → 0.2.0

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

@@ -1,130 +0,0 @@
-// @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;

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

@@ -1,88 +0,0 @@
-// @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/ErrorableLoader/index.tsx

@@ -1,31 +0,0 @@
-// @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

@@ -1,22 +0,0 @@
-// @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

@@ -1,25 +0,0 @@
-// @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

@@ -1,54 +0,0 @@
-// @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

@@ -1,48 +0,0 @@
-// @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

@@ -1,167 +0,0 @@
-// @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

@@ -1,32 +0,0 @@
-// @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;