@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -51,7 +51,7 @@ type Story = StoryObj<typeof meta>;
 // Basic form
 export const Basic: Story = {
   args: {},
-  render: (args) => (
+  render: args => (
     <Form {...args}>
       <FormGroup label="Name" htmlFor="name">
         <Input id="name" placeholder="Enter your name" />
@@ -59,7 +59,9 @@ export const Basic: Story = {
       <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>
+      <button type="submit" className="c-btn c-btn--primary">
+        Submit
+      </button>
     </Form>
   ),
 };
@@ -71,39 +73,34 @@ export const CompleteForm: Story = {
     <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
-          />
+          <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" 
+          <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" 
+          <Input
+            type="password"
+            id="password"
+            name="password"
             placeholder="Create a password"
             required
           />
         </FormGroup>
-        
+
         <FormGroup label="Country" htmlFor="country">
-          <Select 
-            id="country" 
+          <Select
+            id="country"
             name="country"
             options={[
               { value: 'us', label: 'United States' },
@@ -114,52 +111,30 @@ export const CompleteForm: Story = {
             placeholder="Select your country"
           />
         </FormGroup>
-        
+
         <FormGroup label="About yourself" htmlFor="bio">
-          <Textarea 
-            id="bio" 
-            name="bio" 
-            placeholder="Tell us about yourself"
-            rows={4}
-          />
+          <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
-          />
+          <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" 
-            />
+            <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>
+          <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>
@@ -174,75 +149,75 @@ export const Interactive: Story = {
       username: '',
       email: '',
       message: '',
-      agree: false
+      agree: false,
     });
-    
+
     const [errors, setErrors] = useState({
       username: false,
       email: false,
       message: false,
-      agree: 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
+        [name]: type === 'checkbox' ? checked : value,
       }));
-      
+
       // Clear error on change
       if (errors[name as keyof typeof errors]) {
         setErrors(prev => ({
           ...prev,
-          [name]: false
+          [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
+        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 
+          <button
             className="c-btn c-btn--outline-primary u-mt-3"
             onClick={() => {
               setFormData({
                 username: '',
                 email: '',
                 message: '',
-                agree: false
+                agree: false,
               });
               setErrors({
                 username: false,
                 email: false,
                 message: false,
-                agree: false
+                agree: false,
               });
               setSubmitted(false);
             }}
@@ -252,57 +227,57 @@ export const Interactive: Story = {
         </div>
       );
     }
-    
+
     return (
       <div style={{ width: '500px' }}>
         <Form onSubmit={handleSubmit}>
           <h2 className="u-mb-4">Contact Us</h2>
-          
-          <FormGroup 
-            label="Username" 
-            htmlFor="username" 
+
+          <FormGroup
+            label="Username"
+            htmlFor="username"
             required
             invalid={errors.username}
-            helperText={errors.username ? "Username is required" : ""}
+            helperText={errors.username ? 'Username is required' : ''}
           >
-            <Input 
-              id="username" 
-              name="username" 
+            <Input
+              id="username"
+              name="username"
               value={formData.username}
               onChange={handleChange}
               placeholder="Enter your username"
               invalid={errors.username}
             />
           </FormGroup>
-          
-          <FormGroup 
-            label="Email" 
-            htmlFor="email" 
+
+          <FormGroup
+            label="Email"
+            htmlFor="email"
             required
             invalid={errors.email}
-            helperText={errors.email ? "Please enter a valid email address" : ""}
+            helperText={errors.email ? 'Please enter a valid email address' : ''}
           >
-            <Input 
-              type="email" 
-              id="email" 
-              name="email" 
+            <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" 
+
+          <FormGroup
+            label="Message"
+            htmlFor="message"
             required
             invalid={errors.message}
-            helperText={errors.message ? "Message is required" : ""}
+            helperText={errors.message ? 'Message is required' : ''}
           >
-            <Textarea 
-              id="message" 
-              name="message" 
+            <Textarea
+              id="message"
+              name="message"
               value={formData.message}
               onChange={handleChange}
               placeholder="Enter your message"
@@ -310,38 +285,40 @@ export const Interactive: Story = {
               invalid={errors.message}
             />
           </FormGroup>
-          
+
           <FormGroup
             invalid={errors.agree}
-            helperText={errors.agree ? "You must agree to the terms" : ""}
+            helperText={errors.agree ? 'You must agree to the terms' : ''}
           >
-            <Checkbox 
-              id="agree" 
-              name="agree" 
+            <Checkbox
+              id="agree"
+              name="agree"
               checked={formData.agree}
               onChange={handleChange}
-              label="I agree to the terms and conditions" 
+              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" 
+            <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
+                  agree: false,
                 });
                 setErrors({
                   username: false,
                   email: false,
                   message: false,
-                  agree: false
+                  agree: false,
                 });
               }}
             >
@@ -359,7 +336,7 @@ export const Disabled: Story = {
   args: {
     disabled: true,
   },
-  render: (args) => (
+  render: args => (
     <Form {...args}>
       <FormGroup label="Name" htmlFor="name-disabled">
         <Input id="name-disabled" placeholder="Enter your name" disabled />
@@ -368,8 +345,8 @@ export const Disabled: Story = {
         <Input type="email" id="email-disabled" placeholder="Enter your email" disabled />
       </FormGroup>
       <FormGroup label="Country" htmlFor="country-disabled">
-        <Select 
-          id="country-disabled" 
+        <Select
+          id="country-disabled"
           name="country"
           options={[
             { value: 'us', label: 'United States' },
@@ -380,14 +357,16 @@ export const Disabled: Story = {
         />
       </FormGroup>
       <FormGroup>
-        <Checkbox 
-          id="terms-disabled" 
-          name="terms" 
-          label="I agree to the Terms and Conditions" 
+        <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>
+      <button type="submit" className="c-btn c-btn--primary" disabled>
+        Submit
+      </button>
     </Form>
   ),
 };
@@ -399,41 +378,33 @@ export const ValidationStates: Story = {
     <div style={{ width: '500px' }}>
       <Form>
         <h2 className="u-mb-4">Form Validation</h2>
-        
-        <FormGroup 
-          label="Valid Input" 
+
+        <FormGroup
+          label="Valid Input"
           htmlFor="valid-input"
           valid={true}
           helperText="This input is valid"
         >
-          <Input 
-            id="valid-input" 
-            value="John Doe"
-            valid={true}
-          />
+          <Input id="valid-input" value="John Doe" valid={true} />
         </FormGroup>
-        
-        <FormGroup 
-          label="Invalid Input" 
+
+        <FormGroup
+          label="Invalid Input"
           htmlFor="invalid-input"
           invalid={true}
           helperText="This input is invalid"
         >
-          <Input 
-            id="invalid-input" 
-            value="test"
-            invalid={true}
-          />
+          <Input id="invalid-input" value="test" invalid={true} />
         </FormGroup>
-        
-        <FormGroup 
-          label="Valid Select" 
+
+        <FormGroup
+          label="Valid Select"
           htmlFor="valid-select"
           valid={true}
           helperText="This select is valid"
         >
-          <Select 
-            id="valid-select" 
+          <Select
+            id="valid-select"
             options={[
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' },
@@ -442,15 +413,15 @@ export const ValidationStates: Story = {
             valid={true}
           />
         </FormGroup>
-        
-        <FormGroup 
-          label="Invalid Select" 
+
+        <FormGroup
+          label="Invalid Select"
           htmlFor="invalid-select"
           invalid={true}
           helperText="This select is invalid"
         >
-          <Select 
-            id="invalid-select" 
+          <Select
+            id="invalid-select"
             options={[
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' },
@@ -458,28 +429,13 @@ export const ValidationStates: Story = {
             invalid={true}
           />
         </FormGroup>
-        
-        <FormGroup 
-          valid={true}
-          helperText="This checkbox is valid"
-        >
-          <Checkbox 
-            id="valid-checkbox" 
-            label="Valid Checkbox" 
-            checked={true}
-            valid={true}
-          />
+
+        <FormGroup valid={true} helperText="This checkbox is valid">
+          <Checkbox id="valid-checkbox" label="Valid Checkbox" checked={true} valid={true} />
         </FormGroup>
-        
-        <FormGroup 
-          invalid={true}
-          helperText="This checkbox is invalid"
-        >
-          <Checkbox 
-            id="invalid-checkbox" 
-            label="Invalid Checkbox" 
-            invalid={true}
-          />
+
+        <FormGroup invalid={true} helperText="This checkbox is invalid">
+          <Checkbox id="invalid-checkbox" label="Invalid Checkbox" invalid={true} />
         </FormGroup>
       </Form>
     </div>
@@ -493,48 +449,22 @@ export const InputSizes: Story = {
     <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 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 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 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" 
+
+        <FormGroup label="Small Select" htmlFor="small-select" size="sm">
+          <Select
+            id="small-select"
             options={[
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' },
@@ -543,14 +473,10 @@ export const InputSizes: Story = {
             size="sm"
           />
         </FormGroup>
-        
-        <FormGroup 
-          label="Large Select" 
-          htmlFor="large-select"
-          size="lg"
-        >
-          <Select 
-            id="large-select" 
+
+        <FormGroup label="Large Select" htmlFor="large-select" size="lg">
+          <Select
+            id="large-select"
             options={[
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' },
@@ -562,4 +488,4 @@ export const InputSizes: Story = {
       </Form>
     </div>
   ),
-}; 
+};

package/src/components/Form/Form.tsx

@@ -17,12 +17,12 @@ export const Form: React.FC<FormProps> = ({
   noValidate = false,
   autoComplete = 'on',
 }) => {
-  const { generateFormClass, handleSubmit, handleReset } = useForm({ 
-    disabled 
+  const { generateFormClass, handleSubmit, handleReset } = useForm({
+    disabled,
   });
-  
+
   const formClass = generateFormClass({ className, disabled });
-  
+
   return (
     <form
       id={id}
@@ -39,8 +39,8 @@ export const Form: React.FC<FormProps> = ({
   );
 };
 
-export type { FormProps  };
+export type { FormProps };
 
 Form.displayName = 'Form';
 
-export default Form;
+export default Form;