@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapSwitch/README.md

@@ -1,351 +0,0 @@
-# CapSwitch
-
-Switch component for toggling between two states. Built on Ant Design v6 with Cap UI styling.
-
-## Summary of Changes from cap-ui-library
-
-The `CapSwitch` component has been migrated from `cap-ui-library` to `blaze-ui` with the following updates:
-
-- **TypeScript**: Full TypeScript implementation with proper type definitions
-- **Ant Design v6**: Updated to use Ant Design v6 APIs
-- **Functional Component**: Converted from class component to functional component with `forwardRef` support
-- **SCSS Modules**: Converted from regular SCSS to SCSS modules
-- **Removed HOC**: Removed `ComponentWithLabelHOC` wrapper (use `CapLabel` component separately if needed)
-- **No Breaking Changes**: Fully backward compatible with `cap-ui-library` v8.x
-
-## Props
-
-The component accepts all Ant Design v6 `Switch` props. Key props include:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `checked` | `boolean` | `false` | Whether the switch is checked (controlled mode) |
-| `defaultChecked` | `boolean` | `false` | Default checked state (uncontrolled mode) |
-| `disabled` | `boolean` | `false` | Whether the switch is disabled |
-| `size` | `'small' \| 'default'` | `'default'` | The size of the switch |
-| `loading` | `boolean` | `false` | Loading state of switch |
-| `autoFocus` | `boolean` | `false` | Get focus when component mounted |
-| `checkedChildren` | `React.ReactNode` | - | Content to be shown when the state is checked |
-| `unCheckedChildren` | `React.ReactNode` | - | Content to be shown when the state is unchecked |
-| `onChange` | `(checked: boolean, event: React.MouseEvent \| React.KeyboardEvent) => void` | - | Callback function when switch state changes |
-| `onClick` | `(checked: boolean, event: React.MouseEvent) => void` | - | Callback function when switch is clicked |
-| `className` | `string` | - | Additional CSS class name |
-
-**Note**: The component accepts all other Ant Design v6 `Switch` props. See [Ant Design Switch documentation](https://ant.design/components/switch) for complete prop list.
-
-## API Changes
-
-### Removed Props
-
-- **`children`**: Removed support for children prop. The original component wrapped children through `ComponentWithLabelHOC`, but this has been removed. Use `CapLabel` component separately if you need label functionality.
-
-### Controlled vs Uncontrolled Mode
-
-The component supports both controlled and uncontrolled modes:
-
-**Controlled Mode:**
-```tsx
-const [checked, setChecked] = useState(false);
-
-<CapSwitch 
-  checked={checked} 
-  onChange={(newChecked) => setChecked(newChecked)}
-/>
-```
-
-**Uncontrolled Mode:**
-```tsx
-<CapSwitch 
-  defaultChecked={false}
-  onChange={(checked) => console.log('Changed:', checked)}
-/>
-```
-
-## Behavioral Changes
-
-### No Breaking Changes
-
-The component maintains **100% backward compatibility** with `cap-ui-library` v8.x for all standard Switch props. All existing code will continue to work without modifications.
-
-### Removed Features
-
-- **ComponentWithLabelHOC**: The original component was wrapped with `ComponentWithLabelHOC` which provided label functionality. This wrapper has been removed. If you need label functionality, use `CapLabel` component separately:
-
-**Before (cap-ui-library):**
-```tsx
-<CapSwitch checked={true}>
-  <span>Enable Feature</span>
-</CapSwitch>
-```
-
-**After (blaze-ui):**
-```tsx
-<CapRow align="middle" gap={12}>
-  <CapColumn>
-    <CapSwitch checked={true} />
-  </CapColumn>
-  <CapColumn>
-    <CapLabel>Enable Feature</CapLabel>
-  </CapColumn>
-</CapRow>
-```
-
-### Enhanced Features
-
-- **Ref Forwarding**: The component now supports ref forwarding using `React.forwardRef`
-- **TypeScript Support**: Full TypeScript type definitions for better developer experience
-- **Improved Styling**: Enhanced SCSS modules with better size consistency and visual alignment
-
-## Migration Steps for Consumers
-
-### Step 1: Update Imports
-
-**Before:**
-```tsx
-import { CapSwitch } from '@capillarytech/cap-ui-library';
-```
-
-**After:**
-```tsx
-import { CapSwitch } from '@capillarytech/blaze-ui';
-```
-
-### Step 2: Update Label Usage (If Applicable)
-
-If you were using the `children` prop for labels, update to use `CapLabel` separately:
-
-**Before:**
-```tsx
-<CapSwitch checked={isEnabled}>
-  <span>Enable Notifications</span>
-</CapSwitch>
-```
-
-**After:**
-```tsx
-import { CapSwitch, CapLabel, CapRow, CapColumn } from '@capillarytech/blaze-ui';
-
-<CapRow align="middle" gap={12}>
-  <CapColumn>
-    <CapSwitch checked={isEnabled} />
-  </CapColumn>
-  <CapColumn>
-    <CapLabel>Enable Notifications</CapLabel>
-  </CapColumn>
-</CapRow>
-```
-
-### Step 3: No Other Changes Required
-
-All other props and usage patterns remain the same. The component is fully backward compatible.
-
-## Code Examples
-
-### Basic Usage
-
-```tsx
-import { CapSwitch } from '@capillarytech/blaze-ui';
-
-function MyComponent() {
-  const [enabled, setEnabled] = useState(false);
-
-  return (
-    <CapSwitch 
-      checked={enabled}
-      onChange={setEnabled}
-    />
-  );
-}
-```
-
-### Uncontrolled Mode
-
-```tsx
-<CapSwitch 
-  defaultChecked={false}
-  onChange={(checked) => {
-    console.log('Switch toggled:', checked);
-  }}
-/>
-```
-
-### With Text Content
-
-```tsx
-<CapSwitch 
-  checked={true}
-  checkedChildren="ON"
-  unCheckedChildren="OFF"
-/>
-```
-
-### With Custom Content
-
-```tsx
-<CapSwitch 
-  checked={true}
-  checkedChildren={<span style={{ color: 'green' }}>✓</span>}
-  unCheckedChildren={<span style={{ color: 'red' }}>✗</span>}
-/>
-```
-
-### Disabled State
-
-```tsx
-<CapSwitch 
-  checked={true}
-  disabled
-/>
-```
-
-### Loading State
-
-```tsx
-<CapSwitch 
-  checked={true}
-  loading
-/>
-```
-
-### Different Sizes
-
-```tsx
-<CapSwitch size="default" checked={true} />
-<CapSwitch size="small" checked={true} />
-```
-
-### With Label (Using CapLabel)
-
-```tsx
-import { CapSwitch, CapLabel, CapRow, CapColumn } from '@capillarytech/blaze-ui';
-
-<CapRow align="middle" gap={12}>
-  <CapColumn>
-    <CapSwitch checked={notificationsEnabled} />
-  </CapColumn>
-  <CapColumn>
-    <CapLabel>Email Notifications</CapLabel>
-  </CapColumn>
-</CapRow>
-```
-
-### Settings Panel Example
-
-```tsx
-import { useState } from 'react';
-import { CapSwitch, CapRow, CapColumn } from '@capillarytech/blaze-ui';
-
-function SettingsPanel() {
-  const [settings, setSettings] = useState({
-    notifications: true,
-    darkMode: false,
-    autoSave: true,
-  });
-
-  const handleChange = (key: string) => (checked: boolean) => {
-    setSettings(prev => ({ ...prev, [key]: checked }));
-  };
-
-  return (
-    <CapRow gap={16} vertical>
-      <CapColumn>
-        <CapRow justify="space-between" align="middle">
-          <CapColumn>Email Notifications</CapColumn>
-          <CapColumn>
-            <CapSwitch
-              checked={settings.notifications}
-              onChange={handleChange('notifications')}
-            />
-          </CapColumn>
-        </CapRow>
-      </CapColumn>
-      <CapColumn>
-        <CapRow justify="space-between" align="middle">
-          <CapColumn>Dark Mode</CapColumn>
-          <CapColumn>
-            <CapSwitch
-              checked={settings.darkMode}
-              onChange={handleChange('darkMode')}
-            />
-          </CapColumn>
-        </CapRow>
-      </CapColumn>
-      <CapColumn>
-        <CapRow justify="space-between" align="middle">
-          <CapColumn>Auto Save</CapColumn>
-          <CapColumn>
-            <CapSwitch
-              checked={settings.autoSave}
-              onChange={handleChange('autoSave')}
-            />
-          </CapColumn>
-        </CapRow>
-      </CapColumn>
-    </CapRow>
-  );
-}
-```
-
-### With Ref Forwarding
-
-```tsx
-import { useRef } from 'react';
-
-function MyComponent() {
-  const switchRef = useRef<HTMLButtonElement>(null);
-
-  const handleFocus = () => {
-    switchRef.current?.focus();
-  };
-
-  return (
-    <div>
-      <CapSwitch ref={switchRef} />
-      <button onClick={handleFocus}>Focus Switch</button>
-    </div>
-  );
-}
-```
-
-## Import Examples
-
-### Default Import
-
-```tsx
-import CapSwitch from '@capillarytech/blaze-ui/components/CapSwitch';
-```
-
-### Named Import
-
-```tsx
-import { CapSwitch } from '@capillarytech/blaze-ui';
-```
-
-### With TypeScript Types
-
-```tsx
-import { CapSwitch } from '@capillarytech/blaze-ui';
-import type { CapSwitchProps } from '@capillarytech/blaze-ui';
-
-const props: CapSwitchProps = {
-  checked: true,
-  disabled: false,
-  size: 'default',
-};
-```
-
-## Notes
-
-- **No Breaking Changes**: The component is fully backward compatible with `cap-ui-library` v8.x for all standard Switch props
-- **Label Support**: If you need label functionality, use `CapLabel` component separately with `CapRow`/`CapColumn` for layout
-- **Ref Forwarding**: The component supports ref forwarding to the underlying Switch element
-- **Controlled/Uncontrolled**: Supports both controlled (`checked` prop) and uncontrolled (`defaultChecked` prop) modes
-- **Styling**: Uses SCSS modules with consistent sizing and visual alignment
-
-## Related Components
-
-- `CapLabel` - Label component for use with switches
-- `CapRow` / `CapColumn` - Layout components for arranging switches with labels
-- `CapCheckbox` - Checkbox component for similar use cases
-- `CapRadio` - Radio button component for selection
-