@shohojdhara/atomix 0.1.26 → 0.1.28

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

@@ -1,491 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Form } from './Form';
-import { FormGroup } from './FormGroup';
-import { Input } from './Input';
-import { Select } from './Select';
-import { Checkbox } from './Checkbox';
-import { Radio } from './Radio';
-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',
-  },
-  tags: ['autodocs'],
-  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: {},
-  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: {},
-  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: {},
-  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,
-  },
-  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: {},
-  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} 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: {},
-  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

@@ -1,46 +0,0 @@
-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

@@ -1,163 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FormGroup } from './FormGroup';
-import { Input } from './Input';
-import { Select } from './Select';
-import { Checkbox } from './Checkbox';
-import { Radio } from './Radio';
-import { Textarea } from './Textarea';
-
-const meta = {
-  title: 'Components/Form/FormGroup',
-  component: FormGroup,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  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>
-  ),
-};