@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,180 +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>
-  ),
-};

package/src/components/Form/FormGroup.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { FormGroupProps } from '../../lib/types/components';
-import { useFormGroup } from '../../lib/composables/useFormGroup';
-
-/**
- * FormGroup - A component for grouping form controls with labels and help text
- */
-export const FormGroup: React.FC<FormGroupProps> = ({
-  children,
-  label,
-  helperText,
-  htmlFor,
-  className = '',
-  disabled = false,
-  required = false,
-  invalid = false,
-  valid = false,
-  size = 'md',
-}) => {
-  const { generateFormGroupClass } = useFormGroup({ 
-    size, disabled, invalid, valid 
-  });
-  
-  const formGroupClass = generateFormGroupClass({ 
-    className, disabled, invalid, valid, size 
-  });
-  
-  return (
-    <div className={formGroupClass}>
-      {label && (
-        <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>
-  );
-};
-
-export type { FormGroupProps  };
-
-FormGroup.displayName = 'FormGroup';
-
-export default FormGroup;

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

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Input } from './Input';
-
-const meta = {
-  title: 'Components/Form/Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: { type: 'select' },
-      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
-      description: 'Input type',
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the input',
-    },
-    variant: {
-      control: { type: 'select' },
-      options: ['primary', 'success', 'danger', 'warning', 'info'],
-      description: 'Color variant of the input',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the input is disabled',
-    },
-    invalid: {
-      control: 'boolean',
-      description: 'Whether the input is invalid',
-    },
-    valid: {
-      control: 'boolean',
-      description: 'Whether the input is valid',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text',
-    },
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic text input
-export const Basic: Story = {
-  args: {
-    placeholder: 'Enter text here',
-    type: 'text',
-  },
-};
-
-// Input sizes
-export const Sizes: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Input size="sm" placeholder="Small input" />
-      <Input size="md" placeholder="Medium input (default)" />
-      <Input size="lg" placeholder="Large input" />
-    </div>
-  ),
-};
-
-// Input types
-export const Types: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Input type="text" placeholder="Text input" />
-      <Input type="email" placeholder="Email input" />
-      <Input type="password" placeholder="Password input" />
-      <Input type="number" placeholder="Number input" />
-      <Input type="search" placeholder="Search input" />
-      <Input type="tel" placeholder="Tel input" />
-      <Input type="url" placeholder="URL input" />
-    </div>
-  ),
-};
-
-// Input variants
-export const Variants: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Input variant="primary" placeholder="Primary input" />
-      <Input variant="secondary" placeholder="Secondary input" />
-      <Input variant="success" placeholder="Success input" />
-      <Input variant="error" placeholder="Error input" />
-      <Input variant="warning" placeholder="Warning input" />
-      <Input variant="info" placeholder="Info input" />
-    </div>
-  ),
-};
-
-// States
-export const States: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Input placeholder="Default input" />
-      <Input placeholder="Disabled input" disabled />
-      <Input placeholder="Valid input" valid />
-      <Input placeholder="Invalid input" invalid />
-    </div>
-  ),
-}; 

package/src/components/Form/Input.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { InputProps } from '../../lib/types/components';
-import { useInput } from '../../lib/composables/useInput';
-
-/**
- * Input - A component for text input fields
- */
-export const Input: React.FC<InputProps> = ({
-  type = 'text',
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder,
-  className = '',
-  disabled = false,
-  required = false,
-  readOnly = false,
-  id,
-  name,
-  autoComplete,
-  autoFocus = false,
-  size = 'md',
-  variant,
-  invalid = false,
-  valid = false,
-  maxLength,
-  minLength,
-  pattern,
-  min,
-  max,
-  step,
-  ariaLabel,
-  ariaDescribedBy,
-}) => {
-  const { generateInputClass } = useInput({ 
-    size, variant, disabled, invalid, valid
-  });
-  
-  const inputClass = generateInputClass({ 
-    className, size, variant, disabled, invalid, valid, type
-  });
-  
-  return (
-    <input
-      type={type}
-      className={inputClass}
-      value={value}
-      onChange={onChange}
-      onBlur={onBlur}
-      onFocus={onFocus}
-      placeholder={placeholder}
-      disabled={disabled}
-      required={required}
-      readOnly={readOnly}
-      id={id}
-      name={name}
-      autoComplete={autoComplete}
-      autoFocus={autoFocus}
-      maxLength={maxLength}
-      minLength={minLength}
-      pattern={pattern}
-      min={min}
-      max={max}
-      step={step}
-      aria-label={ariaLabel}
-      aria-describedby={ariaDescribedBy}
-      aria-invalid={invalid}
-    />
-  );
-};
-
-export type { InputProps  };
-
-Input.displayName = 'Input';
-
-export default Input;

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

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Radio } from './Radio';
-
-const meta = {
-  title: 'Components/Form/Radio',
-  component: Radio,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Radio button label text',
-    },
-    checked: {
-      control: 'boolean',
-      description: 'Whether the radio button is checked',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the radio button is disabled',
-    },
-    invalid: {
-      control: 'boolean',
-      description: 'Whether the radio button is invalid',
-    },
-    valid: {
-      control: 'boolean',
-      description: 'Whether the radio button is valid',
-    },
-  },
-} satisfies Meta<typeof Radio>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic radio button
-export const Basic: Story = {
-  args: {
-    label: 'Option 1',
-    name: 'option',
-    value: 'option1',
-  },
-};
-
-// Checked state
-export const Checked: Story = {
-  args: {
-    label: 'Option 1',
-    name: 'option',
-    value: 'option1',
-    checked: true,
-  },
-};
-
-// Radio button group
-export const RadioGroup: Story = {
-  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" 
-      />
-    </div>
-  ),
-};
-
-// Radio button states
-export const States: Story = {
-  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="Valid radio" name="states" value="valid" valid checked />
-      <Radio label="Invalid radio" name="states" value="invalid" invalid />
-    </div>
-  ),
-};
-
-// Without label
-export const WithoutLabel: Story = {
-  args: {
-    name: 'noLabel',
-    value: 'noLabel',
-    ariaLabel: 'Radio button without visible label',
-  },
-}; 

package/src/components/Form/Radio.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { RadioProps } from '../../lib/types/components';
-import { useRadio } from '../../lib/composables/useRadio';
-
-/**
- * Radio - A component for radio button inputs
- */
-export const Radio: React.FC<RadioProps> = ({
-  label,
-  checked = false,
-  onChange,
-  className = '',
-  disabled = false,
-  required = false,
-  id,
-  name,
-  value,
-  invalid = false,
-  valid = false,
-  ariaLabel,
-  ariaDescribedBy,
-}) => {
-  const { generateRadioClass } = useRadio({
-    disabled, invalid, valid
-  });
-  
-  const radioClass = generateRadioClass({
-    className, disabled, invalid, valid
-  });
-  
-  return (
-    <div className={radioClass}>
-      <input
-        type="radio"
-        className="c-radio__input"
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        required={required}
-        id={id}
-        name={name}
-        value={value}
-        aria-label={!label ? ariaLabel : undefined}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-      />
-      {label && (
-        <label className="c-radio__label" htmlFor={id}>
-          {label}
-        </label>
-      )}
-    </div>
-  );
-};
-
-export type { RadioProps  };
-
-Radio.displayName = 'Radio';
-
-export default Radio;