@a-type/ui 0.3.1 → 0.3.3

package/src/components/errorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,23 @@
+'use client';
+import React, { Component, ReactNode } from 'react';
+
+export class ErrorBoundary extends Component<
+	{ children: ReactNode; fallback?: ReactNode },
+	{ error: Error | null }
+> {
+	state = {
+		error: null,
+	};
+
+	static getDerivedStateFromError(error: Error) {
+		// Update state so the next render will show the fallback UI.
+		return { error };
+	}
+
+	render() {
+		if (this.state.error) {
+			return this.props.fallback || null;
+		}
+		return this.props.children;
+	}
+}

package/src/components/errorBoundary/index.ts

@@ -0,0 +1 @@
+export * from './ErrorBoundary.js';

package/src/components/errorBoundary.ts

@@ -0,0 +1 @@
+export * from './errorBoundary/index.js';

package/src/components/forms/Form.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { Form as FormikForm } from 'formik';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const Form = withClassName(
+	FormikForm,
+	'flex flex-col gap-2 items-start',
+);

package/src/components/forms/FormikForm.tsx

@@ -0,0 +1,41 @@
+import { Formik, FormikConfig, FormikHelpers, FormikValues } from 'formik';
+import { Form } from './Form.js';
+import { useCallback } from 'react';
+
+export interface FormikFormProps<T extends FormikValues = FormikValues>
+  extends FormikConfig<T> {
+  className?: string;
+}
+
+export function FormikForm<Values extends FormikValues>({
+  className,
+  children,
+  onSubmit,
+  ...props
+}: FormikFormProps<Values>) {
+  const wrappedOnSubmit = useCallback(
+    async (values: Values, bag: FormikHelpers<Values>) => {
+      try {
+        bag.setSubmitting(true);
+        return await onSubmit(values, bag);
+      } finally {
+        bag.setSubmitting(false);
+      }
+    },
+    [onSubmit],
+  );
+
+  if (typeof children === 'function') {
+    return (
+      <Formik<Values> onSubmit={wrappedOnSubmit} {...props}>
+        {(formik) => <Form className={className}>{children(formik)}</Form>}
+      </Formik>
+    );
+  }
+
+  return (
+    <Formik<Values> onSubmit={wrappedOnSubmit} {...props}>
+      <Form className={className}>{children}</Form>
+    </Formik>
+  );
+}

package/src/components/forms/SubmitButton.tsx

@@ -0,0 +1,15 @@
+import { useFormikContext } from 'formik';
+import { Button, ButtonProps } from '../button/Button.js';
+
+export function SubmitButton(props: ButtonProps) {
+	const { isSubmitting, isValid } = useFormikContext();
+	return (
+		<Button
+			loading={isSubmitting}
+			disabled={!isValid}
+			color="primary"
+			type="submit"
+			{...props}
+		/>
+	);
+}

package/src/components/forms/TextField.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useField } from 'formik';
+import {
+  ComponentProps,
+  InputHTMLAttributes,
+  useEffect,
+  useRef,
+  Ref,
+  forwardRef,
+} from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import classNames from 'classnames';
+import { Input } from '../input/Input.js';
+import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
+import { withClassName } from '../../hooks.js';
+
+export type TextFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  type?: InputHTMLAttributes<HTMLInputElement>['type'];
+  className?: string;
+  placeholder?: string;
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
+  autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
+  autoFocusDelay?: number;
+  inputRef?: Ref<HTMLInputElement>;
+} & ComponentProps<typeof Input>;
+
+const emptyRef = (() => {}) as any;
+
+export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
+  function TextField(
+    {
+      name,
+      label,
+      className,
+      autoFocusDelay,
+      autoFocus,
+      inputRef,
+      onChange,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) {
+    const [props] = useField({
+      name,
+      onChange,
+      onFocus,
+      onBlur,
+    });
+    const innerInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      if (autoFocusDelay) {
+        setTimeout(() => {
+          if (innerInputRef.current) innerInputRef.current.focus();
+        }, autoFocusDelay);
+      }
+    }, [autoFocusDelay]);
+
+    return (
+      <FieldRoot className={className} ref={ref}>
+        {label && <FieldLabel>{label}</FieldLabel>}
+        <Input
+          {...props}
+          {...rest}
+          autoFocus={autoFocus}
+          ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
+        />
+      </FieldRoot>
+    );
+  },
+);
+
+export type TextAreaFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  rows?: number;
+  disabled?: boolean;
+  className?: string;
+  inputRef?: Ref<HTMLTextAreaElement>;
+} & TextAreaProps;
+
+export function TextAreaField({
+  name,
+  label,
+  className,
+  inputRef,
+  ...rest
+}: TextAreaFieldProps) {
+  const [props] = useField(name);
+  return (
+    <FieldRoot className={className}>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <TextArea ref={inputRef} {...props} {...rest} />
+    </FieldRoot>
+  );
+}
+
+const FieldRoot = withClassName(
+  'div',
+  'flex flex-col items-stretch gap-1 self-stretch',
+);
+const FieldLabel = withClassName(
+  'label',
+  'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
+);

package/src/components/forms/index.tsx

@@ -0,0 +1,4 @@
+export * from './Form.js';
+export * from './SubmitButton.js';
+export * from './TextField.js';
+export * from './FormikForm.js';

package/src/components/forms.ts

@@ -0,0 +1 @@
+export * from './forms/index.js';

package/src/components/icon/Icon.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { IconName } from './generated/iconNames.js';
+
+export interface IconProps extends HTMLAttributes<SVGSVGElement> {
+	name: IconName;
+	size?: number;
+}
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
+	{ name, size = 15, className, ...rest },
+	ref,
+) {
+	return (
+		<svg
+			ref={ref}
+			className={classNames(
+				'flex-shrink-0 layer-components:fill-none',
+				className,
+			)}
+			width={size}
+			height={size}
+			{...rest}
+		>
+			<use xlinkHref={`#icon-${name}`} />
+		</svg>
+	);
+});