Textarea Field

'use client';

import { useForm, useStore } from '@tanstack/react-form';
import { SubmitButton } from '@/components/ui/shuip/tanstack-form/submit-button';
import { TextareaField } from '@/components/ui/shuip/tanstack-form/textarea-field';

const MAX_LENGTH = 280;

export default function TsfTextareaFieldCharacterCountExample() {
  const form = useForm({
    defaultValues: {
      tweet: '',
    },
    onSubmit: async ({ value }) => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(value, null, 2));
    },
  });

  const tweet = useStore(form.store, (state) => state.values.tweet);
  const remaining = MAX_LENGTH - tweet.length;
  const isNearLimit = remaining < 50;
  const isOverLimit = remaining < 0;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
      className='space-y-4 w-full max-w-lg'
    >
      <div className='space-y-2'>
        <TextareaField
          form={form}
          name='tweet'
          label='Tweet'
          props={{
            rows: 4,
            maxLength: MAX_LENGTH,
            placeholder: "What's happening?",
          }}
          formProps={{
            validators: {
              onChange: ({ value }) => {
                if (!value) return 'Tweet cannot be empty';
                if (value.length > MAX_LENGTH) return `Tweet is too long (max ${MAX_LENGTH} characters)`;
                return undefined;
              },
            },
          }}
        />

        <div className='flex justify-between text-sm'>
          <span className='text-muted-foreground'>
            {tweet.length} / {MAX_LENGTH} characters
          </span>
          <span
            className={`font-medium ${
              isOverLimit ? 'text-destructive' : isNearLimit ? 'text-orange-500' : 'text-muted-foreground'
            }`}
          >
            {remaining} remaining
          </span>
        </div>
      </div>

      <SubmitButton form={form}>Post Tweet</SubmitButton>
    </form>
  );
}

'use client';

import { useForm } from '@tanstack/react-form';
import { SubmitButton } from '@/components/ui/shuip/tanstack-form/submit-button';
import { TextareaField } from '@/components/ui/shuip/tanstack-form/textarea-field';

export default function TsfTextareaFieldExample() {
  const form = useForm({
    defaultValues: {
      bio: '',
      feedback: '',
    },
    onSubmit: async ({ value }) => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(value, null, 2));
    },
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
      className='space-y-4'
    >
      <TextareaField
        form={form}
        name='bio'
        label='Biography'
        description='Tell us about yourself'
        props={{ rows: 4, placeholder: 'Software engineer passionate about...' }}
        formProps={{
          validators: {
            onChange: ({ value }) => {
              if (!value) return 'Bio is required';
              if (value.length < 20) return 'Bio must be at least 20 characters';
              return undefined;
            },
          },
        }}
      />

      <TextareaField
        form={form}
        name='feedback'
        label='Feedback'
        description='Share your thoughts or suggestions'
        props={{ rows: 6, placeholder: 'Your feedback helps us improve...' }}
      />

      <SubmitButton form={form}>Submit</SubmitButton>
    </form>
  );
}

'use client';

import { useForm, useStore } from '@tanstack/react-form';
import { Card } from '@/components/ui/card';
import { SubmitButton } from '@/components/ui/shuip/tanstack-form/submit-button';
import { TextareaField } from '@/components/ui/shuip/tanstack-form/textarea-field';

export default function TsfTextareaFieldMarkdownPreviewExample() {
  const form = useForm({
    defaultValues: {
      content: '',
    },
    onSubmit: async ({ value }) => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(value, null, 2));
    },
  });

  const content = useStore(form.store, (state) => state.values.content);
  const htmlContent = parseMarkdown(content);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
      className='space-y-4'
    >
      <div className='flex max-md:flex-col items-center gap-4 w-full'>
        <div className='mt-4'>
          <TextareaField
            form={form}
            name='content'
            label='Content'
            description='Supports basic Markdown formatting'
            tooltip={
              <div className='space-y-1 text-sm'>
                <p className='font-semibold'>Markdown syntax:</p>
                <p># Heading 1</p>
                <p>## Heading 2</p>
                <p>**bold** *italic*</p>
                <p>`code`</p>
                <p>- List item</p>
              </div>
            }
            props={{
              rows: 12,
              placeholder: '# My Article\n\nWrite your content here...',
              className: 'min-h-[300px]',
            }}
            formProps={{
              validators: {
                onChange: ({ value }) => {
                  if (!value) return 'Content is required';
                  if (value.length < 10) return 'Content must be at least 10 characters';
                  return undefined;
                },
              },
            }}
          />
        </div>

        <Card className='p-4 min-h-[300px]'>
          {content ? (
            // biome-ignore lint/security/noDangerouslySetInnerHtml: demo
            <div className='prose prose-sm max-w-none' dangerouslySetInnerHTML={{ __html: htmlContent }} />
          ) : (
            <p className='text-muted-foreground'>Nothing to preview yet. Write some content to see the preview.</p>
          )}
        </Card>
      </div>

      <SubmitButton form={form}>Publish Article</SubmitButton>
    </form>
  );
}

function parseMarkdown(text: string): string {
  return text
    .split('\n')
    .map((line) => {
      if (line.startsWith('### ')) return `<h3 class="text-lg font-semibold mb-2">${line.slice(4)}</h3>`;
      if (line.startsWith('## ')) return `<h2 class="text-xl font-semibold mb-2">${line.slice(3)}</h2>`;
      if (line.startsWith('# ')) return `<h1 class="text-2xl font-bold mb-2">${line.slice(2)}</h1>`;
      if (line.startsWith('- ')) return `<li class="ml-4">${line.slice(2)}</li>`;

      line = line.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
      line = line.replace(/\*(.*?)\*/g, '<em>$1</em>');
      line = line.replace(/`(.*?)`/g, '<code class="bg-muted px-1 rounded">$1</code>');

      return line ? `<p class="mb-2">${line}</p>` : '<br>';
    })
    .join('\n');
}