feat: introducing FormSection

src/fragments/form/FormSection.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormSection } from "./FormSection";
+import { Input, Switch } from "../../components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof FormSection> = {
+  title: "fragments/FormSection",
+  component: FormSection,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    title: 'Profile',
+    description: 'These are my personal information.',
+    children: (
+      <>
+        <Input label="Firstname" />
+        <Input label="Lastname" />
+      </>
+    ),
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    title: 'Profile',
+    description: 'These are my personal information.',
+    direction: 'horizontal',
+    children: (
+      <>
+        <Input label="Firstname" />
+        <Input label="Lastname" />
+      </>
+    ),
+  },
+};
+
+export const HorizontalSimple: Story = {
+  args: {
+    title: 'Notifications',
+    description: 'Turn on/off email notifications.',
+    direction: 'horizontal',
+    children: <Switch />,
+  },
+};

src/fragments/form/FormSection.tsx

@@ -0,0 +1,52 @@
+/**
+ * Primary UI component for Form Sections
+ */
+
+import { tv } from "@nextui-org/react";
+
+export interface FormSectionProps {
+  children: React.ReactNode;
+  title: string;
+  description?: string;
+  direction?: 'vertical' | 'horizontal'
+}
+
+const formSection = tv({
+  slots: {
+    base: 'flex gap-4 py-6 border-t-1 border-default-100 max-w-3xl',
+    content: 'flex flex-col gap-4 flex-1',
+    info: 'flex-1',
+    description: 'text-small text-foreground-500',
+  },
+  variants: {
+    direction: {
+      horizontal: {
+        base: 'flex-row',
+        content: 'items-end justify-center',
+      },
+      vertical: {
+        base: 'flex-col',
+        content: 'items-start',
+      }
+    }
+  },
+  defaultVariants: {
+    direction: 'vertical',
+  },
+});
+
+export const FormSection: React.FC<FormSectionProps> = ({ children, title, description, ...props }) => {
+  const { base, content, description: descriptionClasses, info } = formSection(props);
+
+  return (
+    <div className={base()}>
+      <div className={info()}>
+        <h3>{title}</h3>
+        <p className={descriptionClasses()}>{description}</p>
+      </div>
+      <div className={content()}>
+        {children}
+      </div>
+    </div>
+  );
+};

src/fragments/shell/Shell.stories.tsx

@@ -20,6 +20,7 @@ import {
   Tab,
   Tabs
 } from "../../components/base";
+import { FormSection } from "../form/FormSection";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Shell> = {
@@ -199,15 +200,35 @@ export const WithTable: Story = {
               </TableBody>
             </Table>
           </Tab>
-          <Tab key="music" title="Music">
-            <Card>
-              <CardBody>
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-                dolor in reprehenderit in voluptate velit esse cillum dolore eu
-                fugiat nulla pariatur.
-              </CardBody>
-            </Card>
+          <Tab key="settings" title="Settings">
+            <form>
+              <h2>First Section</h2>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+              <h2>Second Section</h2>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+              <FormSection title="Title" description="Description">
+                <Input />
+              </FormSection>
+            </form>
           </Tab>
           <Tab key="videos" title="Videos">
             <Card>