@ttoss/forms 0.3.6 → 0.5.0

package/dist/esm/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+// tsup.inject.js
+import * as React from "react";
+
+// src/Form.tsx
+import * as React2 from "react";
+import { Box } from "@ttoss/ui";
+import { FormProvider } from "react-hook-form";
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */ React2.createElement(FormProvider, {
+    ...formMethods
+  }, /* @__PURE__ */ React2.createElement(Box, {
+    as: "form",
+    variant: "forms.form",
+    onSubmit: formMethods.handleSubmit((data) => onSubmit(data)),
+    sx
+  }, children));
+};
+
+// src/FormFieldInput.tsx
+import { Box as Box2, Input, Label } from "@ttoss/ui";
+
+// src/ErrorMessage.tsx
+import { useFormContext } from "react-hook-form";
+import { ErrorMessage as HookFormErrorMessage } from "@hookform/error-message";
+import { Text } from "@ttoss/ui";
+var ErrorMessage = ({
+  name
+}) => {
+  const {
+    formState: { errors }
+  } = useFormContext();
+  return /* @__PURE__ */ React.createElement(HookFormErrorMessage, {
+    errors,
+    name,
+    as: /* @__PURE__ */ React.createElement(Text, {
+      variant: "text.error",
+      role: "alert"
+    })
+  });
+};
+
+// src/FormFieldInput.tsx
+import { useController } from "react-hook-form";
+var FormFieldInput = ({
+  label,
+  name
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = useController({
+    name,
+    defaultValue: ""
+  });
+  const id = `form-field-input-${name}`;
+  console.log({ name });
+  return /* @__PURE__ */ React.createElement(Box2, null, label && /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: id
+  }, label), /* @__PURE__ */ React.createElement(Input, {
+    ref,
+    onChange,
+    onBlur,
+    value,
+    name,
+    id
+  }), /* @__PURE__ */ React.createElement(ErrorMessage, {
+    name
+  }));
+};
+
+// src/FormField.tsx
+var FormField = () => {
+  return null;
+};
+FormField.Input = FormFieldInput;
+export {
+  Form,
+  FormField
+};

package/dist/index.d.ts

@@ -1,5 +1,22 @@
-export * from './Form';
-export { default as Form } from './Form';
-export * from './S3';
-export { default as S3 } from './S3';
-export * as masks from './masks/masks';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
+import * as React from 'react';
+import { BoxProps } from '@ttoss/ui';
+
+declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
+    children?: React.ReactNode;
+    onSubmit: (data: TFieldValues) => Promise<void> | void;
+    sx?: BoxProps['sx'];
+} & {
+    children: React.ReactNode | React.ReactNode[];
+} & react_hook_form.UseFormReturn<TFieldValues, any>) => JSX.Element;
+
+declare const FormField: {
+    (): null;
+    Input: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, }: {
+        label?: string | undefined;
+        name: react_hook_form.Path<TFieldValues>;
+    }) => JSX.Element;
+};
+
+export { Form, FormField };

package/dist/index.js

@@ -1,8 +1,114 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-'use strict'
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Form: () => Form,
+  FormField: () => FormField
+});
+module.exports = __toCommonJS(src_exports);
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./forms.cjs.production.min.js')
-} else {
-  module.exports = require('./forms.cjs.development.js')
-}
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/Form.tsx
+var React2 = __toESM(require("react"));
+var import_ui = require("@ttoss/ui");
+var import_react_hook_form = require("react-hook-form");
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */ React2.createElement(import_react_hook_form.FormProvider, {
+    ...formMethods
+  }, /* @__PURE__ */ React2.createElement(import_ui.Box, {
+    as: "form",
+    variant: "forms.form",
+    onSubmit: formMethods.handleSubmit((data) => onSubmit(data)),
+    sx
+  }, children));
+};
+
+// src/FormFieldInput.tsx
+var import_ui3 = require("@ttoss/ui");
+
+// src/ErrorMessage.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_error_message = require("@hookform/error-message");
+var import_ui2 = require("@ttoss/ui");
+var ErrorMessage = ({
+  name
+}) => {
+  const {
+    formState: { errors }
+  } = (0, import_react_hook_form2.useFormContext)();
+  return /* @__PURE__ */ React.createElement(import_error_message.ErrorMessage, {
+    errors,
+    name,
+    as: /* @__PURE__ */ React.createElement(import_ui2.Text, {
+      variant: "text.error",
+      role: "alert"
+    })
+  });
+};
+
+// src/FormFieldInput.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var FormFieldInput = ({
+  label,
+  name
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = (0, import_react_hook_form3.useController)({
+    name,
+    defaultValue: ""
+  });
+  const id = `form-field-input-${name}`;
+  console.log({ name });
+  return /* @__PURE__ */ React.createElement(import_ui3.Box, null, label && /* @__PURE__ */ React.createElement(import_ui3.Label, {
+    htmlFor: id
+  }, label), /* @__PURE__ */ React.createElement(import_ui3.Input, {
+    ref,
+    onChange,
+    onBlur,
+    value,
+    name,
+    id
+  }), /* @__PURE__ */ React.createElement(ErrorMessage, {
+    name
+  }));
+};
+
+// src/FormField.tsx
+var FormField = () => {
+  return null;
+};
+FormField.Input = FormFieldInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormField
+});

package/package.json

@@ -1,91 +1,45 @@
 {
-  "version": "0.3.6",
-  "license": "MIT",
+  "name": "@ttoss/forms",
+  "version": "0.5.0",
+  "license": "UNLICENSED",
+  "author": "ttoss",
+  "contributors": [
+    "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
+  ],
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
   "files": [
     "dist",
     "src"
   ],
-  "engines": {
-    "node": ">=10"
-  },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "peerDependencies": {
-    "react-hook-form": "^6.13.1",
-    "theme-ui": "^0.3.5",
-    "yup": "^0.32.8"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
+    "build": "tsup",
+    "test": "jest"
   },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+  "typings": "dist/index.d.ts",
+  "dependencies": {
+    "@hookform/error-message": "^2.0.0"
   },
-  "np": {
-    "anyBranch": false,
-    "branch": "main"
+  "peerDependencies": {
+    "@ttoss/ui": "^1.19.1",
+    "react": "^18.2.0",
+    "react-hook-form": "^7.36.1"
   },
-  "name": "@ttoss/forms",
-  "author": "Pedro Arantes <arantespp@gmail.com> (https://twitter.com/arantespp)",
-  "module": "dist/forms.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/forms.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/forms.esm.js",
-      "limit": "10 KB"
-    }
-  ],
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@hookform/resolvers": "^1.3.0",
-    "@size-limit/preset-small-lib": "^4.9.1",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
-    "@types/lodash": "^4.14.166",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/theme-ui": "^0.3.7",
-    "babel-loader": "^8.2.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-hook-form": "^6.13.1",
-    "react-is": "^17.0.1",
-    "size-limit": "^4.9.1",
-    "theme-ui": "^0.3.5",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
-    "typescript": "^4.1.3",
-    "yup": "^0.32.8"
+    "@hookform/resolvers": "^2.9.8",
+    "@ttoss/config": "^1.18.0",
+    "@ttoss/test-utils": "^1.16.7",
+    "@ttoss/ui": "^1.20.0",
+    "@types/jest": "^29.0.3",
+    "jest": "^29.0.3",
+    "react": "^18.2.0",
+    "react-hook-form": "^7.36.1",
+    "yup": "^0.32.11"
   },
-  "dependencies": {
-    "@hookform/error-message": "^0.0.5",
-    "date-fns": "^2.16.1",
-    "imask": "^6.0.5",
-    "lodash": "^4.17.20",
-    "lodash-es": "^4.17.20"
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/ErrorMessage.tsx

@@ -0,0 +1,21 @@
+import { FieldName, FieldValues, useFormContext } from 'react-hook-form';
+import { ErrorMessage as HookFormErrorMessage } from '@hookform/error-message';
+import { Text } from '@ttoss/ui';
+
+export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
+  name,
+}: {
+  name: FieldName<TFieldValues>;
+}) => {
+  const {
+    formState: { errors },
+  } = useFormContext<TFieldValues>();
+
+  return (
+    <HookFormErrorMessage
+      errors={errors}
+      name={name as any}
+      as={<Text variant="text.error" role="alert" />}
+    />
+  );
+};

package/src/Form.tsx

@@ -1,95 +1,27 @@
 import * as React from 'react';
+import { Box, BoxProps } from '@ttoss/ui';
+import { FieldValues, FormProvider, FormProviderProps } from 'react-hook-form';
 
-import { ErrorMessage as HookFormErrorMessage } from '@hookform/error-message';
-import get from 'lodash/get';
-import { FormProvider, useFormContext, UseFormMethods } from 'react-hook-form';
-import { Box, BoxProps, Input, InputProps, Label, Text } from 'theme-ui';
-
-const Form = <T,>({
+export const Form = <TFieldValues extends FieldValues = FieldValues>({
   children,
-  methods,
-  ...boxProps
+  onSubmit,
+  sx,
+  ...formMethods
 }: {
   children?: React.ReactNode;
-  methods: UseFormMethods<T>;
-  onSubmit?: ((data: React.FormEvent<HTMLDivElement>) => void) | undefined;
-} & BoxProps) => {
+  onSubmit: (data: TFieldValues) => Promise<void> | void;
+  sx?: BoxProps['sx'];
+} & FormProviderProps<TFieldValues>) => {
   return (
-    <FormProvider {...methods}>
-      <Box as="form" variant="forms.form" {...boxProps}>
+    <FormProvider {...formMethods}>
+      <Box
+        as="form"
+        variant="forms.form"
+        onSubmit={formMethods.handleSubmit((data) => onSubmit(data))}
+        sx={sx}
+      >
         {children}
       </Box>
     </FormProvider>
   );
 };
-
-export const ErrorMessage = ({ name }: { name: string }) => {
-  const { errors } = useFormContext();
-  return (
-    <HookFormErrorMessage
-      errors={errors}
-      name={name}
-      render={({ message, messages }) => {
-        if (messages) {
-          return (
-            <>
-              {Object.entries(messages).map(([type, message]) => (
-                <Text variant="text.error" role="alert" key={type}>
-                  {message}
-                </Text>
-              ))}
-            </>
-          );
-        }
-        return (
-          <Text variant="text.error" role="alert">
-            {message}
-          </Text>
-        );
-      }}
-    />
-  );
-};
-
-const Field = ({
-  name,
-  children,
-  label,
-  ref: inputRef,
-  ...inputProps
-}: {
-  name: string;
-  children?: React.ReactNode;
-  label?: string;
-} & InputProps) => {
-  const { errors, register } = useFormContext();
-  const error = get(errors, name);
-  const commonProps = {
-    name,
-    key: name,
-    id: name,
-    'aria-invalid': (error ? 'true' : 'false') as any,
-  };
-  return (
-    <Box variant="forms.field">
-      {label && <Label htmlFor={name}>{label}</Label>}
-      {children ? (
-        React.Children.map(children, child => {
-          return React.createElement((child as any).type, {
-            ref: register(),
-            ...commonProps,
-            ...(child as any).props,
-          });
-        })
-      ) : (
-        <Input ref={register()} {...commonProps} {...inputProps} />
-      )}
-      <ErrorMessage name={name} />
-    </Box>
-  );
-};
-
-Form.ErrorMessage = ErrorMessage;
-Form.Field = Field;
-
-export default Form;

package/src/FormField.tsx

@@ -0,0 +1,10 @@
+import { FormFieldInput } from './FormFieldInput';
+
+const FormField = () => {
+  // to be implemented
+  return null;
+};
+
+FormField.Input = FormFieldInput;
+
+export { FormField };

package/src/FormFieldInput.spec.tsx

@@ -0,0 +1,70 @@
+import * as yup from 'yup';
+import { Button } from '@ttoss/ui';
+import { Form } from './Form';
+import { FormFieldInput } from './FormFieldInput';
+import { render, screen, userEvent } from '@ttoss/test-utils';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+test('call onSubmit with correct data', async () => {
+  const user = userEvent.setup({ delay: null });
+
+  const onSubmit = jest.fn();
+
+  const RenderForm = () => {
+    const formMethods = useForm();
+
+    return (
+      <Form {...formMethods} onSubmit={onSubmit}>
+        <FormFieldInput name="input1" label="Input 1" />
+        <FormFieldInput name="input2" label="Input 2" />
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  };
+
+  render(<RenderForm />);
+
+  await user.type(screen.getByLabelText('Input 1'), 'input1');
+
+  await user.type(screen.getByLabelText('Input 2'), 'input2');
+
+  await user.click(screen.getByText('Submit'));
+
+  expect(onSubmit).toHaveBeenCalledWith({ input1: 'input1', input2: 'input2' });
+});
+
+test('should display error messages', async () => {
+  const user = userEvent.setup({ delay: null });
+
+  const onSubmit = jest.fn();
+
+  const schema = yup.object({
+    firstName: yup.string().required('First name is required'),
+    age: yup.number().required('Age is required'),
+  });
+
+  const RenderForm = () => {
+    const formMethods = useForm({
+      defaultValues: {
+        age: 0,
+      },
+      mode: 'all',
+      resolver: yupResolver(schema),
+    });
+
+    return (
+      <Form {...formMethods} onSubmit={onSubmit}>
+        <FormFieldInput name="firstName" label="First Name" />
+        <FormFieldInput name="age" label="Age" />
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  };
+
+  render(<RenderForm />);
+
+  await user.click(screen.getByText('Submit'));
+
+  expect(await screen.findByText('First name is required')).toBeInTheDocument();
+});

package/src/FormFieldInput.tsx

@@ -0,0 +1,35 @@
+import { Box, Input, Label } from '@ttoss/ui';
+import { ErrorMessage } from './ErrorMessage';
+import { FieldValues, Path, useController } from 'react-hook-form';
+
+export const FormFieldInput = <TFieldValues extends FieldValues = FieldValues>({
+  label,
+  name,
+}: {
+  label?: string;
+  name: Path<TFieldValues>;
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref },
+  } = useController<any>({
+    name,
+    defaultValue: '',
+  });
+
+  const id = `form-field-input-${name}`;
+
+  return (
+    <Box>
+      {label && <Label htmlFor={id}>{label}</Label>}
+      <Input
+        ref={ref}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        name={name}
+        id={id}
+      />
+      <ErrorMessage name={name} />
+    </Box>
+  );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Form } from './Form';
+export { FormField } from './FormField';

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 TTOSS, [Pedro Arantes](https://twitter.com/arantespp)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.