@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,497 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Checkbox } from './Checkbox';
+import { Form } from './Form';
+import { FormGroup } from './FormGroup';
+import { Input } from './Input';
+import { Radio } from './Radio';
+import { Select } from './Select';
+import { Textarea } from './Textarea';
+
+// Overriding the args to make children optional since we're providing it in render
+type FormWithOptionalChildren = Omit<React.ComponentProps<typeof Form>, 'children'> & {
+  children?: React.ReactNode;
+};
+
+const meta = {
+  title: 'Components/Form',
+  component: Form,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the form is disabled',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+    },
+    method: {
+      control: { type: 'select' },
+      options: ['get', 'post'],
+      description: 'Form submission method',
+    },
+    noValidate: {
+      control: 'boolean',
+      description: 'Whether to disable browser validation',
+    },
+    autoComplete: {
+      control: 'text',
+      description: 'Form autocomplete setting',
+    },
+  },
+} satisfies Meta<FormWithOptionalChildren>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic form
+export const Basic: Story = {
+  args: { children: undefined },
+  render: args => (
+    <Form {...args}>
+      <FormGroup label="Name" htmlFor="name">
+        <Input id="name" placeholder="Enter your name" />
+      </FormGroup>
+      <FormGroup label="Email" htmlFor="email">
+        <Input type="email" id="email" placeholder="Enter your email" />
+      </FormGroup>
+      <button type="submit" className="c-btn c-btn--primary">
+        Submit
+      </button>
+    </Form>
+  ),
+};
+
+// Complete form with all input types
+export const CompleteForm: Story = {
+  args: { children: undefined },
+  render: () => (
+    <div style={{ width: '500px' }}>
+      <Form>
+        <h2 className="u-mb-4">Registration Form</h2>
+
+        <FormGroup label="Full Name" htmlFor="fullName" required>
+          <Input id="fullName" name="fullName" placeholder="Enter your full name" required />
+        </FormGroup>
+
+        <FormGroup label="Email Address" htmlFor="email" required>
+          <Input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="Enter your email address"
+            required
+          />
+        </FormGroup>
+
+        <FormGroup label="Password" htmlFor="password" required>
+          <Input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Create a password"
+            required
+          />
+        </FormGroup>
+
+        <FormGroup label="Country" htmlFor="country">
+          <Select
+            id="country"
+            name="country"
+            options={[
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' },
+              { value: 'mx', label: 'Mexico' },
+              { value: 'uk', label: 'United Kingdom' },
+            ]}
+            placeholder="Select your country"
+          />
+        </FormGroup>
+
+        <FormGroup label="About yourself" htmlFor="bio">
+          <Textarea id="bio" name="bio" placeholder="Tell us about yourself" rows={4} />
+        </FormGroup>
+
+        <FormGroup>
+          <Checkbox id="terms" name="terms" label="I agree to the Terms and Conditions" required />
+        </FormGroup>
+
+        <FormGroup label="Preferred contact method">
+          <div className="u-d-flex u-flex-column u-gap-2">
+            <Radio id="contact-email" name="contactMethod" value="email" label="Email" checked />
+            <Radio id="contact-phone" name="contactMethod" value="phone" label="Phone" />
+            <Radio id="contact-mail" name="contactMethod" value="mail" label="Mail" />
+          </div>
+        </FormGroup>
+
+        <div className="u-d-flex u-gap-3 u-mt-4">
+          <button type="submit" className="c-btn c-btn--primary">
+            Register
+          </button>
+          <button type="reset" className="c-btn c-btn--outline-secondary">
+            Reset
+          </button>
+        </div>
+      </Form>
+    </div>
+  ),
+};
+
+// Interactive form
+export const Interactive: Story = {
+  args: { children: undefined },
+  render: () => {
+    const [formData, setFormData] = useState({
+      username: '',
+      email: '',
+      message: '',
+      agree: false,
+    });
+
+    const [errors, setErrors] = useState({
+      username: false,
+      email: false,
+      message: false,
+      agree: false,
+    });
+
+    const [submitted, setSubmitted] = useState(false);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { name, value, type, checked } = e.target as HTMLInputElement;
+      setFormData(prev => ({
+        ...prev,
+        [name]: type === 'checkbox' ? checked : value,
+      }));
+
+      // Clear error on change
+      if (errors[name as keyof typeof errors]) {
+        setErrors(prev => ({
+          ...prev,
+          [name]: false,
+        }));
+      }
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      // Validate
+      const newErrors = {
+        username: !formData.username,
+        email: !formData.email || !/^\S+@\S+\.\S+$/.test(formData.email),
+        message: !formData.message,
+        agree: !formData.agree,
+      };
+
+      setErrors(newErrors);
+
+      // Check if any errors
+      if (Object.values(newErrors).some(error => error)) {
+        return;
+      }
+
+      // Form is valid
+      setSubmitted(true);
+    };
+
+    if (submitted) {
+      return (
+        <div className="u-p-4 u-border u-border-success u-rounded u-bg-success-subtle">
+          <h3>Thank you for your submission!</h3>
+          <p>We received your message and will get back to you shortly.</p>
+          <button
+            className="c-btn c-btn--outline-primary u-mt-3"
+            onClick={() => {
+              setFormData({
+                username: '',
+                email: '',
+                message: '',
+                agree: false,
+              });
+              setErrors({
+                username: false,
+                email: false,
+                message: false,
+                agree: false,
+              });
+              setSubmitted(false);
+            }}
+          >
+            Send another message
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div style={{ width: '500px' }}>
+        <Form onSubmit={handleSubmit}>
+          <h2 className="u-mb-4">Contact Us</h2>
+
+          <FormGroup
+            label="Username"
+            htmlFor="username"
+            required
+            invalid={errors.username}
+            helperText={errors.username ? 'Username is required' : ''}
+          >
+            <Input
+              id="username"
+              name="username"
+              value={formData.username}
+              onChange={handleChange}
+              placeholder="Enter your username"
+              invalid={errors.username}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label="Email"
+            htmlFor="email"
+            required
+            invalid={errors.email}
+            helperText={errors.email ? 'Please enter a valid email address' : ''}
+          >
+            <Input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="Enter your email"
+              invalid={errors.email}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label="Message"
+            htmlFor="message"
+            required
+            invalid={errors.message}
+            helperText={errors.message ? 'Message is required' : ''}
+          >
+            <Textarea
+              id="message"
+              name="message"
+              value={formData.message}
+              onChange={handleChange}
+              placeholder="Enter your message"
+              rows={4}
+              invalid={errors.message}
+            />
+          </FormGroup>
+
+          <FormGroup
+            invalid={errors.agree}
+            helperText={errors.agree ? 'You must agree to the terms' : ''}
+          >
+            <Checkbox
+              id="agree"
+              name="agree"
+              checked={formData.agree}
+              onChange={handleChange}
+              label="I agree to the terms and conditions"
+              invalid={errors.agree}
+            />
+          </FormGroup>
+
+          <div className="u-d-flex u-gap-3 u-mt-4">
+            <button type="submit" className="c-btn c-btn--primary">
+              Submit
+            </button>
+            <button
+              type="button"
+              className="c-btn c-btn--outline-secondary"
+              onClick={() => {
+                setFormData({
+                  username: '',
+                  email: '',
+                  message: '',
+                  agree: false,
+                });
+                setErrors({
+                  username: false,
+                  email: false,
+                  message: false,
+                  agree: false,
+                });
+              }}
+            >
+              Clear
+            </button>
+          </div>
+        </Form>
+      </div>
+    );
+  },
+};
+
+// Disabled form
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: undefined,
+  },
+  render: args => (
+    <Form {...args}>
+      <FormGroup label="Name" htmlFor="name-disabled">
+        <Input id="name-disabled" placeholder="Enter your name" disabled />
+      </FormGroup>
+      <FormGroup label="Email" htmlFor="email-disabled">
+        <Input type="email" id="email-disabled" placeholder="Enter your email" disabled />
+      </FormGroup>
+      <FormGroup label="Country" htmlFor="country-disabled">
+        <Select
+          id="country-disabled"
+          name="country"
+          options={[
+            { value: 'us', label: 'United States' },
+            { value: 'ca', label: 'Canada' },
+          ]}
+          placeholder="Select your country"
+          disabled
+        />
+      </FormGroup>
+      <FormGroup>
+        <Checkbox
+          id="terms-disabled"
+          name="terms"
+          label="I agree to the Terms and Conditions"
+          disabled
+        />
+      </FormGroup>
+      <button type="submit" className="c-btn c-btn--primary" disabled>
+        Submit
+      </button>
+    </Form>
+  ),
+};
+
+// Form with validation states
+export const ValidationStates: Story = {
+  args: { children: undefined },
+  render: () => (
+    <div style={{ width: '500px' }}>
+      <Form>
+        <h2 className="u-mb-4">Form Validation</h2>
+
+        <FormGroup
+          label="Valid Input"
+          htmlFor="valid-input"
+          valid={true}
+          helperText="This input is valid"
+        >
+          <Input id="valid-input" value="John Doe" valid={true} />
+        </FormGroup>
+
+        <FormGroup
+          label="Invalid Input"
+          htmlFor="invalid-input"
+          invalid={true}
+          helperText="This input is invalid"
+        >
+          <Input id="invalid-input" value="test" invalid={true} />
+        </FormGroup>
+
+        <FormGroup
+          label="Valid Select"
+          htmlFor="valid-select"
+          valid={true}
+          helperText="This select is valid"
+        >
+          <Select
+            id="valid-select"
+            options={[
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' },
+            ]}
+            value="us"
+            valid={true}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label="Invalid Select"
+          htmlFor="invalid-select"
+          invalid={true}
+          helperText="This select is invalid"
+        >
+          <Select
+            id="invalid-select"
+            options={[
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' },
+            ]}
+            invalid={true}
+          />
+        </FormGroup>
+
+        <FormGroup valid={true} helperText="This checkbox is valid">
+          <Checkbox
+            id="valid-checkbox"
+            label="Valid Checkbox"
+            checked={true}
+            onChange={() => {}}
+            valid={true}
+          />
+        </FormGroup>
+
+        <FormGroup invalid={true} helperText="This checkbox is invalid">
+          <Checkbox id="invalid-checkbox" label="Invalid Checkbox" invalid={true} />
+        </FormGroup>
+      </Form>
+    </div>
+  ),
+};
+
+// Different form input sizes
+export const InputSizes: Story = {
+  args: { children: undefined },
+  render: () => (
+    <div style={{ width: '500px' }}>
+      <Form>
+        <h2 className="u-mb-4">Input Sizes</h2>
+
+        <FormGroup label="Small Input" htmlFor="small-input" size="sm">
+          <Input id="small-input" placeholder="Small input" size="sm" />
+        </FormGroup>
+
+        <FormGroup label="Medium Input (Default)" htmlFor="medium-input">
+          <Input id="medium-input" placeholder="Medium input" />
+        </FormGroup>
+
+        <FormGroup label="Large Input" htmlFor="large-input" size="lg">
+          <Input id="large-input" placeholder="Large input" size="lg" />
+        </FormGroup>
+
+        <FormGroup label="Small Select" htmlFor="small-select" size="sm">
+          <Select
+            id="small-select"
+            options={[
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' },
+            ]}
+            placeholder="Small select"
+            size="sm"
+          />
+        </FormGroup>
+
+        <FormGroup label="Large Select" htmlFor="large-select" size="lg">
+          <Select
+            id="large-select"
+            options={[
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' },
+            ]}
+            placeholder="Large select"
+            size="lg"
+          />
+        </FormGroup>
+      </Form>
+    </div>
+  ),
+};

package/src/components/Form/Form.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormProps } from '../../lib/types/components';
+import { useForm } from '../../lib/composables/useForm';
+
+/**
+ * Form - A component for creating form layouts
+ */
+export const Form: React.FC<FormProps> = ({
+  children,
+  onSubmit,
+  onReset,
+  className = '',
+  disabled = false,
+  id,
+  method = 'post',
+  encType,
+  noValidate = false,
+  autoComplete = 'on',
+}) => {
+  const { generateFormClass, handleSubmit, handleReset } = useForm({
+    disabled,
+  });
+
+  const formClass = generateFormClass({ className, disabled });
+
+  return (
+    <form
+      id={id}
+      className={formClass}
+      onSubmit={handleSubmit(onSubmit)}
+      onReset={handleReset(onReset)}
+      method={method}
+      encType={encType}
+      noValidate={noValidate}
+      autoComplete={autoComplete}
+    >
+      {children}
+    </form>
+  );
+};
+
+export type { FormProps };
+
+Form.displayName = 'Form';
+
+export default Form;

package/src/components/Form/FormGroup.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+import { FormGroup } from './FormGroup';
+import { Input } from './Input';
+import { Radio } from './Radio';
+import { Select } from './Select';
+import { Textarea } from './Textarea';
+
+const meta = {
+  title: 'Components/Form/FormGroup',
+  component: FormGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the form group',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text displayed below the input',
+    },
+    htmlFor: {
+      control: 'text',
+      description: 'ID of the form control this label is for',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Whether the field is required',
+    },
+    invalid: {
+      control: 'boolean',
+      description: 'Whether the field is invalid',
+    },
+    valid: {
+      control: 'boolean',
+      description: 'Whether the field is valid',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+  },
+} satisfies Meta<typeof FormGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic form group with text
+export const Basic: Story = {
+  args: {
+    label: 'Username',
+    htmlFor: 'username',
+    helperText: 'Enter your username',
+    required: true,
+    children: <Input id="username" placeholder="Enter username" />,
+  },
+};
+
+// Required field
+export const Required: Story = {
+  args: {
+    label: 'Email',
+    htmlFor: 'email',
+    required: true,
+    helperText: 'We will never share your email',
+    children: <Input id="email" type="email" placeholder="name@example.com" required />,
+  },
+};
+
+// With validation states
+export const ValidationStates: Story = {
+  args: {
+    children: <Input id="username" placeholder="Enter username" />,
+    label: 'Validation States',
+    htmlFor: 'username',
+    helperText: 'This is a helper text',
+    required: true,
+  },
+  render: args => (
+    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+      <FormGroup label="Username" htmlFor="username" helperText="Username is available" valid>
+        <Input id="username" value="johndoe" valid />
+      </FormGroup>
+
+      <FormGroup
+        label="Password"
+        htmlFor="password"
+        helperText="Password must be at least 8 characters"
+        invalid
+      >
+        <Input id="password" type="password" value="1234" invalid />
+      </FormGroup>
+    </div>
+  ),
+};
+
+// Different form control types
+export const FormControls: Story = {
+  args: {
+    children: <Input id="text-input" placeholder="Type something..." />,
+    label: 'Form Controls',
+    htmlFor: 'text-input',
+  },
+  render: args => (
+    <div style={{ display: 'grid', gap: '1rem', width: '100%', maxWidth: '400px' }}>
+      <FormGroup label="Text Input" htmlFor="text-input">
+        <Input id="text-input" placeholder="Type something..." />
+      </FormGroup>
+
+      <FormGroup label="Select" htmlFor="select">
+        <Select
+          id="select"
+          options={[
+            { value: '', label: 'Select an option' },
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' },
+          ]}
+        />
+      </FormGroup>
+
+      <FormGroup label="Checkbox" htmlFor="checkbox">
+        <Checkbox id="checkbox" label="Check me" />
+      </FormGroup>
+
+      <FormGroup label="Radio" htmlFor="radio">
+        <Radio id="radio" name="radio-group" label="Select me" />
+      </FormGroup>
+
+      <FormGroup label="Textarea" htmlFor="textarea">
+        <Textarea id="textarea" placeholder="Enter your message..." rows={3} />
+      </FormGroup>
+    </div>
+  ),
+};
+
+// Different sizes
+export const Sizes: Story = {
+  args: {
+    children: <Input id="small-input" size="sm" placeholder="Small input..." />,
+    label: 'Input Sizes',
+    htmlFor: 'small-input',
+    size: 'sm',
+  },
+  render: args => (
+    <div style={{ display: 'grid', gap: '1rem', width: '100%', maxWidth: '400px' }}>
+      <FormGroup label="Small Input" htmlFor="small-input" size="sm">
+        <Input id="small-input" size="sm" placeholder="Small input..." />
+      </FormGroup>
+
+      <FormGroup label="Medium Input (default)" htmlFor="medium-input" size="md">
+        <Input id="medium-input" size="md" placeholder="Medium input..." />
+      </FormGroup>
+
+      <FormGroup label="Large Input" htmlFor="large-input" size="lg">
+        <Input id="large-input" size="lg" placeholder="Large input..." />
+      </FormGroup>
+    </div>
+  ),
+};