npm package: @kyawthihasoe/mytc
Description: MYTC Packages
Author: Kyaw Thiha Soe
Latest version: 1.0.0

# React Button

A customizable React Button component with various variants, sizes, and styling options.

## Installation

```bash
npm install @kyawthihasoe/react-button
# or
yarn add @kyawthihasoe/react-button
```

## Usage

```tsx
import { Button } from '@kyawthihasoe/react-button';

function App() {
  return (
    <Button
      variant="primary"
      size="medium"
      onClick={() => console.log('Button clicked!')}
    >
      Click me
    </Button>
  );
}
```

## Features

- Multiple variants (primary, secondary, danger, success)
- Different size options (small, medium, large)
- Full width option
- TypeScript support
- Extends native button HTML attributes
- Customizable through CSS classes

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'danger' \| 'success' | No | 'primary' | The visual style of the button |
| size | 'small' \| 'medium' \| 'large' | No | 'medium' | Size of the button |
| fullWidth | boolean | No | false | Whether the button should take full width of its container |
| children | ReactNode | Yes | - | Content to be displayed in the button |
| className | string | No | '' | Additional CSS classes to apply to the button |

The component also accepts all standard HTML button attributes (onClick, disabled, type, etc.).

## Styling

The button comes with default styles but can be customized using CSS. The component uses the following CSS classes:

- `common-button`: Base button styles
- `button-{variant}`: Styles for each variant (e.g., `button-primary`, `button-secondary`)
- `button-{size}`: Styles for each size (e.g., `button-small`, `button-medium`)
- `button-full-width`: Applied when fullWidth prop is true

## License

MIT

# React Modal

A customizable React Modal component with various size options and keyboard support.

## Installation

```bash
npm install @kyawthihasoe/react-modal
# or
yarn add @kyawthihasoe/react-modal
```

## Usage

```tsx
import { Modal } from '@kyawthihasoe/react-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Modal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="My Modal"
      size="medium"
    >
      <p>This is the modal content</p>
    </Modal>
  );
}
```

## Features

- Multiple size options (small, medium, large)
- Keyboard support (ESC to close)
- Click outside to close
- Customizable title
- Body scroll lock when modal is open
- TypeScript support

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| isOpen | boolean | Yes | - | Controls the visibility of the modal |
| onClose | () => void | Yes | - | Callback function when modal is closed |
| title | string | No | - | Optional title for the modal |
| children | ReactNode | Yes | - | Content to be displayed in the modal |
| size | 'small' \| 'medium' \| 'large' | No | 'medium' | Size of the modal |

## License

MIT

# React DataGrid

A customizable React DataGrid component with sorting and pagination capabilities.

## Installation

```bash
npm install @kyawthihasoe/react-datagrid
# or
yarn add @kyawthihasoe/react-datagrid
```

## Usage

```tsx
import { DataGrid } from '@kyawthihasoe/react-datagrid';

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'age', headerName: 'Age', sortable: true },
];

const rows = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  // ... more rows
];

function App() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
      pageSize={10}
    />
  );
}
```

## Features

- Sortable columns
- Pagination
- Customizable column widths
- Responsive design
- TypeScript support

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| columns | Column[] | Yes | - | Array of column definitions |
| rows | any[] | Yes | - | Array of data objects |
| pageSize | number | No | 10 | Number of rows per page |

### Column Definition

```typescript
interface Column {
  field: string;      // Field name in the data object
  headerName: string; // Display name for the column
  width?: number;     // Optional column width
  sortable?: boolean; // Whether the column is sortable
}
```

## License

MIT