# Formik

Formik integration components for form state management and validation.

### **Import**
  ```tsx
  import { FormikForm, FormikTextField, FormikCheckbox, FormikChatInput, FormikColorInput, FormikSelect, FormikSwitch, FormikTextArea, FormikDatePicker, FormikCountryPicker, FormikPassword, FormikComboBox, FormikSlider, FormikIconPicker, FormikEmojiPicker, FormikOTPInput, FormikRadio, FormikSelector, FormikTagInput, FormikToggle, FormikToggleGroup, FormikUploader } from '@app-studio/web';
  ```

### **Basic Form**
A basic form with Formik integration.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikTextField } from '@app-studio/web';
import { FormikCheckbox } from '@app-studio/web';
import { Button } from '@app-studio/web';
import { Vertical } from '@app-studio/web';

export const BasicFormExample = () => {
  // Define initial values
  const initialValues = {
    firstName: '',
    lastName: '',
    email: '',
    agreeToTerms: false,
  };

  // Define validation schema
  const validationSchema = Yup.object().shape({
    firstName: Yup.string().required('Required'),
    lastName: Yup.string().required('Required'),
    email: Yup.string().email('Invalid email').required('Required'),
    agreeToTerms: Yup.boolean().oneOf([true], 'You must agree to the terms'),
  });

  // Handle form submission
  const handleSubmit = (values: any) => {
    console.log('Form values:', values);
    alert(JSON.stringify(values, null, 2));
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <Vertical gap={16} width="100%" maxWidth={400}>
            <FormikTextField
              name="firstName"
              label="First Name"
              placeholder="Enter your first name"
            />
            <FormikTextField
              name="lastName"
              label="Last Name"
              placeholder="Enter your last name"
            />
            <FormikTextField
              name="email"
              label="Email"
              placeholder="Enter your email"
              type="email"
            />
            <FormikCheckbox
              name="agreeToTerms"
              label="I agree to the terms and conditions"
            />
            <Button type="submit" onClick={handleSubmit}>
              Submit
            </Button>
          </Vertical>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikTextField**
Text input field integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikTextField } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikTextFieldExample = () => {
  return (
    <Formik
      initialValues={{ username: '' }}
      validationSchema={Yup.object({
        username: Yup.string().required('Username is required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikTextField
            name="username"
            label="Username"
            placeholder="Enter username"
            helperText="Your unique username"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikTextArea**
Multi-line text input integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikTextArea } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikTextAreaExample = () => {
  return (
    <Formik
      initialValues={{ comments: '' }}
      validationSchema={Yup.object({
        comments: Yup.string().required('Comments are required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikTextArea
            name="comments"
            label="Comments"
            placeholder="Enter your comments"
            rows={4}
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikCheckbox**
Checkbox input integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikCheckbox } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikCheckboxExample = () => {
  return (
    <Formik
      initialValues={{ subscribe: false }}
      validationSchema={Yup.object({
        subscribe: Yup.boolean().oneOf([true], 'You must subscribe'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikCheckbox
            name="subscribe"
            label="Subscribe to newsletter"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikChatInput**
Chat input with file upload, mentions, and auto-completion integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikChatInput } from '@app-studio/web';
import { Button, Vertical, Text } from '@app-studio/web';

export const FormikChatInputExample = () => {
  const mentionData = [
    { id: '1', name: 'John Doe', avatar: '', email: 'john@example.com' },
    { id: '2', name: 'Jane Smith', avatar: '', email: 'jane@example.com' },
  ];

  const promptExamples = [
    { id: '1', text: 'Hello, how can I help you today?' },
    { id: '2', text: 'What would you like to know about our product?' },
  ];

  return (
    <Formik
      initialValues={{
        message: '',
        chatHistory: [] as string[]
      }}
      validationSchema={Yup.object({
        message: Yup.string().required('Message is required'),
      })}
      onSubmit={(values, { setFieldValue }) => {
        console.log('Message submitted:', values.message);
        // Add to chat history and clear input
        const newHistory = [...values.chatHistory, values.message];
        setFieldValue('chatHistory', newHistory);
        setFieldValue('message', '');
      }}
    >
      {({ handleSubmit, values }) => (
        <FormikForm>
          <Vertical gap={16}>
            {/* Display chat history */}
            {values.chatHistory.length > 0 && (
              <Vertical gap={8}>
                <Text fontSize="md" fontWeight="semibold">Chat History:</Text>
                {values.chatHistory.map((msg: string, index: number) => (
                  <Text
                    key={index}
                    padding={8}
                    backgroundColor="color-gray-100"
                    borderRadius={8}
                  >
                    {msg}
                  </Text>
                ))}
              </Vertical>
            )}

            <FormikChatInput
              name="message"
              placeholder="Type your message here... Use @ to mention someone"
              mentionData={mentionData}
              mentionTrigger="@"
              promptExamples={promptExamples}
              autoFocus={true}
              hideAttachments={false}
              onMentionSelect={(mention) => {
                console.log('Mention selected:', mention);
              }}
            />

            <Button
              type="submit"
              onClick={handleSubmit}
              disabled={!values.message?.trim()}
            >
              Send Message
            </Button>
          </Vertical>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikColorInput**
Color picker input integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikColorInput } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikColorInputExample = () => {
  return (
    <Formik
      initialValues={{
        backgroundColor: 'color-blue-500',
        textColor: 'color-white'
      }}
      validationSchema={Yup.object({
        backgroundColor: Yup.string().required('Background color is required'),
        textColor: Yup.string().required('Text color is required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit, values }) => (
        <FormikForm>
          <FormikColorInput
            name="backgroundColor"
            label="Background Color"
            helperText="Choose the background color"
          />
          <FormikColorInput
            name="textColor"
            label="Text Color"
            helperText="Choose the text color"
          />

          {/* Preview */}
          <div
            style={{
              padding: '16px',
              borderRadius: '8px',
              backgroundColor: values.backgroundColor,
              color: values.textColor,
              marginTop: '16px'
            }}
          >
            Preview: This is how your colors will look
          </div>

          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikSelect**
Select dropdown integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikSelect } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikSelectExample = () => {
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Orange', value: 'orange' },
  ];

  return (
    <Formik
      initialValues={{ fruit: '' }}
      validationSchema={Yup.object({
        fruit: Yup.string().required('Please select a fruit'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikSelect
            name="fruit"
            label="Favorite Fruit"
            options={options}
            placeholder="Select a fruit"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikSwitch**
Toggle switch integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm } from '@app-studio/web';
import { FormikSwitch } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikSwitchExample = () => {
  return (
    <Formik
      initialValues={{ darkMode: false }}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikSwitch
            name="darkMode"
            label="Dark Mode"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikDatePicker**
Date picker integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikDatePicker } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikDatePickerExample = () => {
  return (
    <Formik
      initialValues={{ birthdate: '' }}
      validationSchema={Yup.object({
        birthdate: Yup.date().required('Birthdate is required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikDatePicker
            name="birthdate"
            label="Birthdate"
            placeholder="Select your birthdate"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikCountryPicker**
Country selection dropdown integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikCountryPicker } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikCountryPickerExample = () => {
  return (
    <Formik
      initialValues={{ country: '' }}
      validationSchema={Yup.object({
        country: Yup.string().required('Country is required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikCountryPicker
            name="country"
            label="Country"
            placeholder="Select your country"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikPassword**
Password input with show/hide toggle integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikPassword } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikPasswordExample = () => {
  return (
    <Formik
      initialValues={{ password: '' }}
      validationSchema={Yup.object({
        password: Yup.string()
          .min(8, 'Password must be at least 8 characters')
          .required('Password is required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikPassword
            name="password"
            label="Password"
            placeholder="Enter your password"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikComboBox**
Combobox with search functionality integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikComboBox } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikComboBoxExample = () => {
  const items = [
    { label: 'React', value: 'react' },
    { label: 'Vue', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
  ];

  return (
    <Formik
      initialValues={{ framework: '' }}
      validationSchema={Yup.object({
        framework: Yup.string().required('Framework is required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikComboBox
            name="framework"
            label="Framework"
            placeholder="Select or search for a framework"
            items={items}
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikSlider**
Slider component integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { FormikForm } from '@app-studio/web';
import { FormikSlider } from '@app-studio/web';
import { Button } from '@app-studio/web';

export const FormikSliderExample = () => {
  return (
    <Formik
      initialValues={{ volume: 50 }}
      validationSchema={Yup.object({
        volume: Yup.number()
          .min(0, 'Volume cannot be negative')
          .max(100, 'Volume cannot exceed 100')
          .required('Volume is required'),
      })}
      onSubmit={(values) => alert(JSON.stringify(values))}
    >
      {({ handleSubmit }) => (
        <FormikForm>
          <FormikSlider
            name="volume"
            label="Volume"
            min={0}
            max={100}
            step={1}
            showValue
            helperText="Adjust the volume level"
          />
          <Button type="submit" onClick={handleSubmit} marginTop={16}>
            Submit
          </Button>
        </FormikForm>
      )}
    </Formik>
  );
};
```

### **FormikIconPicker**
Icon picker integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikIconPicker, Button } from '@app-studio/web';

export const FormikIconPickerExample = () => (
  <Formik
    initialValues={{ icon: 'user' }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikIconPicker
          name="icon"
          label="Select Icon"
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikEmojiPicker**
Emoji picker integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikEmojiPicker, Button } from '@app-studio/web';

export const FormikEmojiPickerExample = () => (
  <Formik
    initialValues={{ emoji: '👍' }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikEmojiPicker
          name="emoji"
          label="Select Emoji"
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikOTPInput**
OTP input integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikOTPInput, Button } from '@app-studio/web';

export const FormikOTPInputExample = () => (
  <Formik
    initialValues={{ otp: '' }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikOTPInput
          name="otp"
          label="Verification Code"
          length={6}
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Verify
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikRadio**
Radio button group integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikRadio, Button } from '@app-studio/web';

export const FormikRadioExample = () => (
  <Formik
    initialValues={{ gender: '' }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikRadio
          name="gender"
          label="Gender"
          options={[
            { label: 'Male', value: 'male' },
            { label: 'Female', value: 'female' },
            { label: 'Other', value: 'other' },
          ]}
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikSelector**
Selector component integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikSelector, Button } from '@app-studio/web';

export const FormikSelectorExample = () => (
  <Formik
    initialValues={{ plan: 'basic' }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikSelector
          name="plan"
          label="Subscription Plan"
          options={[
            { label: 'Basic', value: 'basic', description: 'Basic plan description' },
            { label: 'Pro', value: 'pro', description: 'Pro plan description' },
          ]}
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikTagInput**
Tag input integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikTagInput, Button } from '@app-studio/web';

export const FormikTagInputExample = () => (
  <Formik
    initialValues={{ tags: [] }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikTagInput
          name="tags"
          label="Tags"
          placeholder="Type and press enter..."
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikToggle**
Toggle switch integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikToggle, Button } from '@app-studio/web';

export const FormikToggleExample = () => (
  <Formik
    initialValues={{ notifications: true }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikToggle
          name="notifications"
          label="Enable Notifications"
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikToggleGroup**
Group of toggles integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikToggleGroup, Button } from '@app-studio/web';

export const FormikToggleGroupExample = () => (
  <Formik
    initialValues={{ alignment: 'left' }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikToggleGroup
          name="alignment"
          label="Text Alignment"
          options={[
            { label: 'Left', value: 'left' },
            { label: 'Center', value: 'center' },
            { label: 'Right', value: 'right' },
          ]}
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```

### **FormikUploader**
File uploader integrated with Formik.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikUploader, Button } from '@app-studio/web';

export const FormikUploaderExample = () => (
  <Formik
    initialValues={{ files: [] }}
    onSubmit={(values) => alert(JSON.stringify(values))}
  >
    {({ handleSubmit }) => (
      <FormikForm>
        <FormikUploader
          name="files"
          label="Upload Files"
          multiple
        />
        <Button type="submit" onClick={handleSubmit} marginTop={16}>
          Submit
        </Button>
      </FormikForm>
    )}
  </Formik>
);
```