@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Form/FormGroup.tsx

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

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

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

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

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

@@ -0,0 +1,152 @@
+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',
+  },
+};