Create Form and TextInput components

Author: rgodha24

src/components/BogForm/BogForm.tsx

@@ -0,0 +1,23 @@
+import { Form } from 'radix-ui';
+import styles from './styles.module.css';
+import BogButton from '../BogButton/BogButton';
+import type { FormEventHandler } from 'react';
+
+export interface BogFormProps {
+  onSubmit?: FormEventHandler<HTMLFormElement>;
+  submitLabel?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function BogForm({ onSubmit, submitLabel, style, className, children }: BogFormProps) {
+  return (
+    <Form.Root onSubmit={onSubmit} className={`${className} ${styles.root}`} style={style}>
+      {children}
+      <Form.Submit asChild>
+        <BogButton type="submit">{submitLabel || 'Submit'}</BogButton>
+      </Form.Submit>
+    </Form.Root>
+  );
+}

src/components/BogForm/styles.module.css

@@ -0,0 +1,8 @@
+@layer base {
+  .root {
+    flex-direction: column;
+    display: flex;
+    row-gap: 1rem;
+    padding: 1rem;
+  }
+}

src/components/BogTextInput/BogTextInput.tsx

@@ -0,0 +1,62 @@
+import { Form } from 'radix-ui';
+import styles from './styles.module.css';
+
+export interface BogTextInputProps {
+  multiline?: boolean;
+  type?: 'text' | 'email' | 'password' | 'tel';
+  name: string;
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export function BogTextInput({
+  type = 'text',
+  name,
+  label,
+  multiline = false,
+  placeholder,
+  required = true,
+  disabled = false,
+  style,
+  className,
+}: BogTextInputProps) {
+  return (
+    <Form.Field name={name}>
+      <div className="flex flex-row gap-x-2 text-paragraph-2">
+        <Form.Label>{label}</Form.Label>
+        <Form.Message match="valueMissing" className="text-status-red-text">
+          Please enter a value for {label}
+        </Form.Message>
+        <Form.Message match="typeMismatch" className="text-status-red-text">
+          Please provide a valid {label}
+        </Form.Message>
+      </div>
+      <Form.Control asChild>
+        {multiline ? (
+          <textarea
+            name={name}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+            rows={4}
+            className={`${styles.input} text-paragraph-2`}
+          />
+        ) : (
+          <input
+            name={name}
+            type={type}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+            className={`${styles.input} text-paragraph-2`}
+          />
+        )}
+      </Form.Control>
+    </Form.Field>
+  );
+}

src/components/BogTextInput/styles.module.css

@@ -0,0 +1,19 @@
+@layer base {
+  .input {
+    width: 100%;
+    padding: 0.5rem;
+    background-color: var(--color-solid-bg-sunken);
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-grey-stroke-weak);
+    &:hover {
+      border-color: var(--color-brand-stroke-strong);
+    }
+    &:focus {
+      outline: none;
+      border-color: var(--color-brand-stroke-strong);
+    }
+    &:disabled {
+      color: var(--color-grey-off-state);
+    }
+  }
+}

src/pages/index.tsx

@@ -4,6 +4,8 @@ import BogButton from '../components/BogButton/BogButton';
 import { BogRadioItem } from '@/components/BogRadioItem/BogRadioItem';
 import { useState } from 'react';
 import BogCheckbox from '@/components/BogCheckbox/BogCheckbox';
+import { BogForm } from '@/components/BogForm/BogForm';
+import { BogTextInput } from '@/components/BogTextInput/BogTextInput';
 
 export default function Home() {
   const icons = [
@@ -206,6 +208,34 @@ export default function Home() {
           */}
           <div className="flex flex-col items-center justify-between border-grey-stroke-strong border-solid rounded-sm border-2 mb-8">
             <h3 className="self-start ml-4 text-heading-3">Forms:</h3>
+            <BogForm
+              className="w-full px-4"
+              onSubmit={(e) => {
+                e.preventDefault();
+                const data = Object.fromEntries(new FormData(e.currentTarget));
+                console.log(data);
+              }}
+            >
+              <BogTextInput name="name" label="Name" placeholder="Enter your name" />
+              <BogTextInput name="email" label="Email" placeholder="Enter your email" />
+              <BogTextInput
+                name="password"
+                label="Password"
+                placeholder="Enter your password"
+                type="password"
+                required
+              />
+              <BogTextInput name="phone" label="Phone" placeholder="Enter your phone number" type="tel" disabled />
+              <BogTextInput multiline name="message" label="Message" placeholder="Enter your message" />
+              <BogCheckbox label="Checkbox" name="checkbox" />
+              {/* you have to include a `name` prop when using BogRadioGroup in a form! */}
+              <BogRadioGroup name="radio">
+                <BogRadioItem label="Option 1" value={'1'} />
+                <BogRadioItem label="Option 2" value={'2'} />
+                <BogRadioItem label="Option 3" value={'3'} />
+                <BogRadioItem label="Option 4" value={'4'} />
+              </BogRadioGroup>
+            </BogForm>
           </div>
 
           {/* Temp placeholder for style */}