feat: release form component

fragment-build · Jun 13, 2024 · fe25ea4 · fe25ea4
1 parent a60fcee
commit fe25ea4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 26 deletions.
diff --git a/src/fragments/form/Form.tsx b/src/fragments/form/Form.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import { tv } from "@nextui-org/react";
 import { Divider } from "../../components";
 
-interface FormProps {
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   children: React.ReactNode[];
 }
 
@@ -17,16 +17,16 @@ const form = tv({
 });
 
 export const Form: React.FC<FormProps> = ({ children, ...props }) => {
-  const v = form(props);
+  const v = form();
 
   return (
-    <section>
+    <form {...props}>
       {children.map((child, index) => index === 0 ? child : (
         <React.Fragment key={index}>
           <Divider className={v.divider()} />
           {child}
         </React.Fragment>
       ))}
-    </section>
+    </form>
   );
 };
diff --git a/src/fragments/index.ts b/src/fragments/index.ts
@@ -1,3 +1,4 @@
+export * from './form/Form';
 export * from './form/FormSection';
 export * from './shell/Shell';
 export * from './sidebar/Sidebar';

diff --git a/src/fragments/shell/Shell.stories.tsx b/src/fragments/shell/Shell.stories.tsx
@@ -212,28 +212,26 @@ export const WithTable: Story = {
             </Table>
           </Tab>
           <Tab key="settings" title="Settings">
-            <form>
-              <Form>
-                <FormSection title="Name" description="Description" direction="horizontal">
-                  <Input label="First name" />
-                  <Input label="Last name" />
-                </FormSection>
-                <FormSection title="Biography" description="Description">
-                  <Textarea label="Biography" minRows={6} />
-                </FormSection>
-                <FormSection title="Notifications" description="Turn on/off email notifications." direction="horizontal">
-                  <Switch />
-                </FormSection>
-                <FormSection title="Title" description="Description" direction="horizontal">
-                  <Input label="First name" />
-                  <Input label="Last name" />
-                </FormSection>
-                <FormSection title="Full Width" description="Description" direction="horizontal" fullWidth>
-                  <Input label="First name" />
-                  <Input label="Last name" />
-                </FormSection>
-              </Form>
-            </form>
+            <Form>
+              <FormSection title="Name" description="Description" direction="horizontal">
+                <Input label="First name" />
+                <Input label="Last name" />
+              </FormSection>
+              <FormSection title="Biography" description="Description">
+                <Textarea label="Biography" minRows={6} />
+              </FormSection>
+              <FormSection title="Notifications" description="Turn on/off email notifications." direction="horizontal">
+                <Switch />
+              </FormSection>
+              <FormSection title="Title" description="Description" direction="horizontal">
+                <Input label="First name" />
+                <Input label="Last name" />
+              </FormSection>
+              <FormSection title="Full Width" description="Description" direction="horizontal" fullWidth>
+                <Input label="First name" />
+                <Input label="Last name" />
+              </FormSection>
+            </Form>
           </Tab>
           <Tab key="videos" title="Videos">
             <Card>