@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -78,19 +78,14 @@ export const ValidationStates: Story = {
     label: 'Validation States',
     htmlFor: 'username',
     helperText: 'This is a helper text',
-    required: true
+    required: true,
   },
-  render: (args) => (
+  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
-      >
+      <FormGroup label="Username" htmlFor="username" helperText="Username is available" valid>
         <Input id="username" value="johndoe" valid />
       </FormGroup>
-      
+
       <FormGroup
         label="Password"
         htmlFor="password"
@@ -108,33 +103,33 @@ export const FormControls: Story = {
   args: {
     children: <Input id="text-input" placeholder="Type something..." />,
     label: 'Form Controls',
-    htmlFor: 'text-input'
+    htmlFor: 'text-input',
   },
-  render: (args) => (
+  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" 
+        <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>
@@ -148,33 +143,21 @@ export const Sizes: Story = {
     children: <Input id="small-input" size="sm" placeholder="Small input..." />,
     label: 'Input Sizes',
     htmlFor: 'small-input',
-    size: 'sm'
+    size: 'sm',
   },
-  render: (args) => (
+  render: args => (
     <div style={{ display: 'grid', gap: '1rem', width: '100%', maxWidth: '400px' }}>
-      <FormGroup 
-        label="Small Input" 
-        htmlFor="small-input"
-        size="sm"
-      >
+      <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"
-      >
+
+      <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"
-      >
+
+      <FormGroup label="Large Input" htmlFor="large-input" size="lg">
         <Input id="large-input" size="lg" placeholder="Large input..." />
       </FormGroup>
     </div>
   ),
-};
+};

package/src/components/Form/FormGroup.tsx

@@ -17,39 +17,37 @@ export const FormGroup: React.FC<FormGroupProps> = ({
   valid = false,
   size = 'md',
 }) => {
-  const { generateFormGroupClass } = useFormGroup({ 
-    size, disabled, invalid, valid 
+  const { generateFormGroupClass } = useFormGroup({
+    size,
+    disabled,
+    invalid,
+    valid,
   });
-  
-  const formGroupClass = generateFormGroupClass({ 
-    className, disabled, invalid, valid, size 
+
+  const formGroupClass = generateFormGroupClass({
+    className,
+    disabled,
+    invalid,
+    valid,
+    size,
   });
-  
+
   return (
     <div className={formGroupClass}>
       {label && (
-        <label 
-          className="c-form-group__label" 
-          htmlFor={htmlFor}
-        >
+        <label className="c-form-group__label" htmlFor={htmlFor}>
           {label}
           {required && <span className="c-form-group__required">*</span>}
         </label>
       )}
-      <div className="c-form-group__field">
-        {children}
-      </div>
-      {helperText && (
-        <div className="c-form-group__helper">
-          {helperText}
-        </div>
-      )}
+      <div className="c-form-group__field">{children}</div>
+      {helperText && <div className="c-form-group__helper">{helperText}</div>}
     </div>
   );
 };
 
-export type { FormGroupProps  };
+export type { FormGroupProps };
 
 FormGroup.displayName = 'FormGroup';
 
-export default FormGroup;
+export default FormGroup;

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

@@ -104,4 +104,4 @@ export const States: Story = {
       <Input placeholder="Invalid input" invalid />
     </div>
   ),
-}; 
+};

package/src/components/Form/Input.tsx

@@ -33,14 +33,24 @@ export const Input: React.FC<InputProps> = ({
   ariaLabel,
   ariaDescribedBy,
 }) => {
-  const { generateInputClass } = useInput({ 
-    size, variant, disabled, invalid, valid
+  const { generateInputClass } = useInput({
+    size,
+    variant,
+    disabled,
+    invalid,
+    valid,
   });
-  
-  const inputClass = generateInputClass({ 
-    className, size, variant, disabled, invalid, valid, type
+
+  const inputClass = generateInputClass({
+    className,
+    size,
+    variant,
+    disabled,
+    invalid,
+    valid,
+    type,
   });
-  
+
   return (
     <input
       type={type}
@@ -70,8 +80,8 @@ export const Input: React.FC<InputProps> = ({
   );
 };
 
-export type { InputProps  };
+export type { InputProps };
 
 Input.displayName = 'Input';
 
-export default Input;
+export default Input;

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

@@ -56,41 +56,28 @@ export const Checked: Story = {
 
 // Radio button group
 export const RadioGroup: Story = {
-  render: (args) => (
+  render: args => (
     <div className="u-d-flex u-flex-column u-gap-2">
-      <Radio 
-        label="Option 1" 
-        name="radioGroup" 
-        value="option1" 
-        checked 
-      />
-      <Radio 
-        label="Option 2" 
-        name="radioGroup" 
-        value="option2" 
-      />
-      <Radio 
-        label="Option 3" 
-        name="radioGroup" 
-        value="option3" 
-      />
+      <Radio label="Option 1" name="radioGroup" value="option1" checked />
+      <Radio label="Option 2" name="radioGroup" value="option2" />
+      <Radio label="Option 3" name="radioGroup" value="option3" />
     </div>
   ),
 };
 
 // Radio button states
 export const States: Story = {
-  render: (args) => (
+  render: args => (
     <div className="u-d-flex u-flex-column u-gap-2">
       <Radio label="Default radio" name="states" value="default" />
       <Radio label="Checked radio" name="states" value="checked" checked />
       <Radio label="Disabled radio" name="states" value="disabled" disabled />
-      <Radio 
-        label="Disabled and checked radio" 
-        name="states" 
-        value="disabledChecked" 
-        disabled 
-        checked 
+      <Radio
+        label="Disabled and checked radio"
+        name="states"
+        value="disabledChecked"
+        disabled
+        checked
       />
       <Radio label="Valid radio" name="states" value="valid" valid checked />
       <Radio label="Invalid radio" name="states" value="invalid" invalid />
@@ -105,4 +92,4 @@ export const WithoutLabel: Story = {
     value: 'noLabel',
     ariaLabel: 'Radio button without visible label',
   },
-}; 
+};

package/src/components/Form/Radio.tsx

@@ -21,13 +21,18 @@ export const Radio: React.FC<RadioProps> = ({
   ariaDescribedBy,
 }) => {
   const { generateRadioClass } = useRadio({
-    disabled, invalid, valid
+    disabled,
+    invalid,
+    valid,
   });
-  
+
   const radioClass = generateRadioClass({
-    className, disabled, invalid, valid
+    className,
+    disabled,
+    invalid,
+    valid,
   });
-  
+
   return (
     <div className={radioClass}>
       <input
@@ -53,8 +58,8 @@ export const Radio: React.FC<RadioProps> = ({
   );
 };
 
-export type { RadioProps  };
+export type { RadioProps };
 
 Radio.displayName = 'Radio';
 
-export default Radio;
+export default Radio;

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

@@ -76,15 +76,15 @@ export const Interactive: Story = {
   },
   render: () => {
     const [selectedValue, setSelectedValue] = useState('');
-    
+
     const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
       setSelectedValue(e.target.value);
     };
-    
+
     return (
       <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-        <Select 
-          options={countries} 
+        <Select
+          options={countries}
           placeholder="Select a country"
           value={selectedValue}
           onChange={handleChange}
@@ -96,7 +96,7 @@ export const Interactive: Story = {
         )}
       </div>
     );
-  }
+  },
 };
 
 // Select sizes
@@ -149,4 +149,4 @@ export const DisabledOptions: Story = {
     ],
     placeholder: 'Select a country',
   },
-}; 
+};

package/src/components/Form/Select.tsx

@@ -25,12 +25,19 @@ export const Select: React.FC<SelectProps> = ({
   ariaLabel,
   ariaDescribedBy,
 }) => {
-  const { generateSelectClass } = useSelect({ 
-    size, disabled, invalid, valid
+  const { generateSelectClass } = useSelect({
+    size,
+    disabled,
+    invalid,
+    valid,
   });
-  
-  const selectClass = generateSelectClass({ 
-    className, size, disabled, invalid, valid
+
+  const selectClass = generateSelectClass({
+    className,
+    size,
+    disabled,
+    invalid,
+    valid,
   });
 
   const [isOpen, setIsOpen] = useState(false);
@@ -82,32 +89,32 @@ export const Select: React.FC<SelectProps> = ({
   };
 
   // Handle item selection
-  const handleItemClick = (option: { value: string, label: string }) => {
+  const handleItemClick = (option: { value: string; label: string }) => {
     setSelectedLabel(option.label);
     setIsOpen(false);
     if (bodyRef.current) {
       bodyRef.current.style.height = '0px';
     }
-    
+
     if (nativeSelectRef.current) {
       nativeSelectRef.current.value = option.value;
     }
-    
+
     if (onChange) {
       // Create a synthetic event
       const event = {
         target: {
           name,
-          value: option.value
-        }
+          value: option.value,
+        },
       } as React.ChangeEvent<HTMLSelectElement>;
       onChange(event);
     }
   };
 
   return (
-    <div 
-      className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`} 
+    <div
+      className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
       ref={dropdownRef}
       aria-expanded={isOpen}
     >
@@ -133,43 +140,35 @@ export const Select: React.FC<SelectProps> = ({
             {placeholder}
           </option>
         )}
-        {options.map((option) => (
-          <option 
-            key={option.value} 
-            value={option.value} 
-            disabled={option.disabled}
-          >
+        {options.map(option => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
             {option.label}
           </option>
         ))}
       </select>
-      
+
       {/* Custom Select UI */}
-      <div 
-        className={SELECT.CLASSES.SELECTED}
-        onClick={handleToggle}
-        aria-disabled={disabled}
-      >
+      <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
         {selectedLabel}
       </div>
-      
+
       <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
-      
+
       <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
         <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
           <ul className={SELECT.CLASSES.SELECT_ITEMS}>
             {options.map((option, index) => (
-              <li 
+              <li
                 key={option.value}
                 className={SELECT.CLASSES.SELECT_ITEM}
                 data-value={option.value}
                 onClick={() => !option.disabled && handleItemClick(option)}
               >
                 <label htmlFor={`SelectItem${index}`} className="c-checkbox">
-                  <input 
-                    type="checkbox" 
-                    id={`SelectItem${index}`} 
-                    className="c-checkbox__input c-select__item-input" 
+                  <input
+                    type="checkbox"
+                    id={`SelectItem${index}`}
+                    className="c-checkbox__input c-select__item-input"
                     checked={value === option.value}
                     readOnly
                     disabled={option.disabled}
@@ -185,9 +184,8 @@ export const Select: React.FC<SelectProps> = ({
   );
 };
 
-export type { SelectProps  };
+export type { SelectProps };
 
 Select.displayName = 'Select';
 
 export default Select;
-  

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

@@ -113,7 +113,12 @@ export const States: Story = {
       <Textarea placeholder="Disabled textarea" disabled rows={2} />
       <Textarea placeholder="Valid textarea" valid rows={2} />
       <Textarea placeholder="Invalid textarea" invalid rows={2} />
-      <Textarea placeholder="Read-only textarea" readOnly value="This content cannot be edited" rows={2} />
+      <Textarea
+        placeholder="Read-only textarea"
+        readOnly
+        value="This content cannot be edited"
+        rows={2}
+      />
     </div>
   ),
-}; 
+};

package/src/components/Form/Textarea.tsx

@@ -29,14 +29,23 @@ export const Textarea: React.FC<TextareaProps> = ({
   ariaLabel,
   ariaDescribedBy,
 }) => {
-  const { generateTextareaClass } = useTextarea({ 
-    size, variant, disabled, invalid, valid
+  const { generateTextareaClass } = useTextarea({
+    size,
+    variant,
+    disabled,
+    invalid,
+    valid,
   });
-  
-  const textareaClass = generateTextareaClass({ 
-    className, size, variant, disabled, invalid, valid
+
+  const textareaClass = generateTextareaClass({
+    className,
+    size,
+    variant,
+    disabled,
+    invalid,
+    valid,
   });
-  
+
   return (
     <textarea
       className={textareaClass}
@@ -62,8 +71,8 @@ export const Textarea: React.FC<TextareaProps> = ({
   );
 };
 
-export type { TextareaProps  };
+export type { TextareaProps };
 
 Textarea.displayName = 'Textarea';
 
-export default Textarea;
+export default Textarea;

package/src/components/Form/index.ts

@@ -4,4 +4,4 @@ export { default as Input } from './Input';
 export { default as Select } from './Select';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
-export { default as Textarea } from './Textarea'; 
+export { default as Textarea } from './Textarea';