@xqmsg/ui-core 0.23.1-rc.1 → 0.23.1-rc.2

package/src/components/card/index.tsx

@@ -1,78 +1,78 @@
-import React, { Children, ReactNode } from 'react';
-import { Box, Flex, Text } from '@chakra-ui/react';
-import colors from '../../theme/foundations/colors';
-import typography from '../../theme/foundations/typography';
-import { Button } from '../button';
-
-export interface CardProps {
-  title: string | ReactNode;
-  leftIcon?: JSX.Element;
-  children: ReactNode | null;
-  height?: string | number;
-}
-
-/**
- * A functional React component utilized to render the `Card` component
- */
-export const Card: React.FC<CardProps> = ({
-  title,
-  leftIcon,
-  children,
-  height = 'auto',
-}) => {
-  return (
-    <Box
-      bg={colors.fill.light.quaternary}
-      borderRadius="4px"
-      border={`.5px solid ${colors.border.default}`}
-      py="8px"
-      px="8px"
-      height={height}
-      overflowY="auto"
-      width="206px"
-      _notLast={{ marginBottom: '8px' }}
-    >
-      {title && (
-        <Flex
-          display="flex"
-          alignItems="center"
-          justifyContent="start"
-          textDecoration="none"
-          _hover={{ textDecoration: 'none' }}
-          mb="8px"
-        >
-          <Flex alignItems="center">
-            <Box mr="4px">{leftIcon}</Box>
-            <Text
-              color={colors.label.primary.light}
-              fontSize={typography.fontSizes.sm}
-              fontWeight={typography.fontWeights.medium}
-            >
-              {title}
-            </Text>
-          </Flex>
-        </Flex>
-      )}
-      {Children.map(children, child => {
-        if (!React.isValidElement(child)) {
-          return;
-        }
-        if (child.type !== Button) {
-          return (
-            <Text
-              as="div"
-              _notLast={{ marginBottom: '8px' }}
-              color={colors.label.primary.light}
-              fontSize={typography.fontSizes.xs}
-              fontWeight={typography.fontWeights.normal}
-            >
-              {child}
-            </Text>
-          );
-        } else {
-          return <Box mt="8px">{child}</Box>;
-        }
-      })}
-    </Box>
-  );
-};
+import React, { Children, ReactNode } from 'react';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import colors from '../../theme/foundations/colors';
+import typography from '../../theme/foundations/typography';
+import { Button } from '../button';
+
+export interface CardProps {
+  title: string | ReactNode;
+  leftIcon?: JSX.Element;
+  children: ReactNode | null;
+  height?: string | number;
+}
+
+/**
+ * A functional React component utilized to render the `Card` component
+ */
+export const Card: React.FC<CardProps> = ({
+  title,
+  leftIcon,
+  children,
+  height = 'auto',
+}) => {
+  return (
+    <Box
+      bg={colors.fill.light.quaternary}
+      borderRadius="4px"
+      border={`.5px solid ${colors.border.default}`}
+      py="8px"
+      px="8px"
+      height={height}
+      overflowY="auto"
+      width="206px"
+      _notLast={{ marginBottom: '8px' }}
+    >
+      {title && (
+        <Flex
+          display="flex"
+          alignItems="center"
+          justifyContent="start"
+          textDecoration="none"
+          _hover={{ textDecoration: 'none' }}
+          mb="8px"
+        >
+          <Flex alignItems="center">
+            <Box mr="4px">{leftIcon}</Box>
+            <Text
+              color={colors.label.primary.light}
+              fontSize={typography.fontSizes.sm}
+              fontWeight={typography.fontWeights.medium}
+            >
+              {title}
+            </Text>
+          </Flex>
+        </Flex>
+      )}
+      {Children.map(children, child => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+        if (child.type !== Button) {
+          return (
+            <Text
+              as="div"
+              _notLast={{ marginBottom: '8px' }}
+              color={colors.label.primary.light}
+              fontSize={typography.fontSizes.xs}
+              fontWeight={typography.fontWeights.normal}
+            >
+              {child}
+            </Text>
+          );
+        } else {
+          return <Box mt="8px">{child}</Box>;
+        }
+      })}
+    </Box>
+  );
+};

package/src/components/form/Form.stories.tsx

@@ -1,62 +1,62 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import * as Yup from 'yup';
-
-import { useFormHandler } from '../../../src/components/form/hooks/useFormHandler';
-import { Form, FormProps } from '../../../src/components/form';
-import { FormSection } from '../../../src/components/form/section';
-import { formSectionStoryArgs } from '../../../src/components/form/section/FormSection.stories';
-import { FormStructure } from './FormTypes';
-
-const meta: Meta<FormProps<StoryFormSchema>> = {
-  title: 'Form example',
-  component: Form,
-  argTypes: {},
-  parameters: {},
-};
-
-interface StoryFormSchema {
-  prop?: string;
-}
-
-const onStubbedSubmit = () => null;
-
-const storyFormDefaultValues: StoryFormSchema = {
-  prop: '',
-};
-
-const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
-  prop: Yup.string().required(),
-});
-
-export default meta;
-const Template: Story<FormProps<StoryFormSchema>> = () => {
-  const formHandler = useFormHandler<StoryFormSchema>(
-    onStubbedSubmit,
-    storyFormDefaultValues,
-    storyFormSchema,
-    false,
-    'all'
-  );
-
-  const { form } = formHandler;
-
-  const section = formSectionStoryArgs.section as 'story';
-  const formStructure = formSectionStoryArgs.formStructure as FormStructure<
-    'story'
-  >;
-
-  return (
-    <Form formHandler={formHandler}>
-      <FormSection
-        form={form}
-        formStructure={formStructure}
-        section={section}
-      />
-    </Form>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import * as Yup from 'yup';
+
+import { useFormHandler } from '../../../src/components/form/hooks/useFormHandler';
+import { Form, FormProps } from '../../../src/components/form';
+import { FormSection } from '../../../src/components/form/section';
+import { formSectionStoryArgs } from '../../../src/components/form/section/FormSection.stories';
+import { FormStructure } from './FormTypes';
+
+const meta: Meta<FormProps<StoryFormSchema>> = {
+  title: 'Form example',
+  component: Form,
+  argTypes: {},
+  parameters: {},
+};
+
+interface StoryFormSchema {
+  prop?: string;
+}
+
+const onStubbedSubmit = () => null;
+
+const storyFormDefaultValues: StoryFormSchema = {
+  prop: '',
+};
+
+const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
+  prop: Yup.string().required(),
+});
+
+export default meta;
+const Template: Story<FormProps<StoryFormSchema>> = () => {
+  const formHandler = useFormHandler<StoryFormSchema>(
+    onStubbedSubmit,
+    storyFormDefaultValues,
+    storyFormSchema,
+    false,
+    'all'
+  );
+
+  const { form } = formHandler;
+
+  const section = formSectionStoryArgs.section as 'story';
+  const formStructure = formSectionStoryArgs.formStructure as FormStructure<
+    'story'
+  >;
+
+  return (
+    <Form formHandler={formHandler}>
+      <FormSection
+        form={form}
+        formStructure={formStructure}
+        section={section}
+      />
+    </Form>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};

package/src/components/form/FormTypes.ts

@@ -1,20 +1,20 @@
-import { FieldOptions, InputType } from '../input/InputTypes';
-
-export interface FormInput {
-  label: string;
-  name: string;
-  ariaLabel: string;
-  inputType: InputType;
-  options?: FieldOptions;
-  placeholder?: string;
-  isRequired: boolean;
-  maxLength?: number;
-  disabled?: boolean;
-  defaultValue?: string;
-  variant?: string;
-  separators?: string[];
-}
-
-export type FormStructure<K extends string | number | symbol> = {
-  [key in K]: FormInput[];
-};
+import { FieldOptions, InputType } from '../input/InputTypes';
+
+export interface FormInput {
+  label: string;
+  name: string;
+  ariaLabel: string;
+  inputType: InputType;
+  options?: FieldOptions;
+  placeholder?: string;
+  isRequired: boolean;
+  maxLength?: number;
+  disabled?: boolean;
+  defaultValue?: string;
+  variant?: string;
+  separators?: string[];
+}
+
+export type FormStructure<K extends string | number | symbol> = {
+  [key in K]: FormInput[];
+};

package/src/components/form/hooks/useFormHandler.tsx

@@ -1,74 +1,74 @@
-import { FormEvent, useState } from 'react';
-import { yupResolver } from '@hookform/resolvers/yup';
-import {
-  DeepPartial,
-  FieldValues,
-  useForm,
-  UseFormReturn,
-  ValidationMode,
-} from 'react-hook-form';
-
-import * as Yup from 'yup';
-import {
-  ErrorResponse,
-  formatErrorResponse,
-} from '../../../../src/components/form/utils/formErrors';
-import useDeepEffect from '../../../../src/hooks/useDeepEffect';
-
-// Default Yup error message for required fields
-Yup.setLocale({
-  mixed: {
-    required: 'This field is required.',
-  },
-});
-
-export type FormHandler<T extends FieldValues> = {
-  form: UseFormReturn<T, any>;
-  error?: ErrorResponse;
-  onSubmit: (e?: FormEvent) => Promise<void>;
-};
-
-export function useFormHandler<T extends FieldValues = Record<string, unknown>>(
-  handleSubmit: (values: T) => void,
-  defaultValues: DeepPartial<T>,
-  schema: Yup.AnyObjectSchema,
-  dontClearErrorsOnSuccess = false,
-  mode: keyof ValidationMode
-): FormHandler<T> {
-  const form = useForm<T>({
-    defaultValues,
-    resolver: schema ? yupResolver(schema) : undefined,
-    mode,
-  });
-  const [error, setError] = useState<ErrorResponse | undefined>();
-
-  const onSubmit = form.handleSubmit(async values => {
-    try {
-      await handleSubmit(values);
-
-      // Bypassing the error clearing step is useful for whenever the user gets navigated away
-      // from the screen in the submit handler. By not bothering to clear the errors, we avoid a console error
-      // from popping up and warning about a memory leak.
-      if (!dontClearErrorsOnSuccess) {
-        form.clearErrors();
-        // eslint-disable-next-line no-throw-literal
-        setError(undefined);
-      }
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(formatErrorResponse(e));
-      }
-    }
-  });
-
-  useDeepEffect(() => {
-    // Reset the form anytime the default values change
-    form.reset(defaultValues);
-  }, [defaultValues]);
-
-  return {
-    onSubmit,
-    form,
-    error,
-  };
-}
+import { FormEvent, useState } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import {
+  DeepPartial,
+  FieldValues,
+  useForm,
+  UseFormReturn,
+  ValidationMode,
+} from 'react-hook-form';
+
+import * as Yup from 'yup';
+import {
+  ErrorResponse,
+  formatErrorResponse,
+} from '../../../../src/components/form/utils/formErrors';
+import useDeepEffect from '../../../../src/hooks/useDeepEffect';
+
+// Default Yup error message for required fields
+Yup.setLocale({
+  mixed: {
+    required: 'This field is required.',
+  },
+});
+
+export type FormHandler<T extends FieldValues> = {
+  form: UseFormReturn<T, any>;
+  error?: ErrorResponse;
+  onSubmit: (e?: FormEvent) => Promise<void>;
+};
+
+export function useFormHandler<T extends FieldValues = Record<string, unknown>>(
+  handleSubmit: (values: T) => void,
+  defaultValues: DeepPartial<T>,
+  schema: Yup.AnyObjectSchema,
+  dontClearErrorsOnSuccess = false,
+  mode: keyof ValidationMode
+): FormHandler<T> {
+  const form = useForm<T>({
+    defaultValues,
+    resolver: schema ? yupResolver(schema) : undefined,
+    mode,
+  });
+  const [error, setError] = useState<ErrorResponse | undefined>();
+
+  const onSubmit = form.handleSubmit(async values => {
+    try {
+      await handleSubmit(values);
+
+      // Bypassing the error clearing step is useful for whenever the user gets navigated away
+      // from the screen in the submit handler. By not bothering to clear the errors, we avoid a console error
+      // from popping up and warning about a memory leak.
+      if (!dontClearErrorsOnSuccess) {
+        form.clearErrors();
+        // eslint-disable-next-line no-throw-literal
+        setError(undefined);
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        setError(formatErrorResponse(e));
+      }
+    }
+  });
+
+  useDeepEffect(() => {
+    // Reset the form anytime the default values change
+    form.reset(defaultValues);
+  }, [defaultValues]);
+
+  return {
+    onSubmit,
+    form,
+    error,
+  };
+}

package/src/components/form/index.tsx

@@ -1,25 +1,25 @@
-import React, { PropsWithChildren } from 'react';
-import { FieldValues, FormProvider } from 'react-hook-form';
-import { FormHandler } from '../../components/form/hooks/useFormHandler';
-
-export interface FormProps<T extends FieldValues> {
-  formHandler: FormHandler<T>;
-}
-
-/**
- * A functional React component utilized to render the `Form` component, a form wrapper for
- * `react-hook-form`. The `Form` component is provided a `formHandler` and is used to wrap a container
- * that contains a `FormSection` component.
- */
-export function Form<T extends FieldValues>({
-  formHandler,
-  children,
-}: PropsWithChildren<FormProps<T>>) {
-  const { form, onSubmit } = formHandler;
-
-  return (
-    <FormProvider {...form}>
-      <form onSubmit={onSubmit}>{children}</form>
-    </FormProvider>
-  );
-}
+import React, { PropsWithChildren } from 'react';
+import { FieldValues, FormProvider } from 'react-hook-form';
+import { FormHandler } from '../../components/form/hooks/useFormHandler';
+
+export interface FormProps<T extends FieldValues> {
+  formHandler: FormHandler<T>;
+}
+
+/**
+ * A functional React component utilized to render the `Form` component, a form wrapper for
+ * `react-hook-form`. The `Form` component is provided a `formHandler` and is used to wrap a container
+ * that contains a `FormSection` component.
+ */
+export function Form<T extends FieldValues>({
+  formHandler,
+  children,
+}: PropsWithChildren<FormProps<T>>) {
+  const { form, onSubmit } = formHandler;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={onSubmit}>{children}</form>
+    </FormProvider>
+  );
+}