@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/Form/FormGroup.tsx

@@ -1,53 +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,87 +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,95 +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,65 +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;

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

@@ -1,152 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Select } from './Select';
-
-const meta = {
-  title: 'Components/Form/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the select',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the select is disabled',
-    },
-    invalid: {
-      control: 'boolean',
-      description: 'Whether the select is invalid',
-    },
-    valid: {
-      control: 'boolean',
-      description: 'Whether the select is valid',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text',
-    },
-    multiple: {
-      control: 'boolean',
-      description: 'Whether multiple options can be selected',
-    },
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample options
-const countries = [
-  { value: 'us', label: 'United States' },
-  { value: 'ca', label: 'Canada' },
-  { value: 'mx', label: 'Mexico' },
-  { value: 'uk', label: 'United Kingdom' },
-  { value: 'fr', label: 'France' },
-  { value: 'de', label: 'Germany' },
-  { value: 'jp', label: 'Japan' },
-];
-
-// Basic select
-export const Basic: Story = {
-  args: {
-    options: countries,
-    placeholder: 'Select a country',
-  },
-};
-
-// With selected value
-export const WithValue: Story = {
-  args: {
-    options: countries,
-    value: 'ca',
-    placeholder: 'Select a country',
-  },
-};
-
-// Interactive select
-export const Interactive: Story = {
-  args: {
-    options: countries,
-  },
-  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}
-          placeholder="Select a country"
-          value={selectedValue}
-          onChange={handleChange}
-        />
-        {selectedValue && (
-          <div className="u-mt-3">
-            Selected value: <strong>{selectedValue}</strong>
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-// Select sizes
-export const Sizes: Story = {
-  args: {
-    options: countries,
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Select size="sm" options={countries} placeholder="Small select" />
-      <Select size="md" options={countries} placeholder="Medium select (default)" />
-      <Select size="lg" options={countries} placeholder="Large select" />
-    </div>
-  ),
-};
-
-// Select states
-export const States: Story = {
-  args: {
-    options: countries,
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Select options={countries} placeholder="Default select" />
-      <Select options={countries} placeholder="Disabled select" disabled />
-      <Select options={countries} placeholder="Valid select" valid value="us" />
-      <Select options={countries} placeholder="Invalid select" invalid />
-    </div>
-  ),
-};
-
-// Multiple select
-export const Multiple: Story = {
-  args: {
-    options: countries,
-    placeholder: 'Select multiple countries',
-    multiple: true,
-  },
-};
-
-// With disabled options
-export const DisabledOptions: Story = {
-  args: {
-    options: [
-      { value: 'us', label: 'United States' },
-      { value: 'ca', label: 'Canada' },
-      { value: 'mx', label: 'Mexico', disabled: true },
-      { value: 'uk', label: 'United Kingdom' },
-      { value: 'fr', label: 'France', disabled: true },
-    ],
-    placeholder: 'Select a country',
-  },
-};