feat: add ui-form component (#38)

* feat: add `ui-form` component

* chore: install dependencies in `ui-form` package

packages/ui-form/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@halvaradop/ui-form",
+  "version": "0.1.0",
+  "private": false,
+  "description": "A customizable form component for @halvaradop/ui library with Tailwind CSS styling.",
+  "type": "module",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/halvaradop/ui.git"
+  },
+  "keywords": [
+    "button",
+    "react",
+    "component",
+    "tailwindcss",
+    "react",
+    "ui",
+    "library"
+  ],
+  "author": "Hernan Alvarado <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/halvaradop/ui/issues"
+  },
+  "homepage": "https://github.com/halvaradop/ui#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "devDependencies": {
+    "@halvaradop/ui-core": "workspace:*"
+  }
+}

packages/ui-form/src/form.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Form } from "./index.js"
+import { Input } from "../../ui-input/src/index.js"
+
+const meta: Meta = {
+	title: "ui-form",
+	tags: ["autodocs"],
+	component: Form,
+	parameters: {
+		layout: "centered",
+	},
+} satisfies Meta<typeof Form>
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+	render: () => (
+		<Form>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Outline: Story = {
+	args: {
+		variant: "outline",
+	},
+	render: ({ variant }) => (
+		<Form variant={variant}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Filled: Story = {
+	args: {
+		variant: "filled",
+	},
+	render: ({ variant }) => (
+		<Form variant={variant}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Small: Story = {
+	args: {
+		size: "sm",
+		variant: "outline",
+	},
+	render: ({ variant, size }) => (
+		<Form variant={variant} size={size}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Medium: Story = {
+	args: {
+		size: "md",
+		variant: "outline",
+	},
+	render: ({ variant, size }) => (
+		<Form variant={variant} size={size}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Large: Story = {
+	args: {
+		size: "lg",
+		variant: "outline",
+	},
+	render: ({ variant, size }) => (
+		<Form variant={variant} size={size}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export default meta

packages/ui-form/src/index.tsx

@@ -0,0 +1,33 @@
+import { ComponentProps, forwardRef } from "react"
+import type { ArgsFunction } from "@halvaradop/ts-utility-types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+export type FormProps<T extends ArgsFunction> = VariantProps<T> & ComponentProps<"form">
+
+export const formVariants = cva("mx-auto flex items-center flex-col relative", {
+	variants: {
+		variant: {
+			base: "items-start",
+			outline: "border border-gray-300 shadow",
+			filled: "border border-gray-300 shadow-inner",
+		},
+		size: {
+			sm: "small w-11/12 max-w-sm pt-6 pb-4 px-3 gap-y-3 rounded-md",
+			base: "base w-11/12 max-w-md pt-10 pb-6 px-4 gap-y-4 rounded-xl",
+			md: "md w-11/12 max-w-lg pt-12 pb-8 px-5 gap-y-5 rounded-xl",
+			lg: "lg w-11/12 max-w-xl pt-14 pb-10 px-6 gap-y-6 rounded-2xl",
+		},
+	},
+	defaultVariants: {
+		variant: "base",
+		size: "base",
+	},
+})
+
+export const Form = forwardRef<HTMLFormElement, FormProps<typeof formVariants>>(({ className, variant, size, children, ...props }, ref) => {
+	return (
+		<form className={formVariants({ className, variant, size })} ref={ref} {...props}>
+			{children}
+		</form>
+	)
+})

packages/ui-form/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@halvaradop/ui-core/tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

packages/ui-form/tsup.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from "tsup"
+import { tsupConfig } from "@halvaradop/ui-core/tsup.config.base"
+
+export default defineConfig(tsupConfig)